text info data text my seflt

Currently, we provide some out-of-the-box plugins that not only implement basic functionality, but also provide support for keyboard shortcuts, Markdown syntax, Markdown serialization, Markdown deserialization, HTML serialization, and HTML deserialization.

• @editablejs/plugin-context-menu provides a right-click menu. Since we do not use some of the functionality of the native contenteditable menu, we need to define our own right-click menu functionality.
• @editablejs/plugin-align for text alignment
• @editablejs/plugin-blockquote for block quotes
• @editablejs/plugin-codeblock for code blocks
• @editablejs/plugin-font includes font color, background color, and font size
• @editablejs/plugin-heading for headings
• @editablejs/plugin-hr for horizontal lines
• @editablejs/plugin-image for images
• @editablejs/plugin-indent for indentation
• @editablejs/plugin-leading for line spacing
• @editablejs/plugin-link for links
• @editablejs/plugin-list includes ordered lists, unordered lists, and task lists
• @editablejs/plugin-mark includes bold, italic, strikethrough, underline, superscript, subscript, and code
• @editablejs/plugin-mention for mentions
• @editablejs/plugin-table for tables

The usage method of a single plugin, taking plugin-mark as an example:

import { withMark } from '@editablejs/mark'

const editor = React.useMemo(() => {
  const editor = withEditable(createEditor())
  return withMark(editor)
}, [])

You can also use the following method to quickly use the above common plugins via withPlugins in @editablejs/plugins:

import { withPlugins } from '@editablejs/plugins'

const editor = React.useMemo(() => {
  const editor = withEditable(createEditor())
  return withPlugins(editor)
}, [])

The @editablejs/plugin-history plugin provides undo and redo functionality.

import { withHistory } from '@editablejs/plugin-history'

const editor = React.useMemo(() => {
  const editor = withEditable(createEditor())
  return withHistory(editor)
}, [])

When developing document or blog applications, we usually have a separate title and main content, which is often implemented using an input or textarea outside of the editor. If in a collaborative environment, since it is independent of the editor, additional work is required to achieve real-time synchronization of the title.

The @editablejs/plugin-title plugin solves this problem by using the editor's first child node as the title, integrating it into the editor's entire data structure so that it can have the same features as the editor.

import { withTitle } from '@editablejs/plugin-title'
const editor = React.useMemo(() => {
  const editor = withEditable(createEditor())
  return withTitle(editor)
}, [])

It also has a separate placeholder property for setting the placeholder for the title.

return withTitle(editor, {
  placeholder: 'Please enter a title'
})