@wix/patterns-fields 1.66.0 → 1.67.0

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell3100626680";
+var _namespace_ = "cellmediaeditshell1622194208";
 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":"cellmediaeditshell3100626680__root"};
+export var classes = {"root":"cellmediaeditshell1622194208__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2664669787";
+var _namespace_ = "pasteurlbutton1961113582";
 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":"pasteurlbutton2664669787__root","iconButtonTooltip":"pasteurlbutton2664669787__iconButtonTooltip","iconButton":"pasteurlbutton2664669787__iconButton"};
+export var classes = {"root":"pasteurlbutton1961113582__root","iconButtonTooltip":"pasteurlbutton1961113582__iconButtonTooltip","iconButton":"pasteurlbutton1961113582__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield622057319";
+var _namespace_ = "formmediagalleryfield3220355152";
 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":"formmediagalleryfield622057319__root","container":"formmediagalleryfield622057319__container","viewBox":"formmediagalleryfield622057319__viewBox","addItemWrapper":"formmediagalleryfield622057319__addItemWrapper","addItem":"formmediagalleryfield622057319__addItem","overlay":"formmediagalleryfield622057319__overlay","image":"formmediagalleryfield622057319__image","previewImage":"formmediagalleryfield622057319__previewImage","previewVideo":"formmediagalleryfield622057319__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3220355152__root","container":"formmediagalleryfield3220355152__container","viewBox":"formmediagalleryfield3220355152__viewBox","addItemWrapper":"formmediagalleryfield3220355152__addItemWrapper","addItem":"formmediagalleryfield3220355152__addItem","overlay":"formmediagalleryfield3220355152__overlay","image":"formmediagalleryfield3220355152__image","previewImage":"formmediagalleryfield3220355152__previewImage","previewVideo":"formmediagalleryfield3220355152__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage323379179";
+var _namespace_ = "mediaimage935656045";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage323379179__root"};
+export var classes = {"root":"mediaimage935656045__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage323379179-from","to":"--mediaimage323379179-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage935656045-from","to":"--mediaimage935656045-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay2137816035";
+var _namespace_ = "overlay4040300395";
 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":"overlay2137816035__root","iconOverlay":"overlay2137816035__iconOverlay"};
+export var classes = {"root":"overlay4040300395__root","iconOverlay":"overlay4040300395__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1252333309";
+var _namespace_ = "medialoader610244478";
 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":"medialoader1252333309__root","loader":"medialoader1252333309__loader"};
+export var classes = {"root":"medialoader610244478__root","loader":"medialoader610244478__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag917270223";
+var _namespace_ = "mediatag148686631";
 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":"mediatag917270223__root"};
+export var classes = {"root":"mediatag148686631__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1896878393";
+var _namespace_ = "cellmultidocumentedit492449782";
 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":"cellmultidocumentedit1896878393__root","chipTrigger":"cellmultidocumentedit1896878393__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit492449782__root","chipTrigger":"cellmultidocumentedit492449782__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument4263958338";
+var _namespace_ = "formmultidocument898197968";
 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":"formmultidocument4263958338__root","viewRoot":"formmultidocument4263958338__viewRoot","singleViewWrapper":"formmultidocument4263958338__singleViewWrapper","addDocumentButton":"formmultidocument4263958338__addDocumentButton"};
+export var classes = {"root":"formmultidocument898197968__root","viewRoot":"formmultidocument898197968__viewRoot","singleViewWrapper":"formmultidocument898197968__singleViewWrapper","addDocumentButton":"formmultidocument898197968__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceinput2646909186";
+var _namespace_ = "cellmultireferenceinput1361409799";
 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":"cellmultireferenceinput2646909186__root"};
+export var classes = {"root":"cellmultireferenceinput1361409799__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1475045378";
+var _namespace_ = "cellreferenceinput3956087750";
 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":"cellreferenceinput1475045378__root","autocomplete":"cellreferenceinput1475045378__autocomplete"};
+export var classes = {"root":"cellreferenceinput3956087750__root","autocomplete":"cellreferenceinput3956087750__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/cdn/load-ricos.ts

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import type { RicosCdnModule } from './types';
+
+/**
+ * Pinned exactly, not to a range. The npm `@wix/ricos` used for the synchronous
+ * content helpers and this artifact must not drift — two different ricos
+ * versions in one page means two schema versions, and content written by one may
+ * not validate in the other.
+ *
+ * This number is Falcon's build counter for wix-private/patterns-deps, not the
+ * npm version of the same package. Falcon bumps it on every master build,
+ * including builds that publish nothing, so the two drift apart and occasionally
+ * coincide again — as they happen to right now. A wrong-but-existing version
+ * returns 200 and silently loads a different ricos, so confirm the artifact
+ * rather than the number:
+ *
+ *   curl -s <url> | grep -c <ricos version>   # ricos-schema/next-schema/version.js
+ */
+const RICOS_STATICS_VERSION = '1.7.0';
+const RICOS_STATICS_URL =
+  `https://static.parastorage.com/services/patterns-fields-ricos-statics/${RICOS_STATICS_VERSION}/ricos.umd.min.js` as const;
+
+/** UMD global declared by the statics bundle (`library: 'PatternsRicos'`). */
+const GLOBAL_NAME = 'PatternsRicos';
+
+type LoaderWindow = Window & {
+  PatternsRicos?: RicosCdnModule;
+  // The bundle's UMD externals. Business Manager may already provide these;
+  // we fill them in from the host app's own copies when it does not.
+  react?: typeof React;
+  reactDOM?: typeof ReactDOM;
+  requirejs?: (
+    deps: string[],
+    // Undefined when the requested id resolves to nothing — which is what asking
+    // for this bundle by URL does, since its `define` is named.
+    onOk: (mod: RicosCdnModule | undefined) => void,
+    onErr: (error: Error) => void,
+  ) => void;
+};
+
+/**
+ * The bundle externalises react/react-dom. Its UMD wrapper resolves them as AMD
+ * dependencies when requirejs is present, and off these globals when it is not —
+ * without them it throws `undefined (reading 'createContext')` while evaluating
+ * and never defines `PatternsRicos`. Pointing them at the host app's own copies
+ * is also what keeps one React on the page; a second would make every hook
+ * inside the editor throw.
+ */
+const provideReactGlobals = (win: LoaderWindow) => {
+  win.react = win.react ?? React;
+  win.reactDOM = win.reactDOM ?? ReactDOM;
+};
+
+const appendScript = (url: string) =>
+  new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    script.crossOrigin = 'anonymous';
+    script.onerror = () => reject(new Error(`Failed to load ${url}`));
+    script.onload = () => resolve();
+    document.head.appendChild(script);
+  });
+
+/**
+ * jsdom cannot fetch the CDN, so under test we require the package the artifact
+ * is built from — same export list, so the surface matches by construction.
+ *
+ * This `require` is dead-code-eliminated in production builds, which is the whole
+ * point: the editor and viewer must never enter a consumer's graph. Verify with
+ * `grep -r 'ricos' <consumer>/dist` after touching this.
+ */
+const loadForTests = (): RicosCdnModule | undefined => {
+  // The `require`s must sit inside the consequent of a statically-false
+  // condition. An early `return` for the non-test case leaves them as
+  // unreachable code *after* the `if`, which webpack does not prune — that
+  // silently puts the whole editor back in every consumer's graph.
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('@wix/patterns-fields-utils/@wix/patterns-fields-ricos-statics') as RicosCdnModule;
+  }
+  return undefined;
+};
+
+const load = async (): Promise<RicosCdnModule> => {
+  const forTests = loadForTests();
+  if (forTests) {
+    return forTests;
+  }
+
+  const win = window as unknown as LoaderWindow;
+
+  // The bundle is UMD with a named `define`, so under Business Manager's
+  // requirejs it takes the AMD branch: it registers under GLOBAL_NAME and never
+  // assigns the global. Asking for it by URL loads the file but resolves with
+  // `undefined`, because nothing is defined under the URL's id — so fetch it,
+  // then ask again by the name it registered itself as.
+  if (win.requirejs) {
+    return new Promise<RicosCdnModule>((resolve, reject) => {
+      const fail = (error: unknown) =>
+        reject(
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to load ${RICOS_STATICS_URL}: ${String(error)}`,
+              ),
+        );
+
+      win.requirejs!(
+        [RICOS_STATICS_URL],
+        () =>
+          win.requirejs!(
+            [GLOBAL_NAME],
+            (mod) =>
+              mod
+                ? resolve(mod)
+                : fail(
+                    new Error(
+                      `${RICOS_STATICS_URL} loaded but defined no "${GLOBAL_NAME}" module`,
+                    ),
+                  ),
+            fail,
+          ),
+        fail,
+      );
+    });
+  }
+
+  provideReactGlobals(win);
+  await appendScript(RICOS_STATICS_URL);
+
+  const mod = win[GLOBAL_NAME];
+  if (!mod) {
+    throw new Error(
+      `${RICOS_STATICS_URL} loaded but did not define window.${GLOBAL_NAME}`,
+    );
+  }
+  return mod;
+};
+
+let pending: Promise<RicosCdnModule> | undefined;
+
+/** Loads the bundle once per page; every caller shares the same promise. */
+export const loadRicosFromCdn = (): Promise<RicosCdnModule> => {
+  pending = pending ?? load();
+  return pending;
+};
+
+/**
+ * Returns the module once loaded, `undefined` while in flight. A caller must
+ * render something in the meantime — `RCELoader` in the editor, `RCVLoader` in
+ * the viewer. Returning `null` instead leaves a blank area for the duration of
+ * the fetch.
+ */
+export const useRicosFromCdn = (): RicosCdnModule | undefined => {
+  // Resolved on the first render under test, so specs see a mounted editor
+  // rather than the pre-load `null`.
+  const [mod, setMod] = useState<RicosCdnModule | undefined>(loadForTests);
+
+  useEffect(() => {
+    if (mod) {
+      return;
+    }
+    let cancelled = false;
+    loadRicosFromCdn().then(
+      (loaded) => {
+        if (!cancelled) {
+          setMod(loaded);
+        }
+      },
+      (error) => {
+        // Nothing to fall back to — surface it rather than hanging on a spinner.
+        console.error('[rich-content] failed to load ricos from CDN', error);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [mod]);
+
+  return mod;
+};

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_ = "richcontentdefaultvalueinput1084397029";
 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":"richcontentdefaultvalueinput1084397029__root","richContentEditorContainer":"richcontentdefaultvalueinput1084397029__richContentEditorContainer","editor":"richcontentdefaultvalueinput1084397029__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_ = "richcontentforminput2685167095";
 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":"richcontentforminput2685167095__root","editor":"richcontentforminput2685167095__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_ = "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":"richcontentformreadonlyinput1245446135__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_ = "fullscreenmodal4273271827";
+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":"fullscreenmodal4273271827__root","modalContent":"fullscreenmodal4273271827__modalContent"};
+export var classes = {"root":"fullscreenmodal4250761155__root","modalContent":"fullscreenmodal4250761155__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};