mirror of https://github.com/fantasticit/think.git
Merge pull request #174 from fantasticit/fix/title
This commit is contained in:
commit
1b99a0876b
|
@ -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();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,17 +16,8 @@ exports.EMPTY_DOCUMNENT = {
|
||||||
content: JSON.stringify({
|
content: JSON.stringify({
|
||||||
"default": {
|
"default": {
|
||||||
type: 'doc',
|
type: 'doc',
|
||||||
content: [{ type: 'title', content: [{ type: 'text', text: '未命名文档' }] }]
|
content: [{ type: 'title', content: [{ type: 'text', text: '' }] }]
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
state: Buffer.from(new Uint8Array([
|
state: Buffer.from(new Uint8Array([]))
|
||||||
1, 14, 204, 224, 154, 225, 13, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3, 5, 116, 105, 116, 108, 101, 1, 0,
|
|
||||||
204, 224, 154, 225, 13, 0, 1, 0, 1, 135, 204, 224, 154, 225, 13, 0, 3, 9, 112, 97, 114, 97, 103, 114, 97, 112,
|
|
||||||
104, 40, 0, 204, 224, 154, 225, 13, 3, 6, 105, 110, 100, 101, 110, 116, 1, 125, 0, 40, 0, 204, 224, 154, 225, 13,
|
|
||||||
3, 9, 116, 101, 120, 116, 65, 108, 105, 103, 110, 1, 119, 4, 108, 101, 102, 116, 0, 4, 71, 204, 224, 154, 225, 13,
|
|
||||||
1, 6, 1, 0, 204, 224, 154, 225, 13, 10, 3, 132, 204, 224, 154, 225, 13, 13, 3, 230, 156, 170, 129, 204, 224, 154,
|
|
||||||
225, 13, 14, 6, 132, 204, 224, 154, 225, 13, 20, 6, 229, 145, 189, 229, 144, 141, 129, 204, 224, 154, 225, 13, 22,
|
|
||||||
5, 132, 204, 224, 154, 225, 13, 27, 6, 230, 150, 135, 230, 161, 163, 1, 204, 224, 154, 225, 13, 5, 1, 2, 6, 4, 11,
|
|
||||||
3, 15, 6, 23, 5,
|
|
||||||
]))
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -17,19 +17,8 @@ export const EMPTY_DOCUMNENT = {
|
||||||
content: JSON.stringify({
|
content: JSON.stringify({
|
||||||
default: {
|
default: {
|
||||||
type: 'doc',
|
type: 'doc',
|
||||||
content: [{ type: 'title', content: [{ type: 'text', text: '未命名文档' }] }],
|
content: [{ type: 'title', content: [{ type: 'text', text: '' }] }],
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
state: Buffer.from(
|
state: Buffer.from(new Uint8Array([])),
|
||||||
new Uint8Array([
|
|
||||||
1, 14, 204, 224, 154, 225, 13, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3, 5, 116, 105, 116, 108, 101, 1, 0,
|
|
||||||
204, 224, 154, 225, 13, 0, 1, 0, 1, 135, 204, 224, 154, 225, 13, 0, 3, 9, 112, 97, 114, 97, 103, 114, 97, 112,
|
|
||||||
104, 40, 0, 204, 224, 154, 225, 13, 3, 6, 105, 110, 100, 101, 110, 116, 1, 125, 0, 40, 0, 204, 224, 154, 225, 13,
|
|
||||||
3, 9, 116, 101, 120, 116, 65, 108, 105, 103, 110, 1, 119, 4, 108, 101, 102, 116, 0, 4, 71, 204, 224, 154, 225, 13,
|
|
||||||
1, 6, 1, 0, 204, 224, 154, 225, 13, 10, 3, 132, 204, 224, 154, 225, 13, 13, 3, 230, 156, 170, 129, 204, 224, 154,
|
|
||||||
225, 13, 14, 6, 132, 204, 224, 154, 225, 13, 20, 6, 229, 145, 189, 229, 144, 141, 129, 204, 224, 154, 225, 13, 22,
|
|
||||||
5, 132, 204, 224, 154, 225, 13, 27, 6, 230, 150, 135, 230, 161, 163, 1, 204, 224, 154, 225, 13, 5, 1, 2, 6, 4, 11,
|
|
||||||
3, 15, 6, 23, 5,
|
|
||||||
])
|
|
||||||
),
|
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue