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 && ( - - )}
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); diff --git a/packages/client/src/tiptap/core/extensions/paste.ts b/packages/client/src/tiptap/core/extensions/paste.ts index 8e7e17af..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); @@ -154,9 +154,10 @@ 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({ + editor, schema: editor.schema, html, needTitle: hasTitleExtension && !hasTitle, @@ -212,7 +213,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,10 +221,12 @@ export const Paste = Extension.create({ } // 处理 markdown - if (markdownText || isMarkdown(text) || html.length === 0 || pasteCodeLanguage === '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,8 +242,10 @@ export const Paste = Extension.create({ return true; } - if (text.length !== 0) { - return insertText(view, text); + if (isInTitle(view.state)) { + if (text.length) { + return insertText(view, text); + } } return false; 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 }) => { 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; };