@webiny/lexical-editor 5.44.1-beta.0 → 5.45.0-beta.0

package/utils/setFloatingElemPosition.js

@@ -1,37 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setFloatingElemPosition = setFloatingElemPosition;
-var VERTICAL_GAP = 10;
-var HORIZONTAL_OFFSET = 5;
-function setFloatingElemPosition(basePosition, elementToPosition, anchorElem) {
-  var verticalGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : VERTICAL_GAP;
-  var horizontalOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : HORIZONTAL_OFFSET;
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+const GAP = 10;
+export function setFloatingElemPosition(basePosition, elementToPosition) {
   // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.
-  setTimeout(function () {
-    var scrollerElem = anchorElem.parentElement;
-    if (basePosition === null || !scrollerElem) {
-      elementToPosition.style.opacity = "0";
+  setTimeout(() => {
+    if (basePosition === null) {
       elementToPosition.style.transform = "translate(-10000px, -10000px)";
       return;
     }
-    var rectToPosition = elementToPosition.getBoundingClientRect();
-    var anchorElementRect = anchorElem.getBoundingClientRect();
-    var editorScrollerRect = scrollerElem.getBoundingClientRect();
-    var top = basePosition.top - rectToPosition.height - verticalGap;
-    var left = basePosition.left - horizontalOffset;
-    if (top < editorScrollerRect.top) {
-      top += rectToPosition.height + basePosition.height + verticalGap * 2;
-    }
-    if (left + rectToPosition.width > editorScrollerRect.right) {
-      left = editorScrollerRect.right - rectToPosition.width - horizontalOffset;
-    }
-    top -= anchorElementRect.top;
-    left -= anchorElementRect.left;
-    elementToPosition.style.opacity = "1";
-    elementToPosition.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+    const virtualElement = {
+      getBoundingClientRect: () => basePosition.getBoundingClientRect()
+    };
+    computePosition(virtualElement, elementToPosition, {
+      placement: "bottom",
+      middleware: [offset(GAP),
+      // adds gap between anchor and popup
+      flip(),
+      // switches to the opposite side if no room (bottom → top)
+      shift({
+        padding: GAP
+      }) // slides along the axis to stay within viewport
+      ]
+    }).then(({
+      x,
+      y
+    }) => {
+      elementToPosition.style.transform = `translate(${x}px, ${y}px)`;
+    });
   }, 10);
 }
 

package/utils/setFloatingElemPosition.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERTICAL_GAP","HORIZONTAL_OFFSET","setFloatingElemPosition","basePosition","elementToPosition","anchorElem","verticalGap","arguments","length","undefined","horizontalOffset","setTimeout","scrollerElem","parentElement","style","opacity","transform","rectToPosition","getBoundingClientRect","anchorElementRect","editorScrollerRect","top","height","left","width","right","concat"],"sources":["setFloatingElemPosition.ts"],"sourcesContent":["const VERTICAL_GAP = 10;\nconst HORIZONTAL_OFFSET = 5;\n\nexport function setFloatingElemPosition(\n    basePosition: ClientRect | null,\n    elementToPosition: HTMLElement,\n    anchorElem: HTMLElement,\n    verticalGap: number = VERTICAL_GAP,\n    horizontalOffset: number = HORIZONTAL_OFFSET\n): void {\n    // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.\n    setTimeout(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        if (basePosition === null || !scrollerElem) {\n            elementToPosition.style.opacity = \"0\";\n            elementToPosition.style.transform = \"translate(-10000px, -10000px)\";\n            return;\n        }\n\n        const rectToPosition = elementToPosition.getBoundingClientRect();\n        const anchorElementRect = anchorElem.getBoundingClientRect();\n        const editorScrollerRect = scrollerElem.getBoundingClientRect();\n\n        let top = basePosition.top - rectToPosition.height - verticalGap;\n        let left = basePosition.left - horizontalOffset;\n\n        if (top < editorScrollerRect.top) {\n            top += rectToPosition.height + basePosition.height + verticalGap * 2;\n        }\n\n        if (left + rectToPosition.width > editorScrollerRect.right) {\n            left = editorScrollerRect.right - rectToPosition.width - horizontalOffset;\n        }\n\n        top -= anchorElementRect.top;\n        left -= anchorElementRect.left;\n\n        elementToPosition.style.opacity = \"1\";\n        elementToPosition.style.transform = `translate(${left}px, ${top}px)`;\n    }, 10);\n}\n"],"mappings":";;;;;;AAAA,IAAMA,YAAY,GAAG,EAAE;AACvB,IAAMC,iBAAiB,GAAG,CAAC;AAEpB,SAASC,uBAAuBA,CACnCC,YAA+B,EAC/BC,iBAA8B,EAC9BC,UAAuB,EAGnB;EAAA,IAFJC,WAAmB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGP,YAAY;EAAA,IAClCU,gBAAwB,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,iBAAiB;EAE5C;EACAU,UAAU,CAAC,YAAM;IACb,IAAMC,YAAY,GAAGP,UAAU,CAACQ,aAAa;IAE7C,IAAIV,YAAY,KAAK,IAAI,IAAI,CAACS,YAAY,EAAE;MACxCR,iBAAiB,CAACU,KAAK,CAACC,OAAO,GAAG,GAAG;MACrCX,iBAAiB,CAACU,KAAK,CAACE,SAAS,GAAG,+BAA+B;MACnE;IACJ;IAEA,IAAMC,cAAc,GAAGb,iBAAiB,CAACc,qBAAqB,CAAC,CAAC;IAChE,IAAMC,iBAAiB,GAAGd,UAAU,CAACa,qBAAqB,CAAC,CAAC;IAC5D,IAAME,kBAAkB,GAAGR,YAAY,CAACM,qBAAqB,CAAC,CAAC;IAE/D,IAAIG,GAAG,GAAGlB,YAAY,CAACkB,GAAG,GAAGJ,cAAc,CAACK,MAAM,GAAGhB,WAAW;IAChE,IAAIiB,IAAI,GAAGpB,YAAY,CAACoB,IAAI,GAAGb,gBAAgB;IAE/C,IAAIW,GAAG,GAAGD,kBAAkB,CAACC,GAAG,EAAE;MAC9BA,GAAG,IAAIJ,cAAc,CAACK,MAAM,GAAGnB,YAAY,CAACmB,MAAM,GAAGhB,WAAW,GAAG,CAAC;IACxE;IAEA,IAAIiB,IAAI,GAAGN,cAAc,CAACO,KAAK,GAAGJ,kBAAkB,CAACK,KAAK,EAAE;MACxDF,IAAI,GAAGH,kBAAkB,CAACK,KAAK,GAAGR,cAAc,CAACO,KAAK,GAAGd,gBAAgB;IAC7E;IAEAW,GAAG,IAAIF,iBAAiB,CAACE,GAAG;IAC5BE,IAAI,IAAIJ,iBAAiB,CAACI,IAAI;IAE9BnB,iBAAiB,CAACU,KAAK,CAACC,OAAO,GAAG,GAAG;IACrCX,iBAAiB,CAACU,KAAK,CAACE,SAAS,gBAAAU,MAAA,CAAgBH,IAAI,UAAAG,MAAA,CAAOL,GAAG,QAAK;EACxE,CAAC,EAAE,EAAE,CAAC;AACV","ignoreList":[]}
+{"version":3,"names":["computePosition","flip","offset","shift","GAP","setFloatingElemPosition","basePosition","elementToPosition","setTimeout","style","transform","virtualElement","getBoundingClientRect","placement","middleware","padding","then","x","y"],"sources":["setFloatingElemPosition.ts"],"sourcesContent":["import { computePosition, flip, offset, shift } from \"@floating-ui/dom\";\n\nconst GAP = 10;\n\nexport function setFloatingElemPosition(\n    basePosition: Range | null,\n    elementToPosition: HTMLElement\n): void {\n    // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.\n    setTimeout(() => {\n        if (basePosition === null) {\n            elementToPosition.style.transform = \"translate(-10000px, -10000px)\";\n            return;\n        }\n\n        const virtualElement = {\n            getBoundingClientRect: () => basePosition.getBoundingClientRect()\n        };\n\n        computePosition(virtualElement, elementToPosition, {\n            placement: \"bottom\",\n            middleware: [\n                offset(GAP), // adds gap between anchor and popup\n                flip(), // switches to the opposite side if no room (bottom → top)\n                shift({ padding: GAP }) // slides along the axis to stay within viewport\n            ]\n        }).then(({ x, y }) => {\n            elementToPosition.style.transform = `translate(${x}px, ${y}px)`;\n        });\n    }, 10);\n}\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,IAAI,EAAEC,MAAM,EAAEC,KAAK,QAAQ,kBAAkB;AAEvE,MAAMC,GAAG,GAAG,EAAE;AAEd,OAAO,SAASC,uBAAuBA,CACnCC,YAA0B,EAC1BC,iBAA8B,EAC1B;EACJ;EACAC,UAAU,CAAC,MAAM;IACb,IAAIF,YAAY,KAAK,IAAI,EAAE;MACvBC,iBAAiB,CAACE,KAAK,CAACC,SAAS,GAAG,+BAA+B;MACnE;IACJ;IAEA,MAAMC,cAAc,GAAG;MACnBC,qBAAqB,EAAEA,CAAA,KAAMN,YAAY,CAACM,qBAAqB,CAAC;IACpE,CAAC;IAEDZ,eAAe,CAACW,cAAc,EAAEJ,iBAAiB,EAAE;MAC/CM,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE,CACRZ,MAAM,CAACE,GAAG,CAAC;MAAE;MACbH,IAAI,CAAC,CAAC;MAAE;MACRE,KAAK,CAAC;QAAEY,OAAO,EAAEX;MAAI,CAAC,CAAC,CAAC;MAAA;IAEhC,CAAC,CAAC,CAACY,IAAI,CAAC,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAC,KAAK;MAClBX,iBAAiB,CAACE,KAAK,CAACC,SAAS,GAAG,aAAaO,CAAC,OAAOC,CAAC,KAAK;IACnE,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;AACV","ignoreList":[]}

package/components/Editor/HeadingEditor.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { RichTextEditorProps } from "./RichTextEditor";
-interface HeadingEditorProps extends RichTextEditorProps {
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-export declare const HeadingEditor: ({ tag, placeholder, ...rest }: HeadingEditorProps) => React.JSX.Element;
-export {};

package/components/Editor/HeadingEditor.js

@@ -1,30 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HeadingEditor = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _RichTextEditor = require("./RichTextEditor");
-var _Toolbar = require("../Toolbar/Toolbar");
-var _EnsureHeadingTagPlugin = require("./EnsureHeadingTagPlugin");
-var _excluded = ["tag", "placeholder"];
-var styles = {
-  padding: 5
-};
-var HeadingEditor = exports.HeadingEditor = function HeadingEditor(_ref) {
-  var tag = _ref.tag,
-    placeholder = _ref.placeholder,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_RichTextEditor.RichTextEditor, Object.assign({
-    toolbar: /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, null),
-    tag: tag ?? "h1",
-    placeholder: placeholder ?? "Enter your heading text here..."
-  }, rest, {
-    styles: styles
-  }), /*#__PURE__*/_react.default.createElement(_EnsureHeadingTagPlugin.EnsureHeadingTagPlugin, null), rest?.children);
-};
-
-//# sourceMappingURL=HeadingEditor.js.map

package/components/Editor/HeadingEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RichTextEditor","_Toolbar","_EnsureHeadingTagPlugin","_excluded","styles","padding","HeadingEditor","exports","_ref","tag","placeholder","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","Toolbar","EnsureHeadingTagPlugin","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\nimport { EnsureHeadingTagPlugin } from \"~/components/Editor/EnsureHeadingTagPlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst styles = { padding: 5 };\n\nexport const HeadingEditor = ({ tag, placeholder, ...rest }: HeadingEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            <EnsureHeadingTagPlugin />\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAAoF,IAAAI,SAAA;AAMpF,IAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAEtB,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAAE,IAAA,EAA0D;EAAA,IAApDC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EACrD,oBACIN,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACd,eAAA,CAAAe,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAErB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,QAAA,CAAAkB,OAAO,MAAE,CAAE;IACrBV,GAAG,EAAEA,GAAG,IAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,IAAI;EAAkC,GAC1DC,IAAI;IACRP,MAAM,EAAEA;EAAO,iBAEfP,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,uBAAA,CAAAkB,sBAAsB,MAAE,CAAC,EACzBT,IAAI,EAAEU,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}

package/components/Editor/ParagraphEditor.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { RichTextEditorProps } from "./RichTextEditor";
-interface ParagraphLexicalEditorProps extends RichTextEditorProps {
-    tag?: "p";
-}
-declare const ParagraphEditor: ({ placeholder, tag, ...rest }: ParagraphLexicalEditorProps) => React.JSX.Element;
-export { ParagraphEditor };

package/components/Editor/ParagraphEditor.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ParagraphEditor = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _RichTextEditor = require("./RichTextEditor");
-var _Toolbar = require("../Toolbar/Toolbar");
-var _excluded = ["placeholder", "tag"];
-var styles = {
-  padding: 5
-};
-var ParagraphEditor = exports.ParagraphEditor = function ParagraphEditor(_ref) {
-  var placeholder = _ref.placeholder,
-    tag = _ref.tag,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_RichTextEditor.RichTextEditor, Object.assign({
-    toolbar: /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, null),
-    tag: tag ?? "p",
-    placeholder: placeholder ?? "Enter your text here..."
-  }, rest, {
-    styles: styles
-  }), rest?.children);
-};
-
-//# sourceMappingURL=ParagraphEditor.js.map

package/components/Editor/ParagraphEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RichTextEditor","_Toolbar","_excluded","styles","padding","ParagraphEditor","exports","_ref","placeholder","tag","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","Toolbar","children"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst styles = { padding: 5 };\n\nconst ParagraphEditor = ({ placeholder, tag, ...rest }: ParagraphLexicalEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAuD,IAAAG,SAAA;AAMvD,IAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAE7B,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAAE,IAAA,EAAmE;EAAA,IAA7DC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EAChD,oBACIL,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,eAAA,CAAAc,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEpB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,QAAA,CAAAiB,OAAO,MAAE,CAAE;IACrBT,GAAG,EAAEA,GAAG,IAAI,GAAI;IAChBD,WAAW,EAAEA,WAAW,IAAI;EAA0B,GAClDE,IAAI;IACRP,MAAM,EAAEA;EAAO,IAEdO,IAAI,EAAES,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}