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

package/themes/webinyLexicalTheme.d.ts

@@ -0,0 +1,9 @@
+import type { EditorThemeClasses } from "lexical";
+import "./webinyLexicalTheme.css";
+import { ThemeEmotionMap } from "../types";
+export declare type WebinyTheme = {
+    styles?: Record<string, any>;
+    emotionMap?: ThemeEmotionMap;
+};
+export declare type WebinyEditorTheme = WebinyTheme & EditorThemeClasses;
+export declare const webinyEditorTheme: WebinyEditorTheme;

package/themes/webinyLexicalTheme.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinyEditorTheme = void 0;
+require("./webinyLexicalTheme.css");
+var webinyEditorTheme = {
+  styles: undefined,
+  emotionMap: undefined,
+  characterLimit: "WebinyLexical__characterLimit",
+  code: "WebinyLexical__code",
+  codeHighlight: {
+    atrule: "WebinyLexical__tokenAttr",
+    attr: "WebinyLexical__tokenAttr",
+    boolean: "WebinyLexical__tokenProperty",
+    builtin: "WebinyLexical__tokenSelector",
+    cdata: "WebinyLexical__tokenComment",
+    char: "WebinyLexical__tokenSelector",
+    class: "WebinyLexical__tokenFunction",
+    "class-name": "WebinyLexical__tokenFunction",
+    comment: "WebinyLexical__tokenComment",
+    constant: "WebinyLexical__tokenProperty",
+    deleted: "WebinyLexical__tokenProperty",
+    doctype: "WebinyLexical__tokenComment",
+    entity: "WebinyLexical__tokenOperator",
+    function: "WebinyLexical__tokenFunction",
+    important: "WebinyLexical__tokenVariable",
+    inserted: "WebinyLexical__tokenSelector",
+    keyword: "WebinyLexical__tokenAttr",
+    namespace: "WebinyLexical__tokenVariable",
+    number: "WebinyLexical__tokenProperty",
+    operator: "WebinyLexical__tokenOperator",
+    prolog: "WebinyLexical__tokenComment",
+    property: "WebinyLexical__tokenProperty",
+    punctuation: "WebinyLexical__tokenPunctuation",
+    regex: "WebinyLexical__tokenVariable",
+    selector: "WebinyLexical__tokenSelector",
+    string: "WebinyLexical__tokenSelector",
+    symbol: "WebinyLexical__tokenProperty",
+    tag: "WebinyLexical__tokenProperty",
+    url: "WebinyLexical__tokenOperator",
+    variable: "WebinyLexical__tokenVariable"
+  },
+  embedBlock: {
+    base: "WebinyLexical__embedBlock",
+    focus: "WebinyLexical__embedBlockFocus"
+  },
+  hashtag: "WebinyLexical__hashtag",
+  heading: {
+    h1: "WebinyLexical__h1",
+    h2: "WebinyLexical__h2",
+    h3: "WebinyLexical__h3",
+    h4: "WebinyLexical__h4",
+    h5: "WebinyLexical__h5",
+    h6: "WebinyLexical__h6"
+  },
+  link: "WebinyLexical__link",
+  list: {
+    listitem: "WebinyLexical__listItem",
+    listitemChecked: "WebinyLexical__listItemChecked",
+    listitemUnchecked: "WebinyLexical__listItemUnchecked",
+    nested: {
+      listitem: "WebinyLexical__nestedListItem"
+    },
+    olDepth: ["WebinyLexical__ol1", "WebinyLexical__ol2", "WebinyLexical__ol3", "WebinyLexical__ol4", "WebinyLexical__ol5"],
+    ul: "WebinyLexical__ul"
+  },
+  ltr: "WebinyLexical__ltr",
+  mark: "WebinyLexical__mark",
+  markOverlap: "WebinyLexical__markOverlap",
+  paragraph: "WebinyLexical__paragraph",
+  quote: "WebinyLexical__quote",
+  rtl: "WebinyLexical__rtl",
+  text: {
+    bold: "WebinyLexical__textBold",
+    code: "WebinyLexical__textCode",
+    italic: "WebinyLexical__textItalic",
+    strikethrough: "WebinyLexical__textStrikethrough",
+    subscript: "WebinyLexical__textSubscript",
+    superscript: "WebinyLexical__textSuperscript",
+    underline: "WebinyLexical__textUnderline",
+    underlineStrikethrough: "WebinyLexical__textUnderlineStrikethrough"
+  },
+  fontColorText: "WebinyLexical__fontColorText"
+};
+exports.webinyEditorTheme = webinyEditorTheme;

package/themes/webinyLexicalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyEditorTheme","styles","undefined","emotionMap","characterLimit","code","codeHighlight","atrule","attr","boolean","builtin","cdata","char","class","comment","constant","deleted","doctype","entity","function","important","inserted","keyword","namespace","number","operator","prolog","property","punctuation","regex","selector","string","symbol","tag","url","variable","embedBlock","base","focus","hashtag","heading","h1","h2","h3","h4","h5","h6","link","list","listitem","listitemChecked","listitemUnchecked","nested","olDepth","ul","ltr","mark","markOverlap","paragraph","quote","rtl","text","bold","italic","strikethrough","subscript","superscript","underline","underlineStrikethrough","fontColorText"],"sources":["webinyLexicalTheme.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\n\nimport \"./webinyLexicalTheme.css\";\nimport { ThemeEmotionMap } from \"~/types\";\n\nexport type WebinyTheme = {\n    styles?: Record<string, any>;\n    emotionMap?: ThemeEmotionMap;\n};\n\nexport type WebinyEditorTheme = WebinyTheme & EditorThemeClasses;\n\nexport const webinyEditorTheme: WebinyEditorTheme = {\n    styles: undefined,\n    emotionMap: undefined,\n    characterLimit: \"WebinyLexical__characterLimit\",\n    code: \"WebinyLexical__code\",\n    codeHighlight: {\n        atrule: \"WebinyLexical__tokenAttr\",\n        attr: \"WebinyLexical__tokenAttr\",\n        boolean: \"WebinyLexical__tokenProperty\",\n        builtin: \"WebinyLexical__tokenSelector\",\n        cdata: \"WebinyLexical__tokenComment\",\n        char: \"WebinyLexical__tokenSelector\",\n        class: \"WebinyLexical__tokenFunction\",\n        \"class-name\": \"WebinyLexical__tokenFunction\",\n        comment: \"WebinyLexical__tokenComment\",\n        constant: \"WebinyLexical__tokenProperty\",\n        deleted: \"WebinyLexical__tokenProperty\",\n        doctype: \"WebinyLexical__tokenComment\",\n        entity: \"WebinyLexical__tokenOperator\",\n        function: \"WebinyLexical__tokenFunction\",\n        important: \"WebinyLexical__tokenVariable\",\n        inserted: \"WebinyLexical__tokenSelector\",\n        keyword: \"WebinyLexical__tokenAttr\",\n        namespace: \"WebinyLexical__tokenVariable\",\n        number: \"WebinyLexical__tokenProperty\",\n        operator: \"WebinyLexical__tokenOperator\",\n        prolog: \"WebinyLexical__tokenComment\",\n        property: \"WebinyLexical__tokenProperty\",\n        punctuation: \"WebinyLexical__tokenPunctuation\",\n        regex: \"WebinyLexical__tokenVariable\",\n        selector: \"WebinyLexical__tokenSelector\",\n        string: \"WebinyLexical__tokenSelector\",\n        symbol: \"WebinyLexical__tokenProperty\",\n        tag: \"WebinyLexical__tokenProperty\",\n        url: \"WebinyLexical__tokenOperator\",\n        variable: \"WebinyLexical__tokenVariable\"\n    },\n    embedBlock: {\n        base: \"WebinyLexical__embedBlock\",\n        focus: \"WebinyLexical__embedBlockFocus\"\n    },\n    hashtag: \"WebinyLexical__hashtag\",\n    heading: {\n        h1: \"WebinyLexical__h1\",\n        h2: \"WebinyLexical__h2\",\n        h3: \"WebinyLexical__h3\",\n        h4: \"WebinyLexical__h4\",\n        h5: \"WebinyLexical__h5\",\n        h6: \"WebinyLexical__h6\"\n    },\n    link: \"WebinyLexical__link\",\n    list: {\n        listitem: \"WebinyLexical__listItem\",\n        listitemChecked: \"WebinyLexical__listItemChecked\",\n        listitemUnchecked: \"WebinyLexical__listItemUnchecked\",\n        nested: {\n            listitem: \"WebinyLexical__nestedListItem\"\n        },\n        olDepth: [\n            \"WebinyLexical__ol1\",\n            \"WebinyLexical__ol2\",\n            \"WebinyLexical__ol3\",\n            \"WebinyLexical__ol4\",\n            \"WebinyLexical__ol5\"\n        ],\n        ul: \"WebinyLexical__ul\"\n    },\n    ltr: \"WebinyLexical__ltr\",\n    mark: \"WebinyLexical__mark\",\n    markOverlap: \"WebinyLexical__markOverlap\",\n    paragraph: \"WebinyLexical__paragraph\",\n    quote: \"WebinyLexical__quote\",\n    rtl: \"WebinyLexical__rtl\",\n    text: {\n        bold: \"WebinyLexical__textBold\",\n        code: \"WebinyLexical__textCode\",\n        italic: \"WebinyLexical__textItalic\",\n        strikethrough: \"WebinyLexical__textStrikethrough\",\n        subscript: \"WebinyLexical__textSubscript\",\n        superscript: \"WebinyLexical__textSuperscript\",\n        underline: \"WebinyLexical__textUnderline\",\n        underlineStrikethrough: \"WebinyLexical__textUnderlineStrikethrough\"\n    },\n    fontColorText: \"WebinyLexical__fontColorText\"\n};\n"],"mappings":";;;;;;AAEA;AAUO,IAAMA,iBAAoC,GAAG;EAChDC,MAAM,EAAEC,SAAS;EACjBC,UAAU,EAAED,SAAS;EACrBE,cAAc,EAAE,+BAA+B;EAC/CC,IAAI,EAAE,qBAAqB;EAC3BC,aAAa,EAAE;IACXC,MAAM,EAAE,0BAA0B;IAClCC,IAAI,EAAE,0BAA0B;IAChCC,OAAO,EAAE,8BAA8B;IACvCC,OAAO,EAAE,8BAA8B;IACvCC,KAAK,EAAE,6BAA6B;IACpCC,IAAI,EAAE,8BAA8B;IACpCC,KAAK,EAAE,8BAA8B;IACrC,YAAY,EAAE,8BAA8B;IAC5CC,OAAO,EAAE,6BAA6B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,OAAO,EAAE,8BAA8B;IACvCC,OAAO,EAAE,6BAA6B;IACtCC,MAAM,EAAE,8BAA8B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,SAAS,EAAE,8BAA8B;IACzCC,QAAQ,EAAE,8BAA8B;IACxCC,OAAO,EAAE,0BAA0B;IACnCC,SAAS,EAAE,8BAA8B;IACzCC,MAAM,EAAE,8BAA8B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,MAAM,EAAE,6BAA6B;IACrCC,QAAQ,EAAE,8BAA8B;IACxCC,WAAW,EAAE,iCAAiC;IAC9CC,KAAK,EAAE,8BAA8B;IACrCC,QAAQ,EAAE,8BAA8B;IACxCC,MAAM,EAAE,8BAA8B;IACtCC,MAAM,EAAE,8BAA8B;IACtCC,GAAG,EAAE,8BAA8B;IACnCC,GAAG,EAAE,8BAA8B;IACnCC,QAAQ,EAAE;EACd,CAAC;EACDC,UAAU,EAAE;IACRC,IAAI,EAAE,2BAA2B;IACjCC,KAAK,EAAE;EACX,CAAC;EACDC,OAAO,EAAE,wBAAwB;EACjCC,OAAO,EAAE;IACLC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE;EACR,CAAC;EACDC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE;IACFC,QAAQ,EAAE,yBAAyB;IACnCC,eAAe,EAAE,gCAAgC;IACjDC,iBAAiB,EAAE,kCAAkC;IACrDC,MAAM,EAAE;MACJH,QAAQ,EAAE;IACd,CAAC;IACDI,OAAO,EAAE,CACL,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,CACvB;IACDC,EAAE,EAAE;EACR,CAAC;EACDC,GAAG,EAAE,oBAAoB;EACzBC,IAAI,EAAE,qBAAqB;EAC3BC,WAAW,EAAE,4BAA4B;EACzCC,SAAS,EAAE,0BAA0B;EACrCC,KAAK,EAAE,sBAAsB;EAC7BC,GAAG,EAAE,oBAAoB;EACzBC,IAAI,EAAE;IACFC,IAAI,EAAE,yBAAyB;IAC/BzD,IAAI,EAAE,yBAAyB;IAC/B0D,MAAM,EAAE,2BAA2B;IACnCC,aAAa,EAAE,kCAAkC;IACjDC,SAAS,EAAE,8BAA8B;IACzCC,WAAW,EAAE,gCAAgC;IAC7CC,SAAS,EAAE,8BAA8B;IACzCC,sBAAsB,EAAE;EAC5B,CAAC;EACDC,aAAa,EAAE;AACnB,CAAC;AAAC"}

package/types.d.ts

@@ -0,0 +1,61 @@
+import { ElementNode, LexicalNode, NodeSelection, RangeSelection, TextNode } from "lexical";
+import { ListType } from "@lexical/list";
+import { CSSObject } from "@emotion/react";
+export declare type ToolbarType = "heading" | "paragraph" | string;
+export declare type LexicalValue = string;
+export { FontColorPicker } from "./components/ToolbarActions/FontColorAction";
+export declare type LexicalTextType = ListType | "paragraph" | "heading" | "quoteblock" | "bullet" | "number" | "link" | undefined;
+export declare type TextFormatting = {
+    bold: boolean;
+    underline: boolean;
+    italic: boolean;
+    code: boolean;
+};
+export declare type NodeState = {
+    isSelected: boolean;
+};
+export declare type ToolbarState = {
+    bold: boolean;
+    underline: boolean;
+    italic: boolean;
+    code: boolean;
+    link: NodeState;
+    typography: NodeState;
+    fontColor: NodeState;
+    list: NodeState;
+    quote: NodeState;
+    textType: LexicalTextType;
+};
+export declare type TextBlockSelection = {
+    elementKey?: string;
+    selection: RangeSelection | NodeSelection | null;
+    element: LexicalNode;
+    parent: ElementNode | null;
+    node: ElementNode | TextNode;
+    anchorNode: ElementNode | TextNode;
+    isElementDom: boolean;
+    state: ToolbarState | undefined;
+};
+export declare type ListHtmlTag = "ol" | "ul";
+export declare type HeadingHtmlTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export declare type ParagraphHtmlTag = "p";
+export declare type QuoteBlockHtmlTag = "quoteblock";
+export declare type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;
+export declare type TypographyValue = {
+    css: CSSObject;
+    id: string;
+    tag: TypographyHTMLTag;
+    name: string;
+};
+export interface WebinyThemeNode {
+    getStyleId: () => string;
+}
+export declare type ThemeEmotionMap = {
+    [styleId: string]: {
+        id: string;
+        tag: TypographyHTMLTag;
+        name: string;
+        styles: Record<string, any>;
+        className: string;
+    };
+};

package/types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FontColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _FontColorAction.FontColorPicker;
+  }
+});
+var _FontColorAction = require("./components/ToolbarActions/FontColorAction");

package/types.js.map

@@ -0,0 +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"}

package/ui/Divider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Divider(): JSX.Element;

package/ui/Divider.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+var _react = _interopRequireDefault(require("react"));
+function Divider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "divider"
+  });
+}

package/ui/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Divider"],"sources":["Divider.tsx"],"sourcesContent":["import React from \"react\";\n\nexport function Divider(): JSX.Element {\n    return <div className=\"divider\"></div>;\n}\n"],"mappings":";;;;;;;AAAA;AAEO,SAASA,OAAO,GAAgB;EACnC,oBAAO;IAAK,SAAS,EAAC;EAAS,EAAO;AAC1C"}

package/ui/DropDown.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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="web" />
+import { ReactNode } from "react";
+import * as React from "react";
+export declare function DropDownItem({ children, className, onClick, title }: {
+    children: React.ReactNode;
+    className: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+}): JSX.Element;
+export declare function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf, showScroll }: {
+    disabled?: boolean;
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    buttonIconClassName?: string;
+    buttonLabel?: string;
+    children: ReactNode;
+    stopCloseOnClickSelf?: boolean;
+    showScroll?: boolean;
+}): JSX.Element;

package/ui/DropDown.js

@@ -0,0 +1,173 @@
+"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,
+    _ref2$showScroll = _ref2.showScroll,
+    showScroll = _ref2$showScroll === void 0 ? true : _ref2$showScroll,
+    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 ".concat(showScroll ? "" : "no-scroll"),
+    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,
+    _ref3$showScroll = _ref3.showScroll,
+    showScroll = _ref3$showScroll === void 0 ? true : _ref3$showScroll;
+  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, {
+    showScroll: showScroll,
+    onClose: handleClose
+  }, children)));
+}

package/ui/DropDown.js.map

@@ -0,0 +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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"}

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
+  }));
+}