Skip to content

feat(board): improve board editor UI with tables, callouts, and drag-drop #32

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
tendtoyj merged 23 commits into from
Feb 19, 2026
Merged

feat(board): improve board editor UI with tables, callouts, and drag-drop #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
f1cd1a2
fix(frontend): keep board add-tab button fixed outside scroll
tendtoyj Feb 18, 2026
8a91015
fix(frontend): keep add-tab button adjacent until tab overflow
tendtoyj Feb 18, 2026
b93f04e
fix(frontend): adjust board toolbar and editor horizontal padding
tendtoyj Feb 18, 2026
afc6156
fix(frontend): darken board editor body text to match theme foreground
tendtoyj Feb 18, 2026
9bade65
fix(frontend): add bottom padding to board toolbar container
tendtoyj Feb 19, 2026
bf30d4b
feat(frontend): add board editor divider support
tendtoyj Feb 19, 2026
d4ec947
feat(frontend): add board editor callout block support
tendtoyj Feb 19, 2026
d866eda
test(frontend): add board editor callout/slash regressions
tendtoyj Feb 19, 2026
15e42c6
chore(frontend): add temporary Figma HTML-to-Design capture script
tendtoyj Feb 19, 2026
f8db48e
refactor(frontend): fork draggable block plugin to local module
tendtoyj Feb 19, 2026
42432cd
fix(frontend): use viewport coordinates in draggable block plugin
tendtoyj Feb 19, 2026
c727250
fix(frontend): add top:0 to drag target line for correct positioning
tendtoyj Feb 19, 2026
1ea7636
feat(editor): add markdown table node scaffold
tendtoyj Feb 19, 2026
11944da
feat(editor): add markdown table component and parser utils
tendtoyj Feb 19, 2026
3f9bab4
feat(editor): import markdown tables into board lexical nodes
tendtoyj Feb 19, 2026
77a90b3
feat(editor): style board markdown tables for overflow and headers
tendtoyj Feb 19, 2026
1a3b210
style(editor): normalize paragraph and list margins in board theme
tendtoyj Feb 19, 2026
b5a3f7e
feat(board): add tab toolbar right action menu placeholders
tendtoyj Feb 19, 2026
1c2846a
feat(frontend): add board title block in editor
tendtoyj Feb 19, 2026
76ba7ba
fix(frontend): stabilize board tab state sync
tendtoyj Feb 19, 2026
a681013
test(frontend): add board title helper regression tests
tendtoyj Feb 19, 2026
2da6ff5
style(editor): adjust board editor spacing and placeholder alignment
tendtoyj Feb 19, 2026
9653445
style(editor): reduce board title font size from 4xl to 2xl
tendtoyj Feb 19, 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
42 changes: 42 additions & 0 deletions frontend/pluto_duck_frontend/app/editor-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.board-editor-prose .markdown-table-node {
margin: 8px 0;
overflow-x: auto;
}

.board-editor-prose .markdown-table-node table {
font-size: 0.8rem;
border-collapse: collapse;
width: max-content;
min-width: 100%;
max-width: none;
}

.board-editor-prose .markdown-table-node thead th {
text-align: left;
font-weight: 600;
padding: 8px 12px;
background: hsl(var(--muted));
white-space: nowrap;
border-bottom: 2px solid hsl(var(--border));
}

.board-editor-prose .markdown-table-node tbody td {
text-align: left;
padding: 7px 12px;
color: hsl(var(--muted-foreground));
white-space: nowrap;
background: hsl(var(--background));
border-bottom: 1px solid hsl(var(--border));
}

.board-editor-prose .markdown-table-node tbody tr:last-child td {
border-bottom: none;
}

.board-editor-prose .markdown-table-node tbody tr:hover td {
background: hsl(var(--accent));
}

.board-editor-prose .markdown-table-node :is(th, td)[contenteditable="true"] {
outline: none;
}
49 changes: 49 additions & 0 deletions frontend/pluto_duck_frontend/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import './editor-table.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
Expand Down Expand Up @@ -217,6 +219,53 @@
margin-bottom: 0;
}

.board-editor-prose hr {
border: 0;
border-top: 1px solid hsl(var(--border));
margin: 1.25rem 0;
}

.board-editor-prose .callout-node {
margin: 1rem 0;
}

.board-editor-prose .callout-node-shell {
border-radius: 0.5rem;
padding: 0.625rem 0.75rem;
}

.board-editor-prose .callout-node[data-callout-type="info"] .callout-node-shell {
background: hsl(210 100% 96%);
}

.board-editor-prose .callout-node[data-callout-type="warning"] .callout-node-shell {
background: hsl(42 100% 94%);
}

.board-editor-prose .callout-node[data-callout-type="success"] .callout-node-shell {
background: hsl(141 58% 94%);
}

.board-editor-prose .callout-node[data-callout-type="error"] .callout-node-shell {
background: hsl(0 87% 95%);
}

.dark .board-editor-prose .callout-node[data-callout-type="info"] .callout-node-shell {
background: hsl(210 35% 22%);
}

.dark .board-editor-prose .callout-node[data-callout-type="warning"] .callout-node-shell {
background: hsl(40 30% 24%);
}

.dark .board-editor-prose .callout-node[data-callout-type="success"] .callout-node-shell {
background: hsl(140 28% 24%);
}

.dark .board-editor-prose .callout-node[data-callout-type="error"] .callout-node-shell {
background: hsl(0 28% 24%);
}

/* Chat prose typography: table overrides */
[role="log"] .prose :where([data-streamdown="table-wrapper"]) {
margin: 8px 0;
Expand Down
6 changes: 6 additions & 0 deletions frontend/pluto_duck_frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { ReactNode } from 'react';
import Script from 'next/script';

import './globals.css';
import { Providers } from './providers';
Expand All @@ -13,6 +14,11 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<html lang="en">
<body className="h-screen overflow-hidden">
<Providers>{children}</Providers>
{/* Temporary: Figma capture script - REMOVE after capture */}
<Script
src="https://mcp.figma.com/mcp/html-to-design/capture.js"
strategy="afterInteractive"
Comment on lines +18 to +20

@chatgpt-codex-connector chatgpt-codex-connector Bot Feb 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P1 Badge Remove temporary third-party script from root layout

Loading https://mcp.figma.com/mcp/html-to-design/capture.js in RootLayout executes remote third-party code for every page load in all environments, which introduces unnecessary security/privacy risk and an external runtime dependency (and can fail under strict CSP or restricted egress). Since this is marked temporary, it should be removed or explicitly gated to local/dev-only tooling.

Useful? React with 👍 / 👎.

/>
</body>
</html>
);
Expand Down
12 changes: 11 additions & 1 deletion frontend/pluto_duck_frontend/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,17 @@ function WorkspacePageBody({
updateBoard,
deleteBoard,
selectBoard,
applyBoardUpdate,
loadBoards,
} = useBoards({
projectId: defaultProjectId || '',
enabled: !!defaultProjectId && backendReady,
});

const handleBoardUpdateFromBoardsView = useCallback((updatedBoard: Board) => {
applyBoardUpdate(updatedBoard);
}, [applyBoardUpdate]);

// Project state management for auto-save
const { debouncedSaveState, saveState } = useProjectState({
projectId: defaultProjectId,
Expand Down Expand Up @@ -879,7 +884,12 @@ function WorkspacePageBody({
<div className="relative flex flex-1 flex-col overflow-hidden">
{defaultProjectId ? (
mainView === 'boards' ? (
<BoardsView ref={boardsViewRef} projectId={defaultProjectId} activeBoard={activeBoard} />
<BoardsView
ref={boardsViewRef}
projectId={defaultProjectId}
activeBoard={activeBoard}
onBoardUpdate={handleBoardUpdateFromBoardsView}
/>
) : mainView === 'datasets' ? (
selectedDataset ? (
<DatasetDetailView
Expand Down
Loading