Skip to content

feat: block text alignment (left, center, right) #196

@oobagi

Description

@oobagi

Problem

There's no way to change the alignment of a block. All content renders left-aligned. Users should be able to set blocks to left, center, or right alignment.

Context

The block model (internal/block/block.go) currently has three fields: Type, Content, and Checked. Rendering in internal/editor/render.go always left-aligns text within the available width. The command palette (internal/editor/palette.go) handles block type changes but has no concept of block properties beyond type.

Key files:

  • internal/block/block.go — Block struct, BlockType enum
  • internal/block/parse.go — Markdown → Blocks parsing
  • internal/block/serialize.go — Blocks → Markdown serialization
  • internal/editor/editor.go — Keyboard handling, block operations
  • internal/editor/render.go — Active/inactive/view rendering
  • internal/editor/palette.go — Command palette
  • internal/editor/undo.go — State snapshots (includes block data)

Approach

Data model: Add an Align field to Block (enum: Left, Center, Right, default Left).

Markdown persistence: Serialize as an HTML comment above the block — <!-- align:center -->. This is invisible to other markdown renderers and won't corrupt content. On parse, detect and strip the comment, setting the block's alignment.

Rendering: Pad lines with leading spaces to shift content center or right within the available width. Applies to both active block, inactive block, and view mode rendering paths in render.go.

UX:

  • Add /left, /center, /right entries to the command palette
  • Consider a keyboard shortcut (single key that cycles, or direct shortcuts — avoid Ctrl+E/Ctrl+A per macOS terminal conflicts)
  • Show alignment in the gutter or as a subtle indicator

Tasks

  • Add Align field and Alignment enum to internal/block/block.go
  • Update internal/block/parse.go to detect <!-- align:X --> comments and set alignment
  • Update internal/block/serialize.go to emit alignment comments for non-left blocks
  • Update internal/editor/render.go — pad lines for center/right in all three render paths
  • Add alignment entries to the command palette in internal/editor/palette.go
  • Add keyboard shortcut for alignment cycling in internal/editor/editor.go
  • Update editorState in internal/editor/undo.go if needed (alignment is stored on blocks, so it should already be captured)
  • Add tests for parse/serialize round-tripping with alignment comments

Acceptance criteria

  • Blocks can be set to left, center, or right alignment via palette or shortcut
  • Alignment persists across save/load (markdown round-trip)
  • Alignment renders correctly in edit mode and view mode
  • Default is left-aligned; no <!-- align:left --> comment emitted for default
  • Undo/redo captures alignment changes

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions