@cou.sh/nuxt 1.0.1 → 1.0.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.0.1",
+  "version": "1.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -71,8 +71,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.build.transpile = nuxt.options.build.transpile || [];
     nuxt.options.build.transpile.push("@rgby/collab-core", "@rgby/collab-vue");
     addPlugin({
-      src: resolver.resolve("./runtime/plugin"),
-      mode: "client"
+      src: resolver.resolve("./runtime/plugin")
     });
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),

package/dist/runtime/components/Editor.vue

@@ -1,4 +1,18 @@
 <script setup>
+import { computed, watch, useTemplateRef } from "vue";
+import { useCollabClient, useAuth, useSyncedMap } from "@rgby/collab-vue";
+import { useCollabStatus } from "../composables/useCollabStatus";
+import {
+  useEditorCollaboration,
+  COLORS,
+  getRandomColor
+} from "../composables/useEditorCollaboration";
+import { useEditorCompletion } from "../composables/useEditorCompletion";
+import { useEditorDragHandle } from "../composables/useEditorDragHandle";
+import { useEditorEmojis } from "../composables/useEditorEmojis";
+import { useEditorMentions } from "../composables/useEditorMentions";
+import { useEditorSuggestions } from "../composables/useEditorSuggestions";
+import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { Emoji } from "@tiptap/extension-emoji";
 import { TaskList, TaskItem } from "@tiptap/extension-list";
 import { TableKit } from "@tiptap/extension-table";
@@ -32,7 +46,11 @@ const user = computed(() => {
   };
 });
 const editorRef = useTemplateRef("editorRef");
-const { extension: Completion, handlers: aiHandlers, isLoading: aiLoading } = useEditorCompletion(editorRef);
+const {
+  extension: Completion,
+  handlers: aiHandlers,
+  isLoading: aiLoading
+} = useEditorCompletion(editorRef);
 const {
   enabled: collaborationEnabled,
   ready: collaborationReady,
@@ -51,19 +69,27 @@ const {
     color: user.value.color
   }
 });
-watch([collaborationReady, provider], ([ready, prov]) => {
-  if (ready && prov) {
-    emit("ready", prov);
-  }
-}, { immediate: true });
-watch(user, (newUser) => {
-  updateUser({
-    name: newUser.name,
-    color: newUser.color,
-    avatar: newUser.avatar
-    // Pass avatar if supported by CollaborationUser
-  });
-}, { deep: true });
+watch(
+  [collaborationReady, provider],
+  ([ready, prov]) => {
+    if (ready && prov) {
+      emit("ready", prov);
+    }
+  },
+  { immediate: true }
+);
+watch(
+  user,
+  (newUser) => {
+    updateUser({
+      name: newUser.name,
+      color: newUser.color,
+      avatar: newUser.avatar
+      // Pass avatar if supported by CollaborationUser
+    });
+  },
+  { deep: true }
+);
 const customHandlers = {
   imageUpload: {
     canExecute: (editor) => editor.can().insertContent({ type: "imageUpload" }),
@@ -120,8 +146,14 @@ const customHandlers = {
     isDisabled: void 0
   },
   scrollAreaWidget: {
-    canExecute: (editor) => editor.can().insertContent({ type: "scrollAreaWidget", content: [{ type: "paragraph" }] }),
-    execute: (editor) => editor.chain().focus().insertContent({ type: "scrollAreaWidget", content: [{ type: "paragraph" }] }),
+    canExecute: (editor) => editor.can().insertContent({
+      type: "scrollAreaWidget",
+      content: [{ type: "paragraph" }]
+    }),
+    execute: (editor) => editor.chain().focus().insertContent({
+      type: "scrollAreaWidget",
+      content: [{ type: "paragraph" }]
+    }),
     isActive: (editor) => editor.isActive("scrollAreaWidget"),
     isDisabled: void 0
   },
@@ -136,8 +168,16 @@ const customHandlers = {
     execute: (editor) => editor.chain().focus().insertContent({
       type: "tabsWidget",
       content: [
-        { type: "tabPanel", attrs: { label: "Tab 1" }, content: [{ type: "paragraph" }] },
-        { type: "tabPanel", attrs: { label: "Tab 2" }, content: [{ type: "paragraph" }] }
+        {
+          type: "tabPanel",
+          attrs: { label: "Tab 1" },
+          content: [{ type: "paragraph" }]
+        },
+        {
+          type: "tabPanel",
+          attrs: { label: "Tab 2" },
+          content: [{ type: "paragraph" }]
+        }
       ]
     }),
     isActive: (editor) => editor.isActive("tabsWidget"),
@@ -149,7 +189,12 @@ const { items: emojiItems } = useEditorEmojis();
 const { items: mentionItems } = useEditorMentions(connectedUsers);
 const { items: suggestionItems } = useEditorSuggestions(customHandlers);
 const { getItems: getDragHandleItems, onNodeChange } = useEditorDragHandle(customHandlers);
-const { toolbarItems, bubbleToolbarItems, getImageToolbarItems, getTableToolbarItems } = useEditorToolbar(customHandlers, { aiLoading });
+const {
+  toolbarItems,
+  bubbleToolbarItems,
+  getImageToolbarItems,
+  getTableToolbarItems
+} = useEditorToolbar(customHandlers, { aiLoading });
 const metadata = useSyncedMap(doc, "metadata");
 const {
   label: statusLabel,
@@ -218,111 +263,112 @@ const extensions = computed(() => [
     </template>
 
     <template #body>
+      <UEditorToolbar
+        v-if="editorRef?.editor"
+        :editor="editorRef.editor"
+        :items="toolbarItems"
+      />
+
+      <UEditor
+        v-if="collaborationReady"
+        ref="editorRef"
+        v-slot="{ editor, handlers }"
+        content-type="markdown"
+        :extensions="extensions"
+        :starter-kit="{ history: false, undoRedo: false, codeBlock: false }"
+        :handlers="customHandlers"
+        autofocus
+        placeholder="Write, type '/' for commands..."
+        class="min-h-screen"
+        @create="onCreate"
+      >
+        <UEditorToolbar
+          :editor="editor"
+          :items="bubbleToolbarItems"
+          layout="bubble"
+          :should-show="
+  ({ editor: editor2, view, state }) => {
+    if (editor2.isActive('imageUpload') || editor2.isActive('image') || state.selection instanceof CellSelection) {
+      return false;
+    }
+    const { selection } = state;
+    return view.hasFocus() && !selection.empty;
+  }
+"
+        >
+          <template #link>
+            <CollabEditorLinkPopover :editor="editor" />
+          </template>
+        </UEditorToolbar>
+
         <UEditorToolbar
-          v-if="editorRef?.editor"
-          :editor="editorRef.editor"
-          :items="toolbarItems"
+          :editor="editor"
+          :items="getImageToolbarItems(editor)"
+          layout="bubble"
+          :should-show="
+  ({ editor: editor2, view }) => {
+    return editor2.isActive('image') && view.hasFocus();
+  }
+"
         />
 
-        <UEditor
-          v-if="collaborationReady"
-          ref="editorRef"
-          v-slot="{ editor, handlers }"
-          content-type="markdown"
-          :extensions="extensions"
-          :starter-kit="{ history: false, undoRedo: false, codeBlock: false }"
-          :handlers="customHandlers"
-          autofocus
-          placeholder="Write, type '/' for commands..."
-          class="min-h-screen"
-          @create="onCreate"
-        >
-            <UEditorToolbar
-              :editor="editor"
-              :items="bubbleToolbarItems"
-              layout="bubble"
-              :should-show="({ editor: editor2, view, state }) => {
-  if (editor2.isActive('imageUpload') || editor2.isActive('image') || state.selection instanceof CellSelection) {
-    return false;
+        <UEditorToolbar
+          :editor="editor"
+          :items="getTableToolbarItems(editor)"
+          layout="bubble"
+          :should-show="
+  ({ editor: editor2, view }) => {
+    return editor2.state.selection instanceof CellSelection && view.hasFocus();
   }
-  const { selection } = state;
-  return view.hasFocus() && !selection.empty;
-}"
-            >
-              <template #link>
-                <CollabEditorLinkPopover :editor="editor" />
-              </template>
-            </UEditorToolbar>
+"
+        />
 
-            <UEditorToolbar
-                :editor="editor"
-                :items="getImageToolbarItems(editor)"
-                layout="bubble"
-                :should-show="({ editor: editor2, view }) => {
-  return editor2.isActive('image') && view.hasFocus();
-}"
-            />
+        <UEditorDragHandle
+          v-slot="{ ui, onClick }"
+          :editor="editor"
+          @node-change="onNodeChange"
+        >
+          <UButton
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :class="ui.handle()"
+            @click="
+  (e) => {
+    e.stopPropagation();
+    const node = onClick();
+    handlers.suggestion?.execute(editor, { pos: node?.pos }).run();
+  }
+"
+          />
 
-            <UEditorToolbar
-                :editor="editor"
-                :items="getTableToolbarItems(editor)"
-                layout="bubble"
-                :should-show="({ editor: editor2, view }) => {
-  return editor2.state.selection instanceof CellSelection && view.hasFocus();
-}"
+          <UDropdownMenu
+            v-slot="{ open }"
+            :modal="false"
+            :items="getDragHandleItems(editor)"
+            :content="{ side: 'left' }"
+            :ui="{ content: 'w-48', label: 'text-xs' }"
+            @update:open="
+  editor.chain().setMeta('lockDragHandle', $event).run()
+"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              active-variant="soft"
+              size="sm"
+              icon="i-lucide-grip-vertical"
+              :active="open"
+              :class="ui.handle()"
             />
+          </UDropdownMenu>
+        </UEditorDragHandle>
 
-            <UEditorDragHandle
-                v-slot="{ ui, onClick }"
-                :editor="editor"
-                @node-change="onNodeChange"
-            >
-                <UButton
-                    icon="i-lucide-plus"
-                    color="neutral"
-                    variant="ghost"
-                    size="sm"
-                    :class="ui.handle()"
-                    @click="(e) => {
-  e.stopPropagation();
-  const node = onClick();
-  handlers.suggestion?.execute(editor, { pos: node?.pos }).run();
-}"
-                />
-
-                <UDropdownMenu
-                    v-slot="{ open }"
-                    :modal="false"
-                    :items="getDragHandleItems(editor)"
-                    :content="{ side: 'left' }"
-                    :ui="{ content: 'w-48', label: 'text-xs' }"
-                    @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
-                >
-                    <UButton
-                        color="neutral"
-                        variant="ghost"
-                        active-variant="soft"
-                        size="sm"
-                        icon="i-lucide-grip-vertical"
-                        :active="open"
-                        :class="ui.handle()"
-                    />
-                </UDropdownMenu>
-            </UEditorDragHandle>
-
-            <UEditorEmojiMenu
-                :editor="editor"
-                :items="emojiItems"
-            />
-            <UEditorMentionMenu
-                :editor="editor"
-                :items="mentionItems"
-            />
-            <UEditorSuggestionMenu
-                :editor="editor"
-                :items="suggestionItems"
-            />
-        </UEditor>
+        <UEditorEmojiMenu :editor="editor" :items="emojiItems" />
+        <UEditorMentionMenu :editor="editor" :items="mentionItems" />
+        <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+      </UEditor>
     </template>
   </UDashboardPanel>
 </template>

package/dist/runtime/composables/useCollabStatus.d.ts

@@ -5,6 +5,6 @@ import { type Ref } from "vue";
  */
 export declare function useCollabStatus(status: Ref<"disconnected" | "connecting" | "connected">, synced: Ref<boolean>): {
     label: import("vue").ComputedRef<"Saved" | "Syncing" | "Connecting" | "Offline">;
-    color: import("vue").ComputedRef<"success" | "info" | "warning" | "error">;
+    color: import("vue").ComputedRef<"error" | "success" | "info" | "warning">;
     icon: import("vue").ComputedRef<"i-lucide-cloud-check" | "i-lucide-cloud-upload" | "i-lucide-cloud" | "i-lucide-cloud-off">;
 };

package/dist/runtime/plugin.d.ts

@@ -1,7 +1,6 @@
-import { CollabClient } from "@rgby/collab-core";
 declare const _default: import("#app").Plugin<{
-    collabClient: CollabClient;
+    collabClient: any;
 }> & import("#app").ObjectPlugin<{
-    collabClient: CollabClient;
+    collabClient: any;
 }>;
 export default _default;

package/dist/runtime/plugin.js

@@ -14,20 +14,43 @@ export default defineNuxtPlugin({
         refreshBuffer: config.auth.refreshBuffer ?? 3600
       }
     } : {};
-    const client = new CollabClient({
-      baseUrl: config.baseUrl || "http://localhost:8000",
-      ...authConfig,
-      offline: {
-        enablePersistence: config.offline?.enablePersistence ?? true,
-        enableUploadQueue: config.offline?.enableUploadQueue ?? true,
-        persistenceDbName: config.offline?.persistenceDbName ?? "collab"
-      }
-    });
-    if (config.debug) {
-      console.log("[Collab] Client initialized", {
-        baseUrl: config.baseUrl,
-        auth: config.auth?.mode
+    let client;
+    if (process.server) {
+      console.log("[Collab Plugin] Running on server - using mock client");
+      client = {
+        authManager: {
+          getSession: () => null,
+          subscribe: () => () => {
+          },
+          getToken: () => null
+        },
+        login: () => Promise.reject(new Error("Cannot login on server")),
+        signup: () => Promise.reject(new Error("Cannot signup on server")),
+        logout: () => Promise.resolve(),
+        getProvider: () => {
+          throw new Error("Cannot get provider on server");
+        },
+        spaces: { list: async () => [], get: async () => ({}), create: async () => ({}) },
+        documents: { list: async () => ({ items: [] }), create: async () => ({}) },
+        comments: { list: async () => ({ threads: [] }), create: async () => ({}) }
+      };
+    } else {
+      console.log("[Collab Plugin] Running on client - initializing real client");
+      client = new CollabClient({
+        baseUrl: config.baseUrl || "http://localhost:8000",
+        ...authConfig,
+        offline: {
+          enablePersistence: config.offline?.enablePersistence ?? true,
+          enableUploadQueue: config.offline?.enableUploadQueue ?? true,
+          persistenceDbName: config.offline?.persistenceDbName ?? "collab"
+        }
       });
+      if (config.debug) {
+        console.log("[Collab] Client initialized", {
+          baseUrl: config.baseUrl,
+          auth: config.auth?.mode
+        });
+      }
     }
     nuxtApp.vueApp.provide(CollabClientKey, client);
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cou.sh/nuxt",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "CoUnit Nuxt Module",
   "repository": "@cou.sh/nuxt",
   "private": false,
@@ -31,7 +31,7 @@
     "dev": "NODE_OPTIONS='--max-old-space-size=8192' bun run dev:prepare && NODE_OPTIONS='--max-old-space-size=8192' nuxt dev playground",
     "dev:build": "NODE_OPTIONS='--max-old-space-size=8192' nuxt build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
-    "release": "bun run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "bun run prepack && changelogen --release && npm publish --access=public && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch",