Editor Formatting

Editor Formatting

Validates all rich-text formatting operations available in the Inklings TipTap editor, including inline marks (bold, italic, strikethrough, inline code), block elements (headings H1–H3, bullet lists, numbered lists, code blocks, blockquotes), keyboard shortcut bindings, and undo/redo of formatting changes. These operations are the foundational content-creation surface of the app; regressions here directly impair the primary user workflow.

Preconditions

• Vite dev server running on http://localhost:1420
• A workspace exists and is open
• A new page has been created and the editor is focused

Scenarios

Seed: seed.spec.ts

1. Type plain text

Verify the editor accepts and displays unformatted text input.

Steps:

1. Click a new blank page in the sidebar to open it.
2. Click into the editor body area below the title field.
3. Type the text “The quick brown fox.”

Expected: The text “The quick brown fox.” appears in the editor without any formatting applied. The save indicator transitions to “Saved” within a few seconds.

2. Apply bold via toolbar button

Verify that selected text can be made bold using the formatting toolbar.

Steps:

1. Type “Hello World” into the editor body.
2. Double-click the word “World” to select it.
3. Click the Bold button in the formatting toolbar.

Expected: “World” is rendered in bold. The Bold toolbar button appears active/highlighted while the cursor is within the bold text.

3. Apply bold via keyboard shortcut

Verify the Cmd+B (macOS) / Ctrl+B (Windows/Linux) shortcut toggles bold.

Steps:

1. Type “Bold test” into the editor body.
2. Select all of “Bold test” by clicking and dragging, or by pressing Shift+Home/End.
3. Press Cmd+B (macOS) or Ctrl+B (Windows/Linux).

Expected: The selected text becomes bold. Pressing Cmd+B (or Ctrl+B) again with the text still selected removes the bold formatting and the text returns to normal weight.

4. Apply italic via toolbar button

Verify that selected text can be italicized.

Steps:

1. Type “Italic text” into the editor body.
2. Select all of “Italic text”.
3. Click the Italic button in the formatting toolbar.

Expected: “Italic text” is rendered in italics. The Italic toolbar button appears active while the cursor is within the italic text.

5. Apply italic via keyboard shortcut

Verify the Cmd+I / Ctrl+I shortcut toggles italic.

Steps:

1. Type “Emphasis” into the editor and select it.
2. Press Cmd+I (macOS) or Ctrl+I (Windows/Linux).

Expected: “Emphasis” becomes italic. Pressing the shortcut again with the text selected removes the italic formatting.

6. Apply strikethrough

Verify the strikethrough mark renders correctly.

Steps:

1. Type “Deprecated feature” into the editor body.
2. Select the entire text.
3. Apply strikethrough via the toolbar button or the appropriate keyboard shortcut.

Expected: “Deprecated feature” is rendered with a horizontal strikethrough line drawn through the middle of the text.

7. Apply inline code

Verify inline code formatting wraps text in a monospace code style.

Steps:

1. Type “Use the invoke function” into the editor body.
2. Double-click the word “invoke” to select it.
3. Apply inline code via the toolbar button or keyboard shortcut.

Expected: “invoke” is rendered in a distinct monospace/code style, visually differentiated from the surrounding prose text.

8. Apply H1 heading

Verify that a paragraph can be converted to an H1 heading.

Steps:

1. Type “Chapter One” on a new line in the editor body.
2. Place the cursor on that line.
3. Apply Heading 1 via the block type selector in the toolbar, or type # at the very start of the line before the text.

Expected: The text is rendered as a large H1 heading, visually larger than normal paragraph text.

9. Apply H2 heading

Verify that a paragraph can be converted to an H2 heading.

Steps:

1. Type “Section A” on a new line in the editor body.
2. Place the cursor on that line.
3. Apply Heading 2 via the block type selector in the toolbar, or type ## at the very start of the line.

Expected: The text is rendered as an H2 heading, smaller than H1 but larger than normal paragraph text.

10. Apply H3 heading

Verify that a paragraph can be converted to an H3 heading.

Steps:

1. Type “Subsection i” on a new line in the editor body.
2. Place the cursor on that line.
3. Apply Heading 3 via the block type selector in the toolbar, or type ### at the very start of the line.

Expected: The text is rendered as an H3 heading with appropriate visual hierarchy below H2.

11. Create an unordered (bullet) list

Verify that a paragraph block can become a bullet list.

Steps:

1. Place the cursor on a new line in the editor body.
2. Apply the unordered list format via the toolbar button, or type - (hyphen space) at the very start of the line and then type “Milk”.
3. Press Enter and type “Eggs”.
4. Press Enter and type “Bread”.

Expected: Three bullet points appear in sequence: Milk, Eggs, Bread. Each item has a bullet marker to its left.

12. Create an ordered (numbered) list

Verify that numbered list items are created and automatically incremented.

Steps:

1. Place the cursor on a new line in the editor body.
2. Apply the ordered list format via the toolbar button, or type 1. at the very start of the line and then type “First step”.
3. Press Enter and type “Second step”.
4. Press Enter and type “Third step”.

Expected: Three numbered list items appear labeled 1, 2, 3 in sequence.

13. Create a code block

Verify that a fenced code block can be inserted.

Steps:

1. Place the cursor on a new line in the editor body.
2. Insert a code block via the toolbar button, or type three backticks (```) at the very start of the line and press Enter.
3. Type const x = 42; inside the code block.

Expected: The content renders inside a visually distinct monospace code block, styled differently from paragraph text.

14. Create a code block with language annotation

Verify that a language-tagged code block displays the language identifier.

Steps:

1. Insert a code block using the toolbar or triple-backtick shortcut.
2. Set the language annotation to “typescript” (via the language input field on the code block, if present, or by typing ```typescript as the opening fence).
3. Type const x: number = 42; inside the block.

Expected: The code block renders with a “typescript” label or syntax highlighting appropriate to the language. The code content is displayed in full without truncation.

15. Create a blockquote

Verify that blockquote blocks render with correct visual styling.

Steps:

1. Type “To be or not to be” on a new line in the editor body.
2. Place the cursor on that line.
3. Apply blockquote formatting via the toolbar button, or type > at the very start of the line.

Expected: The text renders indented and visually styled as a blockquote (typically with a left border or distinct background).

16. Combine bold and italic on the same text

Verify that bold and italic marks can be stacked on the same selection.

Steps:

1. Type “Important note” into the editor body.
2. Select the entire text “Important note”.
3. Apply bold (Cmd+B or toolbar).
4. With the same text still selected, apply italic (Cmd+I or toolbar).

Expected: “Important note” renders simultaneously bold and italic — thicker weight and slanted.

17. Undo formatting change

Verify that a formatting action can be undone via the undo mechanism.

Steps:

1. Type “Revert me” into the editor body.
2. Select “Revert me” and apply bold (Cmd+B or toolbar).
3. Press Cmd+Z (macOS) or Ctrl+Z (Windows/Linux) to undo.

Expected: The bold formatting is removed and “Revert me” returns to plain text. The save indicator reflects the updated state.

18. Redo formatting change

Verify that an undone formatting action can be reapplied via redo.

Steps:

1. Perform the undo step described in scenario 17 so that “Revert me” is plain text.
2. Press Cmd+Shift+Z (macOS) or Ctrl+Shift+Z (Windows/Linux) to redo.

Expected: The bold formatting is reapplied to “Revert me”.

19. Remove formatting by re-applying the same mark

Verify that applying a mark to already-marked text toggles it off.

Steps:

1. Type a word and make it bold using Cmd+B or the toolbar.
2. Select that same bold word again.
3. Click the Bold toolbar button (or press Cmd+B) a second time.

Expected: The bold mark is removed and the text becomes plain. The Bold toolbar button no longer appears active.

20. Mixed formatting in a single paragraph persists across navigation

Verify the editor handles a paragraph with multiple inline formats and preserves them across a navigation round-trip.

Steps:

1. In a single paragraph, type some text, then apply bold to one word, italic to another word, and inline code to a third word within the same paragraph.
2. Wait for the save indicator to show “Saved”.
3. Click a different page in the sidebar to navigate away.
4. Click back to the original page.

Expected: After navigating back, all three inline formats (bold, italic, inline code) are visible exactly as authored. No formatting is lost or garbled.

Test Data

Key	Value	Notes
plain_text	The quick brown fox.	Scenario 1 baseline text
bold_target	World	Word made bold in scenario 2
h1_text	Chapter One	Heading H1 test text
h2_text	Section A	Heading H2 test text
h3_text	Subsection i	Heading H3 test text
list_items	Milk, Eggs, Bread	Bullet list items in scenario 11
code_content	const x = 42;	Code block content in scenario 13
code_language	typescript	Language tag in scenario 14
blockquote_text	To be or not to be	Blockquote content in scenario 15

Notes

• The editor uses TipTap with StarterKit (heading levels 1–4 configured). H4 is supported but not tested here as it is not listed in the primary scope.
• Undo/redo is handled by LoroUndoPlugin, not TipTap’s built-in mechanism. The built-in undoRedo is disabled (StarterKit.configure({ undoRedo: false })).
• Keyboard shortcut bindings (Cmd+B, Cmd+I, etc.) are standard ProseMirror bindings provided by TipTap StarterKit.
• Formatting operations are client-side only. Content is auto-saved after the last keystroke debounce (~300 ms). Scenarios that navigate away should wait for the “Saved” indicator before proceeding.