@webiny/lexical-editor 0.0.0-unstable.1145e7667f

package/utils/setFloatingElemPosition.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setFloatingElemPosition = setFloatingElemPosition;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var VERTICAL_GAP = 10;
+var HORIZONTAL_OFFSET = 5;
+function setFloatingElemPosition(targetRect, floatingElem, 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;
+  var scrollerElem = anchorElem.parentElement;
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = "0";
+    floatingElem.style.transform = "translate(-10000px, -10000px)";
+    return;
+  }
+  var floatingElemRect = floatingElem.getBoundingClientRect();
+  var anchorElementRect = anchorElem.getBoundingClientRect();
+  var editorScrollerRect = scrollerElem.getBoundingClientRect();
+  var top = targetRect.top - floatingElemRect.height - verticalGap;
+  var left = targetRect.left - horizontalOffset;
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+  floatingElem.style.opacity = "1";
+  floatingElem.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+}

package/utils/setFloatingElemPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["VERTICAL_GAP","HORIZONTAL_OFFSET","setFloatingElemPosition","targetRect","floatingElem","anchorElem","verticalGap","horizontalOffset","scrollerElem","parentElement","style","opacity","transform","floatingElemRect","getBoundingClientRect","anchorElementRect","editorScrollerRect","top","height","left","width","right"],"sources":["setFloatingElemPosition.ts"],"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 */\nconst VERTICAL_GAP = 10;\nconst HORIZONTAL_OFFSET = 5;\n\nexport function setFloatingElemPosition(\n    targetRect: ClientRect | null,\n    floatingElem: HTMLElement,\n    anchorElem: HTMLElement,\n    verticalGap: number = VERTICAL_GAP,\n    horizontalOffset: number = HORIZONTAL_OFFSET\n): void {\n    const scrollerElem = anchorElem.parentElement;\n\n    if (targetRect === null || !scrollerElem) {\n        floatingElem.style.opacity = \"0\";\n        floatingElem.style.transform = \"translate(-10000px, -10000px)\";\n        return;\n    }\n\n    const floatingElemRect = floatingElem.getBoundingClientRect();\n    const anchorElementRect = anchorElem.getBoundingClientRect();\n    const editorScrollerRect = scrollerElem.getBoundingClientRect();\n\n    let top = targetRect.top - floatingElemRect.height - verticalGap;\n    let left = targetRect.left - horizontalOffset;\n\n    if (top < editorScrollerRect.top) {\n        top += floatingElemRect.height + targetRect.height + verticalGap * 2;\n    }\n\n    if (left + floatingElemRect.width > editorScrollerRect.right) {\n        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;\n    }\n\n    top -= anchorElementRect.top;\n    left -= anchorElementRect.left;\n\n    floatingElem.style.opacity = \"1\";\n    floatingElem.style.transform = `translate(${left}px, ${top}px)`;\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAG,EAAE;AACvB,IAAMC,iBAAiB,GAAG,CAAC;AAEpB,SAASC,uBAAuB,CACnCC,UAA6B,EAC7BC,YAAyB,EACzBC,UAAuB,EAGnB;EAAA,IAFJC,WAAmB,uEAAGN,YAAY;EAAA,IAClCO,gBAAwB,uEAAGN,iBAAiB;EAE5C,IAAMO,YAAY,GAAGH,UAAU,CAACI,aAAa;EAE7C,IAAIN,UAAU,KAAK,IAAI,IAAI,CAACK,YAAY,EAAE;IACtCJ,YAAY,CAACM,KAAK,CAACC,OAAO,GAAG,GAAG;IAChCP,YAAY,CAACM,KAAK,CAACE,SAAS,GAAG,+BAA+B;IAC9D;EACJ;EAEA,IAAMC,gBAAgB,GAAGT,YAAY,CAACU,qBAAqB,EAAE;EAC7D,IAAMC,iBAAiB,GAAGV,UAAU,CAACS,qBAAqB,EAAE;EAC5D,IAAME,kBAAkB,GAAGR,YAAY,CAACM,qBAAqB,EAAE;EAE/D,IAAIG,GAAG,GAAGd,UAAU,CAACc,GAAG,GAAGJ,gBAAgB,CAACK,MAAM,GAAGZ,WAAW;EAChE,IAAIa,IAAI,GAAGhB,UAAU,CAACgB,IAAI,GAAGZ,gBAAgB;EAE7C,IAAIU,GAAG,GAAGD,kBAAkB,CAACC,GAAG,EAAE;IAC9BA,GAAG,IAAIJ,gBAAgB,CAACK,MAAM,GAAGf,UAAU,CAACe,MAAM,GAAGZ,WAAW,GAAG,CAAC;EACxE;EAEA,IAAIa,IAAI,GAAGN,gBAAgB,CAACO,KAAK,GAAGJ,kBAAkB,CAACK,KAAK,EAAE;IAC1DF,IAAI,GAAGH,kBAAkB,CAACK,KAAK,GAAGR,gBAAgB,CAACO,KAAK,GAAGb,gBAAgB;EAC/E;EAEAU,GAAG,IAAIF,iBAAiB,CAACE,GAAG;EAC5BE,IAAI,IAAIJ,iBAAiB,CAACI,IAAI;EAE9Bf,YAAY,CAACM,KAAK,CAACC,OAAO,GAAG,GAAG;EAChCP,YAAY,CAACM,KAAK,CAACE,SAAS,uBAAgBO,IAAI,iBAAOF,GAAG,QAAK;AACnE"}

package/utils/styleObjectToString.d.ts

@@ -0,0 +1,2 @@
+import { CSSObject } from "@emotion/react";
+export declare const styleObjectToString: (styleObject: CSSObject) => string;

package/utils/styleObjectToString.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleObjectToString = void 0;
+var _reactStyleObjectToCss = _interopRequireDefault(require("react-style-object-to-css"));
+// @ts-ignore - There are no types "@types/react-style-object-to-css" for this lib.
+
+/*
+ * Converts CSS style objects to string
+ * Example:
+ *  { fontSize: '10px' } => "font-size: 10px"
+ * */
+var styleObjectToString = function styleObjectToString(styleObject) {
+  if (!styleObject) {
+    return styleObject;
+  }
+  return (0, _reactStyleObjectToCss.default)(styleObject);
+};
+exports.styleObjectToString = styleObjectToString;

package/utils/styleObjectToString.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["styleObjectToString","styleObject","reactToCSS"],"sources":["styleObjectToString.ts"],"sourcesContent":["// @ts-ignore - There are no types \"@types/react-style-object-to-css\" for this lib.\nimport reactToCSS from \"react-style-object-to-css\";\nimport { CSSObject } from \"@emotion/react\";\n\n/*\n * Converts CSS style objects to string\n * Example:\n *  { fontSize: '10px' } => \"font-size: 10px\"\n * */\nexport const styleObjectToString = (styleObject: CSSObject): string => {\n    if (!styleObject) {\n        return styleObject;\n    }\n    return reactToCSS(styleObject);\n};\n"],"mappings":";;;;;;;AACA;AADA;;AAIA;AACA;AACA;AACA;AACA;AACO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,WAAsB,EAAa;EACnE,IAAI,CAACA,WAAW,EAAE;IACd,OAAOA,WAAW;EACtB;EACA,OAAO,IAAAC,8BAAU,EAACD,WAAW,CAAC;AAClC,CAAC;AAAC"}

package/utils/toTypographyEmotionMap.d.ts

@@ -0,0 +1,3 @@
+import { ThemeEmotionMap } from "../types";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
+export declare const toTypographyEmotionMap: (css: (cssStyle: Record<string, any>) => string, theme: WebinyTheme) => ThemeEmotionMap | {};

package/utils/toTypographyEmotionMap.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toTypographyEmotionMap = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+/*
+ *  Creates a map of style key ID's and typography style objects that include 'className' property which contains the
+ *  CSS class name generated by the Emotion from typography styles object.
+ */
+var toTypographyEmotionMap = function toTypographyEmotionMap(css, theme) {
+  var _theme$styles;
+  var map = {};
+  var typographyStyles = (_theme$styles = theme.styles) === null || _theme$styles === void 0 ? void 0 : _theme$styles.typography;
+  if (!typographyStyles) {
+    return {};
+  }
+  for (var key in typographyStyles) {
+    var typographyTypeData = typographyStyles[key];
+    if (typographyTypeData) {
+      typographyTypeData.forEach(function (styleItem) {
+        // 'lx' (abbreviation of lexical) variable will lead to generate shorter class names.
+        // for example: instead of default 'css-181qz4b-453f345f'
+        // the last segment will always end with 'lx' or 'css-181qz4b-lx'
+        var lx = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleItem), {}, {
+          className: [/*#__PURE__*/css(styleItem.styles, "label:lx;")].filter(Boolean).join(" ")
+        });
+        map[styleItem.id] = lx;
+      });
+    }
+  }
+  return map;
+};
+exports.toTypographyEmotionMap = toTypographyEmotionMap;

package/utils/toTypographyEmotionMap.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toTypographyEmotionMap","css","theme","map","typographyStyles","styles","typography","key","typographyTypeData","forEach","styleItem","lx","className","filter","Boolean","join","id"],"sources":["toTypographyEmotionMap.ts"],"sourcesContent":["import { ThemeEmotionMap, TypographyHTMLTag } from \"~/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\n\n/*\n *  Creates a map of style key ID's and typography style objects that include 'className' property which contains the\n *  CSS class name generated by the Emotion from typography styles object.\n */\nexport const toTypographyEmotionMap = (\n    css: (cssStyle: Record<string, any>) => string,\n    theme: WebinyTheme\n): ThemeEmotionMap | {} => {\n    const map: ThemeEmotionMap = {};\n    const typographyStyles = theme.styles?.typography;\n    if (!typographyStyles) {\n        return {};\n    }\n\n    for (const key in typographyStyles) {\n        const typographyTypeData = typographyStyles[key] as {\n            id: string;\n            tag: TypographyHTMLTag;\n            name: string;\n            styles: Record<string, any>;\n        }[];\n        if (typographyTypeData) {\n            typographyTypeData.forEach(styleItem => {\n                // 'lx' (abbreviation of lexical) variable will lead to generate shorter class names.\n                // for example: instead of default 'css-181qz4b-453f345f'\n                // the last segment will always end with 'lx' or 'css-181qz4b-lx'\n                const lx = {\n                    ...styleItem,\n                    className: [css(styleItem.styles)].filter(Boolean).join(\" \")\n                };\n                map[styleItem.id] = lx;\n            });\n        }\n    }\n\n    return map;\n};\n"],"mappings":";;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAC/BC,GAA8C,EAC9CC,KAAkB,EACK;EAAA;EACvB,IAAMC,GAAoB,GAAG,CAAC,CAAC;EAC/B,IAAMC,gBAAgB,oBAAGF,KAAK,CAACG,MAAM,kDAAZ,cAAcC,UAAU;EACjD,IAAI,CAACF,gBAAgB,EAAE;IACnB,OAAO,CAAC,CAAC;EACb;EAEA,KAAK,IAAMG,GAAG,IAAIH,gBAAgB,EAAE;IAChC,IAAMI,kBAAkB,GAAGJ,gBAAgB,CAACG,GAAG,CAK5C;IACH,IAAIC,kBAAkB,EAAE;MACpBA,kBAAkB,CAACC,OAAO,CAAC,UAAAC,SAAS,EAAI;QACpC;QACA;QACA;QACA,IAAMC,EAAE,+DACDD,SAAS;UACZE,SAAS,EAAE,cAACX,GAAG,CAACS,SAAS,CAACL,MAAM,cAAC,CAAC,CAACQ,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG;QAAC,EAC/D;QACDZ,GAAG,CAACO,SAAS,CAACM,EAAE,CAAC,GAAGL,EAAE;MAC1B,CAAC,CAAC;IACN;EACJ;EAEA,OAAOR,GAAG;AACd,CAAC;AAAC"}