gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #174 from fantasticit/fix/title

This commit is contained in:
fantasticit 2022-08-18 14:06:24 +08:00 committed by GitHub
parent e17d408f2f 56738ea330
commit 1b99a0876b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 111 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/client/src/tiptap/core/extensions/scroll-into-view.ts
View File

@ -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();
}
},

121
packages/client/src/tiptap/core/extensions/title.ts
View File

@ -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;
},
}),
];

10
packages/client/src/tiptap/core/index.tsx
View File

@ -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(() => {

1
packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
View File

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

1
packages/client/src/tiptap/editor/collaboration/kit.ts
View File

@ -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';

1
packages/client/src/tiptap/prose-utils/node.ts
View File

@ -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');
}

13
packages/constants/lib/index.js
View File

@ -16,17 +16,8 @@ exports.EMPTY_DOCUMNENT = {
content: JSON.stringify({
"default": {
type: 'doc',
content: [{ type: 'title', content: [{ type: 'text', text: '未命名文档' }] }]
content: [{ type: 'title', content: [{ type: 'text', text: '' }] }]
}
}),
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,
]))
state: Buffer.from(new Uint8Array([]))
};

15
packages/constants/src/index.ts
View File

@ -17,19 +17,8 @@ export const EMPTY_DOCUMNENT = {
content: JSON.stringify({
default: {
type: 'doc',
content: [{ type: 'title', content: [{ type: 'text', text: '未命名文档' }] }],
content: [{ type: 'title', content: [{ type: 'text', text: '' }] }],
},
}),
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,
])
),
state: Buffer.from(new Uint8Array([])),
};