@wix/patterns-fields 1.108.0 → 1.110.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_ = "cellmediaeditshell235224359";
+var _namespace_ = "cellmediaeditshell1470238779";
 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":"cellmediaeditshell235224359__root"};
+export var classes = {"root":"cellmediaeditshell1470238779__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_ = "pasteurlbutton2373892225";
+var _namespace_ = "pasteurlbutton863819561";
 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":"pasteurlbutton2373892225__root","iconButtonTooltip":"pasteurlbutton2373892225__iconButtonTooltip","iconButton":"pasteurlbutton2373892225__iconButton"};
+export var classes = {"root":"pasteurlbutton863819561__root","iconButtonTooltip":"pasteurlbutton863819561__iconButtonTooltip","iconButton":"pasteurlbutton863819561__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_ = "formmediagalleryfield668604997";
+var _namespace_ = "formmediagalleryfield3652448579";
 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":"formmediagalleryfield668604997__root","container":"formmediagalleryfield668604997__container","viewBox":"formmediagalleryfield668604997__viewBox","addItemWrapper":"formmediagalleryfield668604997__addItemWrapper","addItem":"formmediagalleryfield668604997__addItem","overlay":"formmediagalleryfield668604997__overlay","image":"formmediagalleryfield668604997__image","previewImage":"formmediagalleryfield668604997__previewImage","previewVideo":"formmediagalleryfield668604997__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3652448579__root","container":"formmediagalleryfield3652448579__container","viewBox":"formmediagalleryfield3652448579__viewBox","addItemWrapper":"formmediagalleryfield3652448579__addItemWrapper","addItem":"formmediagalleryfield3652448579__addItem","overlay":"formmediagalleryfield3652448579__overlay","image":"formmediagalleryfield3652448579__image","previewImage":"formmediagalleryfield3652448579__previewImage","previewVideo":"formmediagalleryfield3652448579__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_ = "mediaimage1816130638";
+var _namespace_ = "mediaimage669594612";
 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":"mediaimage1816130638__root"};
+export var classes = {"root":"mediaimage669594612__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":"--mediaimage1816130638-from","to":"--mediaimage1816130638-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":"--mediaimage669594612-from","to":"--mediaimage669594612-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_ = "overlay1530238555";
+var _namespace_ = "overlay269699703";
 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":"overlay1530238555__root","iconOverlay":"overlay1530238555__iconOverlay"};
+export var classes = {"root":"overlay269699703__root","iconOverlay":"overlay269699703__iconOverlay"};
 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_ = "mediatag1357066181";
+var _namespace_ = "mediatag1278659247";
 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":"mediatag1357066181__root"};
+export var classes = {"root":"mediatag1278659247__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_ = "cellmultidocumentedit2273831326";
+var _namespace_ = "cellmultidocumentedit1445614662";
 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":"cellmultidocumentedit2273831326__root","chipTrigger":"cellmultidocumentedit2273831326__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1445614662__root","chipTrigger":"cellmultidocumentedit1445614662__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_ = "formmultidocument3816460060";
+var _namespace_ = "formmultidocument3031168304";
 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":"formmultidocument3816460060__root","viewRoot":"formmultidocument3816460060__viewRoot","singleViewWrapper":"formmultidocument3816460060__singleViewWrapper","addDocumentButton":"formmultidocument3816460060__addDocumentButton"};
+export var classes = {"root":"formmultidocument3031168304__root","viewRoot":"formmultidocument3031168304__viewRoot","singleViewWrapper":"formmultidocument3031168304__singleViewWrapper","addDocumentButton":"formmultidocument3031168304__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_ = "cellmultireferenceinput2648455914";
+var _namespace_ = "cellmultireferenceinput1272302448";
 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":"cellmultireferenceinput2648455914__root"};
+export var classes = {"root":"cellmultireferenceinput1272302448__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_ = "cellreferenceinput480790494";
+var _namespace_ = "cellreferenceinput3677663516";
 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":"cellreferenceinput480790494__root","autocomplete":"cellreferenceinput480790494__autocomplete"};
+export var classes = {"root":"cellreferenceinput3677663516__root","autocomplete":"cellreferenceinput3677663516__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -19,7 +19,8 @@ export interface CellRichContentInputProps {
 }
 
 /** Full-screen Ricos editor for the richContent cell type.
- *  Opens immediately in fullscreen mode. Saving (X button or Escape) calls onChange + onSave. */
+ *  Opens immediately in fullscreen mode. Saving (X button, Escape or Enter) calls onChange + onSave.
+ *  Shift+Enter adds a new line. */
 export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
   value,
   onChange,
@@ -49,25 +50,22 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
     [setLocalValue],
   );
 
-  /** Commit the current content and exit edit mode.
+  /** Commit the content (if it changed) and exit edit mode.
    *  Guards against double-save (X button + Escape firing simultaneously). */
-  const handleSave = useCallback(
-    (content?: RicosDocument) => {
+  const handleExitFullScreen = useCallback(
+    (content?: RicosDocument, isContentChanged?: boolean) => {
       if (hasSavedRef.current) {
         return;
       }
       hasSavedRef.current = true;
-      onChange(content);
+      // Skipping onChange leaves the cell untouched, so nothing is saved. A
+      // typed-to-edit key is a change even though the editor started with it.
+      if (isContentChanged || initialTypedKey) {
+        onChange(content);
+      }
       onSave();
     },
-    [onChange, onSave],
-  );
-
-  const handleExitFullScreen = useCallback(
-    (content?: RicosDocument) => {
-      handleSave(content);
-    },
-    [handleSave],
+    [onChange, onSave, initialTypedKey],
   );
 
   return (
@@ -77,6 +75,7 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
       onChange={handleChange}
       onExitFullScreen={handleExitFullScreen}
       fullScreenOnly
+      closeOnEnter
       autoFocus
     />
   );

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_ = "richcontentdefaultvalueinput3993079790";
+var _namespace_ = "richcontentdefaultvalueinput3250840748";
 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":"richcontentdefaultvalueinput3993079790__root","richContentEditorContainer":"richcontentdefaultvalueinput3993079790__richContentEditorContainer","editor":"richcontentdefaultvalueinput3993079790__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3250840748__root","richContentEditorContainer":"richcontentdefaultvalueinput3250840748__richContentEditorContainer","editor":"richcontentdefaultvalueinput3250840748__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_ = "richcontentforminput3375020181";
+var _namespace_ = "richcontentforminput1502891660";
 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":"richcontentforminput3375020181__root","editor":"richcontentforminput3375020181__editor"};
+export var classes = {"root":"richcontentforminput1502891660__root","editor":"richcontentforminput1502891660__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_ = "richcontentformreadonlyinput2370049202";
+var _namespace_ = "richcontentformreadonlyinput517963887";
 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":"richcontentformreadonlyinput2370049202__root"};
+export var classes = {"root":"richcontentformreadonlyinput517963887__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_ = "fullscreenmodal2426758280";
+var _namespace_ = "fullscreenmodal4194047848";
 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":"fullscreenmodal2426758280__root","modalContent":"fullscreenmodal2426758280__modalContent"};
+export var classes = {"root":"fullscreenmodal4194047848__root","modalContent":"fullscreenmodal4194047848__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_ = "publishloader174442813";
+var _namespace_ = "publishloader3058437230";
 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":"publishloader174442813__root","publishLoader":"publishloader174442813__publishLoader"};
+export var classes = {"root":"publishloader3058437230__root","publishLoader":"publishloader3058437230__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_ = "togglefullscreenbutton1788293308";
+var _namespace_ = "togglefullscreenbutton2357879209";
 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":"togglefullscreenbutton1788293308__root"};
+export var classes = {"root":"togglefullscreenbutton2357879209__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_ = "richcontenteditor1294266000";
+var _namespace_ = "richcontenteditor3770552425";
 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":"richcontenteditor1294266000__root","toolbarContainer":"richcontenteditor1294266000__toolbarContainer","footerToolbarContainer":"richcontenteditor1294266000__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1294266000__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1294266000__editor","modalEditor":"richcontenteditor1294266000__modalEditor"};
+export var classes = {"root":"richcontenteditor3770552425__root","toolbarContainer":"richcontenteditor3770552425__toolbarContainer","footerToolbarContainer":"richcontenteditor3770552425__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3770552425__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3770552425__editor","modalEditor":"richcontenteditor3770552425__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -40,6 +40,7 @@ import {
 
 import { usePlugins } from './plugins';
 import { ExternalToolbar } from './rich-content-toolbar';
+import { isEnterInEditableText } from '../../../../utils/keyboard';
 import { st, classes } from './rich-content-editor.st.css.js';
 
 type RicosProps = Pick<RicosEditorProps, 'biSettings' | 'theme'> & {
@@ -394,6 +395,8 @@ export type RichContentEditorProps = Omit<RCEProps, 'onChange'> & {
   onChange?: (content: RicosDocument, isContentChanged?: boolean) => void;
   onPublish?: (promise: Promise<RicosDocument>) => void;
   fullScreenOnly?: boolean;
+  /** Close full screen on Enter in the text, like Escape. Shift+Enter still adds a new line. */
+  closeOnEnter?: boolean;
 };
 
 export const RichContentEditor: FC<RichContentEditorProps> = ({
@@ -402,6 +405,7 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
   onEnterFullScreen,
   onExitFullScreen,
   fullScreenOnly,
+  closeOnEnter,
   onPublish,
   onChange,
   theme,
@@ -542,12 +546,16 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
       if (e.key === 'Escape') {
         e.stopPropagation();
         void onClose();
+      } else if (closeOnEnter && isEnterInEditableText(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        void onClose();
       }
     };
 
     document.addEventListener('keydown', handleKeyDown, true);
     return () => document.removeEventListener('keydown', handleKeyDown, true);
-  }, [isFullScreen, onClose]);
+  }, [isFullScreen, onClose, closeOnEnter]);
 
   const rceProps = {
     onChange: handleChange,

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_ = "richcontenttoolbar3765747421";
+var _namespace_ = "richcontenttoolbar784676697";
 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":"richcontenttoolbar3765747421__root","toolbar":"richcontenttoolbar3765747421__toolbar","toolbarButton":"richcontenttoolbar3765747421__toolbarButton","separator":"richcontenttoolbar3765747421__separator"};
+export var classes = {"root":"richcontenttoolbar784676697__root","toolbar":"richcontenttoolbar784676697__toolbar","toolbarButton":"richcontenttoolbar784676697__toolbarButton","separator":"richcontenttoolbar784676697__separator"};
 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_ = "richcontentviewer1391567858";
+var _namespace_ = "richcontentviewer4123602360";
 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":"richcontentviewer1391567858__root","viewer":"richcontentviewer1391567858__viewer","modalViewer":"richcontentviewer1391567858__modalViewer"};
+export var classes = {"root":"richcontentviewer4123602360__root","viewer":"richcontentviewer4123602360__viewer","modalViewer":"richcontentviewer4123602360__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { EditorState } from 'draft-js';
 import { Modal } from '@wix/design-system';
 
@@ -118,9 +124,32 @@ export const CellRichTextEditor: React.FC<CellRichTextEditorProps> = ({
   const inlineStylesRef = useRef<InlineStyles>(inlineStyles);
   const customStyleMapRef = useRef<CustomStyleMap>(customStyleMap);
 
+  const contentRef = useRef(initialEditorState.getCurrentContent());
+
+  // A typed-to-edit key is already a change, even before the user edits again.
+  useEffect(() => {
+    if (initialTypedKey) {
+      onChange(
+        editorStateToHTML(
+          initialEditorState,
+          inlineStylesRef.current,
+          EDITING_OPTIONS,
+        ),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleChange = useCallback(
     (newState: EditorState) => {
       setEditorState(newState);
+      // Draft.js also fires onChange for focus and selection changes. Only a
+      // content change is an edit — otherwise an untouched cell would save.
+      const content = newState.getCurrentContent();
+      if (content === contentRef.current) {
+        return;
+      }
+      contentRef.current = content;
       const html = editorStateToHTML(
         newState,
         inlineStylesRef.current,

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

@@ -6,6 +6,7 @@ import {
   DEFAULT_CELL_TEXT_STYLE,
 } from './cell-rich-text-editor';
 import type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
+import { isEnterInEditableText } from '../../utils/keyboard';
 
 /** Fixed popover width matching the CMS rich text editor (popover-rich-text-editor.tsx). */
 const POPOVER_WIDTH = 582;
@@ -15,7 +16,7 @@ export interface CellRichTextInputProps {
   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. */
+  /** Called when the editor loses focus (click outside), or ESC or Enter is pressed. Shift+Enter adds a new line. */
   onCommit?: () => void;
   /** CSS custom properties for the --rt-* theming API. Defaults to standard sizes. */
   textStyle?: RichTextStyleVariables;
@@ -67,6 +68,13 @@ export const CellRichTextInput: React.FC<CellRichTextInputProps> = ({
   // stopPropagation() prevents the event from reaching any bubble-phase handler.
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (isEnterInEditableText(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        cancelAnimationFrame(blurFrameIdRef.current);
+        onCommit?.();
+        return;
+      }
       if (e.key !== 'Escape') return;
       e.stopPropagation();
       if (isFullScreenRef.current) {

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_ = "richeditor2908613696";
+var _namespace_ = "richeditor2247151294";
 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":"richeditor2908613696__root","editor":"richeditor2908613696__editor","header-one":"richeditor2908613696__header-one","header-two":"richeditor2908613696__header-two","header-three":"richeditor2908613696__header-three","header-four":"richeditor2908613696__header-four","header-five":"richeditor2908613696__header-five","header-six":"richeditor2908613696__header-six","paragraph-one":"richeditor2908613696__paragraph-one","unstyled":"richeditor2908613696__unstyled","paragraph-three":"richeditor2908613696__paragraph-three","align-left":"richeditor2908613696__align-left","align-right":"richeditor2908613696__align-right","align-center":"richeditor2908613696__align-center","align-justify":"richeditor2908613696__align-justify","withMargin":"richeditor2908613696__withMargin","dir-rtl":"richeditor2908613696__dir-rtl"};
+export var classes = {"root":"richeditor2247151294__root","editor":"richeditor2247151294__editor","header-one":"richeditor2247151294__header-one","header-two":"richeditor2247151294__header-two","header-three":"richeditor2247151294__header-three","header-four":"richeditor2247151294__header-four","header-five":"richeditor2247151294__header-five","header-six":"richeditor2247151294__header-six","paragraph-one":"richeditor2247151294__paragraph-one","unstyled":"richeditor2247151294__unstyled","paragraph-three":"richeditor2247151294__paragraph-three","align-left":"richeditor2247151294__align-left","align-right":"richeditor2247151294__align-right","align-center":"richeditor2247151294__align-center","align-justify":"richeditor2247151294__align-justify","withMargin":"richeditor2247151294__withMargin","dir-rtl":"richeditor2247151294__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_ = "richtexteditor2134844132";
+var _namespace_ = "richtexteditor3553443869";
 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":"richtexteditor2134844132__root","nativeInput":"richtexteditor2134844132__nativeInput","editor":"richtexteditor2134844132__editor"};
+export var classes = {"root":"richtexteditor3553443869__root","nativeInput":"richtexteditor3553443869__nativeInput","editor":"richtexteditor3553443869__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar998996411";
+var _namespace_ = "toolbar1733204498";
 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":"toolbar998996411__root","item":"toolbar998996411__item","separator":"toolbar998996411__separator","clearFormatting":"toolbar998996411__clearFormatting","fullScreen":"toolbar998996411__fullScreen","dropdownItemContent":"toolbar998996411__dropdownItemContent","dropdownItemTitle":"toolbar998996411__dropdownItemTitle","dropdownItemSubtitle":"toolbar998996411__dropdownItemSubtitle","dropdownHeaderOne":"toolbar998996411__dropdownHeaderOne","dropdownHeaderTwo":"toolbar998996411__dropdownHeaderTwo","dropdownHeaderThree":"toolbar998996411__dropdownHeaderThree","dropdownHeaderFour":"toolbar998996411__dropdownHeaderFour","dropdownHeaderFive":"toolbar998996411__dropdownHeaderFive","dropdownHeaderSix":"toolbar998996411__dropdownHeaderSix","dropdownParagraphOne":"toolbar998996411__dropdownParagraphOne","dropdownNormalText":"toolbar998996411__dropdownNormalText","dropdownParagraphThree":"toolbar998996411__dropdownParagraphThree"};
+export var classes = {"root":"toolbar1733204498__root","item":"toolbar1733204498__item","separator":"toolbar1733204498__separator","clearFormatting":"toolbar1733204498__clearFormatting","fullScreen":"toolbar1733204498__fullScreen","dropdownItemContent":"toolbar1733204498__dropdownItemContent","dropdownItemTitle":"toolbar1733204498__dropdownItemTitle","dropdownItemSubtitle":"toolbar1733204498__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1733204498__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1733204498__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1733204498__dropdownHeaderThree","dropdownHeaderFour":"toolbar1733204498__dropdownHeaderFour","dropdownHeaderFive":"toolbar1733204498__dropdownHeaderFive","dropdownHeaderSix":"toolbar1733204498__dropdownHeaderSix","dropdownParagraphOne":"toolbar1733204498__dropdownParagraphOne","dropdownNormalText":"toolbar1733204498__dropdownNormalText","dropdownParagraphThree":"toolbar1733204498__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/text/form-short-text.tsx

@@ -70,7 +70,7 @@ const _FormShortText = (props: FormShortTextProps) => {
   });
 
   const charCount = maxLength
-    ? maxLength - controller.field.value?.length
+    ? maxLength - (controller.field.value?.length ?? 0)
     : undefined;
 
   return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview482867238";
+var _namespace_ = "textview2550446214";
 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":"textview482867238__root","textView":"textview482867238__textView"};
+export var classes = {"root":"textview2550446214__root","textView":"textview2550446214__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};