@liveblocks/react-tiptap 3.9.1 → 3.9.2-tiptap1

package/dist/toolbar/Toolbar.js

@@ -11,9 +11,7 @@ const FLOATING_ELEMENT_COLLISION_PADDING = 10;
 function applyToolbarSlot(slot, props) {
   if (typeof slot === "function") {
     const Component = slot;
-    return /* @__PURE__ */ jsx(Component, {
-      ...props
-    });
+    return /* @__PURE__ */ jsx(Component, { ...props });
   }
   return slot;
 }
@@ -32,10 +30,9 @@ const ToolbarButton = forwardRef(
       },
       [onKeyDown, closeFloatingToolbar]
     );
-    return /* @__PURE__ */ jsx(ShortcutTooltip, {
-      content: name,
-      shortcut,
-      children: /* @__PURE__ */ jsx(Button, {
+    return /* @__PURE__ */ jsx(ShortcutTooltip, { content: name, shortcut, children: /* @__PURE__ */ jsx(
+      Button,
+      {
         type: "button",
         variant: "toolbar",
         ref: forwardedRef,
@@ -45,20 +42,13 @@ const ToolbarButton = forwardRef(
         ...props,
         onKeyDown: handleKeyDown,
         children: !children && !icon ? name : children
-      })
-    });
+      }
+    ) });
   }
 );
 const ToolbarToggle = forwardRef(
   ({ active, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
-      asChild: true,
-      pressed: active,
-      children: /* @__PURE__ */ jsx(ToolbarButton, {
-        ref: forwardedRef,
-        ...props
-      })
-    });
+    return /* @__PURE__ */ jsx(TogglePrimitive.Root, { asChild: true, pressed: active, children: /* @__PURE__ */ jsx(ToolbarButton, { ref: forwardedRef, ...props }) });
   }
 );
 function createDefaultBlockSelectorItems(editor) {
@@ -151,65 +141,62 @@ const ToolbarBlockSelector = forwardRef(({ items, onKeyDown, ...props }, forward
     },
     [onKeyDown, closeFloatingToolbar]
   );
-  return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
-    value: activeItem?.name,
-    onValueChange: handleItemChange,
-    children: [
-      /* @__PURE__ */ jsx(ShortcutTooltip, {
-        content: "Turn into\u2026",
-        children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, {
-          asChild: true,
-          ...props,
-          ref: forwardedRef,
-          onKeyDown: handleKeyDown,
-          disabled: resolvedItems.length === 0,
-          children: /* @__PURE__ */ jsx(SelectButton, {
-            variant: "toolbar",
-            children: activeItem?.name ?? "Turn into\u2026"
-          })
-        })
-      }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
-        children: /* @__PURE__ */ jsx(FloatingToolbarExternal, {
-          children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Root,
+    {
+      value: activeItem?.name,
+      onValueChange: handleItemChange,
+      children: [
+        /* @__PURE__ */ jsx(ShortcutTooltip, { content: "Turn into\u2026", children: /* @__PURE__ */ jsx(
+          SelectPrimitive.Trigger,
+          {
+            asChild: true,
+            ...props,
+            ref: forwardedRef,
+            onKeyDown: handleKeyDown,
+            disabled: resolvedItems.length === 0,
+            children: /* @__PURE__ */ jsx(SelectButton, { variant: "toolbar", children: activeItem?.name ?? "Turn into\u2026" })
+          }
+        ) }),
+        /* @__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__ */ jsxs(SelectPrimitive.Item, {
-              value: item.name,
-              className: "lb-dropdown-item",
-              "data-name": item.name,
-              children: [
-                item.icon ? /* @__PURE__ */ jsx("span", {
-                  className: "lb-dropdown-item-icon lb-icon-container",
-                  children: item.icon
-                }) : null,
-                /* @__PURE__ */ jsx("span", {
-                  className: "lb-dropdown-item-label",
-                  children: item.label ?? item.name
-                }),
-                item.name === activeItem?.name ? /* @__PURE__ */ jsx("span", {
-                  className: "lb-dropdown-item-accessory lb-icon-container",
-                  children: /* @__PURE__ */ jsx(CheckIcon, {})
-                }) : null
-              ]
-            }, item.name))
-          })
-        })
-      })
-    ]
-  });
+            children: resolvedItems.map((item) => /* @__PURE__ */ jsxs(
+              SelectPrimitive.Item,
+              {
+                value: item.name,
+                className: "lb-dropdown-item",
+                "data-name": item.name,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", { className: "lb-dropdown-item-icon lb-icon-container", children: item.icon }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "lb-dropdown-item-label", children: item.label ?? item.name }),
+                  item.name === activeItem?.name ? /* @__PURE__ */ jsx("span", { className: "lb-dropdown-item-accessory lb-icon-container", children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : null
+                ]
+              },
+              item.name
+            ))
+          }
+        ) }) })
+      ]
+    }
+  );
 });
 const ToolbarSeparator = forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx("div", {
-      ref: forwardedRef,
-      role: "separator",
-      "aria-orientation": "vertical",
-      className: cn("lb-tiptap-toolbar-separator", className),
-      ...props
-    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn("lb-tiptap-toolbar-separator", className),
+        ...props
+      }
+    );
   }
 );
 function ToolbarSectionHistory() {
@@ -217,24 +204,28 @@ function ToolbarSectionHistory() {
     "SectionHistory",
     "Toolbar or FloatingToolbar"
   );
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(ToolbarButton, {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
         name: "Undo",
         icon: /* @__PURE__ */ jsx(UndoIcon, {}),
         shortcut: "Mod-Z",
         onClick: () => editor.chain().focus().undo().run(),
         disabled: !editor.can().chain().focus().undo().run()
-      }),
-      /* @__PURE__ */ jsx(ToolbarButton, {
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
         name: "Redo",
         icon: /* @__PURE__ */ jsx(RedoIcon, {}),
         shortcut: "Mod-Shift-Z",
         onClick: () => editor.chain().focus().redo().run(),
         disabled: !editor.can().chain().focus().redo().run()
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 function ToolbarSectionInline() {
   const editor = useCurrentEditor(
@@ -246,50 +237,63 @@ function ToolbarSectionInline() {
   const supportsUnderline = "toggleUnderline" in editor.commands;
   const supportsStrike = "toggleStrike" in editor.commands;
   const supportsCode = "toggleCode" in editor.commands;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      supportsBold && /* @__PURE__ */ jsx(ToolbarToggle, {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    supportsBold && /* @__PURE__ */ jsx(
+      ToolbarToggle,
+      {
         name: "Bold",
         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__ */ jsx(ToolbarToggle, {
+      }
+    ),
+    supportsItalic && /* @__PURE__ */ jsx(
+      ToolbarToggle,
+      {
         name: "Italic",
         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__ */ jsx(ToolbarToggle, {
+      }
+    ),
+    supportsUnderline && /* @__PURE__ */ jsx(
+      ToolbarToggle,
+      {
         name: "Underline",
         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__ */ jsx(ToolbarToggle, {
+      }
+    ),
+    supportsStrike && /* @__PURE__ */ jsx(
+      ToolbarToggle,
+      {
         name: "Strikethrough",
         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__ */ jsx(ToolbarToggle, {
+      }
+    ),
+    supportsCode && /* @__PURE__ */ jsx(
+      ToolbarToggle,
+      {
         name: "Inline code",
         icon: /* @__PURE__ */ jsx(CodeIcon, {}),
         shortcut: "Mod-E",
         onClick: () => editor.chain().focus().toggleCode().run(),
         disabled: !editor.can().chain().focus().toggleCode().run(),
         active: editor.isActive("code")
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 function ToolbarSectionCollaboration() {
   const editor = useCurrentEditor(
@@ -297,64 +301,61 @@ function ToolbarSectionCollaboration() {
     "Toolbar or FloatingToolbar"
   );
   const supportsThread = "addPendingComment" in editor.commands;
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: supportsThread && /* @__PURE__ */ jsx(ToolbarButton, {
+  return /* @__PURE__ */ jsx(Fragment, { children: supportsThread && /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
       name: "Add a comment",
       icon: /* @__PURE__ */ jsx(CommentIcon, {}),
       onClick: () => editor.chain().focus().addPendingComment().run(),
       children: "Comment"
-    })
-  });
+    }
+  ) });
 }
 function ToolbarSectionAi() {
   const editor = useCurrentEditor("SectionAi", "Toolbar or FloatingToolbar");
   const supportsAi = "askAi" in editor.commands;
   const aiName = editor.storage.liveblocksAi?.name;
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: supportsAi && /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsxs(ToolbarButton, {
-          name: `Ask ${aiName} anything\u2026`,
-          icon: /* @__PURE__ */ jsx(SparklesIcon, {}),
-          onClick: () => editor.chain().focus().askAi(),
-          children: [
-            "Ask ",
-            aiName
-          ]
-        }),
-        /* @__PURE__ */ jsx(ToolbarButton, {
-          name: "Explain",
-          icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
-          onClick: () => editor.chain().focus().askAi("Explain what the text is about"),
-          children: "Explain"
-        })
-      ]
-    })
-  });
+  return /* @__PURE__ */ jsx(Fragment, { children: supportsAi && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ToolbarButton,
+      {
+        name: `Ask ${aiName} anything\u2026`,
+        icon: /* @__PURE__ */ jsx(SparklesIcon, {}),
+        onClick: () => editor.chain().focus().askAi(),
+        children: [
+          "Ask ",
+          aiName
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        name: "Explain",
+        icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
+        onClick: () => editor.chain().focus().askAi("Explain what the text is about"),
+        children: "Explain"
+      }
+    )
+  ] }) });
 }
 function DefaultToolbarContent({ editor }) {
   const supportsThread = "addPendingComment" in editor.commands;
   const supportsAi = "askAi" in editor.commands;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(ToolbarSectionHistory, {}),
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ToolbarSectionHistory, {}),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    supportsAi ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ToolbarSectionAi, {}),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {})
+    ] }) : null,
+    /* @__PURE__ */ jsx(ToolbarBlockSelector, {}),
+    /* @__PURE__ */ jsx(ToolbarSectionInline, {}),
+    supportsThread ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-      supportsAi ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx(ToolbarSectionAi, {}),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {})
-        ]
-      }) : null,
-      /* @__PURE__ */ jsx(ToolbarBlockSelector, {}),
-      /* @__PURE__ */ jsx(ToolbarSectionInline, {}),
-      supportsThread ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(ToolbarSectionCollaboration, {})
-        ]
-      }) : null
-    ]
-  });
+      /* @__PURE__ */ jsx(ToolbarSectionCollaboration, {})
+    ] }) : null
+  ] });
 }
 const Toolbar = Object.assign(
   forwardRef(
@@ -370,34 +371,71 @@ const Toolbar = Object.assign(
         return null;
       }
       const slotProps = { editor };
-      return /* @__PURE__ */ jsx(TooltipProvider, {
-        children: /* @__PURE__ */ jsx(EditorProvider, {
-          editor,
-          children: /* @__PURE__ */ jsxs("div", {
-            ref: forwardedRef,
-            role: "toolbar",
-            "aria-label": "Toolbar",
-            "aria-orientation": "horizontal",
-            className: cn("lb-root lb-tiptap-toolbar", className),
-            ...props,
-            children: [
-              applyToolbarSlot(before, slotProps),
-              applyToolbarSlot(children, slotProps),
-              applyToolbarSlot(after, slotProps)
-            ]
-          })
-        })
-      });
+      return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EditorProvider, { editor, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: forwardedRef,
+          role: "toolbar",
+          "aria-label": "Toolbar",
+          "aria-orientation": "horizontal",
+          className: cn("lb-root lb-tiptap-toolbar", className),
+          ...props,
+          children: [
+            applyToolbarSlot(before, slotProps),
+            applyToolbarSlot(children, slotProps),
+            applyToolbarSlot(after, slotProps)
+          ]
+        }
+      ) }) });
     }
   ),
   {
+    /**
+     * A button for triggering actions.
+     *
+     * @example
+     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }} />
+     *
+     * @example
+     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
+     */
     Button: ToolbarButton,
+    /**
+     * A toggle button for values that can be active or inactive.
+     *
+     * @example
+     * <Toolbar.Toggle name="Bold" active={isBold} />
+     *
+     * @example
+     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
+     */
     Toggle: ToolbarToggle,
+    /**
+     * A dropdown selector to switch between different block types.
+     *
+     * @example
+     * <Toolbar.BlockSelector />
+     */
     BlockSelector: ToolbarBlockSelector,
+    /**
+     * A visual (and accessible) separator to separate sections in a toolbar.
+     */
     Separator: ToolbarSeparator,
+    /**
+     * A section containing history actions. (e.g. undo, redo)
+     */
     SectionHistory: ToolbarSectionHistory,
+    /**
+     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
+     */
     SectionInline: ToolbarSectionInline,
+    /**
+     * A section containing collaborative actions. (e.g. adding a comment)
+     */
     SectionCollaboration: ToolbarSectionCollaboration,
+    /**
+     * A section containing AI actions. (e.g. opening the AI toolbar)
+     */
     SectionAi: ToolbarSectionAi
   }
 );