@wix/auto-patterns 1.44.0 → 1.46.0

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,201 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { Modal } from '@wix/design-system';
+import { richTextDataHook } from '../data-hooks';
+import { RichEditor } from './rich-editor';
+import { compositeDecorator } from './composite-decorator';
+import { htmlToEditorState, editorStateToHTML } from './utils';
+import { combineClasses } from './utils/stylable-helper';
+import { style, classes } from './rich-text-editor.st.css.js';
+export class RichTextEditor extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      ...htmlToEditorState(this.props.value, compositeDecorator, this.editingOptions),
+      value: this.props.value || '',
+      prevValue: this.props.value,
+      isFullScreen: false
+    });
+    _defineProperty(this, "editors", {
+      main: null,
+      fullScreen: null
+    });
+    _defineProperty(this, "isFocused", false);
+    _defineProperty(this, "isBlurring", false);
+    _defineProperty(this, "blurFrameId", 0);
+    _defineProperty(this, "renderEditor", name => {
+      const {
+        autoFocus,
+        readOnly,
+        maxHeight,
+        textStyle
+      } = this.props;
+      const {
+        isFullScreen,
+        editorState,
+        customStyleMap
+      } = this.state;
+      if (name === 'main' && isFullScreen) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: combineClasses(style, classes.editor, {
+          isFullScreen
+        }),
+        style: name === 'main' ? {
+          maxHeight,
+          ...textStyle
+        } : textStyle,
+        onKeyDown: this.onKeyDown
+      }, /*#__PURE__*/React.createElement(RichEditor, {
+        ref: editor => this.editors[name] = editor,
+        editorState: editorState,
+        customStyleMap: customStyleMap,
+        onChange: this.onChange,
+        onToggleFullScreen: this.onToggleFullScreen,
+        readOnly: readOnly,
+        isFullScreen: isFullScreen,
+        headingsEnabled: this.editingOptions.headingsEnabled,
+        autoFocus: name === 'fullScreen' || autoFocus
+      }));
+    });
+    _defineProperty(this, "onToggleFullScreen", () => {
+      const {
+        isFullScreen
+      } = this.state;
+      this.setState({
+        isFullScreen: !isFullScreen
+      });
+      if (isFullScreen && this.editors.main) {
+        this.editors.main.focus();
+      }
+    });
+    _defineProperty(this, "onChange", editorState => {
+      var _this$props$onInput, _this$props;
+      const {
+        inlineStyles
+      } = this.state;
+      const value = editorStateToHTML(editorState, inlineStyles, this.editingOptions);
+      this.setState({
+        editorState,
+        value
+      });
+      value && ((_this$props$onInput = (_this$props = this.props).onInput) == null ? void 0 : _this$props$onInput.call(_this$props));
+    });
+    _defineProperty(this, "triggerOnChange", () => {
+      const {
+        value
+      } = this.state;
+      const {
+        onChange
+      } = this.props;
+      if (value !== this.props.value) {
+        onChange(value);
+      }
+    });
+    _defineProperty(this, "onKeyDown", e => {
+      var _this$props$onKeyDown, _this$props2;
+      const {
+        isFullScreen
+      } = this.state;
+      switch (e.key) {
+        case 'Escape':
+          isFullScreen && this.onToggleFullScreen();
+          break;
+      }
+      (_this$props$onKeyDown = (_this$props2 = this.props).onKeyDown) == null || _this$props$onKeyDown.call(_this$props2, e, isFullScreen);
+    });
+    _defineProperty(this, "onFocus", () => {
+      var _this$editors$main;
+      this.isBlurring = false;
+      cancelAnimationFrame(this.blurFrameId);
+      if (this.isFocused) {
+        return;
+      }
+      (_this$editors$main = this.editors.main) == null || _this$editors$main.focus();
+      this.triggerOnFocus();
+    });
+    _defineProperty(this, "onBlur", () => {
+      this.isBlurring = true;
+      cancelAnimationFrame(this.blurFrameId);
+      this.blurFrameId = requestAnimationFrame(this.triggerOnBlur);
+    });
+    _defineProperty(this, "triggerOnFocus", () => {
+      var _this$props$onFocus, _this$props3;
+      this.isFocused = true;
+      (_this$props$onFocus = (_this$props3 = this.props).onFocus) == null || _this$props$onFocus.call(_this$props3);
+    });
+    _defineProperty(this, "triggerOnBlur", () => {
+      var _this$props$onBlur, _this$props4;
+      this.isFocused = false;
+      this.triggerOnChange();
+      !this.state.isFullScreen && ((_this$props$onBlur = (_this$props4 = this.props).onBlur) == null ? void 0 : _this$props$onBlur.call(_this$props4));
+    });
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.value !== state.prevValue) {
+      if (props.value !== state.value) {
+        return {
+          ...htmlToEditorState(props.value, compositeDecorator, {
+            headingsEnabled: props.headingsEnabled
+          }),
+          prevValue: props.value,
+          value: props.value || ''
+        };
+      }
+      return {
+        prevValue: props.value
+      };
+    }
+    return null;
+  }
+  get editingOptions() {
+    const {
+      headingsEnabled
+    } = this.props;
+    return {
+      headingsEnabled
+    };
+  }
+  componentWillUnmount() {
+    cancelAnimationFrame(this.blurFrameId);
+    this.isBlurring && this.triggerOnBlur();
+  }
+  render() {
+    const {
+      value,
+      isFullScreen
+    } = this.state;
+    const {
+      dataHook,
+      readOnly,
+      border,
+      status
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-hook": dataHook,
+      className: combineClasses(style, classes.root, {
+        border,
+        status
+      }),
+      tabIndex: 0,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
+    }, this.renderEditor('main'), /*#__PURE__*/React.createElement("input", {
+      "data-hook": `${richTextDataHook}.nativeInput`,
+      className: classes.nativeInput,
+      defaultValue: value,
+      readOnly: readOnly,
+      tabIndex: -1
+    }), isFullScreen && /*#__PURE__*/React.createElement(Modal, {
+      screen: "desktop",
+      isOpen: isFullScreen
+    }, this.renderEditor('fullScreen')));
+  }
+}
+_defineProperty(RichTextEditor, "defaultProps", {
+  value: '',
+  border: 'standard',
+  headingsEnabled: true
+});
+//# sourceMappingURL=rich-text-editor.js.map

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Modal","richTextDataHook","RichEditor","compositeDecorator","htmlToEditorState","editorStateToHTML","combineClasses","style","classes","RichTextEditor","Component","constructor","arguments","_defineProperty","props","value","editingOptions","prevValue","isFullScreen","main","fullScreen","name","autoFocus","readOnly","maxHeight","textStyle","editorState","customStyleMap","state","createElement","className","editor","onKeyDown","ref","editors","onChange","onToggleFullScreen","headingsEnabled","setState","focus","_this$props$onInput","_this$props","inlineStyles","onInput","call","e","_this$props$onKeyDown","_this$props2","key","_this$editors$main","isBlurring","cancelAnimationFrame","blurFrameId","isFocused","triggerOnFocus","requestAnimationFrame","triggerOnBlur","_this$props$onFocus","_this$props3","onFocus","_this$props$onBlur","_this$props4","triggerOnChange","onBlur","getDerivedStateFromProps","componentWillUnmount","render","dataHook","border","status","root","tabIndex","renderEditor","nativeInput","defaultValue","screen","isOpen"],"sources":["../../../../../../../src/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { EditorState } from 'draft-js';\nimport { Modal } from '@wix/design-system';\n\nimport { richTextDataHook } from '../data-hooks';\nimport { RichEditor } from './rich-editor';\nimport { compositeDecorator } from './composite-decorator';\nimport type {\n  CustomStyleMap,\n  InlineStyles,\n  RichTextEditingOptions,\n} from './utils';\nimport { htmlToEditorState, editorStateToHTML } from './utils';\nimport type { RichTextStyleVariables } from './text-style';\nimport { combineClasses } from './utils/stylable-helper';\nimport { style, classes } from './rich-text-editor.st.css.js';\n\nexport type EditorName = 'main' | 'fullScreen';\n\nexport interface RichTextEditorProps {\n  value?: string;\n  onChange: (value?: string) => void;\n  onInput?: () => void;\n  readOnly?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  autoFocus?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent, isFullScreen: boolean) => void;\n  border?: 'standard' | 'none';\n  status?: 'error' | 'warning';\n  maxHeight?: number;\n  textStyle?: RichTextStyleVariables;\n  headingsEnabled?: boolean;\n  dataHook?: string;\n}\n\nexport interface RichTextEditorState {\n  value: string;\n  prevValue?: string;\n  isFullScreen: boolean;\n  editorState: EditorState;\n  customStyleMap: CustomStyleMap;\n  inlineStyles: InlineStyles;\n}\n\nexport class RichTextEditor extends React.Component<\n  RichTextEditorProps,\n  RichTextEditorState\n> {\n  public static defaultProps: Partial<RichTextEditorProps> = {\n    value: '',\n    border: 'standard',\n    headingsEnabled: true,\n  };\n\n  public static getDerivedStateFromProps(\n    props: RichTextEditorProps,\n    state: RichTextEditorState,\n  ) {\n    if (props.value !== state.prevValue) {\n      if (props.value !== state.value) {\n        return {\n          ...htmlToEditorState(props.value, compositeDecorator, {\n            headingsEnabled: props.headingsEnabled,\n          }),\n          prevValue: props.value,\n          value: props.value || '',\n        };\n      }\n      return {\n        prevValue: props.value,\n      };\n    }\n    return null;\n  }\n\n  public state: RichTextEditorState = {\n    ...htmlToEditorState(\n      this.props.value,\n      compositeDecorator,\n      this.editingOptions,\n    ),\n    value: this.props.value || '',\n    prevValue: this.props.value,\n    isFullScreen: false,\n  };\n\n  public editors: Record<EditorName, RichEditor | null> = {\n    main: null,\n    fullScreen: null,\n  };\n\n  private get editingOptions(): RichTextEditingOptions {\n    const { headingsEnabled } = this.props;\n    return { headingsEnabled };\n  }\n\n  private isFocused = false;\n\n  private isBlurring = false;\n\n  private blurFrameId = 0;\n\n  public componentWillUnmount() {\n    cancelAnimationFrame(this.blurFrameId);\n    this.isBlurring && this.triggerOnBlur();\n  }\n\n  public render() {\n    const { value, isFullScreen } = this.state;\n    const { dataHook, readOnly, border, status } = this.props;\n\n    return (\n      <div\n        data-hook={dataHook}\n        className={combineClasses(style, classes.root, { border, status })}\n        tabIndex={0}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        {this.renderEditor('main')}\n        <input\n          data-hook={`${richTextDataHook}.nativeInput`}\n          className={classes.nativeInput}\n          defaultValue={value}\n          readOnly={readOnly}\n          tabIndex={-1}\n        />\n        {isFullScreen && (\n          <Modal screen=\"desktop\" isOpen={isFullScreen}>\n            {this.renderEditor('fullScreen')}\n          </Modal>\n        )}\n      </div>\n    );\n  }\n\n  private renderEditor = (name: EditorName) => {\n    const { autoFocus, readOnly, maxHeight, textStyle } = this.props;\n    const { isFullScreen, editorState, customStyleMap } = this.state;\n\n    if (name === 'main' && isFullScreen) {\n      return null;\n    }\n\n    return (\n      <div\n        className={combineClasses(style, classes.editor, { isFullScreen })}\n        style={\n          name === 'main'\n            ? { maxHeight, ...textStyle }\n            : (textStyle as React.CSSProperties)\n        }\n        onKeyDown={this.onKeyDown}\n      >\n        <RichEditor\n          ref={(editor) => (this.editors[name] = editor)}\n          editorState={editorState}\n          customStyleMap={customStyleMap}\n          onChange={this.onChange}\n          onToggleFullScreen={this.onToggleFullScreen}\n          readOnly={readOnly}\n          isFullScreen={isFullScreen}\n          headingsEnabled={this.editingOptions.headingsEnabled}\n          autoFocus={name === 'fullScreen' || autoFocus}\n        />\n      </div>\n    );\n  };\n\n  private onToggleFullScreen = () => {\n    const { isFullScreen } = this.state;\n    this.setState({ isFullScreen: !isFullScreen });\n\n    if (isFullScreen && this.editors.main) {\n      this.editors.main.focus();\n    }\n  };\n\n  private onChange = (editorState: EditorState) => {\n    const { inlineStyles } = this.state;\n\n    const value = editorStateToHTML(\n      editorState,\n      inlineStyles,\n      this.editingOptions,\n    );\n\n    this.setState({ editorState, value });\n    value && this.props.onInput?.();\n  };\n\n  private triggerOnChange = () => {\n    const { value } = this.state;\n    const { onChange } = this.props;\n\n    if (value !== this.props.value) {\n      onChange(value);\n    }\n  };\n\n  private onKeyDown = (e: React.KeyboardEvent) => {\n    const { isFullScreen } = this.state;\n\n    switch (e.key) {\n      case 'Escape':\n        isFullScreen && this.onToggleFullScreen();\n        break;\n    }\n\n    this.props.onKeyDown?.(e, isFullScreen);\n  };\n\n  private onFocus = () => {\n    this.isBlurring = false;\n    cancelAnimationFrame(this.blurFrameId);\n\n    if (this.isFocused) {\n      return;\n    }\n\n    this.editors.main?.focus();\n    this.triggerOnFocus();\n  };\n\n  private onBlur = () => {\n    this.isBlurring = true;\n    cancelAnimationFrame(this.blurFrameId);\n    this.blurFrameId = requestAnimationFrame(this.triggerOnBlur);\n  };\n\n  private triggerOnFocus = () => {\n    this.isFocused = true;\n    this.props.onFocus?.();\n  };\n\n  private triggerOnBlur = () => {\n    this.isFocused = false;\n    this.triggerOnChange();\n    !this.state.isFullScreen && this.props.onBlur?.();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css

@@ -0,0 +1,100 @@
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-red-100);
+@property st-global(--wds-color-red-300);
+@property st-global(--wds-color-yellow-100);
+@property st-global(--wds-color-yellow-300);
+@property st-global(--wds-color-black-700);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wds-border-radius-300);
+
+/* Cannot import Editor from rich-editor.st.css - causes Stylable build error
+:import {
+    -st-from: "./rich-editor.st.css";
+    -st-default: Editor;
+}
+*/
+
+.root {
+    -st-states:
+        border(enum(standard, none)),
+        status(enum(error, warning));
+
+    width: 100%;
+    box-sizing: border-box;
+    outline: 0;
+    overflow: hidden;
+    border-radius: var(--wds-border-radius-300);
+}
+
+.root:border(none) {
+    border: none;
+}
+.root:border(standard) {
+    border: 1px solid var(--wds-color-blue-300);
+}
+.root:border(standard):focus,
+.root:border(standard):focus-within {
+    border: 1px solid var(--wds-color-blue-100);
+    box-shadow: var(--wds-input-shadow-focus-standard);
+}
+
+.root:border(standard):status(error) {
+    border: 1px solid var(--wds-color-red-100);
+}
+.root:border(standard):status(error):focus,
+.root:border(standard):status(error):focus-within {
+    border: 1px solid var(--wds-color-red-100);
+    box-shadow: 0 0 0 3px var(--wds-color-red-300);
+}
+
+.root:border(standard):status(warning) {
+    border: 1px solid var(--wds-color-yellow-100);
+}
+.root:border(standard):status(warning):focus,
+.root:border(standard):status(warning):focus-within {
+    border: 1px solid var(--wds-color-yellow-100);
+    box-shadow: 0 0 0 3px var(--wds-color-yellow-300);
+}
+
+.nativeInput {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: 0;
+    height: 0;
+}
+
+.editor {
+    -st-states: isFullScreen;
+    height: auto;
+    line-height: auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 234px;
+    overflow: hidden;
+    box-sizing: border-box;
+    flex-direction: row;
+    border-radius: var(--wds-border-radius-300);
+}
+.editor:isFullScreen {
+    max-width: 782px;
+    min-width: 582px;
+    background: var(--wds-color-black-700);
+}
+/* Cannot use Editor import - causes Stylable build error
+.editor:isFullScreen Editor::editor {
+    width: 582px;
+    align-self: center;
+}
+*/
+.editor:not(:isFullScreen) {
+    max-height: 80vh;
+}
+.editor > div {
+    flex: 1;
+    max-width: 100%;
+}

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js

@@ -0,0 +1,30 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+var _namespace_ = "richtexteditor1695151545";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "richtexteditor1695151545__root",
+  "nativeInput": "richtexteditor1695151545__nativeInput",
+  "editor": "richtexteditor1695151545__editor"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {
+  "wds-color-blue-100": "--wds-color-blue-100",
+  "wds-color-blue-300": "--wds-color-blue-300",
+  "wds-color-red-100": "--wds-color-red-100",
+  "wds-color-red-300": "--wds-color-red-300",
+  "wds-color-yellow-100": "--wds-color-yellow-100",
+  "wds-color-yellow-300": "--wds-color-yellow-300",
+  "wds-color-black-700": "--wds-color-black-700",
+  "wds-input-shadow-focus-standard": "--wds-input-shadow-focus-standard",
+  "wds-border-radius-300": "--wds-border-radius-300"
+};
+//# sourceMappingURL=rich-text-editor.st.css.js.map

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../src/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"richtexteditor1695151545\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"richtexteditor1695151545__root\",\"nativeInput\":\"richtexteditor1695151545__nativeInput\",\"editor\":\"richtexteditor1695151545__editor\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-color-red-100\":\"--wds-color-red-100\",\"wds-color-red-300\":\"--wds-color-red-300\",\"wds-color-yellow-100\":\"--wds-color-yellow-100\",\"wds-color-yellow-300\":\"--wds-color-yellow-300\",\"wds-color-black-700\":\"--wds-color-black-700\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wds-border-radius-300\":\"--wds-border-radius-300\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,wCAAwC;AAItF,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,aAAa,EAAC,uCAAuC;EAAC,QAAQ,EAAC;AAAkC,CAAC;AAChK,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,uBAAuB,EAAC;AAAyB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/text-style.js

@@ -0,0 +1,2 @@
+export const buildVariableName = (blockType, property) => `--rt-${blockType}-${property}`;
+//# sourceMappingURL=text-style.js.map

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/text-style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buildVariableName","blockType","property"],"sources":["../../../../../../../src/cms-fields/components/rich-text/rich-text-input/rich-text-editor/text-style.ts"],"sourcesContent":["export type BlockType =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p1'\n  | 'unstyled'\n  | 'p3';\n\nexport type TextStyleProperty =\n  | 'fontSize'\n  | 'fontStyle'\n  | 'fontWeight'\n  | 'fontFamily'\n  | 'lineHeight';\n\ntype TextStyleVariable<\n  T extends BlockType,\n  P extends TextStyleProperty,\n> = `--rt-${T}-${P}`;\n\nexport const buildVariableName = <\n  T extends BlockType,\n  P extends TextStyleProperty,\n>(\n  blockType: T,\n  property: P,\n): TextStyleVariable<T, P> => `--rt-${blockType}-${property}`;\n\nexport type RichTextStyleVariable = TextStyleVariable<\n  BlockType,\n  TextStyleProperty\n>;\n\nexport type RichTextStyleVariables = Partial<\n  Record<RichTextStyleVariable, string | number>\n>;\n"],"mappings":"AAuBA,OAAO,MAAMA,iBAAiB,GAAGA,CAI/BC,SAAY,EACZC,QAAW,KACiB,QAAQD,SAAS,IAAIC,QAAQ,EAAE","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/toolbar/align-dropdown.js

@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react';
+import { DropdownBase, ToggleButton } from '@wix/design-system';
+import { TextAlignLeft as TextAlignLeftIcon, TextAlignCenter as TextAlignCenterIcon, TextAlignRight as TextAlignRightIcon, TextJustify as TextJustifyIcon } from '@wix/wix-ui-icons-common';
+import { preventEvent } from '../../../../../utils';
+import { useTranslations } from '../../../../../hooks';
+import { richTextToolbarDataHook } from '../../data-hooks';
+import { classes } from './toolbar.st.css.js';
+const getIconProps = alignment => ({
+  'data-hook': `${richTextToolbarDataHook}.dropdownOption.${alignment}`,
+  style: {
+    display: 'flex'
+  }
+});
+const dropdownOptions = [{
+  id: 'left',
+  value: /*#__PURE__*/React.createElement(TextAlignLeftIcon, getIconProps('left'))
+}, {
+  id: 'center',
+  value: /*#__PURE__*/React.createElement(TextAlignCenterIcon, getIconProps('center'))
+}, {
+  id: 'right',
+  value: /*#__PURE__*/React.createElement(TextAlignRightIcon, getIconProps('right'))
+}, {
+  id: 'justify',
+  value: /*#__PURE__*/React.createElement(TextJustifyIcon, getIconProps('justify'))
+}];
+export const AlignDropdown = _ref => {
+  let {
+    value,
+    onChange,
+    isRTL
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const onSelect = useCallback(option => onChange(String(option.id)), [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.item,
+    onMouseDown: preventEvent
+  }, /*#__PURE__*/React.createElement(DropdownBase, {
+    dataHook: `${richTextToolbarDataHook}.dropdown.align`,
+    options: dropdownOptions,
+    onSelect: onSelect,
+    selectedId: value || (!isRTL ? 'left' : 'right'),
+    appendTo: "window",
+    zIndex: 10000,
+    dynamicWidth: true
+  }, _ref2 => {
+    let {
+      isOpen,
+      toggle,
+      selectedOption
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ToggleButton, {
+      dataHook: `${richTextToolbarDataHook}.button.align`,
+      skin: "inverted",
+      onClick: toggle,
+      selected: isOpen,
+      labelValue: t('CMS.richTextEditor.toolbar.button.tooltip.align')
+    }, selectedOption == null ? void 0 : selectedOption.value);
+  }));
+};
+//# sourceMappingURL=align-dropdown.js.map

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/toolbar/align-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","DropdownBase","ToggleButton","TextAlignLeft","TextAlignLeftIcon","TextAlignCenter","TextAlignCenterIcon","TextAlignRight","TextAlignRightIcon","TextJustify","TextJustifyIcon","preventEvent","useTranslations","richTextToolbarDataHook","classes","getIconProps","alignment","style","display","dropdownOptions","id","value","createElement","AlignDropdown","_ref","onChange","isRTL","t","onSelect","option","String","className","item","onMouseDown","dataHook","options","selectedId","appendTo","zIndex","dynamicWidth","_ref2","isOpen","toggle","selectedOption","skin","onClick","selected","labelValue"],"sources":["../../../../../../../../src/cms-fields/components/rich-text/rich-text-input/rich-text-editor/toolbar/align-dropdown.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport type { DropdownLayoutValueOption } from '@wix/design-system';\nimport { DropdownBase, ToggleButton } from '@wix/design-system';\nimport {\n  TextAlignLeft as TextAlignLeftIcon,\n  TextAlignCenter as TextAlignCenterIcon,\n  TextAlignRight as TextAlignRightIcon,\n  TextJustify as TextJustifyIcon,\n} from '@wix/wix-ui-icons-common';\n\nimport { preventEvent } from '../../../../../utils';\nimport { useTranslations } from '../../../../../hooks';\n\nimport { richTextToolbarDataHook } from '../../data-hooks';\nimport { classes } from './toolbar.st.css.js';\n\nexport interface AlignDropdownProps {\n  value?: string;\n  onChange: (value: string) => void;\n  isRTL: boolean;\n}\n\nconst getIconProps = (alignment: string) => ({\n  'data-hook': `${richTextToolbarDataHook}.dropdownOption.${alignment}`,\n  style: { display: 'flex' },\n});\n\nconst dropdownOptions: DropdownLayoutValueOption[] = [\n  {\n    id: 'left',\n    value: <TextAlignLeftIcon {...getIconProps('left')} />,\n  },\n  {\n    id: 'center',\n    value: <TextAlignCenterIcon {...getIconProps('center')} />,\n  },\n  {\n    id: 'right',\n    value: <TextAlignRightIcon {...getIconProps('right')} />,\n  },\n  {\n    id: 'justify',\n    value: <TextJustifyIcon {...getIconProps('justify')} />,\n  },\n];\n\nexport const AlignDropdown: React.FC<AlignDropdownProps> = ({\n  value,\n  onChange,\n  isRTL,\n}) => {\n  const { t } = useTranslations();\n\n  const onSelect = useCallback(\n    (option: DropdownLayoutValueOption) => onChange(String(option.id)),\n    [onChange],\n  );\n\n  return (\n    <div className={classes.item} onMouseDown={preventEvent}>\n      <DropdownBase\n        dataHook={`${richTextToolbarDataHook}.dropdown.align`}\n        options={dropdownOptions}\n        onSelect={onSelect}\n        selectedId={value || (!isRTL ? 'left' : 'right')}\n        appendTo=\"window\"\n        zIndex={10000}\n        dynamicWidth\n      >\n        {({ isOpen, toggle, selectedOption }) => (\n          <ToggleButton\n            dataHook={`${richTextToolbarDataHook}.button.align`}\n            skin=\"inverted\"\n            onClick={toggle}\n            selected={isOpen}\n            labelValue={t('CMS.richTextEditor.toolbar.button.tooltip.align')}\n          >\n            {selectedOption?.value}\n          </ToggleButton>\n        )}\n      </DropdownBase>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAG1C,SAASC,YAAY,EAAEC,YAAY,QAAQ,oBAAoB;AAC/D,SACEC,aAAa,IAAIC,iBAAiB,EAClCC,eAAe,IAAIC,mBAAmB,EACtCC,cAAc,IAAIC,kBAAkB,EACpCC,WAAW,IAAIC,eAAe,QACzB,0BAA0B;AAEjC,SAASC,YAAY,QAAQ,sBAAsB;AACnD,SAASC,eAAe,QAAQ,sBAAsB;AAEtD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,OAAO,QAAQ,qBAAqB;AAQ7C,MAAMC,YAAY,GAAIC,SAAiB,KAAM;EAC3C,WAAW,EAAE,GAAGH,uBAAuB,mBAAmBG,SAAS,EAAE;EACrEC,KAAK,EAAE;IAAEC,OAAO,EAAE;EAAO;AAC3B,CAAC,CAAC;AAEF,MAAMC,eAA4C,GAAG,CACnD;EACEC,EAAE,EAAE,MAAM;EACVC,KAAK,eAAEtB,KAAA,CAAAuB,aAAA,CAAClB,iBAAiB,EAAKW,YAAY,CAAC,MAAM,CAAI;AACvD,CAAC,EACD;EACEK,EAAE,EAAE,QAAQ;EACZC,KAAK,eAAEtB,KAAA,CAAAuB,aAAA,CAAChB,mBAAmB,EAAKS,YAAY,CAAC,QAAQ,CAAI;AAC3D,CAAC,EACD;EACEK,EAAE,EAAE,OAAO;EACXC,KAAK,eAAEtB,KAAA,CAAAuB,aAAA,CAACd,kBAAkB,EAAKO,YAAY,CAAC,OAAO,CAAI;AACzD,CAAC,EACD;EACEK,EAAE,EAAE,SAAS;EACbC,KAAK,eAAEtB,KAAA,CAAAuB,aAAA,CAACZ,eAAe,EAAKK,YAAY,CAAC,SAAS,CAAI;AACxD,CAAC,CACF;AAED,OAAO,MAAMQ,aAA2C,GAAGC,IAAA,IAIrD;EAAA,IAJsD;IAC1DH,KAAK;IACLI,QAAQ;IACRC;EACF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG;EAAE,CAAC,GAAGf,eAAe,CAAC,CAAC;EAE/B,MAAMgB,QAAQ,GAAG5B,WAAW,CACzB6B,MAAiC,IAAKJ,QAAQ,CAACK,MAAM,CAACD,MAAM,CAACT,EAAE,CAAC,CAAC,EAClE,CAACK,QAAQ,CACX,CAAC;EAED,oBACE1B,KAAA,CAAAuB,aAAA;IAAKS,SAAS,EAAEjB,OAAO,CAACkB,IAAK;IAACC,WAAW,EAAEtB;EAAa,gBACtDZ,KAAA,CAAAuB,aAAA,CAACrB,YAAY;IACXiC,QAAQ,EAAE,GAAGrB,uBAAuB,iBAAkB;IACtDsB,OAAO,EAAEhB,eAAgB;IACzBS,QAAQ,EAAEA,QAAS;IACnBQ,UAAU,EAAEf,KAAK,KAAK,CAACK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IACjDW,QAAQ,EAAC,QAAQ;IACjBC,MAAM,EAAE,KAAM;IACdC,YAAY;EAAA,GAEXC,KAAA;IAAA,IAAC;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAe,CAAC,GAAAH,KAAA;IAAA,oBAClCzC,KAAA,CAAAuB,aAAA,CAACpB,YAAY;MACXgC,QAAQ,EAAE,GAAGrB,uBAAuB,eAAgB;MACpD+B,IAAI,EAAC,UAAU;MACfC,OAAO,EAAEH,MAAO;MAChBI,QAAQ,EAAEL,MAAO;MACjBM,UAAU,EAAEpB,CAAC,CAAC,iDAAiD;IAAE,GAEhEgB,cAAc,oBAAdA,cAAc,CAAEtB,KACL,CAAC;EAAA,CAEL,CACX,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-text/rich-text-input/rich-text-editor/toolbar/header-dropdown.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { Box, Text, Heading, DropdownBase, 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';
+import HeaderTwoIcon from './icons/rt-header-two.svg';
+import HeaderThreeIcon from './icons/rt-header-three.svg';
+import HeaderFourIcon from './icons/rt-header-four.svg';
+import HeaderFiveIcon from './icons/rt-header-five.svg';
+import HeaderSixIcon from './icons/rt-header-six.svg';
+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 { preventEvent } from '../../../../../utils';
+const HeaderDropdownItemContent = _ref => {
+  let {
+    titleKey,
+    subtitleKey,
+    selected,
+    className,
+    dataHook
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  return /*#__PURE__*/React.createElement("div", {
+    "data-hook": dataHook,
+    className: combineClasses(style, classes.dropdownItemContent, {
+      selected
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: combineClasses(style, classes.dropdownItemTitle, className),
+    ellipsis: true,
+    children: t(titleKey)
+  }), /*#__PURE__*/React.createElement(Heading, {
+    className: classes.dropdownItemSubtitle,
+    size: "extraTiny",
+    children: t(subtitleKey)
+  }));
+};
+const HeaderDropdownHelpSection = () => {
+  const {
+    t
+  } = useTranslations();
+  return /*#__PURE__*/React.createElement(Box, {
+    paddingTop: "SP2",
+    paddingBottom: "SP2",
+    paddingLeft: "SP4",
+    padding: "SP4",
+    backgroundColor: "Y40"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small"
+  }, t('CMS.richTextEditor.toolbar.headerDropdown.help.text'), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(LinkButton, {
+    inText: true,
+    href: t('CMS.richTextEditor.toolbar.headerDropdown.button.info.link')
+  }, t('CMS.richTextEditor.toolbar.headerDropdown.button.info'))));
+};
+const createDropdownOptions = () => [{
+  id: 'header-one',
+  value: props => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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 => /*#__PURE__*/React.createElement(HeaderDropdownItemContent, _extends({}, 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: /*#__PURE__*/React.createElement(HeaderDropdownHelpSection, null)
+}];
+const headerTypeIconMap = {
+  'header-one': /*#__PURE__*/React.createElement(HeaderOneIcon, null),
+  'header-two': /*#__PURE__*/React.createElement(HeaderTwoIcon, null),
+  'header-three': /*#__PURE__*/React.createElement(HeaderThreeIcon, null),
+  'header-four': /*#__PURE__*/React.createElement(HeaderFourIcon, null),
+  'header-five': /*#__PURE__*/React.createElement(HeaderFiveIcon, null),
+  'header-six': /*#__PURE__*/React.createElement(HeaderSixIcon, null),
+  'paragraph-one': /*#__PURE__*/React.createElement(ParagraphOneIcon, null),
+  unstyled: /*#__PURE__*/React.createElement(NormalTextIcon, null),
+  'paragraph-three': /*#__PURE__*/React.createElement(ParagraphThreeIcon, null)
+};
+export const HeaderDropdown = _ref2 => {
+  let {
+    value,
+    onChange
+  } = _ref2;
+  const {
+    t
+  } = useTranslations();
+  const dropdownOptions = React.useMemo(() => createDropdownOptions(), []);
+  const onSelect = useCallback(option => onChange(String(option.id)), [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.item,
+    onMouseDown: preventEvent
+  }, /*#__PURE__*/React.createElement(DropdownBase, {
+    dataHook: `${richTextToolbarDataHook}.dropdown.header`,
+    selectedId: value || 'unstyled',
+    onSelect: onSelect,
+    options: dropdownOptions,
+    placement: "bottom-start",
+    appendTo: "window",
+    zIndex: 10000,
+    maxHeight: 720,
+    dynamicWidth: true
+  }, _ref3 => {
+    let {
+      isOpen,
+      toggle,
+      selectedOption
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(ToggleButton, {
+      dataHook: `${richTextToolbarDataHook}.button.header`,
+      skin: "inverted",
+      onClick: toggle,
+      selected: isOpen,
+      labelValue: t('CMS.richTextEditor.toolbar.header')
+    }, headerTypeIconMap[(selectedOption == null ? void 0 : selectedOption.id) ?? 'unstyled']);
+  }));
+};
+//# sourceMappingURL=header-dropdown.js.map