@wix/patterns-fields 1.16.0 → 1.18.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay3318500814";
+var _namespace_ = "overlay564791231";
 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":"overlay3318500814__root","iconOverlay":"overlay3318500814__iconOverlay"};
+export var classes = {"root":"overlay564791231__root","iconOverlay":"overlay564791231__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay3318500814-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay564791231-wsr-color-D80"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1007124962";
+var _namespace_ = "medialoader4170719626";
 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":"medialoader1007124962__root","loader":"medialoader1007124962__loader"};
+export var classes = {"root":"medialoader4170719626__root","loader":"medialoader4170719626__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_ = "mediatag4091760426";
+var _namespace_ = "mediatag3281460592";
 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":"mediatag4091760426__root"};
+export var classes = {"root":"mediatag3281460592__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -83,7 +83,7 @@ export const FormMultiDocumentField: React.FC<
           loading={loading}
           error={invalid}
           loaderBorderStyle="dashed"
-          onAddButtonClick={callMedia as () => Promise<void>}
+          onAddButtonClick={callMedia as () => Promise<boolean>}
           onPasteURLButtonClick={onOpen({
             title: t('CMS.document.pasteUrl.title'),
           })}

package/src/components/multi-document/multi-document-input/form-multi-document-view.tsx

@@ -14,7 +14,7 @@ interface FormMultiDocumentViewProps {
   data: string[];
   readOnly?: boolean;
   onChange: (value: string[]) => void;
-  callMedia: (index?: number) => Promise<void>;
+  callMedia: (index?: number) => Promise<boolean>;
   onDownload: (mediaURI?: string) => void;
   loading: boolean;
   dataHook?: string;
@@ -83,7 +83,7 @@ export const FormMultiDocumentView = React.forwardRef<
             dataHook="multi-document-field-add-document-button"
             theme="plain"
             disabled={readOnly}
-            onClick={callMedia as () => Promise<void>}
+            onClick={callMedia as () => Promise<boolean>}
             className={classes.addDocumentButton}
             loading={replacedDocumentIndex === null ? loading : false}
           />

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_ = "formmultidocument3691728957";
+var _namespace_ = "formmultidocument970791185";
 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":"formmultidocument3691728957__root","viewRoot":"formmultidocument3691728957__viewRoot","singleViewWrapper":"formmultidocument3691728957__singleViewWrapper","addDocumentButton":"formmultidocument3691728957__addDocumentButton"};
+export var classes = {"root":"formmultidocument970791185__root","viewRoot":"formmultidocument970791185__viewRoot","singleViewWrapper":"formmultidocument970791185__singleViewWrapper","addDocumentButton":"formmultidocument970791185__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -41,9 +41,8 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Deliberately run only on mount — typed key is a one-shot initializer
 
-  const [localValue, setLocalValue, injectedValue] = useRichContentState(
-    initialContent,
-  );
+  const [localValue, setLocalValue, injectedValue] =
+    useRichContentState(initialContent);
 
   const handleChange = useCallback(
     (content: RichContent) => setLocalValue(content),

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

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  ensureRicosContent,
-  toPlainTextSync,
-} from '@wix/ricos/content';
+import { ensureRicosContent, toPlainTextSync } from '@wix/ricos/content';
 
 import { TextView } from '../text';
 

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

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

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_ = "richcontentdefaultvalueinput1826715227";
+var _namespace_ = "richcontentdefaultvalueinput2964969043";
 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":"richcontentdefaultvalueinput1826715227__root","richContentEditorContainer":"richcontentdefaultvalueinput1826715227__richContentEditorContainer","editor":"richcontentdefaultvalueinput1826715227__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2964969043__root","richContentEditorContainer":"richcontentdefaultvalueinput2964969043__richContentEditorContainer","editor":"richcontentdefaultvalueinput2964969043__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1826715227-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1826715227-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput2964969043-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput2964969043-bottomToolbarHeight"}; 
 
 
 

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

@@ -11,7 +11,7 @@ export type FormRichContentInputProps = RichContentFormInputProps & {
   isSiteMetadataLoading: boolean;
 };
 
-const FormRichContentInput: FC<FormRichContentInputProps> = ({
+export const FormRichContentInput: FC<FormRichContentInputProps> = ({
   isSiteMetadataLoading,
   ...props
 }) => {

package/src/components/rich-content/rich-content-input/form-input/index.ts

@@ -1 +1 @@
-export {default} from './form-input';
+export { FormRichContentInput } from './form-input';

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_ = "richcontentforminput3224754095";
+var _namespace_ = "richcontentforminput1732387906";
 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":"richcontentforminput3224754095__root","editor":"richcontentforminput3224754095__editor"};
+export var classes = {"root":"richcontentforminput1732387906__root","editor":"richcontentforminput1732387906__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput3224754095-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput3224754095-bottomToolbarHeight"}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput1732387906-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1732387906-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentformreadonlyinput2048746278";
+var _namespace_ = "richcontentformreadonlyinput2090554515";
 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":"richcontentformreadonlyinput2048746278__root"};
+export var classes = {"root":"richcontentformreadonlyinput2090554515__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_ = "fullscreenmodal2408920647";
+var _namespace_ = "fullscreenmodal4100765582";
 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":"fullscreenmodal2408920647__root","modalContent":"fullscreenmodal2408920647__modalContent"};
+export var classes = {"root":"fullscreenmodal4100765582__root","modalContent":"fullscreenmodal4100765582__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "publishloader3339418162";
+var _namespace_ = "publishloader2391227011";
 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":"publishloader3339418162__root","publishLoader":"publishloader3339418162__publishLoader"};
+export var classes = {"root":"publishloader2391227011__root","publishLoader":"publishloader2391227011__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_ = "togglefullscreenbutton1802575663";
+var _namespace_ = "togglefullscreenbutton2566773121";
 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":"togglefullscreenbutton1802575663__root"};
+export var classes = {"root":"togglefullscreenbutton2566773121__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontenteditor1660608105";
+var _namespace_ = "richcontenteditor837972361";
 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":"richcontenteditor1660608105__root","toolbarContainer":"richcontenteditor1660608105__toolbarContainer","footerToolbarContainer":"richcontenteditor1660608105__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1660608105__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1660608105__editor","modalEditor":"richcontenteditor1660608105__modalEditor"};
+export var classes = {"root":"richcontenteditor837972361__root","toolbarContainer":"richcontenteditor837972361__toolbarContainer","footerToolbarContainer":"richcontenteditor837972361__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor837972361__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor837972361__editor","modalEditor":"richcontenteditor837972361__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor1660608105-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor837972361-wds-font-family-default"}; 
 
 
 

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_ = "richcontenttoolbar97752858";
+var _namespace_ = "richcontenttoolbar664632995";
 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":"richcontenttoolbar97752858__root","toolbar":"richcontenttoolbar97752858__toolbar","toolbarButton":"richcontenttoolbar97752858__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar664632995__root","toolbar":"richcontenttoolbar664632995__toolbar","toolbarButton":"richcontenttoolbar664632995__toolbarButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentviewer3125919669";
+var _namespace_ = "richcontentviewer1273185044";
 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":"richcontentviewer3125919669__root","viewer":"richcontentviewer3125919669__viewer","modalViewer":"richcontentviewer3125919669__modalViewer"};
+export var classes = {"root":"richcontentviewer1273185044__root","viewer":"richcontentviewer1273185044__viewer","modalViewer":"richcontentviewer1273185044__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/cell-rich-text-editor.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { EditorState } from 'draft-js';
+import { Modal } from '@wix/design-system';
+
+import { HTMLToText } from '../../auto-field-types';
+import { compositeDecorator } from './rich-text-input/rich-text-editor/composite-decorator';
+import {
+  htmlToEditorState,
+  editorStateToHTML,
+} from './rich-text-input/rich-text-editor/utils';
+import type {
+  CustomStyleMap,
+  InlineStyles,
+} from './rich-text-input/rich-text-editor/utils';
+import { RichEditor } from './rich-text-input/rich-text-editor/rich-editor';
+import { combineClasses } from './rich-text-input/rich-text-editor/utils/stylable-helper';
+import {
+  style,
+  classes,
+} from './rich-text-input/rich-text-editor/rich-text-editor.st.css.js';
+import type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
+
+const EDITING_OPTIONS = { headingsEnabled: true };
+
+/** Default text style — matches the CSS fallback values in rich-editor.st.css.
+ *  Consumers (e.g. cms-web) can override with site-specific font values. */
+export const DEFAULT_CELL_TEXT_STYLE: RichTextStyleVariables = {
+  '--rt-h1-fontSize': '72px',
+  '--rt-h1-fontStyle': 'normal',
+  '--rt-h1-fontWeight': '700',
+  '--rt-h1-lineHeight': '1.33',
+  '--rt-h2-fontSize': '42px',
+  '--rt-h2-fontStyle': 'normal',
+  '--rt-h2-fontWeight': '700',
+  '--rt-h2-lineHeight': '1.2',
+  '--rt-h3-fontSize': '38px',
+  '--rt-h3-fontStyle': 'normal',
+  '--rt-h3-fontWeight': '500',
+  '--rt-h3-lineHeight': '1.2',
+  '--rt-h4-fontSize': '34px',
+  '--rt-h4-fontStyle': 'normal',
+  '--rt-h4-fontWeight': '700',
+  '--rt-h4-lineHeight': '1.2',
+  '--rt-h5-fontSize': '28px',
+  '--rt-h5-fontStyle': 'normal',
+  '--rt-h5-fontWeight': '700',
+  '--rt-h5-lineHeight': '1.2',
+  '--rt-h6-fontSize': '22px',
+  '--rt-h6-fontStyle': 'normal',
+  '--rt-h6-fontWeight': '500',
+  '--rt-h6-lineHeight': '1.2',
+  '--rt-p1-fontSize': '18px',
+  '--rt-p1-fontStyle': 'normal',
+  '--rt-p1-fontWeight': '500',
+  '--rt-p1-lineHeight': '24px',
+  '--rt-unstyled-fontSize': '16px',
+  '--rt-unstyled-fontStyle': 'normal',
+  '--rt-unstyled-fontWeight': '500',
+  '--rt-unstyled-lineHeight': '24px',
+  '--rt-p3-fontSize': '14px',
+  '--rt-p3-fontStyle': 'normal',
+  '--rt-p3-fontWeight': '500',
+  '--rt-p3-lineHeight': '18px',
+};
+
+function buildInitialHtml(
+  value?: string,
+  typedKey?: string,
+): string | undefined {
+  if (!typedKey) return value;
+  const existing = value ? HTMLToText(value) : '';
+  return `<p>${existing}${typedKey}</p>`;
+}
+
+export interface CellRichTextEditorProps {
+  value?: string;
+  onChange: (value: string) => void;
+  autoFocus?: boolean;
+  initialTypedKey?: string;
+  /** Controlled fullscreen state — managed by the parent (CellRichTextInput). */
+  isFullScreen?: boolean;
+  onToggleFullScreen?: () => void;
+  /** CSS custom properties for the --rt-* theming API. Defaults to standard sizes. */
+  textStyle?: RichTextStyleVariables;
+}
+
+/** Cell-layer Draft.js editor — fires onChange on every keystroke (not on blur).
+ *  Fullscreen state is controlled by the parent so ESC handling can be
+ *  centralised in a capture-phase listener without React portal limitations. */
+export const CellRichTextEditor: React.FC<CellRichTextEditorProps> = ({
+  value,
+  onChange,
+  autoFocus,
+  initialTypedKey,
+  isFullScreen = false,
+  onToggleFullScreen,
+  textStyle = DEFAULT_CELL_TEXT_STYLE,
+}) => {
+  const initialHtml = useMemo(
+    () => buildInitialHtml(value, initialTypedKey),
+    // Deliberately computed only on mount — typed key is a one-shot initializer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const {
+    editorState: initialEditorState,
+    customStyleMap,
+    inlineStyles,
+  } = useMemo(
+    () => htmlToEditorState(initialHtml, compositeDecorator, EDITING_OPTIONS),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const [editorState, setEditorState] =
+    useState<EditorState>(initialEditorState);
+  const inlineStylesRef = useRef<InlineStyles>(inlineStyles);
+  const customStyleMapRef = useRef<CustomStyleMap>(customStyleMap);
+
+  const handleChange = useCallback(
+    (newState: EditorState) => {
+      setEditorState(newState);
+      const html = editorStateToHTML(
+        newState,
+        inlineStylesRef.current,
+        EDITING_OPTIONS,
+      );
+      onChange(html);
+    },
+    [onChange],
+  );
+
+  return (
+    <>
+      {!isFullScreen && (
+        <div style={textStyle as React.CSSProperties}>
+          <RichEditor
+            editorState={editorState}
+            customStyleMap={customStyleMapRef.current}
+            onChange={handleChange}
+            onToggleFullScreen={onToggleFullScreen}
+            isFullScreen={false}
+            autoFocus={autoFocus}
+            headingsEnabled
+          />
+        </div>
+      )}
+      {isFullScreen && (
+        <Modal screen="desktop" isOpen>
+          <div
+            className={combineClasses(style, classes.editor, {
+              isFullScreen: true,
+            })}
+            style={textStyle as React.CSSProperties}
+          >
+            <RichEditor
+              editorState={editorState}
+              customStyleMap={customStyleMapRef.current}
+              onChange={handleChange}
+              onToggleFullScreen={onToggleFullScreen}
+              isFullScreen
+              autoFocus
+              headingsEnabled
+            />
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+CellRichTextEditor.displayName = 'CellRichTextEditor';

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

@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Popover } from '@wix/design-system';
+
+import {
+  CellRichTextEditor,
+  DEFAULT_CELL_TEXT_STYLE,
+} from './cell-rich-text-editor';
+import type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
+
+/** Fixed popover width matching the CMS rich text editor (popover-rich-text-editor.tsx). */
+const POPOVER_WIDTH = 582;
+
+export interface CellRichTextInputProps {
+  value?: string;
+  onChange: (value: string) => void;
+  /** Typed key from type-to-edit — appended to existing plain-text content on mount. */
+  initialTypedKey?: string;
+  /** Called when the editor loses focus (click outside) or ESC is pressed. */
+  onCommit?: () => void;
+  /** CSS custom properties for the --rt-* theming API. Defaults to standard sizes. */
+  textStyle?: RichTextStyleVariables;
+}
+
+/** Popover-based rich text editor for the richText cell type.
+ *  Opens immediately as a popover anchored at the cell's top-left corner.
+ *  Fixed 582px width (matching CMS), covers adjacent cells, flips upward when
+ *  there is not enough room below. Changes are propagated live via onChange.
+ *
+ *  Close behaviour mirrors cms-web PopoverRichTextEditor: the editor listens for
+ *  focus/blur events on a wrapper div.  onBlur schedules onCommit via
+ *  requestAnimationFrame so toolbar actions (including dropdown selections in
+ *  window portals) can cancel the deferred close by refocusing the editor. */
+export const CellRichTextInput: React.FC<CellRichTextInputProps> = ({
+  value,
+  onChange,
+  initialTypedKey,
+  onCommit,
+  textStyle = DEFAULT_CELL_TEXT_STYLE,
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const isFullScreenRef = useRef(false);
+  const blurFrameIdRef = useRef(0);
+
+  const handleToggleFullScreen = useCallback(() => {
+    setIsFullScreen((prev) => {
+      const next = !prev;
+      isFullScreenRef.current = next;
+      return next;
+    });
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    cancelAnimationFrame(blurFrameIdRef.current);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    cancelAnimationFrame(blurFrameIdRef.current);
+    blurFrameIdRef.current = requestAnimationFrame(() => {
+      if (!isFullScreenRef.current) {
+        onCommit?.();
+      }
+    });
+  }, [onCommit]);
+
+  // Capture-phase native listener fires before ALL React bubble-phase handlers
+  // (including useKeyboardNavigation which would call cancelEdit() on ESC).
+  // stopPropagation() prevents the event from reaching any bubble-phase handler.
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      if (isFullScreenRef.current) {
+        setIsFullScreen(false);
+        isFullScreenRef.current = false;
+      } else {
+        cancelAnimationFrame(blurFrameIdRef.current);
+        onCommit?.();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [onCommit]);
+
+  return (
+    // Zero-height anchor at the cell's top-left so the popover opens from there.
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: 0,
+        overflow: 'visible',
+        fontSize: 0,
+        lineHeight: 0,
+      }}
+    >
+      <Popover
+        shown
+        placement="bottom-start"
+        appendTo="window"
+        width={POPOVER_WIDTH}
+        zIndex={5001}
+      >
+        <Popover.Element>
+          <div style={{ width: '100%', height: 0 }} />
+        </Popover.Element>
+        <Popover.Content>
+          <div onFocus={handleFocus} onBlur={handleBlur}>
+            <CellRichTextEditor
+              value={value}
+              onChange={onChange}
+              autoFocus
+              initialTypedKey={initialTypedKey}
+              isFullScreen={isFullScreen}
+              onToggleFullScreen={handleToggleFullScreen}
+              textStyle={textStyle}
+            />
+          </div>
+        </Popover.Content>
+      </Popover>
+    </div>
+  );
+};
+
+CellRichTextInput.displayName = 'CellRichTextInput';