feat: use plugins repo, and enable accessibility checker and powerpaste

openedx · Nov 21, 2023 · 1fba93a · 1fba93a
1 parent fc80700
commit 1fba93a
Show file tree

Hide file tree

Showing 6 changed files with 2,304 additions and 1,788 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "babel-polyfill": "6.26.0",
     "codemirror": "^6.0.0",
     "fast-xml-parser": "^4.0.10",
+    "frontend-components-tinymce-advanced-plugins": "^1.0.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
     "moment-shortformat": "^2.1.0",

diff --git a/src/editors/data/constants/tinyMCE.js b/src/editors/data/constants/tinyMCE.js
@@ -51,6 +51,7 @@ export const buttons = StrictDict({
   table: 'table',
   undo: 'undo',
   underline: 'underline',
+  a11ycheck: 'a11ycheck',
 });
 
 export const plugins = listKeyStore([
@@ -66,6 +67,9 @@ export const plugins = listKeyStore([
   'image',
   'imagetools',
   'quickbars',
+  'a11ychecker',
+  'a11ycheckerCss',
+  'powerpaste',
 ]);
 
 export const textToSpeechIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>';

diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx
@@ -7,19 +7,7 @@ import 'tinymce';
 import 'tinymce/themes/silver';
 import 'tinymce/skins/ui/oxide/skin.css';
 import 'tinymce/icons/default';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/hr';
-import 'tinymce/plugins/codesample';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/emoticons/js/emojis';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/autoresize';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/imagetools';
-import 'tinymce/plugins/quickbars';
+import 'frontend-components-tinymce-advanced-plugins';
 
 import store from '../../data/store';
 import { selectors } from '../../data/redux';

diff --git a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
@@ -53,6 +53,7 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
         [imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
         [buttons.table, buttons.emoticons, buttons.charmap, buttons.hr],
         [buttons.removeFormat, codeButton],
+        [buttons.a11ycheck],
       ]) : false,
       imageToolbar: mapToolbars([
         // [buttons.rotate.left, buttons.rotate.right],

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -152,3 +152,6 @@ jest.mock('react-redux', () => {
     useSelector: jest.fn((selector) => ({ useSelector: selector })),
   };
 });
+
+// Mock the plugins repo so jest will stop complaining about ES6 syntax
+jest.mock('frontend-components-tinymce-advanced-plugins', () => {});