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 { Plugin, PluginKey, Transaction } from 'prosemirror-state';
|
||||||
import { debounce } from 'helpers/debounce';
|
|
||||||
|
|
||||||
export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin');
|
export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin');
|
||||||
|
|
||||||
type TransactionWithScroll = Transaction & { scrolledIntoView: boolean };
|
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',
|
name: 'scrollIntoView',
|
||||||
|
|
||||||
|
addOptions() {
|
||||||
|
return {
|
||||||
|
onScroll: () => {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
addProseMirrorPlugins() {
|
addProseMirrorPlugins() {
|
||||||
const { editor } = this;
|
const { editor } = this;
|
||||||
return [
|
return [
|
||||||
new Plugin({
|
new Plugin({
|
||||||
key: scrollIntoViewPluginKey,
|
key: scrollIntoViewPluginKey,
|
||||||
appendTransaction: debounce((transactions, oldState, newState) => {
|
appendTransaction: (transactions, oldState, newState) => {
|
||||||
if (!transactions.length || !editor.isEditable) {
|
if (!transactions.length || !editor.isEditable) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -24,9 +38,10 @@ export const ScrollIntoView = Extension.create({
|
||||||
tr.getMeta('scrollIntoView') !== false &&
|
tr.getMeta('scrollIntoView') !== false &&
|
||||||
tr.getMeta('addToHistory') !== false
|
tr.getMeta('addToHistory') !== false
|
||||||
) {
|
) {
|
||||||
|
this.options.onScroll(editor);
|
||||||
return newState.tr.scrollIntoView();
|
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 { markdownToProsemirror } from 'tiptap/markdown/markdown-to-prosemirror';
|
||||||
import { markdownToHTML } from 'tiptap/markdown/markdown-to-prosemirror/markdown-to-html';
|
import { markdownToHTML } from 'tiptap/markdown/markdown-to-prosemirror/markdown-to-html';
|
||||||
import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown';
|
import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown';
|
||||||
|
import { debounce } from 'helpers/debounce';
|
||||||
|
|
||||||
const DocumentWithTitle = Document.extend({
|
const DocumentWithTitle = Document.extend({
|
||||||
content: 'title block+',
|
content: 'title block+',
|
||||||
|
@ -107,7 +108,17 @@ export const CollaborationKit = [
|
||||||
Loading,
|
Loading,
|
||||||
OrderedList,
|
OrderedList,
|
||||||
SelectionExtension,
|
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,
|
Strike,
|
||||||
Subscript,
|
Subscript,
|
||||||
Superscript,
|
Superscript,
|
||||||
|
|
Loading…
Reference in New Issue