[Request] Collapsable bullets

[en3r0]

I know this issue was raised here before, but I would like to bring it up again. Similar functionality can be found in Roam and Dynalist.

This is something that can make it a lot easier to write and think about topics, at least for me. I think it could be done by only making visual adjustments via JS, and not necessarily changing the way CKeditor functions, but I am no master coder.

I am willing to put a bounty up for this feature as well if that helps.

[SheldonCurtiss]

Plz.
I mean I would just love collapsible lines in general.

[en3r0]

@zadam I did find these things for reference, not sure they would be of any help:

• https://ckeditor.com/cke4/addon/pre
• https://ckeditor.com/cke4/addon/collapsibleItem

[zadam]

@en3r0 these are for CKEditor 4. Trilium uses CKEditor 5

[en3r0]

@zadam Ah, my mistake. I did not see anything for CKEditor 5 unfortunately.

[yannduran]

I would love to be able to collapse bullet/numbered lists too. Please?

[meichthys]

@yannduran This is a CKEditor5 limitation. Until they implement that feature we won't be able to natively implement collapsible sections. Avaiable CKEditor plugins can be found here: https://ckeditor.com/ckeditor-5/online-builder/

[yannduran]

Ok thanks!

[yannduran]

we can't just surround their control with an expander?

[meichthys]

That may be possible using some kind of css or javascript widget like this one that relies on the text being in italics (you need to have a way to key in on a specific section).

[yannduran]

Thanks for that. I did mean all bullet/numbered lists to be collapsible, not individual ones though.

[en3r0]

Is it possible to throw money at this together?

I tried reaching out to their team about a year ago and for their dev to work on this feature specifically was going to be quite a bit more than I could put forth as an individual.

I imagine things have changed since then so it would be ideal to touch base with them again.

[yannduran]

@en3r0 I'm not going to be much help with any money unfortunately. I was forced to retire back in 2014 due to ill-health.

[en3r0]

@yannduran that is no problem, there may be other ways to solve it!

[meichthys]

For those interested, here are the relevant issues on ckeditor5 that would likely need to be implemented before this functionality could be added to Trilium.
Like the issues to help them get some more attention:
ckeditor/ckeditor5#11068
ckeditor/ckeditor5#8457

[zerebos]

I saw this issue and made a little prototype widget. You can try it out if you like. Here is a quick demo:

electron_j9xde26wtJ.mp4

And here is the widget:

/**
 * A widget make lists collapsible in text notes.
 */
const TPL = `<div></div>`;

const styles = `
/* Place your CSS below this */

.note-detail-editable-text li.collapsed > ul {
    display: none;
}

.note-detail-editable-text li.sublist-item {
    position: relative;
}

.note-detail-editable-text li.sublist-item::before {
    content: "➤";
    display: flex;
    position: absolute;
    top: 3px;
    left: -40px;
    width: 16px;
    height: 16px;
    align-items: center;
    cursor: pointer;
    transform: rotate(90deg);
    transition: transform 200ms ease;
}

.note-detail-editable-text li.sublist-item.collapsed::before {
    transform: rotate(0);
}

/* Place your CSS above this */`;


$(document).off(".collapse-ul");

$(document).on("click.collapse-ul", ".note-detail-editable-text ul li:has(ul)", e => {
    e.stopPropagation();
    const rect = e.target.getBoundingClientRect();
    if (e.pageX < rect.left) e.target.classList.toggle("collapsed");
});

function addSublistClass() {
    console.log("addSublistClass");
    $(".note-detail-editable-text ul li:has(ul)").each((_, e) => {
        console.log(e);
        if (e.classList.contains("sublist-item")) return;
        e.classList.add("sublist-item");
    });
}

class CollapseWidget extends api.NoteContextAwareWidget {
    get position() {return 100;}
    get parentWidget() {return "note-detail-pane";}

    isEnabled() {
        if (!super.isEnabled()) return false;
        return this.note.type === "text";
    }

    doRender() {
        this.$widget = $(TPL);
        this.cssBlock(styles);
        return this.$widget;
    }

    async refreshWithNote() {
        setTimeout(addSublistClass, 100);
    }

    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
    
    async noteSwitched() {
        await this.refresh();
    }
}

module.exports = new CollapseWidget();

Important to keep in mind that this does not currently save the state of each list's collapse state, everything will be fully expanded when you open the note.

[meichthys]

Haha - works like a charm!
For any newcomers, you just need to create a new JS Frontend note and paste the content from above into it, then add the #widget label, then restart Trilium.

[yannduran]

@rauenzi thanks for that! I look forward to trying it out
@meichthys thanks!

[bonnepioche]

Hi !
This is great and works like a charm!
Any plan on adding persistance on the state of the collapsible/expanded section? That would be nice.
Also adding a 'expand all' or 'collapse all' button/fonction, would be great.
Thanks for the good work!

[rom1dep]

Perhaps I'm the minority here, but I find CKEditor to be… a bit janky.

• References (inserted when pressing @) tend to:
  • eat-up my caret navigation: for instance, on a line that ends with a Reference, I can't press my keyboard's end key to navigate at the end of the line, the cursor is weirdly stuck "behind" the Reference, and I have to use the arrow keys as a workaround
  • find themselves often at the wrong position, e.g. when I create a new page for a Reference which does not yet exist, the Reference is inserted at the top of the note and not at the current caret position:
• Selections: perhaps this is again due to References, but selecting and copy/pasting around them and across paragraphs is generally broken (I have often have to copy/paste several times and redo the formatting at the destination).

Really, I wonder if the solution to this, as well as to several other issues like:

• absence of block editing: (Feature request) Block clone like notes #4533
• difficulty to embed other blocks/notes: Rich embeds #886
• or the ~50 issues that come up when searching for CKEditor

…couldn't be tackled efficiently by using a more forgiving editor. I've heard good things about this one, which is used by SiYuan, another tool in this space. In all, I would say that the editing experience is what I like the least about Trilium.

[T-Trivium]

Thanks @rauenzi!
This widget is great. I would also add a vote for adding the option to save the state of the collapsed list along with the collapse/collapse all button.

[Nertskull]

Thanks @rauenzi this is exactly what I needed.
I'd love a save option as well, but I could see that being difficult as you'd need to keep track of each list.
But what about a way to default with everything collapsed vs uncollapsed? Or maybe another button to collapse everything on the page?

[meichthys]

Trilium has entered maintenance mode. Future enhancements will be addressed in TrilumNext: TriliumNext#121

[zerebos]

Hi @bonnepioche @T-Trivium @Nertskull and @yannduran thanks for your feedback, I am considering formalizing some of the random scripts I posted (like this one) into more full fledged widgets/plugins. Please let me know if you'd like to see this one continued.

[T-Trivium]

@rauenzi
Would love to see this one continued. Thank you!

[bonnepioche]

Hello! @rauenzi <https://github.com/rauenzi> I would love that too! Many Thanks!

…

On ven., juin 28 2024 at 06:29:41 -0700, T-Trivium ***@***.***> wrote: @rauenzi <https://github.com/rauenzi> Would love to see this one continued. Thank you! — Reply to this email directly, view it on GitHub <#1850 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD62ICATB4YZBDNP5OYQQNTZJVQMLAVCNFSM427Q2SF2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJZGY4TANRZGY2Q>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[yannduran]

That makes 3! 👍🏻

[CobriMediaJulien]

+1 rauenzi and as i said, if u need help, pm me in discord :)