@webiny/lexical-editor 0.0.0-unstable.d65ec29d44

package/ui/DropDown.js

@@ -0,0 +1,168 @@
+"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.DropDown = DropDown;
+exports.DropDownItem = DropDownItem;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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 DropDownContext = /*#__PURE__*/React.createContext(null);
+function DropDownItem(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    onClick = _ref.onClick,
+    title = _ref.title;
+  var ref = (0, React.useRef)(null);
+  var dropDownContext = React.useContext(DropDownContext);
+  if (dropDownContext === null) {
+    throw new Error("DropDownItem must be used within a DropDown");
+  }
+  var registerItem = dropDownContext.registerItem;
+  (0, React.useEffect)(function () {
+    if (ref && ref.current) {
+      registerItem(ref);
+    }
+  }, [ref, registerItem]);
+  return /*#__PURE__*/React.createElement("button", {
+    className: className,
+    onClick: onClick,
+    ref: ref,
+    title: title
+  }, children);
+}
+function DropDownItems(_ref2) {
+  var children = _ref2.children,
+    dropDownRef = _ref2.dropDownRef,
+    onClose = _ref2.onClose;
+  var _useState = (0, React.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = (0, React.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    highlightedItem = _useState4[0],
+    setHighlightedItem = _useState4[1];
+  var registerItem = (0, React.useCallback)(function (itemRef) {
+    setItems(function (prev) {
+      return prev ? [].concat((0, _toConsumableArray2.default)(prev), [itemRef]) : [itemRef];
+    });
+  }, [setItems]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!items) {
+      return;
+    }
+    var key = event.key;
+    if (["Escape", "ArrowUp", "ArrowDown", "Tab"].includes(key)) {
+      event.preventDefault();
+    }
+    if (key === "Escape" || key === "Tab") {
+      onClose();
+    } else if (key === "ArrowUp") {
+      setHighlightedItem(function (prev) {
+        if (!prev) {
+          return items[0];
+        }
+        var index = items.indexOf(prev) - 1;
+        return items[index === -1 ? items.length - 1 : index];
+      });
+    } else if (key === "ArrowDown") {
+      setHighlightedItem(function (prev) {
+        if (!prev) {
+          return items[0];
+        }
+        return items[items.indexOf(prev) + 1];
+      });
+    }
+  };
+  var contextValue = (0, React.useMemo)(function () {
+    return {
+      registerItem: registerItem
+    };
+  }, [registerItem]);
+  (0, React.useEffect)(function () {
+    if (items && !highlightedItem) {
+      setHighlightedItem(items[0]);
+    }
+    if (highlightedItem && highlightedItem.current) {
+      highlightedItem.current.focus();
+    }
+  }, [items, highlightedItem]);
+  return /*#__PURE__*/React.createElement(DropDownContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lexical-dropdown",
+    ref: dropDownRef !== null && dropDownRef !== void 0 ? dropDownRef : null,
+    onKeyDown: handleKeyDown
+  }, children));
+}
+function DropDown(_ref3) {
+  var _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    buttonLabel = _ref3.buttonLabel,
+    buttonAriaLabel = _ref3.buttonAriaLabel,
+    buttonClassName = _ref3.buttonClassName,
+    buttonIconClassName = _ref3.buttonIconClassName,
+    children = _ref3.children,
+    stopCloseOnClickSelf = _ref3.stopCloseOnClickSelf;
+  var buttonRef = (0, React.useRef)(null);
+  var _useState5 = (0, React.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    showDropDown = _useState6[0],
+    setShowDropDown = _useState6[1];
+  var handleClose = function handleClose() {
+    setShowDropDown(false);
+    if (buttonRef && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  };
+  (0, React.useEffect)(function () {
+    var button = buttonRef.current;
+    if (button === null || !showDropDown) {
+      return;
+    }
+    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);
+    };
+  }, [buttonRef, showDropDown, stopCloseOnClickSelf]);
+  return /*#__PURE__*/React.createElement("button", {
+    style: {
+      position: "relative"
+    },
+    disabled: disabled,
+    "aria-label": buttonAriaLabel || buttonLabel,
+    className: buttonClassName,
+    onClick: function onClick() {
+      return setShowDropDown(!showDropDown);
+    },
+    ref: buttonRef
+  }, buttonIconClassName && /*#__PURE__*/React.createElement("span", {
+    className: buttonIconClassName
+  }), buttonLabel && /*#__PURE__*/React.createElement("span", {
+    className: "text dropdown-button-text"
+  }, buttonLabel), /*#__PURE__*/React.createElement("i", {
+    className: "chevron-down"
+  }), showDropDown && /*#__PURE__*/React.createElement("div", {
+    className: "lexical-dropdown-container"
+  }, /*#__PURE__*/React.createElement(DropDownItems, {
+    onClose: handleClose
+  }, children)));
+}

package/ui/DropDown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","DropDownContext","createContext","DropDownItem","_ref","children","className","onClick","title","ref","useRef","dropDownContext","useContext","Error","registerItem","useEffect","current","createElement","DropDownItems","_ref2","dropDownRef","onClose","_useState","useState","_useState2","_slicedToArray2","default","items","setItems","_useState3","_useState4","highlightedItem","setHighlightedItem","useCallback","itemRef","prev","concat","_toConsumableArray2","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","useMemo","focus","Provider","value","onKeyDown","DropDown","_ref3","_ref3$disabled","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","_useState5","_useState6","showDropDown","setShowDropDown","handleClose","button","handle","target","contains","document","addEventListener","removeEventListener","style","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    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\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 className=\"lexical-dropdown\" ref={dropDownRef ?? null} onKeyDown={handleKeyDown}>\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}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: 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 onClose={handleClose}>{children}</DropDownItems>\n                </div>\n            )}\n        </button>\n    );\n}\n"],"mappings":"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"}

package/ui/Input.css

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}

package/ui/LinkPreview.css

@@ -0,0 +1,69 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+@keyframes glimmer-animation {
+  0% {
+    background: #f9f9f9;
+  }
+  .50% {
+    background: #eeeeee;
+  }
+  .100% {
+    background: #f9f9f9;
+  }
+}
+
+.LinkPreview__container {
+  padding-bottom: 12px;
+}
+
+.LinkPreview__imageWrapper {
+  text-align: center;
+}
+
+.LinkPreview__image {
+  max-width: 100%;
+  max-height: 250px;
+  margin: auto;
+}
+
+.LinkPreview__title {
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 4px;
+}
+
+.LinkPreview__description {
+  color: #999;
+  font-size: 90%;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 4px;
+}
+
+.LinkPreview__domain {
+  color: #999;
+  font-size: 90%;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 4px;
+}
+
+.LinkPreview__glimmer {
+  background: #f9f9f9;
+  border-radius: 8px;
+  height: 18px;
+  margin-bottom: 8px;
+  margin-left: 12px;
+  margin-right: 12px;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: glimmer-animation;
+}

package/ui/LinkPreview.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import "./LinkPreview.css";
+export declare function LinkPreview({ url }: Readonly<{
+    url: string;
+}>): JSX.Element;

package/ui/LinkPreview.js

@@ -0,0 +1,101 @@
+"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.LinkPreview = LinkPreview;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+require("./LinkPreview.css");
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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.
+ *
+ */
+
+// Cached responses or running request promises
+var PREVIEW_CACHE = {};
+var URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+function useSuspenseRequest(url) {
+  var cached = PREVIEW_CACHE[url];
+  if (!url.match(URL_MATCHER)) {
+    return {
+      preview: null
+    };
+  }
+  if (!cached) {
+    cached = PREVIEW_CACHE[url] = fetch("/api/link-preview?url=".concat(encodeURI(url))).then(function (response) {
+      return response.json();
+    }).then(function (preview) {
+      PREVIEW_CACHE[url] = preview;
+      return preview;
+    }).catch(function () {
+      PREVIEW_CACHE[url] = {
+        preview: null
+      };
+    });
+  }
+  if (cached instanceof Promise) {
+    throw cached;
+  }
+  return cached;
+}
+function LinkPreviewContent(_ref) {
+  var url = _ref.url;
+  var _useSuspenseRequest = useSuspenseRequest(url),
+    preview = _useSuspenseRequest.preview;
+  if (preview === null) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "LinkPreview__container"
+  }, preview.img && /*#__PURE__*/React.createElement("div", {
+    className: "LinkPreview__imageWrapper"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: preview.img,
+    alt: preview.title,
+    className: "LinkPreview__image"
+  })), preview.domain && /*#__PURE__*/React.createElement("div", {
+    className: "LinkPreview__domain"
+  }, preview.domain), preview.title && /*#__PURE__*/React.createElement("div", {
+    className: "LinkPreview__title"
+  }, preview.title), preview.description && /*#__PURE__*/React.createElement("div", {
+    className: "LinkPreview__description"
+  }, preview.description));
+}
+function Glimmer(props) {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "LinkPreview__glimmer"
+  }, props, {
+    style: (0, _objectSpread2.default)({
+      animationDelay: String((props.index || 0) * 300)
+    }, props.style || {})
+  }));
+}
+function LinkPreview(_ref2) {
+  var url = _ref2.url;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Glimmer, {
+      style: {
+        height: "80px"
+      },
+      index: 0
+    }), /*#__PURE__*/React.createElement(Glimmer, {
+      style: {
+        width: "60%"
+      },
+      index: 1
+    }), /*#__PURE__*/React.createElement(Glimmer, {
+      style: {
+        width: "80%"
+      },
+      index: 2
+    }))
+  }, /*#__PURE__*/React.createElement(LinkPreviewContent, {
+    url: url
+  }));
+}

package/ui/LinkPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","React","_interopRequireWildcard","PREVIEW_CACHE","URL_MATCHER","useSuspenseRequest","url","cached","match","preview","fetch","concat","encodeURI","then","response","json","catch","Promise","LinkPreviewContent","_ref","_useSuspenseRequest","createElement","className","img","src","alt","title","domain","description","Glimmer","props","Object","assign","style","_objectSpread2","default","animationDelay","String","index","LinkPreview","_ref2","Suspense","fallback","Fragment","height","width"],"sources":["LinkPreview.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 \"./LinkPreview.css\";\n\nimport * as React from \"react\";\nimport { CSSProperties, Suspense } from \"react\";\n\ntype Preview = {\n    title: string;\n    description: string;\n    img: string;\n    domain: string;\n} | null;\n\n// Cached responses or running request promises\nconst PREVIEW_CACHE: Record<string, Promise<Preview> | { preview: Preview }> = {};\n\nconst URL_MATCHER =\n    /((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;\n\nfunction useSuspenseRequest(url: string) {\n    let cached = PREVIEW_CACHE[url];\n\n    if (!url.match(URL_MATCHER)) {\n        return { preview: null };\n    }\n\n    if (!cached) {\n        cached = PREVIEW_CACHE[url] = fetch(`/api/link-preview?url=${encodeURI(url)}`)\n            .then(response => response.json())\n            .then(preview => {\n                PREVIEW_CACHE[url] = preview;\n                return preview;\n            })\n            .catch(() => {\n                PREVIEW_CACHE[url] = { preview: null };\n            });\n    }\n\n    if (cached instanceof Promise) {\n        throw cached;\n    }\n\n    return cached;\n}\n\nfunction LinkPreviewContent({\n    url\n}: Readonly<{\n    url: string;\n}>): JSX.Element | null {\n    const { preview } = useSuspenseRequest(url);\n    if (preview === null) {\n        return null;\n    }\n    return (\n        <div className=\"LinkPreview__container\">\n            {preview.img && (\n                <div className=\"LinkPreview__imageWrapper\">\n                    <img src={preview.img} alt={preview.title} className=\"LinkPreview__image\" />\n                </div>\n            )}\n            {preview.domain && <div className=\"LinkPreview__domain\">{preview.domain}</div>}\n            {preview.title && <div className=\"LinkPreview__title\">{preview.title}</div>}\n            {preview.description && (\n                <div className=\"LinkPreview__description\">{preview.description}</div>\n            )}\n        </div>\n    );\n}\n\nfunction Glimmer(props: { style: CSSProperties; index: number }): JSX.Element {\n    return (\n        <div\n            className=\"LinkPreview__glimmer\"\n            {...props}\n            style={{\n                animationDelay: String((props.index || 0) * 300),\n                ...(props.style || {})\n            }}\n        />\n    );\n}\n\nexport function LinkPreview({\n    url\n}: Readonly<{\n    url: string;\n}>): JSX.Element {\n    return (\n        <Suspense\n            fallback={\n                <>\n                    <Glimmer style={{ height: \"80px\" }} index={0} />\n                    <Glimmer style={{ width: \"60%\" }} index={1} />\n                    <Glimmer style={{ width: \"80%\" }} index={2} />\n                </>\n            }\n        >\n            <LinkPreviewContent url={url} />\n        </Suspense>\n    );\n}\n"],"mappings":"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"}

package/ui/Placeholder.css

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Placeholder__root {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 0px;
+  left: 15px;
+  right: 28px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}

package/ui/Placeholder.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+import "./Placeholder.css";
+import { ReactNode } from "react";
+export declare function Placeholder({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): JSX.Element;

package/ui/Placeholder.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Placeholder = Placeholder;
+require("./Placeholder.css");
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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.
+ *
+ */
+
+function Placeholder(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className || "Placeholder__root"
+  }, children);
+}

package/ui/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","React","_interopRequireWildcard","Placeholder","_ref","children","className","createElement"],"sources":["Placeholder.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 \"./Placeholder.css\";\n\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport function Placeholder({\n    children,\n    className\n}: {\n    children: ReactNode;\n    className?: string;\n}): JSX.Element {\n    return <div className={className || \"Placeholder__root\"}>{children}</div>;\n}\n"],"mappings":";;;;;;;AAQAA,OAAA;AAEA,IAAAC,KAAA,GAAAC,uBAAA,CAAAF,OAAA;AAVA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOO,SAASG,WAAWA,CAAAC,IAAA,EAMX;EAAA,IALZC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;EAKT,oBAAOL,KAAA,CAAAM,aAAA;IAAKD,SAAS,EAAEA,SAAS,IAAI;EAAoB,GAAED,QAAQ,CAAO;AAC7E"}

package/ui/TextInput.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import "./Input.css";
+declare type Props = Readonly<{
+    "data-test-id"?: string;
+    label: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    value: string;
+}>;
+export default function TextInput({ label, value, onChange, placeholder, "data-test-id": dataTestId }: Props): JSX.Element;
+export {};

package/ui/TextInput.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TextInput;
+require("./Input.css");
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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.
+ *
+ */
+
+function TextInput(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    dataTestId = _ref["data-test-id"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Input__wrapper"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "Input__label"
+  }, label), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: "Input__input",
+    placeholder: placeholder,
+    value: value,
+    onChange: function onChange(e) {
+      _onChange(e.target.value);
+    },
+    "data-test-id": dataTestId
+  }));
+}

package/ui/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","React","_interopRequireWildcard","TextInput","_ref","label","value","onChange","_ref$placeholder","placeholder","dataTestId","createElement","className","type","e","target"],"sources":["TextInput.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 \"./Input.css\";\n\nimport * as React from \"react\";\n\ntype Props = Readonly<{\n    \"data-test-id\"?: string;\n    label: string;\n    onChange: (val: string) => void;\n    placeholder?: string;\n    value: string;\n}>;\n\nexport default function TextInput({\n    label,\n    value,\n    onChange,\n    placeholder = \"\",\n    \"data-test-id\": dataTestId\n}: Props): JSX.Element {\n    return (\n        <div className=\"Input__wrapper\">\n            <label className=\"Input__label\">{label}</label>\n            <input\n                type=\"text\"\n                className=\"Input__input\"\n                placeholder={placeholder}\n                value={value}\n                onChange={e => {\n                    onChange(e.target.value);\n                }}\n                data-test-id={dataTestId}\n            />\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAQAA,OAAA;AAEA,IAAAC,KAAA,GAAAC,uBAAA,CAAAF,OAAA;AAVA;AACA;AACA;AACA;AACA;AACA;AACA;;AAce,SAASG,SAASA,CAAAC,IAAA,EAMV;EAAA,IALnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,gBAAA,GAAAJ,IAAA,CACRK,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,EAAE,GAAAA,gBAAA;IACAE,UAAU,GAAAN,IAAA,CAA1B,cAAc;EAEd,oBACIH,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAgB,gBAC3BX,KAAA,CAAAU,aAAA;IAAOC,SAAS,EAAC;EAAc,GAAEP,KAAK,CAAS,eAC/CJ,KAAA,CAAAU,aAAA;IACIE,IAAI,EAAC,MAAM;IACXD,SAAS,EAAC,cAAc;IACxBH,WAAW,EAAEA,WAAY;IACzBH,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAE,SAAAA,SAAAO,CAAC,EAAI;MACXP,SAAQ,CAACO,CAAC,CAACC,MAAM,CAACT,KAAK,CAAC;IAC5B,CAAE;IACF,gBAAcI;EAAW,EAC3B,CACA;AAEd"}

package/utils/generateInitialLexicalValue.d.ts

@@ -0,0 +1,5 @@
+import { LexicalValue } from "../types";
+/**
+ * @description Basic JSON data string that will initialize the editor.
+ */
+export declare const generateInitialLexicalValue: () => LexicalValue;

package/utils/generateInitialLexicalValue.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateInitialLexicalValue = void 0;
+/**
+ * @description Basic JSON data string that will initialize the editor.
+ */
+var generateInitialLexicalValue = function generateInitialLexicalValue() {
+  return JSON.stringify({
+    root: {
+      children: [{
+        children: [],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "paragraph",
+        version: 1
+      }],
+      direction: null,
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  });
+};
+exports.generateInitialLexicalValue = generateInitialLexicalValue;

package/utils/generateInitialLexicalValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateInitialLexicalValue","JSON","stringify","root","children","direction","format","indent","type","version","exports"],"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,2BAA2BA,CAAA,EAAuB;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;AAACC,OAAA,CAAAV,2BAAA,GAAAA,2BAAA"}

package/utils/getDOMRangeRect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="web" />
+/// <reference types="react" />
+/**
+ * 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.
+ *
+ */
+export declare function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect;

package/utils/getDOMRangeRect.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDOMRangeRect = getDOMRangeRect;
+/**
+ * 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.
+ *
+ */
+function getDOMRangeRect(nativeSelection, rootElement) {
+  var domRange = nativeSelection.getRangeAt(0);
+  var rect;
+  if (nativeSelection.anchorNode === rootElement) {
+    var inner = rootElement;
+    while (inner.firstElementChild != null) {
+      inner = inner.firstElementChild;
+    }
+    rect = inner.getBoundingClientRect();
+  } else {
+    rect = domRange.getBoundingClientRect();
+  }
+  return rect;
+}

package/utils/getDOMRangeRect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getDOMRangeRect","nativeSelection","rootElement","domRange","getRangeAt","rect","anchorNode","inner","firstElementChild","getBoundingClientRect"],"sources":["getDOMRangeRect.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 */\nexport function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect {\n    const domRange = nativeSelection.getRangeAt(0);\n\n    let rect;\n\n    if (nativeSelection.anchorNode === rootElement) {\n        let inner = rootElement;\n        while (inner.firstElementChild != null) {\n            inner = inner.firstElementChild as HTMLElement;\n        }\n        rect = inner.getBoundingClientRect();\n    } else {\n        rect = domRange.getBoundingClientRect();\n    }\n\n    return rect;\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAeA,CAACC,eAA0B,EAAEC,WAAwB,EAAW;EAC3F,IAAMC,QAAQ,GAAGF,eAAe,CAACG,UAAU,CAAC,CAAC,CAAC;EAE9C,IAAIC,IAAI;EAER,IAAIJ,eAAe,CAACK,UAAU,KAAKJ,WAAW,EAAE;IAC5C,IAAIK,KAAK,GAAGL,WAAW;IACvB,OAAOK,KAAK,CAACC,iBAAiB,IAAI,IAAI,EAAE;MACpCD,KAAK,GAAGA,KAAK,CAACC,iBAAgC;IAClD;IACAH,IAAI,GAAGE,KAAK,CAACE,qBAAqB,EAAE;EACxC,CAAC,MAAM;IACHJ,IAAI,GAAGF,QAAQ,CAACM,qBAAqB,EAAE;EAC3C;EAEA,OAAOJ,IAAI;AACf"}

package/utils/getSelectedNode.d.ts

@@ -0,0 +1,2 @@
+import { ElementNode, RangeSelection, TextNode } from "lexical";
+export declare function getSelectedNode(selection: RangeSelection): TextNode | ElementNode;