/editable

An experimental rich text editor framework which aims to replace the native contenteditable attribute with a self-drawn cursor to provide richer and more stable editing capabilities.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

zh-CN

Editable

Editable is a rich text editor framework that provides stable rich text editing capabilities without relying on the contenteditable attribute.

Playground: https://docs.editablejs.com/playground

Development

# Install
pnpm install

# start up
pnpm dev

TODO

Selection

  • English keyboard input
  • combined input method input
  • cursor selection rendering
  • text input box rendering
  • Drag mouse to select selection and cursor
  • Switch cursor and selection by keyboard left and right keys
  • Switch cursor and selection by keyboard Shift+left and right keys
  • Switch cursor and selection by keyboard Shift + Up and Down keys
  • Switch cursor and selection by keyboard Ctrl+up and down keys
  • Switch cursor and selection by keyboard up and down keys
  • Double-click and triple-click to select text after word segmentation
  • touch to select selection and cursor
  • Full coverage of unit tests

Input

  • combined input method input
  • paste
  • paste as plain text
  • copy
  • cut

Drag

  • drag and drop selection text
  • drag and drop files
  • drag node

Serializer & Deserializer

  • Text
  • Html
  • Markdown

Plugins

  • Bold
  • Italic
  • Underline
  • StrikeThrough
  • Code
  • Sub
  • Sup
  • Fontsize
  • OrderedList
  • UnorderedList
  • TaskList
  • Blockquote
  • Indent
  • Fontcolor
  • BackgroundColor
  • Redo
  • Undo
  • Link
  • Image
  • Codeblock
  • Heading
  • Table
  • Hr
  • Toolbar
  • InlineToolbar
  • SideToolbar
  • History
  • Yjs
  • Yjs-History
  • Yjs-Websocket
  • Serializes
  • ContextMenu
  • Clipboard
  • Drag
  • Leading
  • Align
  • Mention

More