Outline view

[vinicius73]

• Resolves: Outline view of headings for quick navigation (table of contents) #107
• Target version: master

Summary

Add Outline view to display Table of Contents

Peek.2022-08-16.16-18.mp4

[max-nextcloud]

This looks really great! 👏

[mejo-]

Wow, this looks super nice @vinicius73 😍

How does it look like on mobile, did you find a good solution there already? Also, what happens if your window is not wide enough to display the outline? Text width is 670px, so e.g. when you're on a tablet with 800px.

[susnux]

This looks awesome! 😍

One note: I think the ID generation is better suited within the Heading node, like introduced in #2520, so maybe first get the anchors?

---

Also, what happens if your window is not wide enough to display the outline? Text width is 670px, so e.g. when you're on a tablet with 800px.

It is possible to use it, but not that nice. It works perfect starting with ~900 - 1000px.

On some other application this is solved by providing a button, something like ➤, floating on the left side that enables some kind of drawer functionality. So the toc is faded in from the left side.

[jancborchardt]

Nice nice! :) Some first feedback:

• The line below "Outline" is not necessary
• The text "Outline" is a bit too present. You can reduce the size to be the same size
• The text "Outline" should be left-aligned with the h1 titles below, currently it is a bit off to the left
• Currently the outline section doesn’t seem to be vertically aligned with anything. Could you align it so that when the Text app contains normal text in the first line, the text "Outline" and that text in the first line vertically aligns?
• When clicking to navigate to a section, currently it immediately jumps. Could this be done with an ever-so-quick animation? Just like 100-250ms, so really not long, but an animation to give some feedback would be great.
• When there are no headings, I assume the whole outline box just vanishes? (Didn’t test yet)
• Possibly unrelated, but that blue border around the text content is not going to stay, right?

On some other application this is solved by providing a button, something like ➤, floating on the left side that enables some kind of drawer functionality. So the toc is faded in from the left side.

Yep, agree that would be nice. :)

[vinicius73]

@jancborchardt

Possibly unrelated, but that blue border around the text content is not going to stay, right?

It is from /core/css/inputs.scss

[vinicius73]

@jancborchardt

When there are no headings, I assume the whole outline box just vanishes? (Didn’t test yet)

Not now.
The title (outline) and the content (table of contents) are two different components.

The idea is to use outline to wrap "metadata" like table of contents and word counter #2664 (comment) and other possible tools.

[vinicius73]

@jancborchardt

When clicking to navigate to a section, currently it immediately jumps. Could this be done with an ever-so-quick animation? Just like 100-250ms, so really not long, but an animation to give some feedback would be great.

I agree, but unfortunately it will be a hard task for now.
The scroll is handled by prosemirror.scrollIntoView() this method is not able do it.
We must find another way.

Can we postpone it to other issue?

[mejo-]

@vinicius73 this will also fix #299, right?

[susnux]

The idea is to use outline to wrap "metadata" like table of contents and word counter #2664 (comment) and other possible tools.

And maybe also for #145 (?)

[jancborchardt]

The idea is to use outline to wrap "metadata" like table of contents and word counter #2664 (comment) and other possible tools.

Word count can go in the 3-dot menu as a last entry, that’s a much cleaner place for it. Let’s keep outline for outline. :)

The scroll is handled by prosemirror.scrollIntoView() this method is not able do it. We must find another way.
Can we postpone it to other issue?

Yes absolutely, this is not critical to this issue.

[vinicius73]

@susnux

And maybe also for #145 (?)

Yes, it is a possibility.

[vinicius73]

@jancborchardt

Word count can go in the 3-dot menu as a last entry, that’s a much cleaner place for it. Let’s keep outline for outline. :)

And about other stuffs like #145 #3 #2142 ?

[vinicius73]

@mejo-

@vinicius73 this will also fix #299, right?

It is related, but this PR no dot resolver this issues yet.
@susnux's PR is directly related #2520, although we need to discuss more about the better way to do it.

[juliushaertl]

@jancborchardt

Word count can go in the 3-dot menu as a last entry, that’s a much cleaner place for it. Let’s keep outline for outline. :)

And about other stuffs like #145 #3 #2142 ?

As discussed lets keep those discussions separate and start off with the outline view only.

[juliushaertl]

Very nice, just a few additional comments from my side:

• The animation is nice but feels a bit slow, also it does slide in every time you change the headline, maybe we can only do that on the initial adding and speed it up a bit
• I think the outline should probably be hidden by default and then we can have a button to show/hide it
  • Not sure where to position it, but maybe we can put it to the top left as the app navigation toggle would be on other apps
  • We could store the state if open or closed in the browser local storage to remember the user preference at least locally
  • On mobile we could hide it in the right popover menu next to the author colors

What do you think?

[vinicius73]

/compile

[vinicius73]

Ready to review

[juliushaertl]

@vinicius73 Can you make sure every commit message has a signed off message and rebase to latest master? :)

Cypress failure looked unrelated so I restarted that.

[juliushaertl]

/compile

[mirisbowring]

When will this be available in Nextcloud? Everything is up to date on my installation.

[susnux]

When will this be available in Nextcloud? Everything is up to date on my installation.

With nextcloud 25, scheduled for end of October (afaik)