bbang-react-editor 0.1.4 → 0.1.5

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 (7) hide show
  1. package/README.md +30 -0
  2. package/dist/index.d.mts +74 -76
  3. package/dist/index.d.ts +74 -76
  4. package/dist/index.js +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/style.css +235 -2
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -228,6 +228,7 @@ editorRef.current?.scrollToBlock('block-id');
228
228
 
229
229
  // ── 交互行为开关 ──
230
230
  clickBlockToSelect: true,// 点击非文本区域选中整个块
231
+ wps: false, // WPS 精简编辑模式
231
232
  },
232
233
  }}
233
234
  />
@@ -268,6 +269,7 @@ editorRef.current?.scrollToBlock('block-id');
268
269
  | | `calendarDragCreate` | 日历中拖拽创建事件 |
269
270
  | | `codeLanguagePicker` | 代码块语言切换选择器 |
270
271
  | **交互** | `clickBlockToSelect` | 点击块的非文本区域时选中整个块 |
272
+ | | `wps` | WPS 精简编辑模式。开启后会禁用代码块、行内代码等复杂能力，历史 Markdown 中的 code / inlineCode 会按普通文本导入 |
271
273
 
272
274
  ## 只读/预览模式
273
275
 
@@ -289,6 +291,34 @@ const doc = documentFromMarkdown('# Title\n\nParagraph');
289
291
  const md = serializeDocumentToMarkdown(doc);
290
292
  ```
291
293
 
294
+ ## License 配置
295
+
296
+ 编辑器需要通过 `config.license` 传入有效 license。缺失、过期或未授权的功能会自动进入受限配置。
297
+
298
+ ```tsx
299
+ const license = 'BBANG-LICENSE.v1...';
300
+
301
+ <BbangEditor
302
+ defaultValue="# Hello"
303
+ config={{
304
+ license,
305
+ features: {
306
+ heading: true,
307
+ list: true,
308
+ inlineCode: true,
309
+ code: true,
310
+ wps: false,
311
+ },
312
+ }}
313
+ />
314
+ ```
315
+
316
+ 当前 npm demo 使用的测试 license：
317
+
318
+ ```text
319
+ BBANG-LICENSE.v1.eyJwcm9kdWN0IjoiYmJhbmctZWRpdG9yIiwibGljZW5zZUlkIjoibGljLW1xZG54N3ZpIiwic3ViamVjdCI6InRlc3QiLCJpc3N1ZWRBdCI6IjIwMjYtMDYtMTRUMTA6NTA6MTMuODM5WiIsImV4cGlyZXNBdCI6IjIwMjctMDEtMDFUMTA6NDk6MDAuMDAwWiIsImZlYXR1cmVzIjp7ImhlYWRpbmciOnRydWUsImxpc3QiOnRydWUsInRvZG9MaXN0Ijp0cnVlLCJjb2RlIjp0cnVlLCJxdW90ZSI6dHJ1ZSwiZGl2aWRlciI6dHJ1ZSwiY2FsbG91dCI6dHJ1ZSwidG9nZ2xlIjp0cnVlLCJ0YWJsZSI6dHJ1ZSwiY2FsZW5kYXIiOnRydWUsImltYWdlIjp0cnVlLCJib2xkIjp0cnVlLCJpdGFsaWMiOnRydWUsInVuZGVybGluZSI6dHJ1ZSwic3RyaWtldGhyb3VnaCI6dHJ1ZSwiaW5saW5lQ29kZSI6dHJ1ZSwidGV4dENvbG9yIjp0cnVlLCJiYWNrZ3JvdW5kQ29sb3IiOnRydWUsImxpbmsiOnRydWUsImJsb2NrRHJhZyI6dHJ1ZSwic2xhc2hNZW51Ijp0cnVlLCJzZWxlY3Rpb25Ub29sYmFyIjp0cnVlLCJibG9ja0hhbmRsZU1lbnUiOnRydWUsImZpbmRSZXBsYWNlIjp0cnVlLCJtYXJrZG93blNob3J0Y3V0Ijp0cnVlLCJtYXJrZG93blBhc3RlIjp0cnVlLCJ0YWJsZU1lcmdlQ2VsbCI6dHJ1ZSwidGFibGVSZXNpemUiOnRydWUsImNhbGVuZGFyRHJhZ0NyZWF0ZSI6dHJ1ZSwiY29kZUxhbmd1YWdlUGlja2VyIjp0cnVlLCJjbGlja0Jsb2NrVG9TZWxlY3QiOnRydWUsIndwcyI6dHJ1ZX0sImFwcENvbmZpZyI6eyJzaG93RmlsZVNpZGViYXIiOnRydWUsInNob3dUYWJsZU9mQ29udGVudHMiOnRydWUsImRyYWdGaWxlVG9SZWFkIjp0cnVlLCJzaG93VG9vbGJhciI6dHJ1ZSwic2hvd1Nob3J0Y3V0SGludHMiOnRydWUsInNob3dTdGF0dXNCYXIiOnRydWV9fQ
320
+ ```
321
+
292
322
  ## 虚拟滚动
293
323
 
294
324
  编辑器内置虚拟滚动支持，当文档超过 2000 个块时自动启用，确保大文档流畅编辑。
package/dist/index.d.mts CHANGED
@@ -1,86 +1,84 @@
1
1
  import React from 'react';
2
2
 
3
- type FeatureFlags = Record<string, boolean | undefined>;
4
- type ResolvedFeatureFlags = Record<string, boolean>;
5
- type ConfigValue = string | number | boolean | null | undefined | ConfigValue[] | {
6
- [key: string]: ConfigValue;
7
- };
8
- interface EditorConfig {
9
- license?: string;
10
- editor?: Record<string, ConfigValue>;
11
- block?: Record<string, ConfigValue>;
12
- paragraph?: Record<string, ConfigValue>;
13
- text?: Record<string, ConfigValue>;
14
- heading?: Record<string, ConfigValue>;
15
- list?: Record<string, ConfigValue>;
16
- quote?: Record<string, ConfigValue>;
17
- callout?: Record<string, ConfigValue>;
18
- toggle?: Record<string, ConfigValue>;
19
- table?: Record<string, ConfigValue>;
20
- cursor?: Record<string, ConfigValue>;
21
- placeholder?: Record<string, ConfigValue>;
22
- inlineCode?: Record<string, ConfigValue>;
23
- codeBlock?: Record<string, ConfigValue>;
24
- selectionHighlight?: Record<string, ConfigValue>;
25
- features?: FeatureFlags;
26
- [key: string]: ConfigValue | FeatureFlags | undefined;
3
+ export type FeatureFlags = Record<string, boolean | undefined>;
4
+
5
+ export type ResolvedFeatureFlags = Record<string, boolean>;
6
+
7
+ export type ConfigValue =
8
+ | string
9
+ | number
10
+ | boolean
11
+ | null
12
+ | undefined
13
+ | ConfigValue[]
14
+ | { [key: string]: ConfigValue };
15
+
16
+ export interface EditorConfig {
17
+ license?: string;
18
+ editor?: Record<string, ConfigValue>;
19
+ block?: Record<string, ConfigValue>;
20
+ paragraph?: Record<string, ConfigValue>;
21
+ text?: Record<string, ConfigValue>;
22
+ heading?: Record<string, ConfigValue>;
23
+ list?: Record<string, ConfigValue>;
24
+ quote?: Record<string, ConfigValue>;
25
+ callout?: Record<string, ConfigValue>;
26
+ toggle?: Record<string, ConfigValue>;
27
+ table?: Record<string, ConfigValue>;
28
+ cursor?: Record<string, ConfigValue>;
29
+ placeholder?: Record<string, ConfigValue>;
30
+ inlineCode?: Record<string, ConfigValue>;
31
+ codeBlock?: Record<string, ConfigValue>;
32
+ selectionHighlight?: Record<string, ConfigValue>;
33
+ features?: FeatureFlags;
34
+ [key: string]: ConfigValue | FeatureFlags | undefined;
27
35
  }
28
- interface Document$1 {
29
- readonly __bbangDocumentBrand?: never;
36
+
37
+ export interface Document {
38
+ readonly __bbangDocumentBrand?: never;
30
39
  }
31
40
 
32
- interface BbangEditorProps {
33
- /** Markdown 字符串作为初始内容（仅首次挂载生效） */
34
- defaultValue?: string;
35
- /** 内容变化回调，返回 Markdown 字符串（debounce 300ms） */
36
- onChange?: (markdown: string) => void;
37
- /** 编辑器配置（样式、功能开关等） */
38
- config?: EditorConfig;
39
- /** 只读模式 */
40
- readOnly?: boolean;
41
- /** 自动聚焦 */
42
- autoFocus?: boolean;
43
- /** 容器 className */
44
- className?: string;
45
- /** onChange debounce 延迟（ms），默认 300 */
46
- debounceMs?: number;
41
+ export interface MarkdownParseOptions {
42
+ code?: boolean;
43
+ inlineCode?: boolean;
44
+ image?: boolean;
47
45
  }
48
- interface BbangEditorHandle {
49
- importMarkdown(text: string): void;
50
- exportMarkdown(): string;
51
- getDocument(): Document$1;
52
- setDocument(doc: Document$1): void;
53
- scrollToBlock(blockId: string): void;
46
+
47
+ export interface InsertImageOptions {
48
+ alt?: string;
49
+ ratio?: 'auto' | 'default' | '4:3' | '16:9';
50
+ widthPercent?: number;
51
+ heightPercent?: number;
52
+ align?: 'left' | 'center' | 'right';
54
53
  }
55
- declare const BbangEditor: React.ForwardRefExoticComponent<BbangEditorProps & React.RefAttributes<BbangEditorHandle>>;
56
54
 
57
- /**
58
- * bbang-react-editor
59
- *
60
- * 轻量 React 块编辑器组件
61
- *
62
- * @example
63
- * ```tsx
64
- * import { BbangEditor } from 'bbang-react-editor';
65
- * import 'bbang-react-editor/style.css';
66
- *
67
- * function App() {
68
- * const ref = useRef<BbangEditorHandle>(null);
69
- * return (
70
- * <BbangEditor
71
- * ref={ref}
72
- * defaultValue="# Hello\n\nWorld"
73
- * onChange={(md) => console.log(md)}
74
- * />
75
- * );
76
- * }
77
- * ```
78
- */
55
+ export interface BbangEditorProps {
56
+ defaultValue?: string;
57
+ onChange?: (markdown: string) => void;
58
+ config?: EditorConfig;
59
+ readOnly?: boolean;
60
+ autoFocus?: boolean;
61
+ className?: string;
62
+ debounceMs?: number;
63
+ }
79
64
 
80
- declare function documentFromMarkdown(text: string): Document$1;
81
- declare function serializeDocumentToMarkdown(doc: Document$1): string;
82
- declare const Document: {
83
- new (): Document$1;
84
- };
65
+ export interface BbangEditorHandle {
66
+ importMarkdown(text: string): void;
67
+ exportMarkdown(): string;
68
+ insertImage(src: string, options?: InsertImageOptions): void;
69
+ getDocument(): Document;
70
+ setDocument(doc: Document): void;
71
+ scrollToBlock(blockId: string): void;
72
+ }
73
+
74
+ export const BbangEditor: React.ForwardRefExoticComponent<
75
+ BbangEditorProps & React.RefAttributes<BbangEditorHandle>
76
+ >;
85
77
 
86
- export { BbangEditor, type BbangEditorHandle, type BbangEditorProps, Document, type EditorConfig, type FeatureFlags, type ResolvedFeatureFlags, documentFromMarkdown, serializeDocumentToMarkdown };
78
+ export function documentFromMarkdown(text: string, options?: MarkdownParseOptions): Document;
79
+
80
+ export function serializeDocumentToMarkdown(doc: Document): string;
81
+
82
+ export const Document: {
83
+ new(): Document;
84
+ };
package/dist/index.d.ts CHANGED
@@ -1,86 +1,84 @@
1
1
  import React from 'react';
2
2
 
3
- type FeatureFlags = Record<string, boolean | undefined>;
4
- type ResolvedFeatureFlags = Record<string, boolean>;
5
- type ConfigValue = string | number | boolean | null | undefined | ConfigValue[] | {
6
- [key: string]: ConfigValue;
7
- };
8
- interface EditorConfig {
9
- license?: string;
10
- editor?: Record<string, ConfigValue>;
11
- block?: Record<string, ConfigValue>;
12
- paragraph?: Record<string, ConfigValue>;
13
- text?: Record<string, ConfigValue>;
14
- heading?: Record<string, ConfigValue>;
15
- list?: Record<string, ConfigValue>;
16
- quote?: Record<string, ConfigValue>;
17
- callout?: Record<string, ConfigValue>;
18
- toggle?: Record<string, ConfigValue>;
19
- table?: Record<string, ConfigValue>;
20
- cursor?: Record<string, ConfigValue>;
21
- placeholder?: Record<string, ConfigValue>;
22
- inlineCode?: Record<string, ConfigValue>;
23
- codeBlock?: Record<string, ConfigValue>;
24
- selectionHighlight?: Record<string, ConfigValue>;
25
- features?: FeatureFlags;
26
- [key: string]: ConfigValue | FeatureFlags | undefined;
3
+ export type FeatureFlags = Record<string, boolean | undefined>;
4
+
5
+ export type ResolvedFeatureFlags = Record<string, boolean>;
6
+
7
+ export type ConfigValue =
8
+ | string
9
+ | number
10
+ | boolean
11
+ | null
12
+ | undefined
13
+ | ConfigValue[]
14
+ | { [key: string]: ConfigValue };
15
+
16
+ export interface EditorConfig {
17
+ license?: string;
18
+ editor?: Record<string, ConfigValue>;
19
+ block?: Record<string, ConfigValue>;
20
+ paragraph?: Record<string, ConfigValue>;
21
+ text?: Record<string, ConfigValue>;
22
+ heading?: Record<string, ConfigValue>;
23
+ list?: Record<string, ConfigValue>;
24
+ quote?: Record<string, ConfigValue>;
25
+ callout?: Record<string, ConfigValue>;
26
+ toggle?: Record<string, ConfigValue>;
27
+ table?: Record<string, ConfigValue>;
28
+ cursor?: Record<string, ConfigValue>;
29
+ placeholder?: Record<string, ConfigValue>;
30
+ inlineCode?: Record<string, ConfigValue>;
31
+ codeBlock?: Record<string, ConfigValue>;
32
+ selectionHighlight?: Record<string, ConfigValue>;
33
+ features?: FeatureFlags;
34
+ [key: string]: ConfigValue | FeatureFlags | undefined;
27
35
  }
28
- interface Document$1 {
29
- readonly __bbangDocumentBrand?: never;
36
+
37
+ export interface Document {
38
+ readonly __bbangDocumentBrand?: never;
30
39
  }
31
40
 
32
- interface BbangEditorProps {
33
- /** Markdown 字符串作为初始内容（仅首次挂载生效） */
34
- defaultValue?: string;
35
- /** 内容变化回调，返回 Markdown 字符串（debounce 300ms） */
36
- onChange?: (markdown: string) => void;
37
- /** 编辑器配置（样式、功能开关等） */
38
- config?: EditorConfig;
39
- /** 只读模式 */
40
- readOnly?: boolean;
41
- /** 自动聚焦 */
42
- autoFocus?: boolean;
43
- /** 容器 className */
44
- className?: string;
45
- /** onChange debounce 延迟（ms），默认 300 */
46
- debounceMs?: number;
41
+ export interface MarkdownParseOptions {
42
+ code?: boolean;
43
+ inlineCode?: boolean;
44
+ image?: boolean;
47
45
  }
48
- interface BbangEditorHandle {
49
- importMarkdown(text: string): void;
50
- exportMarkdown(): string;
51
- getDocument(): Document$1;
52
- setDocument(doc: Document$1): void;
53
- scrollToBlock(blockId: string): void;
46
+
47
+ export interface InsertImageOptions {
48
+ alt?: string;
49
+ ratio?: 'auto' | 'default' | '4:3' | '16:9';
50
+ widthPercent?: number;
51
+ heightPercent?: number;
52
+ align?: 'left' | 'center' | 'right';
54
53
  }
55
- declare const BbangEditor: React.ForwardRefExoticComponent<BbangEditorProps & React.RefAttributes<BbangEditorHandle>>;
56
54
 
57
- /**
58
- * bbang-react-editor
59
- *
60
- * 轻量 React 块编辑器组件
61
- *
62
- * @example
63
- * ```tsx
64
- * import { BbangEditor } from 'bbang-react-editor';
65
- * import 'bbang-react-editor/style.css';
66
- *
67
- * function App() {
68
- * const ref = useRef<BbangEditorHandle>(null);
69
- * return (
70
- * <BbangEditor
71
- * ref={ref}
72
- * defaultValue="# Hello\n\nWorld"
73
- * onChange={(md) => console.log(md)}
74
- * />
75
- * );
76
- * }
77
- * ```
78
- */
55
+ export interface BbangEditorProps {
56
+ defaultValue?: string;
57
+ onChange?: (markdown: string) => void;
58
+ config?: EditorConfig;
59
+ readOnly?: boolean;
60
+ autoFocus?: boolean;
61
+ className?: string;
62
+ debounceMs?: number;
63
+ }
79
64
 
80
- declare function documentFromMarkdown(text: string): Document$1;
81
- declare function serializeDocumentToMarkdown(doc: Document$1): string;
82
- declare const Document: {
83
- new (): Document$1;
84
- };
65
+ export interface BbangEditorHandle {
66
+ importMarkdown(text: string): void;
67
+ exportMarkdown(): string;
68
+ insertImage(src: string, options?: InsertImageOptions): void;
69
+ getDocument(): Document;
70
+ setDocument(doc: Document): void;
71
+ scrollToBlock(blockId: string): void;
72
+ }
73
+
74
+ export const BbangEditor: React.ForwardRefExoticComponent<
75
+ BbangEditorProps & React.RefAttributes<BbangEditorHandle>
76
+ >;
85
77
 
86
- export { BbangEditor, type BbangEditorHandle, type BbangEditorProps, Document, type EditorConfig, type FeatureFlags, type ResolvedFeatureFlags, documentFromMarkdown, serializeDocumentToMarkdown };
78
+ export function documentFromMarkdown(text: string, options?: MarkdownParseOptions): Document;
79
+
80
+ export function serializeDocumentToMarkdown(doc: Document): string;
81
+
82
+ export const Document: {
83
+ new(): Document;
84
+ };