✨ feat(content-blocks): add plugin for extracting AI message content blocks (#162)

Author: Innei

src/index.ts

@@ -7,6 +7,7 @@ export * from './plugins/code';
 export * from './plugins/codeblock';
 export * from './plugins/codemirror-block';
 export * from './plugins/common';
+export * from './plugins/content-blocks';
 export * from './plugins/file';
 export * from './plugins/hr';
 export * from './plugins/image';

src/plugins/content-blocks/data-source/content-blocks-data-source.ts

@@ -0,0 +1,31 @@
+import type { LexicalEditor } from 'lexical';
+
+import { DataSource } from '@/editor-kernel';
+import type { IMarkdownShortCutService } from '@/plugins/markdown/service/shortcut';
+
+import type { ContentBlock, ExtractContentBlocksOptions } from '../types';
+import { CONTENT_BLOCKS_DATA_TYPE } from '../types';
+import { extractContentBlocks } from '../utils/extract';
+
+export class ContentBlocksDataSource extends DataSource {
+  constructor(
+    private getMarkdownService: () => IMarkdownShortCutService | null,
+    private defaultOptions: ExtractContentBlocksOptions = {},
+  ) {
+    super(CONTENT_BLOCKS_DATA_TYPE);
+  }
+
+  override read(): void {
+    throw new Error("'content-blocks' data source is write-only (editor → blocks).");
+  }
+
+  override write(editor: LexicalEditor): ContentBlock[] {
+    const service = this.getMarkdownService();
+    if (!service) {
+      throw new Error(
+        'ContentBlocksPlugin requires MarkdownPlugin to be registered first; markdown writer service is missing.',
+      );
+    }
+    return extractContentBlocks(editor, service, this.defaultOptions);
+  }
+}

src/plugins/content-blocks/demos/data.json

@@ -0,0 +1,81 @@
+{
+  "root": {
+    "children": [
+      {
+        "children": [
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": "Tell me what's in this picture: ",
+            "type": "text",
+            "version": 1
+          },
+          {
+            "type": "image",
+            "version": 1,
+            "altText": "avatar.png",
+            "caption": {
+              "editorState": {
+                "root": {
+                  "children": [],
+                  "direction": null,
+                  "format": "",
+                  "indent": 0,
+                  "type": "root",
+                  "version": 1
+                }
+              }
+            },
+            "height": 0,
+            "maxWidth": 320,
+            "showCaption": false,
+            "src": "https://avatars.githubusercontent.com/u/17870709?v=4",
+            "status": "uploaded",
+            "width": 0
+          },
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": " — and reference the file below.",
+            "type": "text",
+            "version": 1
+          }
+        ],
+        "direction": null,
+        "format": "",
+        "indent": 0,
+        "type": "paragraph",
+        "version": 1,
+        "textFormat": 0,
+        "textStyle": ""
+      },
+      {
+        "altText": "Block image example",
+        "height": 240,
+        "maxWidth": 480,
+        "src": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=640",
+        "status": "uploaded",
+        "type": "block-image",
+        "version": 1,
+        "width": 480
+      },
+      {
+        "type": "file",
+        "version": 1,
+        "fileUrl": "https://example.com/spec.pdf",
+        "name": "spec.pdf",
+        "size": 20480,
+        "status": "uploaded"
+      }
+    ],
+    "direction": null,
+    "format": "",
+    "indent": 0,
+    "type": "root",
+    "version": 1
+  }
+}

src/plugins/content-blocks/demos/headless.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import {
+  CONTENT_BLOCKS_DATA_TYPE,
+  type ContentBlock,
+  ContentBlocksPlugin,
+  FilePlugin,
+  ImagePlugin,
+  type MediaLists,
+  extractMediaLists,
+} from '@lobehub/editor';
+import { CodeEditor, Collapse, Highlighter } from '@lobehub/ui';
+import { debounce } from 'es-toolkit';
+import { useMemo, useState } from 'react';
+
+import { DEFAULT_HEADLESS_EDITOR_PLUGINS, createHeadlessEditor } from '@/headless';
+
+import sample from './data.json';
+
+const noopUpload = async (): Promise<{ url: string }> => ({ url: '' });
+
+const buildHeadless = () =>
+  createHeadlessEditor({
+    additionalPlugins: [
+      [ImagePlugin, { handleUpload: noopUpload, renderImage: () => null }],
+      [FilePlugin, { decorator: () => null, handleUpload: noopUpload }],
+      ContentBlocksPlugin,
+    ],
+    plugins: DEFAULT_HEADLESS_EDITOR_PLUGINS,
+  });
+
+interface Result {
+  blocks: ContentBlock[];
+  error?: string;
+  media: MediaLists;
+}
+
+const extract = (jsonText: string): Result => {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(jsonText);
+  } catch (error) {
+    return {
+      blocks: [],
+      error: `Invalid JSON: ${(error as Error).message}`,
+      media: { fileList: [], imageList: [] },
+    };
+  }
+
+  const headless = buildHeadless();
+  try {
+    headless.hydrate({ content: parsed, type: 'json' });
+    const blocks = headless.kernel.getDocument(
+      CONTENT_BLOCKS_DATA_TYPE,
+    ) as unknown as ContentBlock[];
+    return { blocks: blocks ?? [], media: extractMediaLists(blocks ?? []) };
+  } catch (error) {
+    return {
+      blocks: [],
+      error: (error as Error).message,
+      media: { fileList: [], imageList: [] },
+    };
+  } finally {
+    headless.destroy();
+  }
+};
+
+const initialInput = JSON.stringify(sample, null, 2);
+
+export default () => {
+  const [input, setInput] = useState(initialInput);
+  const [result, setResult] = useState<Result>(() => extract(initialInput));
+
+  const debouncedExtract = useMemo(
+    () => debounce((value: string) => setResult(extract(value)), 200),
+    [],
+  );
+
+  const handleChange = (next: string) => {
+    setInput(next);
+    debouncedExtract(next);
+  };
+
+  return (
+    <Collapse
+      defaultActiveKey={['input', 'blocks', 'media']}
+      items={[
+        {
+          children: (
+            <CodeEditor
+              language="json"
+              onValueChange={handleChange}
+              style={{ fontSize: 12 }}
+              value={input}
+              variant="borderless"
+            />
+          ),
+          key: 'input',
+          label: 'Editor JSON (input)',
+        },
+        {
+          children: (
+            <Highlighter language="json" style={{ fontSize: 12, padding: 16 }} variant="borderless">
+              {result.error ? `// ${result.error}` : JSON.stringify(result.blocks, null, 2)}
+            </Highlighter>
+          ),
+          key: 'blocks',
+          label: `content-blocks (${result.blocks.length})`,
+        },
+        {
+          children: (
+            <Highlighter language="json" style={{ fontSize: 12, padding: 16 }} variant="borderless">
+              {JSON.stringify(result.media, null, 2)}
+            </Highlighter>
+          ),
+          key: 'media',
+          label: `extractMediaLists → ${result.media.imageList.length} image · ${result.media.fileList.length} file`,
+        },
+      ]}
+      padding={{ body: 0 }}
+      style={{ border: 'none', borderRadius: 0, width: '100%' }}
+      variant="outlined"
+    />
+  );
+};

src/plugins/content-blocks/demos/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import {
+  CONTENT_BLOCKS_DATA_TYPE,
+  type ContentBlock,
+  ContentBlocksPlugin,
+  type IEditor,
+  type MediaLists,
+  ReactFilePlugin,
+  ReactImagePlugin,
+  extractMediaLists,
+} from '@lobehub/editor';
+import { Editor, useEditor } from '@lobehub/editor/react';
+import { Collapse, Highlighter, ToastHost } from '@lobehub/ui';
+import { debounce } from 'es-toolkit';
+import { type FC, useLayoutEffect, useMemo, useState } from 'react';
+
+import { useLexicalComposerContext } from '@/editor-kernel/react';
+
+import content from './data.json';
+
+const ReactContentBlocksPlugin: FC = () => {
+  const [editor] = useLexicalComposerContext();
+  useLayoutEffect(() => {
+    editor.registerPlugin(ContentBlocksPlugin);
+  }, [editor]);
+  return null;
+};
+
+const Panel: FC<{ value: unknown }> = ({ value }) => (
+  <Highlighter language="json" style={{ fontSize: 12, padding: 16 }} variant="borderless">
+    {JSON.stringify(value, null, 2)}
+  </Highlighter>
+);
+
+const emptyMedia: MediaLists = { fileList: [], imageList: [] };
+
+const fileUpload = async (file: File): Promise<{ url: string }> =>
+  new Promise((resolve) => {
+    setTimeout(() => resolve({ url: URL.createObjectURL(file) }), 600);
+  });
+
+export default () => {
+  const editor = useEditor();
+  const [blocks, setBlocks] = useState<ContentBlock[]>([]);
+  const [media, setMedia] = useState<MediaLists>(emptyMedia);
+
+  const handleChange = useMemo(
+    () =>
+      debounce((ed: IEditor) => {
+        try {
+          const next = ed.getDocument(CONTENT_BLOCKS_DATA_TYPE) as unknown as ContentBlock[];
+          setBlocks(next ?? []);
+          setMedia(extractMediaLists(next ?? []));
+        } catch (error) {
+          console.error('[content-blocks demo]', error);
+        }
+      }, 150),
+    [],
+  );
+
+  return (
+    <>
+      <ToastHost />
+      <Collapse
+        defaultActiveKey={['editor', 'blocks', 'media']}
+        items={[
+          {
+            children: (
+              <Editor
+                content={content}
+                editor={editor}
+                onInit={handleChange}
+                onTextChange={handleChange}
+                placeholder="Edit text · drop images · attach files…"
+                plugins={[
+                  ReactContentBlocksPlugin,
+                  Editor.withProps(ReactImagePlugin, { defaultBlockImage: true }),
+                  Editor.withProps(ReactFilePlugin, { handleUpload: fileUpload }),
+                ]}
+                style={{ padding: 16 }}
+                type="json"
+              />
+            ),
+            key: 'editor',
+            label: 'Playground',
+          },
+          {
+            children: <Panel value={blocks} />,
+            key: 'blocks',
+            label: `content-blocks (${blocks.length})`,
+          },
+          {
+            children: <Panel value={media} />,
+            key: 'media',
+            label: `extractMediaLists → ${media.imageList.length} image · ${media.fileList.length} file`,
+          },
+        ]}
+        padding={{ body: 0 }}
+        style={{ border: 'none', borderRadius: 0, width: '100%' }}
+        variant="outlined"
+      />
+    </>
+  );
+};