client: fix markdown reference extensions

This commit is contained in:
fantasticit 2022-09-16 20:37:36 +08:00
parent e32f3ebf7e
commit c5812888f0
8 changed files with 32 additions and 18 deletions

View File

@ -9,10 +9,10 @@ import { htmlToProsemirror as mdHTMLToProsemirror } from '../markdown-to-prosemi
* @param defaultTitle heading paragraph * @param defaultTitle heading paragraph
* @returns * @returns
*/ */
export const htmlToProsemirror = ({ schema, html, needTitle, defaultTitle = '' }) => { export const htmlToProsemirror = ({ editor, schema, html, needTitle, defaultTitle = '' }) => {
const parser = new DOMParser(); const parser = new DOMParser();
const { body } = parser.parseFromString(extractImage(html), 'text/html'); const { body } = parser.parseFromString(extractImage(html), 'text/html');
body.append(document.createComment(html)); body.append(document.createComment(html));
const doc = mdHTMLToProsemirror(body, needTitle, defaultTitle); const doc = mdHTMLToProsemirror(editor, body, needTitle, defaultTitle);
return doc; return doc;
}; };

View File

@ -1,7 +1,5 @@
import { Renderer } from './renderer'; import { Renderer } from './renderer';
const renderer = new Renderer();
/** /**
* *
* @param doc * @param doc
@ -56,7 +54,8 @@ function fixNode(doc) {
* @param defaultTitle heading paragraph * @param defaultTitle heading paragraph
* @returns * @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); const json = renderer.render(body);
// 设置标题 // 设置标题
@ -103,5 +102,7 @@ export const htmlToProsemirror = (body, needTitle = false, defaultTitle = '') =>
} }
fixNode(result); fixNode(result);
renderer = null;
return result; return result;
}; };

View File

@ -1,8 +1,12 @@
import { Editor } from '@tiptap/core';
export class Mark { export class Mark {
editor: Editor;
type: string; type: string;
DOMNode: HTMLElement; DOMNode: HTMLElement;
constructor(DomNode) { constructor(editor, DomNode) {
this.editor = editor;
this.type = 'mark'; this.type = 'mark';
this.DOMNode = DomNode; this.DOMNode = DomNode;
} }

View File

@ -1,8 +1,8 @@
import { Node } from './node'; import { Node } from './node';
export class ListItem extends Node { export class ListItem extends Node {
constructor(DomNode) { constructor(editor, DomNode) {
super(DomNode); super(editor, DomNode);
this.wrapper = { this.wrapper = {
type: 'paragraph', type: 'paragraph',
}; };

View File

@ -1,11 +1,15 @@
import { Editor } from '@tiptap/core';
import { getAttributes } from '../utils'; import { getAttributes } from '../utils';
export class Node { export class Node {
editor: Editor;
wrapper: unknown; wrapper: unknown;
type = 'node'; type = 'node';
DOMNode: HTMLElement; DOMNode: HTMLElement;
constructor(DomNode: HTMLElement) { constructor(editor, DomNode: HTMLElement) {
this.editor = editor;
this.wrapper = null; this.wrapper = null;
this.DOMNode = DomNode; this.DOMNode = DomNode;
} }
@ -17,7 +21,7 @@ export class Node {
data(): Record<string, unknown> { data(): Record<string, unknown> {
return { return {
type: this.type, type: this.type,
attrs: getAttributes(this.type, this.DOMNode), attrs: getAttributes(this.editor, this.type, this.DOMNode),
}; };
} }
} }

View File

@ -1,4 +1,5 @@
// 自定义节点 import { Editor } from '@tiptap/core';
// marks // marks
import { Bold } from './marks/bold'; import { Bold } from './marks/bold';
import { Code } from './marks/code'; import { Code } from './marks/code';
@ -45,12 +46,14 @@ import { Text } from './nodes/text';
import { Title } from './nodes/title'; import { Title } from './nodes/title';
export class Renderer { export class Renderer {
editor: Editor;
document: HTMLElement; document: HTMLElement;
nodes = []; nodes = [];
marks = []; marks = [];
storedMarks = []; storedMarks = [];
constructor() { constructor(editor) {
this.editor = editor;
this.document = undefined; this.document = undefined;
this.storedMarks = []; this.storedMarks = [];
@ -187,7 +190,7 @@ export class Renderer {
getMatchingClass(node, classes) { getMatchingClass(node, classes) {
for (const i in classes) { for (const i in classes) {
const Class = classes[i]; const Class = classes[i];
const instance = new Class(node); const instance = new Class(this.editor, node);
if (instance.matching()) { if (instance.matching()) {
return instance; return instance;
} }

View File

@ -1,4 +1,4 @@
import { AllExtensions } from 'tiptap/core/all-kit'; import { Editor } from '@tiptap/core';
/** /**
* tiptap extension DOM * tiptap extension DOM
@ -28,8 +28,10 @@ const getAttribute = (
}, ret); }, ret);
}; };
export const getAttributes = (name: string, element: HTMLElement): Record<string, unknown> => { export const getAttributes = (editor: Editor, name: string, element: HTMLElement): Record<string, unknown> => {
const ext = AllExtensions.find((ext) => ext && ext.name === name); if (!editor || !editor.extensionManager) return {};
const ext = Array.from(editor.extensionManager.extensions).find((ext) => ext && ext.name === name);
if (!ext) return {}; if (!ext) return {};

View File

@ -25,7 +25,7 @@ export const extractImage = (html) => {
}; };
// 将 markdown 字符串转换为 ProseMirror JSONDocument // 将 markdown 字符串转换为 ProseMirror JSONDocument
export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle = '' }) => { export const markdownToProsemirror = ({ editor, schema, content, needTitle, defaultTitle = '' }) => {
const html = markdownToHTML(content); const html = markdownToHTML(content);
if (!html) return null; if (!html) return null;
@ -33,7 +33,7 @@ export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle
const parser = new DOMParser(); const parser = new DOMParser();
const { body } = parser.parseFromString(extractImage(html), 'text/html'); const { body } = parser.parseFromString(extractImage(html), 'text/html');
body.append(document.createComment(content)); body.append(document.createComment(content));
const node = htmlToProsemirror(body, needTitle, defaultTitle); const node = htmlToProsemirror(editor, body, needTitle, defaultTitle);
return node; return node;
}; };