@wix/patterns-fields 1.66.0 → 1.68.0

package/src/components/rich-content/cdn/types.ts

@@ -0,0 +1,21 @@
+import type { pluginLinkViewer } from '@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics';
+
+/**
+ * Shape of the CDN artifact's UMD global.
+ *
+ * `patterns-fields-ricos-statics` is the source the artifact is built from, so its
+ * export list is the global's surface by construction. Taking the types from
+ * there rather than from `@wix/ricos` keeps ricos out of this package's
+ * dependencies; it is vendored under `fields-utils` like the other bundled
+ * packages. `typeof import(...)` is erased, so nothing reaches a consumer's graph
+ * — a value import from it would pull in the whole editor.
+ */
+export type RicosCdnModule = typeof import('@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics');
+
+/**
+ * The statics package does not name `ViewerPlugin`, so letting TypeScript infer a
+ * plugin array puts a `@wix/ricos/dist/src/...` path in the emitted `.d.ts` — a
+ * path ricos's `exports` map forbids. Deriving it from a plugin factory gives a
+ * nameable public type.
+ */
+export type ViewerPlugin = ReturnType<typeof pluginLinkViewer>;

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import type { RicosDocument } from '@wix/ricos';
-import { fromPlainText, toPlainTextSync } from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import { fromPlainText, toPlainTextSync } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 import { RichContentEditor } from './rich-content-input/rich-content-editor';
 import { useRichContentState } from './rich-content-input/rich-content-common';

package/src/components/rich-content/cell-rich-content-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { toPlainTextSync } from '@wix/ricos/content';
+import { toPlainTextSync } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 import { TextView } from '../text';
 import { hardConvert } from '../../validations/rich-content';

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

@@ -1,4 +1,4 @@
-// Heavy exports - these pull in @wix/ricos editor/viewer (~300kb+ gzipped)
+// Heavy exports - these pull in the bundled ricos editor/viewer (~300kb+ gzipped)
 // Only import this file when you actually need the rich content editor
 export { FormRichContentInput } from './rich-content-input/form-input';
 export * from './hooks';

package/src/components/rich-content/form-rich-content.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import type { RichContent as RichContentType, RicosTheme } from '@wix/ricos';
-import { fromPlainText } from '@wix/ricos';
+import type { RichContent as RichContentType, RicosTheme } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import { fromPlainText } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 import type Experiments from '@wix/wix-experiments';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';

package/src/components/rich-content/hooks/use-plain-text-rich-content.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import type { RicosDocument } from '@wix/ricos/content';
-import { toPlainText } from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
+import { loadRicosFromCdn } from '../cdn/load-ricos';
 import { safeStringify } from '../../../utils';
 import { useMountedState } from './use-mounted-state';
 
@@ -13,7 +13,8 @@ export const usePlainTextRichContent = (content?: RicosDocument) => {
   useEffect(() => {
     if (content) {
       setIsConverting(true);
-      toPlainText(content, { delimiter: ' ' })
+      loadRicosFromCdn()
+        .then(({ toPlainText }) => toPlainText(content, { delimiter: ' ' }))
         .catch(() => safeStringify(content))
         .then(setPlainTextContent)
         .finally(() => setIsConverting(false));

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput2838712758";
+var _namespace_ = "richcontentdefaultvalueinput4120834938";
 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":"richcontentdefaultvalueinput2838712758__root","richContentEditorContainer":"richcontentdefaultvalueinput2838712758__richContentEditorContainer","editor":"richcontentdefaultvalueinput2838712758__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4120834938__root","richContentEditorContainer":"richcontentdefaultvalueinput4120834938__richContentEditorContainer","editor":"richcontentdefaultvalueinput4120834938__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React 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';
 import { RichContentEditor } from '../rich-content-editor';

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

@@ -1,6 +1,6 @@
 import React 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';
 import { RichContentViewer } from '../rich-content-viewer';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput1417751749";
+var _namespace_ = "richcontentforminput393196314";
 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":"richcontentforminput1417751749__root","editor":"richcontentforminput1417751749__editor"};
+export var classes = {"root":"richcontentforminput393196314__root","editor":"richcontentforminput393196314__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 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/form-input/use-rich-content-form-input.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-import type { RichContent } from '@wix/ricos';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
 import { useRichContentState } from '../rich-content-common';
 

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_ = "richcontentformreadonlyinput1245446135";
+var _namespace_ = "richcontentformreadonlyinput636004872";
 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":"richcontentformreadonlyinput1245446135__root"};
+export var classes = {"root":"richcontentformreadonlyinput636004872__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_ = "fullscreenmodal4273271827";
+var _namespace_ = "fullscreenmodal4177253419";
 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":"fullscreenmodal4273271827__root","modalContent":"fullscreenmodal4273271827__modalContent"};
+export var classes = {"root":"fullscreenmodal4177253419__root","modalContent":"fullscreenmodal4177253419__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_ = "publishloader4160359936";
+var _namespace_ = "publishloader2154525844";
 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":"publishloader4160359936__root","publishLoader":"publishloader4160359936__publishLoader"};
+export var classes = {"root":"publishloader2154525844__root","publishLoader":"publishloader2154525844__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_ = "togglefullscreenbutton230730659";
+var _namespace_ = "togglefullscreenbutton3469017194";
 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":"togglefullscreenbutton230730659__root"};
+export var classes = {"root":"togglefullscreenbutton3469017194__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_ = "richcontenteditor2122471442";
+var _namespace_ = "richcontenteditor153524713";
 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":"richcontenteditor2122471442__root","toolbarContainer":"richcontenteditor2122471442__toolbarContainer","footerToolbarContainer":"richcontenteditor2122471442__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2122471442__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2122471442__editor","modalEditor":"richcontenteditor2122471442__modalEditor"};
+export var classes = {"root":"richcontenteditor153524713__root","toolbarContainer":"richcontenteditor153524713__toolbarContainer","footerToolbarContainer":"richcontenteditor153524713__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor153524713__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor153524713__editor","modalEditor":"richcontenteditor153524713__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_ = "richcontenttoolbar3048503288";
+var _namespace_ = "richcontenttoolbar430576850";
 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":"richcontenttoolbar3048503288__root","toolbar":"richcontenttoolbar3048503288__toolbar","toolbarButton":"richcontenttoolbar3048503288__toolbarButton","separator":"richcontenttoolbar3048503288__separator"};
+export var classes = {"root":"richcontenttoolbar430576850__root","toolbar":"richcontenttoolbar430576850__toolbar","toolbarButton":"richcontenttoolbar430576850__toolbarButton","separator":"richcontenttoolbar430576850__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';