holxsam / tldraw-in-obsidian

A plugin to integrate Tldraw into Obsidian.

Tldraw in Obsidian Plugin

2023-08-28_12-21-42.mp4

This Obsidian plugin allows users to use Tldraw, which is a tiny little drawing app, inside of Obsidian. Users can draw, plan, and use all of Tldraw's tools to augment their Obsidian experience. The data for each drawing is stored as a regular markdown file similar to the Excalidraw plugin meaning users will always have access to their data in plain markdown. Users have the option to switch between the Tldraw view or the markdown view in case they wish to include backlinks, tags, or any other elements to facilitate linking their drawings with their existing knowledge base.

TIP: You can toggle between the view modes, using the command palette, keyboard shortcuts, status bar toggle at the bottom right, file menu, and context menu. See the plugin settings tab for customization options as well.

Development Goals

The main goals of this plugin and repo is to keep up to date with the Tldraw's latest version and to add these features:

• Preview the drawing when a tldraw file is referenced in markdown.
• Add markdown notes into tldraw.
• Export and import tools.

Installation

Community Plugins (Recommended)

Tldraw in Obsidian is now available on the official community plugins list!

• Here's a link that will take you to the plugin page: obsidian://show-plugin?id=tldraw (paste in your browser's address bar).
• You can also find it by going into Settings > Community plugins > Browse > Type 'tldraw' > Install.

Using BRAT

• Download Obsidian42 - BRAT from the community plugins.
• Go into the settings for Obsidian42 - Brat and select Add Beta Plugin
• Copy and paste this repo: https://github.com/holxsam/tldraw-in-obsidian
• Go back Community plugins and make sure to enable Tldraw
• This is also the only way to get Tldraw in Obsidian on the mobile app as far as I know.

Manual

• Head over to releases and download a release (latest is recommended).
• Navigate to your plugin folder in your prefered vault: VaultFolder/.obsidian/plugins/
• Create a new folder called tldraw-in-obsidian
• Copy and paste over main.js, styles.css, manifest.json into the newly created /tldraw-in-obsidian folder.
• Make sure you enable the plugin by going into Settings > Community plugins > Installed plugins > toggle 'Tldraw'.

Development

• Clone this repo or a fork to a local development folder.
• Place this folder in your .obsidian/plugins folder.
• Install NodeJS, then run npm i in the command line under your repo folder.
• Run npm run dev to compile your plugin from main.ts to main.js.
• Make changes to the files in /src. Those changes should be automatically compiled into main.js and styles.css.
• To refresh your changes, go to Settings > Community Plugins > disable and enable the plugin. You can also close your vault and then reopen it but that's more bothersome.
• Do not edit the styles.css file at the root of the repo. Edit the one in /src/styles.css and the changes will be reflected automatically.

Contributions

• This plugin is open to contributions. If you have a feature idea or want to report a bug, you can create an issue. If you are a developer wanting to fix a bug or add a feature to feel free to submit pull requests.

License and Attribution

All Tldraw's code is theirs and I did not change any of it. Also shout out to the Excalidraw plugin for inspiration on how I should structure this Tldraw plugin.

tldraw-in-obsidian's Issues

Please don't use online fonts - Download them once

I use a program that isolates my Obsidian vault from the internet, so when I open a TLDraw drawing I get the error "Could not load assets, please refresh the page".

When I saw TLdraw trying to download online fonts, I created a new Obsidian vault on another device (with no internet restrictions), downloaded TLdraw and used it a bit. I thought fonts would be downloaded in .obsidian/plugins/tldraw but there is only main.js, manifest.json and styles.css files.

It seems TLdraw send HTTP requests to use the fonts each time you open a drawing. So I can't use TLdraw on my main vault.

Could you please download the fonts a single time and then use the local font files? (Even an option in settings to choose to use the fonts locally)

Embed shows souce json code

If I embed tldraw file on the note, it shows raw json source, not the tldraw canvas. Is there any way to show embeded canvas like excalidraw?

tldraw embed

excalidraw embed

Thanks a lot

this plugin is awesome for me , thanks a lot !!!
🌹🌹🌹

Issues with Dark Mode Persistence and Importing from tldraw.com in tldraw

Issues with Dark Mode Persistence and Importing from tldraw.com in tldraw Extension

Hello tldraw-in-obsidian Team,

I want to express my appreciation for your work on the tldraw extension. It's a fantastic tool. However, I've encountered a couple of issues that I'd like to bring to your attention:

1. Dark Mode Setting Not Persisting

Issue Description:

• Every time I reopen the extension, it defaults back to light mode, even though I had set it to dark mode in the previous session.

Expected Behavior:

• It would be great if the dark mode setting could persist across sessions, saving the need to change it every time I reopen the extension.

2. Challenges with Importing from tldraw.com

Issue Description:

• Currently, I am unable to paste content directly from the standard tldraw.com website into the tldraw extension. Also, there seems to be no option to upload files directly into the extension.

Expected Behavior:

• Having the ability to paste or import content from tldraw.com directly into the extension would greatly enhance its usability and streamline the workflow.

I hope these issues can be addressed in future updates. Thank you again for your hard work and dedication to this project.

Tool menu in upper right does not require clicking to select color

When I use my wacom one pen tablet and go to select a color from the palette, after I click one color any other color I "mouse over" with my Pen hovering over the tablet gets selected.

Workaround: Click color, lift up pen so it does not move the cursor, put pen somewhere else on the screen.

Would be happy to see this fixed! I liked the excalidraw plugin, but it came with too many downsides. I hope this plugin grows into a much more usable plugin! :)

Installation instructions are outdated

The installation instructions offer BRAT as the easy way, but the plugin is in the plugin store now.

Can't copy and past tldraw-web ↔ tldraw-obsidian

Currently, the tldraw-obsidian plugin does not allow sharing whiteboard with others, so I need to migrate tldraw-web content to my personal tldraw-obsidian area.

However, when I copy and paste the content from tldraw-web into tldraw-obsidian, there is no content pasted into the obsidian whiteboard area.
Nor I can't copy content from tldraw-obsidian to tldraw-web for the same reason.

Is there any way to copy and paste from one to the other or is this an issue that will be resolved once the obsidian plugin is updated?

Great addition

Hi

This is great, thanks for deveolping it.

couple FRs

• black pen color in the dark mode
• ability to extend the range of pressure sensitivity, the lowest thickness feels still to thick for emulating ink pens for instance
• ability to change the aspect ratio of the notes, they are squares only now

thanks

Command to embed into current document

When inside a file add a command to:
create a new TlDraw document, while placing a link at the current cursor position.
If possible name the TlDraw document using the current file's name.

Hardware eraser support

I have a Wacom AES panel and a Wacom Bamboo Ink (Gen 2) pen. On tldraw.com, the hardware eraser button works flawlessly, while it doesn't in Obsidian.

Expected behavior: While holding down the button in pen mode, the eraser should be active.

Actual behavior: A penstroke is created.

Touch produces penstroke in pen mode

In contrast to the behavior on tldraw.com, when I touch the screen with one finger in pen mode, a stroke is created. This is counterproductive when I want to use a stylus for writing/drawing because stray strokes are created when palm rejection doesn't work or while I'm trying to zoom around the canvas.

Might be related to #5.

Failed to load

I cloned the repository as described to /.obsidian/plugins/, but when I tried to enable it, I got “Failed to load plugin” on obsidian mobile.

[FR] Change toolbar position

Hi, finding this addon has greatly improved my workflow. It would be neat to be able to change where the toolbar is placed and be able to choose between all four sides (top, bottom, left, right).

Coming from excalidraw, I've gotten used to the toolbar being on the top. Cheers

Ability to import an exported .tldr file

I have some .tldr files that I'd love to be able to import to Obsidian via this plugin.

Inline drawing in Markdown file

Hi, is it possible to create such a drawing and embed it into a markdown note?

Release on Community Plugins

This plugin is awesome.
When will it be listed in the Community Plugins?
What's the process to get there? I'm new to Obsidian but if there something I can do to help the process, some pointers would help.

Conflict with other Plugins

Im having conflicts with other plugins that shows an error EVERY TIME I change something in a drawing. I am not knowledgeable enought to give you a hint on how to solve this.

Write me if i can help in some way tho.

Omnisearch: Error while adding "tldraw/Tldraw 2023-08-21 10.13AM.md" to live cache TypeError: Cannot read properties of undefined (reading 'getFiles')
    at Md (plugin:omnisearch:40:1968)
    at Ga.addToLiveCache (plugin:omnisearch:42:948)
    at eval (plugin:omnisearch:49:6264)
    at e.tryTrigger (app.js:1:832397)
    at e.trigger (app.js:1:832330)
    at t.trigger (app.js:1:1031330)
    at t.onChange (app.js:1:1021835)
    at e.trigger (app.js:1:611644)
    at e.<anonymous> (app.js:1:609455)
    at app.js:1:236930

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'format')
    at getDateFromFile (plugin:calendar:131:46)
    at CalendarView.onFileModified (plugin:calendar:4302:22)
    at e.tryTrigger (app.js:1:832397)
    at e.trigger (app.js:1:832330)
    at t.trigger (app.js:1:1031330)
    at t.onChange (app.js:1:1021835)
    at e.trigger (app.js:1:611644)
    at e.<anonymous> (app.js:1:609455)
    at app.js:1:236930
    at Object.next (app.js:1:237035)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getMarkdownFiles')
    at ObsidianTaskAdapter.generateTasksList (plugin:tasks-calendar-wrapper:36298:29)
    at _TasksTimelineView.onReloadTasks (plugin:tasks-calendar-wrapper:36514:13)
    at e.tryTrigger (app.js:1:832397)
    at e.trigger (app.js:1:832330)
    at t.trigger (app.js:1:1715574)
    at e.onStop (app.js:1:1708496)
    at e.stop (app.js:1:1144875)
    at e.<anonymous> (app.js:1:1145848)
    at app.js:1:236930
    at Object.next (app.js:1:237035)

Add settings option to allow maintaining current tool selection after tool use.

If you draw a shape, after drawing that shape the selected tool resets to your default tool (pointer, hand, etc). This can be frustrating if you intend to draw multiples of the same shape. E.g. drawing multiple lines in a row. You have to reselect the tool each time. Expected behavior for many similar apps is to leave the tool selected, rather than resetting after drawing.

Haven't looked at how tldraw is integrated, but if you want, I am happy to fork and make a PR for this if it's viable.

Edit drawing with another editor

Would be useful to edit the TLDraw files generated by this plugin in TLDraw itself or programs that can edit this file (like in vscode with the plugin). Perhaps instead of directly embedding the JSON, it could store the path to a tldraw file?