Skip to content

canvas: what the review of #97 found, fixed #98

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
Jing-yilin merged 6 commits into from
Sep 18, 2026
Merged

canvas: what the review of #97 found, fixed #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7db61e6
canvas: what the review of #97 found, fixed
Jing-yilin Sep 18, 2026
14b6e58
Merge origin/canvas-geist-ui into fix/canvas-geist-ui-review
Jing-yilin Sep 18, 2026
2b19654
canvas: the second review of the fix branch
Jing-yilin Sep 18, 2026
fc449a0
canvas: the server's image folder is made, not named
Jing-yilin Sep 18, 2026
e34d264
canvas: a picture already in the tray is not a twenty-first, and the …
Jing-yilin Sep 18, 2026
8f1bfe2
canvas: a pick that cannot fit is refused before it is read
Jing-yilin Sep 18, 2026
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
4 changes: 2 additions & 2 deletions canvas/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ import { installCanvasComments, readCommentUser } from "./canvasComments";
import {
CanvasChromeContext,
canvasChromeComponents,
canvasCommentOverrides,
canvasUiOverrides,
canvasCommentTools,
} from "./canvasChrome";

Expand Down Expand Up @@ -1398,7 +1398,7 @@ export default function App() {
store={store}
shapeUtils={shapeUtils}
tools={canvasCommentTools}
overrides={canvasCommentOverrides}
overrides={canvasUiOverrides}
licenseKey={TLDRAW_LICENSE_KEY}
onMount={handleMount}
>
Expand Down
30 changes: 6 additions & 24 deletions canvas/src/CanvasFileShapeUtil.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,7 @@ export type CanvasFileShape = TLShape<typeof CANVAS_FILE_SHAPE_TYPE>;
function CanvasFile({ shape }: { shape: CanvasFileShape }) {
const isEditing = useIsEditing(shape.id);
const { inspectingPath, setInspectorFrame } = useContext(CanvasChromeContext);
const loaded = useCanvasFileHtml(shape.props.path);

/**
* A frame paints an opaque white base background of its own, underneath whatever the board
* draws, and nothing out here reaches it: not `background` on the `<iframe>`, not
* `allowtransparency`, not `color-scheme` on the element, not a transparent `html` inside.
* Measured, all five paint the same #FFFFFF. A dark `color-scheme` on the board's own root is
* the one thing that releases it. The canvas then shows through wherever the board paints
* nothing, whatever colour the canvas is, which is why this does not depend on the theme.
*
* The `color` pin keeps the black that a light `color-scheme` gives the root, because the
* status bar's glyphs are `currentColor` and would otherwise turn white with the scheme. It
* goes in right after the doctype: before the board's own rules, so a board that sets either
* wins, and after the doctype, because anything before it is quirks mode. Every board has one.
* `</head>` is not a safe anchor, since 51 of them close no head.
*/
const html = useMemo(
() =>
loaded?.replace(
/(<!doctype html>)/i,
"$1<style>:root{color-scheme:dark;color:#000}</style>",
),
[loaded],
);
const html = useCanvasFileHtml(shape.props.path);

/**
* The board the inspector has open runs the agent (inspectorAgent.ts), so a click on the mockup
Expand Down Expand Up @@ -88,6 +65,11 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
border: 0,
display: "block",
pointerEvents: isEditing ? "auto" : "none",
// The board's own scheme, so the frame composites transparent rather than painting the
// white backdrop a frame gets under a document whose scheme differs from its element's.
// On the element, so nothing is written into the board. Measured in
// docs/2026-09-17-canvas-geist.md.
colorScheme: "light",
};

return (
Expand Down
Loading
Loading