从零开始的富文本编辑器（下）

// withLists handles behavior regarding ol and ul lists// more specifically, withLists properly exits the list with `enter` or `backspace`// from an empty list item, transforming the node to a paragraphexport const withLists = (editor: Editor) => {  const { insertBreak, deleteBackward } = editor    const doWithLists = (callback: Function) => {    const { selection } = editor      // check that there is a current selection without highlight    if (selection && Range.isCollapsed(selection)) {      // find the 'closest' `list-item` element      const [match] = Editor.nodes(editor, {        match: (n: any) =>          n.type === 'list-item' &&          n.children &&          n.children[0] &&          (!n.children[0].text || n.children[0].text === ''),      })        // check that there was a match      if (match) {        const [, path] = match        const start = Editor.start(editor, path)          // if the selection is at the beginning of the list item        if (Point.equals(selection.anchor, start)) {          // 'lift' the list-item to the next parent          liftNodes(editor)          // check for the new parent          const [listMatch] = Editor.nodes(editor, {            match: (n: any) =>              n.type === 'bulleted-list' || n.type === 'numbered-list',          })          // if it is no longer within a ul/ol, turn the element into a normal paragraph          if (!listMatch) {            Transforms.setNodes(              editor,              { type: 'paragraph' },              { match: (n: any) => n.type === 'list-item' }            )          }          return        }      }    }      callback()  }    // override editor function for break  editor.insertBreak = () => {    doWithLists(insertBreak)  }    // override editor function for a backspace  editor.deleteBackward = (unit) => {    doWithLists(() => deleteBackward(unit))  }    return editor}

export const indentItem = (editor: Editor, maxDepth = MAX_DEPTH) => {  const { selection } = editor    // check that there is a current selection without highlight  if (selection && Range.isCollapsed(selection)) {    const [match] = Editor.nodes(editor, {      match: (n: any) => n.type === 'list-item',    })      // check that there was a match    if (match) {      // wrap the list item into another list to indent it within the DOM      const [listMatch] = Editor.nodes<any>(editor, {        mode: 'lowest',        match: (n: any) => n.type === 'bulleted-list' || n.type === 'numbered-list',      })        if (listMatch) {        let depth = listMatch[1].length        if (depth <= maxDepth) {          Transforms.wrapNodes(editor, {            type: listMatch[0].type,            children: [],          })        }      }    } else {      Transforms.insertText(editor, '    ', {        at: { path: [selection.anchor.path[0], 0], offset: 0 },      })    }  }}

export const undentItem = (editor: Editor) => {  const { selection } = editor    // check that there is a current selection without highlight  if (selection && Range.isCollapsed(selection)) {    const [match] = Editor.nodes(editor, {      match: (n: any) => n.type === 'list-item',    })      // check that there was a match    if (match) {      // 'lift' the list-item to the next parent      liftNodes(editor)      // check for the new parent      const [listMatch] = Editor.nodes(editor, {        match: (n: any) => n.type === 'bulleted-list' || n.type === 'numbered-list',      })      // if it is no longer within a ul/ol, turn the element into a normal paragraph      if (!listMatch) {        Transforms.setNodes(          editor,          { type: 'paragraph' },          { match: (n: any) => n.type === 'list-item' }        )      }    } else {      const [pMatch] = Editor.nodes(editor, {        match: (n: any) => n.type === 'paragraph'          || n.type === 'block-quote'          || n.type === 'heading-one'          || n.type === 'heading-two'          || n.type === 'heading',      })        if ((pMatch[0] as any).children[0].text.startsWith('    ')) {        Transforms.delete(editor, {          at: { path: [selection.anchor.path[0], 0], offset: 0 },          distance: 4        })      }    }  }}

const withImages = editor => {  const { isVoid } = editor    editor.isVoid = element => {    return element.type === 'image' ? true : isVoid(element)  }    return editor}

export const insertImage = (editor: Editor, url: string) => {  const { selection } = editor  const text = { text: '' }  const image: ImageElement = { type: 'image', url: trimHttp(url), desc: '', children: [text] }  if (selection) {    const [match] = Editor.nodes(editor, {      match: (n: any) =>      n.type === 'paragraph' &&      n.children &&      n.children[0] &&      (!n.children[0].text || n.children[0].text === ''),    })    if (match) {      Transforms.setNodes(editor, image, {mode: 'highest'})    } else {      Transforms.insertNodes(editor, image, {mode: 'highest'})    }  } else {    Transforms.insertNodes(editor, image, {mode: 'highest'})  }}

const Image = ({ attributes, children, element }) => {  const editor = useSlateStatic()  const path = ReactEditor.findPath(editor, element)    const selected = useSelected()  const focused = useFocused()  return (    <div {...attributes}>      {children}      <div        contentEditable={false}        className={css`          position: relative;        `}      >        <img          src={element.url}          className={css`            display: block;            max-width: 100%;            max-height: 20em;            box-shadow: ${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'};          `}        />      </div>    </div>  )}