fix(canvas): links not working on desktop (fixes #6606)

This commit is contained in:
Elian Doran 2025-08-12 21:31:04 +03:00
parent 013e7a6aa4
commit f0d30c4e34
No known key found for this signature in database

View File

@ -2,6 +2,8 @@ import "@excalidraw/excalidraw/index.css";
import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw"; import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types"; import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types"; import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
import { useCallback } from "preact/hooks";
import linkService from "../../services/link.js";
export interface CanvasContent { export interface CanvasContent {
elements: ExcalidrawElement[]; elements: ExcalidrawElement[];
@ -32,17 +34,13 @@ export default class Canvas {
} }
createCanvasElement() { createCanvasElement() {
return ( return <CanvasElement
<div className="excalidraw-wrapper"> {...this.opts}
<Excalidraw excalidrawAPI={api => {
{...this.opts} this.excalidrawApi = api;
excalidrawAPI={api => { this.initializedPromise.resolve();
this.excalidrawApi = api; }}
this.initializedPromise.resolve(); />
}}
/>
</div>
);
} }
/** /**
@ -173,3 +171,27 @@ export default class Canvas {
} }
} }
function CanvasElement(opts: ExcalidrawProps) {
return (
<div className="excalidraw-wrapper">
<Excalidraw
{...opts}
onLinkOpen={useCallback((element: NonDeletedExcalidrawElement, event: CustomEvent) => {
let link = element.link;
if (!link) {
return false;
}
if (link.startsWith("root/")) {
link = "#" + link;
}
const { nativeEvent } = event.detail;
event.preventDefault();
return linkService.goToLinkExt(nativeEvent, link, null);
}, [])}
/>
</div>
);
}