@instructure/canvas-rce 5.11.0 → 5.11.1

package/canvas/package.json

@@ -0,0 +1,189 @@
+{
+  "name": "@instructure/canvas-rce",
+  "version": "5.1.1",
+  "description": "A component wrapping canvas's common tinymce usage",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "i18n:extract": "format-message extract \"src*/**/*.js\" -g underscored_crc32 -o locales/en.json",
+    "integration-test": "nightwatch --env integration",
+    "lint": "eslint \"src/**/*.js\" \"test/**/*.js\"",
+    "lint:fix": "eslint --fix \"src/**/*.js\" \"test/**/*.js\"",
+    "_test": "Test cafe will be added back to test as part of CORE-2995",
+    "test": "yarn test:mocha && yarn test:jest",
+    "test:mocha": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha:one": "BABEL_ENV=test-node mocha --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha:debug": "BABEL_ENV=test-node mocha --inspect-brk --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:jest": "jest --color --runInBand",
+    "test:cafe": "yarn build:cafe && yarn test:cafe:only",
+    "test:cafe:only": "testcafe chrome testcafe/**/*.test.js",
+    "test:cafe:one": "testcafe chrome testcafe/**/*.test.js --test ",
+    "test:cafe:all": "yarn build:cafe && testcafe chrome,firefox,safari testcafe/**/*.test.js",
+    "test:cafe:debug": "testcafe --inspect-brk chrome testcafe/**/*.test.js",
+    "test:watch": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js --watch",
+    "test:coverage": "cross-env BABEL_ENV=test-node nyc -r html -r json node_modules/.bin/mocha -r jsdom-global/register 'test/**/*.test.js'",
+    "test:jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "debug": "BABEL_ENV=test-node inspect _mocha --no-timeouts --debug-brk 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js",
+    "demo": "scripts/demo.sh",
+    "demo:clean": "rm -f github-pages/dist/*",
+    "demo:build": "webpack -c ./webpack.demo.config.js",
+    "demo:dev": "yarn demo:clean && mkdir -p ./github-pages/dist &&  cp ./github-pages/index.html ./github-pages/dist && webpack -c ./webpack.dev.config.js",
+    "installTranslations": "scripts/installTranslations.js",
+    "build:all": "scripts/build.js",
+    "build:canvas": "scripts/build-canvas",
+    "build:watch": "rm -rf es &&  ./node_modules/.bin/babel --out-dir es src --watch",
+    "build:cafe": "webpack --config webpack.testcafe.config.js",
+    "prepublishOnly": "yarn build:all && yarn test",
+    "fmt:check": "prettier -l '**/*.js'",
+    "fmt:fix": "prettier --write '**/*.js'",
+    "clean": "rm -rf lib && rm -rf es && rm -rf coverage && yarn demo:clean"
+  },
+  "author": "Instructure, Inc",
+  "license": "AGPL-3.0",
+  "browserslist": [
+    "extends @instructure/browserslist-config-canvas-lms"
+  ],
+  "nyc": {
+    "include": [
+      "shared/**/*.js",
+      "src/**/*.js"
+    ],
+    "exclude": [],
+    "require": [
+      "@babel/register",
+      "@instructure/canvas-theme"
+    ],
+    "sourceMap": false,
+    "instrument": false
+  },
+  "dependencies": {
+    "@instructure/canvas-media": ">=1.0.0",
+    "@instructure/canvas-theme": "7",
+    "@instructure/k5uploader": ">=1",
+    "@instructure/media-capture": "~8.0.1-rc.11",
+    "@instructure/ui-a11y-content": "7",
+    "@instructure/ui-alerts": "7",
+    "@instructure/ui-avatar": "7",
+    "@instructure/ui-badge": "7",
+    "@instructure/ui-billboard": "7",
+    "@instructure/ui-buttons": "7",
+    "@instructure/ui-checkbox": "7",
+    "@instructure/ui-code-editor": "7.3.0",
+    "@instructure/ui-color-utils": "7",
+    "@instructure/ui-file-drop": "7",
+    "@instructure/ui-flex": "7",
+    "@instructure/ui-focusable": "7",
+    "@instructure/ui-form-field": "7",
+    "@instructure/ui-heading": "7",
+    "@instructure/ui-icons": "7",
+    "@instructure/ui-img": "7",
+    "@instructure/ui-link": "7",
+    "@instructure/ui-list": "7",
+    "@instructure/ui-media-player": "7",
+    "@instructure/ui-modal": "7",
+    "@instructure/ui-motion": "7",
+    "@instructure/ui-overlays": "7",
+    "@instructure/ui-pagination": "7",
+    "@instructure/ui-popover": "7",
+    "@instructure/ui-radio-input": "7",
+    "@instructure/ui-react-utils": "7",
+    "@instructure/ui-simple-select": "7",
+    "@instructure/ui-spinner": "7",
+    "@instructure/ui-svg-images": "7",
+    "@instructure/ui-tabs": "7",
+    "@instructure/ui-text": "7",
+    "@instructure/ui-text-area": "7",
+    "@instructure/ui-text-input": "7",
+    "@instructure/ui-themeable": "7",
+    "@instructure/ui-themes": "7",
+    "@instructure/ui-toggle-details": "7",
+    "@instructure/ui-tooltip": "7",
+    "@instructure/ui-tray": "7",
+    "@instructure/ui-tree-browser": "7",
+    "@instructure/ui-truncate-text": "7",
+    "@instructure/ui-utils": "7",
+    "@instructure/ui-view": "7",
+    "@instructure/uid": "7",
+    "@sheerun/mutationobserver-shim": "^0.3.2",
+    "@tinymce/tinymce-react": "~3.8.4",
+    "aphrodite": "^2",
+    "axios": "^0.21.1",
+    "bloody-offset": "0.0.0",
+    "classnames": "^2.2.5",
+    "format-message": "^6",
+    "format-message-generate-id": "^6",
+    "get-cookie": "1",
+    "i18n-js": "^3",
+    "i18nliner": "~0.2.0",
+    "isomorphic-fetch": "2.2.1",
+    "jquery": "https://github.com/instructure/jquery.git#1.7.2-with-AMD-and-CommonJS",
+    "js-beautify": "1",
+    "keycode": "^2",
+    "lodash": "^4",
+    "minimatch": "~3.0.4",
+    "prop-types": "^15",
+    "react": "^0.14.8 || ^15.0.0 || ^16",
+    "react-dom": "^0.14.8 || ^15.0.0 || ^16",
+    "react-draggable": "^3.3.0",
+    "react-redux": "^5",
+    "react-transition-group": "^1",
+    "redux": "^4",
+    "redux-batch-middleware": "^0.2.0",
+    "redux-thunk": "^2",
+    "scroll-into-view": "https://github.com/bkirkby/scroll-into-view.git#588b0ced98eeecf84e6fb2074aa076e80b7cffab",
+    "tinymce": "^5",
+    "tinymce-a11y-checker": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7",
+    "@babel/core": "^7",
+    "@babel/register": "7",
+    "@instructure/browserslist-config-canvas-lms": ">=2",
+    "@instructure/translations": ">=1",
+    "@instructure/ui-babel-preset": "7",
+    "@testing-library/dom": "^7",
+    "@testing-library/jest-dom": "^5",
+    "@testing-library/react": "^11",
+    "@testing-library/user-event": "^12",
+    "axe-testcafe": "^3",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-inline-json-import": "^0.2.0",
+    "babel-plugin-minify-constant-folding": "^0.5.0",
+    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
+    "babel-plugin-minify-guarded-expressions": "^0.4.3",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
+    "cross-env": "^5.0.0",
+    "eslint-plugin-mocha": "^6",
+    "eslint-plugin-testcafe": "^0.2.1",
+    "fetch-mock": "^6",
+    "format-message-cli": "^6",
+    "format-message-parse": "^6",
+    "jest": "^24",
+    "jest-canvas-mock": "^2",
+    "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jest-junit": "^7",
+    "jsdom": "^13.0.0",
+    "jsdom-global": "^3.0.2",
+    "jsdomify": "^3",
+    "mocha": "^6",
+    "mocha-junit-reporter": "^1.18.0",
+    "mocha-multi-reporters": "^1.1.7",
+    "moxios": "^0.4",
+    "nyc": "^13",
+    "prettier": "^2.2.1",
+    "proxyquire": "1.7.4",
+    "shelljs": "^0.8.3",
+    "sinon": "^7",
+    "skin-deep": "^1",
+    "testcafe": "^1.9.0",
+    "testcafe-react-selectors": "^3.3.0",
+    "webpack": "^4",
+    "webpack-merge": "^5",
+    "webpack-nano": "^1",
+    "webpack-plugin-serve": "^1"
+  },
+  "resolutions": {
+    "format-message-estree-util": "../packages/format-message-estree-util"
+  }
+}

package/es/rce/RceHtmlEditor.js

@@ -15,10 +15,10 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { func, string } from 'prop-types';
 import formatMessage from '../format-message';
-import { SourceCodeEditor } from '@instructure/ui-source-code-editor';
+import { CodeEditor } from '@instructure/ui-code-editor';
 import beautify from 'js-beautify';
 const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   let {
@@ -28,6 +28,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   const [code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
+  const [codeMirrorEditorDiv, setCodeMirrorEditorDiv] = useState(null);
+  useEffect(() => {
+    ;
+
+    (async () => {
+      const p = new Promise(resolve => {
+        const timerid = setInterval(() => {
+          // scoping querySelector to the container div makes sure we're targeting this CodeEditor
+          // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
+          // say this is the element we use to set the editor's height
+          const editor = editorRef.current.querySelector('.CodeMirror');
+
+          if (editor) {
+            clearInterval(timerid);
+            setCodeMirrorEditorDiv(editor);
+            resolve();
+          }
+        }, 60);
+      });
+      await p;
+    })();
+  }, [editorRef]);
   useEffect(() => {
     setCode(beautify.html(props.code)); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -56,7 +78,23 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
 
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
-  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr'; // setting height on the container keeps the RCE toolbar from jumping
+  useEffect(() => {
+    if (codeMirrorEditorDiv) {
+      codeMirrorEditorDiv.CodeMirror.setSize(null, props.height);
+      codeMirrorEditorDiv.style.margin = '0';
+      codeMirrorEditorDiv.style.border = '0';
+    }
+  }, [codeMirrorEditorDiv, props.height]);
+  const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
+
+  const handleFocus = useCallback((editor, event) => {
+    if (!isFocused.current) {
+      editor.setCursor(0, 0);
+      isFocused.current = true;
+    }
+
+    onFocus(event);
+  }, [onFocus]); // setting height on the container keeps the RCE toolbar from jumping
 
   return /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
@@ -66,28 +104,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
       overflow: 'hidden',
       textAlign: 'start'
     }
-  }, /*#__PURE__*/React.createElement(SourceCodeEditor, {
+  }, /*#__PURE__*/React.createElement(CodeEditor, {
     label: label,
-    language: "html" // see LF-745 for tracking of the following:
-    // TODO: needs prop for
-    // options={{
-    //   extraKeys: {Tab: false, 'Shift-Tab': false},
-    // }}
-    // TODO: may need
-    // attachment={none | bottom | top}
-    ,
-    lineNumbers: true,
-    lineWrapping: true,
-    autoFocus: false,
-    spellcheck: true,
-    direction: direction,
-    rtlMoveVisually: true,
-    height: props.height,
+    language: "html",
+    options: {
+      lineNumbers: true,
+      lineWrapping: true,
+      autofocus: false,
+      spellcheck: true,
+      extraKeys: {
+        Tab: false,
+        'Shift-Tab': false
+      },
+      screenReaderLabel: label,
+      direction: dir,
+      rtlMoveVisually: true
+    },
     value: code,
     onChange: value => {
       setCode(value);
       props.onChange(value);
-    }
+    },
+    onFocus: handleFocus
   }));
 });
 RceHtmlEditor.propTypes = {

package/lib/rce/RceHtmlEditor.js

@@ -15,10 +15,10 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { func, string } from 'prop-types';
 import formatMessage from '../format-message';
-import { SourceCodeEditor } from '@instructure/ui-source-code-editor';
+import { CodeEditor } from '@instructure/ui-code-editor';
 import beautify from 'js-beautify';
 const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   let {
@@ -28,6 +28,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   const [code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
+  const [codeMirrorEditorDiv, setCodeMirrorEditorDiv] = useState(null);
+  useEffect(() => {
+    ;
+
+    (async () => {
+      const p = new Promise(resolve => {
+        const timerid = setInterval(() => {
+          // scoping querySelector to the container div makes sure we're targeting this CodeEditor
+          // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
+          // say this is the element we use to set the editor's height
+          const editor = editorRef.current.querySelector('.CodeMirror');
+
+          if (editor) {
+            clearInterval(timerid);
+            setCodeMirrorEditorDiv(editor);
+            resolve();
+          }
+        }, 60);
+      });
+      await p;
+    })();
+  }, [editorRef]);
   useEffect(() => {
     setCode(beautify.html(props.code)); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -56,7 +78,23 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
 
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
-  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr'; // setting height on the container keeps the RCE toolbar from jumping
+  useEffect(() => {
+    if (codeMirrorEditorDiv) {
+      codeMirrorEditorDiv.CodeMirror.setSize(null, props.height);
+      codeMirrorEditorDiv.style.margin = '0';
+      codeMirrorEditorDiv.style.border = '0';
+    }
+  }, [codeMirrorEditorDiv, props.height]);
+  const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
+
+  const handleFocus = useCallback((editor, event) => {
+    if (!isFocused.current) {
+      editor.setCursor(0, 0);
+      isFocused.current = true;
+    }
+
+    onFocus(event);
+  }, [onFocus]); // setting height on the container keeps the RCE toolbar from jumping
 
   return /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
@@ -66,28 +104,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
       overflow: 'hidden',
       textAlign: 'start'
     }
-  }, /*#__PURE__*/React.createElement(SourceCodeEditor, {
+  }, /*#__PURE__*/React.createElement(CodeEditor, {
     label: label,
-    language: "html" // see LF-745 for tracking of the following:
-    // TODO: needs prop for
-    // options={{
-    //   extraKeys: {Tab: false, 'Shift-Tab': false},
-    // }}
-    // TODO: may need
-    // attachment={none | bottom | top}
-    ,
-    lineNumbers: true,
-    lineWrapping: true,
-    autoFocus: false,
-    spellcheck: true,
-    direction: direction,
-    rtlMoveVisually: true,
-    height: props.height,
+    language: "html",
+    options: {
+      lineNumbers: true,
+      lineWrapping: true,
+      autofocus: false,
+      spellcheck: true,
+      extraKeys: {
+        Tab: false,
+        'Shift-Tab': false
+      },
+      screenReaderLabel: label,
+      direction: dir,
+      rtlMoveVisually: true
+    },
     value: code,
     onChange: value => {
       setCode(value);
       props.onChange(value);
-    }
+    },
+    onFocus: handleFocus
   }));
 });
 RceHtmlEditor.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "scripts": {
@@ -40,7 +40,7 @@
     "build:canvas": "scripts/build-canvas",
     "build:watch": "yarn clean:es && yarn build:es --watch",
     "build:cafe": "wp --config webpack.testcafe.config.js",
-    "prepublishOnly": "yarn build:all",
+    "prepublishOnly": "yarn build:all && yarn test",
     "fmt:check": "prettier -l '**/*.js*' '**/*.ts*'",
     "fmt:fix": "prettier --write '**/*.js*' '**/*.ts*'",
     "clean": "rm -rf lib && yarn clean:es && rm -rf coverage && yarn demo:clean",
@@ -78,7 +78,6 @@
     "@instructure/canvas-media": "*",
     "@instructure/debounce": "^8",
     "@instructure/emotion": "^8.39",
-    "@instructure/filter-console-messages": "*",
     "@instructure/k5uploader": "*",
     "@instructure/media-capture": "^9.0.0",
     "@instructure/theme-registry": "^8",
@@ -113,7 +112,6 @@
     "@instructure/ui-radio-input": "^8",
     "@instructure/ui-react-utils": "^8",
     "@instructure/ui-simple-select": "^8",
-    "@instructure/ui-source-code-editor": "^8",
     "@instructure/ui-spinner": "^8",
     "@instructure/ui-svg-images": "^8",
     "@instructure/ui-table": "^8",