Skip to content

#161 - Fix expand in edit mode with Readable line length - #176

Open
aioue wants to merge 2 commits into
mugiwara85:masterfrom
aioue:fix/expand-edit-mode-readable-line-length
Open

#161 - Fix expand in edit mode with Readable line length#176
aioue wants to merge 2 commits into
mugiwara85:masterfrom
aioue:fix/expand-edit-mode-readable-line-length

Conversation

@aioue

@aioue aioue commented Aug 4, 2026

Copy link
Copy Markdown

Summary

This continues the work from #161.

You already added expand for reading mode and shared a test build. This PR fixes the remaining live-preview / edit-mode case when Readable line length is turned on.

This took a while 😪

What users should see

With Readable line length on, in live preview:

  • A normal code block stays in the usual narrow centered column.
  • An expand block that is wrapped lines up with that same column (same left edge and width) and soft-wraps long lines.
  • An expand block that is unwrapped stays left-aligned with the column, but grows as wide as the longest line. If it is wider than the pane, you scroll the editor horizontally.
  • The Plain text label and wrap button stay on screen even when the window is narrow or the block is wider than the pane.
  • Code blocks inside callouts are left alone (same as reading mode).

What changed (high level)

  • New edit-mode layout helper (Expand.ts) that cooperates with Obsidian’s readable-line CSS variables instead of fighting them.
  • Unwrapped width comes from the existing wrap/unwrap decorations (per block), and updates when you type.
  • Horizontal scroll uses the editor scroller for expand blocks (no extra per-block scrollbar).
  • Button position is adjusted with right only, so the language label does not get crushed into a vertical stack.

How to test

  1. Turn Readable line length on.
  2. Open a note in live preview with a normal fence and a ```lang expand ` fence that has a long line.
  3. Confirm the expand block matches the normal column when wrapped, and grows when unwrapped.
  4. Narrow the window while unwrapped - the text can scroll, but Plain text / wrap should stay visible.
  5. Optional: try a titled expand block (title:...), and a note with a callout code block above an expand block.

Built styles.css is included. main.js is left unchanged in git (same as the repo’s usual release flow) - please rebuild for a release artifact.

Thanks again for implementing the first pass on #161 - happy to adjust based on review.

aioue added 2 commits August 4, 2026 15:18
Make ```expand``` code blocks work in live preview when Readable line length is on: wrapped blocks stay in the normal column, unwrapped blocks grow with the content and scroll in the editor, and the Plain text / wrap controls stay visible when the pane is narrow.
Add a short design note covering intended behavior, architecture, and dead ends so future work on Readable line length expand does not repeat failed approaches.
@mugiwara85

Copy link
Copy Markdown
Owner

@aioue Wasn't this working correctly? If I remember correctly (I might be wrong) it worked for me also when "readable line length" was enabled/disabled. Anyway, thanks for PR. I will look at it, but unfortunately it could take some time. I am currently under a "little" more workload than usually 😄

@aioue

aioue commented Aug 4, 2026

Copy link
Copy Markdown
Author

Unfortunately not, it didn't change the codeblock size or extend the text. Of course, happy to wait. If you think it's too much change to merge, that's ok too.

@mugiwara85

Copy link
Copy Markdown
Owner

Ah ok. I will definitely check out, what you did :)

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.

2 participants