Skip to content

feat: add ui line-wrap & code block css fixes#1071

Merged
perber merged 1 commit into
mainfrom
feature/ui-line-wrap-and-css-fixes
May 29, 2026
Merged

feat: add ui line-wrap & code block css fixes#1071
perber merged 1 commit into
mainfrom
feature/ui-line-wrap-and-css-fixes

Conversation

@perber
Copy link
Copy Markdown
Owner

@perber perber commented May 29, 2026

No description provided.

Copilot AI review requested due to automatic review settings May 29, 2026 20:21
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a line-wrap toggle to the markdown editor toolbar (persisted in localStorage) and applies CSS fixes around code-block scrolling, prose word-wrap, an active-toolbar-button modifier, and a mobile sidebar overlay z-index. Also renames stale .markdown-editor__preview-container selectors to .markdown-editor__preview and adds an e2e test for the new toggle.

Changes:

  • New lineWrap setting in the editor Zustand store, wired into MarkdownCodeEditor via a CodeMirror Compartment and a new toolbar button.
  • Code-block CSS: scroll moved from the wrapper onto the inner <pre>, copy actions repositioned, and break-words added to the three markdown surfaces.
  • Selector rename markdown-editor__preview-containermarkdown-editor__preview, sidebar overlay raised to z-20, and a new e2e test for the toggle.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
ui/leafwiki-ui/src/stores/editor.ts Adds persisted lineWrap state and toggle action.
ui/leafwiki-ui/src/features/editor/MarkdownCodeEditor.tsx Adds wrap/no-wrap CodeMirror extensions reconfigured via a compartment driven by the new prop.
ui/leafwiki-ui/src/features/editor/MarkdownEditor.tsx Reads lineWrap from the store and forwards it to the code editor.
ui/leafwiki-ui/src/features/editor/MarkdownToolbar.tsx Adds the line-wrap toolbar button and switches preview button to an active-modifier style.
ui/leafwiki-ui/src/features/preview/MarkdownCodeBlock.tsx Removes custom-scrollbar from the outer wrapper now that scroll lives on the inner <pre>.
ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css Moves overflow-x to inner <pre>, repositions copy actions.
ui/leafwiki-ui/src/index.css Adds --active button class, break-words on prose surfaces, z-index bump for mobile overlay, and selector renames.
e2e/tests/editor.spec.ts Adds an e2e test verifying the line-wrap toggle.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread ui/leafwiki-ui/src/features/editor/MarkdownToolbar.tsx
Comment thread ui/leafwiki-ui/src/features/editor/MarkdownToolbar.tsx
@perber perber force-pushed the feature/ui-line-wrap-and-css-fixes branch from 4d07f27 to 1f6bf98 Compare May 29, 2026 20:33
@perber perber merged commit 600aacf into main May 29, 2026
8 checks passed
@perber perber deleted the feature/ui-line-wrap-and-css-fixes branch May 29, 2026 20:42
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.

Add setting to allow user to choose if word wrapping in the editor should be enabled

2 participants