Render Excalidraw in an iframe so that page styles do not break the drawing

[lukesmurray]

Sometimes the host page's styles conflict with Scrawl. This can cause the drawing to be rendered at the wrong size or even disable the ability to use text in excalidraw.

The solution is to wrap excalidraw in an iframe. The easiest way to do this seems to be react-frame-component. However there are some challenges we need to solve since the iFrame needs to communicate with the extension processes. For example Excalidraw uses assets provided by the extension to render CSS and fonts and other things. Unfortunately I'm not sure that we can access extension files in an iframe even if we have the url provided by getURL

• We can make the iframe transparent by setting html, body {background-color: transparent} and adding allowtransparency={true} to the iframe declaration
• we could run the extension in all frames but this feels like it would have a negative performance impact. We really want to run the extension in a single iframe.

[Stvad]

another solution here is using shadow-dom, which allows you to isolate the styles/etc you use for your extension in a separate namespace & does not impose additional complexity on communicating with extension infrastructure

[Stvad]

example from extension I'm working on: https://github.com/transclude-me/extension/blob/main/source/utils/tippy.ts#L88