Skip to content

[ENG-968] Obsidian - Open node functionalities #524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 18, 2025
+119 −17
Merged

[ENG-968] Obsidian - Open node functionalities #524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c165363
new ways to open file
trangdoan982 Oct 29, 2025
3f65cb2
sm fix
trangdoan982 Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 8 additions & 14 deletions apps/obsidian/src/components/canvas/TldrawViewComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { RelationsOverlay } from "./overlays/RelationOverlay";
import { showToast } from "./utils/toastUtils";
import { WHITE_LOGO_SVG } from "~/icons";
import { CustomContextMenu } from "./CustomContextMenu";
import { openFileInSidebar, openFileInNewTab } from "./utils/openFileUtils";

type TldrawPreviewProps = {
store: TLStore;
Expand Down Expand Up @@ -235,8 +236,10 @@ export const TldrawPreviewComponent = ({
isCreatingRelationRef.current = false;
}

if (e.shiftKey) {
// Handle Shift+Click (open in sidebar) or Cmd+Click (open in new tab)
if (e.shiftKey || e.metaKey) {
const now = Date.now();
const openInNewTab = e.metaKey; // Cmd on Mac, Ctrl on other platforms

// Debounce to prevent double opening
if (now - lastShiftClickRef.current < SHIFT_CLICK_DEBOUNCE_MS) {
Expand Down Expand Up @@ -295,21 +298,12 @@ export const TldrawPreviewComponent = ({
return;
}

const rightSplit = plugin.app.workspace.rightSplit;
const rightLeaf = plugin.app.workspace.getRightLeaf(false);

if (rightLeaf) {
if (rightSplit && rightSplit.collapsed) {
rightSplit.expand();
}
await rightLeaf.openFile(linkedFile);
plugin.app.workspace.setActiveLeaf(rightLeaf);
// Open in sidebar (Shift+Click) or new tab (Cmd+Click)
if (openInNewTab) {
await openFileInNewTab(plugin.app, linkedFile);
} else {
const leaf = plugin.app.workspace.getLeaf("split", "vertical");
await leaf.openFile(linkedFile);
plugin.app.workspace.setActiveLeaf(leaf);
await openFileInSidebar(plugin.app, linkedFile);
}

editor.selectNone();
})
.catch((error) => {
Expand Down
89 changes: 86 additions & 3 deletions apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
TLBaseShape,
TLResizeInfo,
useEditor,
useValue,
} from "tldraw";
import type { App, TFile } from "obsidian";
import { memo, createElement, useEffect } from "react";
Expand All @@ -18,6 +19,8 @@ import {
import { resolveLinkedFileFromSrc } from "~/components/canvas/stores/assetStore";
import { getNodeTypeById } from "~/utils/typeUtils";
import { calcDiscourseNodeSize } from "~/utils/calcDiscourseNodeSize";
import { openFileInSidebar } from "~/components/canvas/utils/openFileUtils";
import { showToast } from "~/components/canvas/utils/toastUtils";

export type DiscourseNodeShape = TLBaseShape<
"discourse-node",
Expand Down Expand Up @@ -140,6 +143,14 @@ const discourseNodeContent = memo(
const { src, title, nodeTypeId } = shape.props;
const nodeType = getNodeTypeById(plugin, nodeTypeId);

const isHovered = useValue(
"is hovered",
() => {
return editor.getHoveredShapeId() === shape.id;
},
[editor, shape.id],
);

useEffect(() => {
const loadNodeData = async () => {
if (!src) {
Expand Down Expand Up @@ -255,17 +266,89 @@ const discourseNodeContent = memo(
nodeType?.keyImage,
]);

const handleOpenInSidebar = async (): Promise<void> => {
if (!src) {
showToast({
severity: "warning",
title: "Cannot open node",
description: "No source file linked",
});
return;
}
try {
const linkedFile = await resolveLinkedFileFromSrc({
app,
canvasFile,
src,
});

if (!linkedFile) {
showToast({
severity: "warning",
title: "Cannot open node",
description: "Linked file not found",
});
return;
}

await openFileInSidebar(app, linkedFile);
editor.selectNone();
} catch (error) {
console.error("Error opening linked file:", error);
showToast({
severity: "error",
title: "Error",
description: "Failed to open linked file",
});
}
};

return (
<div
style={{
backgroundColor: nodeType?.color ?? "",
}}
// NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
// NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
// correspond to constants in nodeConstants.ts. If you change these classes, update the
// constants and the measureNodeText function to keep measurements accurate.
className="box-border flex h-full w-full flex-col items-start justify-start rounded-md border-2 p-2"
className="relative box-border flex h-full w-full flex-col items-start justify-center rounded-md border-2 p-2"
>
<h1 className="m-1 text-base">{title || "..."}</h1>
{isHovered && (
<button
onClick={(e) => {
e.stopPropagation();
void handleOpenInSidebar();
Copy link
Contributor

@mdroidian mdroidian Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we might be calling handleOpenInSidebar() in two places? Here an onMount pointer_up?

Copy link
Collaborator Author

@trangdoan982 trangdoan982 Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you have to do Cmd + Click to open in a new tab to open file in a new tab

Copy link
Collaborator

@sid597 sid597 Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • cmd+click works for me it opens up a new tab
  • Button click opens up in sidebar

From my investigation it is the case that both places are handling different cases, in onMount we are handling shift and cmd click on the node shape and here we are handling the button click

}}
onPointerDown={(e) => {
e.stopPropagation();
e.preventDefault();
}}
onPointerUp={(e) => {
e.stopPropagation();
}}
className="absolute left-1 top-1 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-black/10 bg-white/90 p-1 shadow-sm transition-all duration-200 hover:bg-white"
style={{
pointerEvents: "auto",
}}
title="Open in sidebar"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="15" y1="3" x2="15" y2="21" />
</svg>
</button>
)}
<h1 className="m-0 text-base">{title || "..."}</h1>
<p className="m-0 text-sm opacity-80">{nodeType?.name || ""}</p>
{shape.props.imageSrc ? (
<div className="mt-2 flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
Expand Down
25 changes: 25 additions & 0 deletions apps/obsidian/src/components/canvas/utils/openFileUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { App, TFile } from "obsidian";

export const openFileInSidebar = async (app: App, file: TFile): Promise<void> => {
const rightSplit = app.workspace.rightSplit;
const rightLeaf = app.workspace.getRightLeaf(false);

if (rightLeaf) {
if (rightSplit && rightSplit.collapsed) {
rightSplit.expand();
}
await rightLeaf.openFile(file);
app.workspace.setActiveLeaf(rightLeaf);
} else {
const leaf = app.workspace.getLeaf("split", "vertical");
await leaf.openFile(file);
app.workspace.setActiveLeaf(leaf);
}
};

export const openFileInNewTab = async (app: App, file: TFile): Promise<void> => {
const leaf = app.workspace.getLeaf("tab");
await leaf.openFile(file);
app.workspace.setActiveLeaf(leaf);
};