holxsam / tldraw-in-obsidian

A plugin to integrate Tldraw into Obsidian.
Apache License 2.0
180 stars 8 forks source link

Ability to import an exported .tldr file #11

Closed andradei closed 1 month ago

andradei commented 9 months ago

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

mikedeanlive commented 9 months ago

I have similar problems: https://github.com/holxsam/tldraw-in-obsidian/issues/10

jon-dez commented 3 months ago

@andradei

Could you provide an example .tldr file? I may be able to implement that when I have free time, I just need to see the format of the file.

andradei commented 3 months ago

@jon-dez I don't have one at the moment, you can create one with lines, boxes, text, free-hand drawing, links, images, pretty much one generic instance of every object and that should give the format file you need.

cdierkens commented 2 months ago

Example .tldr file.

Example `.tldr` file ```json { "tldrawFileFormatVersion": 1, "schema": { "schemaVersion": 2, "sequences": { "com.tldraw.store": 4, "com.tldraw.asset": 1, "com.tldraw.camera": 1, "com.tldraw.document": 2, "com.tldraw.instance": 25, "com.tldraw.instance_page_state": 5, "com.tldraw.page": 1, "com.tldraw.instance_presence": 5, "com.tldraw.pointer": 1, "com.tldraw.shape": 4, "com.tldraw.asset.bookmark": 2, "com.tldraw.asset.image": 4, "com.tldraw.asset.video": 4, "com.tldraw.shape.group": 0, "com.tldraw.shape.text": 2, "com.tldraw.shape.bookmark": 2, "com.tldraw.shape.draw": 2, "com.tldraw.shape.geo": 9, "com.tldraw.shape.note": 7, "com.tldraw.shape.line": 5, "com.tldraw.shape.frame": 0, "com.tldraw.shape.arrow": 5, "com.tldraw.shape.highlight": 1, "com.tldraw.shape.embed": 4, "com.tldraw.shape.image": 4, "com.tldraw.shape.video": 2, "com.tldraw.binding.arrow": 0 } }, "records": [ { "gridSize": 10, "name": "", "meta": {}, "id": "document:document", "typeName": "document" }, { "id": "pointer:pointer", "typeName": "pointer", "x": 154.41015625, "y": 311.859375, "lastActivityTimestamp": 1721226919522, "meta": {} }, { "meta": {}, "id": "page:page", "name": "Page 1", "index": "a1", "typeName": "page" }, { "followingUserId": null, "opacityForNextShape": 1, "stylesForNextShape": {}, "brush": null, "scribbles": [], "cursor": { "type": "default", "rotation": 0 }, "isFocusMode": false, "exportBackground": true, "isDebugMode": false, "isToolLocked": false, "screenBounds": { "x": 0, "y": 0, "w": 1239, "h": 881 }, "insets": [ false, false, false, false ], "zoomBrush": null, "isGridMode": false, "isPenMode": false, "chatMessage": "", "isChatting": false, "highlightedUserIds": [], "isFocused": true, "devicePixelRatio": 2, "isCoarsePointer": false, "isHoveringCanvas": false, "openMenus": [ "main menu", "main-menu-sub.file" ], "isChangingStyle": false, "isReadonly": false, "meta": {}, "duplicateProps": null, "id": "instance:instance", "currentPageId": "page:page", "typeName": "instance" }, { "editingShapeId": null, "croppingShapeId": null, "selectedShapeIds": [], "hoveredShapeId": null, "erasingShapeIds": [], "hintingShapeIds": [], "focusedGroupId": null, "meta": {}, "id": "instance_page_state:page:page", "pageId": "page:page", "typeName": "instance_page_state" }, { "x": 0, "y": 0, "z": 1, "meta": {}, "id": "camera:page:page", "typeName": "camera" } ] } ```
cdierkens commented 2 months ago

Ticket for the inverse

https://github.com/holxsam/tldraw-in-obsidian/issues/27

And PR

https://github.com/holxsam/tldraw-in-obsidian/pull/26

cdierkens commented 2 months ago

FWIW, anyone should be able to follow the approach I took.

Start here: https://github.com/tldraw/tldraw/blob/58890dcfce698802f745253ca42584731d126cc3/apps/dotcom/src/components/FileMenu.tsx#L14

jon-dez commented 2 months ago

@cdierkens Are you currently working on the ability to import tldraw files? I think I found the relevant function tldraw uses for that here:

https://github.com/tldraw/tldraw/blob/901ba660d6488de0cfb6873822be1fc920eb08e8/packages/tldraw/src/lib/utils/tldr/file.ts#L97

visualcode commented 1 month ago

Hey everyone, I'm having the same issue. How can I import a file from the TLDraw browser version into the Obsidian version? There doesn't seem to be an option to open a .tldr file, and I'm also finding it difficult to import the .JSON file directly exported from the browser version.

jon-dez commented 1 month ago

See https://github.com/holxsam/tldraw-in-obsidian/releases/tag/1.4.0