@ap666/office-word 0.1.2 → 0.1.5

package/README.md

@@ -11,7 +11,7 @@ npm install @ap666/office-word
 If your package manager does not auto-install peer dependencies, install the required runtime peers as well:
 
 ```bash
-npm install vue @tiptap/core @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-code-block @tiptap/extension-code-block-lowlight @tiptap/extension-font-family @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-style @tiptap/extension-underline lowlight
+npm install vue @tiptap/core @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-code-block @tiptap/extension-code-block-lowlight @tiptap/extension-collaboration @tiptap/extension-collaboration-caret @tiptap/extension-font-family @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-style @tiptap/extension-underline @tiptap/y-tiptap lowlight y-prosemirror yjs
 ```
 
 ## Basic Use
@@ -37,6 +37,66 @@ The package imports its own styles from the entry, so no extra CSS import is req
 - `modelValue?: JSONContent | null`
 - `editable?: boolean`
 - `placeholder?: string`
+- `collaboration?: RichTextEditorCollaborationOptions | null`
+
+## Collaboration
+
+The same component supports both normal single-user editing and optional Yjs collaboration.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+import type { JSONContent } from '@tiptap/core'
+import { RichTextEditor } from '@ap666/office-word'
+
+const ydoc = new Y.Doc()
+const provider = new WebsocketProvider('ws://localhost:1234', 'office-word-demo', ydoc)
+const content = ref<JSONContent | null>(null)
+</script>
+
+<template>
+  <RichTextEditor
+    v-model="content"
+    :collaboration="{
+      document: ydoc,
+      field: 'content',
+      provider,
+      user: {
+        name: '张三',
+        color: '#3b82f6',
+      },
+    }"
+  />
+</template>
+```
+
+In collaboration mode, the shared Yjs fragment becomes the source of truth. The component still emits JSON updates, but external `modelValue` changes are not pushed back into the editor. If you want remote cursors, also install `y-websocket` in the host project and pass `provider + user`.
+
+Do not use `modelValue` as the initial seed source for a collaborative room. Seed the Yjs document before mounting the editor if the room needs default content.
+
+### Included Yjs Server Example
+
+The published package also includes a minimal collaboration server under `yjs/`.
+
+```bash
+cd node_modules/@ap666/office-word/yjs
+npm install
+npm run start
+```
+
+Default address is `ws://0.0.0.0:1234`.
+
+Use the same websocket address and room name on every client:
+
+```ts
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+
+const ydoc = new Y.Doc()
+const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'office-word-demo', ydoc)
+```
 
 ## Instance API
 
@@ -167,6 +227,9 @@ async function uploadFile(file: File) {
 
 ```ts
 import type {
+  RichTextEditorCollaborationProvider,
+  RichTextEditorCollaborationUser,
+  RichTextEditorCollaborationOptions,
   RichTextEditorFilePayload,
   RichTextEditorImageExportOptions,
   RichTextEditorImagePayload,
@@ -178,3 +241,4 @@ import type {
 ## Package Docs
 
 - usage guide: `docs/usage.md`
+- bundled Yjs server example: `yjs/README.md`

package/dist/composables/useRichTextEditor.d.ts

@@ -1,8 +1,10 @@
 import { JSONContent } from '@tiptap/core';
+import { RichTextEditorCollaborationOptions } from '../types';
 type UseRichTextEditorOptions = {
     content: JSONContent;
     editable: boolean;
     placeholder: string;
+    collaboration?: RichTextEditorCollaborationOptions | null;
     onUpdate: (value: JSONContent) => void;
 };
 export declare function useRichTextEditor(options: UseRichTextEditorOptions): import('vue').ShallowRef<import('@tiptap/vue-3').Editor | undefined, import('@tiptap/vue-3').Editor | undefined>;

package/dist/index.d.ts

@@ -4,5 +4,5 @@ import { default as RichTextEditor } from './components/RichTextEditor.vue';
 import { default as ScrollArea } from './components/ScrollArea.vue';
 export { OfficeColorIcon, OfficeIcon, RichTextEditor, ScrollArea };
 export { colorIconNames, monoIconNames } from './icons';
-export type { OfficeColorIconProps, OfficeIconProps, RichTextEditorFilePayload, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorInstance, RichTextEditorProps, RichTextEditorVideoPayload, } from './types';
+export type { OfficeColorIconProps, OfficeIconProps, RichTextEditorCollaborationAwareness, RichTextEditorCollaborationDocument, RichTextEditorCollaborationOptions, RichTextEditorCollaborationProvider, RichTextEditorCollaborationUser, RichTextEditorFilePayload, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorInstance, RichTextEditorProps, RichTextEditorVideoPayload, } from './types';
 export default RichTextEditor;