feat: Rich Text Editor enable browser spellcheck (#13886)

* feat: Rich Text Editor enable browser spellcheck

* fix: added custom menu

* add function for OS check, updated text based on OS

* fix: text update

Co-authored-by: bhavin <techbhavin@gmail.com>

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",

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";
+};

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}

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"