tiptap: scroll to end and focus in empty title in edit mode

This commit is contained in:
fantasticit 2022-08-18 14:04:19 +08:00
parent cc9a74de3b
commit 56738ea330
6 changed files with 107 additions and 35 deletions

View File

@ -1,4 +1,5 @@
import { Editor, Extension } from '@tiptap/core'; import { Editor, Extension } from '@tiptap/core';
import { throttle } from 'helpers/throttle';
import { Plugin, PluginKey, Transaction } from 'prosemirror-state'; import { Plugin, PluginKey, Transaction } from 'prosemirror-state';
export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin'); export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin');
@ -8,7 +9,7 @@ type TransactionWithScroll = Transaction & { scrolledIntoView: boolean };
interface IScrollIntoViewOptions { interface IScrollIntoViewOptions {
/** /**
* *
* markdown html *
*/ */
onScroll: (editor: Editor) => void; onScroll: (editor: Editor) => void;
} }
@ -24,6 +25,9 @@ export const ScrollIntoView = Extension.create<IScrollIntoViewOptions>({
addProseMirrorPlugins() { addProseMirrorPlugins() {
const { editor } = this; const { editor } = this;
const onScroll = this.options.onScroll ? throttle(this.options.onScroll, 200) : (editor) => {};
return [ return [
new Plugin({ new Plugin({
key: scrollIntoViewPluginKey, key: scrollIntoViewPluginKey,
@ -38,7 +42,7 @@ export const ScrollIntoView = Extension.create<IScrollIntoViewOptions>({
tr.getMeta('scrollIntoView') !== false && tr.getMeta('scrollIntoView') !== false &&
tr.getMeta('addToHistory') !== false tr.getMeta('addToHistory') !== false
) { ) {
this.options.onScroll(editor); onScroll(editor);
return newState.tr.scrollIntoView(); return newState.tr.scrollIntoView();
} }
}, },

View File

@ -2,7 +2,7 @@ import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react'; import { ReactNodeViewRenderer } from '@tiptap/react';
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'; import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view'; import { Decoration, DecorationSet } from 'prosemirror-view';
import { getDatasetAttribute, isInTitle } from 'tiptap/prose-utils'; import { getDatasetAttribute, isInTitle, nodeAttrsToDataset } from 'tiptap/prose-utils';
import { TitleWrapper } from '../wrappers/title'; import { TitleWrapper } from '../wrappers/title';
@ -21,11 +21,15 @@ declare module '@tiptap/core' {
export const TitleExtensionName = 'title'; export const TitleExtensionName = 'title';
const TitlePluginKey = new PluginKey(TitleExtensionName);
export const Title = Node.create<TitleOptions>({ export const Title = Node.create<TitleOptions>({
name: TitleExtensionName, name: TitleExtensionName,
content: 'inline*', content: 'inline*',
group: 'block', group: 'block',
selectable: true, defining: true,
isolating: true,
showGapCursor: true,
addOptions() { addOptions() {
return { return {
@ -52,8 +56,19 @@ export const Title = Node.create<TitleOptions>({
]; ];
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes, node }) {
return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]; const { cover } = node.attrs;
return [
'h1',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, nodeAttrsToDataset(node)),
[
'img',
{
src: cover,
},
],
['div', 0],
];
}, },
addNodeView() { addNodeView() {
@ -62,38 +77,11 @@ export const Title = Node.create<TitleOptions>({
addProseMirrorPlugins() { addProseMirrorPlugins() {
const { editor } = this; const { editor } = this;
let shouldSelectTitleNode = true;
return [ return [
new Plugin({ new Plugin({
key: new PluginKey(this.name), key: TitlePluginKey,
props: {
handleKeyDown(view, evt) {
const { state, dispatch } = view;
if (isInTitle(view.state) && evt.code === 'Enter') {
evt.preventDefault();
const paragraph = state.schema.nodes.paragraph;
if (!paragraph) {
return;
}
const $head = state.selection.$head;
const titleNode = $head.node($head.depth);
const endPos = ((titleNode.firstChild && titleNode.firstChild.nodeSize) || 0) + 1;
dispatch(state.tr.insert(endPos, paragraph.create()));
const newState = view.state;
const next = new TextSelection(newState.doc.resolve(endPos + 2));
dispatch(newState.tr.setSelection(next));
return true;
}
},
},
}),
new Plugin({
props: { props: {
decorations: (state) => { decorations: (state) => {
const { doc } = state; const { doc } = state;
@ -111,6 +99,73 @@ export const Title = Node.create<TitleOptions>({
return DecorationSet.create(doc, decorations); return DecorationSet.create(doc, decorations);
}, },
handleClick() {
shouldSelectTitleNode = false;
return;
},
handleDOMEvents: {
click() {
shouldSelectTitleNode = false;
return;
},
mousedown() {
shouldSelectTitleNode = false;
return;
},
pointerdown() {
shouldSelectTitleNode = false;
return;
},
touchstart() {
shouldSelectTitleNode = false;
return;
},
},
handleKeyDown(view, evt) {
const { state, dispatch } = view;
shouldSelectTitleNode = false;
if (isInTitle(view.state) && evt.code === 'Enter') {
evt.preventDefault();
const paragraph = state.schema.nodes.paragraph;
if (!paragraph) {
return true;
}
const $head = state.selection.$head;
const titleNode = $head.node($head.depth);
const endPos = ((titleNode.firstChild && titleNode.firstChild.nodeSize) || 0) + 1;
dispatch(state.tr.insert(endPos, paragraph.create()));
const newState = view.state;
const next = new TextSelection(newState.doc.resolve(endPos + 2));
dispatch(newState.tr.setSelection(next));
return true;
}
},
},
appendTransaction: (transactions, oldState, newState) => {
if (!editor.isEditable) return;
if (!shouldSelectTitleNode) return;
const tr = newState.tr;
const firstNode = newState?.doc?.content?.content?.[0];
if (firstNode && firstNode.type.name === this.name && firstNode.nodeSize === 2) {
const selection = new TextSelection(newState.tr.doc.resolve(firstNode?.attrs?.cover ? 1 : 0));
tr.setSelection(selection).scrollIntoView();
tr.setMeta('addToHistory', false);
return tr;
}
return;
}, },
}), }),
]; ];

View File

@ -2,6 +2,7 @@ import { EditorOptions } from '@tiptap/core';
import { Editor as BuiltInEditor } from '@tiptap/react'; import { Editor as BuiltInEditor } from '@tiptap/react';
import { EditorContent, NodeViewContent, NodeViewWrapper } from '@tiptap/react'; import { EditorContent, NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import { EventEmitter } from 'helpers/event-emitter'; import { EventEmitter } from 'helpers/event-emitter';
import { throttle } from 'helpers/throttle';
import { DependencyList, useEffect, useState } from 'react'; import { DependencyList, useEffect, useState } from 'react';
function useForceUpdate() { function useForceUpdate() {
@ -36,6 +37,15 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
setEditor(instance); setEditor(instance);
if (options.editable) {
instance.on(
'update',
throttle(() => {
instance.chain().focus().scrollIntoView().run();
}, 200)
);
}
instance.on('transaction', () => { instance.on('transaction', () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {

View File

@ -50,6 +50,7 @@
flex: 1; flex: 1;
justify-content: center; justify-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
scroll-behavior: smooth;
.contentWrap { .contentWrap {
width: 100%; width: 100%;

View File

@ -1,4 +1,5 @@
import { Toast } from '@douyinfe/semi-ui'; import { Toast } from '@douyinfe/semi-ui';
import scrollIntoView from 'scroll-into-view-if-needed';
// 自定义节点扩展 // 自定义节点扩展
import { Attachment } from 'tiptap/core/extensions/attachment'; import { Attachment } from 'tiptap/core/extensions/attachment';
import { BackgroundColor } from 'tiptap/core/extensions/background-color'; import { BackgroundColor } from 'tiptap/core/extensions/background-color';

View File

@ -61,6 +61,7 @@ export function isInCodeBlock(state: EditorState): boolean {
} }
export function isInTitle(state: EditorState): boolean { export function isInTitle(state: EditorState): boolean {
if (state?.selection?.$head?.pos === 0) return true;
return isInCustomNode(state, 'title'); return isInCustomNode(state, 'title');
} }