@instructure/canvas-rce 5.6.3 → 5.6.4

package/lib/translated/ja/modules/rce/plugins/instructure_wordcount/utils/countContent.js

@@ -0,0 +1,78 @@
+/*
+ * 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 IGNORE_WORDCOUNT_ATTRIBUTE = 'data-ignore-wordcount';
+export const countWords = node => {
+  if (node.getAttribute(IGNORE_WORDCOUNT_ATTRIBUTE) === 'chars-only') return 0;
+  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const trimmedTextContent = textContent.trim();
+  if (trimmedTextContent.length === 0) return 0;
+  return trimmedTextContent.split(/\s+/).length;
+};
+export const countCharsNoSpaces = node => {
+  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const matches = textContent.match(/ /g); // a single space
+
+  const spaces = matches ? matches.length : 0;
+  return countChars(node) - spaces;
+};
+export const countChars = node => {
+  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const iterator = textContent[Symbol.iterator]();
+  let count = 0;
+
+  while (!iterator.next().done) {
+    count++;
+  }
+
+  return count;
+};
+export const callbackForCategory = category => {
+  switch (category) {
+    case 'words':
+      return countWords;
+
+    case 'chars-no-spaces':
+      return countCharsNoSpaces;
+
+    case 'chars':
+      return countChars;
+  }
+};
+export const countShouldIgnore = (ed, scope, category) => {
+  if (scope === 'selection') return 0;
+  const nodesToCount = Array.from(ed.getBody().querySelectorAll(`[${IGNORE_WORDCOUNT_ATTRIBUTE}]`));
+  const callback = callbackForCategory(category);
+  return nodesToCount.reduce((total, node) => total + callback(node), 0);
+};
+export const getTinymceCount = (ed, scope, category) => {
+  const wc = ed.plugins.wordcount[scope];
+
+  switch (category) {
+    case 'words':
+      return wc.getWordCount();
+
+    case 'chars-no-spaces':
+      return wc.getCharacterCountWithoutSpaces();
+
+    case 'chars':
+      return wc.getCharacterCount();
+  }
+};
+export const countContent = (ed, scope, category) => {
+  return getTinymceCount(ed, scope, category) - countShouldIgnore(ed, scope, category);
+};

package/lib/translated/ja/modules/rce/plugins/instructure_wordcount/utils/tableContent.js

@@ -0,0 +1,40 @@
+/*
+ * 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 { countContent } from './countContent';
+import formatMessage from '../../../../format-message';
+export const HEADERS = [{
+  id: 'count',
+  label: "Count"
+}, {
+  id: 'document',
+  label: "\u30C9\u30AD\u30E5\u30E1\u30F3\u30C8"
+}, {
+  id: 'selection',
+  label: "Selection"
+}];
+const ROW_LABELS = [['words', "Words"], ['chars-no-spaces', "Characters (no spaces)"], ['chars', "Characters"]];
+export const generateRows = ed => {
+  return ROW_LABELS.map(_ref => {
+    let [category, label] = _ref;
+    return {
+      label,
+      documentCount: countContent(ed, 'body', category),
+      selectionCount: countContent(ed, 'selection', category)
+    };
+  });
+};

package/lib/translated/ja/modules/rce/tinyRCE.js

@@ -48,6 +48,7 @@ import './plugins/instructure_documents/plugin';
 import './plugins/instructure_html_view/plugin';
 import './plugins/instructure_media_embed/plugin';
 import './plugins/instructure_icon_maker/plugin';
+import './plugins/instructure_wordcount/plugin';
 import 'tinymce-a11y-checker'; // prevent tinymce from loading language scripts with explicit
 // language_url of 'none'
 

package/lib/translated/ko/modules/enhance-user-content/__tests__/enhance_user_content.test.js

@@ -128,7 +128,7 @@ describe('enhanceUserContent()', () => {
     });
     describe('when the link has neither inline_disabled class or no_preview class', () => {
       it('has the file_preview_link class and the target attribute', () => {
-        subject('<a class="instructure_file_link instructure_scribd_file" href="/courses/1/files/1" target="_blank">file</a>');
+        subject('<a id="alink" class="instructure_file_link instructure_scribd_file" href="/courses/1/files/1" target="_blank">file</a>');
         enhanceUserContent();
         const aTag = document.querySelector('a');
         expect(aTag.classList.contains('file_preview_link')).toBeTruthy();
@@ -136,6 +136,21 @@ describe('enhanceUserContent()', () => {
       });
     });
   });
+  describe('internal links target attribute', () => {
+    it('is set to the provided options', () => {
+      // which is the case for img file links
+      subject(`<a id="blank_target" title="Link" href="/courses/1/files/79?wrap=1" target="_blank">some file</a>
+        <a id="no_target" title="Link" href="/courses/1/files/79?wrap=1">a file</a>
+        <a id="a_target" title="Link" href="/courses/1/files/79?wrap=1" target="a_target">another file</a>`);
+      enhanceUserContent(document, {
+        canvasOrigin: 'https://canvas.here',
+        canvasLinksTarget: 'open_here'
+      });
+      expect(document.getElementById('blank_target').getAttribute('target')).toEqual('open_here');
+      expect(document.getElementById('no_target').getAttribute('target')).toEqual('open_here');
+      expect(document.getElementById('a_target').getAttribute('target')).toEqual('a_target');
+    });
+  });
   describe('external links', () => {
     it('adds the exernal link icon', () => {
       subject('<a href="https://instructure.com/">external link</a>');

package/lib/translated/ko/modules/enhance-user-content/enhance_user_content.js

@@ -133,7 +133,8 @@ export function enhanceUserContent() {
     customEnhanceFunc,
     canvasOrigin,
     kalturaSettings,
-    disableGooglePreviews
+    disableGooglePreviews,
+    canvasLinksTarget
   } = opts;
   const content = container instanceof HTMLElement && container || document.getElementById('content') || document;
 
@@ -174,6 +175,10 @@ export function enhanceUserContent() {
 
             const absoluteUrl = new URL(potentialUrl, canvasOrigin);
             element.setAttribute(a, absoluteUrl.href);
+
+            if (canvasLinksTarget && element.tagName === 'A' && (!element.getAttribute('target') || element.getAttribute('target') === '_blank')) {
+              element.setAttribute('target', canvasLinksTarget);
+            }
           }
         } catch (_ignore) {// canvasOrigin probably isn't a valid base url
         }
@@ -181,7 +186,7 @@ export function enhanceUserContent() {
     }
 
     unenhanced_elem.querySelectorAll('a:not(.not_external, .external)').forEach(childLink => {
-      if (!isExternalLink(childLink)) return;
+      if (!isExternalLink(childLink, canvasOrigin)) return;
       if (childLink.tagName === 'IMG' || childLink.querySelectorAll('img').length > 0) return;
       childLink.classList.add('external');
       childLink.setAttribute('target', '_blank');

package/lib/translated/ko/modules/enhance-user-content/instructure_helper.js

@@ -36,11 +36,19 @@ export function getTld(hostname) {
         length = parts.length;
   return (length > 1 ? [parts[length - 2], parts[length - 1]] : parts).join('.');
 }
-const locationTld = getTld(window.location.hostname);
 export function isExternalLink(element) {
+  let canvasOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
+  let canvasHost;
+
+  try {
+    canvasHost = new URL(canvasOrigin).hostname;
+  } catch (_ex) {
+    canvasHost = window.location.hostname;
+  }
+
   const href = element.getAttribute('href'); // if a browser doesnt support <a>.hostname then just dont mark anything as external, better to not get false positives.
 
-  return !!(href && href.length && !href.match(/^(mailto\:|javascript\:)/) && element.hostname && getTld(element.hostname) !== locationTld);
+  return !!(href && href.length && !href.match(/^(mailto\:|javascript\:)/) && element.hostname && getTld(element.hostname) !== getTld(canvasHost));
 }
 export function showFilePreview(event) {
   var _event$target, _event$currentTarget;

package/lib/translated/ko/modules/rce/RCEWrapper.js

@@ -3313,6 +3313,7 @@ table {
   'mce-nbsp': 'tinymce__oxide--mce-nbsp',
   'mce-shy': 'tinymce__oxide--mce-shy'
 };
+import { countShouldIgnore } from './plugins/instructure_wordcount/utils/countContent';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -3854,10 +3855,12 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     };
 
     this.onWordCountUpdate = e => {
+      const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
+      const updatedCount = e.wordCount.words - shouldIgnore;
       this.setState(state => {
-        if (e.wordCount.words !== state.wordCount) {
+        if (updatedCount !== state.wordCount) {
           return {
-            wordCount: e.wordCount.words
+            wordCount: updatedCount
           };
         } else return null;
       });
@@ -4700,7 +4703,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     const rcsExists = !!((_this$props$trayProps2 = this.props.trayProps) !== null && _this$props$trayProps2 !== void 0 && _this$props$trayProps2.host && (_this$props$trayProps3 = this.props.trayProps) !== null && _this$props$trayProps3 !== void 0 && _this$props$trayProps3.jwt);
     const userLocale = editorLanguage(this.language);
     const setupCallback = options.setup;
-    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', 'instructure_external_tools'] : ['instructure_links'];
+    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', 'instructure_external_tools', 'instructure_wordcount'] : ['instructure_links'];
 
     if (rcsExists && !this.props.instRecordDisabled) {
       canvasPlugins.splice(2, 0, 'instructure_record');
@@ -4759,7 +4762,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         },
         tools: {
           title: "Tools",
-          items: 'wordcount lti_tools_menuitem'
+          items: 'instructure_wordcount lti_tools_menuitem'
         },
         view: {
           title: "\uBCF4\uAE30",

package/lib/translated/ko/modules/rce/plugins/instructure_wordcount/clickCallback.js

@@ -0,0 +1,46 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import { generateRows, HEADERS } from './utils/tableContent';
+const MODAL_ID = 'canvas-rce-wordcount-container';
+export default function (ed, document) {
+  return import('./components/WordCountModal').then(_ref => {
+    let {
+      WordCountModal
+    } = _ref;
+    let container = document.querySelector(`#${MODAL_ID}`);
+
+    if (!container) {
+      container = document.createElement('div');
+      container.id = MODAL_ID;
+      document.body.appendChild(container);
+    }
+
+    const handleDismiss = () => {
+      ReactDOM.unmountComponentAtNode(container);
+      ed.focus(false);
+    };
+
+    ReactDOM.render( /*#__PURE__*/React.createElement(WordCountModal, {
+      headers: HEADERS,
+      rows: generateRows(ed),
+      onDismiss: handleDismiss
+    }), container);
+  });
+}

package/lib/translated/ko/modules/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -0,0 +1,92 @@
+import _pt from "prop-types";
+
+/*
+ * 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 { Modal } from '@instructure/ui-modal';
+import { BaseButton, CloseButton } from '@instructure/ui-buttons';
+import { Heading } from '@instructure/ui-heading';
+import { Table } from '@instructure/ui-table';
+import formatMessage from '../../../../format-message';
+// Doing this to avoid TS2339 errors -- TODO: remove once we're on InstUI 8
+const {
+  Head,
+  Row,
+  ColHeader,
+  Body,
+  Cell
+} = Table;
+
+const renderBody = (headers, rows) => {
+  return /*#__PURE__*/React.createElement(Table, {
+    caption: "Word Count"
+  }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
+    let {
+      id,
+      label
+    } = _ref;
+    return /*#__PURE__*/React.createElement(ColHeader, {
+      key: id,
+      id: id
+    }, label);
+  }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
+    let {
+      label,
+      documentCount,
+      selectionCount
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Row, {
+      key: label
+    }, /*#__PURE__*/React.createElement(Cell, {
+      key: "label"
+    }, label), /*#__PURE__*/React.createElement(Cell, {
+      key: "document"
+    }, documentCount), /*#__PURE__*/React.createElement(Cell, {
+      key: "selection"
+    }, selectionCount));
+  })));
+};
+
+export const WordCountModal = _ref3 => {
+  let {
+    headers,
+    rows,
+    onDismiss
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Modal, {
+    label: "Word Count",
+    open: true
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "end",
+    offset: "medium",
+    color: "primary",
+    onClick: onDismiss,
+    screenReaderLabel: "\uB2EB\uAE30"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Word Count")), /*#__PURE__*/React.createElement(Modal.Body, {
+    padding: "x-large"
+  }, renderBody(headers, rows)), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(BaseButton, {
+    onClick: onDismiss,
+    "data-testid": "footer-close-button",
+    color: "primary"
+  }, "\uB2EB\uAE30")));
+};
+WordCountModal.propTypes = {
+  headers: _pt.array.isRequired,
+  rows: _pt.array.isRequired,
+  onDismiss: _pt.func.isRequired
+};

package/lib/translated/ko/modules/rce/plugins/instructure_wordcount/components/__tests__/WordCountModal.test.js

@@ -0,0 +1,91 @@
+/*
+ * 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 { fireEvent, render } from '@testing-library/react';
+import { WordCountModal } from '../WordCountModal';
+import { HEADERS } from '../../utils/tableContent';
+const defaultProps = {
+  headers: HEADERS,
+  rows: [{
+    label: 'Words',
+    documentCount: 0,
+    selectionCount: 1
+  }, {
+    label: 'Characters (no spaces)',
+    documentCount: 2,
+    selectionCount: 3
+  }, {
+    label: 'Characters',
+    documentCount: 4,
+    selectionCount: 5
+  }],
+  onDismiss: jest.fn()
+};
+
+const renderModal = function () {
+  let overrideProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render( /*#__PURE__*/React.createElement(WordCountModal, Object.assign({}, defaultProps, overrideProps)));
+};
+
+describe('WordCountModal', () => {
+  describe('onDismiss', () => {
+    it('is called when the header close button is clicked', () => {
+      const {
+        getAllByText
+      } = renderModal();
+      fireEvent.click(getAllByText(/close/i)[0]);
+      expect(defaultProps.onDismiss).toHaveBeenCalled();
+    });
+    it('is called when the footer close button is clicked', () => {
+      const {
+        getByTestId
+      } = renderModal();
+      fireEvent.click(getByTestId('footer-close-button'));
+      expect(defaultProps.onDismiss).toHaveBeenCalled();
+    });
+  });
+  describe('headers', () => {
+    it('are rendered', () => {
+      const {
+        getByRole
+      } = renderModal();
+      defaultProps.headers.forEach(header => {
+        expect(getByRole('columnheader', {
+          name: header.label
+        })).toBeInTheDocument();
+      });
+    });
+  });
+  describe('rows', () => {
+    it('are rendered', () => {
+      const {
+        getByRole
+      } = renderModal();
+      defaultProps.rows.forEach(_ref => {
+        let {
+          label,
+          documentCount,
+          selectionCount
+        } = _ref;
+        expect(getByRole('row', {
+          name: `${label} ${documentCount} ${selectionCount}`
+        })).toBeInTheDocument();
+      });
+    });
+  });
+});

package/lib/translated/ko/modules/rce/plugins/instructure_wordcount/plugin.js

@@ -0,0 +1,32 @@
+/*
+ * 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 tinymce from 'tinymce';
+import formatMessage from '../../../format-message';
+import clickCallback from './clickCallback';
+tinymce.create('tinymce.plugins.InstructureWordcount', {
+  init(ed) {
+    ed.addCommand('instructureWordcount', clickCallback.bind(this, ed, document));
+    ed.ui.registry.addMenuItem('instructure_wordcount', {
+      text: "Word Count",
+      icon: 'character-count',
+      onAction: () => ed.execCommand('instructureWordcount')
+    });
+  }
+
+});
+tinymce.PluginManager.add('instructure_wordcount', tinymce.plugins.InstructureWordcount);