toddle RTE
I ’m on a mission to try and create some form of rich text editor within my app and have been looking at examples like Prosemirror , Slate and Lexical to try and figure out how they have been built . 🤯 I ’m curious to know how possible it might be to create something using toddle as it is or if I ’d need to rely on custom code to do this , or if it simply wouldn ’t be possible at all just now ? Just thinking about things like @Andreas Møller ‘s form builder example , it must be possible , right ? Slate looks like it uses something similar to web components to structure the editor . So wondering if it ’s possible to fashion something basic at least . Any thoughts and has anyone had a go at this ? @Jacob Kofoed - Yes , that would be interesting to know . I only thought I could achieve that with a custom action . I 'm just trying a simple example with a div with attribute contenteditable set to true . If I add an input event to the div I don 't see the option for the event as you say . I can certainly add to the Get path but not sure what the object should be . Took a break for a bit , did some reading and managed to make some positive progress . Looks like if I set my input event to set variable with formula Get where object is linked to result of Get element by id and the path is innerText , I can extract the text from the text node inside the div . I only noticed this by monitoring the console and doing log to console with the variable as data because it doesn 't show up in the variable in the editor for some reason . Well , actually , innerText does show a result in the variable but if I do innerHTML is just says Null but if you bind the variable to a text element , the text does display as HTML object . Not sure why it doesn 't show the HTML in the variable in the editor . Is that a bug or expected behaviour , @Jacob Kofoed ? Can provide an example if needed . I 'm interested in how I 'll get on with it as well . 🤣 I 've been looking at all sorts like JSON RTE examples , Prosemirror , Trix , Lexical , DraftJS , etc . Everyone has their own unique take on solving this problem . It 's just trying to work out how to do that in toddle , which is not an easy task and I 'm likely trying to bite off something that I definitely don 't have the skills to chew on right now . Some stuff that is done in JS is already possible in toddle , so it 's trying to unravel that and understand how things are working and what the limitations are . Currently exploring text formatting in blocks and just getting that output in a way that 's useful . Interestingly , I am able to use toddle formulas to grab stuff from the DOM like text from an element , which I didn 't think was possible until yesterday . 🙌 @Raphael Walters - So you know , I managed to figure out how to get text out from contenteditable div and push that to a key /value pair in an object based on input and keydown events . 🙌 Nothing major but now at least I know I can get values into JSON format . Next is to figure out how to map all this stuff to some kind of schema to do formatting , then figure out how to get it back out again . 😬 💪1@Jacob Kofoed - Do you know if it 's possible "out of the box " to render text back to the page in HTML e .g . <strong>Some bold text</strong> . I could probably figure out how to wrap some text with <strong> tags as a text string and then use your HTML rendering custom action example but wonder if there 's a simpler way ? 🤔 What format is your data in ? If you have it in JSON , then you could recursively loop over your nodes and render the values to your own toddle -components {
type: "element",
tag: "strong",
nodes: [
{
type: "text",
value: "Some bold text"
}
]
}I can try to send you an example if you have your data in somewhat this format . If the input is HTML , then I think the easiest is to just use a custom action to set the HTML directly to the page as in this video : https://www.youtube.com/watch?v=6pVjgsyCe54&t=21s Contentful has an interesting model for storing rich text which is easy to work with in toddle : https://www.contentful.com/developers/docs/concepts/rich-text/ 👍1🤯1@Jacob Kofoed - The format is text currently . I 'm experimenting with a contenteditable div that (on Enter after writing some text ) , it sets a JSON object with a key e .g . value and the value being the text typed in . I have not expanded on that in terms of fleshing out the element schema yet . This is interesting . Not quite sure what you mean but now very curious . 🤔 😄 @Andreas Møller - Funnily enough , I had come across that but my brain doesn 't grasp how I make all that work . . .yet . If I could make it so that I didn 't have to render any HTML for the reasons you mentioned and just output formatting using JSON as some kind of block /component that looks /acts like HTML and let toddle take care of the rest , that 'd be awesome . As you can probably tell , this is a confusing but very interesting problem to chew on for me . You can copy that if you like 🙂 You can import it from here : https://toddle.dev/projects/embed/branches/main/components/contentful-block The block attribute should be a reich text block from contentful , in this case you find them on "content " inside the body on each item : https://preview.contentful.com/spaces/lizv2opdd3ay/environments/master/entries?content_type=docs&fields.slug=advanced-api-configuration&access_token=TlsHmDUeQY4b2LanaRcjzVLb7AS-lGs6FJBhkUUMxb4 Does that make sense ? includes is just the whole "includes " object from the api . - ❤️1🙏1
Woah ! That 's incredible ! Thanks so much for sharing . The video certainly helped in terms of visualising what 's actually happening - it would have taken a while otherwise 💯 . I 've definitely learned something new today regarding how this is possible and that you can have the same component inside itself . 🤯 Very cool to get a sneak peek at the toddle machine as well , which just demonstrates the power of toddle and how you 're building toddle with toddle ! 🙌 @Andreas Møller , sir , I really appreciate the share and this certainly gets me well on my way to making some positive progress . I 'll be sure to showcase how I get on . 🤘 Okay , @Andreas Møller - and that will implode the whole universe , right ? I 'm guessing you 're speaking from experience here ? 😄 I assume the solution is delete the page component or component itself ? Could that impact toddle itself ? I wouldn 't want to have anything be affected by me messing around . 😬 This is an example of some block -based text editing I 've managed to cobble together based on some of the ideas @Andreas Møller shared yesterday . Still got to figure out a few things like how to style a block and do marks (bold , etc . ) within a block but pleased with how it works in principle . Outputs a paragraph in this case and just using toddle out of the box - no custom code . 🔥2Made some progress over lunch . Swapped out text element for input as that enabled simpler focus and prevented weirdness with text . A couple of events to handle contenteditable and prevention of Enter taking a new line on contenteditable element and this is now working very well . 👍1Just tried to use external libraries for an RTE but styles aren 't properly applying . I tested it just typing up the html in notepad locally and it works in browser but for some reason it 's not fully working in toddle . https://rte-shared_components.toddle.site/RTE Those are 2 examples /libraries . I 'm probably doing something wrong @Lucas G / @Raphael Walters - If you 're interested , I managed to make some progress in the last 30 mins after taking a break from it today . I was struggling to figure out how to update blocks (by updating a specific item in the block array ) but a React post I read helped me understand it better . This is the result (I can now set a paragraph block to be a heading 1 ) . This gives me the recipe for building out all of the other element formatting options now and I 'll look to refactor that into a component formula to make that work better , have a menu of options or incorporate slash commands , etc . 🤯3Thanks , mate . Curiosity never kills the cat , my friend . Basically , it was because @Andreas Møller had said that you should be able to do things you can do in React /Angular in toddle and I came across a React -specific post on using map , so I knew it was possible - I just had to figure out how to do the comparison stuff . Was quite simple after that . 🤯 
@Raphael WaltersLooking forward to your tutorial on this ! 😉 @Andreas Møller
The best option is probably to wrap it In a webcomponent . 😭 @Andreas Møller - Following your awesome example via Loom , as you know I have set up my v1 for a toddle rte component but I 'm struggling to think about how I might achieve formatting marks e .g . bold , etc . I can see how it would be simple enough to bring in a JSON structure for formatting like Contentful but I 'm finding it challenging to figure out how to apply that based on user input . I know I can probably use styles to apply mark formatting and I now know how to do text selection and have some kind of component toolbar interaction but I cannot seem to work out how I would have a block update the JSON structure to apply marks formatting and then reapply that in the block component . Do you or the team have any pointers ? This has been bugging me for a bit and I think figuring that out would unlock the whole formatting thing and open up the scope for various editing capabilities . Man , this rte stuff is hard ! E .g . if I have user input on a block like This is some bold text , that creates a JSON object to apply the relevant output e .g . a paragraph . If the user highlights bold , I can use my text selection work I 've already done to get that and show a toolbar (as an example ) but then I don 't know how to update the existing JSON object to show that the text formatting has changed and then apply it to the same block . Know what I mean ?
