From a197b47ec56dc61207221481bebfc0b04aa832c7 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 19:47:10 +0800 Subject: [PATCH 1/6] titap: use default action when paste --- packages/client/src/tiptap/core/extensions/paste.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/client/src/tiptap/core/extensions/paste.ts b/packages/client/src/tiptap/core/extensions/paste.ts index 8e7e17af..254c7774 100644 --- a/packages/client/src/tiptap/core/extensions/paste.ts +++ b/packages/client/src/tiptap/core/extensions/paste.ts @@ -154,7 +154,7 @@ export const Paste = Extension.create({ return true; } - // FIXME:各家 office 套件标准不一样,是否需要做成用户自行选择粘贴 html 或者 图片? + // TODO:各家 office 套件标准不一样,是否需要做成用户自行选择粘贴 html 或者 图片? if (html?.includes('urn:schemas-microsoft-com:office') || html?.includes('')) { const doc = htmlToProsemirror({ schema: editor.schema, @@ -212,7 +212,7 @@ export const Paste = Extension.create({ event.preventDefault(); const { tr } = view.state; tr.replaceSelectionWith(view.state.schema.nodes.codeBlock.create({ language: pasteCodeLanguage })); - tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2)))); + tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 1)))); tr.insertText(text.replace(/\r\n?/g, '\n')); tr.setMeta('paste', true); view.dispatch(tr); @@ -220,7 +220,7 @@ export const Paste = Extension.create({ } // 处理 markdown - if (markdownText || isMarkdown(text) || html.length === 0 || pasteCodeLanguage === 'markdown') { + if (markdownText || isMarkdown(text)) { event.preventDefault(); const schema = view.props.state.schema; const doc = markdownToProsemirror({ @@ -239,10 +239,6 @@ export const Paste = Extension.create({ return true; } - if (text.length !== 0) { - return insertText(view, text); - } - return false; }, handleDrop: (view, event: any) => { From e32f3ebf7e072771a8b22307a7febe2aab4c9cbd Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 19:54:07 +0800 Subject: [PATCH 2/6] client: remove mind move --- .../src/thirtypart/kityminder/kity-core/module/view.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/client/src/thirtypart/kityminder/kity-core/module/view.js b/packages/client/src/thirtypart/kityminder/kity-core/module/view.js index 81bc7fcd..411504e5 100644 --- a/packages/client/src/thirtypart/kityminder/kity-core/module/view.js +++ b/packages/client/src/thirtypart/kityminder/kity-core/module/view.js @@ -164,7 +164,7 @@ define(function (require, exports, module) { // 当前偏移加上历史偏移 var offset = kity.Vector.fromPoints(lastPosition, currentPosition); - dragger.move(offset); + // dragger.move(offset); e.stopPropagation(); e.preventDefault(); e.originEvent.preventDefault(); @@ -308,10 +308,10 @@ define(function (require, exports, module) { dy = e.wheelDelta; } - this._viewDragger.move({ - x: dx / 2.5, - y: dy / 2.5, - }); + // this._viewDragger.move({ + // x: dx / 2.5, + // y: dy / 2.5, + // }); var me = this; clearTimeout(this._mousewheeltimer); From c5812888f0bdd13a37e63acb767639fd09794827 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 20:37:36 +0800 Subject: [PATCH 3/6] 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; }; From 57ac872948a8037457473f7e4f94e129465673d2 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 20:37:49 +0800 Subject: [PATCH 4/6] client: fix markdown reference extensions --- .../src/tiptap/core/extensions/paste.ts | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/client/src/tiptap/core/extensions/paste.ts b/packages/client/src/tiptap/core/extensions/paste.ts index 254c7774..04963e5e 100644 --- a/packages/client/src/tiptap/core/extensions/paste.ts +++ b/packages/client/src/tiptap/core/extensions/paste.ts @@ -1,4 +1,4 @@ -import { Extension } from '@tiptap/core'; +import { Editor as CoreEditor, Extension } from '@tiptap/core'; import { safeJSONParse } from 'helpers/json'; import { toggleMark } from 'prosemirror-commands'; import { DOMParser, Fragment, Node, Schema } from 'prosemirror-model'; @@ -53,7 +53,13 @@ interface IPasteOptions { * * 将 html 转换为 prosemirror */ - htmlToProsemirror: (arg: { schema: Schema; html: string; needTitle: boolean; defaultTitle?: string }) => Node; + htmlToProsemirror: (arg: { + editor: CoreEditor; + schema: Schema; + html: string; + needTitle: boolean; + defaultTitle?: string; + }) => Node; /** * 将 markdown 转换为 html @@ -63,7 +69,7 @@ interface IPasteOptions { /** * 将 markdown 转换为 prosemirror 节点 */ - markdownToProsemirror: (arg: { schema: Schema; content: string; needTitle: boolean }) => Node; + markdownToProsemirror: (arg: { editor: CoreEditor; schema: Schema; content: string; needTitle: boolean }) => Node; /** * 将 prosemirror 转换为 markdown @@ -119,12 +125,6 @@ export const Paste = Extension.create({ console.groupEnd(); }); - if (isInTitle(view.state)) { - if (text.length) { - return insertText(view, text); - } - } - // 直接复制节点 if (node) { const json = safeJSONParse(node); @@ -157,6 +157,7 @@ export const Paste = Extension.create({ // TODO:各家 office 套件标准不一样,是否需要做成用户自行选择粘贴 html 或者 图片? if (html?.includes('urn:schemas-microsoft-com:office') || html?.includes('')) { const doc = htmlToProsemirror({ + editor, schema: editor.schema, html, needTitle: hasTitleExtension && !hasTitle, @@ -221,9 +222,11 @@ export const Paste = Extension.create({ // 处理 markdown if (markdownText || isMarkdown(text)) { + console.log(text); event.preventDefault(); const schema = view.props.state.schema; const doc = markdownToProsemirror({ + editor, schema, content: normalizeMarkdown(markdownText || text), needTitle: hasTitleExtension && !hasTitle, @@ -239,6 +242,12 @@ export const Paste = Extension.create({ return true; } + if (isInTitle(view.state)) { + if (text.length) { + return insertText(view, text); + } + } + return false; }, handleDrop: (view, event: any) => { From 22e48e32b36107a5da2d390b6e65fdad5343bf9d Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 20:42:00 +0800 Subject: [PATCH 5/6] tiptap: fix bubble menu --- packages/client/src/tiptap/core/menus/text/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/tiptap/core/menus/text/index.tsx b/packages/client/src/tiptap/core/menus/text/index.tsx index b904f13c..4384f008 100644 --- a/packages/client/src/tiptap/core/menus/text/index.tsx +++ b/packages/client/src/tiptap/core/menus/text/index.tsx @@ -7,6 +7,7 @@ import { CodeBlock } from 'tiptap/core/extensions/code-block'; import { Countdown } from 'tiptap/core/extensions/countdown'; import { DocumentChildren } from 'tiptap/core/extensions/document-children'; import { DocumentReference } from 'tiptap/core/extensions/document-reference'; +import { Excalidraw } from 'tiptap/core/extensions/excalidraw'; import { Flow } from 'tiptap/core/extensions/flow'; import { HorizontalRule } from 'tiptap/core/extensions/horizontal-rule'; import { Iframe } from 'tiptap/core/extensions/iframe'; @@ -47,6 +48,7 @@ const OTHER_BUBBLE_MENU_TYPES = [ Katex.name, HorizontalRule.name, Status.name, + Excalidraw.name, ]; export const Text = ({ editor }) => { From 64113f48f1f23ff6039e19c8fbefbfef87e7d9d3 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 16 Sep 2022 20:48:01 +0800 Subject: [PATCH 6/6] client: simple template card usage --- .../src/components/template/card/index.tsx | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/client/src/components/template/card/index.tsx b/packages/client/src/components/template/card/index.tsx index 86b365ef..d5fe8bdb 100644 --- a/packages/client/src/components/template/card/index.tsx +++ b/packages/client/src/components/template/card/index.tsx @@ -21,6 +21,17 @@ export interface IProps { onClosePreview?: () => void; } +const bodyStyle = { + overflow: 'auto', +}; +const titleContainerStyle = { + marginBottom: 12, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', +} as React.CSSProperties; +const flexStyle = { display: 'flex' }; + export const TemplateCard: React.FC = ({ template, onClick, @@ -35,26 +46,35 @@ export const TemplateCard: React.FC = ({ Router.push(`/template/${template.id}/`); }, [template]); + const cancel = useCallback(() => { + toggleVisible(false); + onClosePreview && onClosePreview(); + }, [toggleVisible, onClosePreview]); + + const preview = useCallback(() => { + toggleVisible(true); + onOpenPreview && onOpenPreview(); + }, [toggleVisible, onOpenPreview]); + + const useTemplate = useCallback(() => { + onClick && onClick(template.id); + }, [onClick, template.id]); + return ( <> { - toggleVisible(false); - onClosePreview && onClosePreview(); - }} + onCancel={cancel} footer={null} fullScreen > -
+
@@ -68,14 +88,7 @@ export const TemplateCard: React.FC = ({
-
+
{template.title}
@@ -92,28 +105,16 @@ export const TemplateCard: React.FC = ({
-
+
已使用 {template.usageAmount}次
- - {onClick && ( - - )}