diff --git a/app/client/package.json b/app/client/package.json index d178b72792..fb1915d5e4 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -103,6 +103,7 @@ "react-base-table": "^1.9.1", "react-beautiful-dnd": "^12.2.0", "react-custom-scrollbars": "^4.2.1", + "react-device-detect": "^2.2.2", "react-dnd": "^9.3.4", "react-dnd-html5-backend": "^9.3.4", "react-dnd-touch-backend": "^9.4.0", diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx index 152b231267..7b6632609f 100644 --- a/app/client/src/utils/AppsmithUtils.tsx +++ b/app/client/src/utils/AppsmithUtils.tsx @@ -21,6 +21,7 @@ import { APP_MODE } from "entities/App"; import { trimQueryString } from "./helpers"; import { PLACEHOLDER_APP_SLUG, PLACEHOLDER_PAGE_SLUG } from "constants/routes"; import { builderURL, viewerURL } from "RouteBuilder"; +import { osName } from "react-device-detect"; export const createReducer = ( initialState: any, @@ -452,3 +453,8 @@ export const base64ToBlob = ( const blob = new Blob(byteArrays, { type: contentType }); return blob; }; + +// util function to detect current os is Mac +export const isMacOs = () => { + return osName === "Mac OS"; +}; diff --git a/app/client/src/widgets/RichTextEditorWidget/component/index.tsx b/app/client/src/widgets/RichTextEditorWidget/component/index.tsx index 91d8aae42d..e490a28c20 100644 --- a/app/client/src/widgets/RichTextEditorWidget/component/index.tsx +++ b/app/client/src/widgets/RichTextEditorWidget/component/index.tsx @@ -9,6 +9,7 @@ import { Colors } from "constants/Colors"; import LabelWithTooltip, { labelLayoutStyles, } from "components/ads/LabelWithTooltip"; +import { isMacOs } from "utils/AppsmithUtils"; const StyledRTEditor = styled.div<{ borderRadius: string; @@ -165,11 +166,37 @@ export function RichtextEditorComponent(props: RichtextEditorComponentProps) { forced_root_block: false, branding: false, resize: false, + browser_spellcheck: true, plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help", ], + contextmenu: "link useBrowserSpellcheck image table", + setup: function(editor) { + editor.ui.registry.addMenuItem("useBrowserSpellcheck", { + text: `Use "${ + isMacOs() ? "Control" : "Ctrl" + } + Right click" to access spellchecker`, + onAction: function() { + editor.notificationManager.open({ + text: `To access the spellchecker, hold the ${ + isMacOs() ? "Control" : "Ctrl" + } key and right-click on the misspelt word.`, + type: "info", + timeout: 5000, + closeButton: true, + }); + }, + }); + editor.ui.registry.addContextMenu("useBrowserSpellcheck", { + update: function() { + return editor.selection.isCollapsed() + ? ["useBrowserSpellcheck"] + : []; + }, + }); + }, }} key={`editor_${props.isToolbarHidden}`} onEditorChange={onEditorChange} diff --git a/app/client/yarn.lock b/app/client/yarn.lock index ff8516ae11..5865447a8d 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -14273,6 +14273,13 @@ react-dev-utils@^11.0.1: strip-ansi "6.0.0" text-table "0.2.0" +react-device-detect@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.2.tgz#dbabbce798ec359c83f574c3edb24cf1cca641a5" + integrity sha512-zSN1gIAztUekp5qUT/ybHwQ9fmOqVT1psxpSlTn1pe0CO+fnJHKRLOWWac5nKxOxvOpD/w84hk1I+EydrJp7SA== + dependencies: + ua-parser-js "^1.0.2" + react-dnd-html5-backend@^9.3.4: version "9.5.1" resolved "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-9.5.1.tgz" @@ -17041,6 +17048,11 @@ ua-parser-js@^0.7.18: resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== +ua-parser-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775" + integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg== + uglify-js@^3.1.4: version "3.13.4" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.4.tgz#592588bb9f47ae03b24916e2471218d914955574"