diff --git a/packages/client/src/tiptap/core/extensions/scroll-into-view.ts b/packages/client/src/tiptap/core/extensions/scroll-into-view.ts index a1ce6501..4991ebc8 100644 --- a/packages/client/src/tiptap/core/extensions/scroll-into-view.ts +++ b/packages/client/src/tiptap/core/extensions/scroll-into-view.ts @@ -1,19 +1,33 @@ -import { Extension } from '@tiptap/core'; +import { Editor, Extension } from '@tiptap/core'; import { Plugin, PluginKey, Transaction } from 'prosemirror-state'; -import { debounce } from 'helpers/debounce'; export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin'); type TransactionWithScroll = Transaction & { scrolledIntoView: boolean }; -export const ScrollIntoView = Extension.create({ +interface IScrollIntoViewOptions { + /** + * + * 将 markdown 转换为 html + */ + onScroll: (editor: Editor) => void; +} + +export const ScrollIntoView = Extension.create({ name: 'scrollIntoView', + + addOptions() { + return { + onScroll: () => {}, + }; + }, + addProseMirrorPlugins() { const { editor } = this; return [ new Plugin({ key: scrollIntoViewPluginKey, - appendTransaction: debounce((transactions, oldState, newState) => { + appendTransaction: (transactions, oldState, newState) => { if (!transactions.length || !editor.isEditable) { return; } @@ -24,9 +38,10 @@ export const ScrollIntoView = Extension.create({ tr.getMeta('scrollIntoView') !== false && tr.getMeta('addToHistory') !== false ) { + this.options.onScroll(editor); return newState.tr.scrollIntoView(); } - }, 100), + }, }), ]; }, diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts index 2346d51a..f8aaabf9 100644 --- a/packages/client/src/tiptap/editor/collaboration/kit.ts +++ b/packages/client/src/tiptap/editor/collaboration/kit.ts @@ -63,6 +63,7 @@ import { Status } from 'tiptap/core/extensions/status'; import { markdownToProsemirror } from 'tiptap/markdown/markdown-to-prosemirror'; import { markdownToHTML } from 'tiptap/markdown/markdown-to-prosemirror/markdown-to-html'; import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown'; +import { debounce } from 'helpers/debounce'; const DocumentWithTitle = Document.extend({ content: 'title block+', @@ -107,7 +108,17 @@ export const CollaborationKit = [ Loading, OrderedList, SelectionExtension, - ScrollIntoView, + ScrollIntoView.configure({ + onScroll: debounce((editor) => { + setTimeout(() => { + const element = editor.options.element; + // 脏代码:这里使用 parentElement 是和布局有关的,需要根据实际情况修改 + const parentElement = element.parentNode as HTMLElement; + const nextScrollTop = element.scrollHeight; + parentElement.scrollTop = nextScrollTop; + }, 0); + }, 200), + }), Strike, Subscript, Superscript,