Article Builder v3

The first article builder page was an attempt at letting the user build an article using the entire page. This was to allow the user to have a Word-like or Google Docs-like experience. It didn't have a great UI and it would be difficult to add a html/css/javascript editor to the Lexical Editor while still keeping what we care most about the rich text editor - the ability of readers to highlight certain sections of the article and comment specifically on that section. The point of the first iteration of the article builder was to keep the toolbar in view at all times.

The second article builder was an attempt at letting the user create smaller sections of an article and then add, remove, and rearrange the sections with drag and drop functionality. I think this version works better at smaller screen sizes and it is what I will be copying with this third iteration of the article builder.

New Article Builder Requirements

This article builder should look like the second version except instead of a add / remove button. Each "section" should have an add editor, add HTML/CSS/JavaScript, and remove section buttons.
The tabs for the HTML / CSS / JavaScript editor should be hidden when the editor is not focused. Listen for the focusin events.
When submitted, the lexical state for each lexical editor should be serialized to JSON and stored in an array and each html/css/js "Custom Code" section should be stored as html: string, css: string, javascript: string. See the object below

type ArticleBuilderToPost = (StringifiedLexicalState|{
html: string, css: string, js: string
})[];

Since I am the only one using the article builder for now, I don't need to worry about sand-boxing the javascript. I just need to post the html / css / js to the server and get back the js with a nonce.

Things To Keep In Mind

To include a Article Builder v3 and associated code on the page, include a form with the attribute data-article-builder-final .

There can only be one article builder v3 per page due to the fact the sort container must have the same id as all of the sections, and it is more trouble than its worth (probably) to make that work.

Article Builder Implementation

Article Title:

Insert Images

Image Requirements

Images must be less than 5 MegaBytes in size.
Images must have one of the following file types: .jpeg, .jpg, .png, .webp, .gif, .bmp, or .svg.
For inputs that accept multiple images, the maximum number of images you can upload at once is 30.

Uploading Images

Upload an image.
Edit the image. Make sure that you save the edits on the image by clicking the checkmark button before submitting the form.
- For each image, you have the opportunity to add a title and a description of the image. The title and description will be shown when the user clicks on the image. The title will be used as the alt attribute for the image as well.
If you want to add additional images, it is best to submit the form and relaunch this dialog.

Upload Single Image:

Uploading Multiple Images

Upload all the images that you want to include in the input.
Select how you want the images to appear in the editor.
- Image Carousel:: Inserts an image carousel into the editor. Make sure you upload all the images that you want to include in the carousel on the first upload. Any subsequent uploads will replace the currently saved images and their associated edits. If you want to include additional images, it is best to submit the current form, and then relaunch the dialog to add more images.
- Single Image(s): Inserts images into the editor as if they were inserted as a single image one by one.
Edit the images. Make sure that you save the edits on each image by clicking the checkmark button before moving on to the next image.
- For each image, you have the opportunity to add a title and a description of the image. The title and description will be shown when the user clicks on the image. The title will be used as the alt attribute for the image as well.
SUBMIT the form, and the images will be added to the input.

Upload Multiple Images:

Upload Type:

As Single Image(s) Image Carousel

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:

Article Builder v3