-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Request] Collapsable bullets #1850
Comments
Plz. |
@zadam I did find these things for reference, not sure they would be of any help: |
@en3r0 these are for CKEditor 4. Trilium uses CKEditor 5 |
@zadam Ah, my mistake. I did not see anything for CKEditor 5 unfortunately. |
I would love to be able to collapse bullet/numbered lists too. Please? |
@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/ |
Ok thanks! |
we can't just surround their control with an expander? |
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). |
Thanks for that. I did mean all bullet/numbered lists to be collapsible, not individual ones though. |
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. |
@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. |
@yannduran that is no problem, there may be other ways to solve it! |
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. |
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.mp4And 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. |
Haha - works like a charm! |
@rauenzi thanks for that! I look forward to trying it out |
Hi ! |
Perhaps I'm the minority here, but I find CKEditor to be… a bit janky.
Really, I wonder if the solution to this, as well as to several other issues like:
…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. |
Thanks @rauenzi! |
Thanks @rauenzi this is exactly what I needed. |
Trilium has entered maintenance mode. Future enhancements will be addressed in TrilumNext: TriliumNext#121 |
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. |
@rauenzi |
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:
***@***.***>
|
That makes 3! 👍🏻 |
+1 rauenzi and as i said, if u need help, pm me in discord :) |
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.
The text was updated successfully, but these errors were encountered: