@instructure/canvas-rce 5.8.0 → 5.10.0

package/.mocharc.js

@@ -15,6 +15,13 @@
  * 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/>.
  */
+
+global.MutationObserver = class {
+  disconnect() {}
+
+  observe() {}
+}
+
 module.exports = {
   require: [
     '@instructure/canvas-theme',

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.10.0 - 2023-09-26
+
+### Fixed
+- An issue where media controls don't respond in Safari
+- An issue where embedded Studio videos cause unresponsiveness
+- A potential race condition in postMessage forwarding
+
+### Changed
+- Ignore a11y check on elements with a background image or gradient
+- Remove math processing percentage indicator
+
+## 5.9.0 - 2023-08-30
+
+### Fixed
+- An issue where LTI postMessages were not working inside active RCE
+
+### Changed
+- Encrypt auto-saved RCE content
+- Remove dependency on `@instructure/filter-console-messages`
+
 ## 5.8.0 - 2023-08-15
 
 ### Fixed

package/es/enhance-user-content/mathml.js

@@ -45,7 +45,8 @@ const localConfig = {
       }
     }
   },
-  showMathMenu: true
+  showMathMenu: true,
+  messageStyle: 'none'
 };
 
 class Mathml {
@@ -106,7 +107,7 @@ class Mathml {
           window.MathJax.Hub.Register.MessageHook('Math Processing Error', function (message) {
             var _elem$parentElement;
 
-            const elem = message[1]; // ".math_equation_latex" is the elem we added for MathJax to typeset the image equation
+            const elem = Array.isArray(message[1]) ? message[1][0] : message[1]; // ".math_equation_latex" is the elem we added for MathJax to typeset the image equation
 
             if ((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('math_equation_latex')) {
               var _elem$parentElement$p;
@@ -123,7 +124,7 @@ class Mathml {
             }
           });
           window.MathJax.Hub.Register.MessageHook('End Math', function (message) {
-            const elem = message[1];
+            const elem = Array.isArray(message[1]) ? message[1][0] : message[1];
             mathImageHelper.removeStrayEquationImages(elem);
             mathImageHelper.nearlyInfiniteStyleFix(elem);
             elem.querySelectorAll('.math_equation_latex').forEach(m => m.classList.add('fade-in-equation'));
@@ -138,7 +139,8 @@ class Mathml {
           // Since we want to ignore <math> in .hidden-readable spans, let's remove the MathJunk™
           // right after MathJax adds it.
           window.MathJax.Hub.Register.MessageHook('End Math', function (message) {
-            $(message[1]).find('.hidden-readable [class^="MathJax"], .hidden-readable [id^="MathJax"]').remove();
+            const elm = Array.isArray(message[1]) ? message[1][0] : message[1];
+            $(elm).find('.hidden-readable [class^="MathJax"], .hidden-readable [id^="MathJax"]').remove();
           });
         } // leaving this here so I don't have to keep looking up how to see all messages
         // window.MathJax.Hub.Startup.signal.Interest(function (message) {
@@ -315,7 +317,8 @@ const mathImageHelper = {
   },
 
   catchEquationImages(refnode) {
-    // find equation images and replace with inline LaTeX
+    refnode = Array.isArray(refnode) ? refnode[0] : refnode; // find equation images and replace with inline LaTeX
+
     const eqimgs = refnode.querySelectorAll('img.equation_image');
 
     if (eqimgs.length > 0) {

package/es/rce/RCEWrapper.js

@@ -2373,6 +2373,7 @@ import { rceWrapperPropTypes } from './RCEWrapperProps';
 import { insertPlaceholder, placeholderInfoFor, removePlaceholder } from '../util/loadingPlaceholder';
 import { transformRceContentForEditing } from './transformContent';
 import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
+import EncryptedStorage from '../util/encrypted-storage';
 import buildStyle from './style';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
@@ -2713,9 +2714,67 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
+      this.forwardPostMessages();
       (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
     };
 
+    this.forwardPostMessages = () => {
+      const windowReferences = [];
+      const rceWindow = this.editor.getWin(); // explicitly assign name for reference by parent window
+
+      rceWindow.name = `${RCEWrapper.editorFrameName}_${this.id}`;
+      rceWindow.addEventListener('message', this.forwardPostMessagesHandler(rceWindow, windowReferences));
+    };
+
+    this.forwardPostMessagesHandler = (rceWindow, windowReferences) => e => {
+      let message;
+
+      try {
+        message = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+      } catch (err) {
+        // unparseable message may not be meant for our handlers
+        return false;
+      } // NOTE: the code to encode/decode `sourceToolInfo` is duplicated in
+      // the ui/features/post_message_forwarding/index.ts, and
+      // cannot be DRY'd because RCE is in a package
+
+
+      if (e.origin === rceWindow.origin) {
+        const {
+          sourceToolInfo,
+          ...messageWithoutSourceToolInfo
+        } = message;
+        const targetOrigin = sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.origin;
+        const targetWindow = windowReferences[sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.windowId];
+
+        if (!targetOrigin || !targetWindow) {
+          return false;
+        }
+
+        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.postMessage(messageWithoutSourceToolInfo, targetOrigin);
+      } else {
+        // message is from tool, forward to Canvas window
+        // We can't forward the whole `e.source` window in the postMessage,
+        // so we keep a list (`windowReferences`) of all windows we've received
+        // messages from, and include the index into that list as `windowId`
+        let windowId = windowReferences.indexOf(e.source);
+
+        if (windowId === -1) {
+          windowReferences.push(e.source);
+          windowId = windowReferences.length - 1;
+        }
+
+        const newMessage = { ...message,
+          sourceToolInfo: {
+            origin: e.origin,
+            windowId
+          },
+          frameName: rceWindow.name
+        };
+        rceWindow.parent.postMessage(newMessage, rceWindow.origin);
+      }
+    };
+
     this.fixToolbarKeyboardNavigation = () => {
       var _this$_elementRef$cur2;
 
@@ -2787,7 +2846,9 @@ class RCEWrapper extends React.Component {
     this.announcing = 0;
 
     this.initAutoSave = editor => {
-      this.storage = window.localStorage;
+      var _this$props$userCache;
+
+      this.storage = new EncryptedStorage((_this$props$userCache = this.props.userCacheKey) !== null && _this$props$userCache !== void 0 ? _this$props$userCache : '');
 
       if (this.storage) {
         editor.on('change Undo Redo', this.doAutoSave);
@@ -2875,10 +2936,7 @@ class RCEWrapper extends React.Component {
         });
 
         try {
-          _this.storage.setItem(_this.autoSaveKey, JSON.stringify({
-            autosaveTimestamp: Date.now(),
-            content
-          }));
+          _this.storage.setItem(_this.autoSaveKey, content);
         } catch (ex) {
           if (!retry) {
             // probably failed because there's not enough space
@@ -3733,7 +3791,7 @@ class RCEWrapper extends React.Component {
     let autosaved = null;
 
     try {
-      autosaved = this.storage && JSON.parse(this.storage.getItem(key));
+      autosaved = this.storage && this.storage.getItem(key);
     } catch (_ex) {
       this.storage.removeItem(this.autoSaveKey);
     }
@@ -4199,6 +4257,7 @@ RCEWrapper.defaultProps = {
   canvasOrigin: ''
 };
 RCEWrapper.skinCssInjected = false;
+RCEWrapper.editorFrameName = 'active_rce_frame';
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;

package/es/rce/RCEWrapperProps.js

@@ -125,5 +125,6 @@ export const rceWrapperPropTypes = {
   features: PropTypes.objectOf(PropTypes.bool),
   flashAlertTimeout: PropTypes.number,
   timezone: PropTypes.string,
+  userCacheKey: PropTypes.string,
   externalToolsConfig: externalToolsConfigPropType
 };

package/es/rce/__mocks__/_mockCryptoEs.js

@@ -0,0 +1,124 @@
+/*
+ * Copyright (C) 2023 - 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 default {
+  lib: {
+    Base: {},
+    WordArray: {},
+    BufferedBlockAlgorithm: {},
+    Hasher: {},
+    Cipher: {},
+    StreamCipher: {},
+    BlockCipherMode: {},
+    BlockCipher: {},
+    CipherParams: {},
+    SerializableCipher: {},
+    PasswordBasedCipher: {}
+  },
+  x64: {
+    Word: {},
+    WordArray: {}
+  },
+  enc: {
+    Hex: {},
+    Latin1: {},
+    Utf8: {
+      parse: () => {}
+    },
+    Utf16: {},
+    Utf16BE: {},
+    Utf16LE: {},
+    Base64: {},
+    Base64url: {}
+  },
+  algo: {
+    HMAC: {},
+    MD5: {},
+    SHA1: {},
+    SHA224: {},
+    SHA256: {},
+    SHA384: {},
+    SHA512: {},
+    SHA3: {},
+    RIPEMD160: {},
+    PBKDF2: {},
+    EvpKDF: {},
+    AES: {},
+    DES: {},
+    TripleDES: {},
+    Rabbit: {},
+    RabbitLegacy: {},
+    RC4: {},
+    RC4Drop: {},
+    Blowfish: {}
+  },
+  mode: {
+    CBC: {},
+    CFB: {},
+    CTR: {},
+    CTRGladman: {},
+    ECB: {},
+    OFB: {}
+  },
+  pad: {
+    Pkcs7: {},
+    AnsiX923: {},
+    Iso10126: {},
+    Iso97971: {},
+    NoPadding: {},
+    ZeroPadding: {}
+  },
+  format: {
+    OpenSSL: {},
+    Hex: {}
+  },
+  kdf: {
+    OpenSSL: {}
+  },
+  MD5: {},
+  HmacMD5: {},
+  SHA1: {},
+  HmacSHA1: {},
+  SHA224: {},
+  HmacSHA224: {},
+  SHA256: {},
+  HmacSHA256: {},
+  SHA384: {},
+  HmacSHA384: {},
+  SHA512: {},
+  HmacSHA512: {},
+  SHA3: {},
+  HmacSHA3: {},
+  RIPEMD160: {},
+  HmacRIPEMD160: {},
+  PBKDF2: {},
+  EvpKDF: {},
+  AES: {},
+  DES: {},
+  TripleDES: {},
+  Rabbit: {},
+  RabbitLegacy: {},
+  RC4: {
+    encrypt: () => {},
+    decrypt: () => {}
+  },
+  RC4Drop: {
+    encrypt: () => {},
+    decrypt: () => {}
+  },
+  Blowfish: {}
+};

package/es/rce/plugins/instructure_equation/EquationEditorModal/parseLatex.js

@@ -68,8 +68,6 @@ export const parseLatex = editor => {
       };
     } catch (ex) {
       // probably failed to create the new URL
-      // eslint-disable-next-line no-console
-      console.error(ex);
       return {};
     }
   } else if (wholeText) {

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogModal.js

@@ -18,7 +18,6 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
@@ -33,12 +32,12 @@ export function ExternalToolDialogModal(props) {
     onOpen: props.onOpen,
     onClose: props.onClose,
     mountNode: props.mountNode
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, props.name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Heading, null, props.name), /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "end",
+    offset: "medium",
     onClick: props.onCloseButton,
     screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Modal.Body, {
+  })), /*#__PURE__*/React.createElement(Modal.Body, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div",

package/es/rce/plugins/shared/CanvasContentTray.js

@@ -22,6 +22,7 @@ import { CloseButton, Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Spinner } from '@instructure/ui-spinner';
 import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
 import ErrorBoundary from './ErrorBoundary';
 import Bridge from '../../../bridge/Bridge';
 import formatMessage from '../../../format-message';
@@ -463,19 +464,18 @@ export default function CanvasContentTray(props) {
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "medium",
     shadow: "above"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
     margin: "none none medium none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldgrow: true,
-    shouldshrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     level: "h2"
-  }, getHeader())), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, getHeader()), /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
+    offset: "medium",
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
     screenReaderLabel: formatMessage('Close')
-  }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
+  })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
     placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
     linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
@@ -492,8 +492,8 @@ export default function CanvasContentTray(props) {
     isContentLoading: isLoading(storeProps),
     use_rce_icon_maker: props.use_rce_icon_maker
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     margin: "xx-small xxx-small 0",
     elementRef: el => scrollingAreaRef.current = el
   }, /*#__PURE__*/React.createElement(Flex, {

package/es/rce/plugins/shared/ContentSelection.js

@@ -32,7 +32,7 @@ export const DISPLAY_AS_EMBED = 'embed';
 export const DISPLAY_AS_EMBED_DISABLED = 'embed-disabled';
 export const DISPLAY_AS_DOWNLOAD_LINK = 'download-link';
 export function asImageEmbed($element) {
-  const nodeName = $element.nodeName.toLowerCase();
+  const nodeName = $element === null || $element === void 0 ? void 0 : $element.nodeName.toLowerCase();
 
   if (nodeName !== 'img') {
     return null;
@@ -44,9 +44,11 @@ export function asImageEmbed($element) {
   };
 }
 export function asLink($element, editor) {
+  var _$link;
+
   let $link = $element;
 
-  if ($link.tagName !== 'A') {
+  if (((_$link = $link) === null || _$link === void 0 ? void 0 : _$link.tagName) !== 'A') {
     // the user may have selected some text that is w/in a link
     // but didn't include the <a>. Let's see if that's true
     $link = editor.dom.getParent($link, 'a[href]');
@@ -213,7 +215,7 @@ function isMediaElement($element, mediaType) {
 
   // the video is hosted in an iframe, but tinymce
   // wraps it in a span with swizzled attribute names
-  if (!($element !== null && $element !== void 0 && $element.getAttribute)) {
+  if (!($element !== null && $element !== void 0 && $element.getAttribute) || !$element) {
     return false;
   }
 
@@ -242,6 +244,8 @@ export function isAudioElement($element) {
 export function findMediaPlayerIframe(elem) {
   var _elem$firstElementChi;
 
+  if (!elem) return null;
+
   if (elem.tagName === 'IFRAME') {
     // we have the iframe
     return elem;

package/es/rce/plugins/shared/ImageCropper/Preview.js

@@ -25,7 +25,6 @@ import { useMouseWheel } from './useMouseWheel';
 import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../CheckerboardStyling';
 import { View } from '@instructure/ui-view';
-import { getBrowser } from '../../../getBrowser';
 /**
  * Remove the node contents and append the svg element.
  */
@@ -86,17 +85,19 @@ export const Preview = _ref2 => {
     translateY: tempTranslateY,
     rotation,
     scaleRatio: tempScaleRatio
-  }); // Clip is not supported in Safari until v16.
+  });
+
+  function isSafariVersion15OrLesser() {
+    const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
+    return match ? parseInt(match[1], 10) < 16 : false;
+  } // Clip is not supported in Safari until v16.
   // It's needed here to prevent a strange screenreader
   // behavior that makes the cropper look bad. 'hidden'
   // suffices when clip is not available, although it's not perfect
   // TODO: remove when Safari versions >= 16 are more commonplace
 
-  const {
-    name,
-    version
-  } = getBrowser();
-  const overflow = name === 'Safari' && parseFloat(version) < 16 ? 'hidden' : 'clip';
+
+  const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       justifyContent: 'center',

package/es/rce/plugins/shared/LinkDisplay.js

@@ -81,8 +81,8 @@ export const LinkDisplay = _ref => {
     size: "x-small"
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0",
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     textAlign: "start"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div"

package/es/rce/plugins/tinymce-a11y-checker/rules/large-text-contrast.js

@@ -30,6 +30,15 @@ export default {
       return true;
     }
 
+    for (let e = elem; e; e = e.parentElement) {
+      const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
+
+      if (bgimage !== 'none' && bgimage !== '') {
+        // ignore background images and gradients
+        return true;
+      }
+    }
+
     return contrast(elem);
   },
   data: smallTextContrast.data,

package/es/rce/plugins/tinymce-a11y-checker/rules/small-text-contrast.js

@@ -32,6 +32,15 @@ export default {
       return true;
     }
 
+    for (let e = elem; e; e = e.parentElement) {
+      const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
+
+      if (bgimage !== 'none' && bgimage !== '') {
+        // ignore background images and gradients
+        return true;
+      }
+    }
+
     return contrast(elem);
   },
   data: elem => {

package/es/translations/locales/da-x-k12.js

@@ -45,6 +45,9 @@ const locale = {
   "add_image_60b2de07": {
     "message": "Tilføj billede"
   },
+  "add_one_9e34a6f8": {
+    "message": "Tilføj en!"
+  },
   "additional_considerations_f3801683": {
     "message": "Yderligere overvejelser"
   },
@@ -1323,9 +1326,27 @@ const locale = {
   "no_accessibility_issues_were_detected_f8d3c875": {
     "message": "Der blev ikke fundet nogen tilgængelighedsproblemer."
   },
+  "no_announcements_created_yet_c44a94f4": {
+    "message": "Der er ikke oprettet beskeder endnu."
+  },
+  "no_announcements_found_20185afc": {
+    "message": "Ingen beskeder fundet."
+  },
+  "no_assignments_created_yet_1b236d87": {
+    "message": "Der er ikke oprettet opgaver endnu."
+  },
+  "no_assignments_found_79e46d7f": {
+    "message": "Ingen opgaver fundet."
+  },
   "no_changes_to_save_d29f6e91": {
     "message": "Ingen ændringer at gemme."
   },
+  "no_discussions_created_yet_ff99abe3": {
+    "message": "Der er ikke oprettet diskussioner endnu."
+  },
+  "no_discussions_found_9284063b": {
+    "message": "Ingen diskussioner fundet."
+  },
   "no_e16d9132": {
     "message": "Nej"
   },
@@ -1335,9 +1356,27 @@ const locale = {
   "no_headers_9bc7dc7f": {
     "message": "Ingen overskrifter"
   },
+  "no_modules_created_yet_c71b6d4d": {
+    "message": "Der er ikke oprettet forløb endnu."
+  },
+  "no_modules_found_2df43a40": {
+    "message": "Ingen forløb fundet."
+  },
+  "no_pages_created_yet_c379fa6e": {
+    "message": "Der er ikke oprettet sider endnu."
+  },
+  "no_pages_found_6799350": {
+    "message": "Ingen sider fundet."
+  },
   "no_preview_is_available_for_this_file_f940114a": {
     "message": "Der findes ikke forhåndsvisning for denne fil."
   },
+  "no_quizzes_created_yet_1a2370b9": {
+    "message": "Der er ikke oprettet nogen quizzer endnu."
+  },
+  "no_quizzes_found_c80c537a": {
+    "message": "Der er ikke fundet nogen quizzer."
+  },
   "no_results_940393cf": {
     "message": "Ingen resultater."
   },

package/es/translations/locales/de.js

@@ -373,7 +373,7 @@ const locale = {
     "message": "{ count, plural,\n    one {# Objekt geladen}\n  other {# Objekte geladen}\n}"
   },
   "course_documents_104d76e0": {
-    "message": "Kursunterlagen"
+    "message": "Kursdokumente"
   },
   "course_files_62deb8f8": {
     "message": "Kursdateien"
@@ -2278,16 +2278,16 @@ const locale = {
     "message": "Wird von Screenreadern verwendet, um das Video zu beschreiben."
   },
   "user_documents_c206e61f": {
-    "message": "Benutzer*in Dokumente"
+    "message": "Meine Dokumente"
   },
   "user_files_78e21703": {
     "message": "Benutzerdateien"
   },
   "user_images_b6490852": {
-    "message": "Benutzerbilder"
+    "message": "Meine Bilder"
   },
   "user_media_14fbf656": {
-    "message": "Nutzer-Medien"
+    "message": "Meine Medien"
   },
   "vector_notation_cf6086ab": {
     "message": "Vektor (Notation)"