github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improved Image Deletion Logic, Image ID Issue in Modals and Performance Optimization in Editor (#2092)

Browse Source 
* added improved delete logic in modals

* added better ts support

* impoved complexity to O(1) from O(n) for large docs

* regression: removed ts nocheck
This commit is contained in:
M. Palanikannan 2023-09-07 12:22:02 +05:30 committed by GitHub
parent 85f797058d
commit b47c7d363f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 146 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/components/tiptap/plugins/delete-image.tsx
View File

@ -1,43 +1,51 @@
import { Plugin, PluginKey } from "@tiptap/pm/state"; import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
import { Node as ProseMirrorNode } from "@tiptap/pm/model"; import { Node as ProseMirrorNode } from "@tiptap/pm/model";
import fileService from "services/file.service"; import fileService from "services/file.service";
const deleteKey = new PluginKey("delete-image"); const deleteKey = new PluginKey("delete-image");
const IMAGE_NODE_TYPE = "image";
const TrackImageDeletionPlugin = () => interface ImageNode extends ProseMirrorNode {
attrs: {
src: string;
id: string;
};
}
const TrackImageDeletionPlugin = (): Plugin =>
new Plugin({ new Plugin({
key: deleteKey, key: deleteKey,
appendTransaction: (transactions, oldState, newState) => { appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
const newImageSources = new Set();
newState.doc.descendants((node) => {
if (node.type.name === IMAGE_NODE_TYPE) {
newImageSources.add(node.attrs.src);
}
});
transactions.forEach((transaction) => { transactions.forEach((transaction) => {
if (!transaction.docChanged) return; if (!transaction.docChanged) return;
const removedImages: ProseMirrorNode[] = []; const removedImages: ImageNode[] = [];
oldState.doc.descendants((oldNode, oldPos) => { oldState.doc.descendants((oldNode, oldPos) => {
if (oldNode.type.name !== "image") return; if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
if (oldPos < 0 || oldPos > newState.doc.content.size) return; if (oldPos < 0 || oldPos > newState.doc.content.size) return;
if (!newState.doc.resolve(oldPos).parent) return; if (!newState.doc.resolve(oldPos).parent) return;
const newNode = newState.doc.nodeAt(oldPos); const newNode = newState.doc.nodeAt(oldPos);
// Check if the node has been deleted or replaced // Check if the node has been deleted or replaced
if (!newNode || newNode.type.name !== "image") { if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
// Check if the node still exists elsewhere in the document if (!newImageSources.has(oldNode.attrs.src)) {
let nodeExists = false; removedImages.push(oldNode as ImageNode);
newState.doc.descendants((node) => {
if (node.attrs.id === oldNode.attrs.id) {
nodeExists = true;
}
});
if (!nodeExists) {
removedImages.push(oldNode as ProseMirrorNode);
} }
} }
}); });
removedImages.forEach((node) => { removedImages.forEach(async (node) => {
const src = node.attrs.src; const src = node.attrs.src;
onNodeDeleted(src); await onNodeDeleted(src);
}); });
}); });
@ -47,10 +55,14 @@ const TrackImageDeletionPlugin = () =>
export default TrackImageDeletionPlugin; export default TrackImageDeletionPlugin;
async function onNodeDeleted(src: string) { async function onNodeDeleted(src: string): Promise<void> {
try {
const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId); const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
if (resStatus === 204) { if (resStatus === 204) {
console.log("Image deleted successfully"); console.log("Image deleted successfully");
} }
} catch (error) {
console.error("Error deleting image: ", error);
}
} }

1
web/components/tiptap/plugins/upload-image.tsx
View File

@ -1,4 +1,3 @@
// @ts-nocheck
import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state"; import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view"; import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
import fileService from "services/file.service"; import fileService from "services/file.service";