@wix/patterns-fields 1.17.0 → 1.18.0

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { HTMLToText } from '../../auto-field-types';
+import { TextView } from '../text';
+
+export interface CellRichTextViewProps {
+  value?: string | null;
+}
+
+/** Synchronous plain-text view for an HTML rich-text string.
+ *  Strips all HTML tags via DOMParser — no loading spinner. */
+export const CellRichTextView: React.FC<CellRichTextViewProps> = ({
+  value,
+}) => {
+  const plainText = value ? HTMLToText(value, { singleLine: true }) : '';
+  return <TextView data={plainText} />;
+};
+
+CellRichTextView.displayName = 'CellRichTextView';

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

@@ -1,5 +1,9 @@
 export * from './rich-text-view';
 export * from './rich-text-input';
+export * from './cell-rich-text-view';
+export * from './cell-rich-text-editor';
+export * from './cell-rich-text-input';
+export type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
 
 export type { NoOptions, TextKeys } from './types';
 export * from './components/link';

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

@@ -6,6 +6,7 @@
 @property st-global(--wds-color-black-100);
 @property st-global(--wds-color-black-700);
 @property st-global(--wds-font-family-default);
+@property st-global(--wsr-font-family);
 @property st-global(--wds-font-weight-medium);
 @property st-global(--wds-font-weight-bold);
 @property st-global(--wds-font-size-500);
@@ -65,66 +66,69 @@
 @property st-global(--rt-p3-lineHeight);
 
 :vars {
+    /* Madefor fallback ensures the correct font renders even without a WDS theme. */
+    fontFamilyDefault: var(--wds-font-family-default, var(--wsr-font-family, Madefor));
+
     h1FontSize: var(--rt-h1-fontSize, 72px);
     h1FontStyle: var(--rt-h1-fontStyle, normal);
-    h1FontWeight: var(--rt-h1-fontWeight, var(--wds-font-weight-bold));
-    h1FontFamily: var(--rt-h1-fontFamily, var(--wds-font-family-default));
+    h1FontWeight: var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700));
+    h1FontFamily: var(--rt-h1-fontFamily, value(fontFamilyDefault));
     h1LineHeight: var(--rt-h1-lineHeight, 1.33);
     h1Font: value(h1FontStyle) value(h1FontWeight) value(h1FontSize)/value(h1LineHeight) value(h1FontFamily);
 
     h2FontSize: var(--rt-h2-fontSize, 42px);
     h2FontStyle: var(--rt-h2-fontStyle, normal);
-    h2FontWeight: var(--rt-h2-fontWeight, var(--wds-font-weight-bold));
-    h2FontFamily: var(--rt-h2-fontFamily, var(--wds-font-family-default));
+    h2FontWeight: var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700));
+    h2FontFamily: var(--rt-h2-fontFamily, value(fontFamilyDefault));
     h2LineHeight: var(--rt-h2-lineHeight, 1.2);
     h2Font: value(h2FontStyle) value(h2FontWeight) value(h2FontSize)/value(h2LineHeight) value(h2FontFamily);
 
     h3FontSize: var(--rt-h3-fontSize, 38px);
     h3FontStyle: var(--rt-h3-fontStyle, normal);
-    h3FontWeight: var(--rt-h3-fontWeight, var(--wds-font-weight-medium));
-    h3FontFamily: var(--rt-h3-fontFamily, var(--wds-font-family-default));
+    h3FontWeight: var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500));
+    h3FontFamily: var(--rt-h3-fontFamily, value(fontFamilyDefault));
     h3LineHeight: var(--rt-h3-lineHeight, 1.2);
     h3Font: value(h3FontStyle) value(h3FontWeight) value(h3FontSize)/value(h3LineHeight) value(h3FontFamily);
 
     h4FontSize: var(--rt-h4-fontSize, 34px);
     h4FontStyle: var(--rt-h4-fontStyle, normal);
-    h4FontWeight: var(--rt-h4-fontWeight, var(--wds-font-weight-bold));
-    h4FontFamily: var(--rt-h4-fontFamily, var(--wds-font-family-default));
+    h4FontWeight: var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700));
+    h4FontFamily: var(--rt-h4-fontFamily, value(fontFamilyDefault));
     h4LineHeight: var(--rt-h4-lineHeight, 1.2);
     h4Font: value(h4FontStyle) value(h4FontWeight) value(h4FontSize)/value(h4LineHeight) value(h4FontFamily);
 
     h5FontSize: var(--rt-h5-fontSize, 28px);
     h5FontStyle: var(--rt-h5-fontStyle, normal);
-    h5FontWeight: var(--rt-h5-fontWeight, var(--wds-font-weight-bold));
-    h5FontFamily: var(--rt-h5-fontFamily, var(--wds-font-family-default));
+    h5FontWeight: var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700));
+    h5FontFamily: var(--rt-h5-fontFamily, value(fontFamilyDefault));
     h5LineHeight: var(--rt-h5-lineHeight, 1.2);
     h5Font: value(h5FontStyle) value(h5FontWeight) value(h5FontSize)/value(h5LineHeight) value(h5FontFamily);
 
     h6FontSize: var(--rt-h6-fontSize, 22px);
     h6FontStyle: var(--rt-h6-fontStyle, normal);
-    h6FontWeight: var(--rt-h6-fontWeight, var(--wds-font-weight-medium));
-    h6FontFamily: var(--rt-h6-fontFamily, var(--wds-font-family-default));
+    h6FontWeight: var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500));
+    h6FontFamily: var(--rt-h6-fontFamily, value(fontFamilyDefault));
     h6LineHeight: var(--rt-h6-lineHeight, 1.2);
     h6Font: value(h6FontStyle) value(h6FontWeight) value(h6FontSize)/value(h6LineHeight) value(h6FontFamily);
 
     p1FontSize: var(--rt-p1-fontSize, 18px);
     p1FontStyle: var(--rt-p1-fontStyle, normal);
-    p1FontWeight: var(--rt-p1-fontWeight, var(--wds-font-weight-medium));
-    p1FontFamily: var(--rt-p1-fontFamily, var(--wds-font-family-default));
+    p1FontWeight: var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500));
+    p1FontFamily: var(--rt-p1-fontFamily, value(fontFamilyDefault));
     p1LineHeight: var(--rt-p1-lineHeight, 24px);
     p1Font: value(p1FontStyle) value(p1FontWeight) value(p1FontSize)/value(p1LineHeight) value(p1FontFamily);
 
     unstyledFontSize: var(--rt-unstyled-fontSize, 16px);
     unstyledFontStyle: var(--rt-unstyled-fontStyle, normal);
-    unstyledFontWeight: var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium));
-    unstyledFontFamily: var(--rt-unstyled-fontFamily, var(--wds-font-family-default));
+    unstyledFontWeight: var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500));
+    unstyledFontFamily: var(--rt-unstyled-fontFamily, value(fontFamilyDefault));
     unstyledLineHeight: var(--rt-unstyled-lineHeight, 24px);
     unstyledFont: value(unstyledFontStyle) value(unstyledFontWeight) value(unstyledFontSize)/value(unstyledLineHeight) value(unstyledFontFamily);
 
     p3FontSize: var(--rt-p3-fontSize, 14px);
     p3FontStyle: var(--rt-p3-fontStyle, normal);
-    p3FontWeight: var(--rt-p3-fontWeight, var(--wds-font-weight-medium));
-    p3FontFamily: var(--rt-p3-fontFamily, var(--wds-font-family-default));
+    p3FontWeight: var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500));
+    p3FontFamily: var(--rt-p3-fontFamily, value(fontFamilyDefault));
     p3LineHeight: var(--rt-p3-lineHeight, 18px);
     p3Font: value(p3FontStyle) value(p3FontWeight) value(p3FontSize)/value(p3LineHeight) value(p3FontFamily);
 }
@@ -132,10 +136,10 @@
 .root {
     display: flex;
     flex-direction: column;
-    font-weight: var(--wds-font-weight-medium);
+    font-weight: var(--wds-font-weight-medium, 500);
     font-size: var(--wds-font-size-500);
     line-height: var(--wds-font-line-height-300);
-    font-family: var(--wds-font-family-default);
+    font-family: value(fontFamilyDefault);
 }
 
 .editor {
@@ -145,8 +149,8 @@
     flex-direction: column;
     flex: 1;
     cursor: text;
-    color: var(--wds-color-black-100);
-    background: var(--wds-color-black-700);
+    color: var(--wds-color-black-100, var(--wsr-color-D10, #131720));
+    background: var(--wds-color-black-700, var(--wsr-color-D70, #edeef2));
 }
 
 .editor :global(.DraftEditor-root) {

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_ = "richeditor3394019726";
+var _namespace_ = "richeditor3609789040";
 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":"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 classes = {"root":"richeditor3609789040__root","editor":"richeditor3609789040__editor","header-one":"richeditor3609789040__header-one","header-two":"richeditor3609789040__header-two","header-three":"richeditor3609789040__header-three","header-four":"richeditor3609789040__header-four","header-five":"richeditor3609789040__header-five","header-six":"richeditor3609789040__header-six","paragraph-one":"richeditor3609789040__paragraph-one","unstyled":"richeditor3609789040__unstyled","paragraph-three":"richeditor3609789040__paragraph-three","align-left":"richeditor3609789040__align-left","align-right":"richeditor3609789040__align-right","align-center":"richeditor3609789040__align-center","align-justify":"richeditor3609789040__align-justify","withMargin":"richeditor3609789040__withMargin","dir-rtl":"richeditor3609789040__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
-export var stVars = {"h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default))"}; 
-export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight"}; 
+export var stVars = {"fontFamilyDefault":"var(--wds-font-family-default, var(--wsr-font-family, Madefor))","h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))"}; 
+export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor3609789040-wsr-color-D10","wsr-color-D70":"--richeditor3609789040-wsr-color-D70"}; 
 
 
 

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

@@ -127,6 +127,7 @@ export class RichEditor extends React.Component<RichEditorProps> {
             handleKeyCommand={this.handleKeyCommand}
             blockStyleFn={blockStyleFn}
             handlePastedText={this.handlePastedText}
+            preserveSelectionOnBlur
           />
         </div>
       </div>
@@ -389,9 +390,17 @@ export class RichEditor extends React.Component<RichEditorProps> {
 
   private onChangeBlock = (value: string) => {
     let { editorState } = this.props;
+    // Restore the last focused selection before computing selected blocks — the
+    // editor may have blurred (portal click) before onSelect fires, leaving the
+    // current selection stale or collapsed.
+    if (this.lastSelectionWithFocus) {
+      editorState = EditorState.acceptSelection(
+        editorState,
+        this.lastSelectionWithFocus,
+      );
+    }
     let contentState = editorState.getCurrentContent();
     const selectedBlocks = this.getSelectedBlocks(editorState);
-
     if (selectedBlocks.length) {
       // if every block have value style then remove it from all
       // else set every block to value
@@ -459,10 +468,18 @@ export class RichEditor extends React.Component<RichEditorProps> {
     );
 
     if (this.lastSelectionWithFocus) {
-      editorState = EditorState.forceSelection(
-        editorState,
-        this.lastSelectionWithFocus,
-      );
+      if (containsActiveElement(this.root)) {
+        editorState = EditorState.acceptSelection(
+          editorState,
+          this.lastSelectionWithFocus,
+        );
+      } else {
+        editorState = EditorState.forceSelection(
+          editorState,
+          this.lastSelectionWithFocus,
+        );
+        this.focus();
+      }
     }
     this.onChange(editorState);
   };

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_ = "richtexteditor3008854828";
+var _namespace_ = "richtexteditor4023643757";
 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":"richtexteditor3008854828__root","nativeInput":"richtexteditor3008854828__nativeInput","editor":"richtexteditor3008854828__editor"};
+export var classes = {"root":"richtexteditor4023643757__root","nativeInput":"richtexteditor4023643757__nativeInput","editor":"richtexteditor4023643757__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};