Function withMark

packages/plugins/mark/src/plugin/with-mark.tsx:49–133

(editor: T, options: MarkOptions = {})

])

export const withMark = <T extends Editable>(editor: T, options: MarkOptions = {}) => {
  const newEditor = editor as T & MarkEditor

  setOptions(newEditor, options)

  const { renderLeaf } = newEditor

  newEditor.toggleMark = (format: MarkFormat) => {
    if (!MarkEditor.isEnabled(editor, format)) return
    const active = MarkEditor.isActive(editor, format)

    newEditor.normalizeSelection(selection => {
      if (newEditor.selection !== selection) newEditor.selection = selection

      if (active) {
        Editor.removeMark(newEditor, format)
      } else {
        if (format === 'sub') {
          Editor.removeMark(newEditor, 'sup')
        } else if (format === 'sup') {
          Editor.removeMark(newEditor, 'sub')
        }
        Editor.addMark(newEditor, format, true)
      }
    })
  }

  newEditor.renderLeaf = ({ attributes, children, text }: RenderLeafProps<Mark>) => {
    const style: React.CSSProperties = attributes.style ?? {}
    if (text.bold && MarkEditor.isEnabled(editor, 'bold')) {
      style.fontWeight = typeof text.bold === 'string' ? text.bold : 'bold'
    } else {
      style.fontWeight = undefined
    }

    if (text.italic && MarkEditor.isEnabled(editor, 'italic')) {
      style.fontStyle = 'italic'
    }

    if (text.underline && MarkEditor.isEnabled(editor, 'underline')) {
      style.textDecoration = 'underline'
    }

    if (text.strikethrough && MarkEditor.isEnabled(editor, 'strikethrough')) {
      style.textDecoration = style.textDecoration
        ? style.textDecoration + ' line-through'
        : 'line-through'
    }

    const enabledSub = text.sub && MarkEditor.isEnabled(editor, 'sub')
    if (enabledSub) {
      children = <SubStyles>{children}</SubStyles>
    }
    const enabledSup = text.sup && MarkEditor.isEnabled(editor, 'sup')
    if (enabledSup) {
      children = <SupStyles>{children}</SupStyles>
    }