feat: support custom elements in @excalidraw/excalidraw

[ad1992]

custom-elements.mp4

Take 2 for custom elements API
This PR integrates custom elements on top of canvas so host can use any render props to render the widget for custom elements

TODOS

• Add api to setCustomType

• Add api onCustomElementPointerDown which will help host to render custom element

• Add api onScrollChange which host can use to update custom element positions when scrolling

• Add example to showcase custom element integration (see above video / check the preview

• When offsets updated there is a delay in elements being updated in host

• The custom elements shouldn't overflow the container when scrolled

• update docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
excalidraw	✅ Ready (Inspect)	Visit Preview	May 11, 2022 at 7:52AM (UTC)
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	May 11, 2022 at 7:52AM (UTC)

[dwelle]

for the MVP I'd do this in the host app until we're confident on the API

[ad1992]

Removed onOffsetsChange as its not needed since custom element is positioned absolute but onScrollChange is definitely needed to update the position of the custom elements (as shown in example) when canvas is scrolled so I would want to export an API instead of maintaining the logic in host.

[DanielJGeiger]

I am glad this is moving forward. For further extensions of #5164, here are some considerations from #2993 besides my earlier comments:

Text elements possess various properties unique to text. Custom Text elements may use some or all of these, while adding more of their own. For example, Math elements in #2993 don't need multiple font families. But Math elements support standard/simplified input (Latex/AsciiMath), besides mixed-text/math-only display modes.

Custom Text elements would ideally support standard Text features like #5150, #3890, etc. I propose some "Text element" API so custom Text elements can extend the WYSIWYG principle (eg a mixed-text mode Math element which contains no math input). See #3915 for an initial attempt at such an API.

The element properties sidebar forms a standard part of the Excalidraw UI. This would provide a natural way for users to set custom elements' properties (Text or otherwise). #2993 demonstrates the UX from #3915's attempt at this, including i18n aspects.

Charts feature: It could be useful for the titles and/or axis labels of charts to support custom Text elements (eg Math) by default.