@liveblocks/react-tiptap 2.18.3 → 2.18.4-uns2

package/dist/toolbar/Toolbar.js

@@ -1,50 +1,28 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var _private = require('@liveblocks/react-ui/_private');
-var SelectPrimitive = require('@radix-ui/react-select');
-var TogglePrimitive = require('@radix-ui/react-toggle');
-var react = require('react');
-var classnames = require('../classnames.js');
-var context = require('../context.js');
-var shared = require('./shared.js');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ShortcutTooltip, Button, TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, BlockquoteIcon, SelectButton, CheckIcon, UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, CommentIcon, SparklesIcon, QuestionMarkIcon, TooltipProvider } from '@liveblocks/react-ui/_private';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { forwardRef, useContext, useCallback, useMemo } from 'react';
+import { classNames } from '../classnames.js';
+import { useCurrentEditor, EditorProvider } from '../context.js';
+import { FloatingToolbarContext, FloatingToolbarExternal } from './shared.js';
 
 const BLOCK_SELECT_SIDE_OFFSET = 10;
 const FLOATING_ELEMENT_COLLISION_PADDING = 10;
 function applyToolbarSlot(slot, props) {
   if (typeof slot === "function") {
     const Component = slot;
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       ...props
     });
   }
   return slot;
 }
-const ToolbarButton = react.forwardRef(
+const ToolbarButton = forwardRef(
   ({ icon, children, name, shortcut, onKeyDown, ...props }, forwardedRef) => {
-    const floatingToolbarContext = react.useContext(shared.FloatingToolbarContext);
+    const floatingToolbarContext = useContext(FloatingToolbarContext);
     const closeFloatingToolbar = floatingToolbarContext?.close;
-    const handleKeyDown = react.useCallback(
+    const handleKeyDown = useCallback(
       (event) => {
         onKeyDown?.(event);
         if (!event.isDefaultPrevented() && closeFloatingToolbar && event.key === "Escape") {
@@ -55,10 +33,10 @@ const ToolbarButton = react.forwardRef(
       },
       [onKeyDown, closeFloatingToolbar]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
+    return /* @__PURE__ */ jsx(ShortcutTooltip, {
       content: name,
       shortcut,
-      children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
+      children: /* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "toolbar",
         ref: forwardedRef,
@@ -71,12 +49,12 @@ const ToolbarButton = react.forwardRef(
     });
   }
 );
-const ToolbarToggle = react.forwardRef(
+const ToolbarToggle = forwardRef(
   ({ active, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
       asChild: true,
       pressed: active,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, {
+      children: /* @__PURE__ */ jsx(ToolbarButton, {
         ref: forwardedRef,
         ...props
       })
@@ -87,57 +65,57 @@ function createDefaultBlockSelectorItems(editor) {
   const items = [
     {
       name: "Text",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.TextIcon, {}),
+      icon: /* @__PURE__ */ jsx(TextIcon, {}),
       isActive: "default",
       setActive: (editor2) => editor2.chain().focus().clearNodes().run()
     },
     "toggleHeading" in editor.commands ? {
       name: "Heading 1",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.H1Icon, {}),
+      icon: /* @__PURE__ */ jsx(H1Icon, {}),
       isActive: (editor2) => editor2.isActive("heading", { level: 1 }),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleHeading({ level: 1 }).run()
     } : null,
     "toggleHeading" in editor.commands ? {
       name: "Heading 2",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.H2Icon, {}),
+      icon: /* @__PURE__ */ jsx(H2Icon, {}),
       isActive: (editor2) => editor2.isActive("heading", { level: 2 }),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleHeading({ level: 2 }).run()
     } : null,
     "toggleHeading" in editor.commands ? {
       name: "Heading 3",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.H3Icon, {}),
+      icon: /* @__PURE__ */ jsx(H3Icon, {}),
       isActive: (editor2) => editor2.isActive("heading", { level: 3 }),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleHeading({ level: 3 }).run()
     } : null,
     "toggleBulletList" in editor.commands ? {
       name: "Bullet list",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ListUnorderedIcon, {}),
+      icon: /* @__PURE__ */ jsx(ListUnorderedIcon, {}),
       isActive: (editor2) => editor2.isActive("bulletList"),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleBulletList().run()
     } : null,
     "toggleOrderedList" in editor.commands ? {
       name: "Numbered list",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ListOrderedIcon, {}),
+      icon: /* @__PURE__ */ jsx(ListOrderedIcon, {}),
       isActive: (editor2) => editor2.isActive("orderedList"),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleOrderedList().run()
     } : null,
     "toggleBlockquote" in editor.commands ? {
       name: "Blockquote",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.BlockquoteIcon, {}),
+      icon: /* @__PURE__ */ jsx(BlockquoteIcon, {}),
       isActive: (editor2) => editor2.isActive("blockquote"),
       setActive: (editor2) => editor2.chain().focus().clearNodes().toggleBlockquote().run()
     } : null
   ];
   return items.filter(Boolean);
 }
-const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, forwardedRef) => {
-  const floatingToolbarContext = react.useContext(shared.FloatingToolbarContext);
+const ToolbarBlockSelector = forwardRef(({ items, onKeyDown, ...props }, forwardedRef) => {
+  const floatingToolbarContext = useContext(FloatingToolbarContext);
   const closeFloatingToolbar = floatingToolbarContext?.close;
-  const editor = context.useCurrentEditor(
+  const editor = useCurrentEditor(
     "BlockSelector",
     "Toolbar or FloatingToolbar"
   );
-  const resolvedItems = react.useMemo(() => {
+  const resolvedItems = useMemo(() => {
     if (Array.isArray(items)) {
       return items;
     }
@@ -162,7 +140,7 @@ const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, f
       floatingToolbarContext?.close();
     }
   };
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = useCallback(
     (event) => {
       onKeyDown?.(event);
       if (!event.isDefaultPrevented() && closeFloatingToolbar && event.key === "Escape") {
@@ -173,47 +151,47 @@ const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, f
     },
     [onKeyDown, closeFloatingToolbar]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, {
+  return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
     value: activeItem?.name,
     onValueChange: handleItemChange,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
+      /* @__PURE__ */ jsx(ShortcutTooltip, {
         content: "Turn into\u2026",
-        children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Trigger, {
+        children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, {
           asChild: true,
           ...props,
           ref: forwardedRef,
           onKeyDown: handleKeyDown,
           disabled: resolvedItems.length === 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.SelectButton, {
+          children: /* @__PURE__ */ jsx(SelectButton, {
             variant: "toolbar",
             children: activeItem?.name ?? "Turn into\u2026"
           })
         })
       }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(shared.FloatingToolbarExternal, {
-          children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, {
+      /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
+        children: /* @__PURE__ */ jsx(FloatingToolbarExternal, {
+          children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
             position: "popper",
             sideOffset: BLOCK_SELECT_SIDE_OFFSET,
             collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
             className: "lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-tiptap-block-selector-dropdown",
-            children: resolvedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Item, {
+            children: resolvedItems.map((item) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
               value: item.name,
               className: "lb-dropdown-item",
               "data-name": item.name,
               children: [
-                item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+                item.icon ? /* @__PURE__ */ jsx("span", {
                   className: "lb-dropdown-item-icon lb-icon-container",
                   children: item.icon
                 }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                /* @__PURE__ */ jsx("span", {
                   className: "lb-dropdown-item-label",
                   children: item.label ?? item.name
                 }),
-                item.name === activeItem?.name ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+                item.name === activeItem?.name ? /* @__PURE__ */ jsx("span", {
                   className: "lb-dropdown-item-accessory lb-icon-container",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {})
+                  children: /* @__PURE__ */ jsx(CheckIcon, {})
                 }) : null
               ]
             }, item.name))
@@ -223,34 +201,34 @@ const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, f
     ]
   });
 });
-const ToolbarSeparator = react.forwardRef(
+const ToolbarSeparator = forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    return /* @__PURE__ */ jsx("div", {
       ref: forwardedRef,
       role: "separator",
       "aria-orientation": "vertical",
-      className: classnames.classNames("lb-tiptap-toolbar-separator", className),
+      className: classNames("lb-tiptap-toolbar-separator", className),
       ...props
     });
   }
 );
 function ToolbarSectionHistory() {
-  const editor = context.useCurrentEditor(
+  const editor = useCurrentEditor(
     "SectionHistory",
     "Toolbar or FloatingToolbar"
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, {
+      /* @__PURE__ */ jsx(ToolbarButton, {
         name: "Undo",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
+        icon: /* @__PURE__ */ jsx(UndoIcon, {}),
         shortcut: "Mod-Z",
         onClick: () => editor.chain().focus().undo().run(),
         disabled: !editor.can().chain().focus().undo().run()
       }),
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, {
+      /* @__PURE__ */ jsx(ToolbarButton, {
         name: "Redo",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.RedoIcon, {}),
+        icon: /* @__PURE__ */ jsx(RedoIcon, {}),
         shortcut: "Mod-Shift-Z",
         onClick: () => editor.chain().focus().redo().run(),
         disabled: !editor.can().chain().focus().redo().run()
@@ -259,7 +237,7 @@ function ToolbarSectionHistory() {
   });
 }
 function ToolbarSectionInline() {
-  const editor = context.useCurrentEditor(
+  const editor = useCurrentEditor(
     "SectionInline",
     "Toolbar or FloatingToolbar"
   );
@@ -268,43 +246,43 @@ function ToolbarSectionInline() {
   const supportsUnderline = "toggleUnderline" in editor.commands;
   const supportsStrike = "toggleStrike" in editor.commands;
   const supportsCode = "toggleCode" in editor.commands;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      supportsBold && /* @__PURE__ */ jsxRuntime.jsx(ToolbarToggle, {
+      supportsBold && /* @__PURE__ */ jsx(ToolbarToggle, {
         name: "Bold",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.BoldIcon, {}),
+        icon: /* @__PURE__ */ jsx(BoldIcon, {}),
         shortcut: "Mod-B",
         onClick: () => editor.chain().focus().toggleBold().run(),
         disabled: !editor.can().chain().focus().toggleBold().run(),
         active: editor.isActive("bold")
       }),
-      supportsItalic && /* @__PURE__ */ jsxRuntime.jsx(ToolbarToggle, {
+      supportsItalic && /* @__PURE__ */ jsx(ToolbarToggle, {
         name: "Italic",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ItalicIcon, {}),
+        icon: /* @__PURE__ */ jsx(ItalicIcon, {}),
         shortcut: "Mod-I",
         onClick: () => editor.chain().focus().toggleItalic().run(),
         disabled: !editor.can().chain().focus().toggleItalic().run(),
         active: editor.isActive("italic")
       }),
-      supportsUnderline && /* @__PURE__ */ jsxRuntime.jsx(ToolbarToggle, {
+      supportsUnderline && /* @__PURE__ */ jsx(ToolbarToggle, {
         name: "Underline",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UnderlineIcon, {}),
+        icon: /* @__PURE__ */ jsx(UnderlineIcon, {}),
         shortcut: "Mod-U",
         onClick: () => editor.chain().focus().toggleUnderline().run(),
         disabled: !editor.can().chain().focus().toggleUnderline().run(),
         active: editor.isActive("underline")
       }),
-      supportsStrike && /* @__PURE__ */ jsxRuntime.jsx(ToolbarToggle, {
+      supportsStrike && /* @__PURE__ */ jsx(ToolbarToggle, {
         name: "Strikethrough",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.StrikethroughIcon, {}),
+        icon: /* @__PURE__ */ jsx(StrikethroughIcon, {}),
         shortcut: "Mod-U",
         onClick: () => editor.chain().focus().toggleStrike().run(),
         disabled: !editor.can().chain().focus().toggleStrike().run(),
         active: editor.isActive("strike")
       }),
-      supportsCode && /* @__PURE__ */ jsxRuntime.jsx(ToolbarToggle, {
+      supportsCode && /* @__PURE__ */ jsx(ToolbarToggle, {
         name: "Inline code",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CodeIcon, {}),
+        icon: /* @__PURE__ */ jsx(CodeIcon, {}),
         shortcut: "Mod-E",
         onClick: () => editor.chain().focus().toggleCode().run(),
         disabled: !editor.can().chain().focus().toggleCode().run(),
@@ -314,39 +292,39 @@ function ToolbarSectionInline() {
   });
 }
 function ToolbarSectionCollaboration() {
-  const editor = context.useCurrentEditor(
+  const editor = useCurrentEditor(
     "SectionCollaboration",
     "Toolbar or FloatingToolbar"
   );
   const supportsThread = "addPendingComment" in editor.commands;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: supportsThread && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: supportsThread && /* @__PURE__ */ jsx(ToolbarButton, {
       name: "Add a comment",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CommentIcon, {}),
+      icon: /* @__PURE__ */ jsx(CommentIcon, {}),
       onClick: () => editor.chain().focus().addPendingComment().run(),
       children: "Comment"
     })
   });
 }
 function ToolbarSectionAi() {
-  const editor = context.useCurrentEditor("SectionAi", "Toolbar or FloatingToolbar");
+  const editor = useCurrentEditor("SectionAi", "Toolbar or FloatingToolbar");
   const supportsAi = "askAi" in editor.commands;
   const aiName = editor.storage.liveblocksAi?.name;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: supportsAi && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: supportsAi && /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, {
+        /* @__PURE__ */ jsxs(ToolbarButton, {
           name: `Ask ${aiName} anything\u2026`,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesIcon, {}),
+          icon: /* @__PURE__ */ jsx(SparklesIcon, {}),
           onClick: () => editor.chain().focus().askAi(),
           children: [
             "Ask ",
             aiName
           ]
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, {
+        /* @__PURE__ */ jsx(ToolbarButton, {
           name: "Explain",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.QuestionMarkIcon, {}),
+          icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
           onClick: () => editor.chain().focus().askAi("Explain what the text is about"),
           children: "Explain"
         })
@@ -357,29 +335,29 @@ function ToolbarSectionAi() {
 function DefaultToolbarContent({ editor }) {
   const supportsThread = "addPendingComment" in editor.commands;
   const supportsAi = "askAi" in editor.commands;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarSectionHistory, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-      supportsAi ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      /* @__PURE__ */ jsx(ToolbarSectionHistory, {}),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      supportsAi ? /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarSectionAi, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {})
+          /* @__PURE__ */ jsx(ToolbarSectionAi, {}),
+          /* @__PURE__ */ jsx(ToolbarSeparator, {})
         ]
       }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarBlockSelector, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(ToolbarSectionInline, {}),
-      supportsThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      /* @__PURE__ */ jsx(ToolbarBlockSelector, {}),
+      /* @__PURE__ */ jsx(ToolbarSectionInline, {}),
+      supportsThread ? /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarSectionCollaboration, {})
+          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+          /* @__PURE__ */ jsx(ToolbarSectionCollaboration, {})
         ]
       }) : null
     ]
   });
 }
 const Toolbar = Object.assign(
-  react.forwardRef(
+  forwardRef(
     ({
       before,
       after,
@@ -392,15 +370,15 @@ const Toolbar = Object.assign(
         return null;
       }
       const slotProps = { editor };
-      return /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
+      return /* @__PURE__ */ jsx(TooltipProvider, {
+        children: /* @__PURE__ */ jsx(EditorProvider, {
           editor,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          children: /* @__PURE__ */ jsxs("div", {
             ref: forwardedRef,
             role: "toolbar",
             "aria-label": "Toolbar",
             "aria-orientation": "horizontal",
-            className: classnames.classNames("lb-root lb-tiptap-toolbar", className),
+            className: classNames("lb-root lb-tiptap-toolbar", className),
             ...props,
             children: [
               applyToolbarSlot(before, slotProps),
@@ -424,8 +402,5 @@ const Toolbar = Object.assign(
   }
 );
 
-exports.BLOCK_SELECT_SIDE_OFFSET = BLOCK_SELECT_SIDE_OFFSET;
-exports.FLOATING_ELEMENT_COLLISION_PADDING = FLOATING_ELEMENT_COLLISION_PADDING;
-exports.Toolbar = Toolbar;
-exports.applyToolbarSlot = applyToolbarSlot;
+export { BLOCK_SELECT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING, Toolbar, applyToolbarSlot };
 //# sourceMappingURL=Toolbar.js.map