feat: compact (reading) view mode for Step block#67
Merged
Conversation
Add a third Step view mode alongside vertical and horizontal. In compact mode each step renders as a tight, reading-focused row (number + content; no per-step header, no formatting toolbar, no Add Step / Step data / Expected result buttons). Focusing an editable field expands that step to the full editing layout and collapses it on blur with no layout jump — the OverType editors stay mounted so the caret is preserved. - Cycle the per-step view toggle through vertical -> horizontal -> compact. - Drop OverType's 4rem min-height floor in compact so reading rows hug a single line (live options.minHeight + textarea rows=1, plus higher-specificity CSS to beat OverType's runtime-injected min-height: 60px). - Prefix the expected-result line with a small inline "Expected" label while reading (preview pseudo-element, never serialized). - Fix Markdown preview not updating: the deferred BlockNoteView mount broke the useEditorChange subscription; render the view immediately (keeping the EditorErrorBoundary for crash recovery). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Deploying blocks with
|
| Latest commit: |
79b8639
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://db30d142.blocks-cno.pages.dev |
| Branch Preview URL: | https://feat-step-compact-mode.blocks-cno.pages.dev |
Resolve conflicts after master gained the TestMeta block (#65) and the large-paste perf work (#66, per-block lazy mount via useDeferredMount). - App.tsx: take master's version. My branch's App.tsx changes (the EditorErrorBoundary + removing a deferred BlockNoteView mount) are obsolete: master never committed that deferred mount, so it renders the view directly and the Markdown preview already updates correctly. The error boundary is dropped to match master. - step.tsx / styles.css: auto-merged — the compact view mode (inner TestStepContent render) and the deferred-mount wrapper (TestStepBlock / TestStepPreview) live at different layers and compose cleanly. Verified: tsc clean, 175 tests pass, and in-browser both vertical and compact modes work (compact collapse/expand has 0px focus jump, toolbars/headers gate correctly) with the live Markdown preview and no console errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a third compact view mode for the Step block, alongside the existing vertical and horizontal modes. Compact is reading-focused: each step renders as a tight row (number + content) with no per-step "Step" header, no formatting toolbar, and no Add Step / Step data / Expected result buttons.
Clicking into any editable field expands that step to the full normal editing layout and collapses it again on blur — with no layout jump. The OverType editors stay mounted across the transition, so the caret is preserved.
The per-step view-toggle now cycles vertical → horizontal → compact.
Details
4remmin-height floor is dropped via liveoptions.minHeight+ textarearows=1, plus higher-specificity CSS to beat OverType's runtime-injectedmin-height: 60px.BlockNoteViewmount (uncommitted in the working tree) broke theuseEditorChangesubscription. The view now renders immediately; theEditorErrorBoundaryis kept for crash recovery.Testing
tsc -bclean,vite buildsucceeds, all 158 unit tests pass.🤖 Generated with Claude Code