@wix/patterns-fields 1.15.0 → 1.17.0

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3569981910";
+var _namespace_ = "highlightedtext4160062194";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext3569981910__root","substring":"highlightedtext3569981910__substring"};
-export var keyframes = {"highlighted":"highlightedtext3569981910__highlighted","highlighted-match":"highlightedtext3569981910__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4160062194__root","substring":"highlightedtext4160062194__substring"};
+export var keyframes = {"highlighted":"highlightedtext4160062194__highlighted","highlighted-match":"highlightedtext4160062194__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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_ = "pasteurlbutton3952587235";
+var _namespace_ = "pasteurlbutton2793897208";
 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":"pasteurlbutton3952587235__root","iconButtonTooltip":"pasteurlbutton3952587235__iconButtonTooltip","iconButton":"pasteurlbutton3952587235__iconButton"};
+export var classes = {"root":"pasteurlbutton2793897208__root","iconButtonTooltip":"pasteurlbutton2793897208__iconButtonTooltip","iconButton":"pasteurlbutton2793897208__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_ = "formmediagalleryfield3106985161";
+var _namespace_ = "formmediagalleryfield1817893524";
 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":"formmediagalleryfield3106985161__root","container":"formmediagalleryfield3106985161__container","viewBox":"formmediagalleryfield3106985161__viewBox","addItemWrapper":"formmediagalleryfield3106985161__addItemWrapper","addItem":"formmediagalleryfield3106985161__addItem","overlay":"formmediagalleryfield3106985161__overlay","image":"formmediagalleryfield3106985161__image","previewImage":"formmediagalleryfield3106985161__previewImage","previewVideo":"formmediagalleryfield3106985161__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1817893524__root","container":"formmediagalleryfield1817893524__container","viewBox":"formmediagalleryfield1817893524__viewBox","addItemWrapper":"formmediagalleryfield1817893524__addItemWrapper","addItem":"formmediagalleryfield1817893524__addItem","overlay":"formmediagalleryfield1817893524__overlay","image":"formmediagalleryfield1817893524__image","previewImage":"formmediagalleryfield1817893524__previewImage","previewVideo":"formmediagalleryfield1817893524__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_ = "mediaimage1708830916";
+var _namespace_ = "mediaimage216154035";
 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":"mediaimage1708830916__root"};
+export var classes = {"root":"mediaimage216154035__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":"--mediaimage1708830916-from","to":"--mediaimage1708830916-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":"--mediaimage216154035-from","to":"--mediaimage216154035-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_ = "overlay636547370";
+var _namespace_ = "overlay1994304343";
 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":"overlay636547370__root","iconOverlay":"overlay636547370__iconOverlay"};
+export var classes = {"root":"overlay1994304343__root","iconOverlay":"overlay1994304343__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":"--overlay636547370-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay1994304343-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_ = "medialoader2708273655";
+var _namespace_ = "medialoader1774972642";
 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":"medialoader2708273655__root","loader":"medialoader2708273655__loader"};
+export var classes = {"root":"medialoader1774972642__root","loader":"medialoader1774972642__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_ = "mediatag2186192433";
+var _namespace_ = "mediatag1916996652";
 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":"mediatag2186192433__root"};
+export var classes = {"root":"mediatag1916996652__root"};
 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_ = "formmultidocument3882726463";
+var _namespace_ = "formmultidocument189454545";
 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":"formmultidocument3882726463__root","viewRoot":"formmultidocument3882726463__viewRoot","singleViewWrapper":"formmultidocument3882726463__singleViewWrapper","addDocumentButton":"formmultidocument3882726463__addDocumentButton"};
+export var classes = {"root":"formmultidocument189454545__root","viewRoot":"formmultidocument189454545__viewRoot","singleViewWrapper":"formmultidocument189454545__singleViewWrapper","addDocumentButton":"formmultidocument189454545__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,86 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+
+import type { RichContent } from '@wix/ricos';
+import {
+  ensureRicosContent,
+  fromPlainText,
+  toPlainTextSync,
+} from '@wix/ricos/content';
+
+import { RichContentEditor } from './rich-content-input/rich-content-editor';
+import { useRichContentState } from './rich-content-input/rich-content-common';
+
+export interface CellRichContentInputProps {
+  value?: unknown;
+  onChange: (value: RichContent | 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;
+}
+
+/** Full-screen Ricos editor for the richContent cell type.
+ *  Opens immediately in fullscreen mode. Saving (X button or Escape) calls onChange + onSave. */
+export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
+  value,
+  onChange,
+  onSave,
+  initialTypedKey,
+}) => {
+  const hasSavedRef = useRef(false);
+
+  // 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 => {
+    if (initialTypedKey) {
+      const existingText = value
+        ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: '\n' })
+        : '';
+      return fromPlainText(existingText + initialTypedKey) as RichContent;
+    }
+    return value as RichContent | undefined;
+    // 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 handleChange = useCallback(
+    (content: RichContent) => 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) => {
+      if (hasSavedRef.current) {
+        return;
+      }
+      hasSavedRef.current = true;
+      onChange(content);
+      onSave();
+    },
+    [onChange, onSave],
+  );
+
+  const handleExitFullScreen = useCallback(
+    (content?: RichContent) => {
+      handleSave(content);
+    },
+    [handleSave],
+  );
+
+  return (
+    <RichContentEditor
+      content={localValue}
+      injectedContent={injectedValue}
+      onChange={handleChange}
+      onExitFullScreen={handleExitFullScreen}
+      fullScreenOnly
+      autoFocus
+    />
+  );
+};
+
+CellRichContentInput.displayName = 'CellRichContentInput';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  ensureRicosContent,
+  toPlainTextSync,
+} from '@wix/ricos/content';
+
+import { TextView } from '../text';
+
+export interface CellRichContentViewProps {
+  value?: unknown;
+}
+
+/** Synchronous plain-text view for a Ricos document.
+ *  Uses toPlainTextSync — no loading spinner. */
+export const CellRichContentView: React.FC<CellRichContentViewProps> = ({
+  value,
+}) => {
+  const plainText = value
+    ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: ' ' })
+    : '';
+
+  return <TextView data={plainText} />;
+};
+
+CellRichContentView.displayName = 'CellRichContentView';

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

@@ -1,5 +1,6 @@
 // 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 * from './hooks';
 export * from './rich-content-input/rich-content-editor';

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

@@ -1,3 +1,4 @@
 export * from './rich-content-view';
-// NOTE: Heavy exports (FormRichContentInput, RichContentEditor, hooks) have been moved to './editor' to prevent bundle bloat.
+export * from './cell-rich-content-view';
+// NOTE: Heavy exports (FormRichContentInput, RichContentEditor, CellRichContentInput, hooks) have been moved to './editor' to prevent bundle bloat.
 // Import them explicitly: import { FormRichContentInput } from '../fields/components/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_ = "richcontentdefaultvalueinput1510549127";
+var _namespace_ = "richcontentdefaultvalueinput29875928";
 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":"richcontentdefaultvalueinput1510549127__root","richContentEditorContainer":"richcontentdefaultvalueinput1510549127__richContentEditorContainer","editor":"richcontentdefaultvalueinput1510549127__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput29875928__root","richContentEditorContainer":"richcontentdefaultvalueinput29875928__richContentEditorContainer","editor":"richcontentdefaultvalueinput29875928__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1510549127-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1510549127-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput29875928-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput29875928-bottomToolbarHeight"}; 
 
 
 

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_ = "richcontentforminput1730151291";
+var _namespace_ = "richcontentforminput753330684";
 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":"richcontentforminput1730151291__root","editor":"richcontentforminput1730151291__editor"};
+export var classes = {"root":"richcontentforminput753330684__root","editor":"richcontentforminput753330684__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":"--richcontentforminput1730151291-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1730151291-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":"--richcontentforminput753330684-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput753330684-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_ = "richcontentformreadonlyinput2376640241";
+var _namespace_ = "richcontentformreadonlyinput351246339";
 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":"richcontentformreadonlyinput2376640241__root"};
+export var classes = {"root":"richcontentformreadonlyinput351246339__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

@@ -1,12 +1,15 @@
 @property st-global(--wds-color-white);
+@property st-global(--wsr-color-D80);
 @property st-global(--wds-border-radius-300);
+@property st-global(--wsr-border-radius-06);
 
 .modalContent {
     display: flex;
+    flex-direction: column;
     position: relative;
     height: 100%;
     width: 782px;
-    background-color: var(--wds-color-white);
-    border-radius: var(--wds-border-radius-300);
+    background-color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
+    border-radius: var(--wds-border-radius-300, var(--wsr-border-radius-06, 6px));
     margin-top: 24px;
 }

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_ = "fullscreenmodal3241281499";
+var _namespace_ = "fullscreenmodal2578374957";
 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":"fullscreenmodal3241281499__root","modalContent":"fullscreenmodal3241281499__modalContent"};
+export var classes = {"root":"fullscreenmodal2578374957__root","modalContent":"fullscreenmodal2578374957__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-white":"--wds-color-white","wds-border-radius-300":"--wds-border-radius-300"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--wsr-color-D80","wds-border-radius-300":"--wds-border-radius-300","wsr-border-radius-06":"--wsr-border-radius-06"}; 
 
 
 

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_ = "publishloader3382526096";
+var _namespace_ = "publishloader3036007075";
 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":"publishloader3382526096__root","publishLoader":"publishloader3382526096__publishLoader"};
+export var classes = {"root":"publishloader3036007075__root","publishLoader":"publishloader3036007075__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_ = "togglefullscreenbutton2770240920";
+var _namespace_ = "togglefullscreenbutton4262494651";
 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":"togglefullscreenbutton2770240920__root"};
+export var classes = {"root":"togglefullscreenbutton4262494651__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

@@ -2,6 +2,7 @@
 
 .root {
     position: relative;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif);
 }
 
 .root,
@@ -25,10 +26,16 @@
     padding: 36px 24px 36px 55px;
 }
 
+.modalEditor {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
 .modalEditor .editor {
     overflow-y: auto;
-    min-height: calc(100% - var(--topToolbarHeight) - var(--bottomToolbarHeight));
-    max-height: calc(100% - var(--topToolbarHeight) - var(--bottomToolbarHeight));
+    flex: 1;
     min-width: 592px;
     box-sizing: border-box;
 }

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_ = "richcontenteditor1325512615";
+var _namespace_ = "richcontenteditor1849865231";
 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":"richcontenteditor1325512615__root","toolbarContainer":"richcontenteditor1325512615__toolbarContainer","footerToolbarContainer":"richcontenteditor1325512615__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1325512615__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1325512615__editor","modalEditor":"richcontenteditor1325512615__modalEditor"};
+export var classes = {"root":"richcontenteditor1849865231__root","toolbarContainer":"richcontenteditor1849865231__toolbarContainer","footerToolbarContainer":"richcontenteditor1849865231__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1849865231__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1849865231__editor","modalEditor":"richcontenteditor1849865231__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontenteditor1325512615-topToolbarHeight","bottomToolbarHeight":"--richcontenteditor1325512615-bottomToolbarHeight"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor1849865231-wds-font-family-default"}; 
 
 
 

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

@@ -133,10 +133,30 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     );
     useEffect(() => updateButtons(false, true));
 
-    const onLoadEditor = useCallback(
-      () => updateButtons(true),
-      [updateButtons],
-    );
+    // Poll via rAF until Ricos has populated its toolbar buttons before marking
+    // the toolbar as ready. A single call to updateButtons(true) at onLoad time
+    // fails silently when Ricos hasn't finished initialising — buttons is empty,
+    // setIsToolbarReady is never called, and the loader persists forever.
+    const onLoadEditor = useCallback(() => {
+      let frameId = 0;
+      (function loadToolbar() {
+        frameId = requestAnimationFrame(() => {
+          if (!editorRef.current) {
+            return;
+          }
+          const { buttons } = editorRef.current.getToolbarProps(
+            TOOLBARS.INSERT_PLUGIN,
+          );
+          if (Object.values(buttons).length > 0) {
+            setToolbarButtons(buttons);
+            setIsToolbarReady(true);
+          } else {
+            loadToolbar();
+          }
+        });
+      })();
+      return () => cancelAnimationFrame(frameId);
+    }, []);
 
     useEffect(() => {
       if (!autoFocus) {
@@ -465,6 +485,22 @@ export const RichContentEditor: FC<RichContentEditorProps> = withEditorContext(
       onBlur?.();
     }, [content, editorEvents, onBlur, onPublish, isRichContentChanged]);
 
+    // Escape while fullscreen — capture phase so it fires before Ricos' own handlers.
+    // Delegates to onClose which calls editorEvents.publish() for the real current content.
+    useEffect(() => {
+      if (!isFullScreen) {
+        return;
+      }
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown, true);
+      return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [isFullScreen, onClose]);
+
     const getToolbarSettings = useGetToolbarSettings();
 
     const rceProps = {

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_ = "richcontenttoolbar1079478855";
+var _namespace_ = "richcontenttoolbar2248996894";
 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":"richcontenttoolbar1079478855__root","toolbar":"richcontenttoolbar1079478855__toolbar","toolbarButton":"richcontenttoolbar1079478855__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar2248996894__root","toolbar":"richcontenttoolbar2248996894__toolbar","toolbarButton":"richcontenttoolbar2248996894__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_ = "richcontentviewer2629903824";
+var _namespace_ = "richcontentviewer1851593110";
 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":"richcontentviewer2629903824__root","viewer":"richcontentviewer2629903824__viewer","modalViewer":"richcontentviewer2629903824__modalViewer"};
+export var classes = {"root":"richcontentviewer1851593110__root","viewer":"richcontentviewer1851593110__viewer","modalViewer":"richcontentviewer1851593110__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor945982912";
+var _namespace_ = "richeditor3394019726";
 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":"richeditor945982912__root","editor":"richeditor945982912__editor","header-one":"richeditor945982912__header-one","header-two":"richeditor945982912__header-two","header-three":"richeditor945982912__header-three","header-four":"richeditor945982912__header-four","header-five":"richeditor945982912__header-five","header-six":"richeditor945982912__header-six","paragraph-one":"richeditor945982912__paragraph-one","unstyled":"richeditor945982912__unstyled","paragraph-three":"richeditor945982912__paragraph-three","align-left":"richeditor945982912__align-left","align-right":"richeditor945982912__align-right","align-center":"richeditor945982912__align-center","align-justify":"richeditor945982912__align-justify","withMargin":"richeditor945982912__withMargin","dir-rtl":"richeditor945982912__dir-rtl"};
+export var classes = {"root":"richeditor3394019726__root","editor":"richeditor3394019726__editor","header-one":"richeditor3394019726__header-one","header-two":"richeditor3394019726__header-two","header-three":"richeditor3394019726__header-three","header-four":"richeditor3394019726__header-four","header-five":"richeditor3394019726__header-five","header-six":"richeditor3394019726__header-six","paragraph-one":"richeditor3394019726__paragraph-one","unstyled":"richeditor3394019726__unstyled","paragraph-three":"richeditor3394019726__paragraph-three","align-left":"richeditor3394019726__align-left","align-right":"richeditor3394019726__align-right","align-center":"richeditor3394019726__align-center","align-justify":"richeditor3394019726__align-justify","withMargin":"richeditor3394019726__withMargin","dir-rtl":"richeditor3394019726__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor2993445588";
+var _namespace_ = "richtexteditor3008854828";
 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":"richtexteditor2993445588__root","nativeInput":"richtexteditor2993445588__nativeInput","editor":"richtexteditor2993445588__editor"};
+export var classes = {"root":"richtexteditor3008854828__root","nativeInput":"richtexteditor3008854828__nativeInput","editor":"richtexteditor3008854828__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};