[Bug]: ExternalContentSourcesExample is broken

[mz8i]

What happened?

I've tried using the example of external HTML content handler (/apps/examples/src/examples/ExternalContentSourcesExample.tsx) through the code sandbox but it seems to be broken - I've tried both dropping an .html file onto the canvas, as well as copy-pasting some HTML.

When dropping test.html onto the canvas, I get a warning in the console: test.html not loaded - Extension not allowed.

It seems that the current version of the library only allows whitelisting mime types through acceptedImageMimeTypes and acceptedVideoMimeTypes - adding text/html to one of these props removes the warning, but then the editor tries to parse the html file as an image/video, which obviously fails.

How can we reproduce the bug?

1. Go to the code sandbox
2. Open "External content sources" example
3. Drop any .html file onto the canvas
4. Nothing happens / console warning is logged

What browsers are you seeing the problem on?

Firefox, Chrome

Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[MitjaBezensek]

Hey! Looks like this example works by pasting something to the canvas instead of dragging a file. You can try it out by copying some code from VS Code, then pasting this code to the example.

Here's the PR where this was added #1925

CleanShot.2023-11-30.at.11.51.42.mp4

If you wanted to check for files you would create a files external content handler, this one is just of text. Something like we have here:
https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/defaultExternalContentHandlers.ts#L224
https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/defaultExternalContentHandlers.ts#L46

I'll update the example since the comment there is quite confusing, thanks for bringing this up!

[mz8i]

Thanks for capturing the video. I might be misunderstanding something, but the video you uploaded seems to just be pasting a rich formatted text to the canvas, which creates a box with the text content. Based on the name and code of the example, I think the initial intention was to allow for something more powerful (and potentially dangerous, but that's a separate topic): pasting a bit of HTML code (or a HTML file) onto the canvas, which would then create a new shape that actually contains the HTML content in the DOM of the shape. Not just the code pasted as text. Note in the example's code, the dangerouslySetInnerHTML which should do exactly that. By the way, note that the code you are pasting in the video is just JavaScript, not HTML.

To give more context on what I was trying to do: I wanted to try tldraw for making easily editable financial dashboards. There's a library called TradingView that lets you embed a financial chart in a webpage. For example I have this simple HTML code:

<div class="tradingview-widget-container" style="height:400px;width:800px">
  <div id="tradingview_4347c" style="height:100%;width:100%"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
    new TradingView.widget({
      "autosize": false,
      "width": "100%",
      "height": "300px",
      "symbol": "OANDA:EURPLN",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "1",
      "locale": "en",
      "enable_publishing": false,
      "allow_symbol_change": true,
      "container_id": "tradingview_4347c"
    });
  </script>
</div>

If you just paste this snippet into an empty local HTML file and then open the local file in a browser, it should display a financial chart.

So I know that some pasted content in tldraw is automatically recognised, like when you paste a google maps link it becomes an embed. What I was trying to do is to paste this HTML into tldraw and get a financial chart embed. I understand this currently doesn't work, but I think it was actually the original intention behind the example... Maybe the original author could pitch in on whether something changed in the tldraw API that broke the example over time?

[MitjaBezensek]

The example does allow for that, but it's a bit tricky to make it work.

For example, if I copy your html example here (using the copy button that GitHub provides) then this goes to the clipboard as type text and subtype text. Our example would then completely ignore what you pasted since it doesn't have the html subtype.

CleanShot.2024-01-15.at.15.53.45.mp4

If I copy some text from VS Code (as I did in the previous example) then our example sees that VS Code put a bunch of sources to the clipboard, one of them being of type text and of subtype html. But the pasted html is not just the html, but it's actually the html that allows you to see the exact same styling of as you see in your code editor. It kinda embeds what you see in the editor together with all the styles needed to render it exactly as in VS Code.

CleanShot.2024-01-15.at.15.50.13.mp4

So if you wanted to achieve what you want to achieve you can either:

1. Change the example so that it also works for text/text then any text you paste will just automatically be considered html.
2. You can also somehow put your code to the clipboard as text/html instead of text/text.

Here's me doing the #1 option for the VS Code example. You can see that now we actually do see the rendered html inside this shape.

CleanShot.2024-01-15.at.15.59.47.mp4

My feeling is that this example is meant to show how you can offer better integration with tools that do put content as text/html (or any other non text/text source) in the clipboard data, as it allows for more rich copy pasting from other tools. The developer can then decide which of the sources is right for them and use data from that source.

cc @steveruizok to maybe clarify.

[mz8i]

Thanks for the in-depth explanation, that's very useful.

What would be a way to enable dropping a file with a text/html MIME type onto the canvas, and then its contents being passed to the text/html handler? Is it possible at all? I don't think there's an example for that