y-prosemirror 项目教程

y-prosemirror 项目教程

y-prosemirrorProseMirror editor binding for Yjs项目地址:https://gitcode.com/gh_mirrors/yp/y-prosemirror

1. 项目的目录结构及介绍

y-prosemirror/
├── demos/
│   └── prosemirror/
│       └── prosemirror.html
├── src/
│   ├── plugins/
│   │   ├── y-sync.js
│   │   ├── y-cursor.js
│   │   └── y-undo.js
│   ├── utils/
│   │   └── index.js
│   └── index.js
├── package.json
├── README.md
└── LICENSE

• demos/: 包含示例文件，如 prosemirror.html，展示如何在实际应用中使用 y-prosemirror。
• src/: 包含项目的主要源代码。
  • plugins/: 包含核心插件，如 y-sync.js（同步插件）、y-cursor.js（光标插件）和 y-undo.js（撤销/重做插件）。
  • utils/: 包含实用工具函数。
  • index.js: 项目的入口文件。
• package.json: 项目的配置文件，包含依赖、脚本等信息。
• README.md: 项目的介绍文档。
• LICENSE: 项目的许可证文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件是 y-prosemirror 的主要入口点，负责初始化和配置 ProseMirror 编辑器。

// src/index.js
import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from './plugins'
import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { exampleSetup } from 'prosemirror-example-setup'
import { keymap } from 'prosemirror-keymap'
import { initProseMirrorDoc } from './utils'

const type = ydocument.get('prosemirror', Y.XmlFragment)
const [doc, mapping] = initProseMirrorDoc(type, schema)

const prosemirrorView = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    doc: doc,
    schema: schema,
    plugins: [
      ySyncPlugin(type, [mapping]),
      yCursorPlugin(provider.awareness),
      yUndoPlugin(),
      keymap({
        'Mod-z': undo,
        'Mod-y': redo,
        'Mod-Shift-z': redo
      })
    ].concat(exampleSetup({ schema }))
  })
})

3. 项目的配置文件介绍

项目的配置文件是 package.json。这个文件包含了项目的基本信息、依赖、脚本等。

{
  "name": "y-prosemirror",
  "version": "1.2.12",
  "description": "ProseMirror editor binding for Yjs",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yjs/y-prosemirror.git"
  },
  "keywords": [
    "yjs",
    "prosemirror",
    "collaborative",
    "editing"
  ],
  "author": "Kevin Jahns",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/yjs/y-prosemirror/issues"
  },
  "homepage": "https://github.com/yjs/y-prosemirror#readme",
  "dependencies": {
    "prosemirror-example-setup": "^1.0.0",
    "prosemirror-keymap": "^1.0.0",
    "prosemirror-state": "^1.0.0",
    "prosemirror-view": "^1.0.0",
    "yjs": "^13.0.0"
  }
}

• name: 项目名称。
• version: 项目版本

y-prosemirrorProseMirror editor binding for Yjs项目地址:https://gitcode.com/gh_mirrors/yp/y-prosemirror