Skip to content

Conversation

@cybersader
Copy link

@cybersader cybersader commented Nov 21, 2025

This PR adds the ability to click on timeline events to view and edit their details with a rich editing experience.

Features

WYSIWYG Event Editor (New!)

  • True inline formatting using CodeMirror 6
    • Bold, italic, strikethrough render inline (syntax hidden un
      til cursor is on that
      line)
    • Interactive checkboxes for task lists (click to toggle)
    • Fenced code block highlighting with background styling
    • Links display as clickable text, URL hidden until editing
  • Full undo/redo support (Ctrl+Z, Ctrl+Shift+Z)
  • Editable event titles directly in the modal header

Date/Time Picker

  • Combined datetime-local inputs for From/To dates
  • Smart time display (only shows time when not midnight)
  • Live summary preview of formatted date range
  • Updates event dates when saved

Editor Mode Settings

  • Settings toggle to switch between:
    • WYSIWYG mode (default) - Rich text editing with inline form
      atting
    • Plain text mode - Split view (source + preview) or source o
      nly

Event Detail Modal

  • Click any event in the timeline to open the modal
  • Event title and date range (with time support)
  • Tags displayed as styled badges
  • Full markdown-rendered description

Bug Fixes

  • Fixed title parsing bug with times containing colons (e.g., 1
    0:30am)
  • Cleaner date format when dragging events on timeline
  • Fixed file switching issues where colors would disappear and
    clicks became
    unreliable

Technical Changes

  • New WysiwygEventModal.ts - WYSIWYG modal implementation
  • New src/editor/WysiwygEditor.ts - CodeMirror 6 WYSIWYG editor
    component
  • New EventDetailModal.ts - Plain text modal (split view/source
    only)
  • Updated MarkwhenView.ts - Routes to correct modal based on se
    ttings
  • Updated main.ts - Added editorMode setting with UI toggle
  • Updated dateTimeUtilities.ts - Improved date formatting
  • New CodeMirror dependencies (@codemirror/commands, @codemirro
    r/lang-markdown,
    @codemirror/language)
  • Comprehensive CSS styling for both modal types

Closes #4, Related to #22, #43

@cybersader
Copy link
Author

Obsidian_myoAFNpD01.mp4

@cybersader
Copy link
Author

I couldn't figure out a WYSIWYG editor for this - seems there's not an obvious way to do this since Obsidian uses its own code mirror 6 under the hood to do this. Then again, I very well don't probably know what I'm talking about since this is my first Obsidian plugin contribution

@cybersader
Copy link
Author

Attempting to refactor or revive the WYSIWYG approach

@cybersader cybersader force-pushed the feature/event-detail-modal branch from 431a5cf to fa6f58e Compare December 7, 2025 20:55
Major features:
- True WYSIWYG editor using CodeMirror 6 with inline formatting
  - Bold, italic, strikethrough render inline (syntax hidden until cursor on line)
  - Interactive checkboxes for task lists (click to toggle)
  - Fenced code block highlighting with background styling
  - Links show as clickable text, URL hidden until editing
- Full undo/redo support (Ctrl+Z, Ctrl+Shift+Z)
- Editable event titles directly in the modal
- Date/time picker with:
  - Combined datetime-local inputs for From/To
  - Smart time display (only shows time when not midnight)
  - Live summary preview of formatted date range
- Settings toggle between WYSIWYG and plain text editor modes
- Fixed title parsing bug with times containing colons (e.g., 10:30am)
- Cleaner date format when dragging events on timeline

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@cybersader cybersader force-pushed the feature/event-detail-modal branch from fa6f58e to bce18b7 Compare December 7, 2025 21:18
@cybersader
Copy link
Author

Obsidian_aUoVRuanZF.mp4

@cybersader cybersader changed the title feat: Add event detail modal with markdown rendering and editing feat: Add event detail modal with markdown rendering and editing (WYSIWYG) Dec 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Event preview & editing in Timeline view

1 participant