yuque-rich-text 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +425 -150
  2. package/lib/components/lake-rich/editor-plugin.d.ts +46 -0
  3. package/lib/components/lake-rich/lake-rich.d.ts +5 -0
  4. package/lib/components/lake-rich/load.d.ts +8 -0
  5. package/lib/components/lake-rich/slash-options.d.ts +46 -0
  6. package/lib/components/lake-rich/template.d.ts +4 -0
  7. package/lib/core/create-lake-editor.d.ts +17 -0
  8. package/lib/core/editor-plugin.d.ts +46 -0
  9. package/lib/core/index.d.ts +6 -0
  10. package/lib/core/load.d.ts +11 -0
  11. package/lib/core/slash-options.d.ts +46 -0
  12. package/lib/core/template.d.ts +4 -0
  13. package/lib/core/types.d.ts +102 -0
  14. package/lib/create-lake-editor-xZsm8nT1.js +341 -0
  15. package/lib/index.d.ts +11 -0
  16. package/lib/index.js +6 -0
  17. package/lib/lake-rich-view-vdfdFEom.js +184 -0
  18. package/lib/react/index.d.ts +3 -0
  19. package/lib/react/lake-rich.d.ts +32 -0
  20. package/lib/react.d.ts +6 -0
  21. package/lib/react.js +135 -0
  22. package/lib/vue/index.d.ts +5 -0
  23. package/lib/vue/lake-rich-view.d.ts +96 -0
  24. package/lib/vue/lake-rich.d.ts +139 -0
  25. package/lib/vue.d.ts +6 -0
  26. package/lib/vue.js +7 -0
  27. package/package.json +70 -12
  28. package/.github/workflows/publish.yml +0 -77
  29. package/.vscode/extensions.json +0 -3
  30. package/demo/App.vue +0 -52
  31. package/demo/assets/vue.svg +0 -1
  32. package/demo/main.ts +0 -5
  33. package/demo/style.css +0 -34
  34. package/demo/vite-env.d.ts +0 -1
  35. package/index.html +0 -21
  36. package/public/Images/preview.png +0 -0
  37. package/public/Images/yuque-rich-text.gif +0 -0
  38. package/public/vite.svg +0 -1
  39. package/src/components/lake-rich/editor-plugin.ts +0 -205
  40. package/src/components/lake-rich/lake-rich-view.vue +0 -14
  41. package/src/components/lake-rich/lake-rich.ts +0 -297
  42. package/src/components/lake-rich/load.ts +0 -32
  43. package/src/components/lake-rich/slash-options.ts +0 -96
  44. package/src/components/lake-rich/template.ts +0 -92
  45. package/src/index.ts +0 -7
  46. package/tsconfig.json +0 -37
  47. package/vite.config.ts +0 -73
package/README.md CHANGED
@@ -1,189 +1,464 @@
1
- # Yuque Rich Text（语雀富文本编辑器）
1
+ # yuque-rich-text
2
2
 
3
- 由于本人觉得语雀编辑器非常好用，很符合我的使用习惯，然后发现语雀的[Chrome浏览器插件](https://github.com/yuque/yuque-chrome-extension)实现了编辑器的功能，所以将其富文本的功能拆分位一个单独的Vue3组件。
3
+ [![npm version](https://img.shields.io/npm/v/yuque-rich-text.svg)](https://www.npmjs.com/package/yuque-rich-text)
4
+ [![license](https://img.shields.io/npm/l/yuque-rich-text.svg)](./LICENSE)
4
5
 
5
- ## 安装
6
- ```sh
7
- npm i yuque-rich-text
8
- ```
6
+ **Yuque (语雀) Lake** rich-text **editor** and **viewer** for **Vue 3** and **React**.
7
+
8
+ Extracted from the official [yuque-chrome-extension](https://github.com/yuque/yuque-chrome-extension) so you can embed the same Lake editing experience in your own apps.
9
+
10
+ > **Unofficial third-party package.** Not affiliated with, maintained by, or endorsed by Yuque / 语雀.
11
+
12
+ ---
13
+
14
+ ## Table of Contents
15
+
16
+ - [Features](#features)
17
+ - [Screenshots](#screenshots)
18
+ - [Installation](#installation)
19
+ - [Prerequisites (CDN assets)](#prerequisites-cdn-assets)
20
+ - [Quick Start](#quick-start)
21
+ - [Vue 3](#vue-3)
22
+ - [React](#react)
23
+ - [Upload configuration](#upload-configuration)
24
+ - [API Reference](#api-reference)
25
+ - [Props](#props)
26
+ - [Events / Callbacks](#events--callbacks)
27
+ - [Imperative API (`ref`)](#imperative-api-ref)
28
+ - [Viewer mode](#viewer-mode)
29
+ - [Package exports](#package-exports)
30
+ - [Development](#development)
31
+ - [Disclaimer](#disclaimer)
32
+ - [License](#license)
33
+
34
+ ---
35
+
36
+ ## Features
37
+
38
+ | Feature | Description |
39
+ | --- | --- |
40
+ | **Vue 3 & React** | First-class adapters with a shared core |
41
+ | **Editor + Viewer** | Full WYSIWYG editing or read-only preview |
42
+ | **Configurable upload** | Custom **upload URLs** and/or **upload callbacks** for image & video |
43
+ | **Lake format** | Native Yuque Lake document format + HTML interop |
44
+ | **Imperative API** | `setContent` / `getContent` / `appendContent` / `wordCount` / … |
45
+ | **Iframe isolation** | Editor runs in a sandboxed iframe with Lake runtime |
46
+
47
+ ---
48
+
49
+ ## Screenshots
50
+
51
+ ![Component demo](https://github.com/Entity-Now/yuque-rich-text/blob/master/public/Images/yuque-rich-text.gif)
9
52
 
10
- ## 截图
11
- ![组件实例](https://github.com/Entity-Now/yuque-rich-text/blob/master/public/Images/yuque-rich-text.gif)
53
+ ---
12
54
 
13
- ### 引入相关样式
55
+ ## Installation
14
56
 
15
- `head`标签中加入
57
+ ```bash
58
+ # npm
59
+ npm install yuque-rich-text
16
60
 
17
- ``` html
18
- <head>
19
- <link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.css"/>
20
- <link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/os/lib/antd/4.24.13/dist/antd.css"/>
21
- </head>
61
+ # pnpm
62
+ pnpm add yuque-rich-text
63
+
64
+ # yarn
65
+ yarn add yuque-rich-text
66
+ ```
67
+
68
+ **Peer dependencies** (install what you use):
69
+
70
+ ```bash
71
+ # Vue 3
72
+ npm install vue@^3
73
+
74
+ # React
75
+ npm install react react-dom
22
76
  ```
23
77
 
24
- `body`标签内的最后一行加入
78
+ ---
79
+
80
+ ## Prerequisites (CDN assets)
81
+
82
+ Lake depends on global scripts/styles. Include them in your host HTML (or inject equivalently at runtime).
83
+
84
+ ### Styles (`<head>`)
25
85
 
26
86
  ```html
27
- <body>
28
- <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
29
- <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
30
- <script src="https://gw.alipayobjects.com/render/p/yuyan_v/180020010000005484/7.1.4/CodeMirror.js"></script>
31
- <script src="https://ur.alipay.com/tracert_a385.js"></script>
32
- <script src="https://mdn.alipayobjects.com/design_kitchencore/afts/file/ANSZQ7GHQPMAAAAAAAAAAAAADhulAQBr"></script>
33
- <script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.umd.js"></script>
34
- </body>
87
+ <link
88
+ rel="stylesheet"
89
+ type="text/css"
90
+ href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.css"
91
+ />
92
+ <link
93
+ rel="stylesheet"
94
+ type="text/css"
95
+ href="https://gw.alipayobjects.com/os/lib/antd/4.24.13/dist/antd.css"
96
+ />
35
97
  ```
36
98
 
37
- ### 编辑使用案例
38
- > 注意不可在onChange事件中修改value的值，否则会进入无限递归。
99
+ ### Scripts (before app bootstrap, typically end of `<body>`)
39
100
 
40
101
  ```html
102
+ <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
103
+ <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
104
+ <script src="https://gw.alipayobjects.com/render/p/yuyan_v/180020010000005484/7.1.4/CodeMirror.js"></script>
105
+ <script src="https://ur.alipay.com/tracert_a385.js"></script>
106
+ <script src="https://mdn.alipayobjects.com/design_kitchencore/afts/file/ANSZQ7GHQPMAAAAAAAAAAAAADhulAQBr"></script>
107
+ <script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.umd.js"></script>
108
+ ```
109
+
110
+ > The editor iframe also loads these assets via its internal template. Host-page inclusion is still recommended for consistent global `Doc` availability in some environments.
111
+
112
+ ---
41
113
 
114
+ ## Quick Start
115
+
116
+ ### Vue 3
117
+
118
+ ```vue
42
119
  <template>
43
- <YuqueRichText ref="editorRef" :value="content" @onChange="editChange" @onLoad="load"/>
44
- <button @click="appendText">追加内容</button>
45
- <button @click="getContent">获取内容</button>
46
- <button @click="setText">更新内容</button>
120
+ <div class="editor-wrap">
121
+ <YuqueRichText
122
+ ref="editorRef"
123
+ :value="content"
124
+ :image-upload-u-r-l="imageUploadURL"
125
+ :video-upload-u-r-l="videoUploadURL"
126
+ :upload-image="uploadImage"
127
+ @on-change="onChange"
128
+ @on-load="onLoad"
129
+ @on-save="onSave"
130
+ />
131
+ </div>
47
132
  </template>
48
133
 
49
134
  <script setup lang="ts">
50
- import { ref } from 'vue'
51
- import { YuqueRichText } from 'yuque-rich-text'
135
+ import { ref } from "vue";
136
+ import { YuqueRichText } from "yuque-rich-text";
137
+ // or: import { YuqueRichText } from 'yuque-rich-text/vue'
52
138
  import type { IEditorRef } from "yuque-rich-text";
53
139
 
54
- const editorRef = ref<IEditorRef>()
55
- const content = ref('初始内容')
140
+ const editorRef = ref<IEditorRef>();
141
+ const content = ref("<p>Hello Lake</p>");
142
+
143
+ /** Prefer kebab for multi-cap props, or use camelCase in script-bound objects */
144
+ const imageUploadURL = "/api/v1/upload/image";
145
+ const videoUploadURL = "/api/v1/upload/video";
146
+
147
+ const uploadImage = async (params: { data: string | File }) => {
148
+ const form = new FormData();
149
+ form.append("file", params.data);
150
+ const res = await fetch(imageUploadURL, { method: "POST", body: form });
151
+ const json = await res.json();
152
+ return {
153
+ url: json.url,
154
+ size: json.size ?? 0,
155
+ filename: json.filename ?? "image.png",
156
+ };
157
+ };
158
+
159
+ const onChange = (value: string) => {
160
+ // Do NOT write back into `content` from onChange with the same binding
161
+ // if you also pass `:value="content"` without guards — that can loop.
162
+ console.log("change", value);
163
+ };
164
+
165
+ const onLoad = () => {
166
+ editorRef.value?.focusToStart();
167
+ };
168
+
169
+ const onSave = () => {
170
+ // Ctrl/Cmd + Enter
171
+ console.log(editorRef.value?.getContent("lake"));
172
+ };
173
+ </script>
56
174
 
57
- const appendText = () => {
58
- if (editorRef.value) {
59
- editorRef.value.appendContent('<p>这是追加的内容</p>', true)
60
- }
175
+ <style scoped>
176
+ .editor-wrap {
177
+ height: 480px;
178
+ border: 1px solid #e5e7eb;
179
+ border-radius: 8px;
180
+ overflow: hidden;
61
181
  }
62
- const setText = () => {
63
- if (editorRef.value) {
64
- editorRef.value.setContent('<p>更新的内容</p>')
65
- }
182
+ </style>
183
+ ```
184
+
185
+ > **Tip:** Vue prop names like `imageUploadURL` are exposed as `image-upload-u-r-l` in templates. You can also pass a nested `upload` object to avoid awkward kebab names (see [Upload configuration](#upload-configuration)).
186
+
187
+ Using nested `upload` (recommended in Vue templates):
188
+
189
+ ```vue
190
+ <YuqueRichText
191
+ ref="editorRef"
192
+ :value="content"
193
+ :upload="{
194
+ imageUploadURL: '/api/v1/upload/image',
195
+ videoUploadURL: '/api/v1/upload/video',
196
+ uploadImage,
197
+ }"
198
+ @on-change="onChange"
199
+ />
200
+ ```
201
+
202
+ ### React
203
+
204
+ ```tsx
205
+ import { useRef, useState } from "react";
206
+ import { LakeRich, type IEditorRef } from "yuque-rich-text/react";
207
+
208
+ export function DocEditor() {
209
+ const editorRef = useRef<IEditorRef>(null);
210
+ const [value, setValue] = useState("<p>Hello Lake</p>");
211
+
212
+ return (
213
+ <div style={{ height: 480 }}>
214
+ <LakeRich
215
+ ref={editorRef}
216
+ value={value}
217
+ imageUploadURL="/api/v1/upload/image"
218
+ videoUploadURL="/api/v1/upload/video"
219
+ uploadImage={async ({ data }) => {
220
+ const form = new FormData();
221
+ form.append("file", data);
222
+ const res = await fetch("/api/v1/upload/image", {
223
+ method: "POST",
224
+ body: form,
225
+ });
226
+ const json = await res.json();
227
+ return {
228
+ url: json.url,
229
+ size: json.size ?? 0,
230
+ filename: json.filename ?? "image.png",
231
+ };
232
+ }}
233
+ onChange={setValue}
234
+ onLoad={() => editorRef.current?.focusToStart()}
235
+ onSave={() => {
236
+ console.log(editorRef.current?.getContent("lake"));
237
+ }}
238
+ />
239
+ </div>
240
+ );
66
241
  }
242
+ ```
243
+
244
+ ---
245
+
246
+ ## Upload configuration
247
+
248
+ Previously the editor hard-coded `/api/upload/image` and `/api/upload/video`. You can now configure **URLs** and/or **custom upload functions**.
67
249
 
68
- const getContent = () => {
69
- if (editorRef.value) {
70
- const html = editorRef.value.getContent('text/html')
71
- alert('当前内容:' + html)
72
- }
250
+ ### Option A — Upload URLs only
251
+
252
+ Lake will POST to your endpoints using its built-in uploader:
253
+
254
+ ```ts
255
+ {
256
+ imageUploadURL: "https://your.cdn.example/upload/image",
257
+ imageCrawlURL: "https://your.cdn.example/crawl/image", // optional; defaults to imageUploadURL
258
+ videoUploadURL: "https://your.cdn.example/upload/video",
73
259
  }
260
+ ```
74
261
 
75
- const load = ()=>{
76
- console.log("编辑器加载成功...");
77
- // 此时可进行增删改查操作
78
- editorRef.value?.appendContent('<p>这是追加的内容</p><br>', true)
262
+ ### Option B — Custom upload callbacks
263
+
264
+ Full control over auth headers, form fields, response mapping:
265
+
266
+ ```ts
267
+ async function uploadImage(params: { data: string | File }) {
268
+ // params.data is File | base64 string depending on Lake path
269
+ const res = await yourUploader(params.data);
270
+ return {
271
+ url: res.publicUrl,
272
+ size: res.bytes,
273
+ filename: res.name,
274
+ };
79
275
  }
276
+ ```
80
277
 
81
- const editChange = (e : string)=>{
82
- console.log("编辑器内容发生变化：", e);
278
+ When `uploadImage` / `uploadVideo` is provided, it is passed to Lake as `createUploadPromise` and takes precedence for the upload pipeline.
279
+
280
+ ### Option C — Nested `upload` object
281
+
282
+ ```ts
283
+ const upload = {
284
+ imageUploadURL: "/api/upload/image",
285
+ imageCrawlURL: "/api/upload/crawl",
286
+ videoUploadURL: "/api/upload/video",
287
+ uploadImage: async ({ data }) => { /* ... */ },
288
+ uploadVideo: async ({ data }) => { /* ... */ },
289
+ };
290
+ ```
291
+
292
+ **Precedence:** flat props (`imageUploadURL`, `uploadImage`, …) override the same keys inside `upload`.
293
+
294
+ | Field | Type | Default | Description |
295
+ | --- | --- | --- | --- |
296
+ | `imageUploadURL` | `string` | `/api/upload/image` | Image upload endpoint |
297
+ | `imageCrawlURL` | `string` | same as `imageUploadURL` | Remote image crawl / proxy |
298
+ | `videoUploadURL` | `string` | `/api/upload/video` | Video upload endpoint |
299
+ | `uploadImage` | `(params) => Promise<UploadResult>` | — | Custom image uploader |
300
+ | `uploadVideo` | `(params) => Promise<UploadResult>` | — | Custom video uploader |
301
+
302
+ ```ts
303
+ interface UploadResult {
304
+ url: string;
305
+ size: number;
306
+ filename: string;
83
307
  }
84
- </script>
85
308
  ```
86
309
 
87
- ### 预览模式
310
+ ---
88
311
 
89
- > 使用也非常简单， 将组建的`isview`属性改为`true`即可。
312
+ ## API Reference
313
+
314
+ ### Props
315
+
316
+ | Prop | Type | Default | Description |
317
+ | --- | --- | --- | --- |
318
+ | `value` | `string` | `''` | Document content (Lake / HTML as accepted by Lake) |
319
+ | `isview` | `boolean` | `false` | `true` → read-only viewer |
320
+ | `isView` | `boolean` | — | React-only alias of `isview` |
321
+ | `placeholder` | `string` | `'输入内容...'` | Empty-editor placeholder |
322
+ | `defaultFontsize` | `number` | `14` | Default font size (px) |
323
+ | `upload` | `UploadConfig` | — | Nested upload config |
324
+ | `imageUploadURL` | `string` | see above | Image upload URL |
325
+ | `imageCrawlURL` | `string` | see above | Image crawl URL |
326
+ | `videoUploadURL` | `string` | see above | Video upload URL |
327
+ | `uploadImage` | `function` | — | Custom image upload |
328
+ | `uploadVideo` | `function` | — | Custom video upload |
329
+
330
+ ### Events / Callbacks
331
+
332
+ | Name | Payload | Description |
333
+ | --- | --- | --- |
334
+ | `onChange` | `(value: string)` | Content changed (Lake string with meta) |
335
+ | `onLoad` | `()` | Editor / viewer ready |
336
+ | `onSave` | `()` | `Ctrl+Enter` (Windows/Linux) or `Cmd+Enter` (macOS*) |
337
+
338
+ \*Save chord follows the original extension behavior.
339
+
340
+ Vue also emits `update:value` for optional `v-model:value` usage. Avoid uncontrolled two-way binding loops: if you bind both `:value` and `@onChange` that immediately writes the same source, guard with equality checks.
341
+
342
+ ### Imperative API (`ref`)
343
+
344
+ ```ts
345
+ interface IEditorRef {
346
+ appendContent: (html: string, breakLine?: boolean) => void;
347
+ setContent: (content: string, type?: "text/lake" | "text/html") => void;
348
+ getContent: (type: "lake" | "text/html" | "description") => string;
349
+ isEmpty: () => boolean;
350
+ getSummaryContent: () => string;
351
+ wordCount: () => number;
352
+ focusToStart: (offset?: number) => void;
353
+ insertBreakLine: () => void;
354
+ }
355
+ ```
356
+
357
+ | Method | Description |
358
+ | --- | --- |
359
+ | `appendContent(html, breakLine?)` | Append HTML; optional leading break |
360
+ | `setContent(content, type?)` | Replace document (`text/html` default) |
361
+ | `getContent(type)` | Read content as Lake / HTML / description |
362
+ | `isEmpty()` | Whether document is empty |
363
+ | `getSummaryContent()` | Summary in Lake format |
364
+ | `wordCount()` | Word count |
365
+ | `focusToStart(offset?)` | Focus start (optional paragraph offset) |
366
+ | `insertBreakLine()` | Insert line break at selection |
367
+
368
+ Call imperative methods **after** `onLoad`.
369
+
370
+ ---
371
+
372
+ ## Viewer mode
373
+
374
+ ### Vue
375
+
376
+ ```vue
377
+ <script setup lang="ts">
378
+ import { YuqueRichText, YuqueRichTextView } from "yuque-rich-text";
379
+ </script>
90
380
 
91
- ```html
92
381
  <template>
93
- <YuqueRichText :isview="true" :value="content" />
382
+ <!-- Option 1 -->
383
+ <YuqueRichText :isview="true" :value="htmlOrLake" />
384
+
385
+ <!-- Option 2: dedicated viewer component -->
386
+ <YuqueRichTextView :value="htmlOrLake" />
94
387
  </template>
95
388
  ```
96
389
 
97
- ### Props
390
+ ### React
391
+
392
+ ```tsx
393
+ import { LakeRich, LakeRichView } from "yuque-rich-text/react";
394
+
395
+ <LakeRich isView value={content} />
396
+ // or
397
+ <LakeRichView value={content} />
398
+ ```
399
+
400
+ ---
401
+
402
+ ## Package exports
403
+
404
+ | Subpath | Framework | Primary symbols |
405
+ | --- | --- | --- |
406
+ | `yuque-rich-text` | Vue 3 (default, backward compatible) | `YuqueRichText`, `YuqueRichTextView` |
407
+ | `yuque-rich-text/vue` | Vue 3 | same as default |
408
+ | `yuque-rich-text/react` | React | `LakeRich`, `LakeRichView` |
409
+
410
+ Shared types (`IEditorRef`, `UploadConfig`, …) are re-exported from each entry.
411
+
412
+ ---
413
+
414
+ ## Development
415
+
416
+ ```bash
417
+ # install
418
+ pnpm install # or npm install
419
+
420
+ # local demo
421
+ pnpm dev
422
+
423
+ # library build → ./lib
424
+ pnpm build:lib
425
+
426
+ # static demo build
427
+ pnpm build:demo
428
+ ```
429
+
430
+ ### Project layout
431
+
432
+ ```
433
+ src/
434
+ core/ # Framework-agnostic Lake mount + types
435
+ vue/ # Vue 3 adapter
436
+ react/ # React adapter
437
+ components/ # Legacy paths (re-exports)
438
+ demo/ # Vite playground
439
+ ```
440
+
441
+ ---
442
+
443
+ ## Disclaimer
444
+
445
+ This is an **unofficial third-party** integration for [Yuque](https://www.yuque.com). It is **not** affiliated with, maintained by, or endorsed by Yuque.
446
+
447
+ - **Use at your own risk.** Authors are not responsible for ToS violations or damages.
448
+ - Do **not** use if Yuque prohibits this usage in your context.
449
+ - This project does not redistribute Yuque’s proprietary application source; it loads publicly referenced Lake runtime assets in the same manner as the open-source browser extension.
450
+
451
+ Please review [Yuque’s Terms of Service](https://www.yuque.com) before production use.
452
+
453
+ ---
454
+
455
+ ## License
456
+
457
+ MIT
458
+
459
+ ---
460
+
461
+ ## Credits
98
462
 
99
- ```js
100
- export interface EditorProps {
101
- value: string; // 传递给组件的内容
102
- children?: any; // 暂无实现
103
- isview?: boolean; // 为true该组件是只读的，为空或false则是编辑模式
104
- uploadImage?: (params: { data: string | File }) => Promise<{
105
- url: string;
106
- size: number;
107
- filename: string;
108
- }>;
109
- uploadVideo?: (params: { data: string | File }) => Promise<{
110
- url: string;
111
- size: number;
112
- filename: string;
113
- }>;
114
- }
115
- ```
116
-
117
- ### Emit
118
-
119
- ```js
120
- export interface EditorEmits{
121
- onChange?: (value: string) => void;
122
- onLoad?: () => void;
123
- onSave?: () => void;
124
- }
125
- ```
126
-
127
- ## Expose
128
-
129
- ```js
130
- export interface IEditorRef {
131
- /**
132
- * 追加html到文档
133
- * @param html html内容
134
- * @param breakLine 是否前置一个换行符
135
- */
136
- appendContent: (html: string, breakLine?: boolean) => void;
137
- /**
138
- * 设置文档内容，将清空旧的内容
139
- * @param html html内容
140
- */
141
- setContent: (content: string, type?: "text/lake" | "text/html") => void;
142
- /**
143
- * 获取文档内容
144
- * @param type 内容的格式
145
- * @return 文档内容
146
- */
147
- getContent: (type: "lake" | "text/html") => string;
148
- /**
149
- * 判断当前文档是否是空文档
150
- * @return true表示当前是空文档
151
- */
152
- isEmpty: () => boolean;
153
-
154
- /**
155
- * 获取额外信息
156
- * @return
157
- */
158
- getSummaryContent: () => string;
159
-
160
- /**
161
- * 统计字数
162
- * @return
163
- */
164
- wordCount: () => number;
165
-
166
- /**
167
- * 聚焦到文档开头
168
- * @param {number} offset 偏移多少个段落，可以将选区落到开头的第offset个段落上, 默认是0
169
- * @return
170
- */
171
- focusToStart: (offset?: number) => void;
172
-
173
- /**
174
- * 插入换行符
175
- * @return
176
- */
177
- insertBreakLine: () => void;
178
- }
179
- ```
180
-
181
-
182
- ## ⚠️ Disclaimer
183
- This is an **unofficial third-party extension** for `[www.yuque.com]`. It is not affiliated with, maintained by, or endorsed by `[www.yuque.com]`.
184
-
185
- - **Use at your own risk**. The developers are not responsible for any violations of `[www.yuque.com]`'s terms or damages caused by this project.
186
- - **Do not use** if `[www.yuque.com]` prohibits third-party modifications.
187
- - This project does not redistribute any copyrighted materials from `[www.yuque.com]`.
188
-
189
- [Read `[www.yuque.com]`'s Terms of Service](www.yuque.com) before installation.
463
+ - [yuque-chrome-extension](https://github.com/yuque/yuque-chrome-extension) — original editor integration
464
+ - Lake / lakex-doc runtime — Alipay / Yuque ecosystem
package/lib/components/lake-rich/editor-plugin.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ declare class IEditorPlugin {
2
+ editor: any;
3
+ init(): void;
4
+ }
5
+ declare class IKernelPlugin {
6
+ kernel: any;
7
+ init(kernel: any): void;
8
+ }
9
+ declare class IRendererPlugin {
10
+ editor: any;
11
+ init(): void;
12
+ }
13
+ declare class CommandClass {
14
+ static UNAVAILABLE: string;
15
+ static EXECUTED: string;
16
+ static NOT_EXECUTED: string;
17
+ static UNKNOWN: string;
18
+ readonly kernel: any;
19
+ readonly editing: any;
20
+ destroy(): void;
21
+ execute(editing: any, ...args: any[]): any;
22
+ getValue(job: any, ...args: any[]): any;
23
+ }
24
+ export type IEditorPluginCls = new () => IEditorPlugin;
25
+ export type IKernelPluginCls = (new () => IKernelPlugin) & {
26
+ PluginName: string;
27
+ };
28
+ export type IRendererPluginCls = new () => IRendererPlugin;
29
+ export type ICommandCls = new () => CommandClass;
30
+ export declare function InjectEditorPlugin({ EditorPlugin, KernelPlugin, PositionUtil, OpenEditorFactory, toolbarItems, Command, SelectionUtil }: {
31
+ EditorPlugin: IEditorPluginCls;
32
+ KernelPlugin: IKernelPluginCls;
33
+ Plugins: Record<string, any>;
34
+ Command: ICommandCls;
35
+ SelectionUtil: any;
36
+ PositionUtil: any;
37
+ OpenEditorFactory: {
38
+ editorPlugins: IEditorPluginCls[];
39
+ kernelPlugins: IKernelPluginCls[];
40
+ registerEditorPlugin: (plugins: IEditorPluginCls[]) => void;
41
+ registerRenderPlugin: (plugins: IRendererPluginCls[]) => void;
42
+ registerKernelPlugin: (plugins: IKernelPluginCls[]) => void;
43
+ };
44
+ toolbarItems: Record<string, string>;
45
+ }, doc: Document): void;
46
+ export {};
package/lib/components/lake-rich/lake-rich.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Backward-compatible re-export.
3
+ * Prefer: `import { YuqueRichText } from 'yuque-rich-text'`
4
+ */
5
+ export { default, type EditorProps, type EditorEmits, type IEditorRef, } from '../../vue/lake-rich';
package/lib/components/lake-rich/load.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ declare global {
2
+ interface Window {
3
+ Doc: any;
4
+ }
5
+ }
6
+ export default function loadLakeEditor(win: Window & {
7
+ Doc: any;
8
+ }): Promise<unknown>;