Upgrade to Excalidraw 0.18.0

[bric3]

Excalidraw 0.18.0 is a big update, with many interesting changes and quite a few breaking changes.
That make this difficult to bump. Maybe follow the example app: https://github.com/excalidraw/excalidraw/blob/master/examples/with-script-in-browser/components/ExampleApp.tsx

Need to check the build tool; it seems like this day one should use vite !?

.TODO

• React 19, maybe typescript 5 ?

• UMD module are replaced by ESM modules

  Make sure that your JavaScript environment supports ES modules. You may need to define "type": "module" in
  your package.json file or as part of the <script type="module" /> attribute.

• Typescript: deprecated "moduleResolution": "node" or "node10"

  Since node and node10 do not support package.json "exports" fields, having these values in your
  tsconfig.json will not work. Instead, use bundler, node16 or nodenext values.
  For more information, see Typescript's documentation.

• ESM strict resolution
  Due to ESM's strict resolution, if you're using Webpack or other bundler that expects import paths to be
  fully specified, you'll need to disable this feature explicitly.
  For example in Webpack, you should set resolve.fullySpecified to false.

  For this reason, CRA will no longer work unless you eject or use a workaround such as craco.

• Deprecated excalidraw-assets and excalidraw-assets-dev folders (feat: introduce font picker excalidraw/excalidraw#8012, chore: release @excalidraw/excalidraw@18.0.0 🎉 excalidraw/excalidraw#9127), no longer used

• Fonts

  All fonts are automatically loaded from the esm.run CDN. For self-hosting purposes, you'll have to copy the content of the folder node_modules/@excalidraw/excalidraw/dist/prod/fonts to the path where your assets should be served from (i.e. public/ directory in your project). In that case, you should also set window.EXCALIDRAW_ASSET_PATH to the very same path, i.e. / in case it's in the root:

  <script>window.EXCALIDRAW_ASSET_PATH = "/";</script>

  or, if you serve your assets from the root of your CDN, you would do:

  <script>
    window.EXCALIDRAW_ASSET_PATH = "https://cdn.domain.com/subpath/";
  </script>

  or, if you prefer the path to be dynamically set based on the location.origin, you could do the following:

  // Next.js
  <Script id="load-env-variables" strategy="beforeInteractive">
  {`window["EXCALIDRAW_ASSET_PATH"] = location.origin;`} // or use just "/"!
  </Script>
  

• updateScene changed due to the added Store component. Specifically, optional sceneData parameter
  commitToHistory: boolean was replaced with optional captureUpdate: CaptureUpdateActionType parameter.

  The plugin is not using this attribute.

• Extended window.EXCALIDRAW_ASSET_PATH to accept array of paths string[] as a value, allowing to specify
  multiple base URL fallbacks. feat: multiple fonts fallbacks excalidraw/excalidraw#8286

• Cleanup svg export and move payload to <metadata> feat: cleanup svg export and move payload to <metadata> excalidraw/excalidraw#8975

• props.initialData can now be a function that returns ExcalidrawInitialDataState or
  Promise<ExcalidrawInitialDataState> allow props.initialData to be function excalidraw/excalidraw#8107

Interesting stuff

• Custom text metrics provider feat: custom text metrics provider excalidraw/excalidraw#9121
• Paste as mermaid if applicable feat: paste as mermaid if applicable excalidraw/excalidraw#8116
• Improve mermaid detection on paste feat: improve mermaid detection on paste excalidraw/excalidraw#8287
• Upgrade mermaid-to-excalidraw to v1.1.0 feat: upgrade mermaid-to-excalidraw to v1.1.0 excalidraw/excalidraw#8226

[linux-china]

any news? thanks :)

[bric3]

I haven't touched this codebase in a few months, they were quite a few breaking changes in 0.18.0, that the upgrade non straightforward.

[Technophobe01]

@bric3 Hey, I am going to work on some of the other issues when I get back from travel. I have self-interest at heart I am currently using xcaliddraw a lot. Chuckle. Stay safe and well.

[bric3]

@Technophobe01 Cool, thank you !