Skip to content

Conversation

@mejo-
Copy link
Member

@mejo- mejo- commented Dec 11, 2025

📝 Summary

See #7741 (comment)

Screenshots desktop

Outline Outline zoomed Table of contents Table of contents zoomed
image image image image

Screenshots mobile

Menu Table of contents
image image

Screencast desktop

Screencast_Desktop.mp4

Screencast mobile

recording2.mp4

🚧 TODO

  • Outline not displayed in view mode in Collectives
  • RichWorkspace: Hide outline action in headings menu
  • Update headings only when a heading changed
  • Update headings also in MarkdownContentEditor
  • Somehow useTableOfContents flag from useEditorFlags is always false in useEditorWidth when loading Collectives
  • Fix and extend tests
  • Test manually in a lot of scenarios:
    • text standalone, collectives, (embedded?)
    • collectives landing page with widgets above
    • wide screen desktop, narrow screen desktop, mobile
    • full width view and not
    • sidebar open and not
    • public share
    • print view
    • long headings
    • long heading list (vertical scroll)
    • conflict handling view
    • read-only files

🏁 Checklist

  • Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
  • Sign-off message is added to all commits
  • Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
  • Documentation (README or documentation) has been updated or is not required

@mejo- mejo- self-assigned this Dec 11, 2025
@mejo- mejo- added enhancement New feature or request 2. developing labels Dec 11, 2025
@mejo- mejo- force-pushed the feat/rework_outline branch 4 times, most recently from 6ad97d1 to 122f405 Compare December 12, 2025 18:40
@mejo- mejo- force-pushed the feat/rework_outline branch 2 times, most recently from 3ddd4ee to 16dc1e0 Compare December 12, 2025 19:46
@mejo- mejo- force-pushed the feat/rework_outline branch 3 times, most recently from f831d49 to a4e17e3 Compare December 13, 2025 19:48
Copy link
Member

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

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

Really nice @mejo- :)

One point from my side:

  • I would trigger the outline on hover, not click
  • Once hovered, I would provide a pin button in the same location where the x button is right now. Once the pin button is pressed, we can then display the x button to unpin

Copy link
Member

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

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

Agree with @marcoambrosini about triggering it on hover. And when leaving the area, it should close again.

Instead of automatically staying open and needing to click a "close" button, we can have a "pin" icon that can be toggled, as proposed before. :)

@mejo-
Copy link
Member Author

mejo- commented Dec 15, 2025

I would trigger the outline on hover, not click

Thanks for the feedback. I was unsure about that one, but now that I implemented it, I agree it's much better. I updated the desktop screencast, please have a look ☺️

@mejo- mejo- force-pushed the feat/rework_outline branch 3 times, most recently from 541a93b to b974a67 Compare December 15, 2025 10:13
@mejo- mejo- marked this pull request as ready for review December 15, 2025 10:14
@mejo- mejo- requested a review from max-nextcloud as a code owner December 15, 2025 10:14
Copy link
Member

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

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

🚀

Copy link
Collaborator

@max-nextcloud max-nextcloud left a comment

Choose a reason for hiding this comment

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

Just reviewed the first three commits for now.

All in all looks great! I have a bit of nitpicking never the less 😉

Comment on lines 41 to 45
headings() {
this.$nextTick(() => {
this.setupIntersectionObserver()
})
},
Copy link
Collaborator

@max-nextcloud max-nextcloud Dec 15, 2025

Choose a reason for hiding this comment

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

I think there's no need to teardown and rebuild the intersection observer here. Should be enough to update the observed entries.
Something along these lines:

		headings(newHeadings, oldHeadings) {
			this.updateIntersectionObserver(newHeadings, oldHeadings)
		},
...

		updateIntersectionObserver(newHeadings, oldHeadings)
			const newIds = new Set(newHeadings.map((h) => h.id))
			const oldIds = new Set(oldHeadings.map((h) => h.id))
			const added = Set.difference(newIds, oldIds)
			const removed = Set.difference(oldIds, newIds)
			removed.forEach((id) => this.unobserve(id))
			this.$nextTick(() => {
				added.forEach((id) => this.observe(id))
			})
		},
		observe(id) {
			const el = document.getElementById(id)
			if (el) {
				this.intersectionObserver.observe(el)	
			}
		},
 .... unobserve like above - but i am not sure if that's even needed given that the element will be removed.

Copy link
Collaborator

Choose a reason for hiding this comment

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

This would also make the watcher robust against overwriting the headings array with the same content - it would just do nothing as no ids were added or removed.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think I figured out a way to even do without the set difference. I'll give it a try and let you know.

Comment on lines +49 to +50
const editorWidthDesktop = 'min(80ch, 100%)'
const editorWidthDesktopEnhanced = 'min(80ch, (100% - 2 * 40px))'
Copy link
Collaborator

Choose a reason for hiding this comment

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

I wonder if we could express this in css - as in using some sibling selector.

// as it may render other vue components such as preview toggle
// which breaks the context of the setup function.
this.setContent(this.content, { addToHistory: false })
this.updateHeadings()
Copy link
Collaborator

Choose a reason for hiding this comment

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

is this even needed given that the composable also seems to initialize the headings?

Copy link
Collaborator

@max-nextcloud max-nextcloud left a comment

Choose a reason for hiding this comment

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

Codewise no blockers from my side.

Copy link
Member

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

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

Beautiful! Could be further improved with some details like a quick animation for sliding in and out, as well as not giving a whole row for just the pinning icon, but that can be done in a follow-up. :)

mejo- added 18 commits December 16, 2025 13:31
Signed-off-by: Jonas <jonas@freesources.org>
Fixes: #7228

Signed-off-by: Jonas <jonas@freesources.org>
Fixes: #6693

Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
…reactive

Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Gets rid of some code duplication.

Signed-off-by: Jonas <jonas@freesources.org>
We don't display floating buttons and table of contents in rich
workspace or in plain text editor, so no need to provide whitespace for
them.

Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
@mejo- mejo- force-pushed the feat/rework_outline branch from b974a67 to 21fdd27 Compare December 16, 2025 12:51
@mejo- mejo- requested a review from silverkszlo as a code owner December 16, 2025 12:51
Also remove some dead code.

Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
Signed-off-by: Jonas <jonas@freesources.org>
@mejo- mejo- force-pushed the feat/rework_outline branch from 21fdd27 to 97a855d Compare December 16, 2025 13:11
@mejo-
Copy link
Member Author

mejo- commented Dec 16, 2025

Psalm failures are unrelated.

@mejo- mejo- merged commit 60e48d7 into main Dec 16, 2025
72 of 76 checks passed
@mejo- mejo- deleted the feat/rework_outline branch December 16, 2025 14:01
mejo- added a commit that referenced this pull request Jan 22, 2026
Fixes small editor window on mobile with empty or short content.

Fixes regression from #8033.

Signed-off-by: Jonas <jonas@freesources.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment