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