@instructure/canvas-rce 5.15.7 → 7.0.0

package/es/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - present Instructure, Inc.
+ * Copyright (C) 2025 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
@@ -60,6 +60,17 @@ export default function ImageOptionsTray(props) {
     minWidth: MIN_WIDTH,
     minPercentage: MIN_PERCENTAGE
   });
+  const [altHasError, setAltHasError] = useState(false);
+  const [urlHasError, setUrlHasError] = useState(false);
+  const [dimensionsHasError, setDimensionsHasError] = useState(false);
+  const urlRef = useRef(null);
+  const altRef = useRef(null);
+  const dimensionsRef = useRef(null);
+  useEffect(() => {
+    setUrlHasError(showUrlField && url === '');
+    setAltHasError(displayAs === 'embed' && !isDecorativeImage && altText === '');
+    setDimensionsHasError(imageSize === CUSTOM && !dimensionsState?.isValid);
+  }, [isDecorativeImage, altText, url, displayAs, showUrlField, imageSize, dimensionsState?.isValid]);
   function handleUrlChange(newUrl) {
     setUrl(newUrl);
   }
@@ -72,7 +83,7 @@ export default function ImageOptionsTray(props) {
   function handleDisplayAsChange(event) {
     setDisplayAs(event.target.value);
   }
-  function handleImageSizeChange(event, selectedOption) {
+  function handleImageSizeChange(_e, selectedOption) {
     setImageSize(selectedOption.value);
     if (selectedOption.value === CUSTOM) {
       setImageHeight(currentHeight);
@@ -88,6 +99,18 @@ export default function ImageOptionsTray(props) {
   }
   function handleSave(event) {
     event.preventDefault();
+    if (urlHasError || altHasError || dimensionsHasError) {
+      if (altHasError) {
+        altRef?.current?.focus();
+      }
+      if (urlHasError) {
+        urlRef?.current?.focus();
+      }
+      if (dimensionsHasError) {
+        dimensionsRef?.current?.focus();
+      }
+      return;
+    }
     const savedAltText = isDecorativeImage ? '' : altText;
     let appliedHeight = imageHeight;
     let appliedWidth = imageWidth;
@@ -134,9 +157,6 @@ export default function ImageOptionsTray(props) {
       type: 'hint'
     });
   }
-  const disableForIcons = isIconMaker && !isDecorativeImage && altText === '';
-  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !dimensionsState?.isValid);
-  const saveDisabled = isIconMaker ? disableForIcons : disableForImages;
   const trayLabel = isIconMaker ? formatMessage('Icon Options Tray') : formatMessage('Image Options Tray');
   const trayHeading = isIconMaker ? formatMessage('Icon Options') : formatMessage('Image Options');
   return /*#__PURE__*/React.createElement(Tray, {
@@ -183,7 +203,9 @@ export default function ImageOptionsTray(props) {
     padding: "small"
   }, /*#__PURE__*/React.createElement(UrlPanel, {
     fileUrl: url,
-    setFileUrl: handleUrlChange
+    urlRef: urlRef,
+    setFileUrl: handleUrlChange,
+    urlHasError: urlHasError
   })), /*#__PURE__*/React.createElement(ImageOptionsForm, {
     id: "image-options-form",
     imageSize: imageSize,
@@ -197,14 +219,16 @@ export default function ImageOptionsTray(props) {
     handleDisplayAsChange: handleDisplayAsChange,
     handleImageSizeChange: handleImageSizeChange,
     messagesForSize: messagesForSize,
-    isIconMaker: isIconMaker
+    isIconMaker: isIconMaker,
+    altHasError: altHasError,
+    altRef: altRef,
+    dimensionsRef: dimensionsRef
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     background: "secondary",
     borderWidth: "small none none none",
     padding: "small medium",
     textAlign: "end"
   }, /*#__PURE__*/React.createElement(Button, {
-    disabled: saveDisabled,
     onClick: handleSave,
     color: "primary"
   }, formatMessage('Done')))))));

package/es/rce/plugins/instructure_rce_external_tools/RceToolWrapper.d.ts

@@ -33,7 +33,7 @@ export declare class RceToolWrapper {
         width: import("prop-types").Requireable<number>;
         use_tray: import("prop-types").Requireable<boolean>;
         canvas_icon_class: import("prop-types").Requireable<any>;
-    }, "description" | "id" | "name" | "height" | "width" | "favorite" | "on_by_default" | "icon_url" | "use_tray" | "canvas_icon_class">>>)[], mruIds?: string[]): RceToolWrapper[];
+    }, "id" | "name" | "width" | "height" | "description" | "favorite" | "on_by_default" | "icon_url" | "use_tray" | "canvas_icon_class">>>)[], mruIds?: string[]): RceToolWrapper[];
     readonly iconId: string | null | undefined;
     isMruTool: boolean;
     get editor(): import("../../types").ExternalToolsEditor | null;

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -21,7 +21,6 @@ import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
 import { asAudioElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
 import AudioOptionsTray from '.';
-import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-audio-options-tray-container';
 export default class TrayController {
   constructor() {
@@ -74,7 +73,7 @@ export default class TrayController {
     return elem.parentNode.removeChild(elem);
   }
   _applyAudioOptions(audioOptions) {
-    const hasAttachmentId = RCEGlobals.getFeatures().media_links_use_attachment_id && audioOptions.attachment_id;
+    const hasAttachmentId = audioOptions.attachment_id;
     if (!hasAttachmentId && (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined')) {
       return;
     }

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.d.ts

@@ -3,12 +3,22 @@ export namespace VIDEO_SIZE_DEFAULT {
     let height: string;
     let width: string;
 }
-export namespace AUDIO_PLAYER_SIZE {
-    let width_1: string;
-    export { width_1 as width };
+export namespace STUDIO_PLAYER_VIDEO_SIZE_DEFAULT {
     let height_1: string;
     export { height_1 as height };
+    let width_1: string;
+    export { width_1 as width };
+}
+export namespace AUDIO_PLAYER_SIZE {
+    let width_2: string;
+    export { width_2 as width };
+    let height_2: string;
+    export { height_2 as height };
 }
+export function videoDefaultSize(): {
+    height: string;
+    width: string;
+};
 export default class TrayController {
     _editor: any;
     _isOpen: boolean;

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -28,10 +28,20 @@ export const VIDEO_SIZE_DEFAULT = {
   height: '225px',
   width: '400px'
 }; // AKA "LARGE"
+export const STUDIO_PLAYER_VIDEO_SIZE_DEFAULT = {
+  height: '300px',
+  width: '480px'
+};
 export const AUDIO_PLAYER_SIZE = {
   width: '320px',
   height: '14.25rem'
 };
+export const videoDefaultSize = () => {
+  if (RCEGlobals.getFeatures().consolidated_media_player) {
+    return STUDIO_PLAYER_VIDEO_SIZE_DEFAULT;
+  }
+  return VIDEO_SIZE_DEFAULT;
+};
 export default class TrayController {
   constructor() {
     this._editor = null;
@@ -108,11 +118,9 @@ export default class TrayController {
       const data = {
         media_object_id: videoOptions.media_object_id,
         title: videoOptions.titleText,
-        subtitles: videoOptions.subtitles
+        subtitles: videoOptions.subtitles,
+        attachment_id: videoOptions.attachment_id
       };
-      if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
-        data.attachment_id = videoOptions.attachment_id;
-      }
 
       // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.

package/es/rce/plugins/instructure_record/mediaTranslations.d.ts

@@ -25,6 +25,9 @@ declare namespace uploadMediaTranslations {
         let ADDED_CAPTION: string;
         let DELETED_CAPTION: string;
         let PROGRESS_LABEL: string;
+        let SELECT_SUPPORTED_FILE_TYPE: string;
+        let CHOOSE_FILE_TO_UPLOAD: string;
+        let ENTER_FILE_NAME: string;
     }
     namespace SelectStrings {
         let USE_ARROWS: string;

package/es/rce/plugins/instructure_record/mediaTranslations.js

@@ -46,7 +46,10 @@ const uploadMediaTranslations = {
     ADD_NEW_CAPTION_OR_SUBTITLE: formatMessage('Add another'),
     ADDED_CAPTION: 'Captions for {lang} added',
     DELETED_CAPTION: 'Deleted captions for {lang}',
-    PROGRESS_LABEL: formatMessage('Uploading')
+    PROGRESS_LABEL: formatMessage('Uploading'),
+    SELECT_SUPPORTED_FILE_TYPE: formatMessage('Please select a file of a supported type'),
+    CHOOSE_FILE_TO_UPLOAD: formatMessage('Please choose a file'),
+    ENTER_FILE_NAME: formatMessage('Please enter a file name')
   },
   SelectStrings: {
     USE_ARROWS: 'Use arrow keys to navigate options.',

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

@@ -20,7 +20,6 @@ import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedO
 import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
-import RCEGlobals from '../../RCEGlobals';
 import { parseUrlPath } from '../../../util/url-util';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
@@ -124,12 +123,10 @@ export function asAudioElement($element) {
       // eslint-disable-next-line no-empty
     } catch (e) {}
   }
-  if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
-    const source = $audioIframe.getAttribute('src');
-    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
-    if (matches) {
-      audioOptions.attachmentId = matches[1];
-    }
+  const source = $audioIframe.getAttribute('src');
+  const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
+  if (matches) {
+    audioOptions.attachmentId = matches[1];
   }
   return audioOptions;
 }

package/es/rce/plugins/shared/DimensionsInput/DimensionInput.d.ts

@@ -1,13 +1,15 @@
 declare function DimensionInput(props: any): React.JSX.Element;
 declare namespace DimensionInput {
     namespace propTypes {
-        let dimensionState: import("prop-types").Requireable<import("prop-types").InferProps<{
+        export let dimensionState: import("prop-types").Requireable<import("prop-types").InferProps<{
             addOffset: import("prop-types").Validator<(...args: any[]) => any>;
             inputValue: import("prop-types").Validator<string>;
             setInputValue: import("prop-types").Validator<(...args: any[]) => any>;
         }>>;
-        let label: import("prop-types").Validator<string>;
+        export { object as dimensionsRef };
+        export let label: import("prop-types").Validator<string>;
     }
 }
 export default DimensionInput;
 import React from 'react';
+import { object } from 'prop-types';

package/es/rce/plugins/shared/DimensionsInput/DimensionInput.js

@@ -17,14 +17,15 @@
  */
 
 import React from 'react';
-import { func, shape, string } from 'prop-types';
+import { func, shape, string, object } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { NumberInput } from '@instructure/ui-number-input';
 export default function DimensionInput(props) {
   const {
     dimensionState,
     label,
-    messages
+    messages,
+    dimensionsRef
   } = props;
   const {
     addOffset,
@@ -49,7 +50,12 @@ export default function DimensionInput(props) {
     isRequired: true,
     showArrows: false,
     value: inputValue,
-    messages: messages
+    messages: messages,
+    inputRef: ref => {
+      if (dimensionsRef) {
+        dimensionsRef.current = ref;
+      }
+    }
   });
 }
 DimensionInput.propTypes = {
@@ -58,5 +64,6 @@ DimensionInput.propTypes = {
     inputValue: string.isRequired,
     setInputValue: func.isRequired
   }),
+  dimensionsRef: object,
   label: string.isRequired
 };

package/es/rce/plugins/shared/DimensionsInput/index.d.ts

@@ -25,6 +25,7 @@ declare namespace DimensionsInput {
         export let minWidth: import("prop-types").Validator<number>;
         export let minPercentage: import("prop-types").Validator<number>;
         export { bool as hidePercentage };
+        export { object as dimensionsRef };
     }
     namespace defaultProps {
         let hidePercentage: boolean;
@@ -34,3 +35,4 @@ export default DimensionsInput;
 export { default as useDimensionsState } from "./useDimensionsState";
 import React from 'react';
 import { bool } from 'prop-types';
+import { object } from 'prop-types';

package/es/rce/plugins/shared/DimensionsInput/index.js

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { bool, func, number, shape, string } from 'prop-types';
+import { bool, func, number, shape, string, object } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine, IconWarningSolid } from '@instructure/ui-icons';
@@ -79,7 +79,8 @@ export default function DimensionsInput(props) {
     minHeight,
     minWidth,
     minPercentage,
-    hidePercentage
+    hidePercentage,
+    dimensionsRef
   } = props;
   const handleDimensionTypeChange = e => {
     dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
@@ -131,7 +132,8 @@ export default function DimensionsInput(props) {
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.percentageState,
     label: formatMessage('Percentage'),
-    messages: [secondaryMessage]
+    messages: [secondaryMessage],
+    dimensionsRef: dimensionsRef
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, "%")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
@@ -140,7 +142,8 @@ export default function DimensionsInput(props) {
     dimensionState: dimensionsState.widthState,
     label: formatMessage('Width'),
     minValue: minWidth,
-    messages: [secondaryMessage]
+    messages: [secondaryMessage],
+    dimensionsRef: dimensionsRef
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, /*#__PURE__*/React.createElement(IconLockLine, null)), /*#__PURE__*/React.createElement(Flex.Item, {
@@ -176,7 +179,8 @@ DimensionsInput.propTypes = {
   minHeight: number.isRequired,
   minWidth: number.isRequired,
   minPercentage: number.isRequired,
-  hidePercentage: bool
+  hidePercentage: bool,
+  dimensionsRef: object
 };
 DimensionsInput.defaultProps = {
   hidePercentage: false

package/es/rce/plugins/shared/ImageOptionsForm.d.ts

@@ -1,5 +1,5 @@
 export default ImageOptionsForm;
-declare function ImageOptionsForm({ imageSize, displayAs, isDecorativeImage, altText, isLinked, dimensionsState, handleAltTextChange, handleIsDecorativeChange, handleDisplayAsChange, handleImageSizeChange, messagesForSize, hideDimensions, id, isIconMaker, forBlockEditorUse, }: {
+declare function ImageOptionsForm({ imageSize, displayAs, isDecorativeImage, altText, isLinked, dimensionsState, handleAltTextChange, handleIsDecorativeChange, handleDisplayAsChange, handleImageSizeChange, messagesForSize, hideDimensions, id, isIconMaker, forBlockEditorUse, altHasError, altRef, dimensionsRef }: {
     imageSize: any;
     displayAs: any;
     isDecorativeImage: any;
@@ -15,5 +15,8 @@ declare function ImageOptionsForm({ imageSize, displayAs, isDecorativeImage, alt
     id?: string | undefined;
     isIconMaker?: boolean | undefined;
     forBlockEditorUse?: boolean | undefined;
+    altHasError?: boolean | undefined;
+    altRef?: null | undefined;
+    dimensionsRef?: null | undefined;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -44,7 +44,10 @@ const ImageOptionsForm = ({
   hideDimensions,
   id = 'image-options-form',
   isIconMaker = false,
-  forBlockEditorUse = false
+  forBlockEditorUse = false,
+  altHasError = false,
+  altRef = null,
+  dimensionsRef = null
 }) => {
   const TYPE = isIconMaker ? formatMessage('icon') : formatMessage('image');
   const tooltipText = formatMessage('Used by screen readers to describe the content of an {TYPE}', {
@@ -76,6 +79,7 @@ const ImageOptionsForm = ({
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(TextArea, {
+    "data-testid": "alt-text-field",
     disabled: isDecorativeImage,
     "aria-describedby": "alt-text-label-tooltip",
     height: "4rem",
@@ -85,7 +89,12 @@ const ImageOptionsForm = ({
       TYPE
     }),
     resize: "vertical",
-    value: altText
+    value: altText,
+    messages: altHasError ? [{
+      text: formatMessage('Invalid description'),
+      type: 'error'
+    }] : [],
+    ref: altRef
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -133,7 +142,8 @@ const ImageOptionsForm = ({
     disabled: displayAs !== 'embed',
     minHeight: MIN_HEIGHT,
     minWidth: MIN_WIDTH,
-    minPercentage: MIN_PERCENTAGE
+    minPercentage: MIN_PERCENTAGE,
+    dimensionsRef: dimensionsRef
   })))));
 };
 export default ImageOptionsForm;

package/es/rce/plugins/shared/Upload/UrlPanel.d.ts

@@ -1,12 +1,18 @@
-declare function UrlPanel({ fileUrl, setFileUrl }: {
+declare function UrlPanel({ fileUrl, setFileUrl, urlHasError, urlRef }: {
     fileUrl: any;
     setFileUrl: any;
+    urlHasError: any;
+    urlRef: any;
 }): React.JSX.Element;
 declare namespace UrlPanel {
     namespace propTypes {
-        let fileUrl: import("prop-types").Validator<string>;
-        let setFileUrl: import("prop-types").Validator<(...args: any[]) => any>;
+        export let fileUrl: import("prop-types").Validator<string>;
+        export let setFileUrl: import("prop-types").Validator<(...args: any[]) => any>;
+        export { bool as urlHasError };
+        export { object as urlRef };
     }
 }
 export default UrlPanel;
 import React from 'react';
+import { bool } from 'prop-types';
+import { object } from 'prop-types';

package/es/rce/plugins/shared/Upload/UrlPanel.js

@@ -17,22 +17,31 @@
  */
 
 import React from 'react';
-import { string, func } from 'prop-types';
+import { string, func, bool, object } from 'prop-types';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from '../../../../format-message';
 export default function UrlPanel({
   fileUrl,
-  setFileUrl
+  setFileUrl,
+  urlHasError,
+  urlRef
 }) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
     name: "file-url",
     renderLabel: formatMessage('File URL'),
     type: "url",
     value: fileUrl,
-    onChange: (e, val) => setFileUrl(val)
+    onChange: (_e, val) => setFileUrl(val),
+    messages: urlHasError ? [{
+      text: formatMessage('Invalid URL'),
+      type: 'error'
+    }] : [],
+    ref: urlRef
   }));
 }
 UrlPanel.propTypes = {
   fileUrl: string.isRequired,
-  setFileUrl: func.isRequired
+  setFileUrl: func.isRequired,
+  urlHasError: bool,
+  urlRef: object
 };

package/es/rce/plugins/shared/do-fetch-api-effect/parse-link-header.js

@@ -83,7 +83,7 @@ function intoRels(acc, x) {
   });
   return acc;
 }
-const PARSE_LINK_HEADER_MAXLEN = 2000;
+const PARSE_LINK_HEADER_MAXLEN = 4000;
 const PARSE_LINK_HEADER_THROW_ON_MAXLEN_EXCEEDED = process.env.PARSE_LINK_HEADER_THROW_ON_MAXLEN_EXCEEDED != null;
 function checkHeader(linkHeader) {
   if (!linkHeader) return false;

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

@@ -83,7 +83,7 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   if (typeof content_type !== 'string') throw new Error('Invalid content type');
   const type = content_type.replace(/\/.*$/, '');
   const baseOrigin = canvasOrigin !== null && canvasOrigin !== void 0 ? canvasOrigin : window.location.origin;
-  if (RCEGlobals.getFeatures()?.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+  if (isAudioOrVideo(content_type) && file.id) {
     const url = new URL(`/media_attachments_iframe/${file.id}`, baseOrigin);
     url.searchParams.set('type', type);
     url.searchParams.set('embedded', 'true');

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

@@ -18,6 +18,7 @@
 
 import * as dom from './utils/dom';
 import rules from './rules';
+import { enhanceRules } from './utils/rule-enhancer';
 export default function checkNode(node, done, config = {}, additionalRules = []) {
   if (!node) {
     return;
@@ -25,9 +26,9 @@ export default function checkNode(node, done, config = {}, additionalRules = [])
   const errors = [];
   const childNodeCheck = child => {
     if (child.hasAttribute('data-ignore-a11y-check')) return;
-    const composedRules = rules.concat(additionalRules);
+    // Enhance all rules with TinyMCE notification functionality
+    const composedRules = enhanceRules(rules.concat(additionalRules));
     for (const rule of composedRules) {
-      // eslint-disable-next-line promise/catch-or-return
       Promise.resolve(rule.test(child, config)).then(result => {
         if (!result) {
           errors.push({

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

@@ -27,60 +27,58 @@ const pendingInstanceCallbacks = [];
 const container = document.createElement('div');
 container.className = 'tinymce-a11y-checker-container';
 document.body.appendChild(container);
-tinymce.create('tinymce.plugins.AccessibilityChecker', {
-  init(ed) {
-    ed.addCommand('openAccessibilityChecker', function (ui, {
-      done,
-      config,
-      additionalRules,
-      mountNode,
-      triggerElementId,
-      onFixError
-    }) {
-      if (!isCheckerOpen) {
-        ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
-          getBody: ed.getBody.bind(ed),
-          editor: ed,
-          additionalRules: additionalRules,
-          mountNode: mountNode,
-          onClose: () => {
-            isCheckerOpen = false;
-            if (triggerElementId) {
-              const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
-              button[0]?.focus();
-            }
-          },
-          onFixError: onFixError
-        }), container, function () {
-          // this is a workaround for react 16 since ReactDOM.render is not
-          // guaranteed to return the instance synchronously (especially if called
-          // within another component's lifecycle method eg: componentDidMount). see:
-          // https://github.com/facebook/react/issues/10309#issuecomment-318434635
-          instance = this;
-          if (config) getInstance(instance => instance.setConfig(config));
-          pendingInstanceCallbacks.forEach(cb => cb(instance));
-          instance.check(done);
-        });
-        isCheckerOpen = true;
-      }
-    });
-    ed.addCommand('checkAccessibility', function (ui, {
-      done,
-      config,
-      additionalRules
-    }) {
-      checkNode(ed.getBody(), done, config, additionalRules);
-    });
-    ed.ui.registry.addButton('check_a11y', {
-      title: formatMessage('Check Accessibility'),
-      onAction: _ => ed.execCommand('openAccessibilityChecker'),
-      icon: 'a11y'
-    });
-  }
-});
+const AccessibilityChecker = function (ed) {
+  ed.addCommand('openAccessibilityChecker', function (ui, {
+    done,
+    config,
+    additionalRules,
+    mountNode,
+    triggerElementId,
+    onFixError
+  }) {
+    if (!isCheckerOpen) {
+      ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
+        getBody: ed.getBody.bind(ed),
+        editor: ed,
+        additionalRules: additionalRules,
+        mountNode: mountNode,
+        onClose: () => {
+          isCheckerOpen = false;
+          if (triggerElementId) {
+            const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
+            button[0]?.focus();
+          }
+        },
+        onFixError: onFixError
+      }), container, function () {
+        // this is a workaround for react 16 since ReactDOM.render is not
+        // guaranteed to return the instance synchronously (especially if called
+        // within another component's lifecycle method eg: componentDidMount). see:
+        // https://github.com/facebook/react/issues/10309#issuecomment-318434635
+        instance = this;
+        if (config) getInstance(instance => instance.setConfig(config));
+        pendingInstanceCallbacks.forEach(cb => cb(instance));
+        instance.check(done);
+      });
+      isCheckerOpen = true;
+    }
+  });
+  ed.addCommand('checkAccessibility', function (ui, {
+    done,
+    config,
+    additionalRules
+  }) {
+    checkNode(ed.getBody(), done, config, additionalRules);
+  });
+  ed.ui.registry.addButton('check_a11y', {
+    title: formatMessage('Check Accessibility'),
+    onAction: _ => ed.execCommand('openAccessibilityChecker'),
+    icon: 'a11y'
+  });
+};
 
 // Register plugin
-tinymce.PluginManager.add('a11y_checker', tinymce.plugins.AccessibilityChecker);
+tinymce.PluginManager.add('a11y_checker', AccessibilityChecker);
 export function getInstance(cb) {
   if (instance != null) {
     return cb(instance);

package/es/rce/plugins/tinymce-a11y-checker/utils/dom.d.ts

@@ -8,4 +8,10 @@ export function onlyContainsLink(elem: any): boolean;
 export function splitStyleAttribute(styleString: any): any;
 export function createStyleString(styleObj: any): string;
 export function hasTextNode(elem: any): boolean;
+/**
+ * Notifies TinyMCE that a change has been made
+ * This ensures that changes persist in the editor's state without requiring additional user actions
+ * @returns {void}
+ */
+export function notifyTinyMCE(): void;
 import indicate from './indicate';