onLinkOpen
prop which will be triggered when clicked on element hyperlink if present #4694.Support updating library using updateScene
API #4546.
Introduced primary colors to the app. The colors can be overriden. Check readme on how to do so #4387.
exportToBlob
now automatically sets appState.exportBackground
to true
if exporting to image/jpeg
MIME type (to ensure that alpha channel is not compressed to black color) #4342.
#### BREAKING CHANGE
Remove getElementMap
util #4306.
Changes to exportToCanvas
util function #4321:
maxWidthOrHeight?: number
attribute.scale
returned from getDimensions()
is now optional (default to 1
).Image support added for host PR
General notes:
getFiles()
to get current BinaryFiles
(Record<FileId, BinaryFileData>
). It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements.Excalidraw app props:
generateIdForFile(file: File)
optional prop so you can generate your own ids for added files.onChange(elements, appState, files)
prop callback is now passed BinaryFiles
as third argument.onPaste(data, event)
data prop should contain data.files
(BinaryFiles
) if the elements pasted are referencing new files.initialData
object now supports additional files
(BinaryFiles
) attribute.Other notes:
.excalidraw
files may now contain top-level files
key in format of Record<FileId, BinaryFileData>
when exporting any (image) elements.Changes were made to various export utilities exported from the package so that they take files
, you can refer to the docs for the same.
Export isLinearElement
and getNonDeletedElements
#4072.
Support renderTopRightUI
in mobile UI #4065.
Export THEME
constant from the package so host can use this when passing the theme #4055.
#### BREAKING CHANGE
The Appearance
type is now removed and renamed to Theme
so Theme
type needs to be used.
unmounted
state on the component once component mounts to fix the mounting/unmounting repeatedly when used with useEffect
#4682.mousewheel-drag
and space-drag
now prevents the browser from scrolling the container/page #4489.Release preview package @excalidraw/excalidraw-preview when triggered via comment
@excalibot trigger release
Added an example to test and develop the package locally using yarn start
#4488
Remove file-loader
so font assets are not duplicated by webpack and use webpack asset modules for font generation #4380.
We're now compiling to es2017
target. Notably, async/await
is not compiled down to generators. #4341.
This section lists the updates made to the excalidraw library and will not affect the integration.
Show group/group and link action in mobile #4795
Support background fill for freedraw shapes #4610
Keep selected tool on canvas reset #4728
Make whole element clickable in view mode when it has hyperlink #4735
Allow any precision when zooming #4730
Throttle pointermove
events per framerate #4727
Support hyperlinks 🔥 #4620
Added penMode for palm rejection #4657
Support unbinding bound text #4686
Sync local storage state across tabs when out of sync #4545
Support contextMenuLabel to be of function type to support dynmaic labels #4654
Support decreasing/increasing fontSize
via keyboard #4553
Link to new LP for excalidraw plus #4549
Update stroke color of bounded text along with container #4541
Hints and shortcuts help around deep selection #4502
Support updating text properties by clicking on container #4499
Bind text to shapes when pressing enter and support sticky notes 🎉 #4343
Change boundElementIds
→ boundElements
#4404
Support selecting multiple points when editing line #4373
Horizontally center toolbar menu commit link
Add support for rounded corners in diamond #4369
Allow zooming up to 3000% #4358
Stop discarding precision when rendering #4357
Support Image binding #4347
Add element.updated
#4070
Compress shareLink data when uploading to json server #4225
Supply version
param when installing libraries #4305
Log FS abortError to console #4279
Add validation for website and remove validation for library item name #4269
Allow publishing libraries from UI #4115
Create confirm dialog to use instead of window.confirm #4256
Allow letters in IDs for storing files in backend #4224
Remove support for V1 unencrypted backend #4189
Use separate backend for local storage #4187
Add hint around canvas panning #4159
Stop using production services for development #4113
Add triangle arrowhead #4024
Add rewrite to webex landing page #4102
Switch collab server #4092
Use dialog component for clear canvas instead of window confirm #4075
Rename --color-primary-chubb to --color-primary-contrast-offset and fallback to primary color if not present #4803
Add commits directly pushed to master in changelog #4798
Don't bump element version when adding files data #4794
Mobile link click #4742
ContextMenu timer & pointers not correctly reset on iOS #4765
Use absolute coords when rendering link popover #4753
Changing font size when text is not selected or edited #4751
Disable contextmenu on non-secondary pen
events or touch
#4675
Mobile context menu won't show on long press #4741
Do not open links twice #4738
Make link icon clickable in mobile #4736
Apple Pen missing strokes #4705
Freedraw slow movement jittery lines #4726
Disable three finger pinch zoom in penMode #4725
Remove click listener for opening popup #4700
Link popup position not accounting for offsets #4695
PenMode darkmode style #4692
Typing _+
in wysiwyg not working #4681
Keyboard-zooming in wysiwyg should zoom canvas #4676
SceneCoordsToViewportCoords, jumping text when there is an offset #4413 (#4630)
Right-click object menu displays partially off-screen #4572 (#4631)
Support collaboration in bound text #4573
Cmd/ctrl native browser behavior blocked in inputs #4589
Use cached width when calculating min width during resize #4585
Support collaboration in bounded text #4580
Port for collab server and update docs #4569
Don't mutate the bounded text if not updated when submitted #4543
Prevent canvas drag while editing text #4552
Support shift+P for freedraw #4550
Prefer spreadsheet data over image #4533
Show text properties button states correctly for bounded text #4542
Rotate bounded text when container is rotated before typing #4535
Undo should work when selecting bounded textr #4537
Reduce padding to 5px for bounded text #4530
Bound text doesn't inherit container #4521
Check if process is defined before using so it works in browser #4497
Pending review fixes for sticky notes #4493
Pasted elements except binded text once paste action is complete #4472
Don't select binded text when ungrouping #4470
Set height correctly when text properties updated while editing in container until first submit #4469
Align and distribute binded text in container and cleanup #4468
Move binded text when moving container using keyboard #4466
Support dragging binded text in container selected in a group #4462
Vertically align single line when deleting text in bounded container #4460
Update height correctly when updating text properties in binded text #4459
Align library item previews to center #4447
Vertically center align text when text deleted #4457
Vertically center the first line as user starts typing in container #4454
Switch cursor to center of container when adding text when dimensions are too small #4452
Vertically center align the bounded text correctly when zoomed #4444
Support updating stroke color for text by typing in color picker input #4415
Bound text not atomic with container when changing z-index #4414
Update viewport coords correctly when editing text #4416
Use word-break break-word only and update text editor height only when binded to container #4410
Husky not able to execute pre-commit on windows #4370
Make firebase config parsing not fail on undefined env #4381
Adding to library via contextmenu when no image is selected #4356
Export scale quality regression #4316
Remove 100%
height from tooltip container to fix layout issues #3980
Inline ENV variables when building excalidraw package #4311
SVG export in dark mode with embedded bitmap image #4285
New FS API not working on Linux #4280
Url -> URL for consistency #4277
Prevent adding images to library via contextMenu #4264
Account for libraries v2 when prompting #4263
Skia rendering issues #4200
Ellipse roughness when 0
#4194
Proper string for invalid SVG #4191
Images not initialized correctly #4157
Image-related fixes #4147
Rewrite collab element reconciliation to fix z-index issues #4076
Redirect excalidraw.com/about to for-webex.excalidraw.com #4104
Redirect to webex LP instead of rewrite to fix SW #4103
Clear image/shape cache of affected elements when adding files #4089
Clear LibraryUnit
DOM on unmount #4084
Pasting images on firefox #4085
Rename release command to 'release package' #4783
Deploy excalidraw package example #4762
Allow package.json changes when autoreleasing next #4068
Don't show save file to disk button in export dialog when saveFileToDisk
passed as false
in UIOptions.canvasActions.export
#4073.
onPaste
prop should return false to prevent the native excalidraw paste action #3974.
#### BREAKING CHANGE
onPaste
returned true, but now it should return false to prevent the paste action. This was done to make it semantically more correct and intuitive.This section lists the updates made to the excalidraw library and will not affect the integration.
Improve freedraw shape #3984
Make color ARIA labels better #3871
Add origin trial tokens #3853
Re-order zoom buttons #3837
Add undo/redo buttons & tweak footer #3832
Resave to png/svg with metadata if you loaded your scene from a png/svg file #3645
Abstract and fix legacy fs #4032
Context menu positioning #4025
Added alert for bad encryption key #3998
OnPaste should return false to prevent paste action #3974
Help-icon now visible on Safari #3939
Permanent zoom mode #3931
Undo/redo buttons gap in Safari #3836
Prevent gradual canvas misalignment #3833
Color picker shortcuts not working when elements selected #3817
restore(data, localAppState, localElements)
and restoreElements(elements, localElements)
now take localElements
argument which will be used to ensure existing elements' versions are used and incremented. This fixes an issue where importing the same file would resolve to elements with older versions, potentially causing issues when reconciling #3797.#### BREAKING CHANGE
localElements
argument is mandatory (can be null
/undefined
) if using TypeScript.
Support appState.exportEmbedScene
attribute in exportToSvg
which allows to embed the scene data #3777.
#### BREAKING CHANGE
metadata
is now removed as metadata
was only used to embed scene data which is now supported with the appState.exportEmbedScene
attribute.exportToSvg
now resolves to a promise which resolves to svg
of the exported drawing.
Expose loadLibraryFromBlob
, loadFromBlob
, and getFreeDrawSvgPath
#3764.
Expose FONT_FAMILY
so that consumer can use when passing initialData.appState.currentItemFontFamily
#3710.
Added prop autoFocus
to focus the excalidraw component on page load when enabled, defaults to false #3691.
Note: Earlier Excalidraw component was focussed by default on page load, you need to enable autoFocus
prop to retain the same behaviour.
UIOptions.canvasActions.export.renderCustomUI
to support Custom UI rendering inside export dialog #3666.Added prop UIOptions.canvasActions.saveAsImage
to show/hide the Save as image button in the canvas actions. Defauls to true
hence the Save as Image button is rendered #3662.
Export dialog can be customised with UiOptions.canvasActions.export
#3658.
Also, UIOptions
is now memoized to avoid unnecessary rerenders.
#### BREAKING CHANGE
UIOptions.canvasActions.saveAsScene
is now renamed to UiOptions.canvasActions.export.saveFileToDisk
. Defaults to true
hence the save file to disk button is rendered inside the export dialog.exportToBackend
is now renamed to UIOptions.canvasActions.export.exportToBackend
. If this prop is not passed, the shareable-link button will not be rendered, same as before.UIOptions.canvasActions.saveScene
to UIOptions.canvasActions.saveToActiveFile
#3657.shouldAddWatermark: boolean
attribute from options for export APIs #3639.appState.shouldAddWatermark
so in case you were passing shouldAddWatermark
in initialData.AppState it will not work anymore.This section lists the updates made to the excalidraw library and will not affect the integration.
Switch to selection tool on library item insert #3773
Show active file name when saving to current file #3733
Add hint around text editing #3708
Change library icon to be more clear #3583
Pass current theme
when installing libraries #3701
Update virgil font #3692
Support exporting json to excalidraw plus #3678
Save exportScale in AppState #3580
Add shortcuts for stroke and background color picker #3318
Exporting redesign #3613
Auto-position tooltip and suport overflowing container #3631
Auto release @excalidraw/excalidraw-next on every change #3614
Allow inner-drag-selecting with cmd/ctrl #3603
view mode cursor adjustments #3809.
Pass next release to updatePackageVersion & replace ## unreleased with new version #3806
Include deleted elements when passing to restore #3802
Import React before using jsx #3804
Ensure s
and g
shortcuts work on no selection #3800
Keep binding for attached arrows after changing text #3754
Deselect elements on viewMode toggle #3741
Allow pointer events for disable zen mode button #3743
Use rgba instead of shorthand alpha #3688
Color pickers not opening on mobile #3676
On contextMenu, use selected element regardless of z-index #3668
SelectedGroupIds not being stored in history #3630
Overscroll on touch devices #3663
Small UI issues around image export dialog #3642
Normalize linear element points on restore #3633
Disable pointer-events on footer-center container #3629
Add release script to update relevant files and commit for next release #3805
Add script to update changelog before a stable release #3784
Add script to update readme before stable release #3781
These section lists the updates which may affect your integration, so it is recommended to go through this when upgrading the version.
appState
properties in updateScene
API. Earlier only appState.viewBackgroundColor
was supported, now any attribute can be updated with this API.serializeAsJSON
helper that we use when saving Excalidraw scene to a file #3538.renderTopRightUI
prop #3539, #3572 .This also removes the GitHub icon, keeping it local to the https://excalidraw.com app.
renderFooter
prop. In case you were hiding this icon earlier, you need not do that anymore #3577.Now appState
is also passed to renderFooter
prop.
These section lists the updates made to the excalidraw library and will not affect the integration.
.visually-hidden
elements #3501.backdrop-filter
to improve perf #3506scrollToContent
API now supports passing just a single Excalidraw element, or none at all (which will default to current elements on the scene) #3482.#### BREAKING CHANGE
Renamed setScrollToContent
to scrollToContent
.
Make library local to given excalidraw instance (previously, all instances on the same page shared one global library) #3451.
Added prop onLibraryChange which if supplied will be called when library is updated.
Added attribute libraryItems
to prop initialData which can be used to load excalidraw with existing library items.
Assign a unique id to the excalidraw component. The id can be accessed via ref
.
#### BREAKING CHANGE
From now on the host application is responsible for persisting the library to LocalStorage (or elsewhere), and importing it on mount.
Bind the keyboard events to component and added a prop handleKeyboardGlobally
which if set to true will bind the keyboard events to document #3430.
#### BREAKING CHANGE
Earlier keyboard events were bind to document but now its bind to Excalidraw component by default. So you will need to set handleKeyboardGlobally
to true if you want the previous behaviour (bind the keyboard events to document).
Recompute offsets on scroll
of the nearest scrollable container #3408. This can be disabled by setting detectScroll
to false
.
Add onPaste
prop to handle custom clipboard behaviours #3420.
version
and versionNonce
(only applies to the selected elements). This fix will allow you account for z-index changes if you're syncing just the elements that changed (and not the whole scene) #3483.Only handle cut/paste events inside excalidraw #3484.
Make history local to a given Excalidraw instance. This fixes a case where history was getting shared when you have multiple Excalidraw components on the same page #3481.
Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page #3478.
Fix library being pasted off-center #3462.
When switching theme, apply it only to the active Excalidraw component. This fixes a case where the theme was getting applied to the first Excalidraw component if you had multiple Excalidraw components on the same page #3446.
getSyncableElements
helper which was specific to excalidraw app collab implementation #3471. If you happened to use it, you can easily reimplement it yourself using the newly exposed isInvisiblySmallElement helper:const getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
elements.filter((el) => el.isDeleted || !isInvisiblySmallElement(el));
DataState
→ ExportedDataState
LibraryData
→ ExportedLibraryData
Support tab-to-indent when editing text #3411.
App now breaks into mobile view using the component dimensions, not viewport dimensions. This fixes a case where the app would break sooner than necessary when the component's size is smaller than viewport #3414.
Add screenshots to manifest.json #3369.
Enable drop event on the whole component #3406.
Focus on last active element when dialog closes #3447.
Fix incorrectly caching png file handle #3407.
Fix popover position incorrect on Safari for non-zero offsets/scroll #3399.
UIOptions
prop to customise canvas actions
which includes customising background color picker
, clear canvas
, export
, load
, save
, save as
& theme toggle
#3364. Check the readme for more details.Calculate width/height
of canvas based on excalidraw component (".excalidraw" selector) & also resize and update offsets whenever the dimensions of excalidraw component gets updated #3379. You also don't need to add a resize handler anymore for excalidraw as its handled now in excalidraw itself.
width/height
props have been removed. Instead now it takes 100%
of width
and height
of the container so you need to make sure the container in which you are rendering Excalidraw has non zero dimensions (It should have non zero width and height so Excalidraw can match the dimensions of containing block)
Calculate offsets when excalidraw container resizes using resize observer api #3374.
Export types for the package so now it can be used with typescript #3337. The types are available at @excalidraw/excalidraw/types
.
Add renderCustomStats
prop to render extra stats on host, and expose setToastMessage
API via refs which can be used to show toast with custom message #3360.
Support passing a CSRF token when importing libraries to prevent prompting before installation. The token is passed from https://libraries.excalidraw.com using the token
URL key #3329.
Use location.hash
when importing libraries to fix installation issues. This will require host apps to add a hashchange
listener and call the newly exposed excalidrawAPI.importLibrary(url)
API when applicable #3320. Check the readme for more details.
Append location.pathname
to libraryReturnUrl
default url #3325.
Support image elements #3424.
Expose separate builds for dev and prod and support source maps in dev build #3330. Check the readme for more details.
If you are using script tag to embed excalidraw then the name of the file will have to be updated to excalidraw.production.min.js
instead of excalidraw.min.js
. If you want to use dev build you can use excalidraw.development.js
window.name
if present during excalidraw libraries installation so it opens in same tab for the host. If window.name
is not set it will open in a new tab #3299.name
prop to indicate the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over intialData.appState.name
, the name
will be fully controlled by host app and the users won't be able to edit from within Excalidraw #3273.Export API setCanvasOffsets
via ref
to set the offsets for Excalidraw#3265.
offsetLeft
and offsetTop
props have been removed now so you have to use the setCanvasOffsets
via ref
to achieve the same.
Export API to export the drawing to canvas, svg and blob #3258. For more info you can check the readme
Add a theme
prop to indicate Excalidraw's theme. #3228. When this prop is passed, the theme is fully controlled by host app.
Support libraryReturnUrl
prop to indicate what URL to install libraries to #3227.
initialData.scrollToCenter
and setScrollToCenter
API exposed via ref to initialData.scrollToContent
and setScrollToContent
respectively#3261.Rename appearance to theme #3237.
Since appState.appearance
is renamed to appState.theme
so wherever appState.appearance
including initialData.appState.appearance
should be renamed to appState.theme
and initialData.appState.theme
respectively. If the appearance
was persisted earlier, now it needs to passed as theme
.
The class Appearance_dark
is renamed to theme--dark
.
The class Appearance_dark-background-none
is renamed to theme--dark-background-none
.
100ms
so offsets
gets updated faster if changed when container scrolled #3182.renderFooter
prop change #3183Array.from
when spreading over set so that typescript transpiles correctly in the umd build#3165.window.EXCALIDRAW_ASSET_PATH
which host can use to load assets from a different URL. By default it will be loaded from https://unpkg.com/@excalidraw/excalidraw{currentVersion}/dist/
#3068.Also now the assets will have a hash in filename so cache bursting can easily happen with version bump.
Add support for scrollToCenter
in initialData so host can control whether to scroll to center on mount #3070.
Export restore
, restoreAppState
and restoreElements
to host #3049
user
is now removed.zenModeEnabled
and gridModeEnabled
prop which enables zen mode and grid mode respectively #2901. When this prop is used, the zen mode / grid mode will be fully controlled by the host app.viewModeEnabled
prop which enabled the view mode #2840. When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host.getAppState
on excalidrawRef
#2834.__webpack_public_path__
to host the assets#2835copy
, cut
, and paste
actions from contextmenu #2872Ctrl-Y
shortcut to redo on Windows #2831.lang
attribute with the current lang. #2995Sentence case
for Live collaboration
Exported few Extra API's which can be used by the host to communicate with Excalidraw.
Remove language picker, and add langCode
, renderFooter
#2644:
BREAKING: removed the language picker from UI. It is now the host app's responsibility to implement a language picker if desirable, using the newly added renderFooter
prop. The reasoning is that the i18n should be controlled by the app itself, not by the nested Excalidraw component.
Added langCode
prop to control the UI language.
Add support for exportToBackend
prop to allow host apps to implement shareable links #2612
onCollabButtonClick
is not provided #2598cmd+o
shortcut to load scene #2732First release of @excalidraw/excalidraw