wysiwyg editor?

Bishop · 2024-03-14T20:17:24.754+00:00

I could have sworn I saw someone posted something about there being a wysiwyg editor other than just plain text available somewhere, not sure if it was a package (i don't see that there is one)code editor is the closest I see, but that's not it. I thought maybe it was a jquery editor.?

Bishop
1 year ago
I could have sworn I saw someone posted something about there being a wysiwyg editor other than just plain text available somewhere, not sure if it was a package (i don't see that there is one)

code editor is the closest I see, but that's not it. I thought maybe it was a jquery editor.

?
Andreas Møller
1 year ago
The quill package might be what you are looking for
https://quill.toddle.site
Bishop
1 year ago
ah just found it
thanks
Andreas Møller
1 year ago
👍
Bishop
1 year ago
so If I want to add features to it (buttons and stuff like that) I would need to clone the package and make a new one right?
Bishop
1 year ago
I'm struggling to figure out how to add a button that calls an action

https://quilljs.com/guides/building-a-custom-module

I have to add a couple custom buttons that call a toddle action
Andreas Møller
1 year ago
The package does not support that at the moment.
I can invite you to the quill project if you would like to take a stab at it?
Bishop
1 year ago
i feel like I was able to clone it?
Bishop
1 year ago
i will work on mine separately for the time being since I have a particular use case and no experience with quill and my toddle is not super advanced yet
@Bishop
i feel like I was able to clone it?
Lucas G
1 year ago
What use case do you need?
https://discord.com/channels/972416966683926538/1210605989817225226
That update is rolling out next week to the package
Maybe I could incorporate a few more features depending on need
Bishop
1 year ago
I do believe I got it working with a custom button thanks to the magic of Claude AI

the docs for quill do not include how to add custom buttons AND standard ones together and even imply it won't work by using the word 'OR'

https://quilljs.com/playground/snow#codeN4Ig9AlgdgJgpgDwHQAsAuBbANiAXCAHgEIARAeQGEAVATQAUBRAAnWwD4AdKA1rT7lHACGMfkyYEs0ANYsATnABmAXg4h0aAA4BnXGDABjGFCQBHAK4QsWAFbakBgPYYwARiQBmJADYwFq1hI2lCOAO4O2tpqTApYqiDaaACeWHDagnBoamISiSlwOeJmWAC0aI6OWABGQnJMxSUG5onOAELmaOVQTMBc4v1MoRAwaCi4TABMAKyaCADcfQMscBAA5ujj07ML3Us1BtKrco7msI2VjnLjAMSKigAMj-c7S0xVl-BXTCFQcC97HzgchKchEEGa4w820WAyacm0l3Gmkc0DQQP+AxgEG0miwQiS42gUl+JUUqXmMP6NmaaAgiiS5ygaKZ4wMcCZ6Mp4iEUlWUBKEDRGF0TDZHLkGP6GGgJSGIzGkxmFN2A2l-MEaw2iuhKv6TiwiKYt0ekvEikcTNlK3WaHG7ywMElAF9KQ1ypUanUGk0Whh2p0LbhcFUlJc4D0uaKLczbUwAOQMBCaISwOPOxYEMB5VL8TOCES594wJI5AhYgBuTGG8TgWPKcmymYr-Az2gMcggmjQTG0cgM8Q0Oj0hmMZks1jsDmcbk8Pj848CdkbWfbnbQpbbHa7hSjUESTHd1VqZC7EAt2iYyiYAG1I9e4-aYHGADTxwU8iAGF-x06fYlwb840SDtpAAgBdZ87wfA0DgsRw0UApx4BKKoYOkOMIKg4l0NfOMIAwIRVgA3Dy2GOBHEA805Awcw8QwyDdXEa9gHjfNPjjcZXCYJ1XxYuM2KBDjJm4zDGJvPipESIS40BBQn243j40ktBpKqWjUhUkSGNeZj403NdpO0cwqjjBSej01cu0M8xNEErS7z46B4CZaSSlcUyePMvDYHZFTxjjABqdz7LE3S4yxBQDFpC1pLkNAsA80SdL47QIAALwA8Z720AjrG-RQeW0OBcLxOQiMAlBzHKsCQuS1jhHYrLXFfCZXw8V8ABZXymV9vFfAqsCKmqnSSpYwv1S4hOvYbFIfIQDiOE5Uyy4bRoGMLzRclbarGviPz5KbVu0sa4wMVIU3oqCfXKP0Oi6DDKTAnZKScPdu38axL2+OBQiYABFBcAAo42uWtBUm3jIwwRwYFotJxl6MTxEPT0EcjWFoyEaAgXGFHj1Pc9jtecQUBTGBUnhNGkaWa62juwNRRpOmAygAAJMmKfR-oXWpnnXh4yNRjgDA4H84IwjjSknQASme3VFFOKKz26WnbpZ9nYApwHpYjMTXoRVIkANVZgYoJmMDeemVakA5ayIONZcjfQmAAQRgGAmCSE46lVphjc-ZYFCljMVy3dcuEzIsSwjsBeDYEBn3AJzECQOw8BAEAnSAA
whether or not i have time to put this into a toddle package with configuration options is unknown atm I gotta get it working for my client first.
@Bishop
I do believe I got it working with a custom button thanks to the magic of Claude AI

the docs for quill do not include how to add custom buttons AND standard ones together and even imply it won't work by using the word 'OR'

https://quilljs.com/playground/snow#codeN4Ig9AlgdgJgpgDwHQAsAuBbANiAXCAHgEIARAeQGEAVATQAUBRAAnWwD4AdKA1rT7lHACGMfkyYEs0ANYsATnABmAXg4h0aAA4BnXGDABjGFCQBHAK4QsWAFbakBgPYYwARiQBmJADYwFq1hI2lCOAO4O2tpqTApYqiDaaACeWHDagnBoamISiSlwOeJmWAC0aI6OWABGQnJMxSUG5onOAELmaOVQTMBc4v1MoRAwaCi4TABMAKyaCADcfQMscBAA5ujj07ML3Us1BtKrco7msI2VjnLjAMSKigAMj-c7S0xVl-BXTCFQcC97HzgchKchEEGa4w820WAyacm0l3Gmkc0DQQP+AxgEG0miwQiS42gUl+JUUqXmMP6NmaaAgiiS5ygaKZ4wMcCZ6Mp4iEUlWUBKEDRGF0TDZHLkGP6GGgJSGIzGkxmFN2A2l-MEaw2iuhKv6TiwiKYt0ekvEikcTNlK3WaHG7ywMElAF9KQ1ypUanUGk0Whh2p0LbhcFUlJc4D0uaKLczbUwAOQMBCaISwOPOxYEMB5VL8TOCES594wJI5AhYgBuTGG8TgWPKcmymYr-Az2gMcggmjQTG0cgM8Q0Oj0hmMZks1jsDmcbk8Pj848CdkbWfbnbQpbbHa7hSjUESTHd1VqZC7EAt2iYyiYAG1I9e4-aYHGADTxwU8iAGF-x06fYlwb840SDtpAAgBdZ87wfA0DgsRw0UApx4BKKoYOkOMIKg4l0NfOMIAwIRVgA3Dy2GOBHEA805Awcw8QwyDdXEa9gHjfNPjjcZXCYJ1XxYuM2KBDjJm4zDGJvPipESIS40BBQn243j40ktBpKqWjUhUkSGNeZj403NdpO0cwqjjBSej01cu0M8xNEErS7z46B4CZaSSlcUyePMvDYHZFTxjjABqdz7LE3S4yxBQDFpC1pLkNAsA80SdL47QIAALwA8Z720AjrG-RQeW0OBcLxOQiMAlBzHKsCQuS1jhHYrLXFfCZXw8V8ABZXymV9vFfAqsCKmqnSSpYwv1S4hOvYbFIfIQDiOE5Uyy4bRoGMLzRclbarGviPz5KbVu0sa4wMVIU3oqCfXKP0Oi6DDKTAnZKScPdu38axL2+OBQiYABFBcAAo42uWtBUm3jIwwRwYFotJxl6MTxEPT0EcjWFoyEaAgXGFHj1Pc9jtecQUBTGBUnhNGkaWa62juwNRRpOmAygAAJMmKfR-oXWpnnXh4yNRjgDA4H84IwjjSknQASme3VFFOKKz26WnbpZ9nYApwHpYjMTXoRVIkANVZgYoJmMDeemVakA5ayIONZcjfQmAAQRgGAmCSE46lVphjc-ZYFCljMVy3dcuEzIsSwjsBeDYEBn3AJzECQOw8BAEAnSAA
Lucas G
1 year ago
It is doable you would likely want to make a custom toolbar for it but the docs do say it is definitely doable
Bishop
1 year ago
I solved it with the link above you can check it out. I'd love to make it into a package at some point where you can select from the options in toddle and make custom buttons as well. Wouldn't be hard I just need to focus on client project.

I guess for the custom button I need to trigger a toddle Action
Bishop
1 year ago
i created that extra Expand button and the rest are standard
Bishop
1 year ago
when i put this into toddle i have it working functionally but cannot get the css right i guess.
if you want to be invited to the code lemme know your id
Bishop
1 year ago
Struggling to get it to look nice but these buttons actually are clickable. I am not sure how to connect them to toddle officially or make this stuff look nice if anyone wants to help Ill invite you to it
the documentation on quill is not adequate imo but I suck at css and not that great at javascript either. 🙂
@Bishop
Struggling to get it to look nice but these buttons actually are clickable. I am not sure how to connect them to toddle officially or make this stuff look nice if anyone wants to help Ill invite you to it
Lucas G
1 year ago
I can probably help you out. What exactly do you need the buttons to do?
Bishop
1 year ago
I want their position to not be below the menu if at all possible. It is possible when you do it using their playground with the link i supplied above.

I was hoping we could make it so that it triggers an action and then we could make it more generic so the toddle community could add new menu items. So they could decide which of the options appear at the top.

That's my overall goal.

Short term, I'm trying to get Expand to actually be an event in Toddle that works. This video shows where I am at with it. The javascript works to output to console, but the toddle event doesn't seem to happen. Yes i published it so in theory it should all work if i have the commands right.

Ultimately Expand should get all the text from the quill area and be able to expand upon it, it should be able to know where the cursor is so we expand starting in the right area.
Bishop
1 year ago
I know how to do the AI but I need quill to tell toddle the position of cursor
Bishop
1 year ago
i guess we can get it with code like this but i'm not sure how to pass it back, perhaps we have to send an object back in the event since we have to send back multiple things.

// Assuming you have a Quill instance initialized as quill
const range = quill.getSelection();
if (range) {
if (range.length == 0) {
console.log('User cursor is at index', range.index);
} else {
const text = quill.getText(range.index, range.length);
console.log('User has selected the text: ', text);
}
} else {
console.log('User cursor is not in the editor');
}
Lucas G
1 year ago
I already have the code to insert text at caret position
Would that help
I’m not sure what you are trying to populate in the editor. AI suggestions?
Bishop
1 year ago
Yes that would help. Yes ai suggestions basically. Pasting from somewhere else
Lucas G
1 year ago
https://discord.com/channels/972416966683926538/1210605989817225226/1214219395304390708
Bishop
1 year ago
My main question relates to toddle. How to call an event. What I have isn't working
Lucas G
1 year ago
I will publish that update likely tomorrow or the day after once I am back home
Might be overthinking it
Lucas G
1 year ago
If user makes a selection then that is sent as part of the context to an AI API then the replies are stored in a variable/database which populates a list which the user can choose from then the "insert" action would simply add it to the editor
Does that sound about right?
I'm not sure there is a need for a lot of custom code on the editor itself
Bishop
1 year ago
there is no AI that needs to be done for this. i already have the AI - it is called from toddle (it goes to xano, but honestly that isn't relevant for this task)

I'm just looking to update the quill package so that we can add extra options to the editor (which already works - I added a button for "expand" and one for "suggest") and when someone clicks one of those options, an Event is triggered in toddle (this part isn't working at the moment despite the code being in place for it)

That makes it useful for everyone, not just me.

If you look at my code you'll see what I. mean, I think. its just an extension of the quill plugin. I'll invite you to it.
Bishop
1 year ago
tell me your username
Bishop
1 year ago
i found it and invited you
Bishop
1 year ago
@Lucas G you get my invitation? 🙂
@Bishop
@Lucas G you get my invitation? 🙂
Lucas G
1 year ago
I did. Haven’t taken a look yet just catching up on stuff first as I just got back yesterday
Lucas G
1 year ago
I did push the update on the quill package for merge tags though
Lucas G
1 year ago
It might be easier to create the buttons in toddle and send actions to quill instead of the other way around though
Bishop
1 year ago
merge tags? i'm sorry what is a merge tag? i searched but could find nothing
Bishop
1 year ago
I think I see what you are saying however. If we just create a simple button in toddle like 'expand' and then fetch the text and where the cursor is, then we can call the api easily. To which I say yeah way better idea.
@Bishop
I think I see what you are saying however. If we just create a simple button in toddle like 'expand' and then fetch the text and where the cursor is, then we can call the api easily. To which I say yeah way better idea.
Lucas G
1 year ago
I just checked the project
The expand and suggest buttons now properly trigger events in toddle
Lucas G
1 year ago
And if you check the quill package you'll see what merge tags are. Basically they are ways to quickly insert predefined text, like first_name in an email for example.
Lucas G
1 year ago
But yeah, a button in toddle that sends data into editor would be simpler I think.
Either way, your implementation is now also working as well
Bishop
1 year ago
oh yeah, i remember those now
Bishop
1 year ago
i agree with you on the toddle button. considering that the way buttons appear is kind of separate from the editor when done through toddle anyway i should probably just use the standard quill module

wysiwyg editor?

Bishop

Andreas Møller

Bishop

Andreas Møller

Bishop

Bishop

Andreas Møller

Bishop

Bishop

Lucas G

Bishop

Lucas G

Bishop

Bishop

Bishop

Bishop

Lucas G

Bishop

Bishop

Bishop

Lucas G

Bishop

Lucas G

Bishop

Lucas G

Lucas G

Bishop

Bishop

Bishop

Bishop

Lucas G

Lucas G

Lucas G

Bishop

Bishop

Lucas G

Lucas G

Lucas G

Bishop

Bishop