feat: add AI command suggestions extension for Tiptap editor

- Implemented Commands plugin to handle command suggestions triggered by '@' character. - Created suggestion configuration to filter and render command items. - Added various command items including date, time, formatting, templates, and task management commands. - Introduced CSS styles for the Tiptap editor to enhance UI. - Configured TypeScript settings and Vite build for the project.
2025-12-17 13:48:51 +08:00
commit 8ca7efcf6d
28 changed files with 4412 additions and 0 deletions
--- a/.cnb.yml
+++ b/.cnb.yml
@@ -0,0 +1,55 @@
+# .cnb.yml
+$:
+  vscode:
+    - docker:
+        image: docker.cnb.cool/kevisual/dev-env:latest
+      services:
+        - vscode
+        - docker
+      imports: https://cnb.cool/kevisual/env/-/blob/main/env.yml
+      # 开发环境启动后会执行的任务
+      # stages:
+      #   - name: pnpm install
+      #     script: pnpm install
+
+
+main:
+  web_trigger_sync_to_gitea:
+  - services:
+      - docker
+    imports:
+      - https://cnb.cool/kevisual/env/-/blob/main/env.yml
+    stages:
+      - name: 'show username'
+        script: echo "GITEA_USERNAME is ${GITEA_USERNAME} and GITEA_PASSWORD is ${GITEA_PASSWORD}"
+      - name: sync to gitea
+        image: tencentcom/git-sync
+        settings:
+          target_url: https://git.xiongxiao.me/kevisual/cnb.git
+          auth_type: https
+          username: "oauth2"
+          password:  ${GITEA_TOKEN}
+          git_user: "abearxiong"
+          git_email: "xiongxiao@xiongxiao.me"
+          sync_mode: rebase
+          branch: main
+
+
+
+"**":
+  web_trigger_test:
+    - stages:
+        - name: 执行任务
+          script: echo "job"
+
+# .cnb/web_trigger.yml
+branch:
+  # 如下按钮在分支名以 release 开头的分支详情页面显示
+  - reg: "^main"
+    buttons:
+      - name: 同步代码到gitea
+        desc: 同步代码到gitea
+        event: web_trigger_sync_to_gitea
+      - name: 同步gitea代码到当前仓库
+        desc: 同步gitea代码到当前仓库
+        event: web_trigger_sync_from_gitea
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,15 @@
+.env
+!.env*development
+
+node_modules
+
+dist
+pack-dist
+
+.DS_Store
+
+.pnpm-store
+
+.vite
+
+.astro
--- a/bun.config.ts
+++ b/bun.config.ts
@@ -0,0 +1,15 @@
+import { build } from 'bun';
+
+await build({
+ entrypoints: ["./src/lib.ts"],
+  outdir: './dist',
+  target: 'browser',
+  format: 'esm',
+  naming: {
+    entry: 'app.js',
+  },
+  minify: false,
+  sourcemap: false,
+});
+
+console.log('✅ Build complete: dist/app.js');
--- a/index.html
+++ b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Light Code</title>
+  <!-- <link href="./dist/kv-md.css" rel="stylesheet" /> -->
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+  <!-- <kv-md-editor id="editor"></kv-md-editor> -->
+   <!-- <script type="module">
+    import './dist/kv-md.js';
+   </script> -->
+</body>
+
+</html>
--- a/kevisual.json
+++ b/kevisual.json
@@ -0,0 +1,25 @@
+{
+  "metadata": {
+    "name": "kevisual",
+    "share": "public"
+  },
+  "registry": "https://kevisual.cn/root/ai/kevisual/frontend/simple-lit-vite",
+  "clone": {
+    ".": {
+      "enabled": true
+    }
+  },
+  "syncd": [
+    {
+      "files": [
+        "**/*"
+      ],
+      "registry": ""
+    }
+  ],
+  "sync": {
+    ".gitignore": {
+      "url": "/gitignore.txt"
+    }
+  }
+}
--- a/mod.ts
+++ b/mod.ts
@@ -0,0 +1,2 @@
+import './src/index.css'
+export * from './src/md-editor.ts';
--- a/package.json
+++ b/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "@kevisual/kv-md",
+  "version": "0.0.1",
+  "description": "",
+  "basename": "/root/kv-md",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.config.lib.ts",
+    "prepub": "rm -rf ./dist && rimraf ./pack-dist && pnpm run build:test",
+    "pub": "envision deploy ./dist -k kv-md -v 0.0.1"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
+  "license": "MIT",
+  "packageManager": "pnpm@10.25.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "mod.ts",
+    "src"
+  ],
+  "dependencies": {
+    "@kevisual/app": "^0.0.1",
+    "@kevisual/context": "^0.0.4",
+    "@tiptap/core": "^3.13.0",
+    "@tiptap/extension-code-block-lowlight": "^3.13.0",
+    "@tiptap/extension-dropcursor": "^3.13.0",
+    "@tiptap/extension-highlight": "^3.13.0",
+    "@tiptap/extension-placeholder": "^3.13.0",
+    "@tiptap/extension-typography": "^3.13.0",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/suggestion": "^3.13.0",
+    "dayjs": "^1.11.19",
+    "highlight.js": "^11.11.1",
+    "lit-html": "^3.3.1",
+    "lowlight": "^3.3.0",
+    "nanoid": "^5.1.6",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tiptap-markdown": "^0.9.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@kevisual/query": "0.0.31",
+    "@kevisual/types": "^0.0.10",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/bun": "^1.3.4",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "dotenv": "^17.2.3",
+    "tailwindcss": "^4.1.17",
+    "vite": "^7.2.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./dist/kv-md.js",
+    "./kv-md.js": "./dist/kv-md.js",
+    "./kv-md.css": "./dist/kv-md.css",
+    "./mod.ts": "./mod.ts"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,15 @@
+# simple-lit-vite
+
+这是一个使用 Vite 构建的简单 Lit 项目模板。您可以使用此模板快速启动一个新的 Lit 项目，并利用 AI 助手生成代码片段以加速开发过程。少用git。
+
+## cli
+
+```sh
+ev sync clone -i https://kevisual.cn/root/ai/kevisual/frontend/simple-lit-vite/kevisual.json
+```
+
+## 同步命令
+```sh
+ev sync list
+ev sync upload
+```
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -0,0 +1,71 @@
+
+import { useEffect } from 'react';
+import { TextEditor, TextEditorProps } from './tiptap/editor.ts';
+const markdown = `
+# 欢迎使用 KeVisual Markdown 编辑器！
+这是一个基于 Tiptap 和 React 构建的富文本编辑器，支持 Markdown 语法。
+
+## 功能特点
+- 实时预览
+- 丰富的文本格式化选项
+- 支持图片和链接插入
+- 自定义快捷键
+
+## 快速开始
+只需在编辑区域输入 Markdown 语法，即可实时看到格式化后的内容。
+
+**示例：**
+\`\`\`markdown
+# 这是一个标题
+**加粗文本**
+*斜体文本*
+- 列表项 1
+- 列表项 2
+\`\`\`
+
+享受写作的乐趣吧！
+
+ts code
+
+\`\`\`typescript
+function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+`
+const init = () => {
+  const editor = new TextEditor();
+  const editorContainer = document.getElementById('editor') as HTMLDivElement;
+
+  const opts: TextEditorProps = {
+    markdown,
+    placeholder: '输入内容...',
+    onUpdateHtml: (html) => {
+      console.log('Content changed:', html);
+    },
+  };
+  editor.createEditor(editorContainer, opts);
+  return editor;
+}
+export const App = () => {
+  // useEffect(() => {
+  //   const editor = init();
+  //   return () => {
+  //     editor.destroy();
+  //   };
+  // }, []);
+  return (
+    <div>
+      <h1 className="bg-red-200">Hello Vite + React Simple vite</h1>
+      <div className='card tiptap'>
+        <button type='button' onClick={() => alert('Button clicked!')}>
+          Click me
+        </button>
+      </div>
+      <kv-md-editor markdown={markdown} placeholder='请输入内容...'>
+      </kv-md-editor>
+
+      {/* <kv-template></kv-template> */}
+    </div>
+  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./tiptap/tiptap.css";
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -0,0 +1,49 @@
+import { render } from 'lit-html';
+import { html, TemplateResult } from 'lit-html';
+
+class KvTemplate extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  private render(): void {
+    const content: TemplateResult = html`
+      <style>
+        :host {
+          display: block;
+          padding: 16px;
+          border: 1px solid #ccc;
+          border-radius: 8px;
+          background-color: #f5f5f5;
+        }
+        .container {
+          font-family: Arial, sans-serif;
+          text-align: center;
+        }
+        h1 {
+          color: #333;
+          margin-bottom: 16px;
+        }
+        p {
+          color: #666;
+          line-height: 1.5;
+        }
+      </style>
+      <div class="container">
+        <h1>KV Template Component</h1>
+        <p>This is a sample custom element using Lit-HTML.</p>
+        <p>Current time: ${new Date().toLocaleString()}</p>
+      </div>
+    `;
+
+    render(content, this.shadowRoot!);
+  }
+}
+
+// Define the custom element globally
+customElements.define('kv-template', KvTemplate);
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import './lib.ts'
+import { App } from './app.tsx';
+import './index.css';
+import './md-editor.ts';
+
+createRoot(document.getElementById('root')!).render(<App />);
--- a/src/md-editor.ts
+++ b/src/md-editor.ts
@@ -0,0 +1,124 @@
+import { render } from 'lit-html';
+import { html, TemplateResult } from 'lit-html';
+import { TextEditor, TextEditorProps } from './tiptap/editor.ts';
+
+class KvMdEditor extends HTMLElement {
+  private editor: TextEditor;
+  private editorContainer?: HTMLDivElement;
+  private _markdown: string = '';
+  private _placeholder: string = '输入内容...';
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.editor = new TextEditor();
+  }
+
+  static get observedAttributes() {
+    return ['markdown', 'placeholder'];
+  }
+  getId() {
+    return this.id;
+  }
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (oldValue === newValue) return;
+    
+    switch (name) {
+      case 'markdown':
+        this._markdown = newValue || '';
+        if (this.editorContainer) {
+          this.editor.setContent(this._markdown);
+        }
+        break;
+      case 'placeholder':
+        this._placeholder = newValue || this._placeholder;
+        break;
+    }
+  }
+
+  connectedCallback() {
+    this.render();
+    this.initEditor();
+  }
+
+  disconnectedCallback() {
+    this.editor.destroy();
+  }
+
+  private initEditor(): void {
+    if (!this.editorContainer) return;
+
+    const opts: TextEditorProps = {
+      markdown: this._markdown,
+      placeholder: this._placeholder,
+      onUpdateHtml: (html) => {
+        this.dispatchEvent(
+          new CustomEvent('content-change', {
+            detail: { html, text: this.editor.getContent() },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      },
+    };
+
+    this.editor.createEditor(this.editorContainer, opts);
+  }
+
+  private render(): void {
+    const content: TemplateResult = html`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <slot></slot>
+    `;
+
+    render(content, this.shadowRoot!);
+    let id = this.getId();
+    if(!id) {
+      id = `kv-md-editor-${Math.random().toString(36).substr(2, 9)}`;
+      this.id = id;
+    }
+    const inlineId = `${id}-inline`;
+    let editor = this.shadowRoot!.querySelector(`#${inlineId}`)!;
+    if(!editor) {
+       editor = document.createElement('div');
+       editor.id = inlineId;
+       const host = document.querySelector(`#${id}`);
+       host!.appendChild(editor);
+    }
+    this.editorContainer = editor as HTMLDivElement;
+  }
+
+  // 公开的 API 方法
+  public getHtml(): string {
+    return this.editor.getHtml() || '';
+  }
+
+  public getContent(): string {
+    return this.editor.getContent() || '';
+  }
+
+  public setContent(content: string): void {
+    this.editor.setContent(content);
+  }
+
+  public focus(): void {
+    this.editor.foucus();
+  }
+}
+
+// Define the custom element globally
+customElements.define('kv-md-editor', KvMdEditor);
+
+export {
+  TextEditor,
+}
+
+export type {
+  TextEditorProps
+}
--- a/src/tiptap/components/CommandsList.tsx
+++ b/src/tiptap/components/CommandsList.tsx
@@ -0,0 +1,112 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { CommandItem } from '../extensions/suggestions/commands';
+
+interface CommandsListProps {
+  items: CommandItem[];
+  command: (props: { content: string }) => void;
+}
+
+export const CommandsList = forwardRef((props: CommandsListProps, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index: number) => {
+    const item = props.items[index];
+
+    if (item) {
+      props.command({ content: item.content });
+    }
+  };
+
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => setSelectedIndex(0), [props.items]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (event.key === 'ArrowUp') {
+        upHandler();
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        downHandler();
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  // Scroll to selected item when it changes
+  useEffect(() => {
+    const element = document.getElementById(`command-item-${selectedIndex}`);
+    if (element) {
+      element.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [selectedIndex]);
+
+  return (
+    <div className="bg-white rounded-md shadow-lg border border-gray-200 overflow-hidden" style={{ width: '350px', maxHeight: '80vh' }}>
+      <div className="p-2 bg-gray-50 border-b border-gray-200 sticky top-0 z-10">
+        <div className="text-sm font-medium text-gray-700">Commands ({props.items.length})</div>
+        <div className="text-xs text-gray-500">Type to filter commands</div>
+      </div>
+      
+      <div className="max-h-72 overflow-y-auto">
+        {props.items.length ? (
+          props.items.map((item, index) => (
+            <button
+              id={`command-item-${index}`}
+              key={index}
+              className={`block w-full text-left px-4 py-2 text-sm transition-colors ${
+                index === selectedIndex ? 'bg-blue-100 border-l-4 border-blue-500' : 'border-l-4 border-transparent'
+              } hover:bg-gray-50`}
+              onClick={() => selectItem(index)}
+            >
+              <div className="font-medium flex items-center">
+                !{item.title}
+                {index === selectedIndex && (
+                  <span className="ml-2 text-xs bg-blue-500 text-white px-2 py-0.5 rounded">
+                    Press Enter to select
+                  </span>
+                )}
+              </div>
+              <div className="text-gray-500 text-xs">{item.description}</div>
+            </button>
+          ))
+        ) : (
+          <div className="px-4 py-2 text-sm text-gray-500">No results</div>
+        )}
+      </div>
+      
+      <div className="bg-gray-50 px-3 py-2 text-xs text-gray-500 border-t flex justify-between items-center sticky bottom-0 z-10">
+        <span className="inline-flex items-center">
+          <kbd className="px-2 py-1 bg-white rounded border border-gray-300 shadow-sm mr-1">↑</kbd>
+          <kbd className="px-2 py-1 bg-white rounded border border-gray-300 shadow-sm">↓</kbd>
+          <span className="ml-1">to navigate</span>
+        </span>
+        <span className="inline-flex items-center">
+          <kbd className="px-2 py-1 bg-white rounded border border-gray-300 shadow-sm">Enter</kbd>
+          <span className="ml-1">to select</span>
+        </span>
+      </div>
+    </div>
+  );
+});
+
+CommandsList.displayName = 'CommandsList';
--- a/src/tiptap/components/ReactRenderer.tsx
+++ b/src/tiptap/components/ReactRenderer.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export class ReactRenderer {
+  component: any;
+  element: HTMLElement;
+  ref: React.RefObject<any>;
+  props: any;
+  editor: any;
+  root: any;
+
+  constructor(component: any, { props, editor }: any) {
+    this.component = component;
+    this.element = document.createElement('div');
+    this.ref = React.createRef();
+    this.props = {
+      ...props,
+      ref: this.ref,
+    };
+    this.editor = editor;
+    this.root = createRoot(this.element);
+    this.render();
+  }
+
+  updateProps(props: any) {
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+    this.render();
+  }
+
+  render() {
+    this.root.render(React.createElement(this.component, this.props));
+  }
+
+  destroy() {
+    this.root.unmount();
+  }
+}
+
+export default ReactRenderer;
--- a/src/tiptap/editor.ts
+++ b/src/tiptap/editor.ts
@@ -0,0 +1,173 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Highlight from '@tiptap/extension-highlight';
+import Typography from '@tiptap/extension-typography';
+import { Markdown } from 'tiptap-markdown';
+import Dropcursor from '@tiptap/extension-dropcursor';
+// import Gapcursor from '@tiptap/extension-gapcursor';
+
+import Placeholder from '@tiptap/extension-placeholder';
+import { Commands, getSuggestionItems, CommandItem } from './extensions/suggestions';
+// import { DragHandle } from './extensions/dragHandle';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import { all, createLowlight } from 'lowlight';
+import 'highlight.js/styles/github.css';
+// 根据需要引入的语言支持
+import js from 'highlight.js/lib/languages/javascript';
+import ts from 'highlight.js/lib/languages/typescript';
+import html from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import markdown from 'highlight.js/lib/languages/markdown';
+// import './editor.css';
+
+const lowlight = createLowlight(all);
+
+// you can also register individual languages
+lowlight.register('html', html);
+lowlight.register('css', css);
+lowlight.register('js', js);
+lowlight.register('ts', ts);
+lowlight.register('markdown', markdown);
+
+export type TextEditorProps = {
+  markdown?: string;
+  html?: string;
+  items?: CommandItem[];
+  placeholder?: string;
+  onUpdateHtml?: (html: string) => void; //
+};
+export class TextEditor {
+  private editor?: Editor;
+  private opts?: TextEditorProps;
+  private element?: HTMLElement;
+  private isInitialSetup: boolean = true;
+
+  constructor() { }
+  createEditor(el: HTMLElement, opts?: TextEditorProps) {
+    if (this.editor) {
+      this.destroy();
+    }
+    this.opts = opts;
+    this.element = el;
+    const html = opts?.markdown || opts?.html || '';
+    const items = opts?.items || getSuggestionItems();
+    const placeholder = opts?.placeholder || 'Type @ to see commands (e.g., @today, @list @test )...';
+    // const suggestionConfig = createSuggestionConfig(items);
+    this.isInitialSetup = true;
+    this.editor = new Editor({
+      element: el, // 指定编辑器容器
+      editable: true,
+      extensions: [
+        StarterKit.configure({
+          codeBlock: false,
+          // 禁用内置的拖拽功能，使用我们的自定义拖拽
+          dropcursor: false,
+        }), // 使用 StarterKit 包含基础功能
+        Highlight,
+        Dropcursor.configure({
+          color: '#3b82f6', // 设置拖拽指示器颜色
+          width: 2, // 设置拖拽指示器宽度
+        }),
+        // Gapcursor, // 允许在难以选择的位置放置光标
+        // DragHandle,
+        Placeholder.configure({
+          placeholder,
+        }),
+        Typography,
+        Markdown,
+        CodeBlockLowlight.extend({
+          addKeyboardShortcuts() {
+            return {
+              Tab: () => {
+                const { state, dispatch } = this.editor.view;
+                const { tr, selection } = state;
+                const { from, to } = selection;
+
+                // 插入4个空格的缩进
+                dispatch(tr.insertText('    ', from, to));
+                return true;
+              },
+              'Shift-Tab': () => {
+                const { state, dispatch } = this.editor.view;
+                const { tr, selection } = state;
+                const { from, to } = selection;
+
+                // 获取当前选中的文本
+                const selectedText = state.doc.textBetween(from, to, '\n');
+
+                // 取消缩进：移除前面的4个空格
+                const unindentedText = selectedText.replace(/^ {1,4}/gm, '');
+                dispatch(tr.insertText(unindentedText, from, to));
+                return true;
+              },
+            };
+          },
+        }).configure({
+          lowlight,
+        }),
+        // Commands.configure({
+        //   suggestion: suggestionConfig,
+        // }),
+      ],
+      content: html, // 初始化内容,
+      onUpdate: () => {
+        if (this.isInitialSetup) {
+          this.isInitialSetup = false;
+          return;
+        }
+        if (this.opts?.onUpdateHtml) {
+          this.opts.onUpdateHtml(this.editor?.getHTML() || '');
+        }
+      },
+    });
+  }
+
+  init(el: HTMLElement, opts?: TextEditorProps) {
+    return this.createEditor(el, opts);
+  }
+  updateSugestionConfig(items: CommandItem[]) {
+    if (!this.element) return;
+    const element = this.element;
+    if (this.editor) {
+      const content = this.editor.getHTML(); // Save current content
+      const opts = { ...this.opts, html: content, items };
+      this.createEditor(element, opts); // Recreate the editor with the new config
+    }
+  }
+  setContent(html: string, emitUpdate?: boolean) {
+    this.editor?.commands.setContent(html, { emitUpdate });
+  }
+  /**
+   * before set options ,you should has element and editor
+   * @param opts
+   */
+  setOptions(opts: { markdown?: string; html?: string; items?: CommandItem[]; onUpdateHtml?: (html: string) => void }) {
+    this.opts = { ...this.opts, ...opts };
+    this.createEditor(this.element!, this.opts!);
+  }
+  getHtml() {
+    return this.editor?.getHTML();
+  }
+  getContent() {
+    return this.editor?.getText();
+  }
+  foucus() {
+    this.editor?.view?.focus?.();
+  }
+
+  destroy() {
+    this.editor?.destroy();
+    this.editor = undefined;
+  }
+}
+
+/**
+ * use example
+ * const textEditor = new TextEditor();
+   textEditor.createEditor(document.getElementById('editor')!, {
+     markdown: '# Hello World',
+     onUpdateHtml: (html) => {
+       console.log('Updated HTML:', html);
+     },
+   });
+ */
--- a/src/tiptap/extensions/dragHandle.ts
+++ b/src/tiptap/extensions/dragHandle.ts
@@ -0,0 +1,179 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { TextSelection } from '@tiptap/pm/state';
+
+function setupDraggableElements(editor: any) {
+  if (editor?.view?.dom) {
+    const blockElements = editor.view.dom.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, blockquote, pre');
+    blockElements.forEach((element: HTMLElement) => {
+      element.draggable = true;
+      element.classList.add('draggable-block');
+    });
+  }
+}
+
+export const DragHandle = Extension.create({
+  name: 'dragHandle',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('dragHandle'),
+        props: {
+          handleDOMEvents: {
+            dragstart: (view, event) => {
+              const target = event.target as HTMLElement;
+              
+              // 查找最近的块级元素
+              let blockElement = target;
+              while (blockElement && blockElement !== view.dom) {
+                if (['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE', 'PRE'].includes(blockElement.nodeName)) {
+                  break;
+                }
+                blockElement = blockElement.parentElement as HTMLElement;
+              }
+              
+              if (!blockElement || blockElement === view.dom) {
+                return false;
+              }
+              
+              // 获取块元素在文档中的位置并选中整个节点
+              try {
+                const pos = view.posAtDOM(blockElement, 0);
+                if (pos !== null && pos >= 0) {
+                  const resolvedPos = view.state.doc.resolve(pos);
+                  
+                  // 查找包含此位置的块级节点
+                  let node = resolvedPos.parent;
+                  let from = resolvedPos.start();
+                  let to = resolvedPos.end();
+                  
+                  // 如果当前不是块级节点，向上查找
+                  let depth = resolvedPos.depth;
+                  while (node && !node.isBlock && depth > 0) {
+                    depth--;
+                    const parentPos = view.state.doc.resolve(resolvedPos.before(depth + 1));
+                    node = parentPos.parent;
+                    from = parentPos.start();
+                    to = parentPos.end();
+                  }
+                  
+                  if (node && node.isBlock) {
+                    // 选中整个块级节点
+                    const tr = view.state.tr.setSelection(
+                      TextSelection.create(view.state.doc, from, to)
+                    );
+                    view.dispatch(tr);
+                    
+                    console.log('Selected node:', { from, to, type: node.type.name });
+                  }
+                }
+              } catch (error) {
+                console.error('Error selecting node:', error);
+              }
+              
+              // 设置拖拽数据类型标识
+              event.dataTransfer?.setData('application/x-tiptap-drag', 'true');
+              event.dataTransfer?.setData('text/html', blockElement.outerHTML);
+              
+              if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+              }
+              
+              blockElement.classList.add('dragging');
+              
+              console.log('Drag started for:', blockElement.nodeName);
+              return false;
+            },
+            
+            dragover: (view, event) => {
+              event.preventDefault();
+              if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+              }
+              return false;
+            },
+            
+            drop: (view, event) => {
+              event.preventDefault();
+              
+              // 检查是否是我们的拖拽
+              if (!event.dataTransfer?.getData('application/x-tiptap-drag')) {
+                return true;
+              }
+              
+              const coordinates = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY,
+              });
+              
+              if (!coordinates) {
+                console.log('No coordinates found');
+                return true;
+              }
+              
+              // 使用内置的拖拽处理
+              const slice = view.state.selection.content();
+              const { tr } = view.state;
+              
+              // 删除原来的内容
+              tr.deleteSelection();
+              
+              // 在新位置插入
+              let insertPos = coordinates.pos;
+              if (insertPos > view.state.selection.from) {
+                insertPos -= (view.state.selection.to - view.state.selection.from);
+              }
+              
+              tr.insert(insertPos, slice.content);
+              
+              view.dispatch(tr);
+              
+              console.log('Drop completed at position:', insertPos);
+              return true;
+            },
+            
+            dragend: (view, event) => {
+              // 清理拖拽样式
+              const draggingElements = view.dom.querySelectorAll('.dragging');
+              draggingElements.forEach((el) => {
+                el.classList.remove('dragging');
+              });
+              return false;
+            },
+          },
+        },
+      }),
+    ];
+  },
+
+  onUpdate() {
+    setupDraggableElements(this.editor);
+  },
+
+  onCreate() {
+    setTimeout(() => {
+      setupDraggableElements(this.editor);
+    }, 100);
+    
+    // 监听内容变化
+    if (this.editor?.view?.dom) {
+      const observer = new MutationObserver(() => {
+        setupDraggableElements(this.editor);
+      });
+      
+      observer.observe(this.editor.view.dom, {
+        childList: true,
+        subtree: true,
+      });
+      
+      (this as any)._observer = observer;
+    }
+  },
+
+  onDestroy() {
+    if ((this as any)._observer) {
+      (this as any)._observer.disconnect();
+    }
+  },
+});
--- a/src/tiptap/extensions/suggestions/commands.ts
+++ b/src/tiptap/extensions/suggestions/commands.ts
@@ -0,0 +1,40 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { PluginKey } from '@tiptap/pm/state';
+
+export const CommandsPluginKey = new PluginKey('commands');
+
+export interface CommandItem {
+  title: string;
+  description: string;
+  content: string;
+}
+
+export const Commands = Extension.create({
+  name: 'ai-commands',
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: '@',
+        command: ({ editor, range, props }: any) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .insertContent(props.content)
+            .run();
+        },
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
--- a/src/tiptap/extensions/suggestions/index.ts
+++ b/src/tiptap/extensions/suggestions/index.ts
@@ -0,0 +1,3 @@
+export * from './commands';
+// export * from './suggestionConfig';
+export * from './suggestionItems';
--- a/src/tiptap/extensions/suggestions/suggestionConfig.ts
+++ b/src/tiptap/extensions/suggestions/suggestionConfig.ts
@@ -0,0 +1,121 @@
+import { CommandItem } from './commands';
+import { CommandsList } from '../../components/CommandsList';
+import ReactRenderer from '../../components/ReactRenderer';
+
+export const createSuggestionConfig = (items: CommandItem[]) => {
+  return {
+    items: ({ query }: { query: string }) => {
+      return items.filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()));
+    },
+    render: () => {
+      let component: ReactRenderer | null = null;
+      let popup: HTMLElement | null = null;
+
+      const calculatePosition = (view: any, from: number) => {
+        const coords = view.coordsAtPos(from);
+        const editorRect = view.dom.getBoundingClientRect();
+        const popupRect = popup?.getBoundingClientRect();
+        
+        if (!popup || !popupRect) return { left: coords.left, top: coords.bottom + 10 };
+        
+        // Default position below the cursor
+        let left = coords.left;
+        let top = coords.bottom + 10;
+        
+        // Check if we're near the bottom of the viewport
+        const viewportHeight = window.innerHeight;
+        const bottomSpace = viewportHeight - coords.bottom;
+        const popupHeight = popupRect.height;
+        
+        // If there's not enough space below, position above
+        if (bottomSpace < popupHeight + 10 && coords.top > popupHeight + 10) {
+          top = coords.top - popupHeight - 10;
+        }
+        
+        // Check if we're near the right edge of the viewport
+        const viewportWidth = window.innerWidth;
+        const rightSpace = viewportWidth - coords.left;
+        const popupWidth = popupRect.width;
+        
+        // If there's not enough space to the right, align right edge
+        if (rightSpace < popupWidth) {
+          left = Math.max(10, viewportWidth - popupWidth - 10);
+        }
+        
+        // Ensure popup stays within editor bounds horizontally if possible
+        if (left < editorRect.left) {
+          left = editorRect.left;
+        }
+        
+        return { left, top };
+      };
+
+      return {
+        onStart: (props: any) => {
+          component = new ReactRenderer(CommandsList, {
+            props,
+            editor: props.editor,
+          });
+
+          popup = document.createElement('div');
+          popup.className = 'commands-popup';
+          popup.style.position = 'fixed'; // Use fixed instead of absolute for better viewport positioning
+          popup.style.zIndex = '9999';
+          document.body.appendChild(popup);
+
+          popup.appendChild(component.element);
+
+          // Initial position
+          const { view } = props.editor;
+          const { from } = props.range;
+          
+          // Set initial position to get popup dimensions
+          popup.style.left = '0px';
+          popup.style.top = '0px';
+          
+          // Calculate proper position after the popup is rendered
+          setTimeout(() => {
+            if (!popup) return;
+            const { left, top } = calculatePosition(view, from);
+            popup.style.left = `${left}px`;
+            popup.style.top = `${top}px`;
+          }, 0);
+        },
+        onUpdate: (props: any) => {
+          if (!component) return;
+          
+          component.updateProps(props);
+
+          if (!popup) return;
+
+          // Update position
+          const { view } = props.editor;
+          const { from } = props.range;
+          const { left, top } = calculatePosition(view, from);
+          
+          popup.style.left = `${left}px`;
+          popup.style.top = `${top}px`;
+        },
+        onKeyDown: (props: any) => {
+          if (props.event.key === 'Escape') {
+            if (popup) popup.remove();
+            if (component) component.destroy();
+            return true;
+          }
+          
+          if (component && component.ref && component.ref.current) {
+            return component.ref.current.onKeyDown(props);
+          }
+          
+          return false;
+        },
+        onExit: () => {
+          if (popup) popup.remove();
+          if (component) component.destroy();
+          component = null;
+          popup = null;
+        },
+      };
+    },
+  };
+};
--- a/src/tiptap/extensions/suggestions/suggestionItems.ts
+++ b/src/tiptap/extensions/suggestions/suggestionItems.ts
@@ -0,0 +1,203 @@
+import { CommandItem } from './commands';
+
+export const getSuggestionItems = (): CommandItem[] => {
+  // Basic commands
+  const basicCommands = [
+    {
+      title: 'today',
+      description: 'Insert today\'s date',
+      content: new Date().toLocaleDateString(),
+    },
+    {
+      title: 'now',
+      description: 'Insert current time',
+      content: new Date().toLocaleTimeString(),
+    },
+    {
+      title: 'datetime',
+      description: 'Insert current date and time',
+      content: new Date().toLocaleString(),
+    },
+    {
+      title: 'list',
+      description: 'Insert a bullet list',
+      content: '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
+    },
+    {
+      title: 'numbered',
+      description: 'Insert a numbered list',
+      content: '<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>',
+    },
+    {
+      title: 'good',
+      description: 'Insert a positive message',
+      content: 'Great job! Keep up the good work! 👍',
+    },
+    {
+      title: 'meeting',
+      description: 'Insert meeting template',
+      content: '<h3>Meeting Notes</h3><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Attendees:</strong></p><ul><li>Person 1</li><li>Person 2</li></ul><p><strong>Agenda:</strong></p><ol><li>Topic 1</li><li>Topic 2</li></ol><p><strong>Action Items:</strong></p><ul><li>[ ] Task 1</li><li>[ ] Task 2</li></ul>',
+    },
+    {
+      title: 'signature',
+      description: 'Insert your signature',
+      content: '<p>Best regards,<br>Your Name<br>your.email@example.com</p>',
+    },
+  ];
+
+  // Text formatting commands
+  const formattingCommands = [
+    {
+      title: 'h1',
+      description: 'Insert heading 1',
+      content: '<h1>Heading 1</h1>',
+    },
+    {
+      title: 'h2',
+      description: 'Insert heading 2',
+      content: '<h2>Heading 2</h2>',
+    },
+    {
+      title: 'h3',
+      description: 'Insert heading 3',
+      content: '<h3>Heading 3</h3>',
+    },
+    {
+      title: 'quote',
+      description: 'Insert blockquote',
+      content: '<blockquote>This is a quote</blockquote>',
+    },
+    {
+      title: 'code',
+      description: 'Insert code block',
+      content: '<pre><code>// Your code here\nconsole.log("Hello world");</code></pre>',
+    },
+    {
+      title: 'bold',
+      description: 'Insert bold text',
+      content: '<strong>Bold text</strong>',
+    },
+    {
+      title: 'italic',
+      description: 'Insert italic text',
+      content: '<em>Italic text</em>',
+    },
+    {
+      title: 'underline',
+      description: 'Insert underlined text',
+      content: '<u>Underlined text</u>',
+    },
+    {
+      title: 'strike',
+      description: 'Insert strikethrough text',
+      content: '<s>Strikethrough text</s>',
+    },
+    {
+      title: 'highlight',
+      description: 'Insert highlighted text',
+      content: '<mark>Highlighted text</mark>',
+    },
+  ];
+
+  // Template commands
+  const templateCommands = [
+    {
+      title: 'email',
+      description: 'Insert email template',
+      content: '<p>Subject: [Your Subject]</p><p>Dear [Name],</p><p>I hope this email finds you well.</p><p>[Your message here]</p><p>Thank you for your time and consideration.</p><p>Best regards,<br>Your Name</p>',
+    },
+    {
+      title: 'letter',
+      description: 'Insert formal letter template',
+      content: '<p>[Your Name]<br>[Your Address]<br>[City, State ZIP]<br>[Your Email]<br>[Your Phone]</p><p>[Date]</p><p>[Recipient Name]<br>[Recipient Title]<br>[Company Name]<br>[Street Address]<br>[City, State ZIP]</p><p>Dear [Recipient Name],</p><p>[Letter content]</p><p>Sincerely,</p><p>[Your Name]</p>',
+    },
+    {
+      title: 'report',
+      description: 'Insert report template',
+      content: '<h1>Report Title</h1><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Author:</strong> Your Name</p><h2>Executive Summary</h2><p>[Brief summary of the report]</p><h2>Introduction</h2><p>[Introduction text]</p><h2>Findings</h2><p>[Detailed findings]</p><h2>Conclusion</h2><p>[Conclusion text]</p><h2>Recommendations</h2><p>[Recommendations]</p>',
+    },
+    {
+      title: 'proposal',
+      description: 'Insert proposal template',
+      content: '<h1>Project Proposal</h1><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Prepared by:</strong> Your Name</p><h2>Project Overview</h2><p>[Brief description of the project]</p><h2>Objectives</h2><ul><li>[Objective 1]</li><li>[Objective 2]</li></ul><h2>Scope of Work</h2><p>[Detailed scope]</p><h2>Timeline</h2><p>[Project timeline]</p><h2>Budget</h2><p>[Budget details]</p>',
+    },
+    {
+      title: 'invoice',
+      description: 'Insert invoice template',
+      content: '<h1>INVOICE</h1><p><strong>Invoice #:</strong> [Number]</p><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Due Date:</strong> [Due Date]</p><div><strong>From:</strong><br>[Your Name/Company]<br>[Your Address]<br>[Your Contact Info]</div><div><strong>To:</strong><br>[Client Name/Company]<br>[Client Address]</div><table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="text-align:left; padding: 8px;">Description</th><th style="text-align:right; padding: 8px;">Amount</th></tr><tr style="border-bottom: 1px solid #ddd;"><td style="padding: 8px;">[Item/Service Description]</td><td style="text-align:right; padding: 8px;">[Amount]</td></tr><tr><td style="text-align:right; padding: 8px;"><strong>Total</strong></td><td style="text-align:right; padding: 8px;"><strong>[Total Amount]</strong></td></tr></table><p><strong>Payment Terms:</strong> [Terms]</p><p><strong>Payment Method:</strong> [Method]</p>',
+    },
+  ];
+
+  // Task management commands
+  const taskCommands = [
+    {
+      title: 'todo',
+      description: 'Insert todo list',
+      content: '<h3>To-Do List</h3><ul><li>[ ] Task 1</li><li>[ ] Task 2</li><li>[ ] Task 3</li></ul>',
+    },
+    {
+      title: 'checklist',
+      description: 'Insert checklist',
+      content: '<h3>Checklist</h3><ul><li>[ ] Item 1</li><li>[ ] Item 2</li><li>[ ] Item 3</li></ul>',
+    },
+    {
+      title: 'progress',
+      description: 'Insert progress tracker',
+      content: '<h3>Project Progress</h3><ul><li>[x] Planning - Complete</li><li>[x] Research - Complete</li><li>[ ] Implementation - In Progress</li><li>[ ] Testing</li><li>[ ] Deployment</li></ul>',
+    },
+    {
+      title: 'timeline',
+      description: 'Insert project timeline',
+      content: '<h3>Project Timeline</h3><ul><li><strong>Week 1:</strong> Planning and Research</li><li><strong>Week 2-3:</strong> Design and Development</li><li><strong>Week 4:</strong> Testing</li><li><strong>Week 5:</strong> Deployment</li></ul>',
+    },
+    {
+      title: 'goals',
+      description: 'Insert goals list',
+      content: '<h3>Goals</h3><ol><li>Short-term goal 1</li><li>Short-term goal 2</li><li>Long-term goal 1</li><li>Long-term goal 2</li></ol>',
+    },
+  ];
+
+  // Table commands
+  const tableCommands = [
+    {
+      title: 'table2x2',
+      description: 'Insert 2x2 table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Header 1</th><th style="border: 1px solid #ddd; padding: 8px;">Header 2</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 2</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 2</td></tr></table>',
+    },
+    {
+      title: 'table3x3',
+      description: 'Insert 3x3 table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Header 1</th><th style="border: 1px solid #ddd; padding: 8px;">Header 2</th><th style="border: 1px solid #ddd; padding: 8px;">Header 3</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 3</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 3</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 3</td></tr></table>',
+    },
+    {
+      title: 'schedule',
+      description: 'Insert schedule table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Time</th><th style="border: 1px solid #ddd; padding: 8px;">Monday</th><th style="border: 1px solid #ddd; padding: 8px;">Tuesday</th><th style="border: 1px solid #ddd; padding: 8px;">Wednesday</th><th style="border: 1px solid #ddd; padding: 8px;">Thursday</th><th style="border: 1px solid #ddd; padding: 8px;">Friday</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">9:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">10:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">11:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr></table>',
+    },
+    {
+      title: 'comparison',
+      description: 'Insert comparison table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Feature</th><th style="border: 1px solid #ddd; padding: 8px;">Option A</th><th style="border: 1px solid #ddd; padding: 8px;">Option B</th><th style="border: 1px solid #ddd; padding: 8px;">Option C</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 1</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 2</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✗</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 3</td><td style="border: 1px solid #ddd; padding: 8px;">✗</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Price</td><td style="border: 1px solid #ddd; padding: 8px;">$</td><td style="border: 1px solid #ddd; padding: 8px;">$$</td><td style="border: 1px solid #ddd; padding: 8px;">$$$</td></tr></table>',
+    },
+  ];
+
+  // Additional commands to reach 100 total
+  const additionalCommands = Array.from({ length: 100 - (basicCommands.length + formattingCommands.length + templateCommands.length + taskCommands.length + tableCommands.length) }, (_, i) => {
+    const index = i + 1;
+    return {
+      title: `command${index}`,
+      description: `Example command ${index}`,
+      content: `<p>This is example command ${index}</p>`,
+    };
+  });
+
+  // Combine all command categories
+  return [
+    ...basicCommands,
+    ...formattingCommands,
+    ...templateCommands,
+    ...taskCommands,
+    ...tableCommands,
+    ...additionalCommands,
+  ];
+};
--- a/src/tiptap/extensions/suggestions/suggestions.ts
+++ b/src/tiptap/extensions/suggestions/suggestions.ts
@@ -0,0 +1,203 @@
+import { CommandItem } from './commands';
+
+export const getSuggestionItems = (): CommandItem[] => {
+  // Basic commands
+  const basicCommands = [
+    {
+      title: 'today',
+      description: 'Insert today\'s date',
+      content: new Date().toLocaleDateString(),
+    },
+    {
+      title: 'now',
+      description: 'Insert current time',
+      content: new Date().toLocaleTimeString(),
+    },
+    {
+      title: 'datetime',
+      description: 'Insert current date and time',
+      content: new Date().toLocaleString(),
+    },
+    {
+      title: 'list',
+      description: 'Insert a bullet list',
+      content: '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
+    },
+    {
+      title: 'numbered',
+      description: 'Insert a numbered list',
+      content: '<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>',
+    },
+    {
+      title: 'good',
+      description: 'Insert a positive message',
+      content: 'Great job! Keep up the good work! 👍',
+    },
+    {
+      title: 'meeting',
+      description: 'Insert meeting template',
+      content: '<h3>Meeting Notes</h3><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Attendees:</strong></p><ul><li>Person 1</li><li>Person 2</li></ul><p><strong>Agenda:</strong></p><ol><li>Topic 1</li><li>Topic 2</li></ol><p><strong>Action Items:</strong></p><ul><li>[ ] Task 1</li><li>[ ] Task 2</li></ul>',
+    },
+    {
+      title: 'signature',
+      description: 'Insert your signature',
+      content: '<p>Best regards,<br>Your Name<br>your.email@example.com</p>',
+    },
+  ];
+
+  // Text formatting commands
+  const formattingCommands = [
+    {
+      title: 'h1',
+      description: 'Insert heading 1',
+      content: '<h1>Heading 1</h1>',
+    },
+    {
+      title: 'h2',
+      description: 'Insert heading 2',
+      content: '<h2>Heading 2</h2>',
+    },
+    {
+      title: 'h3',
+      description: 'Insert heading 3',
+      content: '<h3>Heading 3</h3>',
+    },
+    {
+      title: 'quote',
+      description: 'Insert blockquote',
+      content: '<blockquote>This is a quote</blockquote>',
+    },
+    {
+      title: 'code',
+      description: 'Insert code block',
+      content: '<pre><code>// Your code here\nconsole.log("Hello world");</code></pre>',
+    },
+    {
+      title: 'bold',
+      description: 'Insert bold text',
+      content: '<strong>Bold text</strong>',
+    },
+    {
+      title: 'italic',
+      description: 'Insert italic text',
+      content: '<em>Italic text</em>',
+    },
+    {
+      title: 'underline',
+      description: 'Insert underlined text',
+      content: '<u>Underlined text</u>',
+    },
+    {
+      title: 'strike',
+      description: 'Insert strikethrough text',
+      content: '<s>Strikethrough text</s>',
+    },
+    {
+      title: 'highlight',
+      description: 'Insert highlighted text',
+      content: '<mark>Highlighted text</mark>',
+    },
+  ];
+
+  // Template commands
+  const templateCommands = [
+    {
+      title: 'email',
+      description: 'Insert email template',
+      content: '<p>Subject: [Your Subject]</p><p>Dear [Name],</p><p>I hope this email finds you well.</p><p>[Your message here]</p><p>Thank you for your time and consideration.</p><p>Best regards,<br>Your Name</p>',
+    },
+    {
+      title: 'letter',
+      description: 'Insert formal letter template',
+      content: '<p>[Your Name]<br>[Your Address]<br>[City, State ZIP]<br>[Your Email]<br>[Your Phone]</p><p>[Date]</p><p>[Recipient Name]<br>[Recipient Title]<br>[Company Name]<br>[Street Address]<br>[City, State ZIP]</p><p>Dear [Recipient Name],</p><p>[Letter content]</p><p>Sincerely,</p><p>[Your Name]</p>',
+    },
+    {
+      title: 'report',
+      description: 'Insert report template',
+      content: '<h1>Report Title</h1><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Author:</strong> Your Name</p><h2>Executive Summary</h2><p>[Brief summary of the report]</p><h2>Introduction</h2><p>[Introduction text]</p><h2>Findings</h2><p>[Detailed findings]</p><h2>Conclusion</h2><p>[Conclusion text]</p><h2>Recommendations</h2><p>[Recommendations]</p>',
+    },
+    {
+      title: 'proposal',
+      description: 'Insert proposal template',
+      content: '<h1>Project Proposal</h1><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Prepared by:</strong> Your Name</p><h2>Project Overview</h2><p>[Brief description of the project]</p><h2>Objectives</h2><ul><li>[Objective 1]</li><li>[Objective 2]</li></ul><h2>Scope of Work</h2><p>[Detailed scope]</p><h2>Timeline</h2><p>[Project timeline]</p><h2>Budget</h2><p>[Budget details]</p>',
+    },
+    {
+      title: 'invoice',
+      description: 'Insert invoice template',
+      content: '<h1>INVOICE</h1><p><strong>Invoice #:</strong> [Number]</p><p><strong>Date:</strong> ' + new Date().toLocaleDateString() + '</p><p><strong>Due Date:</strong> [Due Date]</p><div><strong>From:</strong><br>[Your Name/Company]<br>[Your Address]<br>[Your Contact Info]</div><div><strong>To:</strong><br>[Client Name/Company]<br>[Client Address]</div><table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="text-align:left; padding: 8px;">Description</th><th style="text-align:right; padding: 8px;">Amount</th></tr><tr style="border-bottom: 1px solid #ddd;"><td style="padding: 8px;">[Item/Service Description]</td><td style="text-align:right; padding: 8px;">[Amount]</td></tr><tr><td style="text-align:right; padding: 8px;"><strong>Total</strong></td><td style="text-align:right; padding: 8px;"><strong>[Total Amount]</strong></td></tr></table><p><strong>Payment Terms:</strong> [Terms]</p><p><strong>Payment Method:</strong> [Method]</p>',
+    },
+  ];
+
+  // Task management commands
+  const taskCommands = [
+    {
+      title: 'todo',
+      description: 'Insert todo list',
+      content: '<h3>To-Do List</h3><ul><li>[ ] Task 1</li><li>[ ] Task 2</li><li>[ ] Task 3</li></ul>',
+    },
+    {
+      title: 'checklist',
+      description: 'Insert checklist',
+      content: '<h3>Checklist</h3><ul><li>[ ] Item 1</li><li>[ ] Item 2</li><li>[ ] Item 3</li></ul>',
+    },
+    {
+      title: 'progress',
+      description: 'Insert progress tracker',
+      content: '<h3>Project Progress</h3><ul><li>[x] Planning - Complete</li><li>[x] Research - Complete</li><li>[ ] Implementation - In Progress</li><li>[ ] Testing</li><li>[ ] Deployment</li></ul>',
+    },
+    {
+      title: 'timeline',
+      description: 'Insert project timeline',
+      content: '<h3>Project Timeline</h3><ul><li><strong>Week 1:</strong> Planning and Research</li><li><strong>Week 2-3:</strong> Design and Development</li><li><strong>Week 4:</strong> Testing</li><li><strong>Week 5:</strong> Deployment</li></ul>',
+    },
+    {
+      title: 'goals',
+      description: 'Insert goals list',
+      content: '<h3>Goals</h3><ol><li>Short-term goal 1</li><li>Short-term goal 2</li><li>Long-term goal 1</li><li>Long-term goal 2</li></ol>',
+    },
+  ];
+
+  // Table commands
+  const tableCommands = [
+    {
+      title: 'table2x2',
+      description: 'Insert 2x2 table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Header 1</th><th style="border: 1px solid #ddd; padding: 8px;">Header 2</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 2</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 2</td></tr></table>',
+    },
+    {
+      title: 'table3x3',
+      description: 'Insert 3x3 table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Header 1</th><th style="border: 1px solid #ddd; padding: 8px;">Header 2</th><th style="border: 1px solid #ddd; padding: 8px;">Header 3</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 1, Cell 3</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 2, Cell 3</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 1</td><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 2</td><td style="border: 1px solid #ddd; padding: 8px;">Row 3, Cell 3</td></tr></table>',
+    },
+    {
+      title: 'schedule',
+      description: 'Insert schedule table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Time</th><th style="border: 1px solid #ddd; padding: 8px;">Monday</th><th style="border: 1px solid #ddd; padding: 8px;">Tuesday</th><th style="border: 1px solid #ddd; padding: 8px;">Wednesday</th><th style="border: 1px solid #ddd; padding: 8px;">Thursday</th><th style="border: 1px solid #ddd; padding: 8px;">Friday</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">9:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">10:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">11:00 AM</td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td><td style="border: 1px solid #ddd; padding: 8px;"></td></tr></table>',
+    },
+    {
+      title: 'comparison',
+      description: 'Insert comparison table',
+      content: '<table style="width:100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #ddd;"><th style="border: 1px solid #ddd; padding: 8px;">Feature</th><th style="border: 1px solid #ddd; padding: 8px;">Option A</th><th style="border: 1px solid #ddd; padding: 8px;">Option B</th><th style="border: 1px solid #ddd; padding: 8px;">Option C</th></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 1</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 2</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✗</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Feature 3</td><td style="border: 1px solid #ddd; padding: 8px;">✗</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td><td style="border: 1px solid #ddd; padding: 8px;">✓</td></tr><tr><td style="border: 1px solid #ddd; padding: 8px;">Price</td><td style="border: 1px solid #ddd; padding: 8px;">$</td><td style="border: 1px solid #ddd; padding: 8px;">$$</td><td style="border: 1px solid #ddd; padding: 8px;">$$$</td></tr></table>',
+    },
+  ];
+
+  // Additional commands to reach 100 total
+  const additionalCommands = Array.from({ length: 100 - (basicCommands.length + formattingCommands.length + templateCommands.length + taskCommands.length + tableCommands.length) }, (_, i) => {
+    const index = i + 1;
+    return {
+      title: `command${index}`,
+      description: `Example command ${index}`,
+      content: `<p>This is example command ${index}</p>`,
+    };
+  });
+
+  // Combine all command categories
+  return [
+    ...basicCommands,
+    ...formattingCommands,
+    ...templateCommands,
+    ...taskCommands,
+    ...tableCommands,
+    ...additionalCommands,
+  ];
+};
--- a/src/tiptap/tiptap.css
+++ b/src/tiptap/tiptap.css
@@ -0,0 +1,126 @@
+:root {
+  --purple-light: #e0e0ff; /* 默认浅紫色背景 */
+  --black: #000000; /* 默认黑色 */
+  --white: #ffffff; /* 默认白色 */
+  --gray-3: #d3d3d3; /* 默认灰色3 */
+  --gray-2: #e5e5e5; /* 默认灰色2 */
+}
+.ProseMirror-focused.tiptap {
+  outline: 1px solid #999;
+}
+.tiptap-preview {
+  .tiptap {
+    margin: 0;
+    padding: 0.5rem;
+    border: unset;
+  }
+}
+.tiptap {
+  /* margin: 0.5rem 1rem; */
+  margin: 0;
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+/* Basic editor styles */
+.tiptap:first-child {
+  margin-top: 0;
+}
+
+/* List styles */
+.tiptap ul,
+.tiptap ol {
+  padding: 0 1rem;
+  margin: 1.25rem 1rem 1.25rem 0.4rem;
+}
+
+.tiptap ul li p,
+.tiptap ol li p {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+/* Heading styles */
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  line-height: 1.1;
+  margin-top: 2.5rem;
+  text-wrap: pretty;
+}
+
+.tiptap h1,
+.tiptap h2 {
+  /* margin-top: 3.5rem; */
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.tiptap h1 {
+  font-size: 1.4rem;
+  font-weight: 800;
+}
+
+.tiptap h2 {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.tiptap h3 {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  font-size: 1rem;
+}
+
+/* Code and preformatted text styles */
+.tiptap code {
+  background-color: var(--purple-light);
+  border-radius: 0.4rem;
+  color: var(--black);
+  font-size: 0.85rem;
+  padding: 0.25em 0.3em;
+}
+
+.tiptap pre {
+  border: 1px solid #ccc;
+  /* background: var(--black); */
+  border-radius: 0.5rem;
+  /* color: var(--white); */
+  font-family: 'JetBrainsMono', monospace;
+  margin: 1.5rem 0;
+  padding: 0.75rem 1rem;
+}
+
+.tiptap pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
+.tiptap mark {
+  background-color: #faf594;
+  border-radius: 0.4rem;
+  box-decoration-break: clone;
+  padding: 0.1rem 0.3rem;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid var(--gray-3);
+  margin: 1.5rem 0;
+  padding-left: 1rem;
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--gray-2);
+  margin: 2rem 0;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@kevisual/types/json/frontend.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "strict": false,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@/agent": [
+        "./src/agent"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*",
+    "agent/**/*",
+    "typings.d.ts"
+  ],
+}
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -0,0 +1,15 @@
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+interface KvMdEditorProps extends HTMLAttributes<HTMLElement> {
+  markdown?: string;
+  placeholder?: string;
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kv-template': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+      'kv-md-editor': DetailedHTMLProps<KvMdEditorProps, HTMLElement>;
+    }
+  }
+}
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import tailwindcss from '@tailwindcss/vite';
+const plugins = [react(), tailwindcss()];
+
+/**
+ * @see https://vitejs.dev/config/
+ */
+export default defineConfig({
+  plugins,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'mod.ts'),
+      name: 'KvMd',
+      formats: ['es'],
+      fileName: () => `kv-md.js`,
+    },
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import pkgs from './package.json';
+import tailwindcss from '@tailwindcss/vite';
+import dotenv from 'dotenv';
+dotenv.config();
+const isDev = process.env.NODE_ENV === 'development';
+const plugins = [react(), tailwindcss()];
+
+let target = process.env.VITE_API_URL || 'http://localhost:51015';
+const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
+let proxy = {
+  '/root/': apiProxy,
+  '/api': apiProxy,
+  '/client': apiProxy,
+};
+const ENV_BASE_NAME = process.env.BASE_NAME;
+
+const _basename = ENV_BASE_NAME || pkgs.basename;
+const basename = isDev ? undefined : `${_basename}`;
+/**
+ * @see https://vitejs.dev/config/
+ */
+export default defineConfig(() => {
+  return {
+    plugins,
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+    base: basename,
+    define: {
+      BASE_NAME: JSON.stringify(basename),
+      BUILD_TIME: JSON.stringify(new Date().toISOString()),
+    },
+    server: {
+      port: 7008,
+      host: '0.0.0.0',
+      proxy,
+    },
+  };
+});