@ap666/office-word 0.1.5 → 0.1.7

package/README.md

@@ -36,9 +36,101 @@ The package imports its own styles from the entry, so no extra CSS import is req
 
 - `modelValue?: JSONContent | null`
 - `editable?: boolean`
+- `mode?: 'edit' | 'preview'`
+- `outlinePlacement?: 'left' | 'right'`
+- `messages?: Partial<Record<string, string>> | null`
+- `enabledExportItems?: ('pdf' | 'html' | 'image' | 'print')[] | null`
+- `enabledInsertMenuItems?: ('image' | 'video' | 'table' | 'local-file' | 'columns' | 'highlight-block' | 'date' | 'code-block' | 'formula' | 'blockquote' | 'emoji' | 'link' | 'divider' | 'countdown' | 'markdown-import')[] | null`
+- `enabledToolbarActions?: ('blockquote')[] | null`
 - `placeholder?: string`
 - `collaboration?: RichTextEditorCollaborationOptions | null`
 
+When these whitelist props are omitted, all built-in options stay enabled. Once you pass a list, only the listed items remain visible and usable.
+
+```vue
+<RichTextEditor
+  v-model="content"
+  :enabled-export-items="['html', 'image']"
+  :enabled-insert-menu-items="['image', 'local-file', 'blockquote']"
+  :enabled-toolbar-actions="['blockquote']"
+/>
+```
+
+The editor UI stays in Chinese by default. Use `messages` to override only the keys you need.
+
+```vue
+<RichTextEditor
+  v-model="content"
+  :messages="{
+    'insert.localFile': 'Attachment',
+    'export.label': 'Download',
+  }"
+/>
+```
+
+Available `messages` keys:
+
+- `insert.label`: 插入
+- `insert.section.general`: 通用
+- `insert.section.apps`: 小应用
+- `insert.section.external`: 外部内容
+- `insert.image`: 图片
+- `insert.video`: 视频
+- `insert.table`: 表格
+- `insert.localFile`: 本地文件
+- `insert.columns`: 分栏
+- `insert.highlightBlock`: 高亮块
+- `insert.date`: 日期
+- `insert.codeBlock`: 代码块
+- `insert.formula`: 公式
+- `insert.blockquote`: 引用
+- `insert.emoji`: 表情符号
+- `insert.link`: 超链接
+- `insert.divider`: 分隔线
+- `insert.countdown`: 倒计时
+- `insert.markdownImport`: Markdown导入
+- `export.label`: 导出
+- `export.pdf`: 导出PDF
+- `export.pdf.loading`: 导出PDF中...
+- `export.html`: 导出HTML
+- `export.html.loading`: 导出HTML中...
+- `export.image`: 导出图片
+- `export.image.loading`: 导出图片中...
+- `print.label`: 打印
+- `print.loading`: 打印中...
+- `quote.apply`: 应用引用
+- `quote.cancel`: 取消引用
+- `quote.borderColor`: 边框颜色
+- `quote.backgroundColor`: 背景颜色
+- `outline.label`: 大纲
+- `outline.collapse`: 收起大纲
+- `outline.empty.description`: 对文档内容应用“标题”样式，即可自动生成大纲。
+- `outline.empty.tip`: 点击左下角“大纲”按钮可以随时展开或收起。
+- `status.wordCountUnit`: 个字
+- `status.presentation.enter`: 演示
+- `status.presentation.exit`: 退出演示
+- `status.fullscreen.enter`: 全屏
+- `status.fullscreen.exit`: 退出全屏
+- `countdown.selectTime`: 请选择时间
+- `countdown.settingsTitle`: 倒计时设置
+- `formula.insertTitle`: 插入 LaTeX 公式
+
+## Preview Mode
+
+Use `mode="preview"` to switch the component into a read-only preview shell. In preview mode, the toolbar is hidden, editing is disabled, and the outline can be placed on either side.
+
+```vue
+<template>
+  <RichTextEditor
+    v-model="content"
+    mode="preview"
+    outline-placement="right"
+  />
+</template>
+```
+
+On narrow screens, preview mode automatically scales the page canvas down so the document stays readable on phones.
+
 ## Collaboration
 
 The same component supports both normal single-user editing and optional Yjs collaboration.
@@ -124,9 +216,29 @@ Available methods:
 - `insertImage(payload | payload[]): boolean`
 - `insertVideo(payload): boolean`
 - `insertFile(payload): boolean`
+- `insertLocalFile(payload): boolean`
+- `openLocalFilePicker(): void`
 - `focus(): void`
 - `getJSON(): JSONContent | null`
 
+## Local File Block
+
+The insert menu now supports `Local File`, and the component instance also exposes local-file insertion APIs.
+
+```ts
+editorRef.value?.insertLocalFile({
+  url: 'https://cdn.example.com/files/demo.txt',
+  name: 'demo.txt',
+  size: 2048,
+  mimeType: 'text/plain',
+})
+```
+
+Listen for local file events from the component:
+
+- `@local-file-upload`: emitted after a local file is selected from the editor picker and inserted
+- `@local-file-download`: emitted when the file card download button is clicked
+
 ## Export Example
 
 ```ts

package/dist/components/LocalFileBlockView.vue.d.ts

@@ -0,0 +1,3 @@
+import { NodeViewProps } from '@tiptap/vue-3';
+declare const _default: import('vue').DefineComponent<NodeViewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/OutlinePanel.vue.d.ts

@@ -1,5 +1,9 @@
 type __VLS_Props = {
     open: boolean;
+    placement: 'left' | 'right';
+    collapseTitle: string;
+    emptyDescription: string;
+    emptyTip: string;
     items: Array<{
         pos: number;
         level: number;

package/dist/components/RichTextEditor.vue.d.ts

@@ -1,5 +1,5 @@
 import { JSONContent } from '@tiptap/core';
-import { RichTextEditorFilePayload, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorProps, RichTextEditorVideoPayload } from '../types';
+import { RichTextEditorFilePayload, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorLocalFilePayload, RichTextEditorProps, RichTextEditorVideoPayload } from '../types';
 declare const _default: import('vue').DefineComponent<RichTextEditorProps, {
     exportPdf: () => Promise<Blob | null>;
     exportImage: (options?: RichTextEditorImageExportOptions) => Promise<Blob | null>;
@@ -7,18 +7,27 @@ declare const _default: import('vue').DefineComponent<RichTextEditorProps, {
     insertImage: (payload: RichTextEditorImagePayload | RichTextEditorImagePayload[]) => boolean;
     insertVideo: (payload: RichTextEditorVideoPayload) => boolean;
     insertFile: (payload: RichTextEditorFilePayload) => boolean;
+    insertLocalFile: (payload: RichTextEditorLocalFilePayload) => boolean;
+    openLocalFilePicker: () => void;
     focus: () => void;
     getJSON: () => JSONContent | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (value: JSONContent) => any;
     "update:modelValue": (value: JSONContent) => any;
+    "local-file-upload": (value: RichTextEditorLocalFilePayload) => any;
+    "local-file-download": (value: RichTextEditorLocalFilePayload) => any;
 }, string, import('vue').PublicProps, Readonly<RichTextEditorProps> & Readonly<{
     onChange?: ((value: JSONContent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: JSONContent) => any) | undefined;
+    "onLocal-file-upload"?: ((value: RichTextEditorLocalFilePayload) => any) | undefined;
+    "onLocal-file-download"?: ((value: RichTextEditorLocalFilePayload) => any) | undefined;
 }>, {
     placeholder: string;
+    mode: "edit" | "preview";
     editable: boolean;
     modelValue: JSONContent | null;
+    outlinePlacement: "left" | "right";
+    messages: import('..').RichTextEditorMessages | null;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     insertMenuRef: HTMLDivElement;
@@ -47,5 +56,6 @@ declare const _default: import('vue').DefineComponent<RichTextEditorProps, {
     countdownBubbleMenuRef: HTMLDivElement;
     countdownBubbleEditButtonRef: HTMLButtonElement;
     markdownImportInputRef: HTMLInputElement;
+    localFileInputRef: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/composables/useRichTextEditor.d.ts

@@ -5,6 +5,12 @@ type UseRichTextEditorOptions = {
     editable: boolean;
     placeholder: string;
     collaboration?: RichTextEditorCollaborationOptions | null;
+    onLocalFileDownload?: (payload: {
+        url: string;
+        name: string;
+        size?: number;
+        mimeType?: string;
+    }) => void;
     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/extensions/local-file-block.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const LocalFileBlock: Node<any, any>;

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, RichTextEditorCollaborationAwareness, RichTextEditorCollaborationDocument, RichTextEditorCollaborationOptions, RichTextEditorCollaborationProvider, RichTextEditorCollaborationUser, RichTextEditorFilePayload, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorInstance, RichTextEditorProps, RichTextEditorVideoPayload, } from './types';
+export type { OfficeColorIconProps, OfficeIconProps, RichTextEditorCollaborationAwareness, RichTextEditorCollaborationDocument, RichTextEditorCollaborationOptions, RichTextEditorCollaborationProvider, RichTextEditorCollaborationUser, RichTextEditorFilePayload, RichTextEditorExportItemKey, RichTextEditorImageExportOptions, RichTextEditorImagePayload, RichTextEditorInstance, RichTextEditorInsertMenuItemKey, RichTextEditorLocalFilePayload, RichTextEditorMessages, RichTextEditorProps, RichTextEditorToolbarActionKey, RichTextEditorVideoPayload, } from './types';
 export default RichTextEditor;