miyuan-editor 0.0.3

package/README.md

@@ -0,0 +1,525 @@
+# @miyuan/editor
+
+> 一个高扩展性的富文本编辑器引擎，支持多框架（React / Vue 3 / Vue 2）
+
+[![npm version](https://img.shields.io/npm/v/@miyuan/editor.svg)](http://npm.gzmiyuan.com:4873/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0%2B-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ 特性
+
+- 🎯 **Schema 驱动** - 所有节点类型通过 Schema 注册，插件可自由扩展
+- 🔌 **组合式插件系统** - Extension 作为一等公民，声明式贡献节点、命令、快捷键
+- 🔄 **事务化状态管理** - 不可变状态 + 事务描述修改，天然支持撤销/重做
+- 📝 **多格式序列化** - JSON ↔ HTML ↔ Markdown ↔ PlainText 完整转换链
+- 🖥️ **多框架支持** - 核心引擎框架无关，提供 React、Vue 3、Vue 2 适配层
+- 🎨 **薄壳 UI 层** - UI 组件用纯 DOM 编写，每个框架仅提供薄壳挂载
+
+## 📦 安装
+
+```bash
+# 使用私有 registry
+npm install @miyuan/editor --registry http://npm.gzmiyuan.com:4873/
+
+# 或配置 .npmrc 后直接安装
+npm install @miyuan/editor
+
+# 或使用 yarn
+yarn add @miyuan/editor --registry http://npm.gzmiyuan.com:4873/
+
+# 或使用 pnpm
+pnpm add @miyuan/editor --registry http://npm.gzmiyuan.com:4873/
+```
+
+**配置私有 registry（推荐）：**
+
+在项目根目录创建 `.npmrc` 文件：
+
+```ini
+@miyuan:registry=http://npm.gzmiyuan.com:4873/
+```
+
+或在用户目录配置全局 registry：
+
+```bash
+npm config set @miyuan:registry http://npm.gzmiyuan.com:4873/
+```
+
+## 🚀 快速开始
+
+### React 项目
+
+```tsx
+import { useEditor, EditorContent } from '@miyuan/editor/react'
+import {
+  DocExtension,
+  TextExtension,
+  ParagraphExtension,
+  BoldExtension,
+  ItalicExtension,
+  HeadingExtension,
+  HistoryExtension,
+} from '@miyuan/editor/extensions'
+
+function MyEditor() {
+  const editor = useEditor({
+    extensions: [
+      DocExtension(),
+      TextExtension(),
+      ParagraphExtension(),
+      BoldExtension(),
+      ItalicExtension(),
+      HeadingExtension(),
+      HistoryExtension(),
+    ],
+    content: '<p>开始编辑...</p>',
+  })
+
+  return (
+    <div>
+      <button onClick={() => editor.commands.bold()}>加粗</button>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
+```
+
+### Vue 3 项目
+
+```vue
+<template>
+  <div>
+    <button @click="editor.commands.bold()">加粗</button>
+    <EditorContent :editor="editor" />
+  </div>
+</template>
+
+<script setup>
+import { useEditor, EditorContent } from '@miyuan/editor/vue'
+import {
+  DocExtension,
+  TextExtension,
+  ParagraphExtension,
+  BoldExtension,
+  HistoryExtension,
+} from '@miyuan/editor/extensions'
+
+const editor = useEditor({
+  extensions: [
+    DocExtension(),
+    TextExtension(),
+    ParagraphExtension(),
+    BoldExtension(),
+    HistoryExtension(),
+  ],
+  content: '<p>开始编辑...</p>',
+})
+</script>
+```
+
+## 📚 文档目录
+
+- [架构设计](#架构设计)
+- [核心概念](#核心概念)
+- [扩展开发](#扩展开发)
+- [API 参考](#api-参考)
+- [序列化](#序列化)
+- [开发指南](#开发指南)
+
+## 🏗️ 架构设计
+
+```
+src/
+├── core/               ← 编辑器内核（纯 TS，零框架依赖）
+│   ├── extension.ts    ←   Extension 系统
+│   ├── editor-view.ts  ←   EditorView 封装
+│   ├── schema.ts       ←   Schema 编译
+│   └── ...
+├── extensions/         ← 官方扩展集合（纯 TS）
+│   ├── doc-extension.ts
+│   ├── mark-extensions.ts    ← Bold, Italic, Link...
+│   ├── node-extensions.ts    ← Heading, List, CodeBlock...
+│   └── behavior-extensions.ts ← History, Placeholder...
+├── ui/                 ← UI 纯 DOM 核心（一套代码）
+├── react/              ← React 适配层
+├── vue/                ← Vue 3 适配层
+└── vue2/               ← Vue 2 适配层
+```
+
+**依赖方向严格单向：** `ui → react/vue/vue2 → extensions → core`
+
+## 🎓 核心概念
+
+### Extension（扩展）
+
+Extension 是编辑器功能的基本单元：
+
+```typescript
+interface Extension {
+  name: string
+  type: 'node' | 'mark' | 'extension'
+  
+  addNodes?(): Record<string, NodeSpec>
+  addMarks?(): Record<string, MarkSpec>
+  addCommands?(): Record<string, CommandFactory>
+  addKeyboardShortcuts?(): Record<string, Command>
+  addPlugins?(): Plugin[]
+}
+```
+
+### Schema（模式）
+
+Schema 定义文档结构：
+
+```typescript
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'block+' },
+    paragraph: { group: 'block', content: 'inline*' },
+    text: { group: 'inline' },
+    heading: { 
+      group: 'block', 
+      content: 'inline*',
+      attrs: { level: { default: 1 } }
+    },
+  },
+  marks: {
+    bold: {},
+    italic: {},
+  }
+})
+```
+
+### Transaction（事务）
+
+所有修改通过事务进行：
+
+```typescript
+const tr = state.tr
+tr.insertText('Hello', 0, 0)
+tr.addMark(0, 5, schema.marks.bold.create())
+view.dispatch(tr)
+```
+
+## 🔧 扩展开发
+
+### 创建自定义节点
+
+```typescript
+import type { Extension } from '@miyuan/editor'
+import type { NodeSpec } from 'prosemirror-model'
+
+export function CalloutExtension(): Extension {
+  return {
+    name: 'callout',
+    type: 'node',
+    addNodes() {
+      return {
+        callout: {
+          group: 'block',
+          content: 'inline*',
+          attrs: {
+            type: { default: 'info' }, // info, warning, error
+          },
+          toDOM(node) {
+            return ['div', { class: `callout callout-${node.attrs.type}` }, 0]
+          },
+          parseDOM: [{
+            tag: 'div.callout',
+            getAttrs(dom) {
+              const el = dom as HTMLElement
+              const type = el.className.match(/callout-(\w+)/)?.[1] || 'info'
+              return { type }
+            },
+          }],
+        }
+      }
+    },
+    addCommands() {
+      return {
+        setCallout: (type: string) => (state, dispatch) => {
+          const nt = state.schema.nodes['callout']
+          if (!nt) return false
+          const tr = state.tr
+          tr.replaceSelectionWith(nt.create({ type }))
+          if (dispatch) dispatch(tr)
+          return true
+        },
+      }
+    },
+  }
+}
+```
+
+### 创建自定义 Mark
+
+```typescript
+export function HighlightExtension(): Extension {
+  return {
+    name: 'highlight',
+    type: 'mark',
+    addMarks() {
+      return {
+        highlight: {
+          attrs: { color: { default: '#ffff00' } },
+          toDOM(mark) {
+            return ['mark', { style: `background-color: ${mark.attrs.color}` }, 0]
+          },
+          parseDOM: [{
+            tag: 'mark',
+            getAttrs(dom) {
+              return { color: (dom as HTMLElement).style.backgroundColor || '#ffff00' }
+            },
+          }],
+        }
+      }
+    },
+    addCommands() {
+      return {
+        setHighlight: (color: string) => (state, dispatch) => {
+          const mt = state.schema.marks['highlight']
+          if (!mt) return false
+          const { from, to } = state.selection
+          if (from === to) return false
+          if (dispatch) {
+            dispatch(state.tr.addMark(from, to, mt.create({ color })))
+          }
+          return true
+        },
+      }
+    },
+  }
+}
+```
+
+## 📖 API 参考
+
+### React Hook
+
+```typescript
+interface UseEditorOptions {
+  extensions: Extension[]
+  content?: string | object
+  editable?: boolean
+  onUpdate?: (state: EditorState) => void
+  onSelectionChange?: (state: EditorState) => void
+}
+
+interface EditorHandle {
+  view: EditorView | null
+  state: EditorState | null
+  schema: Schema | null
+  commands: Record<string, CommandFactory>
+}
+```
+
+### 命令系统
+
+所有命令返回 `(state, dispatch) => boolean`：
+
+```typescript
+// 文本格式
+editor.commands.bold()
+editor.commands.italic()
+editor.commands.underline()
+editor.commands.strike()
+editor.commands.code()
+
+// 块级元素
+editor.commands.heading(level: number)
+editor.commands.paragraph()
+editor.commands.blockquote()
+editor.commands.bulletList()
+editor.commands.orderedList()
+editor.commands.taskList()
+
+// 其他
+editor.commands.undo()
+editor.commands.redo()
+editor.commands.setTextAlign(align: 'left' | 'center' | 'right')
+editor.commands.setLineHeight(height: number)
+```
+
+## 🔄 序列化
+
+### JSON
+
+```typescript
+import { nodeToJSON, nodeFromJSON } from '@miyuan/editor/serialization'
+
+// 文档 → JSON
+const json = nodeToJSON(state.doc)
+
+// JSON → 文档
+const doc = nodeFromJSON(schema, json)
+```
+
+### HTML
+
+```typescript
+import { toHTML, fromHTML } from '@miyuan/editor/serialization'
+
+// 文档 → HTML
+const html = toHTML(state.doc, schema)
+
+// HTML → 文档
+const doc = fromHTML('<h1>标题</h1><p>内容</p>', schema)
+```
+
+### Markdown
+
+```typescript
+import { toMarkdown, fromMarkdown } from '@miyuan/editor/serialization'
+
+// 文档 → Markdown
+const md = toMarkdown(state.doc, schema)
+
+// Markdown → 文档
+const doc = fromMarkdown('# 标题\n\n内容', schema)
+```
+
+### SerializationRegistry
+
+```typescript
+import { SerializationRegistry } from '@miyuan/editor/serialization'
+
+const registry = new SerializationRegistry()
+
+// 序列化
+const json = registry.serialize(doc, 'json', schema)
+const html = registry.serialize(doc, 'html', schema)
+const md = registry.serialize(doc, 'markdown', schema)
+
+// 解析
+const docFromJson = registry.parse(json, 'json', schema)
+const docFromHtml = registry.parse(html, 'html', schema)
+const docFromMd = registry.parse(md, 'markdown', schema)
+```
+
+## 🛠️ 开发指南
+
+### 本地开发
+
+```bash
+# 克隆项目
+git clone https://github.com/your-org/miyuan-editor.git
+cd miyuan-editor
+
+# 安装依赖
+npm install
+
+# 启动开发服务器（Playground）
+npm run dev
+
+# 构建
+npm run build
+
+# 运行测试
+npm test
+
+# 类型检查
+npm run typecheck
+
+# 代码检查
+npm run lint
+npm run format
+```
+
+### 项目结构
+
+```
+miyuan-editor/
+├── src/                  # 源代码
+│   ├── core/            # 核心引擎
+│   ├── extensions/      # 官方扩展
+│   ├── ui/              # UI 组件
+│   ├── react/           # React 适配
+│   ├── vue/             # Vue 3 适配
+│   └── vue2/            # Vue 2 适配
+├── tests/               # 单元测试
+├── playground/          # 开发预览应用
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── vitest.config.ts
+```
+
+### 发布流程
+
+```bash
+# 1. 更新版本号
+npm version patch  # 或 minor, major
+
+# 2. 构建
+npm run build
+
+# 3. 运行测试
+npm test
+
+# 4. 发布到私有 registry
+npm publish --registry http://npm.gzmiyuan.com:4873/
+```
+
+## 📝 内置扩展
+
+### 节点扩展
+- `DocExtension` - 文档根节点
+- `TextExtension` - 文本节点
+- `ParagraphExtension` - 段落（支持对齐、缩进、行高）
+- `HeadingExtension` - 标题 H1-H6
+- `BlockquoteExtension` - 引用块
+- `BulletListExtension` - 无序列表
+- `OrderedListExtension` - 有序列表
+- `TaskListExtension` - 任务列表
+- `CodeBlockExtension` - 代码块
+- `HorizontalRuleExtension` - 分割线
+- `HardBreakExtension` - 换行
+- `ImageExtension` - 图片
+
+### 标记扩展
+- `BoldExtension` - 加粗 (Ctrl+B)
+- `ItalicExtension` - 斜体 (Ctrl+I)
+- `CodeExtension` - 行内代码 (Ctrl+E)
+- `StrikeExtension` - 删除线
+- `UnderlineExtension` - 下划线 (Ctrl+U)
+- `LinkExtension` - 链接
+- `TextColorExtension` - 文字颜色
+- `BackgroundColorExtension` - 背景颜色
+- `FontSizeExtension` - 字体大小
+
+### 行为扩展
+- `HistoryExtension` - 撤销/重做 (Ctrl+Z / Ctrl+Y)
+- `PlaceholderExtension` - 占位提示
+- `ImageUploadExtension` - 图片上传
+
+## 🤝 贡献指南
+
+我们欢迎所有形式的贡献！
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
+3. 提交更改 (`git commit -m 'feat: add amazing feature'`)
+4. 推送到分支 (`git push origin feature/amazing-feature`)
+5. 提交 Pull Request
+
+### 开发规范
+
+- 使用 TypeScript strict 模式
+- 遵循 ESLint 规则
+- 为新功能添加测试
+- 更新文档
+
+## 📄 许可证
+
+[MIT License](LICENSE)
+
+## 🔗 相关链接
+
+- [ProseMirror](https://prosemirror.net/) - 底层编辑器框架
+- [私有 npm Registry](http://npm.gzmiyuan.com:4873/) - 包管理服务
+- [示例项目](playground/) - Playground 开发预览应用
+- [问题反馈](https://github.com/your-org/miyuan-editor/issues)
+
+---
+
+Made with ❤️ by miyuan Team

package/dist/core/index.cjs.js

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../prompt-CGLw2O21.cjs");
+const require_dist = require("../dist-CRSJDo2G.cjs");
+const require_extension = require("../extension-BPFuYyzN.cjs");
+const require_dist$1 = require("../dist-rItBfhNb.cjs");
+exports.AddMarkStep = require_dist.AddMarkStep;
+exports.EditorState = require_dist.EditorState;
+exports.EditorView = require_extension.EditorView;
+exports.ExtensionManager = require_extension.ExtensionManager;
+exports.Fragment = require_dist.Fragment;
+exports.Mapping = require_dist.Mapping;
+exports.Mark = require_dist.Mark;
+exports.Node = require_dist.Node;
+exports.Plugin = require_dist.Plugin;
+exports.PluginKey = require_dist.PluginKey;
+exports.RemoveMarkStep = require_dist.RemoveMarkStep;
+exports.ReplaceStep = require_dist.ReplaceStep;
+exports.ResolvedPos = require_dist.ResolvedPos;
+exports.Schema = require_dist.Schema;
+exports.Slice = require_dist.Slice;
+exports.Step = require_dist.Step;
+exports.StepMap = require_dist.StepMap;
+exports.Transaction = require_dist.Transaction;
+exports.Transform = require_dist.Transform;
+exports.baseKeymap = require_dist.baseKeymap;
+exports.deleteSelection = require_dist.deleteSelection;
+exports.history = require_dist$1.history;
+exports.joinBackward = require_dist.joinBackward;
+exports.joinForward = require_dist.joinForward;
+exports.keymap = require_extension.keymap;
+exports.lift = require_dist.lift;
+exports.liftListItem = require_dist$1.liftListItem;
+exports.redo = require_dist$1.redo;
+exports.selectAll = require_dist.selectAll;
+exports.setBlockType = require_dist.setBlockType;
+exports.sinkListItem = require_dist$1.sinkListItem;
+exports.splitListItem = require_dist$1.splitListItem;
+exports.toggleMark = require_dist.toggleMark;
+exports.undo = require_dist$1.undo;
+exports.wrapIn = require_dist.wrapIn;

package/dist/core/index.esm.js

@@ -0,0 +1,4 @@
+import { C as Step, I as ResolvedPos, L as Schema, M as Fragment, N as Mark, P as Node, R as Slice, S as ReplaceStep, T as Transform, _ as Transaction, a as lift, b as RemoveMarkStep, c as toggleMark, d as EditorState, i as joinForward, l as wrapIn, m as PluginKey, n as deleteSelection, o as selectAll, p as Plugin, r as joinBackward, s as setBlockType, t as baseKeymap, v as AddMarkStep, w as StepMap, y as Mapping } from "../dist-5Q_Z9Ell.js";
+import { n as keymap, r as EditorView, t as ExtensionManager } from "../extension-Cl6x5MDR.js";
+import { a as sinkListItem, i as liftListItem, n as redo, o as splitListItem, r as undo, t as history } from "../dist-CnVrDtsI.js";
+export { AddMarkStep, EditorState, EditorView, ExtensionManager, Fragment, Mapping, Mark, Node, Plugin, PluginKey, RemoveMarkStep, ReplaceStep, ResolvedPos, Schema, Slice, Step, StepMap, Transaction, Transform, baseKeymap, deleteSelection, history, joinBackward, joinForward, keymap, lift, liftListItem, redo, selectAll, setBlockType, sinkListItem, splitListItem, toggleMark, undo, wrapIn };