@wix/patterns-fields 1.40.0 → 1.41.0

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_ = "formmultidocument1520711159";
+var _namespace_ = "formmultidocument239392594";
 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":"formmultidocument1520711159__root","viewRoot":"formmultidocument1520711159__viewRoot","singleViewWrapper":"formmultidocument1520711159__singleViewWrapper","addDocumentButton":"formmultidocument1520711159__addDocumentButton"};
+export var classes = {"root":"formmultidocument239392594__root","viewRoot":"formmultidocument239392594__viewRoot","singleViewWrapper":"formmultidocument239392594__singleViewWrapper","addDocumentButton":"formmultidocument239392594__addDocumentButton"};
 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_ = "cellreferenceinput2943287064";
+var _namespace_ = "cellreferenceinput3112868832";
 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":"cellreferenceinput2943287064__root","autocomplete":"cellreferenceinput2943287064__autocomplete"};
+export var classes = {"root":"cellreferenceinput3112868832__root","autocomplete":"cellreferenceinput3112868832__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,18 +1,15 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import type { RichContent } from '@wix/ricos';
-import {
-  ensureRicosContent,
-  fromPlainText,
-  toPlainTextSync,
-} from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/ricos';
+import { fromPlainText, toPlainTextSync } from '@wix/ricos/content';
 
 import { RichContentEditor } from './rich-content-input/rich-content-editor';
 import { useRichContentState } from './rich-content-input/rich-content-common';
+import { hardConvert } from '../../validations/rich-content';
 
 export interface CellRichContentInputProps {
   value?: unknown;
-  onChange: (value: RichContent | undefined) => void;
+  onChange: (value: RicosDocument | undefined) => void;
   onSave: () => void;
   /** Typed key from type-to-edit — appended to a plain-text extraction of the existing content (formatting is lost). */
   initialTypedKey?: string;
@@ -30,14 +27,14 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
 
   // Compute initial editor content once on mount.
   // If there's a typed key, append it to the existing plain-text form of the content.
-  const initialContent = useMemo((): RichContent | undefined => {
+  const initialContent = useMemo((): RicosDocument | undefined => {
     if (initialTypedKey) {
       const existingText = value
-        ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: '\n' })
+        ? toPlainTextSync(hardConvert(value), { delimiter: '\n' })
         : '';
-      return fromPlainText(existingText + initialTypedKey) as RichContent;
+      return fromPlainText(existingText + initialTypedKey);
     }
-    return value as RichContent | undefined;
+    return value === undefined ? undefined : hardConvert(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Deliberately run only on mount — typed key is a one-shot initializer
 
@@ -45,14 +42,14 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
     useRichContentState(initialContent);
 
   const handleChange = useCallback(
-    (content: RichContent) => setLocalValue(content),
+    (content: RicosDocument) => setLocalValue(content),
     [setLocalValue],
   );
 
   /** Commit the current content and exit edit mode.
    *  Guards against double-save (X button + Escape firing simultaneously). */
   const handleSave = useCallback(
-    (content?: RichContent) => {
+    (content?: RicosDocument) => {
       if (hasSavedRef.current) {
         return;
       }
@@ -64,7 +61,7 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
   );
 
   const handleExitFullScreen = useCallback(
-    (content?: RichContent) => {
+    (content?: RicosDocument) => {
       handleSave(content);
     },
     [handleSave],

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

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { ensureRicosContent, toPlainTextSync } from '@wix/ricos/content';
+import { toPlainTextSync } from '@wix/ricos/content';
 
 import { TextView } from '../text';
+import { hardConvert } from '../../validations/rich-content';
 
 export interface CellRichContentViewProps {
   value?: unknown;
@@ -13,9 +14,7 @@ export interface CellRichContentViewProps {
 export const CellRichContentView: React.FC<CellRichContentViewProps> = ({
   value,
 }) => {
-  const plainText = value
-    ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: ' ' })
-    : '';
+  const plainText = value ? toPlainTextSync(hardConvert(value), { delimiter: ' ' }) : '';
 
   return <TextView data={plainText} />;
 };

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

@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 
-import type { RichContent } from '@wix/ricos/content';
-import { ensureRicosContent, toPlainText } from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/ricos/content';
+import { toPlainText } from '@wix/ricos/content';
 
 import { safeStringify } from '../../../utils';
 import { useMountedState } from './use-mounted-state';
 
-export const usePlainTextRichContent = (content?: RichContent) => {
+export const usePlainTextRichContent = (content?: RicosDocument) => {
   const [plainTextContent, setPlainTextContent] = useMountedState('');
   const [isConverting, setIsConverting] = useMountedState(false);
 
   useEffect(() => {
     if (content) {
       setIsConverting(true);
-      toPlainText(ensureRicosContent(content), { delimiter: ' ' })
+      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_ = "richcontentdefaultvalueinput1516859509";
+var _namespace_ = "richcontentdefaultvalueinput998980344";
 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":"richcontentdefaultvalueinput1516859509__root","richContentEditorContainer":"richcontentdefaultvalueinput1516859509__richContentEditorContainer","editor":"richcontentdefaultvalueinput1516859509__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput998980344__root","richContentEditorContainer":"richcontentdefaultvalueinput998980344__richContentEditorContainer","editor":"richcontentdefaultvalueinput998980344__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentforminput1051770621";
+var _namespace_ = "richcontentforminput1753039762";
 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":"richcontentforminput1051770621__root","editor":"richcontentforminput1051770621__editor"};
+export var classes = {"root":"richcontentforminput1753039762__root","editor":"richcontentforminput1753039762__editor"};
 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.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput2154684961";
+var _namespace_ = "richcontentformreadonlyinput2205100705";
 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":"richcontentformreadonlyinput2154684961__root"};
+export var classes = {"root":"richcontentformreadonlyinput2205100705__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "fullscreenmodal858536236";
+var _namespace_ = "fullscreenmodal13930613";
 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":"fullscreenmodal858536236__root","modalContent":"fullscreenmodal858536236__modalContent"};
+export var classes = {"root":"fullscreenmodal13930613__root","modalContent":"fullscreenmodal13930613__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,18 +1,18 @@
 import isEqual from 'lodash/isEqual';
 import { useRef, useMemo, useState, useEffect } from 'react';
 
-import type { BISettings, RichContent } from '@wix/ricos';
-import { ensureRicosContent, fromPlainText } from '@wix/ricos';
+import type { BISettings, RicosDocument } from '@wix/ricos';
+import { ensureContentId, fromPlainText } from '@wix/ricos';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 import { CMS_RICOS_APP_ID } from '../consts';
 
 export const INITIAL_INJECTED_RICH_CONTENT = fromPlainText('');
 
-const ensureRichContent = (content?: RichContent) =>
-  content && ensureRicosContent(content);
+const ensureRichContent = (content?: RicosDocument) =>
+  content && ensureContentId(content);
 
-export const useRichContentState = (propsContent?: RichContent) => {
+export const useRichContentState = (propsContent?: RicosDocument) => {
   const [content, setContent] = useState(ensureRichContent(propsContent));
   const [injectedContent, setInjectedContent] = useState(
     INITIAL_INJECTED_RICH_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_ = "publishloader3184907926";
+var _namespace_ = "publishloader3858599799";
 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":"publishloader3184907926__root","publishLoader":"publishloader3184907926__publishLoader"};
+export var classes = {"root":"publishloader3858599799__root","publishLoader":"publishloader3858599799__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_ = "togglefullscreenbutton3244257476";
+var _namespace_ = "togglefullscreenbutton4026172310";
 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":"togglefullscreenbutton3244257476__root"};
+export var classes = {"root":"togglefullscreenbutton4026172310__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -30,8 +30,6 @@ import {
 
 import { isTruthy } from '../../../../utils';
 import type { ColorScheme } from '../../types';
-
-import { colorsCache } from '../rich-content-common';
 import { CMS_RICOS_APP_ID } from '../consts';
 
 const { Instagram, Twitter, TikTok } = LinkPreviewProviders;
@@ -50,14 +48,10 @@ export const usePlugins = (colorScheme?: ColorScheme) => {
         pluginHeadings({ inlinePopups: true }),
         pluginTextColor({
           inlinePopups: true,
-          onColorAdded: colorsCache.add,
-          getUserColors: colorsCache.get,
           colorScheme,
         }),
         pluginTextHighlight({
           inlinePopups: true,
-          onColorAdded: colorsCache.add,
-          getUserColors: colorsCache.get,
           colorScheme,
         }),
         pluginLineSpacing({ inlinePopups: true }),

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_ = "richcontenteditor2251144620";
+var _namespace_ = "richcontenteditor524536335";
 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":"richcontenteditor2251144620__root","toolbarContainer":"richcontenteditor2251144620__toolbarContainer","footerToolbarContainer":"richcontenteditor2251144620__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2251144620__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2251144620__editor","modalEditor":"richcontenteditor2251144620__modalEditor"};
+export var classes = {"root":"richcontenteditor524536335__root","toolbarContainer":"richcontenteditor524536335__toolbarContainer","footerToolbarContainer":"richcontenteditor524536335__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor524536335__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor524536335__editor","modalEditor":"richcontenteditor524536335__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};