Skip to content

Commit 4ee4dbd

Browse files
paras20xxparas20xx
committed
Improved handling of some cases where custom userAgent is being used
1 parent 531e10c commit 4ee4dbd

File tree

5 files changed

+110
-101
lines changed

5 files changed

+110
-101
lines changed

‎extension/src/command-palette/command-palette.js

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import PropTypes from 'prop-types';
33

44
import ReactCommandPalette from 'react-command-palette';
55

6-
import { commands } from './commands.js';
6+
import { getCommands } from './getCommands.js';
77

88
const renderCommand = function (suggestion) {
99
const {
@@ -90,34 +90,43 @@ const theme = {
9090

9191
const CommandPalette = function (props) {
9292
const editor = window.MagiCSSEditor;
93-
const filteredCommands = commands.filter((item) => {
94-
if (item.id === 'show-line-numbers') {
95-
if (editor.cm.getOption('lineNumbers')) {
96-
return false;
97-
}
98-
} else if (item.id === 'hide-line-numbers') {
99-
if (!editor.cm.getOption('lineNumbers')) {
100-
return false;
101-
}
102-
} else if (item.id === 'enable-line-wrap') {
103-
if (editor.cm.getOption('lineWrapping')) {
104-
return false;
105-
}
106-
} else if (item.id === 'disable-line-wrap') {
107-
if (!editor.cm.getOption('lineWrapping')) {
108-
return false;
109-
}
110-
} else if (item.id === 'enable-css-linting') {
111-
if (editor.cm.getOption('lint')) {
112-
return false;
113-
}
114-
} else if (item.id === 'disable-css-linting') {
115-
if (!editor.cm.getOption('lint')) {
116-
return false;
117-
}
118-
}
119-
return true;
120-
});
93+
94+
const [commandsToUse, setCommandsToUse] = useState([]);
95+
96+
useEffect(() => {
97+
(async () => {
98+
const commands = await getCommands();
99+
const filteredCommands = commands.filter((item) => {
100+
if (item.id === 'show-line-numbers') {
101+
if (editor.cm.getOption('lineNumbers')) {
102+
return false;
103+
}
104+
} else if (item.id === 'hide-line-numbers') {
105+
if (!editor.cm.getOption('lineNumbers')) {
106+
return false;
107+
}
108+
} else if (item.id === 'enable-line-wrap') {
109+
if (editor.cm.getOption('lineWrapping')) {
110+
return false;
111+
}
112+
} else if (item.id === 'disable-line-wrap') {
113+
if (!editor.cm.getOption('lineWrapping')) {
114+
return false;
115+
}
116+
} else if (item.id === 'enable-css-linting') {
117+
if (editor.cm.getOption('lint')) {
118+
return false;
119+
}
120+
} else if (item.id === 'disable-css-linting') {
121+
if (!editor.cm.getOption('lint')) {
122+
return false;
123+
}
124+
}
125+
return true;
126+
});
127+
setCommandsToUse(filteredCommands);
128+
})();
129+
}, []);
121130

122131
return (
123132
<div className="CommandPalette">
@@ -143,7 +152,7 @@ const CommandPalette = function (props) {
143152
});
144153
}
145154
}}
146-
commands={filteredCommands}
155+
commands={commandsToUse}
147156
renderCommand={renderCommand}
148157
closeOnSelect={true}
149158
resetInputOnOpen={true}

‎extension/src/command-palette/commands.js renamed to ‎extension/src/command-palette/getCommands.js

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
/* global extLib, utils, sendMessageForGa */
22

3+
import { getBrowser } from 'helpmate/dist/browser/getBrowser.js';
4+
import { copyToClipboard } from 'helpmate/dist/misc/copyToClipboard.js';
5+
36
import {
47
APP_$_OPEN_SEARCH_ICONS
58
} from 'reducers/actionTypes.js';
69

7-
// TODO: DUPLICATE: This piece of code is duplicated in searchUi.js
8-
const copy = async function (simpleText) {
9-
try {
10-
await navigator.clipboard.writeText(simpleText);
11-
return true;
12-
} catch (e) {
13-
return false;
14-
}
15-
};
16-
1710
const timeout = function (ms) {
1811
return new Promise(resolve => setTimeout(resolve, ms));
1912
};
@@ -30,12 +23,51 @@ const forceBlur = async function () {
3023
document.body.removeChild(input);
3124
};
3225

33-
const commands = (
34-
[
35-
(function () {
36-
var editor = window.MagiCSSEditor;
26+
const extensionUrl = {
27+
chrome: 'https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol',
28+
edge: 'https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg',
29+
firefox: 'https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/',
30+
opera: 'https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/'
31+
};
32+
const getExecIconToShowForRateUs = async function () {
33+
let icon = null;
34+
const browserDetails = await getBrowser();
35+
const browserName = browserDetails.name;
36+
if (
37+
browserName === 'chrome' ||
38+
browserName === 'edge' ||
39+
browserName === 'firefox' ||
40+
browserName === 'opera'
41+
) {
42+
if (browserName === 'chrome') {
43+
icon = {
44+
browser: 'chrome',
45+
href: extensionUrl.chrome + '/reviews'
46+
};
47+
} else if (browserName === 'edge') {
48+
icon = {
49+
browser: 'edge',
50+
href: extensionUrl.edge
51+
};
52+
} else if (browserName === 'firefox') {
53+
icon = {
54+
browser: 'firefox',
55+
href: extensionUrl.firefox + 'reviews/'
56+
};
57+
} else if (browserName === 'opera') {
58+
icon = {
59+
browser: 'opera',
60+
href: extensionUrl.opera + '#feedback-container'
61+
};
62+
}
63+
}
64+
return icon;
65+
};
3766

38-
const iconOb = window.execIconToShowForRateUs(editor);
67+
const getCommands = async () => (
68+
[
69+
await (async function () {
70+
const iconOb = await getExecIconToShowForRateUs();
3971

4072
const
4173
CHROME = 'chrome',
@@ -159,7 +191,7 @@ const commands = (
159191
const textValue = editor.getTextValue();
160192

161193
if (textValue) {
162-
const flag = await copy(textValue);
194+
const flag = await copyToClipboard(textValue);
163195
if (flag) {
164196
utils.alertNote('Copied code to clipboard', 2500);
165197
sendMessageForGa(['_trackEvent', 'commandPalette', 'copiedCodeToClipboard']);
@@ -287,38 +319,14 @@ const commands = (
287319
sendMessageForGa(['_trackEvent', 'commandPalette', 'openGithub']);
288320
}
289321
},
290-
...(function () {
291-
// TODO: DUPLICATE: Code duplication for browser detection in commands.js, ext-lib.js, magicss.js and options.js
292-
var isChrome = false,
293-
isEdge = false,
294-
isFirefox = false,
295-
isOpera = false,
296-
isChromiumBased = false;
297-
298-
// Note that we are checking for "Edg/" which is the test required for identifying Chromium based Edge browser
299-
if (/Edg\//.test(navigator.appVersion)) { // Test for "Edge" before Chrome, because Microsoft Edge browser also adds "Chrome" in navigator.appVersion
300-
isEdge = true;
301-
} else if (/OPR\//.test(navigator.appVersion)) { // Test for "Opera" before Chrome, because Opera browser also adds "Chrome" in navigator.appVersion
302-
isOpera = true;
303-
} else if (/Chrome/.test(navigator.appVersion)) {
304-
isChrome = true;
305-
} else if (/Firefox/.test(navigator.userAgent)) { // For Mozilla Firefox browser, navigator.appVersion is not useful, so we need to fallback to navigator.userAgent
306-
isFirefox = true;
307-
}
308-
if (isEdge || isOpera || isChrome) {
309-
isChromiumBased = true; // eslint-disable-line no-unused-vars
310-
}
311-
312-
var extensionUrl = {
313-
chrome: 'https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol',
314-
edge: 'https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg',
315-
firefox: 'https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/',
316-
opera: 'https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/'
317-
};
322+
...(await (async function () {
323+
const browserDetails = await getBrowser();
324+
const browserName = browserDetails.name;
318325

319326
return [
320327
{
321-
skip: isChrome ? true : false,
328+
// skip: isChrome ? true : false,
329+
skip: browserName === 'chrome',
322330
operationId: 'link-chrome',
323331
name: 'Magic CSS for Chrome',
324332
iconCls: 'magicss-use-icon-chrome',
@@ -328,7 +336,7 @@ const commands = (
328336
}
329337
},
330338
{
331-
skip: isEdge ? true : false,
339+
skip: browserName === 'edge',
332340
operationId: 'link-edge',
333341
name: 'Magic CSS for Edge',
334342
iconCls: 'magicss-use-icon-edge-gray',
@@ -338,7 +346,7 @@ const commands = (
338346
}
339347
},
340348
{
341-
skip: isFirefox ? true : false,
349+
skip: browserName === 'firefox',
342350
operationId: 'link-firefox',
343351
name: 'Magic CSS for Firefox',
344352
iconCls: 'magicss-use-icon-firefox-gray',
@@ -348,7 +356,7 @@ const commands = (
348356
}
349357
},
350358
{
351-
skip: isOpera ? true : false,
359+
skip: browserName === 'opera',
352360
operationId: 'link-opera',
353361
name: 'Magic CSS for Opera',
354362
iconCls: 'magicss-use-logo-opera-gray',
@@ -358,7 +366,7 @@ const commands = (
358366
}
359367
}
360368
];
361-
}()),
369+
}())),
362370
{
363371
operationId: 'more-options',
364372
name: 'More options',
@@ -380,4 +388,4 @@ const commands = (
380388
}
381389
});
382390

383-
export { commands };
391+
export { getCommands };

‎extension/src/dialogs/searchIcons/searchUi.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import {
2222

2323
import { useWindowSize } from '@react-hook/window-size';
2424

25+
import { copyToClipboard } from 'helpmate/dist/misc/copyToClipboard.js';
26+
2527
import { Loading } from 'Loading/Loading.js';
2628

2729
import './searchUi.css';
@@ -36,16 +38,6 @@ import { READYSTATE, STATUSCODE, UNINITIALIZED, LOADING, LOADED, ERROR } from 'c
3638
const READYSTATE_FURTHER = 'READYSTATE_FURTHER';
3739
const STATUSCODE_FURTHER = 'STATUSCODE_FURTHER';
3840

39-
// TODO: DUPLICATE: This piece of code is duplicated in commands.js
40-
const copy = async function (simpleText) {
41-
try {
42-
await navigator.clipboard.writeText(simpleText);
43-
return true;
44-
} catch (e) {
45-
return false;
46-
}
47-
};
48-
4941
const IconEntry = ({ children, rowIndex, onFocus, className }) => {
5042
// The ref of the input to be controlled.
5143
const ref = useRef(null);
@@ -500,7 +492,7 @@ const ListOfIcons = function (props) {
500492
setSvgContents(function (prevState) {
501493
if (prevState[READYSTATE] === LOADED) {
502494
setTimeout(async function () {
503-
const flag = await copy(prevState['svgXml']);
495+
const flag = await copyToClipboard(prevState['svgXml']);
504496
if (!flag) {
505497
sendMessageForGa(['_trackEvent', 'getIcons', 'svgIconCopyError']);
506498
setSvgContents(function (prevState) {
@@ -541,7 +533,7 @@ const ListOfIcons = function (props) {
541533
if (prevState[READYSTATE] === LOADED) {
542534
setTimeout(async function () {
543535
const dataUrl = `data:${prevState['contentType']};base64,` + btoa(prevState['svgXml']);
544-
const flag = await copy(dataUrl);
536+
const flag = await copyToClipboard(dataUrl);
545537
if (!flag) {
546538
sendMessageForGa(['_trackEvent', 'getIcons', 'svgIconCopyDataUrlError']);
547539
setSvgContents(function (prevState) {

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"crypto-js": "^4.1.1",
4444
"css-loader": "^6.7.2",
4545
"emmetio-codemirror-plugin-webextensions": "^0.3.7",
46-
"helpmate": "^1.1.1",
46+
"helpmate": "^1.1.2",
4747
"immer": "^9.0.16",
4848
"jquery": "^3.6.1",
4949
"mini-css-extract-plugin": "^2.7.0",

0 commit comments

Comments
 (0)