mirror of https://github.com/fantasticit/think.git
client: fix markdown reference extensions
This commit is contained in:
parent
e32f3ebf7e
commit
c5812888f0
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
};
|
};
|
||||||
|
|
|
@ -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),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue