@webiny/lexical-editor 5.35.2 → 5.36.0-beta.0

package/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin.js

@@ -4,21 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WebinyQuotePlugin = WebinyQuotePlugin;
+exports.QuotePlugin = QuotePlugin;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _react = require("react");
-var _WebinyQuoteNode = require("../../nodes/WebinyQuoteNode");
-var _useWebinyQuote = require("../../hooks/useWebinyQuote");
-function WebinyQuotePlugin() {
+var _QuoteNode = require("../../nodes/QuoteNode");
+var _useQuote = require("../../hooks/useQuote");
+function QuotePlugin() {
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
   (0, _react.useEffect)(function () {
-    if (!editor.hasNodes([_WebinyQuoteNode.WebinyQuoteNode])) {
-      throw new Error("WebinyQuoteNodePlugin: WebinyQuoteNode is e not registered on editor");
+    if (!editor.hasNodes([_QuoteNode.QuoteNode])) {
+      throw new Error("QuoteNodePlugin: QuoteNode is e not registered on editor");
     }
   }, [editor]);
-  (0, _useWebinyQuote.useWebinyQuote)(editor);
+  (0, _useQuote.useQuote)(editor);
   return null;
 }

package/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["WebinyQuotePlugin","useLexicalComposerContext","editor","useEffect","hasNodes","WebinyQuoteNode","Error","useWebinyQuote"],"sources":["WebinyQuoteNodePlugin.ts"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useEffect } from \"react\";\nimport { WebinyQuoteNode } from \"~/nodes/WebinyQuoteNode\";\nimport { useWebinyQuote } from \"~/hooks/useWebinyQuote\";\n\nexport function WebinyQuotePlugin(): null {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(() => {\n        if (!editor.hasNodes([WebinyQuoteNode])) {\n            throw new Error(\"WebinyQuoteNodePlugin: WebinyQuoteNode is e not registered on editor\");\n        }\n    }, [editor]);\n\n    useWebinyQuote(editor);\n\n    return null;\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEO,SAASA,iBAAiB,GAAS;EACtC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACD,MAAM,CAACE,QAAQ,CAAC,CAACC,gCAAe,CAAC,CAAC,EAAE;MACrC,MAAM,IAAIC,KAAK,CAAC,sEAAsE,CAAC;IAC3F;EACJ,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,IAAAK,8BAAc,EAACL,MAAM,CAAC;EAEtB,OAAO,IAAI;AACf"}
+{"version":3,"names":["QuotePlugin","useLexicalComposerContext","editor","useEffect","hasNodes","QuoteNode","Error","useQuote"],"sources":["WebinyQuoteNodePlugin.ts"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useEffect } from \"react\";\nimport { QuoteNode } from \"~/nodes/QuoteNode\";\nimport { useQuote } from \"~/hooks/useQuote\";\n\nexport function QuotePlugin(): null {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(() => {\n        if (!editor.hasNodes([QuoteNode])) {\n            throw new Error(\"QuoteNodePlugin: QuoteNode is e not registered on editor\");\n        }\n    }, [editor]);\n\n    useQuote(editor);\n\n    return null;\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEO,SAASA,WAAW,GAAS;EAChC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACD,MAAM,CAACE,QAAQ,CAAC,CAACC,oBAAS,CAAC,CAAC,EAAE;MAC/B,MAAM,IAAIC,KAAK,CAAC,0DAA0D,CAAC;IAC/E;EACJ,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,IAAAK,kBAAQ,EAACL,MAAM,CAAC;EAEhB,OAAO,IAAI;AACf"}

package/themes/webinyLexicalTheme.css

@@ -4,6 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/**
+ * This are fallback styles for Webiny.
+ */
+
  .ContentEditable__root{
    font-size: inherit;
    line-height: 1.25;
@@ -34,25 +39,26 @@
 }
 .WebinyLexical__h1 {
   font-size: 24px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
+  font-weight: inherit;
+  margin: inherit;
 }
+
 .WebinyLexical__h2 {
   font-size: 15px;
-  color: rgb(101, 103, 107);
-  font-weight: 700;
-  margin: 0;
-  text-transform: uppercase;
+  font-weight: inherit;
+  margin: inherit;
 }
+
 .WebinyLexical__h3 {
   font-size: 12px;
-  margin: 0;
-  text-transform: uppercase;
+  font-weight: inherit;
+  margin: inherit;
 }
+
 .WebinyLexical__textBold {
   font-weight: bold;
 }
+
 .WebinyLexical__textItalic {
   font-style: italic;
 }
@@ -65,14 +71,17 @@
 .WebinyLexical__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
+
 .WebinyLexical__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
 }
+
 .WebinyLexical__textSuperscript {
   font-size: 0.8em;
   vertical-align: super;
 }
+
 .WebinyLexical__textCode {
   background-color: rgb(240, 242, 245);
   padding: 1px 0.25rem;

package/types.d.ts

@@ -25,6 +25,8 @@ export declare type ToolbarState = {
     list: NodeState;
     quote: NodeState;
     textType: LexicalTextType;
+    paragraph: NodeState;
+    heading: NodeState;
 };
 export declare type TextBlockSelection = {
     elementKey?: string;
@@ -47,9 +49,6 @@ export declare type TypographyValue = {
     tag: TypographyHTMLTag;
     name: string;
 };
-export interface WebinyThemeNode {
-    getStyleId: () => string;
-}
 export declare type ThemeEmotionMap = {
     [styleId: string]: {
         id: string;

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { ElementNode, LexicalNode, NodeSelection, RangeSelection, TextNode } from \"lexical\";\nimport { ListType } from \"@lexical/list\";\nimport { CSSObject } from \"@emotion/react\";\nexport type ToolbarType = \"heading\" | \"paragraph\" | string;\nexport type LexicalValue = string;\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type LexicalTextType =\n    | ListType\n    | \"paragraph\"\n    | \"heading\"\n    | \"quoteblock\"\n    | \"bullet\"\n    | \"number\"\n    | \"link\"\n    | undefined;\n\nexport type TextFormatting = {\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    // highlight: boolean #TODO implement with highlight action\n    code: boolean;\n};\n\nexport type NodeState = {\n    isSelected: boolean;\n};\n\nexport type ToolbarState = {\n    // text format\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    code: boolean;\n    // nodes selection state\n    link: NodeState;\n    typography: NodeState;\n    fontColor: NodeState;\n    list: NodeState;\n    quote: NodeState;\n    textType: LexicalTextType;\n};\n\n/*\n * Represent set of data from the current selection of the text and nodes selected by the user.\n * You can access this object through the @see useRichTextEditor context.\n */\nexport type TextBlockSelection = {\n    elementKey?: string;\n    selection: RangeSelection | NodeSelection | null;\n    element: LexicalNode;\n    parent: ElementNode | null;\n    node: ElementNode | TextNode;\n    anchorNode: ElementNode | TextNode;\n    isElementDom: boolean;\n    state: ToolbarState | undefined;\n};\n\n// Supported HTML tags by webiny lexical implementation\nexport type ListHtmlTag = \"ol\" | \"ul\";\nexport type HeadingHtmlTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type ParagraphHtmlTag = \"p\";\nexport type QuoteBlockHtmlTag = \"quoteblock\";\n\n// Typography\nexport type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;\n\nexport type TypographyValue = {\n    // CSSObject type\n    css: CSSObject;\n    id: string;\n    tag: TypographyHTMLTag;\n    // Display name\n    name: string;\n};\n\n/* Nodes */\nexport interface WebinyThemeNode {\n    /*\n     * Get theme style id\n     */\n    getStyleId: () => string;\n}\n\n/*\n * Contains IDs of the styles and Emotion generated classes.\n */\nexport type ThemeEmotionMap = {\n    [styleId: string]: {\n        id: string;\n        tag: TypographyHTMLTag;\n        name: string;\n        styles: Record<string, any>;\n        // emotion generated class\n        className: string;\n    };\n};\n"],"mappings":";;;;;;;;;;;AAKA"}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { ElementNode, LexicalNode, NodeSelection, RangeSelection, TextNode } from \"lexical\";\nimport { ListType } from \"@lexical/list\";\nimport { CSSObject } from \"@emotion/react\";\nexport type ToolbarType = \"heading\" | \"paragraph\" | string;\nexport type LexicalValue = string;\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type LexicalTextType =\n    | ListType\n    | \"paragraph\"\n    | \"heading\"\n    | \"quoteblock\"\n    | \"bullet\"\n    | \"number\"\n    | \"link\"\n    | undefined;\n\nexport type TextFormatting = {\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    // highlight: boolean #TODO implement with highlight action\n    code: boolean;\n};\n\nexport type NodeState = {\n    isSelected: boolean;\n};\n\nexport type ToolbarState = {\n    // text format\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    code: boolean;\n    // nodes selection state\n    link: NodeState;\n    typography: NodeState;\n    fontColor: NodeState;\n    list: NodeState;\n    quote: NodeState;\n    textType: LexicalTextType;\n    paragraph: NodeState;\n    heading: NodeState;\n};\n\n/*\n * Represent set of data from the current selection of the text and nodes selected by the user.\n * You can access this object through the @see useRichTextEditor context.\n */\nexport type TextBlockSelection = {\n    elementKey?: string;\n    selection: RangeSelection | NodeSelection | null;\n    element: LexicalNode;\n    parent: ElementNode | null;\n    node: ElementNode | TextNode;\n    anchorNode: ElementNode | TextNode;\n    isElementDom: boolean;\n    state: ToolbarState | undefined;\n};\n\n// Supported HTML tags by webiny lexical implementation\nexport type ListHtmlTag = \"ol\" | \"ul\";\nexport type HeadingHtmlTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type ParagraphHtmlTag = \"p\";\nexport type QuoteBlockHtmlTag = \"quoteblock\";\n\n// Typography\nexport type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;\n\nexport type TypographyValue = {\n    // CSSObject type\n    css: CSSObject;\n    id: string;\n    tag: TypographyHTMLTag;\n    // Display name\n    name: string;\n};\n\n/* Nodes */\n\n/*\n * Contains IDs of the styles and Emotion generated classes.\n */\nexport type ThemeEmotionMap = {\n    [styleId: string]: {\n        id: string;\n        tag: TypographyHTMLTag;\n        name: string;\n        styles: Record<string, any>;\n        // emotion generated class\n        className: string;\n    };\n};\n"],"mappings":";;;;;;;;;;;AAKA"}

package/ui/DropDown.js

@@ -39,7 +39,8 @@ function DropDownItem(_ref) {
     className: className,
     onClick: onClick,
     ref: ref,
-    title: title
+    title: title,
+    type: "button"
   }, children);
 }
 function DropDownItems(_ref2) {
@@ -105,7 +106,7 @@ function DropDownItems(_ref2) {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", {
     className: "lexical-dropdown ".concat(showScroll ? "" : "no-scroll"),
-    ref: dropDownRef !== null && dropDownRef !== void 0 ? dropDownRef : null,
+    ref: dropDownRef,
     onKeyDown: handleKeyDown
   }, children));
 }
@@ -120,12 +121,19 @@ function DropDown(_ref3) {
     stopCloseOnClickSelf = _ref3.stopCloseOnClickSelf,
     _ref3$showScroll = _ref3.showScroll,
     showScroll = _ref3$showScroll === void 0 ? true : _ref3$showScroll;
+  var dropDownRef = (0, React.useRef)(null);
   var buttonRef = (0, React.useRef)(null);
+  // Used to prevent flickering of the dropdown while calculating the dropdown position.
   var _useState5 = (0, React.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    showDropDown = _useState6[0],
-    setShowDropDown = _useState6[1];
+    positionIsCalculated = _useState6[0],
+    setPositionIsCalculated = _useState6[1];
+  var _useState7 = (0, React.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    showDropDown = _useState8[0],
+    setShowDropDown = _useState8[1];
   var handleClose = function handleClose() {
+    setPositionIsCalculated(false);
     setShowDropDown(false);
     if (buttonRef && buttonRef.current) {
       buttonRef.current.focus();
@@ -133,21 +141,44 @@ function DropDown(_ref3) {
   };
   (0, React.useEffect)(function () {
     var button = buttonRef.current;
-    if (button === null || !showDropDown) {
-      return;
+    var dropDown = dropDownRef.current;
+    if (showDropDown && button && dropDown) {
+      dropDown.style.top = "44px";
+      dropDown.style.left = "".concat(button.offsetLeft, "px");
+      setPositionIsCalculated(true);
     }
-    var handle = function handle(event) {
-      var target = event.target;
-      if (!button.contains(target)) {
-        setShowDropDown(false);
-      }
-    };
-    document.addEventListener("click", handle);
-    return function () {
-      document.removeEventListener("click", handle);
+  }, [dropDownRef, buttonRef, showDropDown]);
+  (0, React.useEffect)(function () {
+    var button = buttonRef.current;
+    if (button && showDropDown) {
+      var handle = function handle(event) {
+        var target = event.target;
+        if (stopCloseOnClickSelf) {
+          if (dropDownRef.current && dropDownRef.current.contains(target)) {
+            return;
+          }
+        }
+        if (!button.contains(target)) {
+          setShowDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+      return function () {
+        document.removeEventListener("click", handle);
+      };
+    }
+    return;
+  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+  var displayContainer = (0, React.useMemo)(function () {
+    // To prevent blinking, we show the container only when the dropdown position is calculated.
+    // Without this, window would be visible first on left (0px), and after a millisecond on the right side.
+    return positionIsCalculated ? {
+      display: "block"
+    } : {
+      display: "none"
     };
-  }, [buttonRef, showDropDown, stopCloseOnClickSelf]);
-  return /*#__PURE__*/React.createElement("button", {
+  }, [positionIsCalculated]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     style: {
       position: "relative"
     },
@@ -164,10 +195,12 @@ function DropDown(_ref3) {
     className: "text dropdown-button-text"
   }, buttonLabel), /*#__PURE__*/React.createElement("i", {
     className: "chevron-down"
-  }), showDropDown && /*#__PURE__*/React.createElement("div", {
-    className: "lexical-dropdown-container"
+  })), showDropDown && /*#__PURE__*/React.createElement("div", {
+    className: "lexical-dropdown-container",
+    style: displayContainer
   }, /*#__PURE__*/React.createElement(DropDownItems, {
     showScroll: showScroll,
+    dropDownRef: dropDownRef,
     onClose: handleClose
   }, children)));
 }

package/ui/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["DropDownContext","React","createContext","DropDownItem","children","className","onClick","title","ref","useRef","dropDownContext","useContext","Error","registerItem","useEffect","current","DropDownItems","dropDownRef","showScroll","onClose","useState","items","setItems","highlightedItem","setHighlightedItem","useCallback","itemRef","prev","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","useMemo","focus","DropDown","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","handle","target","contains","document","addEventListener","removeEventListener","position"],"sources":["DropDown.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (ref && ref.current) {\n            registerItem(ref);\n        }\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title}>\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef ?? null}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button === null || !showDropDown) {\n            return;\n        }\n\n        const handle = (event: MouseEvent) => {\n            const target = event.target;\n            if (!button.contains(target as Node)) {\n                setShowDropDown(false);\n            }\n        };\n        document.addEventListener(\"click\", handle);\n\n        return () => {\n            document.removeEventListener(\"click\", handle);\n        };\n    }, [buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    return (\n        <button\n            style={{ position: \"relative\" }}\n            disabled={disabled}\n            aria-label={buttonAriaLabel || buttonLabel}\n            className={buttonClassName}\n            onClick={() => setShowDropDown(!showDropDown)}\n            ref={buttonRef}\n        >\n            {buttonIconClassName && <span className={buttonIconClassName} />}\n            {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n            <i className=\"chevron-down\" />\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"}>\n                    <DropDownItems showScroll={showScroll} onClose={handleClose}>\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </button>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["DropDownContext","React","createContext","DropDownItem","children","className","onClick","title","ref","useRef","dropDownContext","useContext","Error","registerItem","useEffect","current","DropDownItems","dropDownRef","showScroll","onClose","useState","items","setItems","highlightedItem","setHighlightedItem","useCallback","itemRef","prev","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","useMemo","focus","DropDown","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","positionIsCalculated","setPositionIsCalculated","showDropDown","setShowDropDown","handleClose","button","dropDown","style","top","left","offsetLeft","handle","target","contains","document","addEventListener","removeEventListener","displayContainer","display","position"],"sources":["DropDown.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (ref && ref.current) {\n            registerItem(ref);\n        }\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title} type=\"button\">\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const dropDownRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    // Used to prevent flickering of the dropdown while calculating the dropdown position.\n    const [positionIsCalculated, setPositionIsCalculated] = useState(false);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setPositionIsCalculated(false);\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        const dropDown = dropDownRef.current;\n\n        if (showDropDown && button && dropDown) {\n            dropDown.style.top = \"44px\";\n            dropDown.style.left = `${button.offsetLeft}px`;\n            setPositionIsCalculated(true);\n        }\n    }, [dropDownRef, buttonRef, showDropDown]);\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button && showDropDown) {\n            const handle = (event: MouseEvent) => {\n                const target = event.target;\n                if (stopCloseOnClickSelf) {\n                    if (dropDownRef.current && dropDownRef.current.contains(target as Node)) {\n                        return;\n                    }\n                }\n\n                if (!button.contains(target as Node)) {\n                    setShowDropDown(false);\n                }\n            };\n            document.addEventListener(\"click\", handle);\n            return () => {\n                document.removeEventListener(\"click\", handle);\n            };\n        }\n        return;\n    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    const displayContainer = useMemo(() => {\n        // To prevent blinking, we show the container only when the dropdown position is calculated.\n        // Without this, window would be visible first on left (0px), and after a millisecond on the right side.\n        return positionIsCalculated ? { display: \"block\" } : { display: \"none\" };\n    }, [positionIsCalculated]);\n\n    return (\n        <>\n            <button\n                style={{ position: \"relative\" }}\n                disabled={disabled}\n                aria-label={buttonAriaLabel || buttonLabel}\n                className={buttonClassName}\n                onClick={() => setShowDropDown(!showDropDown)}\n                ref={buttonRef}\n            >\n                {buttonIconClassName && <span className={buttonIconClassName} />}\n                {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n                <i className=\"chevron-down\" />\n            </button>\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"} style={displayContainer}>\n                    <DropDownItems\n                        showScroll={showScroll}\n                        dropDownRef={dropDownRef}\n                        onClose={handleClose}\n                    >\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </>\n    );\n}\n"],"mappings":"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"}

package/utils/findTypographyStyleByHtmlTag.d.ts

@@ -0,0 +1,8 @@
+import { ThemeEmotionMap } from "../types";
+export declare const findTypographyStyleByHtmlTag: (htmlTag: string, themeEmotionMap: ThemeEmotionMap) => {
+    id: string;
+    tag: import("../types").TypographyHTMLTag;
+    name: string;
+    styles: Record<string, any>;
+    className: string;
+} | undefined;

package/utils/findTypographyStyleByHtmlTag.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findTypographyStyleByHtmlTag = void 0;
+var findTypographyStyleByHtmlTag = function findTypographyStyleByHtmlTag(htmlTag, themeEmotionMap) {
+  for (var styleId in themeEmotionMap) {
+    var style = themeEmotionMap[styleId];
+    if (style.tag === htmlTag) {
+      return style;
+    }
+  }
+  return undefined;
+};
+exports.findTypographyStyleByHtmlTag = findTypographyStyleByHtmlTag;

package/utils/findTypographyStyleByHtmlTag.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["findTypographyStyleByHtmlTag","htmlTag","themeEmotionMap","styleId","style","tag","undefined"],"sources":["findTypographyStyleByHtmlTag.ts"],"sourcesContent":["import { ThemeEmotionMap } from \"~/types\";\n\nexport const findTypographyStyleByHtmlTag = (htmlTag: string, themeEmotionMap: ThemeEmotionMap) => {\n    for (const styleId in themeEmotionMap) {\n        const style = themeEmotionMap[styleId];\n        if (style.tag === htmlTag) {\n            return style;\n        }\n    }\n    return undefined;\n};\n"],"mappings":";;;;;;AAEO,IAAMA,4BAA4B,GAAG,SAA/BA,4BAA4B,CAAIC,OAAe,EAAEC,eAAgC,EAAK;EAC/F,KAAK,IAAMC,OAAO,IAAID,eAAe,EAAE;IACnC,IAAME,KAAK,GAAGF,eAAe,CAACC,OAAO,CAAC;IACtC,IAAIC,KAAK,CAACC,GAAG,KAAKJ,OAAO,EAAE;MACvB,OAAOG,KAAK;IAChB;EACJ;EACA,OAAOE,SAAS;AACpB,CAAC;AAAC"}

package/utils/generateInitialLexicalValue.js

@@ -15,7 +15,8 @@ var generateInitialLexicalValue = function generateInitialLexicalValue() {
         direction: null,
         format: "",
         indent: 0,
-        type: "paragraph",
+        styles: [],
+        type: "base-paragraph-node",
         version: 1
       }],
       direction: null,

package/utils/generateInitialLexicalValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["generateInitialLexicalValue","JSON","stringify","root","children","direction","format","indent","type","version"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["import { LexicalValue } from \"~/types\";\n\n/**\n * @description Basic JSON data string that will initialize the editor.\n */\nexport const generateInitialLexicalValue = (): LexicalValue => {\n    return JSON.stringify({\n        root: {\n            children: [\n                {\n                    children: [],\n                    direction: null,\n                    format: \"\",\n                    indent: 0,\n                    type: \"paragraph\",\n                    version: 1\n                }\n            ],\n            direction: null,\n            format: \"\",\n            indent: 0,\n            type: \"root\",\n            version: 1\n        }\n    });\n};\n"],"mappings":";;;;;;AAEA;AACA;AACA;AACO,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2B,GAAuB;EAC3D,OAAOC,IAAI,CAACC,SAAS,CAAC;IAClBC,IAAI,EAAE;MACFC,QAAQ,EAAE,CACN;QACIA,QAAQ,EAAE,EAAE;QACZC,SAAS,EAAE,IAAI;QACfC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC;QACTC,IAAI,EAAE,WAAW;QACjBC,OAAO,EAAE;MACb,CAAC,CACJ;MACDJ,SAAS,EAAE,IAAI;MACfC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,MAAM;MACZC,OAAO,EAAE;IACb;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}
+{"version":3,"names":["generateInitialLexicalValue","JSON","stringify","root","children","direction","format","indent","styles","type","version"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["import { LexicalValue } from \"~/types\";\n\n/**\n * @description Basic JSON data string that will initialize the editor.\n */\nexport const generateInitialLexicalValue = (): LexicalValue => {\n    return JSON.stringify({\n        root: {\n            children: [\n                {\n                    children: [],\n                    direction: null,\n                    format: \"\",\n                    indent: 0,\n                    styles: [],\n                    type: \"base-paragraph-node\",\n                    version: 1\n                }\n            ],\n            direction: null,\n            format: \"\",\n            indent: 0,\n            type: \"root\",\n            version: 1\n        }\n    });\n};\n"],"mappings":";;;;;;AAEA;AACA;AACA;AACO,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2B,GAAuB;EAC3D,OAAOC,IAAI,CAACC,SAAS,CAAC;IAClBC,IAAI,EAAE;MACFC,QAAQ,EAAE,CACN;QACIA,QAAQ,EAAE,EAAE;QACZC,SAAS,EAAE,IAAI;QACfC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC;QACTC,MAAM,EAAE,EAAE;QACVC,IAAI,EAAE,qBAAqB;QAC3BC,OAAO,EAAE;MACb,CAAC,CACJ;MACDL,SAAS,EAAE,IAAI;MACfC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE,CAAC;MACTE,IAAI,EAAE,MAAM;MACZC,OAAO,EAAE;IACb;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}

package/utils/getLexicalTextSelectionState.js

@@ -14,7 +14,9 @@ var _WebinyListNode = require("../nodes/list-node/WebinyListNode");
 var _richText = require("@lexical/rich-text");
 var _TypographyElementNode = require("../nodes/TypographyElementNode");
 var _FontColorNode = require("../nodes/FontColorNode");
-var _WebinyQuoteNode = require("../nodes/WebinyQuoteNode");
+var _ParagraphNode = require("../nodes/ParagraphNode");
+var _HeadingNode = require("../nodes/HeadingNode");
+var _QuoteNode = require("../nodes/QuoteNode");
 var getSelectionTextFormat = function getSelectionTextFormat(selection) {
   return !(0, _lexical.$isRangeSelection)(selection) ? {
     italic: false,
@@ -50,6 +52,12 @@ var getDefaultToolbarState = function getDefaultToolbarState() {
     quote: {
       isSelected: false
     },
+    paragraph: {
+      isSelected: false
+    },
+    heading: {
+      isSelected: false
+    },
     textType: undefined
   };
 };
@@ -77,12 +85,20 @@ var getToolbarState = function getToolbarState(selection, node, parent, element,
     var type = parentList ? parentList.getListType() : element.getListType();
     state.textType = type;
   }
-  if ((0, _richText.$isHeadingNode)(node) || (0, _richText.$isHeadingNode)(element)) {
+  if ((0, _richText.$isHeadingNode)(element)) {
     state.textType = "heading";
   }
+  if ((0, _HeadingNode.$isHeadingNode)(element)) {
+    state.textType = "heading";
+    state.heading.isSelected = true;
+  }
   if ((0, _lexical.$isParagraphNode)(element)) {
     state.textType = "paragraph";
   }
+  if ((0, _ParagraphNode.$isParagraphNode)(element)) {
+    state.textType = "paragraph";
+    state.paragraph.isSelected = true;
+  }
   if ((0, _TypographyElementNode.$isTypographyElementNode)(element)) {
     state.typography.isSelected = true;
     var value = element === null || element === void 0 ? void 0 : element.getTypographyValue();
@@ -96,7 +112,7 @@ var getToolbarState = function getToolbarState(selection, node, parent, element,
   if ((0, _TypographyElementNode.$isTypographyElementNode)(element)) {
     state.fontColor.isSelected = true;
   }
-  if ((0, _WebinyQuoteNode.$isWebinyQuoteNode)(element)) {
+  if ((0, _QuoteNode.$isQuoteNode)(element)) {
     state.textType = "quoteblock";
     state.quote.isSelected = true;
   }

package/utils/getLexicalTextSelectionState.js.map

@@ -1 +1 @@
-{"version":3,"names":["getSelectionTextFormat","selection","$isRangeSelection","italic","bold","underline","code","hasFormat","getDefaultToolbarState","link","isSelected","list","typography","fontColor","quote","textType","undefined","getToolbarState","node","parent","element","anchorNode","textFormat","state","$isLinkNode","$isFontColorNode","$isWebinyListNode","parentList","$getNearestNodeOfType","WebinyListNode","type","getListType","$isHeadingNode","$isParagraphNode","$isTypographyElementNode","value","getTypographyValue","tag","includes","$isWebinyQuoteNode","getLexicalTextSelectionState","activeEditor","anchor","getNode","getKey","$findMatchingParent","e","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","elementKey","elementDOM","getElementByKey","getSelectedNode","isElementDom"],"sources":["getLexicalTextSelectionState.ts"],"sourcesContent":["import { TextFormatting, TextBlockSelection, ToolbarState, TypographyValue } from \"~/types\";\nimport {\n    $isParagraphNode,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    ElementNode,\n    LexicalEditor,\n    LexicalNode,\n    RangeSelection,\n    TextNode\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType } from \"@lexical/utils\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { $isWebinyListNode, WebinyListNode } from \"~/nodes/list-node/WebinyListNode\";\nimport { $isHeadingNode } from \"@lexical/rich-text\";\nimport { $isTypographyElementNode } from \"~/nodes/TypographyElementNode\";\nimport { $isFontColorNode } from \"~/nodes/FontColorNode\";\nimport { $isWebinyQuoteNode } from \"~/nodes/WebinyQuoteNode\";\n\nexport const getSelectionTextFormat = (selection: RangeSelection | undefined): TextFormatting => {\n    return !$isRangeSelection(selection)\n        ? {\n              italic: false,\n              bold: false,\n              underline: false,\n              code: false\n          }\n        : {\n              bold: selection.hasFormat(\"bold\"),\n              italic: selection.hasFormat(\"italic\"),\n              underline: selection.hasFormat(\"underline\"),\n              code: selection.hasFormat(\"code\")\n          };\n};\n\nconst getDefaultToolbarState = (): ToolbarState => {\n    return {\n        bold: false,\n        italic: false,\n        underline: false,\n        code: false,\n        link: { isSelected: false },\n        list: { isSelected: false },\n        typography: { isSelected: false },\n        fontColor: { isSelected: false },\n        quote: { isSelected: false },\n        textType: undefined\n    };\n};\n\nexport const getToolbarState = (\n    selection: RangeSelection,\n    node: LexicalNode,\n    parent: LexicalNode | null,\n    element: LexicalNode | null,\n    anchorNode: ElementNode | TextNode\n): ToolbarState => {\n    const textFormat = getSelectionTextFormat(selection);\n    let state: ToolbarState = getDefaultToolbarState();\n    state = {\n        ...state,\n        bold: textFormat.bold,\n        italic: textFormat.italic,\n        underline: textFormat.underline,\n        code: textFormat.code\n    };\n\n    // link\n    state.link.isSelected = $isLinkNode(parent) || $isLinkNode(node);\n    if (state.link.isSelected) {\n        state.textType = \"link\";\n    }\n    // font color\n    if ($isFontColorNode(node)) {\n        state.fontColor.isSelected = true;\n    }\n    if ($isWebinyListNode(element)) {\n        const parentList = $getNearestNodeOfType<WebinyListNode>(anchorNode, WebinyListNode);\n        const type = parentList ? parentList.getListType() : element.getListType();\n        state.textType = type;\n    }\n    if ($isHeadingNode(node) || $isHeadingNode(element)) {\n        state.textType = \"heading\";\n    }\n    if ($isParagraphNode(element)) {\n        state.textType = \"paragraph\";\n    }\n    if ($isTypographyElementNode(element)) {\n        state.typography.isSelected = true;\n        const value = element?.getTypographyValue() as TypographyValue;\n        if (value.tag.includes(\"h\")) {\n            state.textType = \"heading\";\n        }\n        if (value.tag.includes(\"p\")) {\n            state.textType = \"paragraph\";\n        }\n    }\n    if ($isTypographyElementNode(element)) {\n        state.fontColor.isSelected = true;\n    }\n    if ($isWebinyQuoteNode(element)) {\n        state.textType = \"quoteblock\";\n        state.quote.isSelected = true;\n    }\n\n    return state;\n};\n\n/*\n * @desc Get selection data and provide processed toolbar state and data about the text, element and parent nodes.\n */\nexport const getLexicalTextSelectionState = (\n    activeEditor: LexicalEditor,\n    selection: RangeSelection\n): TextBlockSelection | null => {\n    if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        let element =\n            anchorNode.getKey() === \"root\"\n                ? anchorNode\n                : $findMatchingParent(anchorNode, e => {\n                      const parent = e.getParent();\n                      return parent !== null && $isRootOrShadowRoot(parent);\n                  });\n\n        if (element === null) {\n            element = anchorNode.getTopLevelElementOrThrow();\n        }\n\n        const elementKey = element.getKey();\n        const elementDOM = activeEditor.getElementByKey(elementKey);\n\n        // Update links\n        const node = getSelectedNode(selection);\n        const parent = node.getParent();\n        const isElementDom = elementDOM !== null;\n\n        return {\n            // node/element data from selection\n            elementKey,\n            element,\n            parent,\n            node,\n            anchorNode,\n            selection,\n            isElementDom,\n            state: getToolbarState(selection, node, parent, element, anchorNode)\n        };\n    }\n    return null;\n};\n"],"mappings":"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"}
+{"version":3,"names":["getSelectionTextFormat","selection","$isRangeSelection","italic","bold","underline","code","hasFormat","getDefaultToolbarState","link","isSelected","list","typography","fontColor","quote","paragraph","heading","textType","undefined","getToolbarState","node","parent","element","anchorNode","textFormat","state","$isLinkNode","$isFontColorNode","$isWebinyListNode","parentList","$getNearestNodeOfType","WebinyListNode","type","getListType","$isBaseHeadingNode","$isHeadingNode","$isBaseParagraphNode","$isParagraphNode","$isTypographyElementNode","value","getTypographyValue","tag","includes","$isQuoteNode","getLexicalTextSelectionState","activeEditor","anchor","getNode","getKey","$findMatchingParent","e","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","elementKey","elementDOM","getElementByKey","getSelectedNode","isElementDom"],"sources":["getLexicalTextSelectionState.ts"],"sourcesContent":["import { TextFormatting, TextBlockSelection, ToolbarState, TypographyValue } from \"~/types\";\nimport {\n    $isParagraphNode as $isBaseParagraphNode,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    ElementNode,\n    LexicalEditor,\n    LexicalNode,\n    RangeSelection,\n    TextNode\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType } from \"@lexical/utils\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { $isWebinyListNode, WebinyListNode } from \"~/nodes/list-node/WebinyListNode\";\nimport { $isHeadingNode as $isBaseHeadingNode } from \"@lexical/rich-text\";\nimport { $isTypographyElementNode } from \"~/nodes/TypographyElementNode\";\nimport { $isFontColorNode } from \"~/nodes/FontColorNode\";\nimport { $isParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $isHeadingNode } from \"~/nodes/HeadingNode\";\nimport { $isQuoteNode } from \"~/nodes/QuoteNode\";\n\nexport const getSelectionTextFormat = (selection: RangeSelection | undefined): TextFormatting => {\n    return !$isRangeSelection(selection)\n        ? {\n              italic: false,\n              bold: false,\n              underline: false,\n              code: false\n          }\n        : {\n              bold: selection.hasFormat(\"bold\"),\n              italic: selection.hasFormat(\"italic\"),\n              underline: selection.hasFormat(\"underline\"),\n              code: selection.hasFormat(\"code\")\n          };\n};\n\nconst getDefaultToolbarState = (): ToolbarState => {\n    return {\n        bold: false,\n        italic: false,\n        underline: false,\n        code: false,\n        link: { isSelected: false },\n        list: { isSelected: false },\n        typography: { isSelected: false },\n        fontColor: { isSelected: false },\n        quote: { isSelected: false },\n        paragraph: { isSelected: false },\n        heading: { isSelected: false },\n        textType: undefined\n    };\n};\n\nexport const getToolbarState = (\n    selection: RangeSelection,\n    node: LexicalNode,\n    parent: LexicalNode | null,\n    element: LexicalNode | null,\n    anchorNode: ElementNode | TextNode\n): ToolbarState => {\n    const textFormat = getSelectionTextFormat(selection);\n    let state: ToolbarState = getDefaultToolbarState();\n    state = {\n        ...state,\n        bold: textFormat.bold,\n        italic: textFormat.italic,\n        underline: textFormat.underline,\n        code: textFormat.code\n    };\n\n    // link\n    state.link.isSelected = $isLinkNode(parent) || $isLinkNode(node);\n    if (state.link.isSelected) {\n        state.textType = \"link\";\n    }\n    // font color\n    if ($isFontColorNode(node)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isWebinyListNode(element)) {\n        const parentList = $getNearestNodeOfType<WebinyListNode>(anchorNode, WebinyListNode);\n        const type = parentList ? parentList.getListType() : element.getListType();\n        state.textType = type;\n    }\n\n    if ($isBaseHeadingNode(element)) {\n        state.textType = \"heading\";\n    }\n\n    if ($isHeadingNode(element)) {\n        state.textType = \"heading\";\n        state.heading.isSelected = true;\n    }\n\n    if ($isBaseParagraphNode(element)) {\n        state.textType = \"paragraph\";\n    }\n\n    if ($isParagraphNode(element)) {\n        state.textType = \"paragraph\";\n        state.paragraph.isSelected = true;\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.typography.isSelected = true;\n        const value = element?.getTypographyValue() as TypographyValue;\n        if (value.tag.includes(\"h\")) {\n            state.textType = \"heading\";\n        }\n        if (value.tag.includes(\"p\")) {\n            state.textType = \"paragraph\";\n        }\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isQuoteNode(element)) {\n        state.textType = \"quoteblock\";\n        state.quote.isSelected = true;\n    }\n\n    return state;\n};\n\n/*\n * @desc Get selection data and provide processed toolbar state and data about the text, element and parent nodes.\n */\nexport const getLexicalTextSelectionState = (\n    activeEditor: LexicalEditor,\n    selection: RangeSelection\n): TextBlockSelection | null => {\n    if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        let element =\n            anchorNode.getKey() === \"root\"\n                ? anchorNode\n                : $findMatchingParent(anchorNode, e => {\n                      const parent = e.getParent();\n                      return parent !== null && $isRootOrShadowRoot(parent);\n                  });\n\n        if (element === null) {\n            element = anchorNode.getTopLevelElementOrThrow();\n        }\n\n        const elementKey = element.getKey();\n        const elementDOM = activeEditor.getElementByKey(elementKey);\n\n        // Update links\n        const node = getSelectedNode(selection);\n        const parent = node.getParent();\n        const isElementDom = elementDOM !== null;\n\n        return {\n            // node/element data from selection\n            elementKey,\n            element,\n            parent,\n            node,\n            anchorNode,\n            selection,\n            isElementDom,\n            state: getToolbarState(selection, node, parent, element, anchorNode)\n        };\n    }\n    return null;\n};\n"],"mappings":"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"}

package/utils/nodes/formatToHeading.d.ts

@@ -0,0 +1,3 @@
+import { LexicalEditor } from "lexical";
+import { HeadingTagType } from "@lexical/rich-text";
+export declare const formatToHeading: (editor: LexicalEditor, tag: HeadingTagType, typographyStyleId?: string) => void;

package/utils/nodes/formatToHeading.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatToHeading = void 0;
+var _lexical = require("lexical");
+var _selection = require("@lexical/selection");
+var _HeadingNode = require("../../nodes/HeadingNode");
+/*
+ * Will change the selected HTML tag to specified heading or h1-h6.
+ * For example if the selection is p with content inside after formatting the root tag
+ * will be h1 with heading 1 theme style and the same content inside.
+ * */
+var formatToHeading = function formatToHeading(editor, tag, typographyStyleId) {
+  editor.update(function () {
+    var selection = (0, _lexical.$getSelection)();
+    if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
+      (0, _selection.$setBlocksType)(selection, function () {
+        return (0, _HeadingNode.$createHeadingNode)(tag, typographyStyleId);
+      });
+    }
+  });
+};
+exports.formatToHeading = formatToHeading;

package/utils/nodes/formatToHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["formatToHeading","editor","tag","typographyStyleId","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$setBlocksType","$createHeadingNode"],"sources":["formatToHeading.ts"],"sourcesContent":["import {\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection,\n    LexicalEditor\n} from \"lexical\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { $createHeadingNode } from \"~/nodes/HeadingNode\";\nimport { HeadingTagType } from \"@lexical/rich-text\";\n\n/*\n * Will change the selected HTML tag to specified heading or h1-h6.\n * For example if the selection is p with content inside after formatting the root tag\n * will be h1 with heading 1 theme style and the same content inside.\n * */\nexport const formatToHeading = (\n    editor: LexicalEditor,\n    tag: HeadingTagType,\n    typographyStyleId?: string\n) => {\n    editor.update(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n            $setBlocksType(selection, () => $createHeadingNode(tag, typographyStyleId));\n        }\n    });\n};\n"],"mappings":";;;;;;AAAA;AAMA;AACA;AAGA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CACxBC,MAAqB,EACrBC,GAAmB,EACnBC,iBAA0B,EACzB;EACDF,MAAM,CAACG,MAAM,CAAC,YAAM;IAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;MACxE,IAAAI,yBAAc,EAACJ,SAAS,EAAE;QAAA,OAAM,IAAAK,+BAAkB,EAACR,GAAG,EAAEC,iBAAiB,CAAC;MAAA,EAAC;IAC/E;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}

package/utils/nodes/formatToParagraph.d.ts

@@ -1,2 +1,2 @@
 import { LexicalEditor } from "lexical";
-export declare const formatToParagraph: (editor: LexicalEditor) => void;
+export declare const formatToParagraph: (editor: LexicalEditor, typographyStyleId?: string) => void;

package/utils/nodes/formatToParagraph.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatToParagraph = void 0;
 var _lexical = require("lexical");
+var _ParagraphNode = require("../../nodes/ParagraphNode");
 var _selection = require("@lexical/selection");
-var formatToParagraph = function formatToParagraph(editor) {
+var formatToParagraph = function formatToParagraph(editor, typographyStyleId) {
   editor.update(function () {
     var selection = (0, _lexical.$getSelection)();
     if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-      (0, _selection.$wrapNodes)(selection, function () {
-        return (0, _lexical.$createParagraphNode)();
+      (0, _selection.$setBlocksType)(selection, function () {
+        return (0, _ParagraphNode.$createParagraphNode)(typographyStyleId);
       });
     }
   });

package/utils/nodes/formatToParagraph.js.map

@@ -1 +1 @@
-{"version":3,"names":["formatToParagraph","editor","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$wrapNodes","$createParagraphNode"],"sources":["formatToParagraph.ts"],"sourcesContent":["import {\n    $createParagraphNode,\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection,\n    LexicalEditor\n} from \"lexical\";\nimport { $wrapNodes } from \"@lexical/selection\";\n\nexport const formatToParagraph = (editor: LexicalEditor) => {\n    editor.update(() => {\n        const selection = $getSelection();\n\n        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n            $wrapNodes(selection, () => $createParagraphNode());\n        }\n    });\n};\n"],"mappings":";;;;;;AAAA;AAOA;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,MAAqB,EAAK;EACxDA,MAAM,CAACC,MAAM,CAAC,YAAM;IAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;MACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;QAAA,OAAM,IAAAK,6BAAoB,GAAE;MAAA,EAAC;IACvD;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}
+{"version":3,"names":["formatToParagraph","editor","typographyStyleId","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$setBlocksType","$createParagraphNode"],"sources":["formatToParagraph.ts"],"sourcesContent":["import {\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection,\n    LexicalEditor\n} from \"lexical\";\nimport { $createParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $setBlocksType } from \"@lexical/selection\";\n\nexport const formatToParagraph = (editor: LexicalEditor, typographyStyleId?: string) => {\n    editor.update(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n            $setBlocksType(selection, () => $createParagraphNode(typographyStyleId));\n        }\n    });\n};\n"],"mappings":";;;;;;AAAA;AAMA;AACA;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,MAAqB,EAAEC,iBAA0B,EAAK;EACpFD,MAAM,CAACE,MAAM,CAAC,YAAM;IAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;MACxE,IAAAI,yBAAc,EAACJ,SAAS,EAAE;QAAA,OAAM,IAAAK,mCAAoB,EAACP,iBAAiB,CAAC;MAAA,EAAC;IAC5E;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}

package/utils/nodes/formatToQuote.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.formatToQuote = void 0;
 var _lexical = require("lexical");
 var _selection = require("@lexical/selection");
-var _WebinyQuoteNode = require("../../nodes/WebinyQuoteNode");
+var _QuoteNode = require("../../nodes/QuoteNode");
+/*
+ * Will change the selected root HTML tag to specified quoteblock tag.
+ * For example if the selection is paragraph <p> with content inside after formatting the root tag
+ * will be quoteblock with same content inside.
+ * */
 var formatToQuote = function formatToQuote(editor, themeStyleId) {
   editor.update(function () {
     var selection = (0, _lexical.$getSelection)();
     if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-      (0, _selection.$wrapNodes)(selection, function () {
-        return (0, _WebinyQuoteNode.$createWebinyQuoteNode)(themeStyleId);
+      (0, _selection.$setBlocksType)(selection, function () {
+        return (0, _QuoteNode.$createQuoteNode)(themeStyleId);
       });
     }
   });

package/utils/nodes/formatToQuote.js.map

@@ -1 +1 @@
-{"version":3,"names":["formatToQuote","editor","themeStyleId","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$wrapNodes","$createWebinyQuoteNode"],"sources":["formatToQuote.ts"],"sourcesContent":["import {\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection,\n    LexicalEditor\n} from \"lexical\";\nimport { $wrapNodes } from \"@lexical/selection\";\nimport { $createWebinyQuoteNode } from \"~/nodes/WebinyQuoteNode\";\n\nexport const formatToQuote = (editor: LexicalEditor, themeStyleId?: string) => {\n    editor.update(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n            $wrapNodes(selection, () => $createWebinyQuoteNode(themeStyleId));\n        }\n    });\n};\n"],"mappings":";;;;;;AAAA;AAMA;AACA;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,MAAqB,EAAEC,YAAqB,EAAK;EAC3ED,MAAM,CAACE,MAAM,CAAC,YAAM;IAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;MACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;QAAA,OAAM,IAAAK,uCAAsB,EAACP,YAAY,CAAC;MAAA,EAAC;IACrE;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}
+{"version":3,"names":["formatToQuote","editor","themeStyleId","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$setBlocksType","$createQuoteNode"],"sources":["formatToQuote.ts"],"sourcesContent":["import {\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection,\n    LexicalEditor\n} from \"lexical\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { $createQuoteNode } from \"~/nodes/QuoteNode\";\n\n/*\n * Will change the selected root HTML tag to specified quoteblock tag.\n * For example if the selection is paragraph <p> with content inside after formatting the root tag\n * will be quoteblock with same content inside.\n * */\nexport const formatToQuote = (editor: LexicalEditor, themeStyleId?: string) => {\n    editor.update(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n            $setBlocksType(selection, () => $createQuoteNode(themeStyleId));\n        }\n    });\n};\n"],"mappings":";;;;;;AAAA;AAMA;AACA;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,MAAqB,EAAEC,YAAqB,EAAK;EAC3ED,MAAM,CAACE,MAAM,CAAC,YAAM;IAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;MACxE,IAAAI,yBAAc,EAACJ,SAAS,EAAE;QAAA,OAAM,IAAAK,2BAAgB,EAACP,YAAY,CAAC;MAAA,EAAC;IACnE;EACJ,CAAC,CAAC;AACN,CAAC;AAAC"}

package/hooks/useWebinyQuote.d.ts

@@ -1,2 +0,0 @@
-import type { LexicalEditor } from "lexical";
-export declare function useWebinyQuote(editor: LexicalEditor): void;

package/hooks/useWebinyQuote.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useWebinyQuote","editor","useEffect","mergeRegister","registerCommand","INSERT_WEBINY_QUOTE_COMMAND","themeStyleId","formatToQuote","COMMAND_PRIORITY_LOW"],"sources":["useWebinyQuote.ts"],"sourcesContent":["import type { LexicalEditor } from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { COMMAND_PRIORITY_LOW } from \"lexical\";\nimport { useEffect } from \"react\";\nimport { INSERT_WEBINY_QUOTE_COMMAND } from \"~/commands/webiny-quote\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\n\nexport function useWebinyQuote(editor: LexicalEditor): void {\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                INSERT_WEBINY_QUOTE_COMMAND,\n                ({ themeStyleId }) => {\n                    formatToQuote(editor, themeStyleId);\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor]);\n}\n"],"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AAEO,SAASA,cAAc,CAACC,MAAqB,EAAQ;EACxD,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAC,oBAAa,EAChBF,MAAM,CAACG,eAAe,CAClBC,wCAA2B,EAC3B,gBAAsB;MAAA,IAAnBC,YAAY,QAAZA,YAAY;MACX,IAAAC,4BAAa,EAACN,MAAM,EAAEK,YAAY,CAAC;MACnC,OAAO,KAAK;IAChB,CAAC,EACDE,6BAAoB,CACvB,CACJ;EACL,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AAChB"}

package/nodes/WebinyQuoteNode.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-/// <reference types="web" />
-import { DOMConversionMap, EditorConfig, ElementNode, LexicalNode, NodeKey, ParagraphNode, SerializedElementNode, Spread } from "lexical";
-import { WebinyEditorTheme } from "../themes/webinyLexicalTheme";
-import { QuoteBlockHtmlTag, WebinyThemeNode } from "../types";
-export declare type SerializedWebinyQuoteNode = Spread<{
-    tag: QuoteBlockHtmlTag;
-    styleId: string;
-    type: "webiny-quote";
-    version: 1;
-}, SerializedElementNode>;
-export declare class WebinyQuoteNode extends ElementNode implements WebinyThemeNode {
-    __themeStyleId: string;
-    constructor(themeStyleId?: string, key?: NodeKey);
-    getStyleId: () => string;
-    static getType(): string;
-    getTag(): QuoteBlockHtmlTag;
-    static clone(node: WebinyQuoteNode): WebinyQuoteNode;
-    addThemeStylesToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): boolean;
-    static importDOM(): DOMConversionMap | null;
-    static importJSON(serializedNode: SerializedWebinyQuoteNode): WebinyQuoteNode;
-    exportJSON(): SerializedWebinyQuoteNode;
-    insertNewAfter(): ParagraphNode;
-    collapseAtStart(): true;
-}
-export declare function $createWebinyQuoteNode(themeStyleId?: string, key?: NodeKey): WebinyQuoteNode;
-export declare function $isWebinyQuoteNode(node: LexicalNode | null | undefined): node is WebinyQuoteNode;