Skip to content

Add "Preview mode" on file editor for Markdown files #264

Description

@KiKaraage

I think it's convenient to be able to read Markdown files comfortably, especially when those are generated by agents. It's nice to read table as an.. actual table on those md files.

Proof of Concept

What I implemented on my Shelley fork:

  • Adding a Preview mode toggle besides Comment mode and Edit mode, toggleable via Ctrl+Shift+K when EditableFileModal is opened. Toggle only shown when the opened file explicitly has .md extension
  • Reuse MarkdownContent.vue component, make it centered against the modal for viewing comfort (.diff-viewer-preview - scrollable, padded, prose max-width 72ch, centered via margin: 0 auto)
  • Add basic Vim navigation support (j/k scroll by line, gg/G top/bottom, Ctrl+d/u/f/b page jumps, i/a/o return to edit mode and focus the editor) so it's still usable when Vim mode is enabled
  • Files edited: ui/src/vue/components/EditableFileModal.vue, ui/src/vue/composables/monacoComments.ts, ui/src/styles.css
Editable file modal showing a markdown file from Shelley repo in dark mode. Beside Comment and Edit mode, a new Preview mode toggle with eye emoji is placed Editable file modal showing Shelley's Makefile, no Preview mode toggle
Light Mode screenshot Previewing a markdown file from Shelley repo, in light mode

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions