Various Lexical Implementations

Why Create This Page

I want to test out various implementations of the rich text editor. The Lexical Rich Text Editor has more uses than just being used in the article builder, it also can be used for comments or inputs that require more than just plain text. The rich text editor will be used fo render comments, render various things for the poll implementation.

I am using this page to test out the various implementations, figure out wha capabilities I want each of the implementations to have, to figure out how they will be rendered, and to

How To Use This Page

Below, you can test out the various lexical implementations. You can read about / test what their capabilities are and the click the SUBMIT button to submit the form and see how that version of the lexical implementation is rendered.

Registering a Lexical Editor

The basic setup of a lexical editor:

<div class="lexical-wrapper">
  <!-- Toolbars -->
  <div 
  data-rich-text-editor 
  data-type="TYPE" 
  data-editable="(true|false)" 
  [data-no-color]
  [data-char-min-length="NUMBER"]
  [data-char-max-length="NUMBER"]
  [data-node-restrictions="JSON-STRINGIFIED-OBJECT"]
  >
    <!-- Initial HTML -->
  </div>
  <!-- Toolbars -->
</div>

Description of The Lexical Setup
Attribute:	Description:
.lexical-wrapper	This class is used often when registering listeners on the lexical editor. The class can be used on the same <div> element has the <div> element that has the [data-rich-text-editor] attribute - and this is how it should be when you are just rendering the editor (not editing). There is no styling directly related to this class, but there are styles related to the elements related to the class.
[data-rich-text-editor]	The JavaScript searches for div[data-rich-text-editor] elements when looking for editors to register.
[data-type]	Tells the JavaScript which kind of editor to register. Here is a list of different types: full: The type that should be with articles. Includes all nodes. comment: The type that should be used with comments. Restricts some types of nodes. text-only: The type that you should include when you only want the user to insert text and paragraph nodes. text-with-links: The type that you should include when you only want the user to insert text, link, and paragraph nodes. text-block-elements: The type that you should include when you only want the user to insert text, link, paragraph, blockquote, list, code, math, and table nodes. The elements below might be removed. article: Initially used for article nodes. Should be removed by now and replaced with poll-question: Currently used for poll questions. Will probably be replaced with a customized comment node. poll-short-blog: Currently used for polls. Will probably be replaced with comment editors. poll-option: Currently used for polls. Will probably be replaced with comment editors. range-description: Currently used for polls. Will probably be replaced with comment editors.
[data-editable]	This optional attribute can be set to true or false. When set to false, then the editable state of the editor is immediately set to false.
[data-no-color]	This optional attribute, when included, tells the JavaScript to not allow the user to change the background-color or text-color of anything in the editor.
[data-char-min-length]	This optional attribute tells the user what the minimum length of the text inside the editor should be.
[data-char-max-length]	This optional attribute tells the user what the maximum length of the text inside the editor should be.
[data-max-restrictions]	This optional attribute tells the user how many nodes of certain types are allowed in the editor.

Article Builder Implementation

The article builder lexical implementation is used to allow users to compose articles. It should allow basically all types of Lexical nodes.

Input

Insert article content here...

Output

Comment Implementation

The comment implementation of the rich text editor is used to allow users to create comments for articles, polls, or other entities.
The comment implementation should not include heading nodes or section heading nodes because that might introduce semantically incorrect HTML - unless you wrap each comment in an <article> tag.
The comment implementation should be implemented with a min/max length character counter, you should constrain the size of images on the server, and you should be able to constrain how many of certain types of nodes are inserted into the Lexical editor, i.e. one image node OR one video node OR one table.
There might need to be a type of node created so that you can constrain the height of the node on initial rendering. Like a hide/show node that can be used to limit the initial height of long comments. This would need to be added to the editor on the server.

Input

Insert comment here...

Output

Text Only Implementation

The text only implementation of the rich text editor should be used in places where you want the user to create something more customizable than what is allowed with just a <textarea>.
The text only implementation should come in versions that allow users to change the background color / text color of the text and change the style of the paragraph and versions that do not allow the user to change colors / styles of the paragraph.
You will need to change the implementation of the floating action toolbar to prevent the users from inserting links and from inserting

Input

Output

No Color Implementation:

Input

Output

Text with Links Lexical Implementation

The text with links lexical implementation of the rich text editor should be used in places where you want the user to embed links in an input. It should be basically like the text only implementation, except that it should also allow for links.

Input

Insert comment here...

Output

No Color Implementation:

Input

Insert comment here...

Output

Text and Block-Text Elements Lexical Implementation

This implementation should implement basically anything that only includes text - e.g., include lists, blockquote, code, math, and tables.

Input

Insert comment here...

Output

No Color Implementation:

Input

Insert comment here...

Output

About Embedding News Content

Navigate to the News Article you want to embed.
Copy the url of the article and paste into the input below.
- For a news article to be properly embedded, it must have valid <meta> tags as seen below.
- The image url must be able to be accessed from any source.

<meta property="og:type" content="article" />
<meta property="og:type" content="any string" />
<meta property="og:image" content="valid image url" />
<meta property="og:description" content="any string" />

Inserting Custom HTML:

Basics:

Double click inside the custom HTML to edit the html.
Learn about the basics of HTML using the mdn web docs on HTML.

Inserting Code Expressions:

 <dialog> below. You can generate inline code or block code, like seen below:

#include <stdio.h>

void bubble_sort(int arr[], int n) {
    int i, j;
    for (i = 0; i < n-1; i++) {
        for (j = 0; j < n-i-1; j++) {
            if (arr[j] > arr[j+1]) {
                int temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
}

Inserting $\Large{LaTeX}$ Expressions:

You can insert inline:

a^2+b^2=c^2

or block math expressions (see below) by using the Math Markup dialog below the code editor.

e^{i\pi}+1=0

SVG Icon Search

You can search for svg icons () by clicking the SVG Search button below.

AI Code Generation

To be Completed

The Sanitization of HTML

Go over the sanitization of HTML process: