@wix/patterns-fields 1.16.0 → 1.18.0

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_ = "richeditor3732851385";
+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":"richeditor3732851385__root","editor":"richeditor3732851385__editor","header-one":"richeditor3732851385__header-one","header-two":"richeditor3732851385__header-two","header-three":"richeditor3732851385__header-three","header-four":"richeditor3732851385__header-four","header-five":"richeditor3732851385__header-five","header-six":"richeditor3732851385__header-six","paragraph-one":"richeditor3732851385__paragraph-one","unstyled":"richeditor3732851385__unstyled","paragraph-three":"richeditor3732851385__paragraph-three","align-left":"richeditor3732851385__align-left","align-right":"richeditor3732851385__align-right","align-center":"richeditor3732851385__align-center","align-justify":"richeditor3732851385__align-justify","withMargin":"richeditor3732851385__withMargin","dir-rtl":"richeditor3732851385__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_ = "richtexteditor1091053437";
+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":"richtexteditor1091053437__root","nativeInput":"richtexteditor1091053437__nativeInput","editor":"richtexteditor1091053437__editor"};
+export var classes = {"root":"richtexteditor4023643757__root","nativeInput":"richtexteditor4023643757__nativeInput","editor":"richtexteditor4023643757__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/header-dropdown.tsx

@@ -1,16 +1,16 @@
 import React, { useCallback } from 'react';
 
-import type { DropdownLayoutValueOption } from '@wix/design-system';
 import {
   Box,
-  Text,
-  Heading,
   DropdownBase,
+  DropdownLayoutValueOption,
+  Heading,
+  Text,
+  TextButton,
   ToggleButton,
 } from '@wix/design-system';
 
 import { useTranslations } from '../../../../../hooks';
-import { LinkButton } from '../../../components/link';
 import { combineClasses } from '../utils/stylable-helper';
 
 import HeaderOneIcon from './icons/rt-header-one.svg';
@@ -23,7 +23,7 @@ import ParagraphOneIcon from './icons/rt-paragraph-one.svg';
 import NormalTextIcon from './icons/rt-normal-text.svg';
 import ParagraphThreeIcon from './icons/rt-paragraph-three.svg';
 import { richTextToolbarDataHook } from '../../data-hooks';
-import { style, classes } from './toolbar.st.css.js';
+import { classes, style } from './toolbar.st.css.js';
 
 import { preventEvent } from '../../../../../utils';
 import type { TextKeys } from '../../../types';
@@ -78,133 +78,155 @@ const HeaderDropdownHelpSection: React.FC = () => {
       <Text size="small">
         {t('CMS.richTextEditor.toolbar.headerDropdown.help.text')}
         <br />
-        <LinkButton
-          inText
-          href={t('CMS.richTextEditor.toolbar.headerDropdown.button.info.link')}
+        <TextButton
+          as="a"
+          href="https://support.wix.com/en/article/formatting-rich-text-elements-in-the-dashboards-data-manager"
+          target="_blank"
+          rel="noopener noreferrer"
+          size="small"
+          underline="always"
         >
           {t('CMS.richTextEditor.toolbar.headerDropdown.button.info')}
-        </LinkButton>
+        </TextButton>
       </Text>
     </Box>
   );
 };
 
-const createDropdownOptions = (): DropdownLayoutValueOption[] => [
-  {
-    id: 'header-one',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-one`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle"
-        className={classes.dropdownHeaderOne}
-      />
-    ),
-  },
-  {
-    id: 'header-two',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-two`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.subtitle"
-        className={classes.dropdownHeaderTwo}
-      />
-    ),
-  },
-  {
-    id: 'header-three',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-three`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.subtitle"
-        className={classes.dropdownHeaderThree}
-      />
-    ),
-  },
-  {
-    id: 'header-four',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-four`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.subtitle"
-        className={classes.dropdownHeaderFour}
-      />
-    ),
-  },
-  {
-    id: 'header-five',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-five`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.subtitle"
-        className={classes.dropdownHeaderFive}
-      />
-    ),
-  },
-  {
-    id: 'header-six',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-six`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.subtitle"
-        className={classes.dropdownHeaderSix}
-      />
-    ),
-  },
-  {
-    id: 'paragraph-one',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-one`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.subtitle"
-        className={classes.dropdownParagraphOne}
-      />
-    ),
-  },
-  {
-    id: 'unstyled',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.unstyled`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle"
-        className={classes.dropdownNormalText}
-      />
-    ),
-  },
-  {
-    id: 'paragraph-three',
-    value: (props) => (
-      <HeaderDropdownItemContent
-        {...props}
-        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-three`}
-        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.title"
-        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle"
-        className={classes.dropdownParagraphThree}
-      />
-    ),
-  },
-  {
-    id: 'help-text',
-    disabled: true,
-    overrideOptionStyle: true,
-    value: <HeaderDropdownHelpSection />,
-  },
-];
+const HEADING_IDS = new Set([
+  'header-one',
+  'header-two',
+  'header-three',
+  'header-four',
+  'header-five',
+  'header-six',
+  'help-text',
+]);
+
+const createDropdownOptions = (
+  headingsEnabled = true,
+): DropdownLayoutValueOption[] => {
+  const all: DropdownLayoutValueOption[] = [
+    {
+      id: 'header-one',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-one`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle"
+          className={classes.dropdownHeaderOne}
+        />
+      ),
+    },
+    {
+      id: 'header-two',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-two`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.subtitle"
+          className={classes.dropdownHeaderTwo}
+        />
+      ),
+    },
+    {
+      id: 'header-three',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-three`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.subtitle"
+          className={classes.dropdownHeaderThree}
+        />
+      ),
+    },
+    {
+      id: 'header-four',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-four`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.subtitle"
+          className={classes.dropdownHeaderFour}
+        />
+      ),
+    },
+    {
+      id: 'header-five',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-five`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.subtitle"
+          className={classes.dropdownHeaderFive}
+        />
+      ),
+    },
+    {
+      id: 'header-six',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.header-six`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.subtitle"
+          className={classes.dropdownHeaderSix}
+        />
+      ),
+    },
+    {
+      id: 'paragraph-one',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-one`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.subtitle"
+          className={classes.dropdownParagraphOne}
+        />
+      ),
+    },
+    {
+      id: 'unstyled',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.unstyled`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle"
+          className={classes.dropdownNormalText}
+        />
+      ),
+    },
+    {
+      id: 'paragraph-three',
+      value: (props) => (
+        <HeaderDropdownItemContent
+          {...props}
+          dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-three`}
+          titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.title"
+          subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle"
+          className={classes.dropdownParagraphThree}
+        />
+      ),
+    },
+    {
+      id: 'help-text',
+      disabled: true,
+      overrideOptionStyle: true,
+      value: <HeaderDropdownHelpSection />,
+    },
+  ];
+  if (!headingsEnabled) {
+    return all.filter((opt) => !HEADING_IDS.has(String(opt.id)));
+  }
+  return all;
+};
 
 const headerTypeIconMap: Record<string, React.ReactElement> = {
   'header-one': <HeaderOneIcon />,
@@ -221,15 +243,20 @@ const headerTypeIconMap: Record<string, React.ReactElement> = {
 export interface HeaderDropdownProps {
   value?: string;
   onChange: (value: string) => void;
+  headingsEnabled?: boolean;
 }
 
 export const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
   value,
   onChange,
+  headingsEnabled = true,
 }) => {
   const { t } = useTranslations();
 
-  const dropdownOptions = React.useMemo(() => createDropdownOptions(), []);
+  const dropdownOptions = React.useMemo(
+    () => createDropdownOptions(headingsEnabled),
+    [headingsEnabled],
+  );
 
   const onSelect = useCallback(
     (option: DropdownLayoutValueOption) => onChange(String(option.id)),