diff --git a/package-lock.json b/package-lock.json index ac80dc79d..ba97400fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "trilium", - "version": "0.62.0-beta", + "version": "0.62.1-beta", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "trilium", - "version": "0.62.0-beta", + "version": "0.62.1-beta", "hasInstallScript": true, "license": "AGPL-3.0-only", "dependencies": { "@braintree/sanitize-url": "6.0.4", "@electron/remote": "2.0.12", - "@excalidraw/excalidraw": "0.16.1", + "@excalidraw/excalidraw": "0.17.0", "archiver": "6.0.1", "async-mutex": "0.4.0", "axios": "1.6.1", @@ -470,9 +470,9 @@ } }, "node_modules/@excalidraw/excalidraw": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.16.1.tgz", - "integrity": "sha512-4zirHk7dNx6SVq2jQmYOLliqAa1h3WPVqHM5qtJyhD769VsOqwlkopAcnZMb3G1PeIMm6cf2F31quS5MVqvoOQ==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz", + "integrity": "sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==", "peerDependencies": { "react": "^17.0.2 || ^18.2.0", "react-dom": "^17.0.2 || ^18.2.0" @@ -13929,9 +13929,9 @@ "dev": true }, "@excalidraw/excalidraw": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.16.1.tgz", - "integrity": "sha512-4zirHk7dNx6SVq2jQmYOLliqAa1h3WPVqHM5qtJyhD769VsOqwlkopAcnZMb3G1PeIMm6cf2F31quS5MVqvoOQ==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz", + "integrity": "sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==", "requires": {} }, "@gar/promisify": { diff --git a/package.json b/package.json index 1e924241f..63ae34aa5 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "dependencies": { "@braintree/sanitize-url": "6.0.4", "@electron/remote": "2.0.12", - "@excalidraw/excalidraw": "0.16.1", + "@excalidraw/excalidraw": "0.17.0", "archiver": "6.0.1", "async-mutex": "0.4.0", "axios": "1.6.1", diff --git a/src/public/app/widgets/type_widgets/canvas.js b/src/public/app/widgets/type_widgets/canvas.js index 0fd9be909..abe609dd5 100644 --- a/src/public/app/widgets/type_widgets/canvas.js +++ b/src/public/app/widgets/type_widgets/canvas.js @@ -3,6 +3,7 @@ import TypeWidget from "./type_widget.js"; import utils from '../../services/utils.js'; import linkService from '../../services/link.js'; import debounce from "../../services/debounce.js"; +import {Excalidraw} from "@excalidraw/excalidraw/types/packages/excalidraw/example/public/excalidraw.development.js"; const {sleep} = utils; @@ -115,7 +116,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget { this.currentSceneVersion = this.SCENE_VERSION_INITIAL; // will be overwritten - this.excalidrawRef; this.$render; this.$widget; this.reactHandlers; // used to control react state @@ -179,7 +179,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget { const blob = await note.getBlob(); // before we load content into excalidraw, make sure excalidraw has loaded - while (!this.excalidrawRef?.current) { + while (!this.excalidrawApi) { console.log("excalidrawRef not yet loaded, sleep 200ms..."); await sleep(200); } @@ -199,7 +199,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget { collaborators: [] }; - this.excalidrawRef.current.updateScene(sceneData); + this.excalidrawApi.updateScene(sceneData); } else if (blob.content) { // load saved content into excalidraw canvas @@ -246,8 +246,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget { fileArray.push(file); } - this.excalidrawRef.current.updateScene(sceneData); - this.excalidrawRef.current.addFiles(fileArray); + this.excalidrawApi.updateScene(sceneData); + this.excalidrawApi.addFiles(fileArray); } Promise.all( @@ -260,7 +260,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget { } const libraryItems = blobs.map(blob => blob.getJsonContentSafely()).filter(item => !!item); - this.excalidrawRef.current.updateLibrary({libraryItems, merge: false}); + this.excalidrawApi.updateLibrary({libraryItems, merge: false}); }); // set initial scene version @@ -274,14 +274,14 @@ export default class ExcalidrawTypeWidget extends TypeWidget { * this is automatically called after this.saveData(); */ async getData() { - const elements = this.excalidrawRef.current.getSceneElements(); - const appState = this.excalidrawRef.current.getAppState(); + const elements = this.excalidrawApi.getSceneElements(); + const appState = this.excalidrawApi.getAppState(); /** * A file is not deleted, even though removed from canvas. Therefore, we only keep * files that are referenced by an element. Maybe this will change with a new excalidraw version? */ - const files = this.excalidrawRef.current.getFiles(); + const files = this.excalidrawApi.getFiles(); // parallel svg export to combat bitrot and enable rendering image for note inclusion, preview, and share const svg = await window.ExcalidrawLib.exportToSvg({ @@ -320,7 +320,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget { // this.libraryChanged is unset in dataSaved() // there's no separate method to get library items, so have to abuse this one - const libraryItems = await this.excalidrawRef.current.updateLibrary({merge: true}); + const libraryItems = await this.excalidrawApi.updateLibrary({merge: true}); let position = 10; @@ -376,11 +376,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget { } createExcalidrawReactApp() { - const React = window.React; - const { Excalidraw } = window.ExcalidrawLib; - - const excalidrawRef = React.useRef(null); - this.excalidrawRef = excalidrawRef; const excalidrawWrapperRef = React.useRef(null); this.excalidrawWrapperRef = excalidrawWrapperRef; const [dimensions, setDimensions] = React.useState({ @@ -438,7 +433,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget { React.createElement(Excalidraw, { // this makes sure that 1) manual theme switch button is hidden 2) theme stays as it should after opening menu theme: this.themeStyle, - ref: excalidrawRef, + excalidrawAPI: api => { this.excalidrawApi = api; }, width: dimensions.width, height: dimensions.height, onPaste: (data, event) => { @@ -482,8 +477,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget { } getSceneVersion() { - if (this.excalidrawRef) { - const elements = this.excalidrawRef.current.getSceneElements(); + if (this.excalidrawApi) { + const elements = this.excalidrawApi.getSceneElements(); return window.ExcalidrawLib.getSceneVersion(elements); } else { return this.SCENE_VERSION_ERROR;