mirror of https://github.com/fantasticit/think.git
tiptap: scroll to end and focus in empty title in edit mode
parent
cc9a74de3b
commit
56738ea330
|
@ -1,4 +1,5 @@
|
|||
import { Editor, Extension } from '@tiptap/core';
|
||||
import { throttle } from 'helpers/throttle';
|
||||
import { Plugin, PluginKey, Transaction } from 'prosemirror-state';
|
||||
|
||||
export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin');
|
||||
|
@ -8,7 +9,7 @@ type TransactionWithScroll = Transaction & { scrolledIntoView: boolean };
|
|||
interface IScrollIntoViewOptions {
|
||||
/**
|
||||
*
|
||||
* 将 markdown 转换为 html
|
||||
* 滚动编辑器
|
||||
*/
|
||||
onScroll: (editor: Editor) => void;
|
||||
}
|
||||
|
@ -24,6 +25,9 @@ export const ScrollIntoView = Extension.create<IScrollIntoViewOptions>({
|
|||
|
||||
addProseMirrorPlugins() {
|
||||
const { editor } = this;
|
||||
|
||||
const onScroll = this.options.onScroll ? throttle(this.options.onScroll, 200) : (editor) => {};
|
||||
|
||||
return [
|
||||
new Plugin({
|
||||
key: scrollIntoViewPluginKey,
|
||||
|
@ -38,7 +42,7 @@ export const ScrollIntoView = Extension.create<IScrollIntoViewOptions>({
|
|||
tr.getMeta('scrollIntoView') !== false &&
|
||||
tr.getMeta('addToHistory') !== false
|
||||
) {
|
||||
this.options.onScroll(editor);
|
||||
onScroll(editor);
|
||||
return newState.tr.scrollIntoView();
|
||||
}
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@ import { mergeAttributes, Node } from '@tiptap/core';
|
|||
import { ReactNodeViewRenderer } from '@tiptap/react';
|
||||
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
|
||||
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';
|
||||
|
||||
|
@ -21,11 +21,15 @@ declare module '@tiptap/core' {
|
|||
|
||||
export const TitleExtensionName = 'title';
|
||||
|
||||
const TitlePluginKey = new PluginKey(TitleExtensionName);
|
||||
|
||||
export const Title = Node.create<TitleOptions>({
|
||||
name: TitleExtensionName,
|
||||
content: 'inline*',
|
||||
group: 'block',
|
||||
selectable: true,
|
||||
defining: true,
|
||||
isolating: true,
|
||||
showGapCursor: true,
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
|
@ -52,8 +56,19 @@ export const Title = Node.create<TitleOptions>({
|
|||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
|
||||
renderHTML({ HTMLAttributes, node }) {
|
||||
const { cover } = node.attrs;
|
||||
return [
|
||||
'h1',
|
||||
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, nodeAttrsToDataset(node)),
|
||||
[
|
||||
'img',
|
||||
{
|
||||
src: cover,
|
||||
},
|
||||
],
|
||||
['div', 0],
|
||||
];
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
|
@ -62,38 +77,11 @@ export const Title = Node.create<TitleOptions>({
|
|||
|
||||
addProseMirrorPlugins() {
|
||||
const { editor } = this;
|
||||
let shouldSelectTitleNode = true;
|
||||
|
||||
return [
|
||||
new Plugin({
|
||||
key: new PluginKey(this.name),
|
||||
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({
|
||||
key: TitlePluginKey,
|
||||
props: {
|
||||
decorations: (state) => {
|
||||
const { doc } = state;
|
||||
|
@ -111,6 +99,73 @@ export const Title = Node.create<TitleOptions>({
|
|||
|
||||
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;
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
|
|
@ -2,6 +2,7 @@ import { EditorOptions } from '@tiptap/core';
|
|||
import { Editor as BuiltInEditor } from '@tiptap/react';
|
||||
import { EditorContent, NodeViewContent, NodeViewWrapper } from '@tiptap/react';
|
||||
import { EventEmitter } from 'helpers/event-emitter';
|
||||
import { throttle } from 'helpers/throttle';
|
||||
import { DependencyList, useEffect, useState } from 'react';
|
||||
|
||||
function useForceUpdate() {
|
||||
|
@ -36,6 +37,15 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
|
|||
|
||||
setEditor(instance);
|
||||
|
||||
if (options.editable) {
|
||||
instance.on(
|
||||
'update',
|
||||
throttle(() => {
|
||||
instance.chain().focus().scrollIntoView().run();
|
||||
}, 200)
|
||||
);
|
||||
}
|
||||
|
||||
instance.on('transaction', () => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
|
|
|
@ -50,6 +50,7 @@
|
|||
flex: 1;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.contentWrap {
|
||||
width: 100%;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { Toast } from '@douyinfe/semi-ui';
|
||||
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||
// 自定义节点扩展
|
||||
import { Attachment } from 'tiptap/core/extensions/attachment';
|
||||
import { BackgroundColor } from 'tiptap/core/extensions/background-color';
|
||||
|
|
|
@ -61,6 +61,7 @@ export function isInCodeBlock(state: EditorState): boolean {
|
|||
}
|
||||
|
||||
export function isInTitle(state: EditorState): boolean {
|
||||
if (state?.selection?.$head?.pos === 0) return true;
|
||||
return isInCustomNode(state, 'title');
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue