change discourse tool icon from style to asset, misc lint fixes (#617)

Author: mdroidian

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

@@ -7,7 +7,7 @@ import { OnloadArgs } from "roamjs-components/types";
 import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 
 import {
-  Editor as TldrawApp,
+  Editor,
   TLEditorComponents,
   TLUiComponents,
   TldrawEditor,
@@ -92,11 +92,12 @@ import { getSetting } from "~/utils/extensionSettings";
 import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
 import { HistoryEntry } from "@tldraw/store";
 import { TLRecord } from "@tldraw/tlschema";
-import getCurrentUserDisplayName from "roamjs-components/queries/getCurrentUserDisplayName";
+import { WHITE_LOGO_SVG } from "~/icons";
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
-    tldrawApps: Record<string, TldrawApp>;
+    tldrawApps: Record<string, Editor>;
   }
 }
 export type DiscourseContextType = {
@@ -119,13 +120,15 @@ export const DEFAULT_WIDTH = 160;
 export const DEFAULT_HEIGHT = 64;
 export const MAX_WIDTH = "400px";
 
+const ICON_URL = `data:image/svg+xml;utf8,${encodeURIComponent(WHITE_LOGO_SVG)}`;
+
 export const isPageUid = (uid: string) =>
   !!window.roamAlphaAPI.pull("[:node/title]", [":block/uid", uid])?.[
     ":node/title"
   ];
 
 const TldrawCanvas = ({ title }: { title: string }) => {
-  const appRef = useRef<TldrawApp | null>(null);
+  const appRef = useRef<Editor | null>(null);
   const lastInsertRef = useRef<VecModel>();
   const containerRef = useRef<HTMLDivElement>(null);
   const lastActionsRef = useRef<HistoryEntry<TLRecord>[]>(
@@ -290,7 +293,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     isCreating: false,
   });
 
-  const handleRelationCreation = (app: TldrawApp, e: TLPointerEventInfo) => {
+  const handleRelationCreation = (app: Editor, e: TLPointerEventInfo) => {
     // Handle relation creation on pointer_down
     if (e.type === "pointer" && e.name === "pointer_down") {
       const currentTool = app.getCurrentTool();
@@ -334,8 +337,12 @@ const TldrawCanvas = ({ title }: { title: string }) => {
             const util = app.getShapeUtil(relationShape);
             if (
               util &&
+              // TODO: fix this
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
               typeof (util as any).handleCreateRelationsInRoam === "function"
             ) {
+              // TODO: fix this
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
               (util as any).handleCreateRelationsInRoam({
                 arrow: relationShape,
                 targetId: shapeAtPoint.id,
@@ -532,7 +539,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
         handleTldrawError as EventListener,
       );
     };
-  }, []);
+  }, [title]);
 
   return (
     <div
@@ -552,8 +559,8 @@ const TldrawCanvas = ({ title }: { title: string }) => {
             <button
               className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
               onClick={() => {
-                const handleUpgrade = async () => {
-                  await performUpgrade();
+                const handleUpgrade = () => {
+                  performUpgrade();
                   renderToast({
                     id: "tldraw-upgrade",
                     intent: "success",
@@ -675,13 +682,13 @@ const TldrawCanvas = ({ title }: { title: string }) => {
               <TldrawUi
                 overrides={uiOverrides}
                 components={customUiComponents}
-                assetUrls={defaultEditorAssetUrls}
+                assetUrls={{ icons: { discourseNodeIcon: ICON_URL } }}
               >
                 <InsideEditorAndUiContext
                   extensionAPI={extensionAPI}
                   allNodes={allNodes}
-                  allRelationIds={allRelationIds}
-                  allAddReferencedNodeActions={allAddReferencedNodeActions}
+                  // allRelationIds={allRelationIds}
+                  // allAddReferencedNodeActions={allAddReferencedNodeActions}
                 />
                 <CanvasDrawerPanel />
                 <ClipboardPanel />
@@ -699,41 +706,42 @@ const TldrawCanvas = ({ title }: { title: string }) => {
 const InsideEditorAndUiContext = ({
   extensionAPI,
   allNodes,
-  allRelationIds,
-  allAddReferencedNodeActions,
+  // allRelationIds,
+  // allAddReferencedNodeActions,
 }: {
   extensionAPI: OnloadArgs["extensionAPI"];
   allNodes: DiscourseNode[];
-  allRelationIds: string[];
-  allAddReferencedNodeActions: string[];
+  // allRelationIds: string[];
+  // allAddReferencedNodeActions: string[];
 }) => {
   const editor = useEditor();
   const toasts = useToasts();
   const msg = useTranslation();
 
-  // https://tldraw.dev/examples/data/assets/hosted-images
-  const ACCEPTED_IMG_TYPE = [
-    "image/jpeg",
-    "image/png",
-    "image/gif",
-    "image/svg+xml",
-    "image/webp",
-  ];
-  const isImage = (ext: string) => ACCEPTED_IMG_TYPE.includes(ext);
-  const isCustomArrowShape = (shape: TLShape) => {
-    // TODO: find a better way to identify custom arrow shapes
-    // possibly migrate to shape.type or shape.name
-    // or add as meta
-    const allRelationIdSet = new Set(allRelationIds);
-    const allAddReferencedNodeActionsSet = new Set(allAddReferencedNodeActions);
+  // const isCustomArrowShape = (shape: TLShape) => {
+  //   // TODO: find a better way to identify custom arrow shapes
+  //   // possibly migrate to shape.type or shape.name
+  //   // or add as meta
+  //   const allRelationIdSet = new Set(allRelationIds);
+  //   const allAddReferencedNodeActionsSet = new Set(allAddReferencedNodeActions);
 
-    return (
-      allRelationIdSet.has(shape.type) ||
-      allAddReferencedNodeActionsSet.has(shape.type)
-    );
-  };
+  //   return (
+  //     allRelationIdSet.has(shape.type) ||
+  //     allAddReferencedNodeActionsSet.has(shape.type)
+  //   );
+  // };
 
   useEffect(() => {
+    // https://tldraw.dev/examples/data/assets/hosted-images
+    const ACCEPTED_IMG_TYPE = [
+      "image/jpeg",
+      "image/png",
+      "image/gif",
+      "image/svg+xml",
+      "image/webp",
+    ];
+    const isImage = (ext: string) => ACCEPTED_IMG_TYPE.includes(ext);
+
     registerDefaultExternalContentHandlers(
       editor,
       {

apps/roam/src/components/canvas/tldrawStyles.ts

@@ -65,16 +65,7 @@ export default /* css */ `
     font-family: "Inter", sans-serif;
   } */
 
-/* Discourse Graph ToolButton */
- button[data-value="discourse-tool"] div::before {
-  content: "";
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  background-image: url("data:image/svg+xml,%3Csvg width='256' height='264' viewBox='0 0 256 264' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z' fill='%23000000'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-}
+
 
 /* Maximize Tldraw Canvas */
 /* Used in conjunction with tailwind classes on the canvas container */

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

@@ -311,7 +311,7 @@ export const createUiOverrides = ({
 
     tools["discourse-tool"] = {
       id: "discourse-tool",
-      icon: "none",
+      icon: "discourseNodeIcon",
       label: "tool.discourse-tool" as TLUiTranslationKey,
       kbd: discourseToolShortcut,
       readonlyOk: true,