chore: fix imports, ts errors and other things

This commit is contained in:
Palanikannan1437 2024-03-14 13:17:51 +05:30
parent 8b297b2bda
commit 543168a756

View File

@ -1,9 +1,13 @@
import { Extension } from "@tiptap/core"; import { Extension } from "@tiptap/core";
import { PluginKey, NodeSelection, Plugin } from "@tiptap/pm/state"; import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
// @ts-ignore // @ts-expect-error __serializeForClipboard's is not exported
import { __serializeForClipboard, EditorView } from "@tiptap/pm/view"; import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
import React from "react";
export interface DragHandleOptions {
dragHandleWidth: number;
setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
}
function createDragHandleElement(): HTMLElement { function createDragHandleElement(): HTMLElement {
const dragHandleElement = document.createElement("div"); const dragHandleElement = document.createElement("div");
@ -29,13 +33,8 @@ function createDragHandleElement(): HTMLElement {
return dragHandleElement; return dragHandleElement;
} }
export interface DragHandleOptions {
dragHandleWidth: number;
setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
}
function absoluteRect(node: Element) { function absoluteRect(node: Element) {
const data = node?.getBoundingClientRect(); const data = node.getBoundingClientRect();
return { return {
top: data.top, top: data.top,
@ -51,40 +50,18 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
(elem: Element) => (elem: Element) =>
elem.parentElement?.matches?.(".ProseMirror") || elem.parentElement?.matches?.(".ProseMirror") ||
elem.matches( elem.matches(
[ ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3", "table", "[data-type=horizontalRule]"].join(
"li", ", "
"p:not(:first-child)", )
"pre",
"blockquote",
"h1, h2, h3",
"[data-type=horizontalRule]",
".tableWrapper",
].join(", ")
) )
); );
} }
function nodePosAtDOM(node: Element, view: EditorView) { function nodePosAtDOM(node: Element, view: EditorView, options: DragHandleOptions) {
const boundingRect = node?.getBoundingClientRect(); const boundingRect = node.getBoundingClientRect();
if (node.nodeName === "IMG") {
return view.posAtCoords({
left: boundingRect.left + 1,
top: boundingRect.top + 1,
})?.pos;
}
if (node.nodeName === "PRE") {
return (
view.posAtCoords({
left: boundingRect.left + 1,
top: boundingRect.top + 1,
})?.pos! - 1
);
}
return view.posAtCoords({ return view.posAtCoords({
left: boundingRect.left + 1, left: boundingRect.left + 50 + options.dragHandleWidth,
top: boundingRect.top + 1, top: boundingRect.top + 1,
})?.inside; })?.inside;
} }
@ -96,14 +73,14 @@ function DragHandle(options: DragHandleOptions) {
if (!event.dataTransfer) return; if (!event.dataTransfer) return;
const node = nodeDOMAtCoords({ const node = nodeDOMAtCoords({
x: event.clientX + options.dragHandleWidth + 50, x: event.clientX + 50 + options.dragHandleWidth,
y: event.clientY, y: event.clientY,
}); });
if (!(node instanceof Element)) return; if (!(node instanceof Element)) return;
const nodePos = nodePosAtDOM(node, view); const nodePos = nodePosAtDOM(node, view, options);
if (nodePos === null || nodePos === undefined || nodePos < 0) return; if (nodePos == null || nodePos < 0) return;
view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos))); view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)));
@ -132,9 +109,8 @@ function DragHandle(options: DragHandleOptions) {
if (!(node instanceof Element)) return; if (!(node instanceof Element)) return;
const nodePos = nodePosAtDOM(node, view); const nodePos = nodePosAtDOM(node, view, options);
if (!nodePos) return;
if (nodePos === null || nodePos === undefined || nodePos < 0) return;
view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos))); view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)));
} }
@ -192,7 +168,7 @@ function DragHandle(options: DragHandleOptions) {
} }
const node = nodeDOMAtCoords({ const node = nodeDOMAtCoords({
x: event.clientX + options.dragHandleWidth, x: event.clientX + 50 + options.dragHandleWidth,
y: event.clientY, y: event.clientY,
}); });
@ -218,13 +194,13 @@ function DragHandle(options: DragHandleOptions) {
if (!dragHandleElement) return; if (!dragHandleElement) return;
dragHandleElement.style.left = `${rect.left - rect.width}px`; dragHandleElement.style.left = `${rect.left - rect.width}px`;
dragHandleElement.style.top = `${rect.top + 3}px`; dragHandleElement.style.top = `${rect.top}px`;
showDragHandle(); showDragHandle();
}, },
keydown: () => { keydown: () => {
hideDragHandle(); hideDragHandle();
}, },
wheel: () => { mousewheel: () => {
hideDragHandle(); hideDragHandle();
}, },
dragenter: (view) => { dragenter: (view) => {