Improvements to Article Builder to Make

Rich Text Editor

• You should set the spellcheck attribute to true as the default value on the contenteditable and maybe include a button so that users can toggle on / off the spellcheck.
• • Probably remove the spellcheck settings customization checkbox and use the spellcheck where it is
  • I have found that I am a terrible speller, and I have seen online that peoples' ability to spell has gone downhill since autocomplete became so good - it's a good feature to have.
  • Look into whether or not you can get access to the system's spelling suggestions and maybe try to implement your own dropdown for suggested spelling - this would not work well on mobile.
• You need to add more Hotkeys that make interacting with the rich text editor easier. Turing on / off inline code has been annoying. Maybe add something where users can customize their hotkeys and then include the hotkeys in hidden input fields in the lexical-dialogs partial.
• • The customization would be extra and maybe not necessary. Everything in the rich text editor should have a hotkey - and if the hotkey involves expanding a dropdown, then the window should scroll to the dropdown on open.
  • • You need to look at the tabindex attributes for all the buttons / inputs around the rich text editor (in the toolbars) as well. (Maybe look at tab index behavior for custom dropdowns.)
• Implement Jupyter notebooks, graphs, and 3d objects
• • Actually, I'm only going to include Jupyter Notebooks - 3d objects can be show n off using videos (I could make something that makes a short video given a 3d object), and charts are probably best implemented using Jupyter notebooks - this allows users to see how the conclusion was reached and what the data source is.
  • Rather than add Jupyter Notebooks to the lexical editor, I am going to let users append the Jupyter notebook as a new article section.
  • • Need to improve the styling of the Jupyter Notebooks
• For insetting multiple images, there should only be two tabs:
• • Insert single image (self explanatory)
  • Insert multiple images
  • • Include the option to insert an image carousel and image lists as seen on the Material UI website.
    • • This involves changing how images are retrieved from CloudFront / the s3 bucket and involves resizing the images with a lambda function using Sharp or something in GO like seen here. The images would need to be requested with a query parameter than specifies the width and height: ?width=NUMBER&height=NUMBER
• Remove the options to insert multiple audio and video records.
• Have encountered an infinite loop when backspacing into a Math block. Need to look into that.
• Sometimes it is hard to break out of lists on backspace . Need to look into that.

Code Editor

• Look into whether or not you can implement spellcheck for code mirror.
• Look into DOM Purify or an equivalent in GO. You can purify the HTML of the user to allow users to create forms which could allow for custom data gathering / analysis
• Need to look at improving Emmet implementation for HTML / CSS
• • NOTE: Remove the option to specify whether or not to use Emmet in the settings - it should be used by default
  • See this forum for an example of how to specify key bindings.
• Need to fix the styling for find and replace. See this forum.
• • Actually, just disable find and replace. The code snippets that users will write should be short enough that find and replace isn't worth it.

Other

• Add a Markdown option
• • It is kind of time consuming to create notes using the Rich Text Editor. Markdown notes are for simple notes and what not.
  • Don't allow for transferring between markdown and Lexical editor - it would take too much time to implement and I don't think it's worth it
• Need to add table of contents for each article - find out a way to do this by parsing the editors or by using generative AI
• Maybe add a confirmation popup to delete a section of the article

May 28, 2024 - Improvements to Make From Observations

• http links should be allowed
• • When new content is loaded, we should check all the links that have rel="ugc" and set it so that when the link is clicked, we prevent the default behavior and open a modal that warns users they are about to navigate to a page that may not be safe. We should save the href attribute of the user-generated link that was clicked inside a link in the modal. When the modal "OK" button is clicked, then we can dispatch a click event on that link.
• Add a contextmenu listener on images (when we are in edit mode), to make it easier for users to edit the alt and data-text attributes of the image.
• You should change the paragraph default styling
• • If the paragraph has no previous siblings AND the paragraph's parent is the root element, then it should have margin-top:12px;, else assign margin-top: 4px;.
• You also need to change how the block style dialog assigns the values to the inputs in the dialog when opening the dialog.

• Fix stuff about lexical implementation

1. 1. When the lexical implementation is focused on mobile, hide the Navigation bar and the floating action button
   2. Fix how the section heading node is implemented
   3. Images and videos of different heights for mobile tablet and desktop
   4. Hide text to speech on mobile since it should already have it
   5. Implement lazy loading for articles
   6. Quit setting the nodes to disabled
   7. Figure out why a.same-page isnt styled correctly on mobile. Look at replace :hover on mobile with :active.
   8. On mobile, you need to be careful about popup positioning
   9. Fix how decorator blocks are exported