Nagwa HTML Editor

Introduction

This project provides a WYSIWYG editor that is used in Nagwa internal systems to author content. Currently the editor is used in 2 internal Nagwa projects:

• New CDS (Authoring Tool): New CDS [Content development system] is the system used by Nagwa content teams to author questions. The editor is used inside the authoring tool project, which in turn is used in the newcds.nagwa.com
• CodeBites admin area: The editor is used in CodeBites admin area to author explainers and challenges for CodeBites website.

Technology

The Nagwa HTML Editor uses Lexical. Lexical is considered a framework for creating editors with extended capibilities.

Used Lexical plugins

This project uses the following Lexical plugins (from Lexical framework):

• RichTextPlugin: provides rich text editing, including typing, deletion, copy/pasting, indent/outdent and bold/italic/underline/strikethrough text formatting
• CheckListPlugin: adds support for check lists
• LinkPlugin: adds support for links
• ClickableLinkPlugin: redirect to a URL when clicking on a link in edit mode, Finds the nearest link node on click and opens the link
• TabFocusPlugin: Used to preserve text selection when using the Tab key
• TabIndentationPlugin: adds the ability to indent content using the tab key
• ListMaxIndentLevelPlugin: Limits the maximum indentation level in a list

The project also defines the following plugins: