@synerise/ds-rich-text 0.1.0

package/dist/components/Toolbar.js

@@ -0,0 +1,436 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import Button from "@synerise/ds-button";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { BoldM, ItalicM, StrikeM, UnderlineM, ListM, ListNumbersM, LinkM, CodeM, Grid2M, ImageM, OptionHorizontalM, AiStarM, TextM, AlignRightM, AlignCenterM, AlignLeftM, H3M, H2M, H1M, TableL, AddM, DeleteM, TrashM } from "@synerise/ds-icon";
+import Popover, { PopoverTrigger, PopoverContent } from "@synerise/ds-popover";
+import DSToolbar, { ToolbarButton, ToolbarGroup } from "@synerise/ds-toolbar";
+import { BlockMenu, ToolbarItems, ToolbarEntry, AiGradientLabel, ToolbarSeparator } from "../RichText.styles.js";
+import { computeVisibleCount } from "../utils/computeVisibleCount.js";
+import { ImagePopover } from "./ImagePopover.js";
+import { LinkPopover } from "./LinkPopover.js";
+const HEADING_ICONS = {
+  1: /* @__PURE__ */ jsx(H1M, {}),
+  2: /* @__PURE__ */ jsx(H2M, {}),
+  3: /* @__PURE__ */ jsx(H3M, {})
+};
+const MORE_BUTTON_WIDTH_PX = 40;
+const ALIGN_CYCLE = ["left", "center", "right"];
+const ALIGN_ICONS = {
+  left: /* @__PURE__ */ jsx(AlignLeftM, {}),
+  center: /* @__PURE__ */ jsx(AlignCenterM, {}),
+  right: /* @__PURE__ */ jsx(AlignRightM, {})
+};
+const ALIGN_LABELS = {
+  left: (texts) => texts.alignLeft,
+  center: (texts) => texts.alignCenter,
+  right: (texts) => texts.alignRight
+};
+const TABLE_ACTIONS = [{
+  key: "insertTable",
+  icon: /* @__PURE__ */ jsx(TableL, {}),
+  label: (t) => t.insertTable,
+  insert: true,
+  run: (editor) => editor.chain().focus().insertTable({
+    rows: 3,
+    cols: 3,
+    withHeaderRow: true
+  }).run()
+}, {
+  key: "addRowBefore",
+  icon: /* @__PURE__ */ jsx(AddM, {}),
+  label: (t) => t.addRowBefore,
+  run: (editor) => editor.chain().focus().addRowBefore().run()
+}, {
+  key: "addRowAfter",
+  icon: /* @__PURE__ */ jsx(AddM, {}),
+  label: (t) => t.addRowAfter,
+  run: (editor) => editor.chain().focus().addRowAfter().run()
+}, {
+  key: "addColumnBefore",
+  icon: /* @__PURE__ */ jsx(AddM, {}),
+  label: (t) => t.addColumnBefore,
+  run: (editor) => editor.chain().focus().addColumnBefore().run()
+}, {
+  key: "addColumnAfter",
+  icon: /* @__PURE__ */ jsx(AddM, {}),
+  label: (t) => t.addColumnAfter,
+  run: (editor) => editor.chain().focus().addColumnAfter().run()
+}, {
+  key: "deleteRow",
+  icon: /* @__PURE__ */ jsx(DeleteM, {}),
+  label: (t) => t.deleteRow,
+  run: (editor) => editor.chain().focus().deleteRow().run()
+}, {
+  key: "deleteColumn",
+  icon: /* @__PURE__ */ jsx(DeleteM, {}),
+  label: (t) => t.deleteColumn,
+  run: (editor) => editor.chain().focus().deleteColumn().run()
+}, {
+  key: "deleteTable",
+  icon: /* @__PURE__ */ jsx(TrashM, {}),
+  label: (t) => t.deleteTable,
+  run: (editor) => editor.chain().focus().deleteTable().run()
+}];
+const outerWidth = (el) => {
+  const styles = window.getComputedStyle(el);
+  return el.getBoundingClientRect().width + (parseFloat(styles.marginLeft) || 0) + (parseFloat(styles.marginRight) || 0);
+};
+const Toolbar = ({
+  editor,
+  features,
+  headingLevels,
+  texts,
+  disabled,
+  onImageUpload,
+  onEditWithAI,
+  editWithAIOptions
+}) => {
+  const theme = useTheme();
+  const [showLinkPopover, setShowLinkPopover] = useState(false);
+  const [showImagePopover, setShowImagePopover] = useState(false);
+  const [showBlockMenu, setShowBlockMenu] = useState(false);
+  const [showTableMenu, setShowTableMenu] = useState(false);
+  const [showAlignMenu, setShowAlignMenu] = useState(false);
+  const [showAiMenu, setShowAiMenu] = useState(false);
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const [morePanel, setMorePanel] = useState("menu");
+  const [aiLoading, setAiLoading] = useState(false);
+  const itemsRef = useRef(null);
+  const widthsRef = useRef(null);
+  const entriesCountRef = useRef(0);
+  const [visibleCount, setVisibleCount] = useState(Number.POSITIVE_INFINITY);
+  const visibleCountRef = useRef(visibleCount);
+  visibleCountRef.current = visibleCount;
+  const recompute = useCallback(() => {
+    const el = itemsRef.current;
+    if (!el) {
+      return;
+    }
+    if (el.clientWidth <= 0) {
+      if (Number.isFinite(visibleCountRef.current)) {
+        setVisibleCount(Number.POSITIVE_INFINITY);
+      }
+      return;
+    }
+    if (!Number.isFinite(visibleCountRef.current)) {
+      widthsRef.current = Array.from(el.children).map(outerWidth);
+    } else if (!widthsRef.current) {
+      return;
+    } else if (el.scrollWidth > el.clientWidth) {
+      widthsRef.current = null;
+      setVisibleCount(Number.POSITIVE_INFINITY);
+      return;
+    }
+    const next = computeVisibleCount(widthsRef.current, el.clientWidth, MORE_BUTTON_WIDTH_PX);
+    setVisibleCount(next >= entriesCountRef.current ? Number.POSITIVE_INFINITY : next);
+  }, []);
+  useLayoutEffect(() => {
+    recompute();
+  });
+  const hasEditor = !!editor;
+  useEffect(() => {
+    const el = itemsRef.current;
+    if (!el || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new ResizeObserver(() => recompute());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [recompute, hasEditor]);
+  useEffect(() => {
+    let cancelled = false;
+    document.fonts?.ready?.then(() => {
+      if (!cancelled) {
+        recompute();
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [recompute]);
+  const handleLinkToggle = useCallback(() => {
+    setShowLinkPopover((prev) => !prev);
+  }, []);
+  const handleLinkClose = useCallback(() => {
+    setShowLinkPopover(false);
+  }, []);
+  const handleImageToggle = useCallback(() => {
+    setShowImagePopover((prev) => !prev);
+  }, []);
+  const handleImageClose = useCallback(() => {
+    setShowImagePopover(false);
+  }, []);
+  const closeMore = useCallback(() => {
+    setShowMoreMenu(false);
+    setMorePanel("menu");
+  }, []);
+  const runAIAction = useCallback(async (action) => {
+    if (!editor) {
+      return;
+    }
+    const {
+      from,
+      to,
+      empty
+    } = editor.state.selection;
+    const selectedText = empty ? editor.getText() : editor.state.doc.textBetween(from, to, "\n");
+    setAiLoading(true);
+    try {
+      const result = await action(selectedText);
+      if (result === null || result === void 0) {
+        return;
+      }
+      if (empty) {
+        editor.chain().focus().selectAll().insertContent(result).run();
+      } else {
+        editor.chain().focus().insertContentAt({
+          from,
+          to
+        }, result).run();
+      }
+    } catch (error) {
+      console.error("RichText: Edit with AI action failed", error);
+    } finally {
+      setAiLoading(false);
+    }
+  }, [editor]);
+  const handleEditWithAI = useCallback(() => {
+    if (onEditWithAI) {
+      void runAIAction(onEditWithAI);
+    }
+  }, [onEditWithAI, runAIAction]);
+  const activeHeadingLevel = editor ? headingLevels.find((level) => editor.isActive("heading", {
+    level
+  })) : void 0;
+  const blockLabel = activeHeadingLevel ? `${texts.heading} ${activeHeadingLevel}` : texts.paragraph;
+  const measureSignature = [features.join(","), blockLabel, disabled].join("|");
+  useLayoutEffect(() => {
+    widthsRef.current = null;
+    setVisibleCount(Number.POSITIVE_INFINITY);
+  }, [measureSignature, texts, headingLevels]);
+  if (!editor) {
+    return null;
+  }
+  const has = (feature) => features.includes(feature);
+  const hasAiOptions = !!editWithAIOptions?.length;
+  const closeBlockMenu = () => setShowBlockMenu(false);
+  const renderHeadingMenuItems = (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { type: !activeHeadingLevel ? "ghost-primary" : "ghost", mode: "icon-label", icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(TextM, {}) }), onClick: () => {
+      editor.chain().focus().setParagraph().run();
+      close();
+    }, children: texts.paragraph }),
+    headingLevels.map((level) => /* @__PURE__ */ jsx(Button, { type: activeHeadingLevel === level ? "ghost-primary" : "ghost", mode: "icon-label", icon: /* @__PURE__ */ jsx(Icon, { component: HEADING_ICONS[level] || HEADING_ICONS[1] }), onClick: () => {
+      editor.chain().focus().toggleHeading({
+        level
+      }).run();
+      close();
+    }, children: `${texts.heading} ${level}` }, level))
+  ] });
+  const renderTableMenuItems = (close) => {
+    const inTable = editor.isActive("table");
+    return TABLE_ACTIONS.map((action) => {
+      const enabled = action.insert || inTable;
+      return /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "icon-label", disabled: !enabled, icon: /* @__PURE__ */ jsx(Icon, { component: action.icon }), onClick: () => {
+        action.run(editor);
+        close();
+      }, children: action.label(texts) }, action.key);
+    });
+  };
+  const renderAlignMenuItems = (close) => ALIGN_CYCLE.map((align) => /* @__PURE__ */ jsx(Button, { type: editor.isActive({
+    textAlign: align
+  }) ? "ghost-primary" : "ghost", mode: "icon-label", disabled, icon: /* @__PURE__ */ jsx(Icon, { component: ALIGN_ICONS[align] }), onClick: () => {
+    editor.chain().focus().setTextAlign(align).run();
+    close();
+  }, children: ALIGN_LABELS[align](texts) }, align));
+  const actionEntry = (key, icon, label, active, run) => ({
+    key,
+    inline: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+      title: label
+    }, onClick: run, disabled, type: active ? "ghost-primary" : "ghost", children: /* @__PURE__ */ jsx(Icon, { component: icon }) }),
+    menuRow: /* @__PURE__ */ jsx(Button, { type: active ? "ghost-primary" : "ghost", mode: "icon-label", disabled, icon: /* @__PURE__ */ jsx(Icon, { component: icon }), onClick: () => {
+      run();
+      closeMore();
+    }, children: label }, key)
+  });
+  const panelEntryRow = (key, icon, label, active, panel) => /* @__PURE__ */ jsx(Button, { type: active ? "ghost-primary" : "ghost", mode: "icon-label", disabled, icon: /* @__PURE__ */ jsx(Icon, { component: icon }), onClick: () => setMorePanel(panel), children: label }, key);
+  const sections = [];
+  if (has("heading")) {
+    sections.push([{
+      key: "heading",
+      inline: /* @__PURE__ */ jsxs(Popover, { open: showBlockMenu, onOpenChange: (open) => {
+        if (!open) {
+          closeBlockMenu();
+        }
+      }, placement: "bottom-start", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: showBlockMenu ? "ghost-primary" : "ghost", disabled, onClick: () => setShowBlockMenu((prev) => !prev), children: blockLabel }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(BlockMenu, { children: renderHeadingMenuItems(closeBlockMenu) }) })
+      ] }),
+      menuRow: panelEntryRow("heading", /* @__PURE__ */ jsx(TextM, {}), blockLabel, !!activeHeadingLevel, "heading")
+    }]);
+  }
+  const formatting = [];
+  if (has("bold")) {
+    formatting.push(actionEntry("bold", /* @__PURE__ */ jsx(BoldM, {}), texts.bold, editor.isActive("bold"), () => editor.chain().focus().toggleBold().run()));
+  }
+  if (has("italic")) {
+    formatting.push(actionEntry("italic", /* @__PURE__ */ jsx(ItalicM, {}), texts.italic, editor.isActive("italic"), () => editor.chain().focus().toggleItalic().run()));
+  }
+  if (has("strikethrough")) {
+    formatting.push(actionEntry("strikethrough", /* @__PURE__ */ jsx(StrikeM, {}), texts.strikethrough, editor.isActive("strike"), () => editor.chain().focus().toggleStrike().run()));
+  }
+  if (has("underline")) {
+    formatting.push(actionEntry("underline", /* @__PURE__ */ jsx(UnderlineM, {}), texts.underline, editor.isActive("underline"), () => editor.chain().focus().toggleUnderline().run()));
+  }
+  if (formatting.length) {
+    sections.push(formatting);
+  }
+  const lists = [];
+  if (has("bulletList")) {
+    lists.push(actionEntry("bulletList", /* @__PURE__ */ jsx(ListM, {}), texts.bulletList, editor.isActive("bulletList"), () => editor.chain().focus().toggleBulletList().run()));
+  }
+  if (has("orderedList")) {
+    lists.push(actionEntry("orderedList", /* @__PURE__ */ jsx(ListNumbersM, {}), texts.orderedList, editor.isActive("orderedList"), () => editor.chain().focus().toggleOrderedList().run()));
+  }
+  if (has("textAlign")) {
+    const currentAlign = ALIGN_CYCLE.find((a) => editor.isActive({
+      textAlign: a
+    })) ?? "left";
+    lists.push({
+      key: "textAlign",
+      inline: /* @__PURE__ */ jsxs(Popover, { open: showAlignMenu, onOpenChange: (open) => {
+        if (!open) {
+          setShowAlignMenu(false);
+        }
+      }, placement: "bottom-start", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+          title: texts.align,
+          open: showAlignMenu ? false : void 0
+        }, onClick: () => setShowAlignMenu((prev) => !prev), disabled, type: currentAlign !== "left" || showAlignMenu ? "ghost-primary" : "ghost", children: /* @__PURE__ */ jsx(Icon, { component: ALIGN_ICONS[currentAlign] }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(BlockMenu, { children: renderAlignMenuItems(() => setShowAlignMenu(false)) }) })
+      ] }),
+      menuRow: panelEntryRow("textAlign", ALIGN_ICONS[currentAlign], texts.align, currentAlign !== "left", "align")
+    });
+  }
+  if (lists.length) {
+    sections.push(lists);
+  }
+  const extras = [];
+  if (has("link")) {
+    extras.push({
+      key: "link",
+      inline: /* @__PURE__ */ jsxs(Popover, { open: showLinkPopover, onOpenChange: (open) => {
+        if (!open) {
+          handleLinkClose();
+        }
+      }, placement: "bottom-start", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+          title: texts.link,
+          open: showLinkPopover ? false : void 0
+        }, onClick: handleLinkToggle, disabled, type: editor.isActive("link") ? "ghost-primary" : "ghost", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(LinkM, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(LinkPopover, { editor, texts, onClose: handleLinkClose }) })
+      ] }),
+      menuRow: panelEntryRow("link", /* @__PURE__ */ jsx(LinkM, {}), texts.link, editor.isActive("link"), "link")
+    });
+  }
+  if (has("codeSnippet")) {
+    extras.push(actionEntry("codeSnippet", /* @__PURE__ */ jsx(CodeM, {}), texts.codeSnippet, editor.isActive("codeSnippet"), () => editor.chain().focus().insertCodeSnippet().run()));
+  }
+  if (has("codeBlock")) {
+    extras.push(actionEntry("codeBlock", /* @__PURE__ */ jsx(CodeM, {}), texts.codeBlock, editor.isActive("codeBlock"), () => editor.chain().focus().toggleCodeBlock().run()));
+  }
+  if (has("table")) {
+    const inTable = editor.isActive("table");
+    extras.push({
+      key: "table",
+      inline: /* @__PURE__ */ jsxs(Popover, { open: showTableMenu, onOpenChange: (open) => {
+        if (!open) {
+          setShowTableMenu(false);
+        }
+      }, placement: "bottom-start", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+          title: texts.table,
+          open: showTableMenu ? false : void 0
+        }, onClick: () => setShowTableMenu((prev) => !prev), disabled, type: inTable || showTableMenu ? "ghost-primary" : "ghost", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Grid2M, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(BlockMenu, { children: renderTableMenuItems(() => setShowTableMenu(false)) }) })
+      ] }),
+      menuRow: panelEntryRow("table", /* @__PURE__ */ jsx(Grid2M, {}), texts.table, inTable, "table")
+    });
+  }
+  if (has("image")) {
+    extras.push({
+      key: "image",
+      inline: /* @__PURE__ */ jsxs(Popover, { open: showImagePopover, onOpenChange: (open) => {
+        if (!open) {
+          handleImageClose();
+        }
+      }, placement: "bottom-start", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+          title: texts.image,
+          open: showImagePopover ? false : void 0
+        }, onClick: handleImageToggle, disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ImageM, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(ImagePopover, { editor, texts, onClose: handleImageClose, onImageUpload }) })
+      ] }),
+      menuRow: panelEntryRow("image", /* @__PURE__ */ jsx(ImageM, {}), texts.image, false, "image")
+    });
+  }
+  if (extras.length) {
+    sections.push(extras);
+  }
+  const entries = [];
+  sections.forEach((section, index) => {
+    if (index > 0) {
+      entries.push({
+        key: `separator-${index}`,
+        isSeparator: true,
+        inline: /* @__PURE__ */ jsx(ToolbarSeparator, {})
+      });
+    }
+    entries.push(...section);
+  });
+  entriesCountRef.current = entries.length;
+  const shownCount = Number.isFinite(visibleCount) ? visibleCount : entries.length;
+  const shownEntries = entries.slice(0, shownCount);
+  while (shownEntries.length && shownEntries[shownEntries.length - 1].isSeparator) {
+    shownEntries.pop();
+  }
+  const hiddenEntries = entries.slice(shownCount).filter((entry) => !entry.isSeparator);
+  return /* @__PURE__ */ jsxs(DSToolbar, { children: [
+    /* @__PURE__ */ jsxs(ToolbarItems, { ref: itemsRef, "data-testid": "rich-text-toolbar-items", children: [
+      shownEntries.map((entry) => /* @__PURE__ */ jsx(ToolbarEntry, { children: entry.inline }, entry.key)),
+      hiddenEntries.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: showMoreMenu, onOpenChange: (open) => {
+        if (!open) {
+          closeMore();
+        }
+      }, placement: "bottom-end", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", tooltipProps: {
+          title: texts.more,
+          open: showMoreMenu ? false : void 0
+        }, onClick: () => showMoreMenu ? closeMore() : setShowMoreMenu(true), disabled, type: showMoreMenu ? "ghost-primary" : "ghost", "data-testid": "rich-text-toolbar-more", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: morePanel === "link" ? /* @__PURE__ */ jsx(LinkPopover, { editor, texts, onClose: closeMore }) : morePanel === "image" ? /* @__PURE__ */ jsx(ImagePopover, { editor, texts, onClose: closeMore, onImageUpload }) : /* @__PURE__ */ jsx(BlockMenu, { children: morePanel === "heading" ? renderHeadingMenuItems(closeMore) : morePanel === "table" ? renderTableMenuItems(closeMore) : morePanel === "align" ? renderAlignMenuItems(closeMore) : hiddenEntries.map((entry) => entry.menuRow) }) })
+      ] })
+    ] }),
+    (onEditWithAI || hasAiOptions) && /* @__PURE__ */ jsx(ToolbarGroup, { isCompact: true, style: {
+      marginLeft: "auto"
+    }, children: (() => {
+      const aiButton = /* @__PURE__ */ jsx(Button, { type: "custom-color-ghost", color: "pink", mode: "icon-label", loading: aiLoading, disabled, icon: /* @__PURE__ */ jsx(Icon, { color: theme.palette["mars-400"], component: /* @__PURE__ */ jsx(AiStarM, {}) }), onClick: hasAiOptions ? () => setShowAiMenu((prev) => !prev) : handleEditWithAI, children: /* @__PURE__ */ jsx(AiGradientLabel, { children: texts.editWithAI }) });
+      if (!hasAiOptions) {
+        return aiButton;
+      }
+      return /* @__PURE__ */ jsxs(Popover, { open: showAiMenu, onOpenChange: (open) => {
+        if (!open) {
+          setShowAiMenu(false);
+        }
+      }, placement: "bottom-end", children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: aiButton }),
+        /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(BlockMenu, { children: (editWithAIOptions ?? []).map((option) => /* @__PURE__ */ jsx(Button, { type: "ghost", mode: option.icon ? "icon-label" : void 0, icon: option.icon, onClick: () => {
+          setShowAiMenu(false);
+          void runAIAction(option.onSelect);
+        }, children: option.label }, option.key)) }) })
+      ] });
+    })() })
+  ] });
+};
+export {
+  Toolbar
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Toolbar } from './Toolbar';
+export { LinkPopover } from './LinkPopover';
+export { ImagePopover } from './ImagePopover';

package/dist/components/index.js

@@ -0,0 +1,8 @@
+import { Toolbar } from "./Toolbar.js";
+import { LinkPopover } from "./LinkPopover.js";
+import { ImagePopover } from "./ImagePopover.js";
+export {
+  ImagePopover,
+  LinkPopover,
+  Toolbar
+};

package/dist/extensions/CodeSnippet.d.ts

@@ -0,0 +1,19 @@
+import { Node } from '@tiptap/core';
+export type CodeSnippetOptions = {
+    copyText: string;
+    copiedText: string;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        codeSnippet: {
+            /** Insert an empty single-line code snippet. */
+            insertCodeSnippet: () => ReturnType;
+        };
+    }
+}
+/**
+ * A single-line code snippet block: monospace text in a grey box with a copy button.
+ * Serializes to `<pre data-type="code-snippet"><code>…</code></pre>` so it round-trips
+ * through the HTML and portable-document serializers without colliding with `codeBlock`.
+ */
+export declare const CodeSnippet: Node<CodeSnippetOptions, any>;

package/dist/extensions/CodeSnippet.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import CopyIcon from "@synerise/ds-copy-icon";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+const CodeSnippetView = ({
+  node,
+  extension
+}) => {
+  const {
+    copyText,
+    copiedText
+  } = extension.options;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "div", className: "ds-rt-code-snippet", "data-testid": "code-snippet", children: [
+    /* @__PURE__ */ jsx(NodeViewContent, { as: "code", className: "ds-rt-code-snippet__content" }),
+    /* @__PURE__ */ jsx("span", { className: "ds-rt-code-snippet__actions", contentEditable: false, children: /* @__PURE__ */ jsx(CopyIcon, { copyValue: node.textContent ?? "", texts: {
+      copyTooltip: copyText,
+      copiedTooltip: copiedText
+    } }) })
+  ] });
+};
+const CodeSnippet = Node.create({
+  name: "codeSnippet",
+  group: "block",
+  content: "text*",
+  marks: "",
+  code: true,
+  defining: true,
+  isolating: true,
+  addOptions() {
+    return {
+      copyText: "Copy",
+      copiedText: "Copied"
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: 'pre[data-type="code-snippet"]',
+      preserveWhitespace: "full"
+    }];
+  },
+  renderHTML({
+    HTMLAttributes
+  }) {
+    return ["pre", mergeAttributes(HTMLAttributes, {
+      "data-type": "code-snippet"
+    }), ["code", 0]];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeSnippetView);
+  },
+  addCommands() {
+    return {
+      insertCodeSnippet: () => ({
+        commands
+      }) => commands.insertContent({
+        type: this.name
+      })
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // Single-line: Enter exits the snippet into a new block below instead of adding a newline.
+      Enter: ({
+        editor
+      }) => {
+        if (!editor.isActive(this.name)) {
+          return false;
+        }
+        return editor.commands.exitCode();
+      }
+    };
+  }
+});
+export {
+  CodeSnippet
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './RichText';
+export type { RichTextProps, RichTextFormat, RichTextTexts, RichTextAIOption, ToolbarFeature, ToolbarProps, LinkPopoverProps, ImagePopoverProps, } from './RichText.types';
+export { ALL_TOOLBAR_FEATURES, DEFAULT_HEADING_LEVELS, DEFAULT_TEXTS, } from './RichText.types';
+export * from './RichText.styles';
+export * from './blockModel';
+export { normalizeUrl, sanitizeUrl } from './utils';

package/dist/index.js

@@ -0,0 +1,52 @@
+import { default as default2 } from "./RichText.js";
+import { ALL_TOOLBAR_FEATURES, DEFAULT_HEADING_LEVELS, DEFAULT_TEXTS } from "./RichText.types.js";
+import { AiGradientLabel, BlockMenu, ContentAbove, ContentBelow, Description, EditorArea, EditorWrapper, ErrorText, PopoverActions, PopoverForm, RichTextWrapper, SubtleSuffix, ToolbarArea, ToolbarEntry, ToolbarItems, ToolbarSeparator } from "./RichText.styles.js";
+import { tiptapJsonToDocument } from "./blockModel/serializers/tiptapToDocument.js";
+import { documentToTiptapJson } from "./blockModel/serializers/documentToTiptap.js";
+import { documentToHtml } from "./blockModel/serializers/documentToHtml.js";
+import { documentToMarkdown } from "./blockModel/serializers/documentToMarkdown.js";
+import { markdownToDocument } from "./blockModel/serializers/markdownToDocument.js";
+import { htmlToDocument } from "./blockModel/serializers/htmlToDocument.js";
+import "@tiptap/extension-image";
+import "@tiptap/extension-link";
+import "@tiptap/extension-placeholder";
+import "@tiptap/extension-table";
+import "@tiptap/extension-table-cell";
+import "@tiptap/extension-table-header";
+import "@tiptap/extension-table-row";
+import "@tiptap/extension-text-align";
+import "@tiptap/extension-underline";
+import "@tiptap/starter-kit";
+import "./extensions/CodeSnippet.js";
+import { normalizeUrl } from "./utils/normalizeUrl.js";
+import { sanitizeUrl } from "./utils/sanitizeUrl.js";
+export {
+  ALL_TOOLBAR_FEATURES,
+  AiGradientLabel,
+  BlockMenu,
+  ContentAbove,
+  ContentBelow,
+  DEFAULT_HEADING_LEVELS,
+  DEFAULT_TEXTS,
+  Description,
+  EditorArea,
+  EditorWrapper,
+  ErrorText,
+  PopoverActions,
+  PopoverForm,
+  RichTextWrapper,
+  SubtleSuffix,
+  ToolbarArea,
+  ToolbarEntry,
+  ToolbarItems,
+  ToolbarSeparator,
+  default2 as default,
+  documentToHtml,
+  documentToMarkdown,
+  documentToTiptapJson,
+  htmlToDocument,
+  markdownToDocument,
+  normalizeUrl,
+  sanitizeUrl,
+  tiptapJsonToDocument
+};

package/dist/modules.d.js

@@ -0,0 +1 @@
+

package/dist/modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.less' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/dist/utils/computeVisibleCount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * How many toolbar items fit into `availableWidth`. When they all fit, returns
+ * `itemWidths.length`; otherwise reserves `reservedWidth` for the "more"
+ * button and returns the number of leading items that still fit next to it.
+ */
+export declare const computeVisibleCount: (itemWidths: number[], availableWidth: number, reservedWidth: number) => number;

package/dist/utils/computeVisibleCount.js

@@ -0,0 +1,19 @@
+const computeVisibleCount = (itemWidths, availableWidth, reservedWidth) => {
+  const total = itemWidths.reduce((acc, width) => acc + width, 0);
+  if (total <= availableWidth) {
+    return itemWidths.length;
+  }
+  let used = reservedWidth;
+  let count = 0;
+  for (const width of itemWidths) {
+    if (used + width > availableWidth) {
+      break;
+    }
+    used += width;
+    count += 1;
+  }
+  return count;
+};
+export {
+  computeVisibleCount
+};

package/dist/utils/getExtensions.d.ts

@@ -0,0 +1,13 @@
+import { Extensions } from '@tiptap/react';
+import { ToolbarFeature } from '../RichText.types';
+type GetExtensionsOptions = {
+    features: ToolbarFeature[];
+    headingLevels: (1 | 2 | 3 | 4 | 5 | 6)[];
+    placeholder?: string;
+    copyText?: string;
+    copiedText?: string;
+    /** Show the placeholder in non-editable states too (subtle preview). */
+    alwaysShowPlaceholder?: boolean;
+};
+export declare const getExtensions: ({ features, headingLevels, placeholder, copyText, copiedText, alwaysShowPlaceholder, }: GetExtensionsOptions) => Extensions;
+export {};