@wix/patterns-fields 1.109.0 → 1.111.0

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield1544228680";
+var _namespace_ = "formdocumentfield2013326977";
 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":"formdocumentfield1544228680__root","viewWrapper":"formdocumentfield1544228680__viewWrapper","textWidth":"formdocumentfield1544228680__textWidth","documentLoader":"formdocumentfield1544228680__documentLoader","addDocument":"formdocumentfield1544228680__addDocument","addItemWrapper":"formdocumentfield1544228680__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2013326977__root","viewWrapper":"formdocumentfield2013326977__viewWrapper","textWidth":"formdocumentfield2013326977__textWidth","documentLoader":"formdocumentfield2013326977__documentLoader","addDocument":"formdocumentfield2013326977__addDocument","addItemWrapper":"formdocumentfield2013326977__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2206936122";
+var _namespace_ = "exclamation132058364";
 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":"exclamation2206936122__root","exclamation":"exclamation2206936122__exclamation","actions":"exclamation2206936122__actions","action":"exclamation2206936122__action"};
+export var classes = {"root":"exclamation132058364__root","exclamation":"exclamation132058364__exclamation","actions":"exclamation132058364__actions","action":"exclamation132058364__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.tsx

@@ -229,12 +229,12 @@ export const FieldValidationSettingsInput = ({
           }
         />
         {hasCharactersLimit && (
-          <Box verticalAlign="middle" gap="SP2">
-            <Box width="112px">
+          <Box verticalAlign="bottom" gap="SP2">
+            <Box width="100px">
               <FormField stretchContent label={rule.minLabel}>
                 <NumberInput
                   dataHook="field-validation-min-characters"
-                  size="small"
+                  size="medium"
                   value={data.charactersLimit?.min}
                   disabled={isInputDisabled}
                   status={
@@ -261,14 +261,16 @@ export const FieldValidationSettingsInput = ({
                 />
               </FormField>
             </Box>
-            <Text size="small" secondary>
-              {rule.separator}
-            </Text>
-            <Box width="112px">
+            <Box height="36px" verticalAlign="middle">
+              <Text size="small" secondary>
+                {rule.separator}
+              </Text>
+            </Box>
+            <Box width="100px">
               <FormField stretchContent label={rule.maxLabel}>
                 <NumberInput
                   dataHook="field-validation-max-characters"
-                  size="small"
+                  size="medium"
                   value={data.charactersLimit?.max}
                   disabled={isInputDisabled}
                   status={

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3225126305";
+var _namespace_ = "highlightedtext2597848259";
 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":"highlightedtext3225126305__root","substring":"highlightedtext3225126305__substring"};
-export var keyframes = {"highlighted":"highlightedtext3225126305__highlighted","highlighted-match":"highlightedtext3225126305__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2597848259__root","substring":"highlightedtext2597848259__substring"};
+export var keyframes = {"highlighted":"highlightedtext2597848259__highlighted","highlighted-match":"highlightedtext2597848259__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay4168077699";
+var _namespace_ = "thumbnailreplaceoverlay2287490407";
 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":"thumbnailreplaceoverlay4168077699__root","icon":"thumbnailreplaceoverlay4168077699__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2287490407__root","icon":"thumbnailreplaceoverlay2287490407__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellmediaeditshell2380148196";
+var _namespace_ = "cellmediaeditshell1493028595";
 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":"cellmediaeditshell2380148196__root"};
+export var classes = {"root":"cellmediaeditshell1493028595__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_ = "pasteurlbutton1715181103";
+var _namespace_ = "pasteurlbutton4200227506";
 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":"pasteurlbutton1715181103__root","iconButtonTooltip":"pasteurlbutton1715181103__iconButtonTooltip","iconButton":"pasteurlbutton1715181103__iconButton"};
+export var classes = {"root":"pasteurlbutton4200227506__root","iconButtonTooltip":"pasteurlbutton4200227506__iconButtonTooltip","iconButton":"pasteurlbutton4200227506__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_ = "formmediagalleryfield3059241841";
+var _namespace_ = "formmediagalleryfield430290838";
 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":"formmediagalleryfield3059241841__root","container":"formmediagalleryfield3059241841__container","viewBox":"formmediagalleryfield3059241841__viewBox","addItemWrapper":"formmediagalleryfield3059241841__addItemWrapper","addItem":"formmediagalleryfield3059241841__addItem","overlay":"formmediagalleryfield3059241841__overlay","image":"formmediagalleryfield3059241841__image","previewImage":"formmediagalleryfield3059241841__previewImage","previewVideo":"formmediagalleryfield3059241841__previewVideo"};
+export var classes = {"root":"formmediagalleryfield430290838__root","container":"formmediagalleryfield430290838__container","viewBox":"formmediagalleryfield430290838__viewBox","addItemWrapper":"formmediagalleryfield430290838__addItemWrapper","addItem":"formmediagalleryfield430290838__addItem","overlay":"formmediagalleryfield430290838__overlay","image":"formmediagalleryfield430290838__image","previewImage":"formmediagalleryfield430290838__previewImage","previewVideo":"formmediagalleryfield430290838__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_ = "mediaimage3444480295";
+var _namespace_ = "mediaimage1101490151";
 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":"mediaimage3444480295__root"};
+export var classes = {"root":"mediaimage1101490151__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":"--mediaimage3444480295-from","to":"--mediaimage3444480295-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":"--mediaimage1101490151-from","to":"--mediaimage1101490151-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_ = "overlay123276272";
+var _namespace_ = "overlay533257831";
 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":"overlay123276272__root","iconOverlay":"overlay123276272__iconOverlay"};
+export var classes = {"root":"overlay533257831__root","iconOverlay":"overlay533257831__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_ = "mediatag1892999247";
+var _namespace_ = "mediatag1607856957";
 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":"mediatag1892999247__root"};
+export var classes = {"root":"mediatag1607856957__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_ = "cellmultidocumentedit3949318771";
+var _namespace_ = "cellmultidocumentedit290778729";
 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":"cellmultidocumentedit3949318771__root","chipTrigger":"cellmultidocumentedit3949318771__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit290778729__root","chipTrigger":"cellmultidocumentedit290778729__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_ = "formmultidocument860828417";
+var _namespace_ = "formmultidocument232573991";
 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":"formmultidocument860828417__root","viewRoot":"formmultidocument860828417__viewRoot","singleViewWrapper":"formmultidocument860828417__singleViewWrapper","addDocumentButton":"formmultidocument860828417__addDocumentButton"};
+export var classes = {"root":"formmultidocument232573991__root","viewRoot":"formmultidocument232573991__viewRoot","singleViewWrapper":"formmultidocument232573991__singleViewWrapper","addDocumentButton":"formmultidocument232573991__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_ = "cellmultireferenceinput3549115440";
+var _namespace_ = "cellmultireferenceinput70067226";
 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":"cellmultireferenceinput3549115440__root"};
+export var classes = {"root":"cellmultireferenceinput70067226__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_ = "cellreferenceinput825148666";
+var _namespace_ = "cellreferenceinput1608182147";
 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":"cellreferenceinput825148666__root","autocomplete":"cellreferenceinput825148666__autocomplete"};
+export var classes = {"root":"cellreferenceinput1608182147__root","autocomplete":"cellreferenceinput1608182147__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_ = "richcontentdefaultvalueinput136872786";
+var _namespace_ = "richcontentdefaultvalueinput3835248619";
 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":"richcontentdefaultvalueinput136872786__root","richContentEditorContainer":"richcontentdefaultvalueinput136872786__richContentEditorContainer","editor":"richcontentdefaultvalueinput136872786__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3835248619__root","richContentEditorContainer":"richcontentdefaultvalueinput3835248619__richContentEditorContainer","editor":"richcontentdefaultvalueinput3835248619__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_ = "richcontentforminput1980338327";
+var _namespace_ = "richcontentforminput727263717";
 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":"richcontentforminput1980338327__root","editor":"richcontentforminput1980338327__editor"};
+export var classes = {"root":"richcontentforminput727263717__root","editor":"richcontentforminput727263717__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_ = "richcontentformreadonlyinput4171215455";
+var _namespace_ = "richcontentformreadonlyinput3423908973";
 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":"richcontentformreadonlyinput4171215455__root"};
+export var classes = {"root":"richcontentformreadonlyinput3423908973__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_ = "fullscreenmodal191907069";
+var _namespace_ = "fullscreenmodal3389559131";
 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":"fullscreenmodal191907069__root","modalContent":"fullscreenmodal191907069__modalContent"};
+export var classes = {"root":"fullscreenmodal3389559131__root","modalContent":"fullscreenmodal3389559131__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_ = "publishloader3452678746";
+var _namespace_ = "publishloader134882398";
 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":"publishloader3452678746__root","publishLoader":"publishloader3452678746__publishLoader"};
+export var classes = {"root":"publishloader134882398__root","publishLoader":"publishloader134882398__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_ = "togglefullscreenbutton1124921780";
+var _namespace_ = "togglefullscreenbutton2944895381";
 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":"togglefullscreenbutton1124921780__root"};
+export var classes = {"root":"togglefullscreenbutton2944895381__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_ = "richcontenteditor2665333597";
+var _namespace_ = "richcontenteditor1716567060";
 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":"richcontenteditor2665333597__root","toolbarContainer":"richcontenteditor2665333597__toolbarContainer","footerToolbarContainer":"richcontenteditor2665333597__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2665333597__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2665333597__editor","modalEditor":"richcontenteditor2665333597__modalEditor"};
+export var classes = {"root":"richcontenteditor1716567060__root","toolbarContainer":"richcontenteditor1716567060__toolbarContainer","footerToolbarContainer":"richcontenteditor1716567060__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1716567060__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1716567060__editor","modalEditor":"richcontenteditor1716567060__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_ = "richcontenttoolbar2552606762";
+var _namespace_ = "richcontenttoolbar934747531";
 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":"richcontenttoolbar2552606762__root","toolbar":"richcontenttoolbar2552606762__toolbar","toolbarButton":"richcontenttoolbar2552606762__toolbarButton","separator":"richcontenttoolbar2552606762__separator"};
+export var classes = {"root":"richcontenttoolbar934747531__root","toolbar":"richcontenttoolbar934747531__toolbar","toolbarButton":"richcontenttoolbar934747531__toolbarButton","separator":"richcontenttoolbar934747531__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_ = "richcontentviewer3000865605";
+var _namespace_ = "richcontentviewer173357374";
 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":"richcontentviewer3000865605__root","viewer":"richcontentviewer3000865605__viewer","modalViewer":"richcontentviewer3000865605__modalViewer"};
+export var classes = {"root":"richcontentviewer173357374__root","viewer":"richcontentviewer173357374__viewer","modalViewer":"richcontentviewer173357374__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,