@arbidocs/blocks 0.4.84 → 0.4.86

package/dist/MailBodyEditor-5PIQLYVY.js

@@ -0,0 +1,217 @@
+"use client";
+import './chunk-VUNV25KB.js';
+import { useState, useEffect } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
+import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND } from '@lexical/list';
+import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $getRoot, $createParagraphNode, $createTextNode, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';
+import { Bold, Italic, Underline, List, ListOrdered, Link, Undo2, Redo2 } from 'lucide-react';
+import { Tooltip, TooltipTrigger, Button, TooltipContent } from '@arbidocs/react/ui';
+import DOMPurify from 'dompurify';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Toolbar({ disabled }) {
+  const [editor] = useLexicalComposerContext();
+  const [addingLink, setAddingLink] = useState(false);
+  const [url, setUrl] = useState("");
+  const [formats, setFormats] = useState({});
+  useEffect(
+    () => editor.registerUpdateListener(
+      ({ editorState }) => editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return;
+        let parent = selection.anchor.getNode().getParent();
+        while (parent && !$isListNode(parent)) parent = parent.getParent();
+        const list = $isListNode(parent) ? parent.getListType() : null;
+        setFormats({
+          Bold: selection.hasFormat("bold"),
+          Italic: selection.hasFormat("italic"),
+          Underline: selection.hasFormat("underline"),
+          "Bulleted list": list === "bullet",
+          "Numbered list": list === "number"
+        });
+      })
+    ),
+    [editor]
+  );
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  const buttons = [
+    { label: "Bold", icon: Bold, run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold") },
+    {
+      label: "Italic",
+      icon: Italic,
+      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+    },
+    {
+      label: "Underline",
+      icon: Underline,
+      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
+    },
+    {
+      label: "Bulleted list",
+      icon: List,
+      run: () => editor.dispatchCommand(
+        formats["Bulleted list"] ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,
+        void 0
+      )
+    },
+    {
+      label: "Numbered list",
+      icon: ListOrdered,
+      run: () => editor.dispatchCommand(
+        formats["Numbered list"] ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,
+        void 0
+      )
+    },
+    { label: "Insert link", icon: Link, run: () => setAddingLink(!addingLink) },
+    { label: "Undo", icon: Undo2, run: () => editor.dispatchCommand(UNDO_COMMAND, void 0) },
+    { label: "Redo", icon: Redo2, run: () => editor.dispatchCommand(REDO_COMMAND, void 0) }
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": "Message formatting",
+        className: "flex flex-wrap gap-0.5 border-b border-border/60 py-1",
+        children: buttons.map(({ label, icon: Icon, run }) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              "aria-label": label,
+              "aria-pressed": formats[label],
+              disabled,
+              className: "size-7 p-1 text-primary aria-pressed:bg-primary/10",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: run,
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: label })
+        ] }, label))
+      }
+    ),
+    addingLink && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": "Link URL",
+          type: "url",
+          placeholder: "https://example.com",
+          value: url,
+          onChange: (event) => setUrl(event.target.value),
+          className: "min-w-0 flex-1 rounded border bg-background px-2 py-1 text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          disabled: disabled || !/^https?:\/\/\S+$/i.test(url),
+          onClick: () => {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+            editor.update(() => {
+              const selection = $getSelection();
+              if ($isRangeSelection(selection))
+                selection.anchor.set(
+                  selection.focus.key,
+                  selection.focus.offset,
+                  selection.focus.type
+                );
+            });
+            editor.focus();
+            setAddingLink(false);
+            setUrl("");
+          },
+          children: "Insert"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setAddingLink(false), children: "Cancel" })
+    ] })
+  ] });
+}
+function MailBodyEditor({
+  text,
+  html,
+  disabled,
+  onChange
+}) {
+  const [config] = useState(() => ({
+    namespace: "mail-body",
+    nodes: [ListNode, ListItemNode, LinkNode],
+    theme: {
+      text: { bold: "font-bold", italic: "italic", underline: "underline" },
+      list: { ul: "list-disc pl-6", ol: "list-decimal pl-6" },
+      link: "text-primary underline",
+      paragraph: "mb-2"
+    },
+    onError: (error) => {
+      throw error;
+    },
+    editorState: (editor) => {
+      const root = $getRoot();
+      if (html) {
+        const dom = new DOMParser().parseFromString(DOMPurify.sanitize(html), "text/html");
+        const nodes = $generateNodesFromDOM(editor, dom);
+        root.select();
+        root.append(...nodes);
+      } else {
+        for (const line of text.split("\n"))
+          root.append($createParagraphNode().append($createTextNode(line)));
+      }
+    }
+  }));
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig: config, children: /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+    /* @__PURE__ */ jsx(Toolbar, { disabled }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+      RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            "aria-label": "Message",
+            className: "min-h-64 w-full py-3 text-sm leading-relaxed outline-none"
+          }
+        ),
+        placeholder: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-0 top-3 text-sm text-muted-foreground", children: "Write your message\u2026" }),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ) }),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    " ",
+    /* @__PURE__ */ jsx(ListPlugin, {}),
+    " ",
+    /* @__PURE__ */ jsx(LinkPlugin, { validateUrl: (url) => /^https?:\/\//i.test(url) }),
+    /* @__PURE__ */ jsx(
+      OnChangePlugin,
+      {
+        ignoreSelectionChange: true,
+        onChange: (state, editor) => state.read(
+          () => onChange(
+            $getRoot().getTextContent(),
+            DOMPurify.sanitize($generateHtmlFromNodes(editor))
+          )
+        )
+      }
+    )
+  ] }) });
+}
+
+export { MailBodyEditor as default };
+//# sourceMappingURL=MailBodyEditor-5PIQLYVY.js.map
+//# sourceMappingURL=MailBodyEditor-5PIQLYVY.js.map

package/dist/MailBodyEditor-5PIQLYVY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/collaboration/mail/MailBodyEditor.tsx"],"names":[],"mappings":"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","file":"MailBodyEditor-5PIQLYVY.js","sourcesContent":["import { useEffect, useState } from 'react'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport {\n  ListNode,\n  ListItemNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  INSERT_ORDERED_LIST_COMMAND,\n  REMOVE_LIST_COMMAND,\n  $isListNode,\n} from '@lexical/list'\nimport { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport {\n  $getRoot,\n  $getSelection,\n  $isRangeSelection,\n  $createParagraphNode,\n  $createTextNode,\n  FORMAT_TEXT_COMMAND,\n  UNDO_COMMAND,\n  REDO_COMMAND,\n} from 'lexical'\nimport { Bold, Italic, Underline, List, ListOrdered, Link, Undo2, Redo2 } from 'lucide-react'\nimport { Button, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui'\nimport DOMPurify from 'dompurify'\n\nfunction Toolbar({ disabled }: { disabled: boolean }) {\n  const [editor] = useLexicalComposerContext()\n  const [addingLink, setAddingLink] = useState(false)\n  const [url, setUrl] = useState('')\n  const [formats, setFormats] = useState<Record<string, boolean>>({})\n  useEffect(\n    () =>\n      editor.registerUpdateListener(({ editorState }) =>\n        editorState.read(() => {\n          const selection = $getSelection()\n          if (!$isRangeSelection(selection)) return\n          let parent = selection.anchor.getNode().getParent()\n          while (parent && !$isListNode(parent)) parent = parent.getParent()\n          const list = $isListNode(parent) ? parent.getListType() : null\n          setFormats({\n            Bold: selection.hasFormat('bold'),\n            Italic: selection.hasFormat('italic'),\n            Underline: selection.hasFormat('underline'),\n            'Bulleted list': list === 'bullet',\n            'Numbered list': list === 'number',\n          })\n        })\n      ),\n    [editor]\n  )\n  useEffect(() => {\n    editor.setEditable(!disabled)\n  }, [editor, disabled])\n  const buttons = [\n    { label: 'Bold', icon: Bold, run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold') },\n    {\n      label: 'Italic',\n      icon: Italic,\n      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'),\n    },\n    {\n      label: 'Underline',\n      icon: Underline,\n      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline'),\n    },\n    {\n      label: 'Bulleted list',\n      icon: List,\n      run: () =>\n        editor.dispatchCommand(\n          formats['Bulleted list'] ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,\n          undefined\n        ),\n    },\n    {\n      label: 'Numbered list',\n      icon: ListOrdered,\n      run: () =>\n        editor.dispatchCommand(\n          formats['Numbered list'] ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,\n          undefined\n        ),\n    },\n    { label: 'Insert link', icon: Link, run: () => setAddingLink(!addingLink) },\n    { label: 'Undo', icon: Undo2, run: () => editor.dispatchCommand(UNDO_COMMAND, undefined) },\n    { label: 'Redo', icon: Redo2, run: () => editor.dispatchCommand(REDO_COMMAND, undefined) },\n  ]\n  return (\n    <>\n      <div\n        role=\"toolbar\"\n        aria-label=\"Message formatting\"\n        className=\"flex flex-wrap gap-0.5 border-b border-border/60 py-1\"\n      >\n        {buttons.map(({ label, icon: Icon, run }) => (\n          <Tooltip key={label}>\n            <TooltipTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={label}\n                aria-pressed={formats[label]}\n                disabled={disabled}\n                className=\"size-7 p-1 text-primary aria-pressed:bg-primary/10\"\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={run}\n              >\n                <Icon className=\"size-3.5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{label}</TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n      {addingLink && (\n        <div className=\"flex items-center gap-2 py-2\">\n          <input\n            aria-label=\"Link URL\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n            value={url}\n            onChange={(event) => setUrl(event.target.value)}\n            className=\"min-w-0 flex-1 rounded border bg-background px-2 py-1 text-sm\"\n          />\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={disabled || !/^https?:\\/\\/\\S+$/i.test(url)}\n            onClick={() => {\n              editor.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n              editor.update(() => {\n                const selection = $getSelection()\n                if ($isRangeSelection(selection))\n                  selection.anchor.set(\n                    selection.focus.key,\n                    selection.focus.offset,\n                    selection.focus.type\n                  )\n              })\n              editor.focus()\n              setAddingLink(false)\n              setUrl('')\n            }}\n          >\n            Insert\n          </Button>\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => setAddingLink(false)}>\n            Cancel\n          </Button>\n        </div>\n      )}\n    </>\n  )\n}\n\n/** Small mail editor using the same Lexical engine as the document editor. */\nexport default function MailBodyEditor({\n  text,\n  html,\n  disabled,\n  onChange,\n}: {\n  text: string\n  html?: string\n  disabled: boolean\n  onChange: (text: string, html: string) => void\n}) {\n  const [config] = useState(() => ({\n    namespace: 'mail-body',\n    nodes: [ListNode, ListItemNode, LinkNode],\n    theme: {\n      text: { bold: 'font-bold', italic: 'italic', underline: 'underline' },\n      list: { ul: 'list-disc pl-6', ol: 'list-decimal pl-6' },\n      link: 'text-primary underline',\n      paragraph: 'mb-2',\n    },\n    onError: (error: Error) => {\n      throw error\n    },\n    editorState: (editor: Parameters<typeof $generateNodesFromDOM>[0]) => {\n      const root = $getRoot()\n      if (html) {\n        const dom = new DOMParser().parseFromString(DOMPurify.sanitize(html), 'text/html')\n        const nodes = $generateNodesFromDOM(editor, dom)\n        root.select()\n        root.append(...nodes)\n      } else {\n        for (const line of text.split('\\n'))\n          root.append($createParagraphNode().append($createTextNode(line)))\n      }\n    },\n  }))\n  return (\n    <LexicalComposer initialConfig={config}>\n      <div className=\"mt-2\">\n        <Toolbar disabled={disabled} />\n        <div className=\"relative\">\n          <RichTextPlugin\n            contentEditable={\n              <ContentEditable\n                aria-label=\"Message\"\n                className=\"min-h-64 w-full py-3 text-sm leading-relaxed outline-none\"\n              />\n            }\n            placeholder={\n              <span className=\"pointer-events-none absolute left-0 top-3 text-sm text-muted-foreground\">\n                Write your message…\n              </span>\n            }\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n        </div>\n        <HistoryPlugin /> <ListPlugin />{' '}\n        <LinkPlugin validateUrl={(url) => /^https?:\\/\\//i.test(url)} />\n        <OnChangePlugin\n          ignoreSelectionChange\n          onChange={(state, editor) =>\n            state.read(() =>\n              onChange(\n                $getRoot().getTextContent(),\n                DOMPurify.sanitize($generateHtmlFromNodes(editor))\n              )\n            )\n          }\n        />\n      </div>\n    </LexicalComposer>\n  )\n}\n"]}

package/dist/MailBodyEditor-D7MGJMLH.cjs

@@ -0,0 +1,223 @@
+"use client";
+'use strict';
+
+require('./chunk-DES3K4SD.cjs');
+var react = require('react');
+var LexicalComposer = require('@lexical/react/LexicalComposer');
+var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
+var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
+var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
+var LexicalListPlugin = require('@lexical/react/LexicalListPlugin');
+var LexicalLinkPlugin = require('@lexical/react/LexicalLinkPlugin');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var html = require('@lexical/html');
+var list = require('@lexical/list');
+var link = require('@lexical/link');
+var lexical = require('lexical');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var DOMPurify = require('dompurify');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
+
+function Toolbar({ disabled }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [addingLink, setAddingLink] = react.useState(false);
+  const [url, setUrl] = react.useState("");
+  const [formats, setFormats] = react.useState({});
+  react.useEffect(
+    () => editor.registerUpdateListener(
+      ({ editorState }) => editorState.read(() => {
+        const selection = lexical.$getSelection();
+        if (!lexical.$isRangeSelection(selection)) return;
+        let parent = selection.anchor.getNode().getParent();
+        while (parent && !list.$isListNode(parent)) parent = parent.getParent();
+        const list$1 = list.$isListNode(parent) ? parent.getListType() : null;
+        setFormats({
+          Bold: selection.hasFormat("bold"),
+          Italic: selection.hasFormat("italic"),
+          Underline: selection.hasFormat("underline"),
+          "Bulleted list": list$1 === "bullet",
+          "Numbered list": list$1 === "number"
+        });
+      })
+    ),
+    [editor]
+  );
+  react.useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  const buttons = [
+    { label: "Bold", icon: lucideReact.Bold, run: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold") },
+    {
+      label: "Italic",
+      icon: lucideReact.Italic,
+      run: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic")
+    },
+    {
+      label: "Underline",
+      icon: lucideReact.Underline,
+      run: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline")
+    },
+    {
+      label: "Bulleted list",
+      icon: lucideReact.List,
+      run: () => editor.dispatchCommand(
+        formats["Bulleted list"] ? list.REMOVE_LIST_COMMAND : list.INSERT_UNORDERED_LIST_COMMAND,
+        void 0
+      )
+    },
+    {
+      label: "Numbered list",
+      icon: lucideReact.ListOrdered,
+      run: () => editor.dispatchCommand(
+        formats["Numbered list"] ? list.REMOVE_LIST_COMMAND : list.INSERT_ORDERED_LIST_COMMAND,
+        void 0
+      )
+    },
+    { label: "Insert link", icon: lucideReact.Link, run: () => setAddingLink(!addingLink) },
+    { label: "Undo", icon: lucideReact.Undo2, run: () => editor.dispatchCommand(lexical.UNDO_COMMAND, void 0) },
+    { label: "Redo", icon: lucideReact.Redo2, run: () => editor.dispatchCommand(lexical.REDO_COMMAND, void 0) }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": "Message formatting",
+        className: "flex flex-wrap gap-0.5 border-b border-border/60 py-1",
+        children: buttons.map(({ label, icon: Icon, run }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              "aria-label": label,
+              "aria-pressed": formats[label],
+              disabled,
+              className: "size-7 p-1 text-primary aria-pressed:bg-primary/10",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: run,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { children: label })
+        ] }, label))
+      }
+    ),
+    addingLink && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "aria-label": "Link URL",
+          type: "url",
+          placeholder: "https://example.com",
+          value: url,
+          onChange: (event) => setUrl(event.target.value),
+          className: "min-w-0 flex-1 rounded border bg-background px-2 py-1 text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          type: "button",
+          size: "sm",
+          disabled: disabled || !/^https?:\/\/\S+$/i.test(url),
+          onClick: () => {
+            editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, url);
+            editor.update(() => {
+              const selection = lexical.$getSelection();
+              if (lexical.$isRangeSelection(selection))
+                selection.anchor.set(
+                  selection.focus.key,
+                  selection.focus.offset,
+                  selection.focus.type
+                );
+            });
+            editor.focus();
+            setAddingLink(false);
+            setUrl("");
+          },
+          children: "Insert"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setAddingLink(false), children: "Cancel" })
+    ] })
+  ] });
+}
+function MailBodyEditor({
+  text,
+  html: html$1,
+  disabled,
+  onChange
+}) {
+  const [config] = react.useState(() => ({
+    namespace: "mail-body",
+    nodes: [list.ListNode, list.ListItemNode, link.LinkNode],
+    theme: {
+      text: { bold: "font-bold", italic: "italic", underline: "underline" },
+      list: { ul: "list-disc pl-6", ol: "list-decimal pl-6" },
+      link: "text-primary underline",
+      paragraph: "mb-2"
+    },
+    onError: (error) => {
+      throw error;
+    },
+    editorState: (editor) => {
+      const root = lexical.$getRoot();
+      if (html$1) {
+        const dom = new DOMParser().parseFromString(DOMPurify__default.default.sanitize(html$1), "text/html");
+        const nodes = html.$generateNodesFromDOM(editor, dom);
+        root.select();
+        root.append(...nodes);
+      } else {
+        for (const line of text.split("\n"))
+          root.append(lexical.$createParagraphNode().append(lexical.$createTextNode(line)));
+      }
+    }
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig: config, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { disabled }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+      LexicalRichTextPlugin.RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
+          LexicalContentEditable.ContentEditable,
+          {
+            "aria-label": "Message",
+            className: "min-h-64 w-full py-3 text-sm leading-relaxed outline-none"
+          }
+        ),
+        placeholder: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-0 top-3 text-sm text-muted-foreground", children: "Write your message\u2026" }),
+        ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(LexicalListPlugin.ListPlugin, {}),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(LexicalLinkPlugin.LinkPlugin, { validateUrl: (url) => /^https?:\/\//i.test(url) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LexicalOnChangePlugin.OnChangePlugin,
+      {
+        ignoreSelectionChange: true,
+        onChange: (state, editor) => state.read(
+          () => onChange(
+            lexical.$getRoot().getTextContent(),
+            DOMPurify__default.default.sanitize(html.$generateHtmlFromNodes(editor))
+          )
+        )
+      }
+    )
+  ] }) });
+}
+
+module.exports = MailBodyEditor;
+//# sourceMappingURL=MailBodyEditor-D7MGJMLH.cjs.map
+//# sourceMappingURL=MailBodyEditor-D7MGJMLH.cjs.map

package/dist/MailBodyEditor-D7MGJMLH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/collaboration/mail/MailBodyEditor.tsx"],"names":["useLexicalComposerContext","useState","useEffect","$getSelection","$isRangeSelection","$isListNode","list","Bold","FORMAT_TEXT_COMMAND","Italic","Underline","List","REMOVE_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","ListOrdered","INSERT_ORDERED_LIST_COMMAND","Link","Undo2","UNDO_COMMAND","Redo2","REDO_COMMAND","jsxs","Fragment","jsx","Tooltip","TooltipTrigger","Button","TooltipContent","TOGGLE_LINK_COMMAND","html","ListNode","ListItemNode","LinkNode","$getRoot","DOMPurify","$generateNodesFromDOM","$createParagraphNode","$createTextNode","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","HistoryPlugin","ListPlugin","LinkPlugin","OnChangePlugin","$generateHtmlFromNodes"],"mappings":"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","file":"MailBodyEditor-D7MGJMLH.cjs","sourcesContent":["import { useEffect, useState } from 'react'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport {\n  ListNode,\n  ListItemNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  INSERT_ORDERED_LIST_COMMAND,\n  REMOVE_LIST_COMMAND,\n  $isListNode,\n} from '@lexical/list'\nimport { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport {\n  $getRoot,\n  $getSelection,\n  $isRangeSelection,\n  $createParagraphNode,\n  $createTextNode,\n  FORMAT_TEXT_COMMAND,\n  UNDO_COMMAND,\n  REDO_COMMAND,\n} from 'lexical'\nimport { Bold, Italic, Underline, List, ListOrdered, Link, Undo2, Redo2 } from 'lucide-react'\nimport { Button, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui'\nimport DOMPurify from 'dompurify'\n\nfunction Toolbar({ disabled }: { disabled: boolean }) {\n  const [editor] = useLexicalComposerContext()\n  const [addingLink, setAddingLink] = useState(false)\n  const [url, setUrl] = useState('')\n  const [formats, setFormats] = useState<Record<string, boolean>>({})\n  useEffect(\n    () =>\n      editor.registerUpdateListener(({ editorState }) =>\n        editorState.read(() => {\n          const selection = $getSelection()\n          if (!$isRangeSelection(selection)) return\n          let parent = selection.anchor.getNode().getParent()\n          while (parent && !$isListNode(parent)) parent = parent.getParent()\n          const list = $isListNode(parent) ? parent.getListType() : null\n          setFormats({\n            Bold: selection.hasFormat('bold'),\n            Italic: selection.hasFormat('italic'),\n            Underline: selection.hasFormat('underline'),\n            'Bulleted list': list === 'bullet',\n            'Numbered list': list === 'number',\n          })\n        })\n      ),\n    [editor]\n  )\n  useEffect(() => {\n    editor.setEditable(!disabled)\n  }, [editor, disabled])\n  const buttons = [\n    { label: 'Bold', icon: Bold, run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold') },\n    {\n      label: 'Italic',\n      icon: Italic,\n      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'),\n    },\n    {\n      label: 'Underline',\n      icon: Underline,\n      run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline'),\n    },\n    {\n      label: 'Bulleted list',\n      icon: List,\n      run: () =>\n        editor.dispatchCommand(\n          formats['Bulleted list'] ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,\n          undefined\n        ),\n    },\n    {\n      label: 'Numbered list',\n      icon: ListOrdered,\n      run: () =>\n        editor.dispatchCommand(\n          formats['Numbered list'] ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,\n          undefined\n        ),\n    },\n    { label: 'Insert link', icon: Link, run: () => setAddingLink(!addingLink) },\n    { label: 'Undo', icon: Undo2, run: () => editor.dispatchCommand(UNDO_COMMAND, undefined) },\n    { label: 'Redo', icon: Redo2, run: () => editor.dispatchCommand(REDO_COMMAND, undefined) },\n  ]\n  return (\n    <>\n      <div\n        role=\"toolbar\"\n        aria-label=\"Message formatting\"\n        className=\"flex flex-wrap gap-0.5 border-b border-border/60 py-1\"\n      >\n        {buttons.map(({ label, icon: Icon, run }) => (\n          <Tooltip key={label}>\n            <TooltipTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={label}\n                aria-pressed={formats[label]}\n                disabled={disabled}\n                className=\"size-7 p-1 text-primary aria-pressed:bg-primary/10\"\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={run}\n              >\n                <Icon className=\"size-3.5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{label}</TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n      {addingLink && (\n        <div className=\"flex items-center gap-2 py-2\">\n          <input\n            aria-label=\"Link URL\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n            value={url}\n            onChange={(event) => setUrl(event.target.value)}\n            className=\"min-w-0 flex-1 rounded border bg-background px-2 py-1 text-sm\"\n          />\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={disabled || !/^https?:\\/\\/\\S+$/i.test(url)}\n            onClick={() => {\n              editor.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n              editor.update(() => {\n                const selection = $getSelection()\n                if ($isRangeSelection(selection))\n                  selection.anchor.set(\n                    selection.focus.key,\n                    selection.focus.offset,\n                    selection.focus.type\n                  )\n              })\n              editor.focus()\n              setAddingLink(false)\n              setUrl('')\n            }}\n          >\n            Insert\n          </Button>\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => setAddingLink(false)}>\n            Cancel\n          </Button>\n        </div>\n      )}\n    </>\n  )\n}\n\n/** Small mail editor using the same Lexical engine as the document editor. */\nexport default function MailBodyEditor({\n  text,\n  html,\n  disabled,\n  onChange,\n}: {\n  text: string\n  html?: string\n  disabled: boolean\n  onChange: (text: string, html: string) => void\n}) {\n  const [config] = useState(() => ({\n    namespace: 'mail-body',\n    nodes: [ListNode, ListItemNode, LinkNode],\n    theme: {\n      text: { bold: 'font-bold', italic: 'italic', underline: 'underline' },\n      list: { ul: 'list-disc pl-6', ol: 'list-decimal pl-6' },\n      link: 'text-primary underline',\n      paragraph: 'mb-2',\n    },\n    onError: (error: Error) => {\n      throw error\n    },\n    editorState: (editor: Parameters<typeof $generateNodesFromDOM>[0]) => {\n      const root = $getRoot()\n      if (html) {\n        const dom = new DOMParser().parseFromString(DOMPurify.sanitize(html), 'text/html')\n        const nodes = $generateNodesFromDOM(editor, dom)\n        root.select()\n        root.append(...nodes)\n      } else {\n        for (const line of text.split('\\n'))\n          root.append($createParagraphNode().append($createTextNode(line)))\n      }\n    },\n  }))\n  return (\n    <LexicalComposer initialConfig={config}>\n      <div className=\"mt-2\">\n        <Toolbar disabled={disabled} />\n        <div className=\"relative\">\n          <RichTextPlugin\n            contentEditable={\n              <ContentEditable\n                aria-label=\"Message\"\n                className=\"min-h-64 w-full py-3 text-sm leading-relaxed outline-none\"\n              />\n            }\n            placeholder={\n              <span className=\"pointer-events-none absolute left-0 top-3 text-sm text-muted-foreground\">\n                Write your message…\n              </span>\n            }\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n        </div>\n        <HistoryPlugin /> <ListPlugin />{' '}\n        <LinkPlugin validateUrl={(url) => /^https?:\\/\\//i.test(url)} />\n        <OnChangePlugin\n          ignoreSelectionChange\n          onChange={(state, editor) =>\n            state.read(() =>\n              onChange(\n                $getRoot().getTextContent(),\n                DOMPurify.sanitize($generateHtmlFromNodes(editor))\n              )\n            )\n          }\n        />\n      </div>\n    </LexicalComposer>\n  )\n}\n"]}