tiptap: fix click task list

This commit is contained in:
fantasticit 2022-05-09 17:35:35 +08:00
parent ef5e45aec1
commit 29a461bf6c
4 changed files with 22 additions and 3 deletions

View File

@ -1,7 +1,7 @@
import { Extension } from '@tiptap/core'; import { Extension } from '@tiptap/core';
import { Plugin, PluginKey, NodeSelection, TextSelection, Selection, AllSelection } from 'prosemirror-state'; import { Plugin, PluginKey, NodeSelection, TextSelection, Selection, AllSelection } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view'; import { Decoration, DecorationSet } from 'prosemirror-view';
import { getCurrentNode, isInCodeBlock, isInCallout } from 'tiptap/prose-utils'; import { getCurrentNode, isInCodeBlock, isInCallout, getNodeAtPos, isTodoListNode } from 'tiptap/prose-utils';
import { EXTENSION_PRIORITY_HIGHEST } from 'tiptap/core/constants'; import { EXTENSION_PRIORITY_HIGHEST } from 'tiptap/core/constants';
export const selectionPluginKey = new PluginKey('selection'); export const selectionPluginKey = new PluginKey('selection');
@ -108,7 +108,11 @@ export const SelectionExtension = Extension.create({
key: new PluginKey('preventSelection'), key: new PluginKey('preventSelection'),
props: { props: {
// 禁止非可编辑用户选中 // 禁止非可编辑用户选中
handleClick(_, __, event) { handleClick(view, pos, event) {
if (isTodoListNode(getNodeAtPos(view.state, pos))) {
return false;
}
if (!isEditable) { if (!isEditable) {
event.preventDefault(); event.preventDefault();
return true; return true;

View File

@ -54,7 +54,7 @@
> span { > span {
position: absolute; position: absolute;
top: 6px; top: 3px;
left: 0; left: 0;
display: block; display: block;
width: 16px; width: 16px;

View File

@ -35,6 +35,10 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
const editor = useEditor( const editor = useEditor(
{ {
editable, editable,
editorProps: {
// @ts-ignore
taskItemClickable: true,
},
extensions: [ extensions: [
...CollaborationKit, ...CollaborationKit,
Collaboration.configure({ Collaboration.configure({

View File

@ -32,6 +32,17 @@ export function getCurrentNode(state: EditorState): Node {
return node; return node;
} }
export function getNodeAtPos(state: EditorState, pos: number): Node {
const $head = state.doc.resolve(pos);
let node = null;
for (let d = $head.depth; d > 0; d--) {
node = $head.node(d);
}
return node;
}
export function isInCustomNode(state: EditorState, nodeName: string): boolean { export function isInCustomNode(state: EditorState, nodeName: string): boolean {
if (!state.schema.nodes[nodeName]) return false; if (!state.schema.nodes[nodeName]) return false;