@mxmweb/aichat 1.1.1 → 1.1.8

package/src/components/Displayer/slate/converters/deserializers.ts

@@ -0,0 +1,427 @@
+import { marked } from 'marked';
+import type {
+  CustomElement,
+  CustomText,
+  ParagraphElement,
+  HeadingOneElement,
+  HeadingTwoElement,
+  ListElement,
+  ListItemElement,
+  BaseElement,
+  CodeBlockElement,
+  HeadingThreeElement,
+  BlockQuoteElement,
+  TableElement,
+  TableRowElement,
+  TableCellElement,
+} from './slateConverters';
+
+// 新增think类型
+export interface ThinkElement extends BaseElement {
+  type: 'think';
+}
+
+function ensureChildren(elements: CustomElement[]): CustomElement[] {
+  return elements.map(el => {
+    if (!el.children || el.children.length === 0) {
+      return { ...el, children: [{ text: '' }] };
+    }
+    return {
+      ...el,
+      children: el.children.map(child => {
+        if (typeof child === 'object' && 'type' in child) {
+          return ensureChildren([child as CustomElement])[0];
+        }
+        return child;
+      }),
+    };
+  });
+}
+
+export function deserializeMarkdown(markdown: string): CustomElement[] {
+  // 处理<think>标签，替换为自定义占位符
+  let replaced = markdown.replace(/<think>([\s\S]*?)<\/think>/g, (match, p1) => {
+    // 用特殊占位符包裹内容，后续HTML解析时识别
+    return `\n<think-block>${p1}</think-block>\n`;
+  });
+  // 新增：处理 [retrive-tag ...]...[/retrive-tag]
+
+  replaced = replaced.replace(
+    /\[retrive-tag([^\]]*)\]\[([^\]]+)\]\[\/retrive-tag\]/g,
+    (match, attrs, inner) => {
+      return `<retrive-tag${attrs ? ' ' + attrs.trim() : ''}>${inner}</retrive-tag>`;
+    }
+  );
+  //console.log('replaced:', replaced)
+  marked.setOptions({
+    gfm: true,
+    breaks: true,
+    pedantic: false,
+  });
+  // console.log('````````````replaced:', replaced)
+
+  const html = marked(replaced);
+  if (typeof html !== 'string') {
+    return [{ type: 'paragraph', children: [{ text: '' }] } as ParagraphElement];
+  }
+
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  // console.log('divewfwejfwejkfhwekjfhkj23f32f23:', html)
+  const result = deserializeHtmlNode(div);
+  // 保证返回值始终为非空数组，且所有节点children非空
+  if (!result || result.length === 0) {
+    return [{ type: 'paragraph', children: [{ text: '' }] } as ParagraphElement];
+  }
+  return ensureChildren(result);
+}
+
+function deserializeHtmlNode(node: Node): CustomElement[] {
+  const elements: CustomElement[] = [];
+
+  const deNodes = (deserializeHtmlNode: any, nodeList: any) => {
+    nodeList.forEach((child: any) => {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const el = child as HTMLElement;
+
+        switch (el.tagName.toLowerCase()) {
+          case 'p':
+            deserializeHtmlNode.push({
+              type: 'paragraph',
+              children: deserializeChildren(el),
+            } as ParagraphElement);
+            break;
+          case 'h1':
+            deserializeHtmlNode.push({
+              type: 'heading-one',
+              children: deserializeChildren(el),
+            } as HeadingOneElement);
+            break;
+          case 'h2':
+            deserializeHtmlNode.push({
+              type: 'heading-two',
+              children: deserializeChildren(el),
+            } as HeadingTwoElement);
+            break;
+          case 'h3':
+            deserializeHtmlNode.push({
+              type: 'heading-three',
+              children: deserializeChildren(el),
+            } as HeadingThreeElement);
+            break;
+          case 'ul':
+            deserializeHtmlNode.push({
+              type: 'bulleted-list',
+              children: Array.from(el.children).map(
+                li =>
+                  ({
+                    type: 'list-item',
+                    children: deserializeChildren(li),
+                  }) as ListItemElement
+              ),
+            } as ListElement);
+            break;
+          case 'ol':
+            const ols = {
+              type: 'numbered-list',
+              children: Array.from(el.children).map(li => {
+                const olArr: any = [];
+                if (li?.childNodes?.length) {
+                  deNodes(olArr, li.childNodes);
+                }
+                const res = li?.childNodes?.length ? olArr : deserializeChildren(li);
+                return {
+                  type: 'list-item',
+                  children: res,
+                } as ListItemElement;
+              }),
+            } as ListElement;
+            deserializeHtmlNode.push(ols);
+            break;
+          case 'li':
+            deserializeHtmlNode.push({
+              type: 'list-item',
+              children: deserializeChildren(el),
+            } as ListItemElement);
+            break;
+          case 'pre': {
+            const codeEl = el.querySelector('code');
+            if (codeEl) {
+              deserializeHtmlNode.push({
+                type: 'code-block',
+                children: [{ text: codeEl.textContent || '' }],
+              } as any);
+            } else {
+              deserializeHtmlNode.push({
+                type: 'code-block',
+                children: [{ text: el.textContent || '' }],
+              } as any);
+            }
+            break;
+          }
+          case 'code': {
+            if (!el.closest('pre')) {
+              deserializeHtmlNode.push({
+                type: 'paragraph',
+                children: [{ text: el.textContent || '', code: true }],
+              } as ParagraphElement);
+            }
+            break;
+          }
+          case 'blockquote':
+            deserializeHtmlNode.push({
+              type: 'block-quote',
+              children: deserializeChildren(el),
+            } as BlockQuoteElement);
+            break;
+          case 'table':
+            deserializeHtmlNode.push(deserializeTable(el));
+            break;
+          case 'think-block':
+            deserializeHtmlNode.push({
+              type: 'think',
+              children: [{ text: el.textContent || '' }],
+            } as any);
+            break;
+          default:
+            deserializeHtmlNode.push({
+              type: 'paragraph',
+              children: deserializeChildren(el),
+            } as ParagraphElement);
+            break;
+        }
+      } else if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+        deserializeHtmlNode.push({
+          type: 'paragraph',
+          children: [{ text: child.textContent }],
+        } as ParagraphElement);
+      }
+    });
+    return deserializeHtmlNode;
+  };
+  deNodes(elements, node.childNodes);
+  // console.log('elements:', elements)
+  return elements;
+}
+
+function deserializeChildren(node: Node): (CustomText | BaseElement)[] {
+  const texts: (CustomText | BaseElement)[] = [];
+
+  // 解析行内代码中的 Markdown 样式
+  function parseInlineCodeMarkdown(text: string): CustomText[] {
+    const result: CustomText[] = [];
+    let currentText = '';
+    let isBold = false;
+    let isItalic = false;
+    let i = 0;
+
+    while (i < text.length) {
+      if (text.startsWith('**', i)) {
+        // 处理加粗
+        if (currentText) {
+          result.push({
+            text: currentText,
+            code: true,
+            bold: isBold,
+            italic: isItalic,
+          });
+          currentText = '';
+        }
+        isBold = !isBold;
+        i += 2;
+      } else if (text.startsWith('*', i)) {
+        // 处理斜体
+        if (currentText) {
+          result.push({
+            text: currentText,
+            code: true,
+            bold: isBold,
+            italic: isItalic,
+          });
+          currentText = '';
+        }
+        isItalic = !isItalic;
+        i += 1;
+      } else {
+        currentText += text[i];
+        i += 1;
+      }
+    }
+
+    if (currentText) {
+      result.push({
+        text: currentText,
+        code: true,
+        bold: isBold,
+        italic: isItalic,
+      });
+    }
+
+    return result;
+  }
+
+  function processNode(node: Node, styles: Partial<CustomText> = {}): (CustomText | BaseElement)[] {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent?.trim();
+      if (text) {
+        if (styles.code) {
+          // 如果是行内代码，解析其中的 Markdown 样式
+          return parseInlineCodeMarkdown(text);
+        } else {
+          return [{ text, ...styles }];
+        }
+      }
+      return [];
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      const currentStyles = { ...styles };
+
+      switch (el.tagName.toLowerCase()) {
+        case 'em':
+        case 'i':
+          currentStyles.italic = true;
+          break;
+        case 'strong':
+        case 'b':
+          currentStyles.bold = true;
+          break;
+        case 'code':
+          if (!el.closest('pre')) {
+            currentStyles.code = true;
+          }
+          break;
+        case 'del':
+        case 's':
+          currentStyles.strikethrough = true;
+          break;
+        case 'u':
+          currentStyles.underline = true;
+          break;
+        case 'a':
+          currentStyles.link = el.getAttribute('href') || undefined;
+          break;
+        case 'retrive-tag': {
+          // 解析所有属性
+          const attrs: Record<string, string> = {};
+          for (const { name, value } of Array.from(el.attributes)) {
+            attrs[name] = value;
+          }
+          // 只取纯文本内容，做成leaf
+          const text = el.textContent || '';
+          return [
+            {
+              text,
+              retrive: true,
+              ...attrs,
+            } as any,
+          ]; // 这里用 any 或扩展 CustomText 类型
+        }
+      }
+      if (el.childNodes.length === 0 && el.textContent?.trim()) {
+        if (currentStyles.code) {
+          return parseInlineCodeMarkdown(el.textContent);
+        } else {
+          return [{ text: el.textContent, ...currentStyles }];
+        }
+      }
+
+      // 递归处理所有子节点
+      let result: (CustomText | BaseElement)[] = [];
+      for (const child of Array.from(el.childNodes)) {
+        result = result.concat(processNode(child, currentStyles));
+      }
+      return result;
+    }
+    return [];
+  }
+
+  for (const child of Array.from(node.childNodes)) {
+    texts.push(...processNode(child));
+  }
+
+  return texts;
+}
+
+function deserializeTable(tableEl: HTMLElement): TableElement {
+  const rows: TableRowElement[] = [];
+
+  // 处理表头
+  const thead = tableEl.querySelector('thead');
+  const tbody = tableEl.querySelector('tbody');
+
+  // 如果没有 thead 和 tbody，说明是简单表格，需要自动添加结构
+  if (!thead && !tbody) {
+    const allRows = Array.from(tableEl.querySelectorAll('tr'));
+    if (allRows.length > 0) {
+      // 第一行作为表头
+      rows.push({
+        type: 'table-row',
+        children: Array.from(allRows[0].children).map(
+          cell =>
+            ({
+              type: 'table-cell',
+              header: true,
+              children: deserializeChildren(cell),
+            }) as TableCellElement
+        ),
+      } as TableRowElement);
+
+      // 剩余行作为表格主体
+      allRows.slice(1).forEach(tr => {
+        rows.push({
+          type: 'table-row',
+          children: Array.from(tr.children).map(
+            cell =>
+              ({
+                type: 'table-cell',
+                header: false,
+                children: deserializeChildren(cell),
+              }) as TableCellElement
+          ),
+        } as TableRowElement);
+      });
+    }
+  } else {
+    // 处理表头
+    if (thead) {
+      const headerRow = thead.querySelector('tr');
+      if (headerRow) {
+        rows.push({
+          type: 'table-row',
+          children: Array.from(headerRow.querySelectorAll('th')).map(
+            cell =>
+              ({
+                type: 'table-cell',
+                header: true,
+                children: deserializeChildren(cell),
+              }) as TableCellElement
+          ),
+        } as TableRowElement);
+      }
+    }
+
+    // 处理表格主体
+    if (tbody) {
+      Array.from(tbody.querySelectorAll('tr')).forEach(tr => {
+        rows.push({
+          type: 'table-row',
+          children: Array.from(tr.querySelectorAll('td')).map(
+            cell =>
+              ({
+                type: 'table-cell',
+                header: false,
+                children: deserializeChildren(cell),
+              }) as TableCellElement
+          ),
+        } as TableRowElement);
+      });
+    }
+  }
+
+  return {
+    type: 'table',
+    children: rows,
+  } as TableElement;
+}

package/src/components/Displayer/slate/converters/mockData.ts

@@ -0,0 +1,190 @@
+// Markdown 示例数据
+export const markdownExample = `# 产品功能概述
+
+这是一个**重要**的产品说明文档，包含了_主要功能_和<u>使用说明</u>。
+
+## 核心功能
+
+* **实时同步：** 数据实时更新
+* **多端支持：** 支持各种设备访问
+* **安全可靠：** 数据加密存储
+
+1. 第一步：安装应用
+2. 第二步：注册账号
+3. 第三步：开始使用
+
+| 功能 | 基础版 | 专业版 |
+|------|--------|--------|
+| 实时同步 | ✓ | ✓ |
+| 多人协作 | × | ✓ |
+| 历史记录 | × | ✓ |
+
+![产品界面预览](https://example.com/preview.jpg)
+
+更多详细信息请访问我们的官网。`;
+
+// HTML 示例数据
+export const htmlExample = `<h1>产品功能概述</h1>
+
+<p>这是一个<strong>重要</strong>的产品说明文档，包含了<em>主要功能</em>和<u>使用说明</u>。</p>
+
+<h2>核心功能</h2>
+
+<ul>
+  <li><strong>实时同步：</strong> 数据实时更新</li>
+  <li><strong>多端支持：</strong> 支持各种设备访问</li>
+  <li><strong>安全可靠：</strong> 数据加密存储</li>
+</ul>
+
+<ol>
+  <li>第一步：安装应用</li>
+  <li>第二步：注册账号</li>
+  <li>第三步：开始使用</li>
+</ol>
+
+<table>
+  <thead>
+    <tr>
+      <th>功能</th>
+      <th>基础版</th>
+      <th>专业版</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>实时同步</td>
+      <td>✓</td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <td>多人协作</td>
+      <td>×</td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <td>历史记录</td>
+      <td>×</td>
+      <td>✓</td>
+    </tr>
+  </tbody>
+</table>
+
+<p style="text-align: center">
+  <img src="https://example.com/preview.jpg" alt="" style="display: block; margin: 0 auto;">
+</p>
+
+<p>更多详细信息请访问我们的官网。</p>`;
+
+// Slate 数据结构示例
+export const slateExample = [
+  {
+    type: 'heading-one',
+    children: [{ text: '产品功能概述', bold: true }],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      { text: '这是一个' },
+      { text: '重要', bold: true },
+      { text: '的产品说明文档，包含了' },
+      { text: '主要功能', italic: true },
+      { text: '和' },
+      { text: '使用说明', underline: true },
+      { text: '。' },
+    ],
+  },
+  {
+    type: 'heading-two',
+    children: [{ text: '核心功能', bold: true }],
+  },
+  {
+    type: 'bulleted-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [
+          { text: '实时同步：', bold: true },
+          { text: ' 数据实时更新' },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          { text: '多端支持：', bold: true },
+          { text: ' 支持各种设备访问' },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          { text: '安全可靠：', bold: true },
+          { text: ' 数据加密存储' },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'numbered-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [{ text: '第一步：安装应用' }],
+      },
+      {
+        type: 'list-item',
+        children: [{ text: '第二步：注册账号' }],
+      },
+      {
+        type: 'list-item',
+        children: [{ text: '第三步：开始使用' }],
+      },
+    ],
+  },
+  {
+    type: 'table',
+    children: [
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '功能', bold: true }] },
+          { type: 'table-cell', children: [{ text: '基础版', bold: true }] },
+          { type: 'table-cell', children: [{ text: '专业版', bold: true }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '实时同步' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '多人协作' }] },
+          { type: 'table-cell', children: [{ text: '×' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '历史记录' }] },
+          { type: 'table-cell', children: [{ text: '×' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'image',
+    url: 'https://example.com/preview.jpg',
+    children: [{ text: '' }],
+    align: 'center',
+  },
+  {
+    type: 'paragraph',
+    children: [{ text: '更多详细信息请访问我们的官网。' }],
+  },
+];