Skip to content

Commit 94778c3

Browse files
mdroidianmdroidian
authored
ENG-1323 - Upgrade Roam tldraw to 2.4.6 (#747)
* upgrade to 2.4.6 * rm react patches, nice
1 parent 1ccd258 commit 94778c3

12 files changed

Lines changed: 177 additions & 289 deletions

File tree

‎apps/roam/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,13 @@
4343
"@repo/utils": "workspace:*",
4444
"@supabase/functions-js": "catalog:",
4545
"@supabase/supabase-js": "catalog:",
46-
"@tldraw/editor": "2.3.0",
47-
"@tldraw/state": "2.3.0",
48-
"@tldraw/store": "2.3.0",
49-
"@tldraw/tlschema": "2.3.0",
50-
"@tldraw/utils": "2.3.0",
51-
"@tldraw/validate": "2.3.0",
46+
"@tldraw/editor": "2.4.6",
47+
"@tldraw/state": "2.4.6",
48+
"@tldraw/state-react": "2.4.6",
49+
"@tldraw/store": "2.4.6",
50+
"@tldraw/tlschema": "2.4.6",
51+
"@tldraw/utils": "2.4.6",
52+
"@tldraw/validate": "2.4.6",
5253
"@use-gesture/react": "^10.2.27",
5354
"@vercel/blob": "^1.1.1",
5455
"classnames": "^2.3.2",
@@ -69,7 +70,7 @@
6970
"react-in-viewport": "1.0.0-alpha.20",
7071
"react-vertical-timeline-component": "3.5.2",
7172
"roamjs-components": "0.86.4",
72-
"tldraw": "2.3.0",
73+
"tldraw": "2.4.6",
7374
"use-sync-external-store": "1.5.0",
7475
"xregexp": "^5.0.0",
7576
"zod": "^3.23.8"

‎apps/roam/scripts/compile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const args = {
109109
root: ".",
110110
mirror: ".",
111111
external: [
112-
"react-dom/client",
112+
"react-dom/client=window.ReactDOM",
113113
"@blueprintjs/core=window.Blueprint.Core",
114114
"@blueprintjs/datetime=window.Blueprint.DateTime",
115115
"@blueprintjs/select=window.Blueprint.Select",

‎apps/roam/src/components/canvas/Clipboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import {
3535
TLDefaultFontStyle,
3636
FONT_FAMILIES,
3737
} from "tldraw";
38-
import { useAtom } from "@tldraw/state";
38+
import { useAtom } from "@tldraw/state-react";
3939
import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
4040
import { Result } from "roamjs-components/types/query-builder";
4141
import fuzzy from "fuzzy";

‎apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import {
3232
TLOnTranslateHandler,
3333
TLOnTranslateStartHandler,
3434
WeakCache,
35-
textShapeProps,
35+
DefaultColorStyle,
3636
TLShapeId,
3737
TLShapeUtilConstructor,
3838
TLShape,
@@ -83,9 +83,9 @@ import { dispatchToastEvent } from "~/components/canvas/ToastListener";
8383
import internalError from "~/utils/internalError";
8484
import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
8585

86-
const COLOR_ARRAY = Array.from(textShapeProps.color.values)
86+
const COLOR_ARRAY = Array.from(DefaultColorStyle.values)
8787
.filter((c) => !["red", "green", "grey"].includes(c))
88-
.reverse() as readonly TLDefaultColorStyle[];
88+
.reverse() as TLDefaultColorStyle[];
8989

9090
export const getRelationColor = (
9191
relationName: string,

‎apps/roam/src/components/canvas/DiscourseToolPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { DiscourseNode } from "~/utils/getDiscourseNodes";
1212
import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
1313
import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
14-
import { useAtom } from "@tldraw/state";
14+
import { useAtom } from "@tldraw/state-react";
1515
import { TOOL_ARROW_ICON_SVG, NODE_COLOR_ICON_SVG } from "~/icons";
1616
import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
1717
import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "./Tldraw";

‎apps/roam/src/components/canvas/Tldraw.tsx‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable @typescript-eslint/naming-convention */
2-
import React, { useState, useRef, useMemo, useEffect } from "react";
2+
import React, { useState, useRef, useMemo, useEffect, useCallback } from "react";
33
import ExtensionApiContextProvider, {
44
useExtensionAPI,
55
} from "roamjs-components/components/ExtensionApiContext";
@@ -789,48 +789,51 @@ const InsideEditorAndUiContext = ({
789789
// );
790790
// };
791791

792-
const createDiscourseNodeShape = async ({
793-
uid,
794-
nodeText,
795-
nodeType,
796-
content,
797-
}: {
798-
uid: string;
799-
nodeText: string;
800-
nodeType: string;
801-
content: TLExternalContent & { type: "text" };
802-
}): Promise<void> => {
803-
const { h, w, imageUrl } = await calcCanvasNodeSizeAndImg({
804-
nodeText,
792+
const createDiscourseNodeShape = useCallback(
793+
async ({
805794
uid,
795+
nodeText,
806796
nodeType,
807-
extensionAPI,
808-
});
809-
810-
const position =
811-
content.point ??
812-
(editor.inputs.shiftKey
813-
? editor.inputs.currentPagePoint
814-
: editor.getViewportPageBounds().center);
797+
content,
798+
}: {
799+
uid: string;
800+
nodeText: string;
801+
nodeType: string;
802+
content: TLExternalContent & { type: "text" };
803+
}): Promise<void> => {
804+
const { h, w, imageUrl } = await calcCanvasNodeSizeAndImg({
805+
nodeText,
806+
uid,
807+
nodeType,
808+
extensionAPI,
809+
});
815810

816-
editor.createShapes([
817-
{
818-
id: createShapeId(),
819-
type: nodeType,
820-
x: position.x - w / 2,
821-
y: position.y - h / 2,
822-
props: {
823-
uid,
824-
title: nodeText,
825-
w,
826-
h,
827-
...(imageUrl && { imageUrl }),
828-
size: "s",
829-
fontFamily: "sans",
811+
const position =
812+
content.point ??
813+
(editor.inputs.shiftKey
814+
? editor.inputs.currentPagePoint
815+
: editor.getViewportPageBounds().center);
816+
817+
editor.createShapes([
818+
{
819+
id: createShapeId(),
820+
type: nodeType,
821+
x: position.x - w / 2,
822+
y: position.y - h / 2,
823+
props: {
824+
uid,
825+
title: nodeText,
826+
w,
827+
h,
828+
...(imageUrl && { imageUrl }),
829+
size: "s",
830+
fontFamily: "sans",
831+
},
830832
},
831-
},
832-
]);
833-
};
833+
]);
834+
},
835+
[editor, extensionAPI],
836+
);
834837

835838
useEffect(() => {
836839
// https://tldraw.dev/examples/data/assets/hosted-images
@@ -1097,13 +1100,13 @@ const InsideEditorAndUiContext = ({
10971100
};
10981101
};
10991102
const cleanupCustomSideEffects = registerCustomSideEffects();
1100-
const [cleanupSideEffects] = registerDefaultSideEffects(editor);
1103+
const cleanupSideEffects = registerDefaultSideEffects(editor);
11011104

11021105
return () => {
11031106
cleanupSideEffects();
11041107
cleanupCustomSideEffects();
11051108
};
1106-
}, [editor, msg, toasts, extensionAPI]);
1109+
}, [editor, msg, toasts, extensionAPI, allNodes, createDiscourseNodeShape]);
11071110

11081111
return <CustomContextMenu extensionAPI={extensionAPI} allNodes={allNodes} />;
11091112
};

‎apps/roam/src/components/canvas/uiOverrides.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/naming-convention */
12
import React from "react";
23
import {
34
TLImageShape,
@@ -400,23 +401,8 @@ export const createUiOverrides = ({
400401
...Object.fromEntries(
401402
allNodes.map((node) => [`shape.node.${node.type}`, node.text]),
402403
),
403-
// "shape.myShape.myShape": "Relation",
404-
// ...Object.fromEntries(
405-
// allRelationNames.map((name) => [`shape.relation.${name}`, name])
406-
// ),
407-
// ...Object.fromEntries(
408-
// allAddRefNodeActions.map((name) => [`shape.referenced.${name}`, name])
409-
// ),
410404
"action.toggle-full-screen": "Toggle Full Screen",
411405
"tool.discourse-tool": "Discourse Graph",
412-
// "action.convert-to": "Convert to",
413-
// ...Object.fromEntries(
414-
// allNodes.map((node) => [
415-
// `action.convert-to-${node.type}`,
416-
// `${node.text}`,
417-
// ])
418-
// ),
419-
// TODO: copy as
420406
},
421407
},
422408
});

‎patches/@tldraw__editor@2.3.0.patch‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎patches/@tldraw__editor@2.4.6.patch‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
diff --git a/CHANGELOG.md b/CHANGELOG.md
2+
deleted file mode 100644
3+
index 1424fb4699181e1528420b9d50269080fbbf9c5e..0000000000000000000000000000000000000000
4+
diff --git a/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs b/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs
5+
index 928288b81b2bf06f3b47e7a53f26fa53494eee20..56b5f58833cbd277bc1d6fff34e0f1c6138ffec5 100644
6+
--- a/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs
7+
+++ b/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs
8+
@@ -22,6 +22,22 @@ const DefaultErrorFallback = ({ error, editor }) => {
9+
}
10+
const errorMessage = error instanceof Error ? error.message : String(error);
11+
const errorStack = error instanceof Error ? error.stack : null;
12+
+
13+
+ // Notify Discourse Graphs that an error occurred
14+
+ useEffect(() => {
15+
+ const errorDetails = {
16+
+ message: errorMessage,
17+
+ stack: errorStack
18+
+ };
19+
+
20+
+ const event = new CustomEvent("tldraw:error", {
21+
+ detail: errorDetails,
22+
+ bubbles: true
23+
+ });
24+
+
25+
+ document.dispatchEvent(event);
26+
+ }, [error]);
27+
+
28+
const isDarkModeFromApp = useValue(
29+
"isDarkMode",
30+
() => {

0 commit comments

Comments
 (0)