mirror of https://github.com/fantasticit/think.git
fix: fix auto scroll editor
This commit is contained in:
parent
549aff2cd6
commit
b8a91a7d0c
|
@ -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),
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue