Skip to content

feat: Enable image rendering and enhanced document editing (#4)#6

Draft
f-y wants to merge 5 commits intomainfrom
feature/4-image-support
Draft

feat: Enable image rendering and enhanced document editing (#4)#6
f-y wants to merge 5 commits intomainfrom
feature/4-image-support

Conversation

@f-y
Copy link
Collaborator

@f-y f-y commented Feb 24, 2026

Closes #4

Summary

Enable image display in the Document tab and support image insertion in edit mode, along with comprehensive improvements to the document editing experience.

Changes

Image Support

  • Display local and remote images in Document tab preview
  • Expand localResourceRoots to include document directory and workspace folders for local image access
  • Image upload via EasyMDE editor with base64 data URI encoding

EasyMDE Editor Integration

  • Fix toolbar icons using VS Code codicons (via icon property, bypassing FontAwesome)
  • Theme toolbar with VS Code CSS variables (hover states, separator colors)
  • Disable FontAwesome auto-download to prevent CSP violations
  • Remove fullscreen and guide toolbar buttons (not applicable in webview context)
  • Remove blur-to-exit edit mode behavior (was preventing toolbar button clicks)

Document Styling Improvements

  • Unify styles across preview view, CodeMirror editor, and EasyMDE preview pane
  • Shared font-family (--vscode-font-family), font-size, line-height, and heading sizes
  • Match table styling to VS Code's standard Markdown preview
  • Fix text selection highlight color (--vscode-editor-selectionBackground)
  • Apply consistent styles for lists, code blocks, blockquotes, links, images, and horizontal rules

Syntax Highlighting

  • Integrate highlight.js with marked-highlight for code block coloring
  • Use vs2015 theme for VS Code dark mode compatibility

Testing & Samples

  • Add document-style-preview.md for visual style verification
  • Remove obsolete blur-on-tab-click regression test
  • All 1048 tests passing

Known Issues

  • Document section headings (##) are reconstructed as # when entering edit mode (to be addressed in a separate issue)

…ge support

- Fix EasyMDE toolbar icons using codicon via 'icon' property
- Add codicon CSS to Light DOM for glyph rendering
- Theme toolbar with VS Code variables (hover, separator)
- Disable FontAwesome auto-download (CSP fix)
- Remove blur-to-exit edit mode (prevents toolbar interaction)
- Remove fullscreen and guide toolbar buttons
- Unify styles across preview, editor, and EasyMDE preview:
  - Shared font-family, font-size, line-height
  - Matching heading sizes (h1-h6)
  - Matching list, table, code, blockquote, link, image styles
  - Selection highlight using --vscode-editor-selectionBackground
  - Table style matching VS Code standard (no header bg, no zebra rows)
- Add syntax highlighting via highlight.js + marked-highlight (vs2015 theme)
- Fix local image display: expand localResourceRoots to include
  document directory and workspace folders
- Add image upload support via EasyMDE with base64 data URI
- Add document-style-preview.md sample for style verification
- Remove obsolete blur-on-tab-click regression test
@f-y f-y changed the title feat: EasyMDE toolbar, document styling, syntax highlighting, and image support feat: Enable image rendering and enhanced document editing (#4) Feb 24, 2026
f-y added 4 commits February 24, 2026 18:52
- Resolve conflicts in spreadsheet-document-view.ts:
  - Keep EasyMDE editor integration
  - Adopt _getFullContent(includeHeader) to exclude title from edit mode
  - Adopt simplified _extractTitleAndBody (title from component property)
- Resolve CHANGELOG.md: add v1.2.1 release notes
- Install easymde at root level for test runner module resolution
- Update single-h1-docsheet-ui tests for Light DOM and EasyMDE
- Update save tests for new title-handling behavior
- All 1054 tests passing
- Remove webview-ui/node_modules/.vite/ file from git tracking
- Change /node_modules/ to node_modules/ in .gitignore to cover all depths
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.

Enable Image Rendering in Document Tab

1 participant