José Almeida
120 lines
4.3 KiB
Markdown
120 lines
4.3 KiB
Markdown
---
|
|
id: "02-enable-plan-resizing"
|
|
title: "Enable resizing in editable Plan view"
|
|
status: done
|
|
wave: 2
|
|
depends_on:
|
|
- "01-extend-markdown-previews"
|
|
plan: "plan.md"
|
|
requirements:
|
|
- REQ-UI-RESIZABLE-MARKDOWN-TABLES-001
|
|
acceptance_criteria:
|
|
- AC-UI-RESIZABLE-MARKDOWN-TABLES-001.10
|
|
- AC-UI-RESIZABLE-MARKDOWN-TABLES-001.11
|
|
- AC-UI-RESIZABLE-MARKDOWN-TABLES-001.12
|
|
- AC-UI-RESIZABLE-MARKDOWN-TABLES-001.13
|
|
system_design:
|
|
- ../../specs/ui/system-design/resizable-markdown-tables.md
|
|
---
|
|
|
|
# Task 02: Enable Resizing in Editable Plan View
|
|
|
|
## Summary
|
|
|
|
Enable TipTap's native table-column drag behavior in the live Plan panel on
|
|
desktop fine-pointer layouts. Keep widths ephemeral and source-preserving, and
|
|
remove the resize plugin when the viewport or pointer capability becomes
|
|
ineligible.
|
|
|
|
## In scope
|
|
|
|
- Configure live Plan `Table` extensions with responsive resizing, a 64-pixel
|
|
minimum, and internal boundaries only.
|
|
- Recreate the editor from parent draft Markdown when resize capability changes.
|
|
- Add Plan-scoped wrapper, handle, cursor, and overflow CSS.
|
|
- Add focused desktop and Mobile Chrome Plan table E2E coverage.
|
|
|
|
## Out of scope
|
|
|
|
- Changing read-only revision previews or comparison dialogs.
|
|
- Persisting ProseMirror `colwidth` attributes.
|
|
- Replacing TipTap's table plugin with a custom resize engine.
|
|
- Adding Plan table authoring, row, or column management commands.
|
|
|
|
## Acceptance
|
|
|
|
- A desktop Plan table supports internal-boundary drag, enforces the 64-pixel
|
|
minimum, and remains contained by its local table wrapper.
|
|
- Width-only editor state never changes persisted plan Markdown and clears after
|
|
reload or capability loss without losing current draft text.
|
|
- Mobile and coarse-pointer Plan layouts expose no resize affordance, keep table
|
|
content readable, and cause no document horizontal overflow.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
(cd apps && pnpm install --frozen-lockfile)
|
|
(cd apps && pnpm --filter @kandev/web exec vitest run \
|
|
lib/markdown/table-resize.test.ts \
|
|
components/editors/tiptap/tiptap-plan-editor.test.tsx)
|
|
(cd apps/web && pnpm run typecheck)
|
|
(cd apps && pnpm --filter @kandev/web exec eslint \
|
|
components/editors/tiptap/tiptap-plan-editor.tsx \
|
|
e2e/tests/task/plan-table-resize.spec.ts \
|
|
e2e/tests/task/mobile-plan-table-resize.spec.ts)
|
|
(cd apps/web && pnpm e2e:run tests/task/plan-table-resize.spec.ts)
|
|
(cd apps/web && pnpm e2e:run --project mobile-chrome tests/task/mobile-plan-table-resize.spec.ts)
|
|
git diff --check
|
|
```
|
|
|
|
## Files likely touched
|
|
|
|
- `apps/web/components/editors/tiptap/tiptap-plan-editor.tsx`
|
|
- `apps/web/components/editors/tiptap/tiptap-plan-editor.test.tsx`
|
|
- `apps/web/app/globals.css`
|
|
- `apps/web/e2e/tests/task/plan-table-resize.spec.ts`
|
|
- `apps/web/e2e/tests/task/mobile-plan-table-resize.spec.ts`
|
|
|
|
## Dependencies
|
|
|
|
- Task 01 establishes the target cross-surface responsive contract and completes
|
|
shared rendered-preview integration before the editor-specific variant.
|
|
|
|
## Risks
|
|
|
|
- `useEditor` recreation must use current parent draft content or it can discard
|
|
unsaved text on a responsive capability transition.
|
|
- TipTap's mounted `colwidth` attributes must stay absent from serialized and
|
|
persisted Markdown.
|
|
- ProseMirror handle classes are generated by the pinned table dependency, so
|
|
styles and selectors must remain Plan-scoped.
|
|
|
|
## Parallelism
|
|
|
|
`sequential`
|
|
|
|
## Inputs
|
|
|
|
- `docs/specs/ui/requirements/resizable-markdown-tables.md`
|
|
- `docs/specs/ui/system-design/resizable-markdown-tables.md`
|
|
- TipTap 3.19 `Table` and ProseMirror tables 1.8.5 resize contracts installed by
|
|
the workspace lockfile
|
|
- Existing mobile Plan entry in
|
|
`apps/web/components/task/mobile/session-mobile-layout.tsx`
|
|
|
|
## Results
|
|
|
|
Enabled TipTap's table resize plugin only on desktop fine-pointer layouts, with
|
|
the shared 64-pixel minimum, internal-boundary behavior, Plan-scoped overflow
|
|
and handle styles, and editor recreation when resize capability changes. Draft
|
|
Markdown survives that recreation, while transient `colwidth` state remains
|
|
absent from serialized and persisted Markdown.
|
|
|
|
Validation completed 2026-08-24:
|
|
|
|
- Focused Vitest suite: 10 tests passed.
|
|
- Web typecheck and scoped ESLint: passed.
|
|
- Desktop Plan table Playwright suite: 1 test passed, including the autosave window.
|
|
- Mobile Chrome Plan table Playwright suite: 1 test passed.
|
|
- `git diff --check`: passed.
|