diff --git a/packages/client/src/components/tiptap/components/katex/index.module.scss b/packages/client/src/components/tiptap/components/katex/index.module.scss index 9796867f..a77831f1 100644 --- a/packages/client/src/components/tiptap/components/katex/index.module.scss +++ b/packages/client/src/components/tiptap/components/katex/index.module.scss @@ -1,5 +1,5 @@ .wrap { margin: 8px 0; - display: flex; + display: inline-flex; justify-content: center; } diff --git a/packages/client/src/components/tiptap/components/katex/index.tsx b/packages/client/src/components/tiptap/components/katex/index.tsx index bf7371b3..47d74585 100644 --- a/packages/client/src/components/tiptap/components/katex/index.tsx +++ b/packages/client/src/components/tiptap/components/katex/index.tsx @@ -1,5 +1,5 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { Popover, TextArea, Typography, Space } from '@douyinfe/semi-ui'; import { IconHelpCircle } from '@douyinfe/semi-icons'; import katex from 'katex'; @@ -10,6 +10,9 @@ const { Text } = Typography; export const KatexWrapper = ({ editor, node, updateAttributes }) => { const isEditable = editor.isEditable; const { text } = node.attrs; + + console.log(node.attrs); + const formatText = useMemo(() => { try { return katex.renderToString(`${text}`); @@ -24,8 +27,12 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => { 点击输入公式 ); + // useEffect(() => { + // updateAttributes(node.attrs); + // }, []); + return ( - + {isEditable ? ( { diff --git a/packages/client/src/components/tiptap/extensions/horizontalRule.ts b/packages/client/src/components/tiptap/extensions/horizontalRule.ts index a39e38a2..f9c37438 100644 --- a/packages/client/src/components/tiptap/extensions/horizontalRule.ts +++ b/packages/client/src/components/tiptap/extensions/horizontalRule.ts @@ -19,18 +19,16 @@ export const HorizontalRule = Node.create({ addOptions() { return { - HTMLAttributes: { - class: 'hr-line', - }, + HTMLAttributes: {}, }; }, parseHTML() { - return [{ tag: 'div[class=hr-line]' }]; + return [{ tag: 'hr' }]; }, renderHTML({ HTMLAttributes }) { - return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]; + return ['hr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]; }, addCommands() { diff --git a/packages/client/src/components/tiptap/extensions/katex.ts b/packages/client/src/components/tiptap/extensions/katex.ts index 0df0480f..91b992ce 100644 --- a/packages/client/src/components/tiptap/extensions/katex.ts +++ b/packages/client/src/components/tiptap/extensions/katex.ts @@ -14,26 +14,36 @@ export const KatexInputRegex = /^\$\$(.+)?\$\$$/; export const Katex = Node.create({ name: 'katex', - group: 'block', - defining: true, - draggable: true, + group: 'inline', + inline: true, selectable: true, atom: true, + addOptions() { + return { + HTMLAttributes: { + class: 'katex', + }, + }; + }, + addAttributes() { return { text: { default: '', + parseHTML: (element) => { + return element.getAttribute('data-text'); + }, }, }; }, parseHTML() { - return [{ tag: 'div[data-type=katex]' }]; + return [{ tag: 'span.katex' }]; }, renderHTML({ HTMLAttributes }) { - return ['div', mergeAttributes((this.options && this.options.HTMLAttributes) || {}, HTMLAttributes)]; + return ['span', mergeAttributes((this.options && this.options.HTMLAttributes) || {}, HTMLAttributes)]; }, // @ts-ignore diff --git a/packages/client/src/components/tiptap/extensions/paste.ts b/packages/client/src/components/tiptap/extensions/paste.ts index b6f65658..e10401ac 100644 --- a/packages/client/src/components/tiptap/extensions/paste.ts +++ b/packages/client/src/components/tiptap/extensions/paste.ts @@ -1,6 +1,6 @@ import { Extension } from '@tiptap/core'; import { Plugin, PluginKey } from 'prosemirror-state'; -import { markdownSerializer } from '../services/markdown'; +import { markdownSerializer } from '../services/markdown/serializer'; import { EXTENSION_PRIORITY_HIGHEST } from '../constants'; import { handleFileEvent } from '../services/upload'; import { isInCode, LANGUAGES } from '../services/code'; @@ -63,16 +63,14 @@ export const Paste = Extension.create({ // 处理 markdown if (isMarkdown(text) || html.length === 0 || pasteCodeLanguage === 'markdown') { event.preventDefault(); - // FIXME: 由于 title schema 的存在导致反序列化必有 title 节点存在 const firstNode = view.props.state.doc.content.firstChild; const hasTitle = isTitleNode(firstNode) && firstNode.content.size > 0; - let schema = view.props.state.schema; - const doc = markdownSerializer.deserialize({ + const schema = view.props.state.schema; + const doc = markdownSerializer.markdownToProsemirror({ schema, content: normalizePastedMarkdown(text), hasTitle, }); - // @ts-ignore const transaction = view.state.tr.insert(view.state.selection.head, view.state.schema.nodeFromJSON(doc)); view.dispatch(transaction); @@ -113,7 +111,7 @@ export const Paste = Extension.create({ if (!doc) { return ''; } - const content = markdownSerializer.serialize({ + const content = markdownSerializer.proseMirrorToMarkdown({ schema: this.editor.schema, content: doc, }); diff --git a/packages/client/src/components/tiptap/menus/components/paragraph.tsx b/packages/client/src/components/tiptap/menus/components/paragraph.tsx index e45e9600..c42f5564 100644 --- a/packages/client/src/components/tiptap/menus/components/paragraph.tsx +++ b/packages/client/src/components/tiptap/menus/components/paragraph.tsx @@ -21,6 +21,8 @@ export const Paragraph = ({ editor }) => { } }, []); + console.log(getCurrentCaretTitle(editor)); + return (