Welcome to the editable-content demo! This library is designed to give developers the ability to create rich-text editors which include React Components as elements.
As a demonstration, please feel free to play around with the editable text container below. It should work like a normal rich text field, but with one key distinction: there are two types of styling buttons: Standard Wrappers and Unbreakable Components.
Standard Wrappers work as you would normally expect from a word processor; when text is selected and the button is clicked, the selected text will take on that text style. Click the button again, and the selected text will lose that given text decoration. Text can have multiple standard wrappers in effect at the same time, such as text which is in italics and in bold while inside of other text which is bold. When the cursor is in just one space, clicking the button will make future text from the cursor have that decoration, or lose that style if the button was already clicked.
Unbreakable Components are different: Unlike Standard Wrappers, no other style can “nest” within an Unbreakable Component, and an Unbreakable Component cannot be inside of any other decoration. From a user standpoint, this means two things:
Unbreakable Components cannot be “split”, and so clicking the Unbreakable Component's button again will cause the entire component to disappear, leaving only the text behind, unless...
The cursor is placed at the end of the text inside the Unbreakable Component, in which case clicking the button will cause the cursor to move out of the Unbreakable Component's text and back into plain text.
All React Components are unbreakable!
Lastly, take a look at some of what's below the editable text container. There's a “Clear” button to clear the contents, as well as a “Render Text” button you can click. The Clear button will reset the content of the editable text container, and the Render Text button will make the content no longer editable. This means that a user can go back and forth between Editable Text and a Rendered (and non-editable) version of what they've written. If you want to take a look at some of the state changes going on under the hood, take a look at some of the accordion menus underneath, which should give you an idea as to how as a developer, you can save and rehydrate user-created React data. When you're all done, click the NEXT button to head to the next example.
Standard Wrappers
Unbreakable Components
Selection Text (selectionToString)
selectionToString:
selectionAnchorNode:
null
selectionAnchorOffset:
selectionFocusNode:
null
selectionFocusOffset:
Dehydrated HTML
Welcome to
<strong class="bold-standard" data-bk="bold">
<i class="italics-standard" data-bk="italics">
<u class="underlined-standard" data-bk="underlined">
editable-content!
</u>
</i>
</strong>
This tool is designed to give developers the ability to create rich-text editors which include
<div id="portal-container-f40524bc-5e43-46ed-b9c2-7ae6585f5c34" data-button-key="react-button" style="display: inline;">
React Components
</div>
as elements.
<br>
<br>
As a demo, please feel free to play around with the editable div below. As you can see, there are two types of buttons:
<strong class="bold-standard" data-bk="bold">
Standard Wrappers
</strong>
and
<strong data-bk="bold-unbreakable" data-unbreakable="">
Unbreakable Components.
</strong>
<br>
<br>
<strong class="bold-standard" data-bk="bold">
Standard Wrappers
</strong>
work as you would normally expect from a word processor- when text is selected and the button is clicked, the selected text will take on that text decoration. Click the button again, and the selected text will lose that given text decoration. Text can have multiple standard wrappers at work, such as text which is in italics and in bold while inside of other text which is bold. When the cursor is in just one space, clicking the button will make future text from the cursor have that decoration, or lose that decoration if the button was already clicked.
<br>
<br>
<strong data-bk="bold-unbreakable" data-unbreakable="">
Unbreakable Components
</strong>
are different: Unlike Standard Wrappers, no other decoration can “nest” within an Unbreakable Component, and an Unbreakable Component cannot be inside of any other decoration. Additionally,
<u data-bk="underlined-unbreakable" data-unbreakable="">
unbreakable components cannot be “split”,
</u>
and so
<div id="portal-container-8441e5d6-e708-40cb-baaf-8037688b06b1" data-button-key="react-button" style="display: inline;">
clicking the Wrapper Component's button again will cause the entire component to disappear, leaving only the text behind. (try it here!)
</div>
The one exception to this is if the cursor is placed at the end of the text inside the Unbreakable Component, in which case the cursor will move out of the Unbreakable Component's text and back into plain text.
<strong data-bk="bold-unbreakable" data-unbreakable="">
All React Components are unbreakable.
</strong>
<br>
