neuphlo-editor 1.3.2 → 1.4.0

package/README.md

@@ -261,43 +261,41 @@ Both the text and image bubble menus can expand with custom controls. Pass the `
 
 ```tsx
 import type { Editor } from "@tiptap/react"
+import { Sparkles } from "lucide-react" // or any icon library
 
 const bubbleMenuExtras = {
   text: {
-    align: "start", // show on the left side of the menu
+    align: "start", // "start" (left) or "end" (right)
     render: (editor: Editor) => (
       <button
         type="button"
         className="nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon"
         onMouseDown={(e) => e.preventDefault()}
         onClick={() => {
-          if (editor.state.selection.empty) return
-          const note = window.prompt("Add note", "Needs review")
-          if (!note) return
-          const { to } = editor.state.selection
-          editor.chain().focus().insertContentAt(to, ` [Note: ${note}]`).run()
+          const selection = editor.state.selection
+          const text = editor.state.doc.textBetween(selection.from, selection.to)
+          console.log("AI Action on:", text)
+          // Trigger your AI logic here
         }}
+        title="AI Assistant"
       >
-        Add note
+        <Sparkles size={16} />
       </button>
     ),
   },
   image: {
-    // Default align is "end" (right side). You can pass an array for multiple buttons.
+    align: "end",
     render: (editor: Editor) => (
       <button
         type="button"
         className="nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon"
         onMouseDown={(e) => e.preventDefault()}
-        onClick={() =>
-          editor
-            .chain()
-            .focus()
-            .updateAttributes("image", { align: "left" })
-            .run()
-        }
+        onClick={() => {
+           // Custom image action
+           console.log("Custom image action")
+        }}
       >
-        Pin left
+        Custom Action
       </button>
     ),
   },
@@ -306,7 +304,13 @@ const bubbleMenuExtras = {
 <Editor bubbleMenuExtras={bubbleMenuExtras} />
 ```
 
-Each render callback receives the live Tiptap editor so you can check selection state, trigger commands, or early-return `null` to hide your custom control. The optional `align` flag lets you position the control on the left (`"start"`) or right (`"end"`, default) side of the bubble menu.
+Each render callback receives the live Tiptap editor instance, allowing you to:
+- Check the current selection state
+- Read the document content
+- Execute commands (e.g., `editor.chain().focus()...`)
+- Conditionally render your button (return `null` to hide it)
+
+The `align` property controls where your custom items appear in the menu relative to the default items.
 
 ## Styling
 

package/dist/react/index.cjs

@@ -992,31 +992,53 @@ var handleCommandNavigation = (event) => {
 };
 
 // src/headless/extensions/extension-kit.ts
-var ExtensionKit = (options) => [
-  import_starter_kit.StarterKit.configure({}),
-  CodeBlock,
-  Link,
-  ImageBlock.configure({
-    uploadImage: options?.uploadImage
-  }),
-  import_extension_placeholder.Placeholder.configure({
-    placeholder: ({ node }) => {
-      if (node.type.name === "heading") {
-        return `Heading ${node.attrs.level}`;
+var import_extension_collaboration = __toESM(require("@tiptap/extension-collaboration"), 1);
+var import_extension_collaboration_cursor = __toESM(require("@tiptap/extension-collaboration-cursor"), 1);
+var ExtensionKit = (options) => {
+  const extensions = [
+    import_starter_kit.StarterKit.configure({ codeBlock: false, link: false }),
+    CodeBlock,
+    Link,
+    ImageBlock.configure({
+      uploadImage: options?.uploadImage
+    }),
+    import_extension_placeholder.Placeholder.configure({
+      placeholder: ({ node }) => {
+        if (node.type.name === "heading") {
+          return `Heading ${node.attrs.level}`;
+        }
+        return "Press '/' for commands";
+      },
+      includeChildren: true
+    }),
+    Command2.configure({
+      suggestion: {
+        char: "/",
+        render: renderItems,
+        allowSpaces: true,
+        allowedPrefixes: null
       }
-      return "Press '/' for commands";
-    },
-    includeChildren: true
-  }),
-  Command2.configure({
-    suggestion: {
-      char: "/",
-      render: renderItems,
-      allowSpaces: true,
-      allowedPrefixes: null
+    })
+  ];
+  if (options?.collaboration) {
+    extensions.push(
+      import_extension_collaboration.default.configure({
+        document: options.collaboration.doc,
+        field: options.collaboration.field
+      })
+    );
+    if (options.collaboration.awareness) {
+      extensions.push(
+        import_extension_collaboration_cursor.default.configure({
+          provider: options.collaboration.awareness,
+          user: options.collaboration.awareness.user
+          // The provider should hold the user info
+        })
+      );
     }
-  })
-];
+  }
+  return extensions;
+};
 var extension_kit_default = ExtensionKit;
 
 // src/react/menus/TextMenu.tsx
@@ -1905,8 +1927,8 @@ function ImageMenu({
   (0, import_react20.useEffect)(() => {
     if (!editor) return;
     const update = () => {
-      if (!editor.isActive("image")) return;
-      const attrs = editor.getAttributes("image") ?? {
+      if (!editor.isActive("imageBlock")) return;
+      const attrs = editor.getAttributes("imageBlock") ?? {
         width: "",
         align: "left"
       };
@@ -1931,27 +1953,24 @@ function ImageMenu({
   if (!editor) return null;
   const updateImageSize = (newSize) => {
     setSize(newSize);
-    editor.commands.updateAttributes("image", {
-      width: `${newSize}%`
-    });
+    editor.commands.setImageBlockWidth(newSize);
   };
   const updateImageAlign = (newAlign) => {
     setAlign(newAlign);
-    editor.commands.updateAttributes("image", { align: newAlign });
+    editor.commands.setImageBlockAlign(newAlign);
   };
   const removeImage = () => {
     editor.chain().focus().deleteSelection().run();
   };
   const triggerUpload = () => {
-    ;
-    editor.chain().focus().uploadImage().run();
+    editor.commands.updateAttributes("imageBlock", { src: "", loading: false });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_menus3.BubbleMenu,
     {
       editor,
       shouldShow: ({ editor: e, state }) => {
-        if (!e.isActive("image")) return false;
+        if (!e.isActive("imageBlock")) return false;
         const { selection } = state;
         const isNodeSelection = selection.constructor.name === "NodeSelection";
         return isNodeSelection;
@@ -2078,7 +2097,8 @@ function Editor2({
   bubbleMenuExtras,
   onUpdate,
   onCreate,
-  uploadImage
+  uploadImage,
+  collaboration
 }) {
   const normalizeExtras = (extras) => {
     const result = {
@@ -2104,7 +2124,10 @@ function Editor2({
       immediatelyRender,
       editable,
       content,
-      extensions: [...extension_kit_default({ uploadImage }), ...extensions ?? []],
+      extensions: [
+        ...extension_kit_default({ uploadImage, collaboration }),
+        ...extensions ?? []
+      ],
       editorProps: {
         attributes: {
           class: "nph-editor max-w-none outline-none"