BrianHung / editor

public mirror of a (WIP) rich text editor; demo: https://editor-brianhung.vercel.app/

Home Page:https://editor-brianhung.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

editor

This is a rich text editor built upon the ProseMirror framework. It is based off tiptap and rich-markdown-editor, but tries to stay agnostic to Vue and React.

This repo is a public mirror of private development branch, and is not intended for production use. The recommended way to use this editor is to fork this repo and use it as a reference in building your own rich text editor; consider it a more extensive version of ProseMirror Cookbook. There is no substitute to learning ProseMirror or for reading the docs.

usage

To use with plain JavaScript, pass in the DOM element where you'd want to mount as place and an array of extensions to use.

import { Editor, Text, Paragraph, Doc } from "editor";

let place = document.querySelector("#editor")
let editor = new Editor({
  place,
  extensions: [
    Text(),
    Paragraph(),
    Doc(), 
  ]
})

similar libraries

Working with Custom NodeViews

To work with elements that aren't managed by ProseMirror, e.g. interactive DOM buttons or React components, you need custom nodeviews.

import { Editor, Text, Paragraph, Doc, MathBlock, MathBlockNodeView } from "editor";

let place = document.querySelector("#editor")
let editor = new Editor({
  place,
  extensions: [
    Text(),
    Paragraph(),
    Doc(),
    MathBlock({
      nodeView: props => new MathBlockNodeView(props)
    })
  ]
})

TodoItem MathBlock

Working with Plugin State and Plugin View

CodeMirrorSyntaxHighlight

Names for marks and nodes are mutually exclusive

About

public mirror of a (WIP) rich text editor; demo: https://editor-brianhung.vercel.app/

https://editor-brianhung.vercel.app/

License:MIT License


Languages

Language:TypeScript 91.9%Language:JavaScript 5.8%Language:CSS 2.1%Language:Shell 0.2%