@instructure/canvas-rce 6.0.0 → 7.2.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;
     };

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,12 +1,10 @@
 export default instance;
 export type Features = {
-    media_links_use_attachment_id: boolean;
     file_verifiers_for_quiz_links: boolean;
 };
 declare const instance: RCEGlobals;
 /**
  * @typedef {Object} Features
- * @property {boolean} media_links_use_attachment_id
  * @property {boolean} file_verifiers_for_quiz_links
  */
 declare class RCEGlobals {

package/es/rce/RCEGlobals.js

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

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, ai_text_tools?: 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', 'instructure_documents']
+    }, {
+      name: formatMessage('Alignment and Lists'),
+      items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['removeformat', 'instructure_equation']
+    }];
+  }
   return [{
     name: formatMessage('Styles'),
     items: ['fontsizeselect', 'formatselect']
@@ -121,16 +139,24 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
     items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
   }];
 }
-export function getStatusBarFeaturesForVariant(variant, ai_text_tools = false) {
-  if (variant === 'lite' || variant === 'text-only') {
-    return ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
-  }
+const DESKTOP_FEATURES = ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
+const MOBILE_FEATURES = ['a11y_checker', 'word_count'];
+const EXTENDED_FEATURES = ['html_view', 'fullscreen', 'resize_handle'];
+const A11Y_RESIZERS = ['a11y_resize_handlers'];
+export function getStatusBarFeaturesForVariant(variant, options = {
+  aiTextTools: false,
+  isDesktop: true,
+  a11yResizers: false
+}) {
   if (variant === 'text-block') {
     return [];
   }
-  const full_features = ['keyboard_shortcuts', 'a11y_checker', 'word_count', 'html_view', 'fullscreen', 'resize_handle'];
-  if (ai_text_tools) {
-    full_features.push('ai_tools');
+  if (variant === 'block-content-editor') {
+    return ['keyboard_shortcuts', 'word_count'];
+  }
+  const platformFeatures = options.isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
+  if (variant === 'lite' || variant === 'text-only') {
+    return platformFeatures;
   }
-  return full_features;
+  return [...platformFeatures, ...EXTENDED_FEATURES, ...(options.a11yResizers ? A11Y_RESIZERS : []), ...(options.aiTextTools ? ['ai_tools'] : [])];
 }

package/es/rce/RCEWrapper.d.ts

@@ -13,7 +13,6 @@ interface RCEWrapperProps {
     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,7 +214,6 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         new_math_equation_handling: unknown;
         explicit_latex_typesetting: unknown;
         rce_transform_loaded_content: unknown;
-        media_links_use_attachment_id: unknown;
         file_verifiers_for_quiz_links: unknown;
         rce_find_replace: unknown;
         consolidated_media_player: unknown;
@@ -348,7 +347,6 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         type: string;
         content: string;
     };
-    setFocusAbilityForHeader: (focusable: boolean) => void;
     componentWillUnmount(): void;
     wrapOptions(options?: {}): {
         readonly: boolean | undefined;
@@ -379,13 +377,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;
         };