ObsiViewer/docs/NIMBUS_EDITOR_FIXES.md

Nimbus Editor Fixes - Implementation Summary

🎯 Objective

Fixed and adapted the Nimbus Editor block component to match the provided screenshots with proper visual styling, ellipsis menu, and Enter key behavior.

✅ Changes Implemented

1. Block Context Menu Component

File: src/app/editor/components/block/block-context-menu.component.ts (NEW)

• Created comprehensive context menu with all required options:

  • Alignment toolbar (left, center, right, justify)
  • Comment - Add comments to blocks
  • Add block - Insert new blocks (with submenu)
  • Convert to - Transform block types with full submenu:
    • Checklist, Number List, Bullet List
    • Toggle Block, Paragraph, Steps
    • Large/Medium/Small Headings
    • Code, Quote, Hint, Button
    • Collapsible headings
  • Background color - Color picker with Tailwind palette
  • Duplicate - Clone the block
  • Copy block - Copy to clipboard
  • Lock block 🔒 - Prevent editing
  • Copy Link - Copy block reference
  • Delete - Remove block (red highlight)

• Keyboard shortcuts displayed for each action

• Submenu support with hover/click interaction

• Theme-aware styling (light/dark modes)

2. Block Host Component Updates

File: src/app/editor/components/block/block-host.component.ts

Icon Change:

• ✅ Replaced 6-dot drag handle with ellipsis (⋯) icon
• Positioned absolutely at -left-8 for proper alignment
• Shows on hover with smooth opacity transition

Menu Integration:

• Click handler opens context menu at correct position
• Document-level click listener closes menu
• Menu actions wired to DocumentService methods
• Added data-block-id attribute for DOM selection

Visual Styling:

• rounded-2xl for modern rounded corners
• py-2 px-3 padding matching screenshots
• Transparent background by default
• Subtle hover state: bg-surface1/50 dark:bg-gray-800/50
• Active state: ring-1 ring-primary/50 (no heavy background)
• Removed aggressive active styling

3. Paragraph Block Component

File: src/app/editor/components/block/blocks/paragraph-block.component.ts

Enter Key Behavior:

• ✅ Pressing Enter creates a new block (no newline in same block)
• New block inserted immediately after current
• Focus automatically moves to new block
• Cursor positioned at start of new block

Backspace Behavior:

• Delete empty block when Backspace pressed at start
• Prevents orphaned empty blocks

Visual Styling:

• text-base for proper font size
• text-neutral-100 for consistent text color
• Placeholder: "Start writing or type '/', '@'"
• Transparent background matching page
• min-height: 1.5rem for consistent block height
• line-height: 1.5 for readability

Text Display:

• ✅ No text reversal issues (verified no reverse() calls)
• Text displays normally as typed

4. Editor Shell Component

File: src/app/editor/components/editor-shell/editor-shell.component.ts

Status Indicator:

• Moved to top of page (above title)
• Smaller text: text-xs
• Muted color: text-neutral-400 dark:text-neutral-500
• Format: "2 blocks • ✓ Saved"
• Real-time save state updates

Background:

• Added bg-card dark:bg-main to match app theme
• Consistent with rest of application

Title Input:

• Added theme-aware text color
• Proper focus states

5. Nimbus Editor Page Component

File: src/app/features/tests/nimbus-editor/nimbus-editor-page.component.ts

Removed DaisyUI Classes:

• Replaced all bg-base-* with theme tokens
• Replaced btn classes with custom Tailwind
• Replaced dropdown with CSS hover menu
• Replaced kbd with custom styled elements

Theme-Aware Styling:

• Topbar: bg-surface1 dark:bg-gray-800
• Footer: bg-surface1 dark:bg-gray-800
• Borders: border-border dark:border-gray-700
• Text: text-main dark:text-neutral-100
• Export menu: Hover-based dropdown
• Clear button: Red accent with transparency

🎨 Visual Appearance

Block Styling

.block-wrapper {
  @apply relative py-2 px-3 rounded-2xl transition-all;
  min-height: 40px;
  background-color: transparent;
}

.block-wrapper:hover {
  @apply bg-surface1/50 dark:bg-gray-800/50;
}

.block-wrapper.active {
  @apply ring-1 ring-primary/50;
}

Ellipsis Menu Handle

<button class="menu-handle opacity-0 group-hover:opacity-100 
               absolute -left-8 top-1/2 -translate-y-1/2 
               p-1.5 rounded hover:bg-surface2">
  <svg><!-- 3 horizontal dots --></svg>
</button>

Paragraph Block

<div contenteditable="true"
     class="w-full bg-transparent text-base text-neutral-100 
            focus:outline-none"
     placeholder="Start writing or type '/', '@'">
</div>

🧪 Behavior Validation

✅ Text Display

• Text appears in correct order (no reversal)
• Typing works normally
• Copy/paste preserves order

✅ Ellipsis Menu

• Appears on block hover
• Click opens full context menu
• All menu items functional
• Submenus work correctly
• Keyboard shortcuts displayed

✅ Enter Key

• Creates new block below current
• No newline inserted in same block
• Focus moves to new block
• Cursor positioned correctly

✅ Block Appearance

• Rounded corners (rounded-2xl)
• Proper padding (px-3 py-2)
• Background matches page
• Hover state visible
• Active state subtle ring

✅ Status Indicator

• Shows block count
• Shows save state (Saved/Saving/Error)
• Updates in real-time
• Positioned at top

🌓 Theme Compatibility

All components support both light and dark themes:

Light Theme

• bg-card / bg-surface1 / bg-surface2
• text-main / text-text-muted
• border-border

Dark Theme

• dark:bg-main / dark:bg-gray-800 / dark:bg-gray-700
• dark:text-neutral-100 / dark:text-neutral-500
• dark:border-gray-700

📁 Files Modified

1. ✅ src/app/editor/components/block/block-context-menu.component.ts (NEW)
2. ✅ src/app/editor/components/block/block-host.component.ts
3. ✅ src/app/editor/components/block/blocks/paragraph-block.component.ts
4. ✅ src/app/editor/components/editor-shell/editor-shell.component.ts
5. ✅ src/app/features/tests/nimbus-editor/nimbus-editor-page.component.ts

🚀 Testing Instructions

1. Navigate to Section Tests > Éditeur Nimbus
2. Verify text displays correctly (not reversed)
3. Hover over a block - ellipsis (⋯) should appear
4. Click ellipsis - context menu opens with all options
5. Type text and press Enter - new block created below
6. Check status indicator shows "X blocks • ✓ Saved"
7. Test in both light and dark themes
8. Verify block styling matches screenshots

🔧 Technical Notes

Angular 20 Features Used

• Standalone components
• Signals for reactive state
• Control flow syntax (@if, @for)
• Inject function for DI

Tailwind 3.4

• Custom theme tokens (surface1, surface2, text-muted)
• Dark mode classes
• Opacity modifiers
• Arbitrary values

No Text Reversal

• Verified no split('').reverse().join('') in codebase
• [textContent] binding works correctly
• ContentEditable input handled properly

✨ Result

The Nimbus Editor now matches the provided screenshots with:

• ⋯ Ellipsis menu icon (not 6 dots)
• Full context menu with submenus
• Enter creates new blocks (one block = one line)
• Proper visual styling (rounded-2xl, correct padding)
• Status indicator at top
• Theme-aware colors
• No text reversal issues