feat: getElemsByTypePrefix （删掉 getHeaders）

packages/core/src/editor/interface.ts

@@ -3,7 +3,7 @@
  * @author wangfupeng
  */
 
-import { Editor, Location, Node, Ancestor } from 'slate'
+import { Editor, Location, Node, Ancestor, Element } from 'slate'
 import ee from 'event-emitter'
 import { IEditorConfig, AlertType, ISingleMenuConfig } from '../config/interface'
 import { IPositionStyle } from '../menus/interface'
@@ -27,7 +27,7 @@ export interface IDomEditor extends Editor {
   getHtml: (opt?: { withFormat?: boolean; containerClassName?: string }) => string
   getText: () => string
   getSelectionText: () => string // 获取选区文字
-  getHeaders: () => { id: string; type: string; text: string }[] // 获取所有标题
+  getElemsByTypePrefix: (typePrefix: string) => Element[]
   getParentNode: (node: Node) => Ancestor | null
 
   // dom 相关

packages/core/src/editor/plugins/with-content.ts

@@ -4,7 +4,7 @@
  */
 
 import xmlFormat from 'xml-formatter'
-import { Editor, Node, Text, Path, Operation, Range, Transforms } from 'slate'
+import { Editor, Node, Text, Path, Operation, Range, Transforms, Element } from 'slate'
 import { DomEditor } from '../dom-editor'
 import { IDomEditor } from '../..'
 import { EDITOR_TO_SELECTION, NODE_TO_KEY } from '../../utils/weak-maps'
@@ -156,23 +156,27 @@ export const withContent = <T extends Editor>(editor: T) => {
     return Editor.string(editor, selection)
   }
 
-  // 获取所有标题
-  e.getHeaders = () => {
-    const headers: { id: string; type: string; text: string }[] = []
-    const { children = [] } = e
-    children.forEach(n => {
-      if (Text.isText(n)) return
-
-      const { type = '' } = n
-      if (type.startsWith('header')) {
-        const key = DomEditor.findKey(e, n)
-        const id = genElemId(key.id)
-        const text = Node.string(n)
-
-        headers.push({ id, type, text })
+  // 根据 type 获取 elems
+  // TODO 补充到文档中，删掉 getHeaders
+  e.getElemsByTypePrefix = (typePrefix: string): Element[] => {
+    const elems: Element[] = []
+
+    // 获取 editor 所有 nodes
+    const nodeEntries = Editor.nodes(e, { at: [] })
+    for (let nodeEntry of nodeEntries) {
+      const [node] = nodeEntry
+      if (Element.isElement(node)) {
+        // TODO 返回的需要有 id ，结合 editor.scrollToElem 方法，参考 examples/headers.html
+        // const key = DomEditor.findKey(e, node)
+        // const id = genElemId(key.id)
+
+        // 判断 type
+        const { type } = node
+        if (type.indexOf(typePrefix) >= 0) elems.push(node)
       }
-    })
-    return headers
+    }
+
+    return elems
   }
 
   e.getParentNode = (node: Node) => {

packages/editor/examples/headers.html

@@ -41,7 +41,7 @@
     }
     editorConfig.onChange = (editor) => {
       // 获取并展示 headers
-      const headers = editor.getHeaders()
+      const headers = editor.getElemsByTypePrefix('header')
       $('#text-headers').val(JSON.stringify(headers, null, 4))
     }