@instructure/canvas-rce 7.0.0 → 7.3.0

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

@@ -0,0 +1,87 @@
+import _pt from "prop-types";
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
+import { Flex } from '@instructure/ui-flex';
+import { CondensedButton } from '@instructure/ui-buttons';
+import { IconPlayLine } from '@instructure/ui-icons';
+import formatMessage from '../format-message';
+const YoutubeEmbedOverlay = ({
+  iframeElement,
+  height,
+  width
+}) => {
+  const [showOverlay, setShowOverlay] = useState(true);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (containerRef.current && iframeElement) {
+      if (width) {
+        containerRef.current.style.width = `${width}px`;
+      }
+      if (height) {
+        containerRef.current.style.height = `${height}px`;
+      }
+      containerRef.current.appendChild(iframeElement);
+    }
+  }, [height, iframeElement, width]);
+  const handleCloseOverlay = useCallback(() => {
+    setShowOverlay(false);
+  }, [setShowOverlay]);
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    position: "relative",
+    display: "inline-block"
+  }, showOverlay && /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    background: "primary",
+    themeOverride: {
+      backgroundPrimary: 'rgba(10, 71, 91, 0.65)'
+    },
+    overflowY: "hidden"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: true,
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    margin: "0 0 small"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+    color: "secondary-inverse",
+    weight: "bold"
+  }, formatMessage('This video may display YouTube ads.')))), /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    margin: "0 0 medium"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CondensedButton, {
+    "data-test-id": "youtube-migration-close-overlay",
+    color: "primary-inverse",
+    onClick: handleCloseOverlay
+  }, /*#__PURE__*/React.createElement(IconPlayLine, null), "\xA0", formatMessage('Continue to YouTube content'))))))), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }));
+};
+YoutubeEmbedOverlay.propTypes = {
+  height: _pt.number.isRequired,
+  width: _pt.number.isRequired
+};
+export const createOverlay = iframes => {
+  iframes.forEach(iframe => {
+    const iframeElement = iframe;
+    const height = iframeElement.offsetHeight;
+    const width = iframeElement.offsetWidth;
+    const container = document.createElement('div');
+    container.setAttribute('data-test-id', 'youtube-migration-container');
+    iframe.replaceWith(container);
+    createRoot(container).render(/*#__PURE__*/React.createElement(YoutubeEmbedOverlay, {
+      iframeElement: iframeElement,
+      height: height,
+      width: width
+    }));
+  });
+};

package/es/format-message.d.js

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

package/es/format-message.js

@@ -17,7 +17,12 @@
  */
 
 import formatMessage from 'format-message';
+import generateId from 'format-message-generate-id/underscored_crc32';
 const ns = formatMessage.namespace();
+ns.setup({
+  generateId,
+  missingTranslation: 'ignore'
+});
 ns.addLocale = translations => {
   ns.setup({
     translations: {

package/es/index.d.ts

@@ -16,6 +16,7 @@ export declare const defaultConfiguration: {
     menubar: undefined;
     menu: undefined;
     toolbar: undefined;
+    color_map: string[];
     plugins: undefined;
     branding: boolean;
     browser_spellcheck: boolean;
@@ -25,7 +26,6 @@ export declare const defaultConfiguration: {
     language_load: boolean;
     language_url: string;
     toolbar_mode: string;
-    toolbar_ticky: boolean;
     mobile: {
         theme: string;
     };
@@ -57,3 +57,4 @@ export declare function getRCSAuthenticationHeaders(jwt: string): {
     Authorization: string;
 };
 export declare function getRCSOriginFromHost(host: string): any;
+export { default as checkNode } from './rce/plugins/tinymce-a11y-checker/node-checker';

package/es/index.js

@@ -50,4 +50,5 @@ export function getRCSAuthenticationHeaders(jwt) {
 }
 export function getRCSOriginFromHost(host) {
   return originFromHost(host);
-}
+}
+export { default as checkNode } from './rce/plugins/tinymce-a11y-checker/node-checker';

package/es/rce/AlertMessageArea.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { AlertVariant } from './types';
+import React from "react";
+import type { AlertVariant } from "./types";
 interface AlertMessageAreaProps {
     messages: {
         id: number;

package/es/rce/AlertMessageArea.js

@@ -16,8 +16,8 @@ import _pt from "prop-types";
  * 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 { Alert } from '@instructure/ui-alerts';
-import React from 'react';
+import { Alert } from "@instructure/ui-alerts";
+import React from "react";
 /**
  * Shows messages that have been provided to it in the RCE
  */
@@ -28,10 +28,8 @@ export default function AlertMessageArea({
 }) {
   return /*#__PURE__*/React.createElement("div", null, messages.map(message => /*#__PURE__*/React.createElement(Alert, {
     key: message.id,
-    variant: message.variant || 'info',
-    timeout: 10000
-    // @ts-expect-error
-    ,
+    variant: message.variant || "info",
+    timeout: 10000,
     liveRegion: liveRegion,
     onDismiss: () => afterDismiss(message.id)
   }, message.text)));

package/es/rce/RCE.d.ts

@@ -16,7 +16,6 @@ export interface RCEPropTypes {
     autosave?: {
         enabled?: boolean;
         maxAge?: number;
-        interval?: number;
     };
     /**
      * the protocol://domain:port for this RCE's canvas

package/es/rce/RCE.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import formatMessage from '../format-message';
 import RCEWrapper from './RCEWrapper';
 import { editorLanguage } from './editorLanguage';
@@ -69,15 +69,10 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       locale: normalizeLocale(props.language)
     });
   });
-  const [translations, setTranslations] = useState(() => {
+  const [isTranslationLoading, setIsTranslationLoading] = useState(true);
+  useEffect(() => {
     const locale = normalizeLocale(props.language);
-    const p = getTranslations(locale).then(() => {
-      setTranslations(true);
-    }).catch(err => {
-      console.error('Failed loading the language file for', locale, '\n Cause:', err);
-      setTranslations(false);
-    });
-    return p;
+    getTranslations(locale).catch(err => console.error('Failed loading the language file for', locale, '\n Cause:', err)).finally(() => setIsTranslationLoading(false));
   });
 
   // some properties are only used on initialization
@@ -111,7 +106,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     wrapInitCb(mirroredAttrs || {}, iProps.editorOptions);
     return iProps;
   });
-  if (typeof translations !== 'boolean') {
+  if (isTranslationLoading) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage('Loading...'));
   } else {
     return /*#__PURE__*/React.createElement(RCEWrapper, Object.assign({

package/es/rce/RCEGlobals.d.ts

@@ -1,11 +1,13 @@
 export default instance;
 export type Features = {
     file_verifiers_for_quiz_links: boolean;
+    rce_studio_embed_improvements: boolean;
 };
 declare const instance: RCEGlobals;
 /**
  * @typedef {Object} Features
  * @property {boolean} file_verifiers_for_quiz_links
+ * @property {boolean} rce_studio_embed_improvements
  */
 declare class RCEGlobals {
     _data: {

package/es/rce/RCEGlobals.js

@@ -21,6 +21,7 @@ const isEmpty = obj => Object.keys(obj).length === 0;
 /**
  * @typedef {Object} Features
  * @property {boolean} file_verifiers_for_quiz_links
+ * @property {boolean} rce_studio_embed_improvements
  */
 
 class RCEGlobals {

package/es/rce/RCEVariants.d.ts

@@ -7,11 +7,16 @@ interface ToolbarGroupSetting {
     name: string;
     items: string[];
 }
-type StatusBarFeature = 'ai_tools' | 'keyboard_shortcuts' | 'a11y_checker' | 'word_count' | 'html_view' | 'fullscreen' | 'resize_handle';
-export declare const RCEVariantValues: readonly ["full", "lite", "text-only", "text-block"];
+type StatusBarFeature = 'ai_tools' | 'keyboard_shortcuts' | 'a11y_checker' | 'word_count' | 'html_view' | 'fullscreen' | 'resize_handle' | 'a11y_resize_handlers';
+export declare const RCEVariantValues: readonly ["full", "lite", "text-only", "text-block", "block-content-editor"];
 export type RCEVariant = (typeof RCEVariantValues)[number];
+export type StatusBarOptions = {
+    aiTextTools?: boolean;
+    isDesktop?: boolean;
+    a11yResizers?: boolean;
+};
 export declare function getMenubarForVariant(variant: RCEVariant): MenuBarSpec;
 export declare function getMenuForVariant(variant: RCEVariant): MenusSpec;
 export declare function getToolbarForVariant(variant: RCEVariant, ltiToolFavorites?: string[]): ToolbarGroupSetting[];
-export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, aiTextTools?: boolean, isDesktop?: boolean): StatusBarFeature[];
+export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, options?: StatusBarOptions): StatusBarFeature[];
 export {};

package/es/rce/RCEVariants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 - present Instructure, Inc.
+ * Copyright (C) 2025 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -21,7 +21,7 @@ import formatMessage from '../format-message';
 
 // copied from node_modules/tinymce/tinymce.d.ts:1187
 
-export const RCEVariantValues = ['full', 'lite', 'text-only', 'text-block'];
+export const RCEVariantValues = ['full', 'lite', 'text-only', 'text-block', 'block-content-editor'];
 export function getMenubarForVariant(variant) {
   if (variant === 'full') {
     return 'edit view insert format tools table';
@@ -101,6 +101,24 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
       items: ['removeformat', 'instructure_equation']
     }];
   }
+  if (variant === 'block-content-editor') {
+    return [{
+      name: formatMessage('Styles'),
+      items: ['fontsizeselect', 'formatselect']
+    }, {
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline', 'instructure_color', 'inst_subscript', 'inst_superscript']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links']
+    }, {
+      name: formatMessage('Alignment and Lists'),
+      items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['removeformat', 'instructure_equation', 'instructure_keyboard_shortcuts_header', 'instructure_wordcount_header']
+    }];
+  }
   return [{
     name: formatMessage('Styles'),
     items: ['fontsizeselect', 'formatselect']
@@ -124,13 +142,21 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
 const DESKTOP_FEATURES = ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
 const MOBILE_FEATURES = ['a11y_checker', 'word_count'];
 const EXTENDED_FEATURES = ['html_view', 'fullscreen', 'resize_handle'];
-export function getStatusBarFeaturesForVariant(variant, aiTextTools = false, isDesktop = true) {
+const A11Y_RESIZERS = ['a11y_resize_handlers'];
+export function getStatusBarFeaturesForVariant(variant, options = {
+  aiTextTools: false,
+  isDesktop: true,
+  a11yResizers: false
+}) {
   if (variant === 'text-block') {
     return [];
   }
-  const platformFeatures = isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
+  if (variant === 'block-content-editor') {
+    return [];
+  }
+  const platformFeatures = options.isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
   if (variant === 'lite' || variant === 'text-only') {
     return platformFeatures;
   }
-  return [...platformFeatures, ...EXTENDED_FEATURES, ...(aiTextTools ? ['ai_tools'] : [])];
+  return [...platformFeatures, ...EXTENDED_FEATURES, ...(options.a11yResizers ? A11Y_RESIZERS : []), ...(options.aiTextTools ? ['ai_tools'] : [])];
 }

package/es/rce/RCEWrapper.d.ts

@@ -1,19 +1,18 @@
-import React, { ReactNode } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import tinymce from 'tinymce';
-import type { Editor as TinyMCEEditor } from 'tinymce';
-import { PlaceHoldableThingInfo } from '../util/loadingPlaceholder';
-import EncryptedStorage from '../util/encrypted-storage';
-import { RCEVariant } from './RCEVariants';
-import { mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude } from './RCEWrapper.utils';
-import { AlertMessage, EditorOptions, RCETrayProps } from './types';
-export declare function storageAvailable(): boolean | undefined;
+import React, { ReactNode } from "react";
+import { Editor } from "@tinymce/tinymce-react";
+import tinymce from "tinymce";
+import type { Editor as TinyMCEEditor } from "tinymce";
+import { PlaceHoldableThingInfo } from "../util/loadingPlaceholder";
+import EncryptedStorage from "../util/encrypted-storage";
+import { RCEVariant } from "./RCEVariants";
+import { mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude } from "./RCEWrapper.utils";
+import { AlertMessage, EditorOptions, RCETrayProps } from "./types";
+export declare function storageAvailable(): boolean | null;
 interface RCEWrapperProps {
     ai_text_tools?: boolean;
     autosave?: {
         enabled?: boolean;
         maxAge?: number;
-        interval?: number;
     };
     canvasOrigin: string;
     defaultContent?: string;
@@ -75,6 +74,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
     _showOnFocusButton?: HTMLElement;
     _statusBarId: string;
     _textareaEl?: HTMLTextAreaElement;
+    _effectiveContainingContext: RCETrayProps["containingContext"];
     AIToolsTray?: ReactNode;
     editor: TinyMCEEditor | null;
     initialContent?: string;
@@ -191,7 +191,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
             maxMruTools: import("prop-types").Requireable<number>;
         }>>;
         ai_text_tools: import("prop-types").Requireable<boolean>;
-        variant: import("prop-types").Requireable<"full" | "lite" | "text-only" | "text-block">;
+        variant: import("prop-types").Requireable<"full" | "lite" | "text-only" | "text-block" | "block-content-editor">;
     };
     static defaultProps: {
         trayProps: null;
@@ -214,6 +214,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         new_math_equation_handling: unknown;
         explicit_latex_typesetting: unknown;
         rce_transform_loaded_content: unknown;
+        rce_studio_embed_improvements: unknown;
         file_verifiers_for_quiz_links: unknown;
         rce_find_replace: unknown;
         consolidated_media_player: unknown;
@@ -315,6 +316,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
      */
     _setupSelectionSaving: (editor: any) => void;
     announcing: number;
+    _isMounted: boolean;
     announceContextToolbars(editor: TinyMCEEditor): void;
     initAutoSave: (editor: TinyMCEEditor) => void;
     cleanupAutoSave: (deleteAll?: boolean) => void;
@@ -377,13 +379,13 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         auto_focus: boolean;
         body_class: string;
         directionality: string;
+        color_map: string[];
         branding: boolean;
         browser_spellcheck: boolean;
         convert_urls: boolean;
         font_formats: string;
         language_load: boolean;
         language_url: string;
-        toolbar_ticky: boolean;
         mobile: {
             theme: string;
         };
@@ -423,4 +425,4 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
     render(): React.JSX.Element;
 }
 export default RCEWrapper;
-export { mergeMenuItems, mergeMenu, mergeToolbar, mergePlugins, parsePluginsToExclude };
+export { mergeMenuItems, mergeMenu, mergeToolbar, mergePlugins, parsePluginsToExclude, };