From c5812888f0bdd13a37e63acb767639fd09794827 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 20:37:36 +0800 Subject: [PATCH] client: fix markdown reference extensions --- .../src/tiptap/markdown/html-to-prosemirror/index.ts | 4 ++-- .../markdown-to-prosemirror/html-to-prosemirror/index.ts | 7 ++++--- .../html-to-prosemirror/marks/mark.ts | 6 +++++- .../html-to-prosemirror/nodes/list-item.ts | 4 ++-- .../html-to-prosemirror/nodes/node.ts | 8 ++++++-- .../html-to-prosemirror/renderer.ts | 9 ++++++--- .../markdown-to-prosemirror/html-to-prosemirror/utils.ts | 8 +++++--- .../tiptap/markdown/markdown-to-prosemirror/index.tsx | 4 ++-- 8 files changed, 32 insertions(+), 18 deletions(-) diff --git a/packages/client/src/tiptap/markdown/html-to-prosemirror/index.ts b/packages/client/src/tiptap/markdown/html-to-prosemirror/index.ts index a3a0050d..d44e1c6e 100644 --- a/packages/client/src/tiptap/markdown/html-to-prosemirror/index.ts +++ b/packages/client/src/tiptap/markdown/html-to-prosemirror/index.ts @@ -9,10 +9,10 @@ import { htmlToProsemirror as mdHTMLToProsemirror } from '../markdown-to-prosemi * @param defaultTitle 优先作为文档标题，否则默认读取一个 heading 或者 paragraph 的文字内容 * @returns */ -export const htmlToProsemirror = ({ schema, html, needTitle, defaultTitle = '' }) => { +export const htmlToProsemirror = ({ editor, schema, html, needTitle, defaultTitle = '' }) => { const parser = new DOMParser(); const { body } = parser.parseFromString(extractImage(html), 'text/html'); body.append(document.createComment(html)); - const doc = mdHTMLToProsemirror(body, needTitle, defaultTitle); + const doc = mdHTMLToProsemirror(editor, body, needTitle, defaultTitle); return doc; }; diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/index.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/index.ts index 58df9d7a..60c840d2 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/index.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/index.ts @@ -1,7 +1,5 @@ import { Renderer } from './renderer'; -const renderer = new Renderer(); - /** * 表格的内容格式不正确，需要进行过滤修复 * @param doc @@ -56,7 +54,8 @@ function fixNode(doc) { * @param defaultTitle 优先作为文档标题，否则默认读取一个 heading 或者 paragraph 的文字内容 * @returns */ -export const htmlToProsemirror = (body, needTitle = false, defaultTitle = '') => { +export const htmlToProsemirror = (editor, body, needTitle = false, defaultTitle = '') => { + let renderer = new Renderer(editor); const json = renderer.render(body); // 设置标题 @@ -103,5 +102,7 @@ export const htmlToProsemirror = (body, needTitle = false, defaultTitle = '') => } fixNode(result); + + renderer = null; return result; }; diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/marks/mark.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/marks/mark.ts index 2782e60b..1a51b933 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/marks/mark.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/marks/mark.ts @@ -1,8 +1,12 @@ +import { Editor } from '@tiptap/core'; + export class Mark { + editor: Editor; type: string; DOMNode: HTMLElement; - constructor(DomNode) { + constructor(editor, DomNode) { + this.editor = editor; this.type = 'mark'; this.DOMNode = DomNode; } diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/list-item.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/list-item.ts index 1553b497..9bfdb69d 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/list-item.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/list-item.ts @@ -1,8 +1,8 @@ import { Node } from './node'; export class ListItem extends Node { - constructor(DomNode) { - super(DomNode); + constructor(editor, DomNode) { + super(editor, DomNode); this.wrapper = { type: 'paragraph', }; diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/node.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/node.ts index 9d2d5a5c..cc68525b 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/node.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/node.ts @@ -1,11 +1,15 @@ +import { Editor } from '@tiptap/core'; + import { getAttributes } from '../utils'; export class Node { + editor: Editor; wrapper: unknown; type = 'node'; DOMNode: HTMLElement; - constructor(DomNode: HTMLElement) { + constructor(editor, DomNode: HTMLElement) { + this.editor = editor; this.wrapper = null; this.DOMNode = DomNode; } @@ -17,7 +21,7 @@ export class Node { data(): Record { return { type: this.type, - attrs: getAttributes(this.type, this.DOMNode), + attrs: getAttributes(this.editor, this.type, this.DOMNode), }; } } diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts index e683ca9a..c89ed3b4 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts @@ -1,4 +1,5 @@ -// 自定义节点 +import { Editor } from '@tiptap/core'; + // marks import { Bold } from './marks/bold'; import { Code } from './marks/code'; @@ -45,12 +46,14 @@ import { Text } from './nodes/text'; import { Title } from './nodes/title'; export class Renderer { + editor: Editor; document: HTMLElement; nodes = []; marks = []; storedMarks = []; - constructor() { + constructor(editor) { + this.editor = editor; this.document = undefined; this.storedMarks = []; @@ -187,7 +190,7 @@ export class Renderer { getMatchingClass(node, classes) { for (const i in classes) { const Class = classes[i]; - const instance = new Class(node); + const instance = new Class(this.editor, node); if (instance.matching()) { return instance; } diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/utils.ts b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/utils.ts index e8231ec2..bc9aa6b3 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/utils.ts +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/utils.ts @@ -1,4 +1,4 @@ -import { AllExtensions } from 'tiptap/core/all-kit'; +import { Editor } from '@tiptap/core'; /** * 通过 tiptap extension 的配置从 DOM 节点上获取属性值 @@ -28,8 +28,10 @@ const getAttribute = ( }, ret); }; -export const getAttributes = (name: string, element: HTMLElement): Record => { - const ext = AllExtensions.find((ext) => ext && ext.name === name); +export const getAttributes = (editor: Editor, name: string, element: HTMLElement): Record => { + if (!editor || !editor.extensionManager) return {}; + + const ext = Array.from(editor.extensionManager.extensions).find((ext) => ext && ext.name === name); if (!ext) return {}; diff --git a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/index.tsx b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/index.tsx index 18845670..db74fb70 100644 --- a/packages/client/src/tiptap/markdown/markdown-to-prosemirror/index.tsx +++ b/packages/client/src/tiptap/markdown/markdown-to-prosemirror/index.tsx @@ -25,7 +25,7 @@ export const extractImage = (html) => { }; // 将 markdown 字符串转换为 ProseMirror JSONDocument -export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle = '' }) => { +export const markdownToProsemirror = ({ editor, schema, content, needTitle, defaultTitle = '' }) => { const html = markdownToHTML(content); if (!html) return null; @@ -33,7 +33,7 @@ export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle const parser = new DOMParser(); const { body } = parser.parseFromString(extractImage(html), 'text/html'); body.append(document.createComment(content)); - const node = htmlToProsemirror(body, needTitle, defaultTitle); + const node = htmlToProsemirror(editor, body, needTitle, defaultTitle); return node; };