fix: fix auto scroll editor

This commit is contained in:
fantasticit 2022-05-05 11:18:40 +08:00
parent 549aff2cd6
commit b8a91a7d0c
2 changed files with 32 additions and 6 deletions

View File

@ -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<IScrollIntoViewOptions>({
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),
},
}),
];
},

View File

@ -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,