@webiny/lexical-editor-actions 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/LexicalEditorActions.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const LexicalEditorActions: () => JSX.Element;
+import React from "react";
+export declare const LexicalEditorActions: () => React.JSX.Element;

package/LexicalEditorActions.js

@@ -1,16 +1,12 @@
-"use strict";
+import { FontColorAction, TextAlignmentAction } from "@webiny/lexical-editor";
+import react from "react";
+import { LexicalColorPickerDropdown } from "./components/LexicalColorPickerDropdown.js";
+import { TextAlignmentDropdown } from "./components/TextAlignmentDropdown.js";
+const LexicalEditorActions = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FontColorAction.ColorPicker, {
+        element: /*#__PURE__*/ react.createElement(LexicalColorPickerDropdown, null)
+    }), /*#__PURE__*/ react.createElement(TextAlignmentAction.TextAlignmentDropDown, {
+        element: /*#__PURE__*/ react.createElement(TextAlignmentDropdown, null)
+    }));
+export { LexicalEditorActions };
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalEditorActions = void 0;
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _react = _interopRequireDefault(require("react"));
-var _LexicalColorPickerDropdown = require("./components/LexicalColorPickerDropdown");
-var LexicalEditorActions = function LexicalEditorActions() {
-  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
-    element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
-  }));
-};
-exports.LexicalEditorActions = LexicalEditorActions;
+//# sourceMappingURL=LexicalEditorActions.js.map

package/LexicalEditorActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalEditorActions"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { LexicalEditorConfig } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\n\nexport const LexicalEditorActions = () => {\n    return (\n        <LexicalEditorConfig>\n            <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n        </LexicalEditorConfig>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;EACtC,oBACI,6BAAC,kCAAmB,qBAChB,6BAAC,8BAAe,CAAC,WAAW;IAAC,OAAO,eAAE,6BAAC,sDAA0B;EAAI,EAAG,CACtD;AAE9B,CAAC;AAAC"}
+{"version":3,"file":"LexicalEditorActions.js","sources":["../src/LexicalEditorActions.tsx"],"sourcesContent":["import { TextAlignmentAction } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown.js\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\nimport { TextAlignmentDropdown } from \"~/components/TextAlignmentDropdown.js\";\n\n/*\n * Lexical editor configuration and components with global composition scope\n */\nexport const LexicalEditorActions = () => {\n    return (\n        <>\n            <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n            <TextAlignmentAction.TextAlignmentDropDown element={<TextAlignmentDropdown />} />\n        </>\n    );\n};\n"],"names":["LexicalEditorActions","FontColorAction","LexicalColorPickerDropdown","TextAlignmentAction","TextAlignmentDropdown"],"mappings":";;;;AASO,MAAMA,uBAAuB,IACzB,WAAP,GACI,wDACI,oBAACC,gBAAgB,WAAW;QAAC,uBAAS,oBAACC,4BAA0BA;sBACjE,oBAACC,oBAAoB,qBAAqB;QAAC,uBAAS,oBAACC,uBAAqBA"}

package/README.md

@@ -1,15 +1,11 @@
 # @webiny/lexical-editor-actions
-[![](https://img.shields.io/npm/dw/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor) 
-[![](https://img.shields.io/npm/v/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-## About
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-This package provides actions plugins for Lexical editor.
+---
 
-
-## Where is it used?
-
-Currently, this packaged is used in [@webiny/app-serverless-cms](../app-serverless-cms).
+_This README file is automatically generated during the publish process._

package/components/LexicalColorPicker/LexicalColorPicker.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 interface LexicalColorPickerProps {
     value: string;
-    onChange?: Function;
-    onChangeComplete: Function;
+    onChange?: (color: string) => void;
+    onChangeComplete: (color: string, name?: string) => void;
     handlerClassName?: string;
+    allowCustomColor?: boolean;
 }
-export declare const LexicalColorPicker: React.FC<LexicalColorPickerProps>;
+export declare const LexicalColorPicker: ({ value, onChange, onChangeComplete, allowCustomColor }: LexicalColorPickerProps) => React.JSX.Element;
 export {};

package/components/LexicalColorPicker/LexicalColorPicker.js

@@ -1,218 +1,123 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalColorPicker = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _emotion = require("emotion");
-var _usePageBuilder2 = require("@webiny/app-page-builder/hooks/usePageBuilder");
-var _usePageElements = require("@webiny/app-page-builder-elements/hooks/usePageElements");
-var _utils = require("@webiny/app-page-builder/utils");
-var _classnames2 = _interopRequireDefault(require("classnames"));
-var _reactColor = require("react-color");
-var _roundColor_lens24px = require("./round-color_lens-24px.svg");
-// Icons
-
-var ColorPickerStyle = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ewrv11k0",
-  label: "ColorPickerStyle"
-})({
-  position: "relative",
-  display: "flex",
-  flexWrap: "wrap",
-  justifyContent: "space-between",
-  width: 225,
-  padding: 0,
-  backgroundColor: "#fff"
-});
-var ColorBox = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ewrv11k1",
-  label: "ColorBox"
-})({
-  cursor: "pointer",
-  width: 50,
-  height: 40,
-  margin: 10,
-  borderRadius: 2
-});
-var Color = /*#__PURE__*/(0, _styled.default)("button", {
-  target: "ewrv11k2",
-  label: "Color"
-})({
-  cursor: "pointer",
-  width: 40,
-  height: 30,
-  border: "1px solid var(--mdc-theme-on-background)",
-  transition: "transform 0.2s, scale 0.2s",
-  display: "flex",
-  alignItems: "center",
-  "&::after": {
-    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: -1,
-    opacity: 0
-  },
-  "&:hover": {
-    transform: "scale(1.25)",
-    "&::after": {
-      opacity: 1
-    }
-  }
-});
-var transparent = /*#__PURE__*/(0, _emotion.css)({
-  backgroundSize: "10px 10px",
-  backgroundImage: "linear-gradient( 45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient(-45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient( 45deg, transparent 75%, #555 75%)," + "linear-gradient(-45deg, transparent 75%, #555 75%)"
-}, "label:transparent;");
-var iconPaletteStyle = /*#__PURE__*/(0, _emotion.css)({
-  height: 20,
-  width: "100%",
-  marginTop: 1,
-  color: "var(--mdc-theme-secondary)"
-}, "label:iconPaletteStyle;");
-var COLORS = {
-  lightGray: "hsla(0, 0%, 97%, 1)",
-  gray: "hsla(300, 2%, 92%, 1)",
-  darkGray: "hsla(0, 0%, 70%, 1)",
-  darkestGray: "hsla(0, 0%, 20%, 1)",
-  black: "hsla(208, 100%, 5%, 1)"
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { ChromePicker } from "react-color";
+import { Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "./round-color_lens-24px.js";
+import { useRichTextEditor } from "@webiny/lexical-editor";
+const RESET_COLOR = "inherit";
+const BG_FALLBACK = "var(--color-neutral-base)";
+const BORDER_FALLBACK = "var(--border-color-neutral-dimmed-darker)";
+const withColorFallback = (color, fallback)=>{
+    const trimmed = color.trim();
+    return /^var\(\s*--[^,()]+\)$/.test(trimmed) ? trimmed.replace(/\)$/, `, ${fallback})`) : trimmed;
+};
+const colorPickerClass = "flex flex-wrap gap-[6px] p-sm max-w-[132px] bg-neutral-base";
+const colorPickerExpandedClass = "flex flex-wrap gap-[6px] p-sm w-[257px] bg-neutral-base";
+const swatchClass = "flex items-center justify-center size-4 rounded-[2px] cursor-pointer transition-transform hover:scale-110 border-2 border-neutral-dimmed-darker";
+const iconPaletteClass = "size-4 text-neutral-strong";
+const noColorSwatchClass = `${swatchClass} bg-neutral-base relative overflow-hidden`;
+const noColorSwatchStyle = {
+    borderColor: "var(--border-color-neutral-muted)"
 };
-var styles = {
-  selectedColor: /*#__PURE__*/(0, _emotion.css)({
-    boxShadow: "0px 0px 0px 2px var(--mdc-theme-secondary)"
-  }, "label:selectedColor;"),
-  button: /*#__PURE__*/(0, _emotion.css)({
-    cursor: "pointer",
-    height: 30,
-    boxSizing: "border-box",
-    "&:hover:not(:disabled)": {
-      backgroundColor: COLORS.gray
-    },
-    "&:focus:not(:disabled)": {
-      outline: "none"
-    },
-    "&:disabled": {
-      opacity: 0.5,
-      cursor: "not-allowed"
-    },
-    "& svg": {
-      width: 16,
-      height: 16
-    }
-  }, "label:button;"),
-  color: /*#__PURE__*/(0, _emotion.css)({
-    width: "40px",
-    height: "100%"
-  }, "label:color;")
+const noColorLineStyle = {
+    background: "linear-gradient(45deg, transparent 44%, var(--border-color-neutral-muted) 44%, var(--border-color-neutral-muted) 56%, transparent 56%)"
 };
-var LexicalColorPicker = function LexicalColorPicker(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    onChangeComplete = _ref.onChangeComplete;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showPicker = _useState2[0],
-    setShowPicker = _useState2[1];
-  // Either a custom color or a color coming from the theme object.
-  var _useState3 = (0, _react.useState)(value || "#fff"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    actualSelectedColor = _useState4[0],
-    setActualSelectedColor = _useState4[1];
-  var themeColor = false;
-  var getColorValue = (0, _react.useCallback)(function (rgb) {
-    return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a, ")");
-  }, []);
-  var onColorChange = (0, _react.useCallback)(function (color, event) {
-    event.preventDefault();
-    // controls of the picker are updated as user moves the mouse
-    var customColor = getColorValue(color.rgb);
-    setActualSelectedColor(customColor);
-    if (typeof onChange === "function") {
-      onChange(customColor);
-    }
-  }, [onChange]);
-  var onColorChangeComplete = (0, _react.useCallback)(function (_ref2, event) {
-    var rgb = _ref2.rgb;
-    setActualSelectedColor(value);
-    onChangeComplete(getColorValue(rgb));
-    event.preventDefault();
-  }, [onChangeComplete]);
-  var togglePicker = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-    setShowPicker(!showPicker);
-  }, []);
-  var _usePageBuilder = (0, _usePageBuilder2.usePageBuilder)(),
-    theme = _usePageBuilder.theme;
-  var pageElements = (0, _usePageElements.usePageElements)();
-  var themeColors = {};
-  if (_utils.isLegacyRenderingEngine) {
-    var legacyTheme = theme;
-    themeColors = (legacyTheme === null || legacyTheme === void 0 ? void 0 : legacyTheme.colors) || {};
-  } else {
-    var _pageElements$theme, _pageElements$theme$s;
-    var colors = (_pageElements$theme = pageElements.theme) === null || _pageElements$theme === void 0 ? void 0 : (_pageElements$theme$s = _pageElements$theme.styles) === null || _pageElements$theme$s === void 0 ? void 0 : _pageElements$theme$s.colors;
-    if (colors) {
-      for (var key in colors) {
-        if (colors[key]) {
-          themeColors[key] = colors[key];
-        }
-      }
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(ColorPickerStyle, null, Object.keys(themeColors).map(function (key, index) {
-    var color = themeColors[key];
-    if (color === value || value === "transparent") {
-      themeColor = true;
-    }
-    return /*#__PURE__*/_react.default.createElement(ColorBox, {
-      key: index
-    }, /*#__PURE__*/_react.default.createElement(Color, {
-      className: key === value ? styles.selectedColor : "",
-      style: {
-        backgroundColor: color
-      },
-      onClick: function onClick() {
-        // With page elements implementation, we want to store the color key and
-        // then the actual color will be retrieved from the theme object.
-        var value = color;
-        var themeColorName;
-        if (!_utils.isLegacyRenderingEngine) {
-          var _pageElements$theme2, _pageElements$theme2$;
-          var _colors = (_pageElements$theme2 = pageElements.theme) === null || _pageElements$theme2 === void 0 ? void 0 : (_pageElements$theme2$ = _pageElements$theme2.styles) === null || _pageElements$theme2$ === void 0 ? void 0 : _pageElements$theme2$.colors;
-          themeColorName = key;
-          value = _colors[key];
-        }
-        onChangeComplete(value, themeColorName);
-      }
-    }));
-  }), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
-    className: (0, _classnames2.default)(transparent, (0, _defineProperty2.default)({}, styles.selectedColor, value === "transparent")),
-    onClick: function onClick() {
-      onChangeComplete("transparent");
-    }
-  })), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
-    className: value && !themeColor ? styles.selectedColor : "",
-    style: {
-      backgroundColor: themeColor ? "#fff" : value
-    },
-    onClick: togglePicker
-  }, /*#__PURE__*/_react.default.createElement(_roundColor_lens24px.ReactComponent, {
-    className: iconPaletteStyle
-  }))), showPicker && /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
-    color: actualSelectedColor,
-    onChange: onColorChange,
-    onChangeComplete: onColorChangeComplete
-  }));
+const chromePickerClass = "mx-auto mt-sm shadow-none!";
+const showPickerStyle = {
+    display: "block"
 };
-exports.LexicalColorPicker = LexicalColorPicker;
+const hidePickerStyle = {
+    display: "none"
+};
+const LexicalColorPicker = ({ value, onChange, onChangeComplete, allowCustomColor })=>{
+    const [showPicker, setShowPicker] = useState(false);
+    const [actualSelectedColor, setActualSelectedColor] = useState(value || "#fff");
+    const [isThemeColor, setIsThemeColor] = useState(false);
+    useEffect(()=>{
+        if (value) setActualSelectedColor(value);
+    }, [
+        value
+    ]);
+    const getColorValue = useCallback((rgb, alpha)=>`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`, []);
+    const onColorChange = useCallback((color, event)=>{
+        event.preventDefault();
+        const customColor = getColorValue(color.rgb, 0 === color.rgb.a ? 1 : color.rgb.a);
+        setActualSelectedColor(customColor);
+        if ("function" == typeof onChange) onChange(customColor);
+    }, [
+        onChange
+    ]);
+    const onColorChangeComplete = useCallback(({ rgb }, event)=>{
+        event.preventDefault();
+        const color = getColorValue(rgb, 0 === rgb.a ? 1 : rgb.a);
+        setActualSelectedColor(color);
+        onChangeComplete(color);
+    }, [
+        onChangeComplete
+    ]);
+    const togglePicker = useCallback((e)=>{
+        e.stopPropagation();
+        setShowPicker((state)=>!state);
+    }, []);
+    const { theme } = useRichTextEditor();
+    const themeColors = useMemo(()=>theme?.colors ?? [], []);
+    useEffect(()=>{
+        const isThemeColor = themeColors.some((color)=>color.value === value);
+        setIsThemeColor(isThemeColor);
+    }, [
+        themeColors,
+        value
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: showPicker ? colorPickerExpandedClass : colorPickerClass
+    }, themeColors.map((color)=>/*#__PURE__*/ react.createElement(Tooltip, {
+            key: color.id,
+            content: /*#__PURE__*/ react.createElement("span", null, color.label),
+            side: "bottom",
+            trigger: /*#__PURE__*/ react.createElement("button", {
+                className: swatchClass,
+                style: {
+                    backgroundColor: withColorFallback(color.value, BG_FALLBACK),
+                    borderColor: withColorFallback(color.value, BORDER_FALLBACK)
+                },
+                onClick: ()=>{
+                    onChangeComplete(color.value, color.id);
+                }
+            })
+        })), allowCustomColor ? /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement("span", null, "Color picker"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement("button", {
+            className: swatchClass,
+            style: {
+                backgroundColor: isThemeColor ? "#fff" : value,
+                borderColor: "var(--border-color-neutral-dimmed-darker)"
+            },
+            onClick: togglePicker
+        }, /*#__PURE__*/ react.createElement(ReactComponent, {
+            className: iconPaletteClass
+        }))
+    }) : null, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement("span", null, "No color"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement("button", {
+            className: noColorSwatchClass,
+            style: noColorSwatchStyle,
+            onClick: ()=>onChangeComplete(RESET_COLOR)
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "absolute inset-0",
+            style: noColorLineStyle
+        }))
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "w-full",
+        style: showPicker ? showPickerStyle : hidePickerStyle
+    }, /*#__PURE__*/ react.createElement(ChromePicker, {
+        className: chromePickerClass,
+        color: actualSelectedColor,
+        disableAlpha: true,
+        onChange: onColorChange,
+        onChangeComplete: onColorChangeComplete
+    })));
+};
+export { LexicalColorPicker };
+
+//# sourceMappingURL=LexicalColorPicker.js.map

package/components/LexicalColorPicker/LexicalColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["ColorPickerStyle","styled","position","display","flexWrap","justifyContent","width","padding","backgroundColor","ColorBox","cursor","height","margin","borderRadius","Color","border","transition","alignItems","boxShadow","content","top","left","zIndex","opacity","transform","transparent","css","backgroundSize","backgroundImage","iconPaletteStyle","marginTop","color","COLORS","lightGray","gray","darkGray","darkestGray","black","styles","selectedColor","button","boxSizing","outline","LexicalColorPicker","value","onChange","onChangeComplete","useState","showPicker","setShowPicker","actualSelectedColor","setActualSelectedColor","themeColor","getColorValue","useCallback","rgb","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","togglePicker","e","stopPropagation","usePageBuilder","theme","pageElements","usePageElements","themeColors","isLegacyRenderingEngine","legacyTheme","colors","key","Object","keys","map","index","themeColorName","classnames"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { usePageBuilder } from \"@webiny/app-page-builder/hooks/usePageBuilder\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements/hooks/usePageElements\";\nimport { PbTheme } from \"@webiny/app-page-builder/types\";\nimport { isLegacyRenderingEngine } from \"@webiny/app-page-builder/utils\";\nimport classnames from \"classnames\";\nimport { ChromePicker } from \"react-color\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\n\nconst ColorPickerStyle = styled(\"div\")({\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"space-between\",\n    width: 225,\n    padding: 0,\n    backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n    cursor: \"pointer\",\n    width: 50,\n    height: 40,\n    margin: 10,\n    borderRadius: 2\n});\n\nconst Color = styled(\"button\")({\n    cursor: \"pointer\",\n    width: 40,\n    height: 30,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    transition: \"transform 0.2s, scale 0.2s\",\n    display: \"flex\",\n    alignItems: \"center\",\n    \"&::after\": {\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        transform: \"scale(1.25)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    }\n});\n\nconst transparent = css({\n    backgroundSize: \"10px 10px\",\n    backgroundImage:\n        \"linear-gradient( 45deg, #555 25%, transparent 25%, transparent),\" +\n        \"linear-gradient(-45deg, #555 25%, transparent 25%, transparent),\" +\n        \"linear-gradient( 45deg, transparent 75%, #555 75%),\" +\n        \"linear-gradient(-45deg, transparent 75%, #555 75%)\"\n});\n\nconst iconPaletteStyle = css({\n    height: 20,\n    width: \"100%\",\n    marginTop: 1,\n    color: \"var(--mdc-theme-secondary)\"\n});\n\nconst COLORS = {\n    lightGray: \"hsla(0, 0%, 97%, 1)\",\n    gray: \"hsla(300, 2%, 92%, 1)\",\n    darkGray: \"hsla(0, 0%, 70%, 1)\",\n    darkestGray: \"hsla(0, 0%, 20%, 1)\",\n    black: \"hsla(208, 100%, 5%, 1)\"\n};\n\nconst styles = {\n    selectedColor: css({\n        boxShadow: \"0px 0px 0px 2px var(--mdc-theme-secondary)\"\n    }),\n    button: css({\n        cursor: \"pointer\",\n        height: 30,\n        boxSizing: \"border-box\",\n        \"&:hover:not(:disabled)\": { backgroundColor: COLORS.gray },\n        \"&:focus:not(:disabled)\": {\n            outline: \"none\"\n        },\n        \"&:disabled\": {\n            opacity: 0.5,\n            cursor: \"not-allowed\"\n        },\n        \"& svg\": {\n            width: 16,\n            height: 16\n        }\n    }),\n    color: css({\n        width: \"40px\",\n        height: \"100%\"\n    })\n};\n\ninterface LexicalColorPickerProps {\n    value: string;\n    onChange?: Function;\n    onChangeComplete: Function;\n    handlerClassName?: string;\n}\n\nexport const LexicalColorPicker: React.FC<LexicalColorPickerProps> = ({\n    value,\n    onChange,\n    onChangeComplete\n}) => {\n    const [showPicker, setShowPicker] = useState(false);\n    // Either a custom color or a color coming from the theme object.\n    const [actualSelectedColor, setActualSelectedColor] = useState(value || \"#fff\");\n    let themeColor = false;\n\n    const getColorValue = useCallback(rgb => {\n        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;\n    }, []);\n\n    const onColorChange = useCallback(\n        (color, event) => {\n            event.preventDefault();\n            // controls of the picker are updated as user moves the mouse\n            const customColor = getColorValue(color.rgb);\n            setActualSelectedColor(customColor);\n            if (typeof onChange === \"function\") {\n                onChange(customColor);\n            }\n        },\n        [onChange]\n    );\n\n    const onColorChangeComplete = useCallback(\n        ({ rgb }, event) => {\n            setActualSelectedColor(value);\n            onChangeComplete(getColorValue(rgb));\n            event.preventDefault();\n        },\n        [onChangeComplete]\n    );\n\n    const togglePicker = useCallback(e => {\n        e.stopPropagation();\n        setShowPicker(!showPicker);\n    }, []);\n\n    const { theme } = usePageBuilder();\n\n    const pageElements = usePageElements();\n\n    let themeColors: Record<string, any> = {};\n\n    if (isLegacyRenderingEngine) {\n        const legacyTheme = theme as PbTheme;\n        themeColors = legacyTheme?.colors || {};\n    } else {\n        const colors = pageElements.theme?.styles?.colors;\n        if (colors) {\n            for (const key in colors) {\n                if (colors[key]) {\n                    themeColors[key] = colors[key];\n                }\n            }\n        }\n    }\n\n    return (\n        <ColorPickerStyle>\n            {Object.keys(themeColors).map((key, index) => {\n                const color = themeColors[key];\n\n                if (color === value || value === \"transparent\") {\n                    themeColor = true;\n                }\n                return (\n                    <ColorBox key={index}>\n                        <Color\n                            className={key === value ? styles.selectedColor : \"\"}\n                            style={{ backgroundColor: color }}\n                            onClick={() => {\n                                // With page elements implementation, we want to store the color key and\n                                // then the actual color will be retrieved from the theme object.\n                                let value = color;\n                                let themeColorName;\n                                if (!isLegacyRenderingEngine) {\n                                    const colors = pageElements.theme?.styles?.colors;\n                                    themeColorName = key;\n                                    value = colors[key];\n                                }\n\n                                onChangeComplete(value, themeColorName);\n                            }}\n                        />\n                    </ColorBox>\n                );\n            })}\n\n            <ColorBox>\n                <Color\n                    className={classnames(transparent, {\n                        [styles.selectedColor]: value === \"transparent\"\n                    })}\n                    onClick={() => {\n                        onChangeComplete(\"transparent\");\n                    }}\n                />\n            </ColorBox>\n\n            <ColorBox>\n                <Color\n                    className={value && !themeColor ? styles.selectedColor : \"\"}\n                    style={{ backgroundColor: themeColor ? \"#fff\" : value }}\n                    onClick={togglePicker}\n                >\n                    <IconPalette className={iconPaletteStyle} />\n                </Color>\n            </ColorBox>\n\n            {showPicker && (\n                <ChromePicker\n                    color={actualSelectedColor}\n                    onChange={onColorChange}\n                    onChangeComplete={onColorChangeComplete}\n                />\n            )}\n        </ColorPickerStyle>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"components/LexicalColorPicker/LexicalColorPicker.js","sources":["../../../src/components/LexicalColorPicker/LexicalColorPicker.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ColorResult, RGBColor } from \"react-color\";\nimport { ChromePicker } from \"react-color\";\nimport { Tooltip } from \"@webiny/admin-ui\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\nimport { useRichTextEditor } from \"@webiny/lexical-editor\";\n\n// Applied to reset the font color back to the theme/inherited default.\nconst RESET_COLOR = \"inherit\";\n\n// Some theme colors are bare CSS vars (e.g. `var(--wa-theme-color3)`) that may be undefined,\n// which renders black. Inject a fallback so an undefined color renders as a white swatch with\n// a gray border (bg falls back to white, border to gray) instead.\nconst BG_FALLBACK = \"var(--color-neutral-base)\";\nconst BORDER_FALLBACK = \"var(--border-color-neutral-dimmed-darker)\";\nconst withColorFallback = (color: string, fallback: string): string => {\n    const trimmed = color.trim();\n    return /^var\\(\\s*--[^,()]+\\)$/.test(trimmed)\n        ? trimmed.replace(/\\)$/, `, ${fallback})`)\n        : trimmed;\n};\n\n// Color menu (Figma Webiny DS): square 16px swatches, 2px radius, 6px gap, 8px padding.\n// max-w keeps ~5 swatches per row and lets it wrap for larger palettes.\nconst colorPickerClass = \"flex flex-wrap gap-[6px] p-sm max-w-[132px] bg-neutral-base\";\n// When the custom ChromePicker is open (allowCustomColors), the compact max-w would clip the\n// picker (the dropdown has overflow:hidden), so widen to fit the picker's natural ~225px width.\nconst colorPickerExpandedClass = \"flex flex-wrap gap-[6px] p-sm w-[257px] bg-neutral-base\";\n\nconst swatchClass =\n    \"flex items-center justify-center size-4 rounded-[2px] cursor-pointer transition-transform hover:scale-110 \" +\n    // 2px border (Figma DS) so light/white swatches stay visible.\n    \"border-2 border-neutral-dimmed-darker\";\n\nconst iconPaletteClass = \"size-4 text-neutral-strong\";\n\n// \"No color\" swatch: bordered square with a diagonal line, resets the font color.\nconst noColorSwatchClass = `${swatchClass} bg-neutral-base relative overflow-hidden`;\n// No-color border is neutral-muted (Figma), applied inline to win over swatchClass's color.\nconst noColorSwatchStyle: React.CSSProperties = {\n    borderColor: \"var(--border-color-neutral-muted)\"\n};\nconst noColorLineStyle: React.CSSProperties = {\n    background:\n        \"linear-gradient(45deg, transparent 44%, var(--border-color-neutral-muted) 44%, var(--border-color-neutral-muted) 56%, transparent 56%)\"\n};\n\n// Natural width, centered on its own full-width row below the swatches, with a top gap.\nconst chromePickerClass = \"mx-auto mt-sm shadow-none!\";\n\ninterface LexicalColorPickerProps {\n    value: string;\n    onChange?: (color: string) => void;\n    onChangeComplete: (color: string, name?: string) => void;\n    handlerClassName?: string;\n    allowCustomColor?: boolean;\n}\n\nconst showPickerStyle = { display: \"block\" };\nconst hidePickerStyle = { display: \"none\" };\n\nexport const LexicalColorPicker = ({\n    value,\n    onChange,\n    onChangeComplete,\n    allowCustomColor\n}: LexicalColorPickerProps) => {\n    const [showPicker, setShowPicker] = useState(false);\n    // Either a custom color or a color coming from the theme object.\n    const [actualSelectedColor, setActualSelectedColor] = useState(value || \"#fff\");\n    const [isThemeColor, setIsThemeColor] = useState(false);\n\n    useEffect(() => {\n        if (value) {\n            setActualSelectedColor(value);\n        }\n    }, [value]);\n\n    const getColorValue = useCallback((rgb: RGBColor, alpha?: number) => {\n        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`;\n    }, []);\n\n    const onColorChange = useCallback(\n        (color: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            // controls of the picker are updated as user moves the mouse\n            const customColor = getColorValue(color.rgb, color.rgb.a === 0 ? 1 : color.rgb.a);\n            setActualSelectedColor(customColor);\n            if (typeof onChange === \"function\") {\n                onChange(customColor);\n            }\n        },\n        [onChange]\n    );\n\n    const onColorChangeComplete = useCallback(\n        ({ rgb }: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            const color = getColorValue(rgb, rgb.a === 0 ? 1 : rgb.a);\n            setActualSelectedColor(color);\n            onChangeComplete(color);\n        },\n        [onChangeComplete]\n    );\n\n    const togglePicker = useCallback((e: SyntheticEvent) => {\n        e.stopPropagation();\n        setShowPicker(state => !state);\n    }, []);\n\n    const { theme } = useRichTextEditor();\n\n    const themeColors = useMemo(() => theme?.colors ?? [], []);\n\n    useEffect(() => {\n        const isThemeColor = themeColors.some(color => color.value === value);\n        setIsThemeColor(isThemeColor);\n    }, [themeColors, value]);\n\n    return (\n        <div className={showPicker ? colorPickerExpandedClass : colorPickerClass}>\n            {themeColors.map(color => {\n                return (\n                    <Tooltip\n                        key={color.id}\n                        content={<span>{color.label}</span>}\n                        side=\"bottom\"\n                        trigger={\n                            <button\n                                className={swatchClass}\n                                // Border matches the color so there's no gray ring on\n                                // colored swatches; the gray border only shows for light/white.\n                                style={{\n                                    backgroundColor: withColorFallback(color.value, BG_FALLBACK),\n                                    borderColor: withColorFallback(color.value, BORDER_FALLBACK)\n                                }}\n                                onClick={() => {\n                                    onChangeComplete(color.value, color.id);\n                                }}\n                            />\n                        }\n                    />\n                );\n            })}\n\n            {allowCustomColor ? (\n                <Tooltip\n                    content={<span>Color picker</span>}\n                    side=\"bottom\"\n                    trigger={\n                        <button\n                            className={swatchClass}\n                            style={{\n                                backgroundColor: isThemeColor ? \"#fff\" : value,\n                                borderColor: \"var(--border-color-neutral-dimmed-darker)\"\n                            }}\n                            onClick={togglePicker}\n                        >\n                            <IconPalette className={iconPaletteClass} />\n                        </button>\n                    }\n                />\n            ) : null}\n\n            <Tooltip\n                content={<span>No color</span>}\n                side=\"bottom\"\n                trigger={\n                    <button\n                        className={noColorSwatchClass}\n                        style={noColorSwatchStyle}\n                        onClick={() => onChangeComplete(RESET_COLOR)}\n                    >\n                        <span className={\"absolute inset-0\"} style={noColorLineStyle} />\n                    </button>\n                }\n            />\n\n            <div className={\"w-full\"} style={showPicker ? showPickerStyle : hidePickerStyle}>\n                <ChromePicker\n                    className={chromePickerClass}\n                    color={actualSelectedColor}\n                    disableAlpha={true}\n                    onChange={onColorChange}\n                    onChangeComplete={onColorChangeComplete}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["RESET_COLOR","BG_FALLBACK","BORDER_FALLBACK","withColorFallback","color","fallback","trimmed","colorPickerClass","colorPickerExpandedClass","swatchClass","iconPaletteClass","noColorSwatchClass","noColorSwatchStyle","noColorLineStyle","chromePickerClass","showPickerStyle","hidePickerStyle","LexicalColorPicker","value","onChange","onChangeComplete","allowCustomColor","showPicker","setShowPicker","useState","actualSelectedColor","setActualSelectedColor","isThemeColor","setIsThemeColor","useEffect","getColorValue","useCallback","rgb","alpha","onColorChange","event","customColor","onColorChangeComplete","togglePicker","e","state","theme","useRichTextEditor","themeColors","useMemo","Tooltip","IconPalette","ChromePicker"],"mappings":"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"}

package/components/LexicalColorPicker/round-color_lens-24px.js

@@ -0,0 +1,21 @@
+import __rslib_svgr_url__0__ from "../../static/svg/round-color_lens-24px.a38ca7dc.svg";
+import * as __rspack_external_react from "react";
+const SvgRoundColorLens24Px = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlSpace: "preserve",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "currentColor",
+        d: "M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8m-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12m3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8m5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8m3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
+    }));
+const round_color_lens_24px = __rslib_svgr_url__0__;
+export default round_color_lens_24px;
+export { SvgRoundColorLens24Px as ReactComponent };
+
+//# sourceMappingURL=round-color_lens-24px.js.map

package/components/LexicalColorPicker/round-color_lens-24px.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalColorPicker/round-color_lens-24px.js","sources":["../../../src/components/LexicalColorPicker/round-color_lens-24px.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgRoundColorLens24Px = props => <svg xmlns=\"http://www.w3.org/2000/svg\" xmlSpace=\"preserve\" width={24} height={24} viewBox=\"0 0 24 24\" {...props}><path fill=\"none\" d=\"M0 0h24v24H0z\" /><path fill=\"currentColor\" d=\"M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8m-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12m3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8m5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8m3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5\" /></svg>;\nexport { SvgRoundColorLens24Px as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/round-color_lens-24px.a38ca7dc.svg\";"],"names":["SvgRoundColorLens24Px","props"],"mappings":";;AACA,MAAMA,wBAAwBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,UAAS;QAAW,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAGA,KAAK;qBAAE,sCAAC;QAAK,MAAK;QAAO,GAAE;sBAAkB,sCAAC;QAAK,MAAK;QAAe,GAAE;;AAE3N"}

package/components/LexicalColorPicker/unselected.js

@@ -0,0 +1,48 @@
+import __rslib_svgr_url__0__ from "../../static/svg/unselected.2e11574c.svg";
+import * as __rspack_external_react from "react";
+const SvgUnselected = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 22,
+        height: 20,
+        fill: "none",
+        viewBox: "0 0 22 20",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("rect", {
+        width: 20.864,
+        height: 18.546,
+        x: 0.5,
+        y: 0.89,
+        fill: "#fff",
+        stroke: "#DDD",
+        rx: 1
+    }), /*#__PURE__*/ __rspack_external_react.createElement("mask", {
+        id: "unselected_svg__a",
+        width: 22,
+        height: 20,
+        x: 0,
+        y: 0,
+        maskUnits: "userSpaceOnUse",
+        style: {
+            maskType: "alpha"
+        }
+    }, /*#__PURE__*/ __rspack_external_react.createElement("rect", {
+        width: 20.864,
+        height: 18.546,
+        x: 0.5,
+        y: 0.89,
+        fill: "#fff",
+        stroke: "#fff",
+        rx: 1
+    })), /*#__PURE__*/ __rspack_external_react.createElement("g", {
+        mask: "url(#unselected_svg__a)"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        stroke: "#BF0000",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "m21 1.412-20 17"
+    })));
+const unselected = __rslib_svgr_url__0__;
+export default unselected;
+export { SvgUnselected as ReactComponent };
+
+//# sourceMappingURL=unselected.js.map

package/components/LexicalColorPicker/unselected.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalColorPicker/unselected.js","sources":["../../../src/components/LexicalColorPicker/unselected.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgUnselected = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={22} height={20} fill=\"none\" viewBox=\"0 0 22 20\" {...props}><rect width={20.864} height={18.546} x={0.5} y={0.89} fill=\"#fff\" stroke=\"#DDD\" rx={1} /><mask id=\"unselected_svg__a\" width={22} height={20} x={0} y={0} maskUnits=\"userSpaceOnUse\" style={{\n    maskType: \"alpha\"\n  }}><rect width={20.864} height={18.546} x={0.5} y={0.89} fill=\"#fff\" stroke=\"#fff\" rx={1} /></mask><g mask=\"url(#unselected_svg__a)\"><path stroke=\"#BF0000\" strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"m21 1.412-20 17\" /></g></svg>;\nexport { SvgUnselected as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/unselected.2e11574c.svg\";"],"names":["SvgUnselected","props"],"mappings":";;AACA,MAAMA,gBAAgBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,MAAK;QAAO,SAAQ;QAAa,GAAGA,KAAK;qBAAE,sCAAC;QAAK,OAAO;QAAQ,QAAQ;QAAQ,GAAG;QAAK,GAAG;QAAM,MAAK;QAAO,QAAO;QAAO,IAAI;sBAAK,sCAAC;QAAK,IAAG;QAAoB,OAAO;QAAI,QAAQ;QAAI,GAAG;QAAG,GAAG;QAAG,WAAU;QAAiB,OAAO;YAChU,UAAU;QACZ;qBAAG,sCAAC;QAAK,OAAO;QAAQ,QAAQ;QAAQ,GAAG;QAAK,GAAG;QAAM,MAAK;QAAO,QAAO;QAAO,IAAI;uBAAY,sCAAC;QAAE,MAAK;qBAA0B,sCAAC;QAAK,QAAO;QAAU,eAAc;QAAQ,gBAAe;QAAQ,GAAE;;AAE7M"}

package/components/LexicalColorPicker/unselected.svg

@@ -1,7 +1,7 @@
 <svg width="22" height="20" viewBox="0 0 22 20" fill="none"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="#DDDDDD"/>
-    <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="20" style="{ mask-type:alpha; }">
+    <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="20" style="mask-type:alpha">
         <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="white"/>
     </mask>
     <g mask="url(#mask0)">

package/components/LexicalColorPickerDropdown.d.ts

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare const LexicalColorPickerDropdown: () => JSX.Element;
+import React from "react";
+export interface LexicalColorPickerDropdownProps {
+    allowCustomColor?: boolean;
+}
+export declare const LexicalColorPickerDropdown: ({ allowCustomColor }: LexicalColorPickerDropdownProps) => React.JSX.Element;

package/components/LexicalColorPickerDropdown.js

@@ -1,27 +1,28 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalColorPickerDropdown = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _LexicalColorPicker = require("./LexicalColorPicker/LexicalColorPicker");
-var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
-  var _useFontColorPicker = (0, _lexicalEditor.useFontColorPicker)(),
-    value = _useFontColorPicker.value,
-    applyColor = _useFontColorPicker.applyColor;
-  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
-    buttonClassName: "toolbar-item color-picker",
-    buttonAriaLabel: "Formatting options for font size",
-    buttonIconClassName: "icon font-color",
-    stopCloseOnClickSelf: true,
-    disabled: false,
-    showScroll: false
-  }, /*#__PURE__*/_react.default.createElement(_LexicalColorPicker.LexicalColorPicker, {
-    value: value,
-    onChangeComplete: applyColor
-  }));
+import react from "react";
+import { DropDown, useFontColorPicker, useRichTextEditor } from "@webiny/lexical-editor";
+import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
+import { ReactComponent } from "@webiny/icons/format_color_text.svg";
+const LexicalColorPickerDropdown = ({ allowCustomColor })=>{
+    const { value, applyColor } = useFontColorPicker();
+    const { theme } = useRichTextEditor();
+    return /*#__PURE__*/ react.createElement(DropDown, {
+        buttonClassName: "toolbar-item color-picker",
+        buttonAriaLabel: "Formatting options for text color",
+        buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
+            className: "icon",
+            style: value ? {
+                fill: value
+            } : void 0
+        }),
+        stopCloseOnClickSelf: true,
+        disabled: false,
+        showScroll: false
+    }, /*#__PURE__*/ react.createElement(LexicalColorPicker, {
+        value: value,
+        onChangeComplete: applyColor,
+        allowCustomColor: allowCustomColor ?? theme.allowCustomColors
+    }));
 };
-exports.LexicalColorPickerDropdown = LexicalColorPickerDropdown;
+export { LexicalColorPickerDropdown };
+
+//# sourceMappingURL=LexicalColorPickerDropdown.js.map

package/components/LexicalColorPickerDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalColorPickerDropdown","useFontColorPicker","value","applyColor"],"sources":["LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker\";\n\nexport const LexicalColorPickerDropdown = () => {\n    const { value, applyColor } = useFontColorPicker();\n\n    return (\n        <DropDown\n            buttonClassName=\"toolbar-item color-picker\"\n            buttonAriaLabel={\"Formatting options for font size\"}\n            buttonIconClassName=\"icon font-color\"\n            stopCloseOnClickSelf={true}\n            disabled={false}\n            showScroll={false}\n        >\n            <LexicalColorPicker value={value} onChangeComplete={applyColor} />\n        </DropDown>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEO,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0B,GAAS;EAC5C,0BAA8B,IAAAC,iCAAkB,GAAE;IAA1CC,KAAK,uBAALA,KAAK;IAAEC,UAAU,uBAAVA,UAAU;EAEzB,oBACI,6BAAC,uBAAQ;IACL,eAAe,EAAC,2BAA2B;IAC3C,eAAe,EAAE,kCAAmC;IACpD,mBAAmB,EAAC,iBAAiB;IACrC,oBAAoB,EAAE,IAAK;IAC3B,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAE;EAAM,gBAElB,6BAAC,sCAAkB;IAAC,KAAK,EAAED,KAAM;IAAC,gBAAgB,EAAEC;EAAW,EAAG,CAC3D;AAEnB,CAAC;AAAC"}
+{"version":3,"file":"components/LexicalColorPickerDropdown.js","sources":["../../src/components/LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, useRichTextEditor, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker.js\";\nimport { ReactComponent as FontColorIcon } from \"@webiny/icons/format_color_text.svg\";\n\nexport interface LexicalColorPickerDropdownProps {\n    allowCustomColor?: boolean;\n}\n\nexport const LexicalColorPickerDropdown = ({\n    allowCustomColor\n}: LexicalColorPickerDropdownProps) => {\n    const { value, applyColor } = useFontColorPicker();\n    const { theme } = useRichTextEditor();\n\n    return (\n        <DropDown\n            buttonClassName=\"toolbar-item color-picker\"\n            buttonAriaLabel={\"Formatting options for text color\"}\n            buttonIcon={\n                // Tint the A icon with the current font color.\n                <FontColorIcon className=\"icon\" style={value ? { fill: value } : undefined} />\n            }\n            stopCloseOnClickSelf={true}\n            disabled={false}\n            showScroll={false}\n        >\n            <LexicalColorPicker\n                value={value}\n                onChangeComplete={applyColor}\n                allowCustomColor={allowCustomColor ?? theme.allowCustomColors}\n            />\n        </DropDown>\n    );\n};\n"],"names":["LexicalColorPickerDropdown","allowCustomColor","value","applyColor","useFontColorPicker","theme","useRichTextEditor","DropDown","FontColorIcon","undefined","LexicalColorPicker"],"mappings":";;;;AASO,MAAMA,6BAA6B,CAAC,EACvCC,gBAAgB,EACc;IAC9B,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,OAAO,WAAP,GACI,oBAACC,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,Y,cAEI,oBAACC,gBAAaA;YAAC,WAAU;YAAO,OAAON,QAAQ;gBAAE,MAAMA;YAAM,IAAIO;;QAErE,sBAAsB;QACtB,UAAU;QACV,YAAY;qBAEZ,oBAACC,oBAAkBA;QACf,OAAOR;QACP,kBAAkBC;QAClB,kBAAkBF,oBAAoBI,MAAM,iBAAiB;;AAI7E"}

package/components/TextAlignmentDropdown.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TextAlignmentDropdown: () => React.JSX.Element;

package/components/TextAlignmentDropdown.js

@@ -0,0 +1,90 @@
+import react from "react";
+import { $isParentElementRTL } from "@lexical/selection";
+import { Divider, DropDown, DropDownItem, useTextAlignmentAction } from "@webiny/lexical-editor";
+import { useDeriveValueFromSelection } from "@webiny/lexical-editor/hooks/useCurrentSelection.js";
+import { ReactComponent } from "@webiny/icons/format_align_left.svg";
+import { ReactComponent as format_align_center_svg_ReactComponent } from "@webiny/icons/format_align_center.svg";
+import { ReactComponent as format_align_right_svg_ReactComponent } from "@webiny/icons/format_align_right.svg";
+import { ReactComponent as format_align_justify_svg_ReactComponent } from "@webiny/icons/format_align_justify.svg";
+import { ReactComponent as format_indent_increase_svg_ReactComponent } from "@webiny/icons/format_indent_increase.svg";
+import { ReactComponent as format_indent_decrease_svg_ReactComponent } from "@webiny/icons/format_indent_decrease.svg";
+const TextAlignmentDropdown = ()=>{
+    const { applyTextAlignment, outdentText, indentText, value } = useTextAlignmentAction();
+    const isRTL = useDeriveValueFromSelection(({ rangeSelection })=>rangeSelection ? $isParentElementRTL(rangeSelection) : false);
+    const alignment = value || "left";
+    return /*#__PURE__*/ react.createElement(DropDown, {
+        buttonLabel: "Align",
+        buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
+            className: "icon"
+        }),
+        buttonClassName: "toolbar-item spaced alignment",
+        buttonAriaLabel: "Formatting options for text alignment"
+    }, /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            applyTextAlignment("left");
+        },
+        className: "item",
+        selected: "left" === alignment
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Left Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            applyTextAlignment("center");
+        },
+        className: "item",
+        selected: "center" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_center_svg_ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Center Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            applyTextAlignment("right");
+        },
+        className: "item",
+        selected: "right" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_right_svg_ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Right Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            applyTextAlignment("justify");
+        },
+        className: "item",
+        selected: "justify" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_justify_svg_ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Justify Align")), /*#__PURE__*/ react.createElement(Divider, null), /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            outdentText();
+        },
+        className: "item",
+        selected: false
+    }, isRTL ? /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
+        className: "icon"
+    }) : /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Outdent")), /*#__PURE__*/ react.createElement(DropDownItem, {
+        onClick: ()=>{
+            indentText();
+        },
+        className: "item",
+        selected: false
+    }, isRTL ? /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
+        className: "icon"
+    }) : /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
+        className: "icon"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text"
+    }, "Indent")));
+};
+export { TextAlignmentDropdown };
+
+//# sourceMappingURL=TextAlignmentDropdown.js.map

package/components/TextAlignmentDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TextAlignmentDropdown.js","sources":["../../src/components/TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isParentElementRTL } from \"@lexical/selection\";\nimport { Divider, DropDown, DropDownItem, useTextAlignmentAction } from \"@webiny/lexical-editor\";\nimport { useDeriveValueFromSelection } from \"@webiny/lexical-editor/hooks/useCurrentSelection.js\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ReactComponent as AlignJustifyIcon } from \"@webiny/icons/format_align_justify.svg\";\nimport { ReactComponent as IndentIcon } from \"@webiny/icons/format_indent_increase.svg\";\nimport { ReactComponent as OutdentIcon } from \"@webiny/icons/format_indent_decrease.svg\";\n\nexport const TextAlignmentDropdown = () => {\n    const { applyTextAlignment, outdentText, indentText, value } = useTextAlignmentAction();\n\n    const isRTL = useDeriveValueFromSelection(({ rangeSelection }) => {\n        return rangeSelection ? $isParentElementRTL(rangeSelection) : false;\n    });\n\n    // Empty format defaults to left alignment.\n    const alignment = value || \"left\";\n\n    return (\n        <DropDown\n            buttonLabel=\"Align\"\n            buttonIcon={<AlignLeftIcon className=\"icon\" />}\n            buttonClassName=\"toolbar-item spaced alignment\"\n            buttonAriaLabel=\"Formatting options for text alignment\"\n        >\n            <DropDownItem\n                onClick={() => {\n                    applyTextAlignment(\"left\");\n                }}\n                className=\"item\"\n                selected={alignment === \"left\"}\n            >\n                <AlignLeftIcon className=\"icon\" />\n                <span className=\"text\">Left Align</span>\n            </DropDownItem>\n            <DropDownItem\n                onClick={() => {\n                    applyTextAlignment(\"center\");\n                }}\n                className=\"item\"\n                selected={alignment === \"center\"}\n            >\n                <AlignCenterIcon className=\"icon\" />\n                <span className=\"text\">Center Align</span>\n            </DropDownItem>\n            <DropDownItem\n                onClick={() => {\n                    applyTextAlignment(\"right\");\n                }}\n                className=\"item\"\n                selected={alignment === \"right\"}\n            >\n                <AlignRightIcon className=\"icon\" />\n                <span className=\"text\">Right Align</span>\n            </DropDownItem>\n            <DropDownItem\n                onClick={() => {\n                    applyTextAlignment(\"justify\");\n                }}\n                className=\"item\"\n                selected={alignment === \"justify\"}\n            >\n                <AlignJustifyIcon className=\"icon\" />\n                <span className=\"text\">Justify Align</span>\n            </DropDownItem>\n            <Divider />\n            <DropDownItem\n                onClick={() => {\n                    outdentText();\n                }}\n                className=\"item\"\n                selected={false}\n            >\n                {isRTL ? <IndentIcon className=\"icon\" /> : <OutdentIcon className=\"icon\" />}\n                <span className=\"text\">Outdent</span>\n            </DropDownItem>\n            <DropDownItem\n                onClick={() => {\n                    indentText();\n                }}\n                className=\"item\"\n                selected={false}\n            >\n                {isRTL ? <OutdentIcon className=\"icon\" /> : <IndentIcon className=\"icon\" />}\n                <span className=\"text\">Indent</span>\n            </DropDownItem>\n        </DropDown>\n    );\n};\n"],"names":["TextAlignmentDropdown","applyTextAlignment","outdentText","indentText","value","useTextAlignmentAction","isRTL","useDeriveValueFromSelection","rangeSelection","$isParentElementRTL","alignment","DropDown","AlignLeftIcon","DropDownItem","AlignCenterIcon","AlignRightIcon","AlignJustifyIcon","Divider","IndentIcon","OutdentIcon"],"mappings":";;;;;;;;;;AAWO,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGC;IAE/D,MAAMC,QAAQC,4BAA4B,CAAC,EAAEC,cAAc,EAAE,GAClDA,iBAAiBC,oBAAoBD,kBAAkB;IAIlE,MAAME,YAAYN,SAAS;IAE3B,OAAO,WAAP,GACI,oBAACO,UAAQA;QACL,aAAY;QACZ,0BAAY,oBAACC,gBAAaA;YAAC,WAAU;;QACrC,iBAAgB;QAChB,iBAAgB;qBAEhB,oBAACC,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,WAAdA;qBAEV,oBAACE,gBAAaA;QAAC,WAAU;sBACzB,oBAAC;QAAK,WAAU;OAAO,8BAE3B,oBAACC,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,aAAdA;qBAEV,oBAACI,wCAAeA;QAAC,WAAU;sBAC3B,oBAAC;QAAK,WAAU;OAAO,gCAE3B,oBAACD,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,YAAdA;qBAEV,oBAACK,uCAAcA;QAAC,WAAU;sBAC1B,oBAAC;QAAK,WAAU;OAAO,+BAE3B,oBAACF,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,cAAdA;qBAEV,oBAACM,yCAAgBA;QAAC,WAAU;sBAC5B,oBAAC;QAAK,WAAU;OAAO,iCAE3B,oBAACC,SAAOA,OAAAA,WAAAA,GACR,oBAACJ,cAAYA;QACT,SAAS;YACLX;QACJ;QACA,WAAU;QACV,UAAU;OAETI,QAAQ,WAARA,GAAQ,oBAACY,2CAAUA;QAAC,WAAU;uBAAY,oBAACC,2CAAWA;QAAC,WAAU;sBAClE,oBAAC;QAAK,WAAU;OAAO,2BAE3B,oBAACN,cAAYA;QACT,SAAS;YACLV;QACJ;QACA,WAAU;QACV,UAAU;OAETG,QAAQ,WAARA,GAAQ,oBAACa,2CAAWA;QAAC,WAAU;uBAAY,oBAACD,2CAAUA;QAAC,WAAU;sBAClE,oBAAC;QAAK,WAAU;OAAO;AAIvC"}

package/index.d.ts

@@ -1 +1 @@
-export { LexicalEditorActions } from "./LexicalEditorActions";
+export { LexicalEditorActions } from "./LexicalEditorActions.js";

package/index.js

@@ -1,12 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "LexicalEditorActions", {
-  enumerable: true,
-  get: function get() {
-    return _LexicalEditorActions.LexicalEditorActions;
-  }
-});
-var _LexicalEditorActions = require("./LexicalEditorActions");
+export { LexicalEditorActions } from "./LexicalEditorActions.js";

package/package.json

@@ -1,28 +1,28 @@
 {
 	"name": "@webiny/lexical-editor-actions",
-	"version": "0.0.0-unstable.496cf268ac",
+	"version": "0.0.0-unstable.5387e5f7c8",
+	"type": "module",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"dependencies": {
-		"@emotion/styled": "11.10.6",
-		"@webiny/app-page-builder": "0.0.0-unstable.496cf268ac",
-		"@webiny/app-page-builder-elements": "0.0.0-unstable.496cf268ac",
-		"@webiny/lexical-editor": "0.0.0-unstable.496cf268ac",
-		"classnames": "2.3.2",
-		"emotion": "10.0.27",
-		"react": "17.0.2",
+		"@lexical/selection": "0.49.0",
+		"@webiny/admin-ui": "0.0.0-unstable.5387e5f7c8",
+		"@webiny/icons": "0.0.0-unstable.5387e5f7c8",
+		"@webiny/lexical-editor": "0.0.0-unstable.5387e5f7c8",
+		"react": "18.3.1",
 		"react-color": "2.19.3",
-		"react-dom": "17.0.2"
+		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@webiny/cli": "^0.0.0-unstable.496cf268ac",
-		"@webiny/project-utils": "^0.0.0-unstable.496cf268ac"
+		"@types/react-color": "3.0.13",
+		"@webiny/build-tools": "0.0.0-unstable.5387e5f7c8"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
-	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+		"access": "public"
 	},
-	"gitHead": "496cf268acd5b092c860b62d75c7d765c9472043"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/static/svg/round-color_lens-24px.a38ca7dc.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<rect fill="none" width="24" height="24"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_7">
+	</g>
+	<path fill="currentColor" d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9c0.83,0,1.5-0.67,1.5-1.5c0-0.39-0.15-0.74-0.39-1.01c-0.23-0.26-0.38-0.61-0.38-0.99
+		c0-0.83,0.67-1.5,1.5-1.5H16c2.76,0,5-2.24,5-5C21,6.58,16.97,3,12,3z M6.5,12C5.67,12,5,11.33,5,10.5S5.67,9,6.5,9S8,9.67,8,10.5
+		S7.33,12,6.5,12z M9.5,8C8.67,8,8,7.33,8,6.5S8.67,5,9.5,5S11,5.67,11,6.5S10.33,8,9.5,8z M14.5,8C13.67,8,13,7.33,13,6.5
+		S13.67,5,14.5,5S16,5.67,16,6.5S15.33,8,14.5,8z M17.5,12c-0.83,0-1.5-0.67-1.5-1.5S16.67,9,17.5,9S19,9.67,19,10.5
+		S18.33,12,17.5,12z"/>
+</g>
+</svg>

package/static/svg/unselected.2e11574c.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="#DDDDDD"/>
+    <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="20" style="mask-type:alpha">
+        <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="white"/>
+    </mask>
+    <g mask="url(#mask0)">
+        <path d="M20.9999 1.41229L0.999878 18.4123" stroke="#BF0000" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+</svg>

package/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions\";\n"],"mappings":";;;;;;;;;;;AAAA"}