Skip to content

Conversation

@Technophobe01
Copy link

Summary

Closes #423

This PR upgrades the embedded Excalidraw library from 0.17.x to 0.18.0, bringing the latest features and improvements while maintaining full backward compatibility with existing .excalidraw files.

Motivation

Excalidraw 0.18.0 includes significant improvements including new fonts, better rendering, and various bug fixes. However, the upgrade introduced breaking changes in the element data format that caused issues with files created in older versions.

Changes

Build System Migration (addresses CRA incompatibility from #423)

  • Migrated from react-scripts to Vite for faster builds and better ES module support
  • Updated TypeScript configuration for Vite compatibility (moduleResolution: "bundler")
  • Moved index.html to project root (Vite convention)
  • Replaced config-overrides.js with vite.config.ts
  • Set "type": "module" in package.json for ESM support

Excalidraw 0.18.0 Compatibility

  • Updated @excalidraw/excalidraw to 0.18.0
  • Added required CSS import (@excalidraw/excalidraw/index.css)
  • Set window.EXCALIDRAW_ASSET_PATH = "/" for proper font loading (self-hosted fonts)
  • Added font refresh callback to ensure text renders correctly after async font loading
  • Fonts are copied to build output and served via the existing SchemeHandlerFactory

Legacy File Support

Implemented preprocessing for files created with older Excalidraw versions to fix:

Issue Fix
Text elements missing lineHeight Calculate from font family using Excalidraw's font metadata
Text elements missing autoResize Default to true
Elements with boundElements: null Convert to empty array []
Elements missing frameId Add with value null
Arrow bindings using old format (focus/gap) Convert to new format (mode/fixedPoint)

Loading Strategy

  • Changed element loading to use Excalidraw's loadFromBlob API instead of direct updateScene calls
  • This ensures Excalidraw's internal format normalization handles any edge cases not covered by preprocessing

Other Changes

  • Added MIME type registration for .woff2 font files in SchemeHandlerFactory
  • Updated SVG font path patching regex for new Excalidraw 0.18.0 font paths

Checklist from #423

  • ESM modules support (migrated to Vite, set "type": "module")
  • TypeScript moduleResolution updated to "bundler"
  • Deprecated excalidraw-assets folder handling (now using fonts/ path)
  • Fonts self-hosting with EXCALIDRAW_ASSET_PATH
  • updateScene API changes handled

Testing

  • Verified on macOS (IntelliJ IDEA, PyCharm)
  • Verified on Windows (IntelliJ IDEA)
  • Tested with legacy files created in Excalidraw 0.15.x and 0.17.x
  • Tested with files from excalidraw.com (latest format)
  • All file types work correctly: .excalidraw, .excalidraw.svg, .excalidraw.png

Breaking Changes

None for end users. Existing files continue to work without modification.

- Migrate from react-scripts to Vite for faster builds
- Add preprocessLegacyElements() to fix rendering of old .excalidraw files
- Fix missing lineHeight, autoResize, frameId, and boundElements fields
- Update TypeScript and dependency configurations
- Update font path regex for 0.18.0 asset structure
- Use loadFromBlob API in update handler to let Excalidraw handle
  format normalization internally (fixes menu disappearing issue)
- Add arrow binding format conversion for legacy files
- Remove unused restoreElements import
- Clean up debug logging
- Disable debug mode
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Upgrade to Excalidraw 0.18.0

1 participant