@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/translated/zh_HK/modules/rce/plugins/shared/ColorInput.js

@@ -152,14 +152,15 @@ export const ColorInput = _ref => {
       }, isOpen ? /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))
     }, /*#__PURE__*/React.createElement(CloseButton, {
       placement: "end",
-      onClick: () => setIsOpen(false)
-    }, "\u95DC\u9589"), /*#__PURE__*/React.createElement(Flex, {
+      onClick: () => setIsOpen(false),
+      screenReaderLabel: "\u95DC\u9589"
+    }), /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       as: "div",
       justifyItems: requireColor ? 'start' : 'center',
       padding: "x-large x-small small",
       width: "175px",
-      wrapItems: true,
+      wrap: "wrap",
       "data-testid": `${name}-popover`
     }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
   }

package/lib/translated/zh_HK/modules/rce/plugins/shared/ImageOptionsForm.js

@@ -54,13 +54,13 @@ const ImageOptionsForm = _ref => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
   }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+    renderIcon: IconQuestionLine,
     size: "small",
     variant: "icon"
   }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, tooltipText)))));

package/lib/translated/zh_HK/modules/rce/plugins/shared/Upload/ComputerPanel.js

@@ -25,9 +25,9 @@ import { StyleSheet, css } from 'aphrodite';
 import { FileDrop } from '@instructure/ui-file-drop';
 import { Billboard } from '@instructure/ui-billboard';
 import { Alert } from '@instructure/ui-alerts';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { px } from '@instructure/ui-utils';
-import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { PresentationContent } from '@instructure/ui-a11y-content';
 import { IconTrashLine } from '@instructure/ui-icons';
 import { Img } from '@instructure/ui-img';
 import { Text } from '@instructure/ui-text';
@@ -186,7 +186,7 @@ export default function ComputerPanel(_ref) {
           "aria-label": theFile.name + " \u5F71\u50CF\u9810\u89BD",
           src: preview.preview,
           constrain: "contain",
-          inline: false
+          display: "block"
         });
       } else if (isText(theFile.type)) {
         return /*#__PURE__*/React.createElement(View, {
@@ -221,6 +221,7 @@ export default function ComputerPanel(_ref) {
   }
 
   if (theFile) {
+    const filename = theFile.name;
     return /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative'
@@ -229,8 +230,8 @@ export default function ComputerPanel(_ref) {
     }, /*#__PURE__*/React.createElement(Flex, {
       direction: "row-reverse",
       margin: "none none medium"
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
-      buttonRef: el => {
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+      elementRef: el => {
         clearButtonRef.current = el;
       },
       onClick: () => {
@@ -241,11 +242,14 @@ export default function ComputerPanel(_ref) {
           error: null
         });
       },
-      icon: IconTrashLine
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, "\u6E05\u9664\u6240\u9078\u64C7\u7684\u6A94\u6848\uFF1A" + theFile.name))), /*#__PURE__*/React.createElement(Flex.Item, {
+      renderIcon: IconTrashLine,
+      withBackground: false,
+      withBorder: false,
+      screenReaderLabel: "\u6E05\u9664\u6240\u9078\u64C7\u7684\u6A94\u6848\uFF1A" + filename
+    })), /*#__PURE__*/React.createElement(Flex.Item, {
       grow: true,
       shrink: true
-    }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, null, theFile.name)))), /*#__PURE__*/React.createElement(View, {
+    }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, null, filename)))), /*#__PURE__*/React.createElement(View, {
       as: "div",
       width: `${width}px`,
       height: `${height}px`,

package/lib/translated/zh_HK/modules/rce/plugins/shared/Upload/UnsplashPanel.js

@@ -150,7 +150,8 @@ function Attribution(_ref) {
     href: profileUrl,
     target: "_blank",
     rel: "noopener",
-    fluidWidth: true
+    display: "block",
+    textAlign: "start"
   }, name)));
 }
 
@@ -234,7 +235,8 @@ export default function UnsplashPanel(_ref2) {
     key: resultImage.id
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "link",
-    fluidWidth: true,
+    display: "block",
+    textAlign: "start",
     theme: {
       mediumPaddingHorizontal: '0'
     },

package/lib/translated/zh_HK/modules/rce/plugins/shared/Upload/UploadFileModal.js

@@ -23,7 +23,6 @@ import { Heading } from '@instructure/ui-heading';
 import { Spinner } from '@instructure/ui-spinner';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { Text } from '@instructure/ui-text';
 import formatMessage from '../../../../format-message';
 import RceApiSource from '../../../../rcs/api';
 import ImageOptionsForm from '../ImageOptionsForm';
@@ -158,8 +157,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "small",
-    placement: "end"
-  }, "\u95DC\u9589"), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
+    placement: "end",
+    screenReaderLabel: "\u95DC\u9589"
+  }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Tabs, {
     onRequestTabChange: (event, _ref3) => {
@@ -176,7 +176,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return "\u96FB\u8166";
           },
-          selected: selectedPanel === 'COMPUTER'
+          isSelected: selectedPanel === 'COMPUTER'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: "\u6B63\u5728\u8F09\u5165",
@@ -201,7 +201,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return 'Unsplash';
           },
-          selected: selectedPanel === 'UNSPLASH'
+          isSelected: selectedPanel === 'UNSPLASH'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: "\u6B63\u5728\u8F09\u5165",
@@ -221,7 +221,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return "URL";
           },
-          selected: selectedPanel === 'URL'
+          isSelected: selectedPanel === 'URL'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: "\u6B63\u5728\u8F09\u5165",

package/lib/translated/zh_HK/modules/rce/plugins/shared/__tests__/CanvasContentTray.test.js

@@ -20,6 +20,7 @@ import { act, render, waitFor, waitForElementToBeRemoved } from '@testing-librar
 import Bridge from '../../../../bridge/Bridge';
 import * as fakeSource from '../../../../rcs/fake';
 import CanvasContentTray from '../CanvasContentTray';
+jest.useFakeTimers();
 jest.mock('../../../../canvasFileBrowser/FileBrowser', () => {
   return jest.fn(() => 'Files Browser');
 });
@@ -178,9 +179,7 @@ describe('RCE Plugins > CanvasContentTray', () => {
       props.bridge.focusActiveEditor = mockFocus;
       await showTrayForPlugin('links');
       await waitFor(() => expect(component.getByTestId('instructure_links-LinksPanel')).toBeInTheDocument());
-      const closeBtn = component.getByRole('button', {
-        name: 'Close'
-      });
+      const closeBtn = component.getByTestId('CloseButton_ContentTray').querySelector('button');
       closeBtn.focus();
       closeBtn.click(); // immediately after being asked to close, INSTUI Tray removes role='dialog' and
       // adds aria-hidden='true', so the getTray() function above does not work

package/lib/translated/zh_HK/modules/rce/plugins/shared/__tests__/linkUtils.test.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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 from 'react';
+import { render } from '@testing-library/react';
+import { IconBlank, getIcon } from '../linkUtils';
+import { IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconQuizSolid as IconNewQuiz, IconAnnouncementLine, IconDocumentLine } from '@instructure/ui-icons';
+describe('linkUtils', () => {
+  describe('IconBlank', () => {
+    it('renders a blank icon', () => {
+      const {
+        container
+      } = render( /*#__PURE__*/React.createElement(IconBlank, null));
+      const svg = container.querySelector('svg[name="IconBlank"]');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+  describe('getIcon', () => {
+    it('returns assignment icon when course link type is an assignment', () => {
+      expect(getIcon('assignments')).toEqual(IconAssignmentLine);
+    });
+    it('returns discussion icon when course link type is an discussion', () => {
+      expect(getIcon('discussions')).toEqual(IconDiscussionLine);
+    });
+    it('returns module icon when course link type is an module', () => {
+      expect(getIcon('modules')).toEqual(IconModuleLine);
+    });
+    it('returns quiz icon when course link type is an quiz', () => {
+      expect(getIcon('quizzes')).toEqual(IconQuizLine);
+    });
+    it('returns new quiz icon when course link type is a new quiz', () => {
+      expect(getIcon('quizzes.next')).toEqual(IconNewQuiz);
+    });
+    it('returns announcement icon when course link type is an announcement', () => {
+      expect(getIcon('announcements')).toEqual(IconAnnouncementLine);
+    });
+    it('returns document icon when course link type is an wiki page', () => {
+      expect(getIcon('wikiPages')).toEqual(IconDocumentLine);
+    });
+    it('returns blank icon when course link type is navigation', () => {
+      expect(getIcon('navigation')).toEqual(IconBlank);
+    });
+    it('returns document icon by default', () => {
+      expect(getIcon('not a real course link type')).toEqual(IconDocumentLine);
+    });
+  });
+});

package/lib/translated/zh_HK/modules/rce/plugins/shared/linkUtils.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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 from 'react';
+import { SVGIcon } from '@instructure/ui-svg-images';
+import { IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconQuizSolid as IconNewQuiz, IconAnnouncementLine, IconDocumentLine } from '@instructure/ui-icons';
+export const IconBlank = props => {
+  return /*#__PURE__*/React.createElement(SVGIcon, Object.assign({
+    name: "IconBlank",
+    viewBox: "0 0 1920 1920"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    role: "presentation"
+  }));
+};
+export const getIcon = type => {
+  switch (type) {
+    case 'assignments':
+      return IconAssignmentLine;
+
+    case 'discussions':
+      return IconDiscussionLine;
+
+    case 'modules':
+      return IconModuleLine;
+
+    case 'quizzes':
+      return IconQuizLine;
+
+    case 'quizzes.next':
+      return IconNewQuiz;
+
+    case 'announcements':
+      return IconAnnouncementLine;
+
+    case 'wikiPages':
+      return IconDocumentLine;
+
+    case 'navigation':
+      return IconBlank;
+
+    default:
+      return IconDocumentLine;
+  }
+};

package/lib/translated/zh_HK/modules/rce/plugins/shared/useDataUrl.js

@@ -22,6 +22,7 @@ import { useState, useEffect } from 'react'; // Given a URL to some resource (li
 const useDataUrl = () => {
   const [url, setUrl] = useState('');
   const [dataUrl, setDataUrl] = useState('');
+  const [dataBlob, setDataBlob] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   useEffect(() => {
@@ -37,7 +38,10 @@ const useDataUrl = () => {
         return new Promise((resolve, reject) => {
           const reader = new FileReader();
 
-          reader.onloadend = () => resolve(reader.result);
+          reader.onloadend = () => resolve({
+            result: reader.result,
+            blob
+          });
 
           reader.onerror = reject;
           reader.readAsDataURL(blob);
@@ -47,9 +51,14 @@ const useDataUrl = () => {
       }
     }
 
-    if (!!url) {
-      fetchDataUrl().then(result => {
+    if (url) {
+      fetchDataUrl().then(_ref => {
+        let {
+          result,
+          blob
+        } = _ref;
         setDataUrl(result);
+        setDataBlob(blob);
       }).catch(e => {
         setError(e);
       }).finally(() => setLoading(false));
@@ -59,7 +68,8 @@ const useDataUrl = () => {
     setUrl,
     dataUrl,
     dataLoading: loading,
-    dataError: error
+    dataError: error,
+    dataBlob
   };
 };
 

package/lib/translated/zh_HK/modules/rce/userOS.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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/>.
+ */
+export const determineUserOS = () => {
+  const rawOS = navigator.userAgent;
+  if (rawOS.indexOf('Mac') !== -1) return 'Mac';else if (rawOS.indexOf('Win') !== -1) return 'Windows';else return 'Other';
+};
+export const determineOSDependentKey = () => {
+  switch (determineUserOS()) {
+    case 'Mac':
+      return 'OPTION';
+
+    case 'Windows':
+    default:
+      return 'ALT';
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.6.0-beta.0",
+  "version": "5.6.0",
   "description": "A component wrapping canvas's common tinymce usage",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,11 +11,11 @@
     "lint:fix": "eslint --fix \"src/**/*.js\" \"test/**/*.js\"",
     "_test": "Test cafe will be added back to test as part of CORE-2995",
     "test": "if [ \"$CANVAS_RCE_PARALLEL\" = \"1\" ]; then yarn test:parallel; else yarn test:serial; fi",
-    "test:parallel": "concurrently --names \"yarn test:mocha\" \"yarn test:jest\" \"yarn test:cafe\"",
+    "test:parallel": "concurrently --names \"mocha,jest,testcafe\" \"yarn test:mocha\" \"yarn test:jest\" \"yarn test:cafe\"",
     "test:serial": "yarn test:mocha && yarn test:jest && yarn test:cafe",
-    "test:mocha": "mocha 'test/**/*.test.js' --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js --exit",
-    "test:mocha:one": "mocha --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
-    "test:mocha:debug": "mocha --inspect-brk --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha 'test/**/*.test.js' --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js --exit",
+    "test:mocha:one": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha:debug": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --inspect-brk --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:ui": "yarn build:cafe && yarn test:cafe:only:ui",
@@ -36,10 +36,10 @@
     "installTranslations": "scripts/installTranslations.js",
     "commitTranslations": "scripts/commitTranslations.sh",
     "build:all": "scripts/build.js",
-    "build:es": "babel --out-dir es src --ignore '**/__tests__,**/__mocks__'",
-    "build:cjs": "babel --out-dir lib src --ignore '**/__tests__,**/__mocks__' --config-file=./babel.config.cjs.js",
+    "build:es": "babel --out-dir es src --ignore '**/__tests__,**/__mocks__' --extensions '.ts,.tsx,.js'",
+    "build:cjs": "babel --out-dir lib src --ignore '**/__tests__,**/__mocks__' --config-file=./babel.config.cjs.js --extensions '.ts,.tsx,.js'",
     "build:canvas": "scripts/build-canvas",
-    "build:watch": "rm -rf es && babel --out-dir es src --watch --verbose",
+    "build:watch": "rm -rf es && babel --out-dir es src --watch --verbose --extensions '.ts,.tsx,.js'",
     "build:cafe": "wp --config webpack.testcafe.config.js",
     "prepublishOnly": "yarn build:all",
     "fmt:check": "prettier -l '**/*.js'",
@@ -66,8 +66,9 @@
     "instrument": false
   },
   "dependencies": {
-    "@instructure/canvas-media": "1.3.0-beta.0",
+    "@instructure/canvas-media": "*",
     "@instructure/canvas-theme": "7",
+    "@instructure/debounce": "7",
     "@instructure/k5uploader": "*",
     "@instructure/media-capture": "~8.0.1-rc.11",
     "@instructure/ui-a11y-content": "7",
@@ -148,13 +149,16 @@
   "devDependencies": {
     "@babel/cli": "^7",
     "@babel/core": "^7",
+    "@babel/preset-typescript": "^7",
     "@babel/register": "7",
     "@instructure/babel-plugin-themeable-styles": "7.19.0-canvas",
     "@instructure/browserslist-config-canvas-lms": ">=2",
     "@instructure/translations": ">=1",
+    "@instructure/ui-postcss-config": "^7.5.1",
     "@testing-library/dom": "^8",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^12",
+    "@testing-library/react-hooks": "^5",
     "@testing-library/user-event": "^12",
     "axe-testcafe": "^3",
     "babel-loader": "^8.0.0",
@@ -164,6 +168,7 @@
     "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",
+    "babel-plugin-typescript-to-proptypes": "^1.4.2",
     "cross-env": "^5.0.0",
     "escape-html": "^1",
     "eslint-plugin-mocha": "^6",
@@ -188,6 +193,8 @@
     "testcafe": "1.14.2",
     "testcafe-browser-provider-selenium": "^1.2.0",
     "testcafe-react-selectors": "^3.3.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.3.5",
     "url-loader": "^4.1.1",
     "webpack": "^4",
     "webpack-merge": "^5",

package/scripts/build.js

@@ -41,10 +41,14 @@ shell.exec('scripts/installTranslations.js')
 const npm_bin_path = shell.exec('npm bin').trim()
 
 shell.echo('Building CommonJS version')
-shell.exec(`JEST_WORKER_ID=1 ${npm_bin_path}/babel --out-dir lib src --ignore '**/__tests__'`)
+shell.exec(
+  `JEST_WORKER_ID=1 ${npm_bin_path}/babel --out-dir lib src --ignore '**/__tests__' --extensions '.ts,.tsx,.js,.jsx'`
+)
 
 shell.echo('Building ES Modules version')
-shell.exec(`${npm_bin_path}/babel --out-dir es src --ignore '**/__tests__'`)
+shell.exec(
+  `${npm_bin_path}/babel --out-dir es src --ignore '**/__tests__' --extensions '.ts,.tsx,.js,.jsx'`
+)
 
 shell.echo(`building pretranslated output in lib/translated in mulitple processes`)
 getTranslationList('canvas-rce')
@@ -52,7 +56,7 @@ getTranslationList('canvas-rce')
     const locales = translationFiles.map(tf => tf.split('.')[0])
     const processPromises = locales.map(locale => {
       return exec(
-        `BUILD_LOCALE=${locale} ${npm_bin_path}/babel --out-dir lib/translated/${locale}/modules --ignore locales* src`
+        `BUILD_LOCALE=${locale} ${npm_bin_path}/babel --out-dir lib/translated/${locale}/modules --ignore locales* src --extensions '.ts,.tsx,.js'`
       )
     })
     Promise.all(processPromises)

package/testcafe/entry.js

@@ -25,6 +25,12 @@ import {renderIntoDiv} from '../src'
 
 renderIntoDiv(document.getElementById('content'), {
   textareaId: 'textarea',
+  features: {
+    new_equation_editor: true,
+    new_math_equation_handling: true,
+    rce_ux_improvements: true
+  },
+  timezone: 'America/Denver',
   editorOptions: () => {
     return {
       plugins: [

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowJs": true, // allows importing of .js files from .ts files
+    "esModuleInterop": true, // more accurately transpiles to the ES6 module spec (maybe not needed w/ babel transpilation)
+    "isolatedModules": true, // required to adhere to babel's single-file transpilation process
+    "jsx": "react", // transpiles jsx to React.createElement calls (maybe not needed w/ babel transpilation)
+    "lib": ["dom", "es2020", "esnext"], // include types for DOM APIs and standard JS up to ES2020
+    "module": "ES2020", // support the most modern ES6-style module syntax
+    "moduleResolution": "node", // required for non-commonjs imports
+    "noEmit": true, // don't generate transpiled JS files, source-maps, or .d.ts files for canvas-rce source code
+    "resolveJsonModule": true, // enables importing json files
+    "skipLibCheck": true, // don't do type-checking on dependencies' internal types for improved performance
+    "strict": true, // enables a bunch of strict mode family options. See https://www.typescriptlang.org/tsconfig#strict
+    "target": "ES2020", // support the most modern JS features (let babel handle transpilation)
+    "noImplicitAny": false // temporarily allows un-typed variables (and imports) to be automatically defined as "any"
+  },
+  "include": ["src/**/*"]
+}

package/webpack.testcafe.config.js

@@ -23,11 +23,11 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|ts|jsx)$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: {
-          "plugins": ["@babel/plugin-proposal-class-properties"]
+          plugins: ['@babel/plugin-proposal-class-properties']
         }
       },
       {test: /(\.css$)/, include: /node_modules/, loaders: ['style-loader', 'css-loader']},
@@ -37,6 +37,9 @@ module.exports = {
       /i18nliner\/dist\/lib\/i18nliner/ // i18nLiner has a `require('fs')` that it doesn't actually need, ignore it.
     ]
   },
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),

package/coverage/canvas-rce-jest.xml

@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="Canvas RCE Jest Tests" tests="0" failures="0" time="0.915">
-</testsuites>