@wix/patterns-fields 1.65.0 → 1.67.0

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput3897125604";
+var _namespace_ = "richcontentformreadonlyinput3298467833";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentformreadonlyinput3897125604__root"};
+export var classes = {"root":"richcontentformreadonlyinput3298467833__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import type { RichContent } from '@wix/ricos';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 import type { FormInputProps } from '../../../../types';
 

package/src/components/rich-content/rich-content-input/hooks.ts

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useRef } from 'react';
 
-import { toPlainText, type RichContent } from '@wix/ricos/content';
-import { isDataValid } from '../../../auto-field-types';
-import { FieldType } from '@wix/patterns-fields-utils/@wix/wix-data-schema-types';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
+import { loadRicosFromCdn } from '../cdn/load-ricos';
+import { isStrictValidAsync } from '../../../validations/rich-content';
 import { noop } from '../../../utils';
 
 import { useRichContentDocumentService } from './services';
@@ -48,11 +48,7 @@ export const useRichContentAutofix = ({
         return;
       }
 
-      const isStrictValid = isDataValid(data, FieldType.richContent, {
-        strict: true,
-      });
-
-      if (isStrictValid) {
+      if (await isStrictValidAsync(data)) {
         return;
       }
 
@@ -64,6 +60,7 @@ export const useRichContentAutofix = ({
         return;
       }
 
+      const { toPlainText } = await loadRicosFromCdn();
       const [plainText, fixedPlainText] = await Promise.all([
         toPlainText(data),
         toPlainText(fixedData),

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal491427046";
+var _namespace_ = "fullscreenmodal4250761155";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fullscreenmodal491427046__root","modalContent":"fullscreenmodal491427046__modalContent"};
+export var classes = {"root":"fullscreenmodal4250761155__root","modalContent":"fullscreenmodal4250761155__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/hooks.ts

@@ -1,13 +1,25 @@
 import isEqual from 'lodash/isEqual';
 import { useRef, useMemo, useState, useEffect } from 'react';
 
-import type { BISettings, RicosDocument } from '@wix/ricos';
-import { ensureContentId, fromPlainText } from '@wix/ricos';
+import type { BISettings, RicosDocument } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import { ensureContentId } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 import { CMS_RICOS_APP_ID } from '../consts';
 
-export const INITIAL_INJECTED_RICH_CONTENT = fromPlainText('');
+/**
+ * Sentinel for "nothing has been injected into the editor yet".
+ *
+ * A plain frozen literal rather than `fromPlainText('')`: every use is either an
+ * identity comparison against this exact object (`isEqual` in
+ * `rich-content-editor.tsx`, which the effect uses to skip injecting) or an empty
+ * fallback returned from an async publish that failed. It is never handed to
+ * ricos as content, so it does not need ricos to build it — and building it
+ * eagerly is what forced the content helpers into module scope.
+ */
+export const INITIAL_INJECTED_RICH_CONTENT = Object.freeze({
+  nodes: [],
+}) as RicosDocument;
 
 const ensureRichContent = (content?: RicosDocument) =>
   content && ensureContentId(content);

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader3884077448";
+var _namespace_ = "publishloader2050121590";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"publishloader3884077448__root","publishLoader":"publishloader3884077448__publishLoader"};
+export var classes = {"root":"publishloader2050121590__root","publishLoader":"publishloader2050121590__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton173289788";
+var _namespace_ = "togglefullscreenbutton2304801689";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"togglefullscreenbutton173289788__root"};
+export var classes = {"root":"togglefullscreenbutton2304801689__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/types.ts

@@ -1,5 +1,5 @@
 import type Experiments from '@wix/wix-experiments';
-import type { RichContent, RicosTheme } from '@wix/ricos';
+import type { RichContent, RicosTheme } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 import type { ColorScheme } from '../../types';
 

package/src/components/rich-content/rich-content-input/rich-content-editor/plugins.ts

@@ -1,86 +1,73 @@
 import { useMemo } from 'react';
 
-import type { EditorPlugin, EditorPluginOptions } from '@wix/ricos';
-import {
-  pluginTextColor,
-  pluginTextHighlight,
-  pluginHeadings,
-  pluginLink,
-  pluginLineSpacing,
-  pluginImage,
-  pluginVideo,
-  pluginDivider,
-  pluginFileUpload,
-  pluginHtml,
-  pluginLinkPreview,
-  LinkPreviewProviders,
-  pluginVerticalEmbed,
-  verticalEmbedProviders,
-  pluginEmoji,
-  pluginSpoiler,
-  pluginGiphy,
-  pluginCodeBlock,
-  pluginGallery,
-  pluginCollapsibleList,
-  pluginIndent,
-  pluginTable,
-  pluginLinkButton,
-  pluginAi,
-} from '@wix/ricos';
+import type {
+  EditorPlugin,
+  EditorPluginOptions,
+} from '@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics';
 
+import type { RicosCdnModule } from '../../cdn/types';
 import { isTruthy } from '../../../../utils';
 import type { ColorScheme } from '../../types';
 import { CMS_RICOS_APP_ID } from '../consts';
 
-const { Instagram, Twitter, TikTok } = LinkPreviewProviders;
-const { event, booking, product } = verticalEmbedProviders;
-
 const layoutPlugin: EditorPluginOptions = {
   type: 'LAYOUT',
   showInQuickActions: true,
   showInToolbars: true,
 };
 
-export const usePlugins = (colorScheme?: ColorScheme) => {
-  return useMemo<(EditorPlugin | EditorPluginOptions)[]>(
-    () =>
-      [
-        pluginHeadings({ inlinePopups: true }),
-        pluginTextColor({
-          inlinePopups: true,
-          colorScheme,
-        }),
-        pluginTextHighlight({
-          inlinePopups: true,
-          colorScheme,
-        }),
-        pluginLineSpacing({ inlinePopups: true }),
-        pluginIndent(),
-        pluginLink(),
-        pluginImage(),
-        pluginVideo(),
-        pluginGallery(),
-        pluginDivider(),
-        pluginTable({ toolbar: {} }),
-        pluginAi({
-          appDefId: CMS_RICOS_APP_ID,
-        }) as unknown as EditorPlugin,
-        pluginFileUpload(),
-        pluginHtml(),
-        pluginLinkPreview({
-          exposeEmbedButtons: [Instagram, Twitter, TikTok],
-        }),
-        pluginVerticalEmbed({
-          exposeEmbedButtons: [event, booking, product],
-        }),
-        pluginCodeBlock(),
-        pluginEmoji(),
-        pluginSpoiler(),
-        pluginGiphy(),
-        pluginCollapsibleList(),
-        pluginLinkButton(),
-        layoutPlugin,
-      ].filter(isTruthy),
-    [colorScheme],
-  );
+/**
+ * Plugin creators come from the CDN module, so this returns an empty list until
+ * it has loaded. The editor is not rendered before then, so nothing sees it.
+ */
+export const usePlugins = (
+  ricos: RicosCdnModule | undefined,
+  colorScheme?: ColorScheme,
+) => {
+  return useMemo<(EditorPlugin | EditorPluginOptions)[]>(() => {
+    if (!ricos) {
+      return [];
+    }
+
+    const { Instagram, Twitter, TikTok } = ricos.LinkPreviewProviders;
+    const { event, booking, product } = ricos.verticalEmbedProviders;
+
+    return [
+      ricos.pluginHeadings(),
+      ricos.pluginTextColor({
+        inlinePopups: true,
+        colorScheme,
+      }),
+      ricos.pluginTextHighlight({
+        inlinePopups: true,
+        colorScheme,
+      }),
+      ricos.pluginLineSpacing({ inlinePopups: true }),
+      ricos.pluginIndent(),
+      ricos.pluginLink(),
+      ricos.pluginImage(),
+      ricos.pluginVideo(),
+      ricos.pluginGallery(),
+      ricos.pluginDivider(),
+      ricos.pluginTable({ toolbar: {} }),
+      ricos.pluginAi({
+        appDefId: CMS_RICOS_APP_ID,
+      }) as unknown as EditorPlugin,
+      ricos.pluginFileUpload(),
+      ricos.pluginHtml(),
+      ricos.pluginLinkPreview({
+        exposeEmbedButtons: [Instagram, Twitter, TikTok],
+      }),
+      ricos.pluginVerticalEmbed({
+        exposeEmbedButtons: [event, booking, product],
+      }),
+      ricos.pluginCodeBlock(),
+      ricos.pluginEmoji(),
+      ricos.pluginSpoiler(),
+      ricos.pluginGiphy(),
+      ricos.pluginCollapsibleList(),
+      ricos.pluginLinkButton(),
+      layoutPlugin,
+    ].filter(isTruthy);
+  }, [ricos, colorScheme]);
 };

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor2967905748";
+var _namespace_ = "richcontenteditor2982314878";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenteditor2967905748__root","toolbarContainer":"richcontenteditor2967905748__toolbarContainer","footerToolbarContainer":"richcontenteditor2967905748__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2967905748__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2967905748__editor","modalEditor":"richcontenteditor2967905748__modalEditor"};
+export var classes = {"root":"richcontenteditor2982314878__root","toolbarContainer":"richcontenteditor2982314878__toolbarContainer","footerToolbarContainer":"richcontenteditor2982314878__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2982314878__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2982314878__editor","modalEditor":"richcontenteditor2982314878__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.tsx

@@ -14,15 +14,15 @@ import React, {
 } from 'react';
 
 import { Box, Loader } from '@wix/design-system';
+import type { RicosDocument } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 import type {
   ExternalToolbarButton as RicosExternalToolbarButton,
-  RicosDocument,
   RicosEditorAPI,
   RicosEditorProps,
   ToolbarsConfig,
-} from '@wix/ricos';
-import { RicosEditor, FORMATTING_BUTTONS } from '@wix/ricos';
+} from '@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics';
 
+import { useRicosFromCdn } from '../../cdn/load-ricos';
 import { useRequestFrameCallback } from '../../../../hooks';
 import { getActiveElement, getAppRootElement } from '../../../../utils';
 import { UserSiteFonts } from '../../../user-site-fonts';
@@ -81,7 +81,7 @@ const InsertToolbarSync: FC<ToolbarSyncProps> = ({
   // Ricos 11's next-runtime proxy is supposed to convert the legacy
   // `Record<string, ToolbarButtonProps>` into a v2 `ExternalToolbarButton[]`,
   // but some consumer bundles end up calling through to the inner adapter
-  // (duplicate `@wix/ricos` copies / unwrapped ref) and we receive the
+  // (duplicate ricos copies / unwrapped ref) and we receive the
   // record shape. Normalize to an array so `.map` is safe, and treat the
   // non-array (record) shape as ready — otherwise the absolute-positioned
   // RCELoader overlay stays mounted and the editor row becomes unclickable.
@@ -104,7 +104,9 @@ const InsertToolbarSync: FC<ToolbarSyncProps> = ({
 InsertToolbarSync.displayName = 'InsertToolbarSync';
 
 const filterStaticToolbarButtons = (button: string) =>
-  button !== FORMATTING_BUTTONS.CODE_BLOCK;
+  // Inlined rather than read off the CDN module's `FORMATTING_BUTTONS`: this is
+  // a plain string constant and the filter runs before the module has loaded.
+  button !== 'CODE_BLOCK';
 
 const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
   (
@@ -298,7 +300,9 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     );
 
     const wixRicosProps = useWixRicosProps();
-    const plugins = usePlugins(colorScheme);
+    const ricos = useRicosFromCdn();
+    const plugins = usePlugins(ricos, colorScheme);
+    const RicosEditor = ricos?.RicosEditor;
 
     return (
       <div
@@ -330,7 +334,7 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
           />
         )}
 
-        {!hidden ? (
+        {!hidden && RicosEditor ? (
           <div data-hook={dataHook} className={classes.editor}>
             <RicosEditor
               ref={setEditorInstance}

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar4116874708";
+var _namespace_ = "richcontenttoolbar807450189";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenttoolbar4116874708__root","toolbar":"richcontenttoolbar4116874708__toolbar","toolbarButton":"richcontenttoolbar4116874708__toolbarButton","separator":"richcontenttoolbar4116874708__separator"};
+export var classes = {"root":"richcontenttoolbar807450189__root","toolbar":"richcontenttoolbar807450189__toolbar","toolbarButton":"richcontenttoolbar807450189__toolbarButton","separator":"richcontenttoolbar807450189__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.tsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 
-import type { ExternalToolbarButton as RicosExternalToolbarButton } from '@wix/ricos';
-import { Tooltip } from '@wix/ricos';
+import type { ExternalToolbarButton as RicosExternalToolbarButton } from '@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics';
+// WDS rather than ricos's Tooltip: this toolbar renders from state the editor
+// pushes out, so it must not depend on the CDN module being loaded.
+import { Tooltip } from '@wix/design-system';
 
 import { classes } from './rich-content-toolbar.st.css.js';
 

package/src/components/rich-content/rich-content-input/rich-content-viewer/plugins.ts

@@ -1,68 +1,38 @@
 import { useMemo } from 'react';
 
-import {
-  pluginTextColorViewer as pluginTextColor,
-  pluginTextHighlightViewer as pluginTextHighlight,
-  pluginLinkViewer as pluginLink,
-  pluginLineSpacingViewer as pluginLineSpacing,
-  pluginImageViewer as pluginImage,
-  pluginVideoViewer as pluginVideo,
-  pluginDividerViewer as pluginDivider,
-  pluginFileUploadViewer as pluginFileUpload,
-  pluginHtmlViewer as pluginHtml,
-  pluginLinkPreviewViewer as pluginLinkPreview,
-  pluginVerticalEmbedViewer as pluginVerticalEmbed,
-  pluginEmojiViewer as pluginEmoji,
-  pluginSpoilerViewer as pluginSpoiler,
-  pluginGiphyViewer as pluginGiphy,
-  pluginCodeBlockViewer as pluginCodeBlock,
-  pluginGalleryViewer as pluginGallery,
-  pluginCollapsibleListViewer as pluginCollapsibleList,
-  pluginTableViewer as pluginTable,
-  pluginLinkButtonViewer as pluginLinkButton,
-} from '@wix/ricos';
-
-import '@wix/ricos/css/plugin-link-viewer.global.css';
-import '@wix/ricos/css/plugin-image-viewer.global.css';
-import '@wix/ricos/css/plugin-video-viewer.global.css';
-import '@wix/ricos/css/plugin-divider-viewer.global.css';
-import '@wix/ricos/css/plugin-file-upload-viewer.global.css';
-import '@wix/ricos/css/plugin-html-viewer.global.css';
-import '@wix/ricos/css/plugin-link-preview-viewer.global.css';
-import '@wix/ricos/css/plugin-vertical-embed-viewer.global.css';
-import '@wix/ricos/css/plugin-spoiler-viewer.global.css';
-import '@wix/ricos/css/plugin-giphy-viewer.global.css';
-import '@wix/ricos/css/plugin-gallery-viewer.global.css';
-import '@wix/ricos/css/plugin-collapsible-list-viewer.global.css';
-import '@wix/ricos/css/plugin-table-viewer.global.css';
-import '@wix/ricos/css/plugin-button-viewer.global.css';
-
+import type { RicosCdnModule, ViewerPlugin } from '../../cdn/types';
 import { isTruthy } from '../../../../utils';
 
-export const usePlugins = () => {
-  return useMemo(
-    () =>
-      [
-        pluginTextColor(),
-        pluginTextHighlight(),
-        pluginLineSpacing(),
-        pluginLink(),
-        pluginImage(),
-        pluginVideo(),
-        pluginGallery(),
-        pluginDivider(),
-        pluginTable(),
-        pluginFileUpload(),
-        pluginHtml(),
-        pluginLinkPreview(),
-        pluginVerticalEmbed(),
-        pluginEmoji(),
-        pluginSpoiler(),
-        pluginGiphy(),
-        pluginCodeBlock(),
-        pluginCollapsibleList(),
-        pluginLinkButton(),
-      ].filter(isTruthy),
-    [],
-  );
+/**
+ * Viewer plugin creators come from the CDN module, so this returns an empty list
+ * until it has loaded. The viewer is not rendered before then.
+ */
+export const usePlugins = (ricos: RicosCdnModule | undefined): ViewerPlugin[] => {
+  return useMemo<ViewerPlugin[]>(() => {
+    if (!ricos) {
+      return [];
+    }
+
+    return [
+      ricos.pluginTextColorViewer(),
+      ricos.pluginTextHighlightViewer(),
+      ricos.pluginLineSpacingViewer(),
+      ricos.pluginLinkViewer(),
+      ricos.pluginImageViewer(),
+      ricos.pluginVideoViewer(),
+      ricos.pluginGalleryViewer(),
+      ricos.pluginDividerViewer(),
+      ricos.pluginTableViewer(),
+      ricos.pluginFileUploadViewer(),
+      ricos.pluginHtmlViewer(),
+      ricos.pluginLinkPreviewViewer(),
+      ricos.pluginVerticalEmbedViewer(),
+      ricos.pluginEmojiViewer(),
+      ricos.pluginSpoilerViewer(),
+      ricos.pluginGiphyViewer(),
+      ricos.pluginCodeBlockViewer(),
+      ricos.pluginCollapsibleListViewer(),
+      ricos.pluginLinkButtonViewer(),
+    ].filter(isTruthy);
+  }, [ricos]);
 };

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer183561878";
+var _namespace_ = "richcontentviewer1968656074";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentviewer183561878__root","viewer":"richcontentviewer183561878__viewer","modalViewer":"richcontentviewer183561878__modalViewer"};
+export var classes = {"root":"richcontentviewer1968656074__root","viewer":"richcontentviewer1968656074__viewer","modalViewer":"richcontentviewer1968656074__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Box, Loader } from '@wix/design-system';
 
-import type { RicosDocument, RicosViewerProps } from '@wix/ricos';
-import { RicosViewer, fromPlainText } from '@wix/ricos';
-import '@wix/ricos/css/ricos-viewer.global.css';
+import type { RicosDocument } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import { fromPlainText } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import type { RicosViewerProps } from '@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics';
 
+import { useRicosFromCdn } from '../../cdn/load-ricos';
 import { useOpenState } from '../../../../hooks';
 import { preventEvent } from '../../../../utils';
 import { UserSiteFonts } from '../../../user-site-fonts';
@@ -39,7 +41,9 @@ const RCV: React.FC<RCVProps> = ({
   ...ricosProps
 }) => {
   const wixRicosProps = useWixRicosProps();
-  const plugins = usePlugins();
+  const ricos = useRicosFromCdn();
+  const plugins = usePlugins(ricos);
+  const RicosViewer = ricos?.RicosViewer;
 
   return (
     <div
@@ -53,12 +57,16 @@ const RCV: React.FC<RCVProps> = ({
         onToggleFullScreen={onToggleFullscreen}
       />
       <div data-hook={dataHook} className={classes.viewer}>
-        <RicosViewer
-          {...ricosProps}
-          {...wixRicosProps}
-          plugins={plugins}
-          content={content ?? fromPlainText('')}
-        />
+        {RicosViewer ? (
+          <RicosViewer
+            {...ricosProps}
+            {...wixRicosProps}
+            plugins={plugins}
+            content={content ?? fromPlainText('')}
+          />
+        ) : (
+          <RCVLoader />
+        )}
       </div>
     </div>
   );
@@ -66,6 +74,14 @@ const RCV: React.FC<RCVProps> = ({
 
 RCV.displayName = 'RCV';
 
+/** Shown while the CDN bundle is in flight, matching the editor's RCELoader. */
+const RCVLoader: React.FC = () => (
+  <Box align="center" verticalAlign="middle" width="100%">
+    <Loader size="small" />
+  </Box>
+);
+RCVLoader.displayName = 'RCVLoader';
+
 export interface RichContentViewerProps
   extends Omit<RCVProps, 'isFullScreen' | 'onToggleFullscreen'> {
   fullScreenOnly?: boolean;

package/src/components/rich-content/rich-content-input/services/rich-content-document-http-service.ts

@@ -1,6 +1,6 @@
 import type { WixPatternsContainer } from '@wix/bex-core';
 import { ricosDocuments } from '@wix/rich-content';
-import type { RichContent } from '@wix/ricos';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 import { isRicosLikeObject } from '../../../../auto-field-types';
 
 import { type RichContentDocumentService } from './types';

package/src/components/rich-content/rich-content-input/services/types.ts

@@ -1,4 +1,4 @@
-import type { RichContent } from '@wix/ricos';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 export interface RichContentDocumentService {
   convertToRichContent(document: unknown): Promise<RichContent | undefined>;

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor2134816257";
+var _namespace_ = "richeditor2160083106";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richeditor2134816257__root","editor":"richeditor2134816257__editor","header-one":"richeditor2134816257__header-one","header-two":"richeditor2134816257__header-two","header-three":"richeditor2134816257__header-three","header-four":"richeditor2134816257__header-four","header-five":"richeditor2134816257__header-five","header-six":"richeditor2134816257__header-six","paragraph-one":"richeditor2134816257__paragraph-one","unstyled":"richeditor2134816257__unstyled","paragraph-three":"richeditor2134816257__paragraph-three","align-left":"richeditor2134816257__align-left","align-right":"richeditor2134816257__align-right","align-center":"richeditor2134816257__align-center","align-justify":"richeditor2134816257__align-justify","withMargin":"richeditor2134816257__withMargin","dir-rtl":"richeditor2134816257__dir-rtl"};
+export var classes = {"root":"richeditor2160083106__root","editor":"richeditor2160083106__editor","header-one":"richeditor2160083106__header-one","header-two":"richeditor2160083106__header-two","header-three":"richeditor2160083106__header-three","header-four":"richeditor2160083106__header-four","header-five":"richeditor2160083106__header-five","header-six":"richeditor2160083106__header-six","paragraph-one":"richeditor2160083106__paragraph-one","unstyled":"richeditor2160083106__unstyled","paragraph-three":"richeditor2160083106__paragraph-three","align-left":"richeditor2160083106__align-left","align-right":"richeditor2160083106__align-right","align-center":"richeditor2160083106__align-center","align-justify":"richeditor2160083106__align-justify","withMargin":"richeditor2160083106__withMargin","dir-rtl":"richeditor2160083106__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};