]> BookStack Code Mirror - bookstack/blobdiff - resources/js/wysiwyg/nodes/diagram.ts
ExportFormatter: Add book description and check for empty book and chapter descriptio...
[bookstack] / resources / js / wysiwyg / nodes / diagram.ts
index 1aff06400374ec45375d9da55371a8bc1cdc9194..bd37b200c80ba610f14bb42c65daffae2ff8e9f3 100644 (file)
@@ -3,16 +3,13 @@ import {
     DOMConversion,
     DOMConversionMap,
     DOMConversionOutput,
-    LexicalEditor, LexicalNode,
+    LexicalEditor,
     SerializedLexicalNode,
     Spread
 } from "lexical";
 import type {EditorConfig} from "lexical/LexicalEditor";
-import {el} from "../helpers";
 import {EditorDecoratorAdapter} from "../ui/framework/decorator";
-import * as DrawIO from '../../services/drawio';
-import {EditorUiContext} from "../ui/framework/core";
-import {HttpError} from "../../services/http";
+import {el} from "../utils/dom";
 
 export type SerializedDiagramNode = Spread<{
     id: string;
@@ -30,7 +27,9 @@ export class DiagramNode extends DecoratorNode<EditorDecoratorAdapter> {
     }
 
     static clone(node: DiagramNode): DiagramNode {
-        return new DiagramNode(node.__drawingId, node.__drawingUrl);
+        const newNode = new DiagramNode(node.__drawingId, node.__drawingUrl);
+        newNode.__id = node.__id;
+        return newNode;
     }
 
     constructor(drawingId: string, drawingUrl: string, key?: string) {
@@ -120,10 +119,13 @@ export class DiagramNode extends DecoratorNode<EditorDecoratorAdapter> {
                         const img = element.querySelector('img');
                         const drawingUrl = img?.getAttribute('src') || '';
                         const drawingId = element.getAttribute('drawio-diagram') || '';
+                        const node = $createDiagramNode(drawingId, drawingUrl);
 
-                        return {
-                            node: $createDiagramNode(drawingId, drawingUrl),
-                        };
+                        if (element.id) {
+                            node.setId(element.id);
+                        }
+
+                        return { node };
                     },
                     priority: 3,
                 };
@@ -151,69 +153,3 @@ export class DiagramNode extends DecoratorNode<EditorDecoratorAdapter> {
 export function $createDiagramNode(drawingId: string = '', drawingUrl: string = ''): DiagramNode {
     return new DiagramNode(drawingId, drawingUrl);
 }
-
-export function $isDiagramNode(node: LexicalNode | null | undefined) {
-    return node instanceof DiagramNode;
-}
-
-
-function handleUploadError(error: HttpError, context: EditorUiContext): void {
-    if (error.status === 413) {
-        window.$events.emit('error', context.options.translations.serverUploadLimitText || '');
-    } else {
-        window.$events.emit('error', context.options.translations.imageUploadErrorText || '');
-    }
-    console.error(error);
-}
-
-async function loadDiagramIdFromNode(editor: LexicalEditor, node: DiagramNode): Promise<string> {
-    const drawingId = await new Promise<string>((res, rej) => {
-        editor.getEditorState().read(() => {
-            const {id: drawingId} = node.getDrawingIdAndUrl();
-            res(drawingId);
-        });
-    });
-
-    return drawingId || '';
-}
-
-async function updateDrawingNodeFromData(context: EditorUiContext, node: DiagramNode, pngData: string, isNew: boolean): Promise<void> {
-    DrawIO.close();
-
-    if (isNew) {
-        const loadingImage: string = window.baseUrl('/loading.gif');
-        context.editor.update(() => {
-            node.setDrawingIdAndUrl('', loadingImage);
-        });
-    }
-
-    try {
-        const img = await DrawIO.upload(pngData, context.options.pageId);
-        context.editor.update(() => {
-            node.setDrawingIdAndUrl(String(img.id), img.url);
-        });
-    } catch (err) {
-        if (err instanceof HttpError) {
-            handleUploadError(err, context);
-        }
-
-        if (isNew) {
-            context.editor.update(() => {
-                node.remove();
-            });
-        }
-
-        throw new Error(`Failed to save image with error: ${err}`);
-    }
-}
-
-export function $openDrawingEditorForNode(context: EditorUiContext, node: DiagramNode): void {
-    let isNew = false;
-    DrawIO.show(context.options.drawioUrl, async () => {
-        const drawingId = await loadDiagramIdFromNode(context.editor, node);
-        isNew = !drawingId;
-        return isNew ? '' : DrawIO.load(drawingId);
-    }, async (pngData: string) => {
-        return updateDrawingNodeFromData(context, node, pngData, isNew);
-    });
-}
\ No newline at end of file