@instructure/canvas-rce 5.12.2 → 5.13.1

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTray.js

@@ -0,0 +1,360 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2019 - 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, { useEffect, useRef, useState } from 'react';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
+import { getTrayHeight } from '../../shared/trayUtils';
+import { View } from '@instructure/ui-view';
+import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import formatMessage from '../../../../format-message';
+import { Tray } from '@instructure/ui-tray';
+import { TextInput } from '@instructure/ui-text-input';
+import { Text } from '@instructure/ui-text';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Alert } from '@instructure/ui-alerts';
+export default function FindReplaceTray(_ref) {
+  let {
+    onNext,
+    onPrevious,
+    onFind,
+    onRequestClose,
+    onReplace,
+    index,
+    max,
+    initialText = '',
+    selectionContext = ['', '']
+  } = _ref;
+  const [findText, setFindText] = useState(initialText);
+  const [replaceText, setReplaceText] = useState('');
+  const [hasOpened, setHasOpened] = useState(false);
+  const [showReplaceAlert, setShowReplaceAlert] = useState('');
+  const [alertFindText, setAlertFindText] = useState('');
+  const [alertReplaceText, setAlertReplaceText] = useState('');
+  const trayRef = useRef(null);
+  const liveRegionKey = useRef(0);
+  const srDupKey = useRef(0); // moves RCE when tray opens/closes, copied from CanvasContentTray
+
+  useEffect(() => {
+    var _trayRef$current;
+
+    if (!hasOpened) return;
+    let c = document.querySelector('[role="main"]');
+    let target_w = 0;
+    if (!c) return;
+    const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
+    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
+
+    if (target_w >= 320 && target_w < c.offsetWidth) {
+      c.style.boxSizing = 'border-box';
+      c.style.width = `${target_w}px`;
+    }
+
+    return () => {
+      c = document.querySelector('[role="main"]');
+      if (!c) return;
+      c.style.width = '';
+    };
+  }, [hasOpened]);
+  useEffect(() => {
+    if (initialText) {
+      onFind(initialText);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+
+  function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    }, [value]);
+    return ref.current;
+  }
+
+  const prepend = selectionContext[0];
+  const append = selectionContext[1];
+  const srContextMsg = formatMessage('{prepend}{findText}{append}', {
+    prepend,
+    findText,
+    append
+  });
+  const previousSrMsg = usePrevious(srContextMsg);
+  const previousFindText = usePrevious(findText);
+
+  const handleTextChange = e => {
+    setFindText(e.target.value);
+    onFind(e.target.value);
+  };
+
+  const handleFindKeyDown = e => {
+    if (e.key !== 'Enter') return;
+
+    if (e.shiftKey) {
+      if (isButtonDisabled('previous')) return;
+      onPrevious();
+    } else {
+      // try to search when there are currently no results and user presses enter
+      if (index === 0 && max === 0 && findText) {
+        onFind(findText);
+        return;
+      }
+
+      if (isButtonDisabled('next')) return;
+      onNext();
+    }
+  };
+
+  const handleReplaceKeyDown = e => {
+    if (e.key !== 'Enter') return;
+    if (isButtonDisabled('replace')) return;
+    const forward = !e.shiftKey;
+    replace(replaceText, forward, false);
+  };
+
+  const replace = (newText, forward, all) => {
+    onReplace(newText, forward, all);
+
+    if (all) {
+      setShowReplaceAlert('replaceAll');
+    } else {
+      setShowReplaceAlert('replace');
+    }
+
+    setAlertFindText(findText);
+    setAlertReplaceText(newText);
+    liveRegionKey.current++;
+  };
+
+  const alertText = showReplaceAlert === '' ? '' : showReplaceAlert === 'replace' ? formatMessage('Replaced {alertFindText} with {alertReplaceText}', {
+    alertFindText,
+    alertReplaceText
+  }) : formatMessage('Replaced all {alertFindText} with {alertReplaceText}', {
+    alertFindText,
+    alertReplaceText
+  });
+
+  const renderReplaceAlert = () => {
+    if (!showReplaceAlert) {
+      liveRegionKey.current = 0;
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+
+    return /*#__PURE__*/React.createElement(Alert, {
+      variant: "success",
+      renderCloseButtonLabel: "Close Alert",
+      margin: "small",
+      transition: "fade",
+      onDismiss: () => setShowReplaceAlert(''),
+      timeout: 3000
+    }, alertText);
+  };
+
+  const renderScreenReaderAlert = () => {
+    return /*#__PURE__*/React.createElement(ScreenReaderContent, null, alertText);
+  };
+
+  const errMsg = formatMessage('No results found');
+  const messages = findText && max === 0 ? [{
+    text: errMsg,
+    type: 'error'
+  }] : [];
+
+  const resultText = () => {
+    const srErrMsg = messages.length === 0 ? '' : errMsg; // resolves issue where focus is lost when this (dis)appears
+
+    if (max === 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
+        "aria-live": "polite"
+      }, srErrMsg), /*#__PURE__*/React.createElement(Text, null));
+    }
+
+    const msg = formatMessage('{index} of {max}', {
+      index,
+      max
+    });
+    const srResultMsg = formatMessage('Result {index} of {max}.', {
+      index,
+      max
+    }); // necessary to force screen reader to read the same message while typing
+
+    if (srContextMsg === previousSrMsg && previousFindText != findText) {
+      srDupKey.current++;
+    } else srDupKey.current = 0;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      as: "span",
+      key: srDupKey.current,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "alert"
+    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, srResultMsg, " ", srContextMsg)), /*#__PURE__*/React.createElement(Text, {
+      "aria-hidden": "true"
+    }, msg));
+  };
+
+  const isButtonDisabled = button => {
+    switch (button) {
+      case 'next':
+      case 'previous':
+        return max < 2;
+
+      case 'replace':
+        return !replaceText || index === 0;
+
+      case 'replaceAll':
+        return !replaceText || max < 2 || index === 0;
+
+      default:
+        return false;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Tray, {
+    "data-mce-component": true,
+    label: formatMessage('Find and Replace'),
+    mountNode: instuiPopupMountNode,
+    onDismiss: onRequestClose,
+    open: true,
+    placement: "end",
+    size: "regular",
+    shouldContainFocus: true,
+    shouldReturnFocus: true,
+    shouldCloseOnDocumentClick: true,
+    onOpen: () => setHasOpened(true)
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "none none medium none",
+    key: liveRegionKey.current
+  }, renderReplaceAlert(), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    role: "alert",
+    "aria-live": "polite"
+  }, renderScreenReaderAlert())), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    height: getTrayHeight()
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "medium medium small"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h2"
+  }, formatMessage('Find and Replace'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "static",
+    color: "primary",
+    "data-testid": "close-button",
+    screenReaderLabel: formatMessage('Close'),
+    onClick: onRequestClose
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "div",
+    padding: "0 large large"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "large 0 medium 0"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    renderLabel: formatMessage('Find'),
+    name: "findtext",
+    onChange: e => handleTextChange(e),
+    onKeyDown: e => handleFindKeyDown(e),
+    value: findText,
+    placeholder: formatMessage('enter search text'),
+    renderAfterInput: resultText(),
+    messages: messages,
+    "data-testid": "find-text-input"
+  })), /*#__PURE__*/React.createElement(View, {
+    as: "div"
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
+    size: "6.125rem"
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    margin: "0 medium 0 0",
+    onClick: onPrevious,
+    disabled: isButtonDisabled('previous'),
+    "data-testid": "previous-button",
+    "aria-label": formatMessage('Previous {findText}', {
+      findText
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, formatMessage('Previous')))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    margin: "0 small 0 0",
+    onClick: onNext,
+    disabled: isButtonDisabled('next'),
+    "data-testid": "next-button",
+    "aria-label": formatMessage('Next {findText}', {
+      findText
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, formatMessage('Next')))))), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "large 0 medium 0"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    renderLabel: formatMessage('Replace with'),
+    name: "replacetext",
+    onChange: e => setReplaceText(e.target.value),
+    onKeyDown: e => handleReplaceKeyDown(e),
+    value: replaceText,
+    placeholder: formatMessage('enter replacement text'),
+    "data-testid": "replace-text-input"
+  })), /*#__PURE__*/React.createElement(View, {
+    as: "div"
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    margin: "0 small 0 0",
+    onClick: () => replace(replaceText, true, true),
+    disabled: isButtonDisabled('replaceAll'),
+    "data-testid": "replace-all-button",
+    "aria-label": formatMessage('Replace all {findText} with {replaceText}', {
+      findText,
+      replaceText
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, formatMessage('Replace All')))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    margin: "0 small 0 0",
+    onClick: () => {
+      replace(replaceText, true, false);
+    },
+    disabled: isButtonDisabled('replace'),
+    "data-testid": "replace-button",
+    "aria-label": formatMessage('Replace {findText} with {replaceText}', {
+      findText,
+      replaceText
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, formatMessage('Replace')))))))));
+}
+FindReplaceTray.propTypes = {
+  onNext: _pt.func.isRequired,
+  onPrevious: _pt.func.isRequired,
+  onFind: _pt.func.isRequired,
+  onRequestClose: _pt.func.isRequired,
+  onReplace: _pt.func.isRequired,
+  index: _pt.number.isRequired,
+  max: _pt.number.isRequired,
+  initialText: _pt.string,
+  selectionContext: _pt.arrayOf(_pt.string)
+};

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTrayController.js

@@ -0,0 +1,139 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2019 - 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, { useState } from 'react';
+import FindReplaceTray from './FindReplaceTray';
+export default function FindReplaceTrayController(_ref) {
+  let {
+    plugin,
+    onDismiss,
+    initialText = '',
+    undoManager,
+    getSelectionContext
+  } = _ref;
+  // this component really just exists to make the index easier to track
+  const [findIndex, setFindIndex] = useState(0);
+  const [findCount, setFindCount] = useState(0);
+  const [selectionContext, setSelectionContext] = useState(['', '']);
+
+  const updateSelectionContext = () => {
+    const srText = getSelectionContext();
+    setSelectionContext(srText);
+  };
+
+  const newFindIndex = direction => {
+    let newIndex = 0;
+
+    if (findCount === 0) {
+      newIndex = 0;
+    } else if (direction === 1) {
+      // at max count, wrap back to 1
+      if (findIndex === findCount) {
+        newIndex = 1;
+      } else newIndex = findIndex + 1;
+    } else if (direction === -1) {
+      // at 1, wrap back to max
+      if (findIndex === 1) {
+        newIndex = findCount;
+      } else newIndex = findIndex - 1;
+    }
+
+    return newIndex;
+  };
+
+  const done = () => {
+    plugin.done(false);
+    setFindCount(0);
+    setFindIndex(0);
+    setSelectionContext([]);
+  };
+
+  const handleDismiss = () => {
+    done();
+    onDismiss();
+  };
+
+  const handleNext = () => {
+    plugin.next();
+    setFindIndex(newFindIndex(1));
+    updateSelectionContext();
+  };
+
+  const handlePrevious = () => {
+    plugin.prev();
+    setFindIndex(newFindIndex(-1));
+    updateSelectionContext();
+  };
+
+  const handleFind = text => {
+    if (!text) {
+      done();
+    } else {
+      const count = plugin.find(text);
+      setFindCount(count);
+      const index = count ? 1 : 0;
+      setFindIndex(index);
+      updateSelectionContext();
+    }
+  };
+
+  const handleReplace = function (text) {
+    let forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    let all = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (!text) return;
+    undoManager === null || undoManager === void 0 ? void 0 : undoManager.add();
+    plugin.replace(text, forward, all);
+
+    if (findCount === 1 || all) {
+      done();
+      return;
+    } // we can't just find again, because that will reset index to 1
+
+
+    let newIndex;
+    const newFindCount = findCount - 1;
+
+    if (forward) {
+      newIndex = findIndex === findCount ? 1 : findIndex;
+    } else {
+      newIndex = findIndex === 1 ? newFindCount : findIndex - 1;
+    }
+
+    setFindCount(newFindCount);
+    setFindIndex(newIndex);
+    updateSelectionContext();
+  };
+
+  return /*#__PURE__*/React.createElement(FindReplaceTray, {
+    onRequestClose: handleDismiss,
+    onNext: handleNext,
+    onPrevious: handlePrevious,
+    onFind: handleFind,
+    onReplace: handleReplace,
+    index: findIndex,
+    max: findCount,
+    initialText: initialText,
+    selectionContext: selectionContext
+  });
+}
+FindReplaceTrayController.propTypes = {
+  onDismiss: _pt.func.isRequired,
+  initialText: _pt.string,
+  getSelectionContext: _pt.func.isRequired
+};

package/es/rce/plugins/instructure_search_and_replace/getSelectionContext.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2024 - 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/>.
+ */
+const NUMBER_OF_WORDS = 10;
+
+const countWords = text => {
+  // ignore text before the first whitespace because it is part of the selected text
+  const countText = text.split(/\s+/).slice(1).join(' ');
+  const count = countText.trim().split(/\s+/).length;
+  return count;
+};
+
+const getAfterText = startingElement => {
+  let text = '';
+  let element = startingElement.nextSibling;
+
+  while (element) {
+    text += element.textContent;
+    element = element.nextSibling;
+  }
+
+  if (text.includes('.')) {
+    const index = text.indexOf('.');
+    text = text.substring(0, index + 1);
+  }
+
+  if (countWords(text) > NUMBER_OF_WORDS) {
+    text = text.split(/\s+/).slice(0, NUMBER_OF_WORDS + 1).join(' ');
+  }
+
+  return text;
+};
+
+const getBeforeText = (startingElement, wordCount) => {
+  let text = '';
+  let element = startingElement.previousSibling;
+
+  while (element) {
+    text = element.textContent + text;
+    element = element.previousSibling;
+  }
+
+  text = text.split(/\s+/).slice(-wordCount - 1).join(' ');
+  return text;
+};
+
+export const getSelectionContext = elements => {
+  const firstSelected = elements[0];
+  const lastSelected = elements[elements.length - 1];
+  const afterText = getAfterText(lastSelected);
+  const remainingWordCount = Math.max(NUMBER_OF_WORDS - countWords(afterText), 0);
+  const beforeText = getBeforeText(firstSelected, remainingWordCount);
+  return [beforeText, afterText];
+};

package/es/rce/plugins/instructure_search_and_replace/plugin.js

@@ -0,0 +1,39 @@
+/*
+ * 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/>.
+ */
+import tinymce from 'tinymce';
+import formatMessage from '../../../format-message';
+import clickCallback from './clickCallback';
+tinymce.PluginManager.add('instructure_search_and_replace', function (editor) {
+  var _editor$plugins;
+
+  // We use the searchreplace plugins API
+  if (!((_editor$plugins = editor.plugins) !== null && _editor$plugins !== void 0 && _editor$plugins.searchreplace)) return;
+
+  const launchFindModal = ed => () => {
+    clickCallback(ed, document);
+  };
+
+  editor.addCommand('launch_instructure_search_and_replace', launchFindModal(editor));
+  editor.ui.registry.addMenuItem('instructure_search_and_replace', {
+    text: formatMessage('Find and Replace'),
+    icon: 'search',
+    shortcut: 'Meta+F',
+    onAction: () => editor.execCommand('launch_instructure_search_and_replace')
+  });
+  editor.shortcuts.add('Meta+F', '', launchFindModal(editor));
+});

package/es/rce/plugins/instructure_search_and_replace/types.d.js

@@ -0,0 +1 @@
+export {};

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

@@ -94,11 +94,13 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const type = content_type.replace(/\/.*$/, '');
 
   if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+    var _RCEGlobals$getFeatur2;
+
     const url = parse(`/media_attachments_iframe/${file.id}`, true);
     url.query.type = type;
     url.query.embedded = true;
 
-    if (file.uuid && file.contextType == 'User') {
+    if (file.uuid && (file.contextType == 'User' || !!canvasOrigin && canvasOrigin !== window.location.origin && (_RCEGlobals$getFeatur2 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur2 !== void 0 && _RCEGlobals$getFeatur2.file_verifiers_for_quiz_links)) {
       url.query.verifier = file.uuid;
     } else if (file.url || file.href) {
       const parsed_url = parse(file.url || file.href, true);

package/es/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -34,6 +34,7 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
         config,
         additionalRules,
         mountNode,
+        triggerElementId,
         onFixError
       } = _ref;
 
@@ -43,7 +44,16 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
           editor: ed,
           additionalRules: additionalRules,
           mountNode: mountNode,
-          onClose: () => isCheckerOpen = false,
+          onClose: () => {
+            isCheckerOpen = false;
+
+            if (triggerElementId) {
+              var _button$;
+
+              const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
+              (_button$ = button[0]) === null || _button$ === void 0 ? void 0 : _button$.focus();
+            }
+          },
           onFixError: onFixError
         }), container, function () {
           // this is a workaround for react 16 since ReactDOM.render is not

package/es/rce/plugins/tinymce-a11y-checker/utils/indicate.js

@@ -28,7 +28,7 @@ export const A11Y_CHECKER_STYLE_ELEM_ID = 'a11y-checker-style'; // Remove the cu
 // the style element
 
 export function clearIndicators(doc) {
-  const checker_style = doc.getElementById(A11Y_CHECKER_STYLE_ELEM_ID);
+  const checker_style = doc === null || doc === void 0 ? void 0 : doc.getElementById(A11Y_CHECKER_STYLE_ELEM_ID);
 
   if (checker_style) {
     checker_style.textContent = '';

package/es/rce/tinyRCE.js

@@ -34,7 +34,8 @@ import 'tinymce/plugins/textpattern/plugin';
 import 'tinymce/plugins/wordcount/plugin';
 import 'tinymce/plugins/paste/plugin';
 import 'tinymce/plugins/table/plugin';
-import 'tinymce/plugins/hr/plugin'; // add custom plugins
+import 'tinymce/plugins/hr/plugin';
+import 'tinymce/plugins/searchreplace/plugin'; // add custom plugins
 
 import './plugins/instructure-ui-icons/plugin';
 import './plugins/instructure_condensed_buttons/plugin';
@@ -51,6 +52,7 @@ import './plugins/instructure_wordcount/plugin';
 import './plugins/instructure_paste/plugin';
 import './plugins/instructure_fullscreen/plugin';
 import './plugins/instructure_studio_media_options/plugin';
+import './plugins/instructure_search_and_replace/plugin';
 import './plugins/tinymce-a11y-checker/plugin'; // prevent tinymce from loading language scripts with explicit
 // language_url of 'none'