@wix/auto-patterns 1.45.0 → 1.47.0

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

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RichTextEditor = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _dataHooks = require("../data-hooks");
+var _richEditor = require("./rich-editor");
+var _compositeDecorator = require("./composite-decorator");
+var _utils = require("./utils");
+var _stylableHelper = require("./utils/stylable-helper");
+var _richTextEditorStCss = require("./rich-text-editor.st.css.js");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.tsx";
+class RichTextEditor extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      ...(0, _utils.htmlToEditorState)(this.props.value, _compositeDecorator.compositeDecorator, this.editingOptions),
+      value: this.props.value || '',
+      prevValue: this.props.value,
+      isFullScreen: false
+    });
+    (0, _defineProperty2.default)(this, "editors", {
+      main: null,
+      fullScreen: null
+    });
+    (0, _defineProperty2.default)(this, "isFocused", false);
+    (0, _defineProperty2.default)(this, "isBlurring", false);
+    (0, _defineProperty2.default)(this, "blurFrameId", 0);
+    (0, _defineProperty2.default)(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.default.createElement("div", {
+        className: (0, _stylableHelper.combineClasses)(_richTextEditorStCss.style, _richTextEditorStCss.classes.editor, {
+          isFullScreen
+        }),
+        style: name === 'main' ? {
+          maxHeight,
+          ...textStyle
+        } : textStyle,
+        onKeyDown: this.onKeyDown,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 148,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/_react.default.createElement(_richEditor.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,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 157,
+          columnNumber: 9
+        }
+      }));
+    });
+    (0, _defineProperty2.default)(this, "onToggleFullScreen", () => {
+      const {
+        isFullScreen
+      } = this.state;
+      this.setState({
+        isFullScreen: !isFullScreen
+      });
+      if (isFullScreen && this.editors.main) {
+        this.editors.main.focus();
+      }
+    });
+    (0, _defineProperty2.default)(this, "onChange", editorState => {
+      var _this$props$onInput, _this$props;
+      const {
+        inlineStyles
+      } = this.state;
+      const value = (0, _utils.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));
+    });
+    (0, _defineProperty2.default)(this, "triggerOnChange", () => {
+      const {
+        value
+      } = this.state;
+      const {
+        onChange
+      } = this.props;
+      if (value !== this.props.value) {
+        onChange(value);
+      }
+    });
+    (0, _defineProperty2.default)(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);
+    });
+    (0, _defineProperty2.default)(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();
+    });
+    (0, _defineProperty2.default)(this, "onBlur", () => {
+      this.isBlurring = true;
+      cancelAnimationFrame(this.blurFrameId);
+      this.blurFrameId = requestAnimationFrame(this.triggerOnBlur);
+    });
+    (0, _defineProperty2.default)(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);
+    });
+    (0, _defineProperty2.default)(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 {
+          ...(0, _utils.htmlToEditorState)(props.value, _compositeDecorator.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.default.createElement("div", {
+      "data-hook": dataHook,
+      className: (0, _stylableHelper.combineClasses)(_richTextEditorStCss.style, _richTextEditorStCss.classes.root, {
+        border,
+        status
+      }),
+      tabIndex: 0,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 115,
+        columnNumber: 7
+      }
+    }, this.renderEditor('main'), /*#__PURE__*/_react.default.createElement("input", {
+      "data-hook": `${_dataHooks.richTextDataHook}.nativeInput`,
+      className: _richTextEditorStCss.classes.nativeInput,
+      defaultValue: value,
+      readOnly: readOnly,
+      tabIndex: -1,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 123,
+        columnNumber: 9
+      }
+    }), isFullScreen && /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
+      screen: "desktop",
+      isOpen: isFullScreen,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 131,
+        columnNumber: 11
+      }
+    }, this.renderEditor('fullScreen')));
+  }
+}
+exports.RichTextEditor = RichTextEditor;
+(0, _defineProperty2.default)(RichTextEditor, "defaultProps", {
+  value: '',
+  border: 'standard',
+  headingsEnabled: true
+});
+//# sourceMappingURL=rich-text-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_dataHooks","_richEditor","_compositeDecorator","_utils","_stylableHelper","_richTextEditorStCss","_jsxFileName","RichTextEditor","React","Component","constructor","args","_defineProperty2","default","htmlToEditorState","props","value","compositeDecorator","editingOptions","prevValue","isFullScreen","main","fullScreen","name","autoFocus","readOnly","maxHeight","textStyle","editorState","customStyleMap","state","createElement","className","combineClasses","style","classes","editor","onKeyDown","__self","__source","fileName","lineNumber","columnNumber","RichEditor","ref","editors","onChange","onToggleFullScreen","headingsEnabled","setState","focus","_this$props$onInput","_this$props","inlineStyles","editorStateToHTML","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","richTextDataHook","nativeInput","defaultValue","Modal","screen","isOpen","exports"],"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/cjs/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/cjs/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js

@@ -0,0 +1,34 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../../../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "richtexteditor1601751307";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "richtexteditor1601751307__root",
+  "nativeInput": "richtexteditor1601751307__nativeInput",
+  "editor": "richtexteditor1601751307__editor"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.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/cjs/cms-fields/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","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_ = \"richtexteditor1601751307\";\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\":\"richtexteditor1601751307__root\",\"nativeInput\":\"richtexteditor1601751307__nativeInput\",\"editor\":\"richtexteditor1601751307__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":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,aAAa,EAAC,uCAAuC;EAAC,QAAQ,EAAC;AAAkC,CAAC;AACzJ,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,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/cjs/cms-fields/components/rich-text/rich-text-input/rich-text-editor/text-style.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.buildVariableName = void 0;
+const buildVariableName = (blockType, property) => `--rt-${blockType}-${property}`;
+exports.buildVariableName = buildVariableName;
+//# sourceMappingURL=text-style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buildVariableName","blockType","property","exports"],"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":";;;;AAuBO,MAAMA,iBAAiB,GAAGA,CAI/BC,SAAY,EACZC,QAAW,KACiB,QAAQD,SAAS,IAAIC,QAAQ,EAAE;AAACC,OAAA,CAAAH,iBAAA,GAAAA,iBAAA","ignoreList":[]}

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AlignDropdown = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _utils = require("../../../../../utils");
+var _hooks = require("../../../../../hooks");
+var _dataHooks = require("../../data-hooks");
+var _toolbarStCss = require("./toolbar.st.css.js");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/rich-text/rich-text-input/rich-text-editor/toolbar/align-dropdown.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const getIconProps = alignment => ({
+  'data-hook': `${_dataHooks.richTextToolbarDataHook}.dropdownOption.${alignment}`,
+  style: {
+    display: 'flex'
+  }
+});
+const dropdownOptions = [{
+  id: 'left',
+  value: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TextAlignLeft, (0, _extends2.default)({}, getIconProps('left'), {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 32,
+      columnNumber: 12
+    }
+  }))
+}, {
+  id: 'center',
+  value: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TextAlignCenter, (0, _extends2.default)({}, getIconProps('center'), {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 12
+    }
+  }))
+}, {
+  id: 'right',
+  value: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TextAlignRight, (0, _extends2.default)({}, getIconProps('right'), {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 12
+    }
+  }))
+}, {
+  id: 'justify',
+  value: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TextJustify, (0, _extends2.default)({}, getIconProps('justify'), {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 44,
+      columnNumber: 12
+    }
+  }))
+}];
+const AlignDropdown = ({
+  value,
+  onChange,
+  isRTL
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const onSelect = (0, _react.useCallback)(option => onChange(String(option.id)), [onChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _toolbarStCss.classes.item,
+    onMouseDown: _utils.preventEvent,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 61,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.DropdownBase, {
+    dataHook: `${_dataHooks.richTextToolbarDataHook}.dropdown.align`,
+    options: dropdownOptions,
+    onSelect: onSelect,
+    selectedId: value || (!isRTL ? 'left' : 'right'),
+    appendTo: "window",
+    zIndex: 10000,
+    dynamicWidth: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 62,
+      columnNumber: 7
+    }
+  }, ({
+    isOpen,
+    toggle,
+    selectedOption
+  }) => /*#__PURE__*/_react.default.createElement(_designSystem.ToggleButton, {
+    dataHook: `${_dataHooks.richTextToolbarDataHook}.button.align`,
+    skin: "inverted",
+    onClick: toggle,
+    selected: isOpen,
+    labelValue: t('CMS.richTextEditor.toolbar.button.tooltip.align'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 11
+    }
+  }, selectedOption == null ? void 0 : selectedOption.value)));
+};
+exports.AlignDropdown = AlignDropdown;
+//# sourceMappingURL=align-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_wixUiIconsCommon","_utils","_hooks","_dataHooks","_toolbarStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","getIconProps","alignment","richTextToolbarDataHook","style","display","dropdownOptions","id","value","createElement","TextAlignLeft","_extends2","__self","__source","fileName","lineNumber","columnNumber","TextAlignCenter","TextAlignRight","TextJustify","AlignDropdown","onChange","isRTL","useTranslations","onSelect","useCallback","option","String","className","classes","item","onMouseDown","preventEvent","DropdownBase","dataHook","options","selectedId","appendTo","zIndex","dynamicWidth","isOpen","toggle","selectedOption","ToggleButton","skin","onClick","selected","labelValue","exports"],"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":"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","ignoreList":[]}