@k.s./nagwa-html-editor-deprecated
Advanced tools
A Typescript & React project that creates a WYSIWYG Rich text/ HTML editor using Slate js.
Readme
A Typescript & React project that creates a WYSIWYG Rich text/ HTML editor using Slate js.
These instructions will guide you to consume the API provided by the app.
Following these instructions will integrate the app into your website and will provide a globally defined API to be used.
Download the latest version of the app.
Link the app's CSS file the head of your HTML File. Example:
<head>
<link href="/static/css/app-min.css" rel="stylesheet"/>
</head>
Link the app's Javascript file in the body of your HTML File. Example:
<body>
<script src="/static/js/NagwaHTMLEditor.js"></script>
</body>
Here will explain the API provided by our app that can be found under the globally defined namespace NagwaHTMLEditor.
The NagwaHTMLEditor is implementing the following interface:
class NagwaHTMLEditor {
public static init: (config: EditorConfig) => Editor
}
interface EditorConfig {
containerId: string
uploadImage?: (image: File) => Promise<string>
oldValue?: string
locale?: "ar/eg" | "en/eg"
}
interface Editor {
getValue: () => string
clear(): void
setValue(oldValue: string, locale?: "ar/eg" | "en/eg"): void
readonly isEmpty: boolean
}
Here's an explanation of the provided API:
NagwaHTMLEditor:
init: The main method that initiates the app with the desired config and returns Editor object with utility methods.EditorConfig:
containerId: The id of the HTML element to contain the app. Note that the element corresponding with the provided id will be replaced with a div element with the same provided id. This property is mandatory for the app to run, if not provided the app won't run.oldValue: The old HTML value to initiate the app with. This is an optional property, if not provided the app will start with an empty state.locale: The locale of the provided oldValue to set the direction of the element according to it. This property is optional and falls back to "en/eg" if not provided.uploadImage: The function that handles uploading the image inputted bt the user. This property is optional, if not provided the feature of inserting image will not be available.Editor:
getValue: This method serializes the current editor value state into the desired HTML output.setValue: This method deserializes the HTML string inputted and sets the editor's state to the deserialized value.clear: This method clears the current editor value state and empties the editable area.isEmpty: This is a readonly property that tells you if the current state of the editor is empty or not.Here are some editor output samples that you can get using the getValue method:
3 text samples (bold, italic, ... etc.):
EN:
<p style="text-align: left;"><b>This is Bold.</b></p>
<p style="text-align: left;"><i>This is Italic.</i></p>
<p style="text-align: left;"><u>This is Underlined.</u></p>
<p style="text-align: left;"><span style="color:#e51d74">This is Colored.</span></p>
<p style="text-align: left;"><i><b>This is Bold Italic.</b></i></p>
<p style="text-align: left;"><u><b>This is Bold and Underlined.</b></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><b>This is Bold and Colored.</b></span></p>
<p style="text-align: left;"><u><i>This is Italic and Underlined.</i></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><i>This is Italic and Colored.</i></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u>This is Underlined and Colored.</u></span></p>
<p style="text-align: left;"><u><i><b>This is Bold, Italic, and Underlined.</b></i></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><i><b>This is Bold, Italic, and Colored</b></i></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><b>This is Bold, Underlined, and Colored.</b></u></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><i>This is Italic, Underlined, and Colored</i></u></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><i><b>This is Bold, Italic, Underlined and Colored.</b></i></u></span></p>
FR:
<p style="text-align: left;"><b>C'est audacieux.</b></p>
<p style="text-align: left;"><i>C'est en italique.</i></p>
<p style="text-align: left;"><u>Ceci est souligné.</u></p>
<p style="text-align: left;"><span style="color:#e51d74">C'est coloré.</span></p>
<p style="text-align: left;"><i><b>Ceci est en gras italique.</b></i></p>
<p style="text-align: left;"><u><b>Ceci est gras et souligné.</b></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><b>C'est audacieux et coloré.</b></span></p>
<p style="text-align: left;"><u><i>Ceci est en italique et souligné.</i></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><i>Ceci est en italique et en couleur.</i></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u>Ceci est souligné et coloré.</u></span></p>
<p style="text-align: left;"><u><i><b>Ceci est en gras, italique et souligné.</b></i></u></p>
<p style="text-align: left;"><span style="color:#e51d74"><i><b>Ceci est gras, italique et coloré.</b></i></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><b>Ceci est gras, souligné et coloré.</b></u></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><i>Ceci est en italique, souligné et coloré.</i></u></span></p>
<p style="text-align: left;"><span style="color:#e51d74"><u><i><b>Ceci est gras, italique, souligné et coloré.</b></i></u></span></p>
AR:
<p dir="rtl" style="text-align: right;"><b>هذا غامق.</b></p>
<p dir="rtl" style="text-align: right;"><i>هذا مائل.</i></p>
<p dir="rtl" style="text-align: right;"><u>هذا مسطر.</u></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74">هذا ملون.</span></p>
<p dir="rtl" style="text-align: right;"><i><b>هذا غامق ومائل.</b></i></p>
<p dir="rtl" style="text-align: right;"><u><b>هذا غامق ومسطر.</b></u></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><b>هذا غامق وملون.</b></span></p>
<p dir="rtl" style="text-align: right;"><u><i>هذا مائل ومسطر.</i></u></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><i>هذا مائل وملون.</i></span></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><u>هذا مسطر وملون.</u></span></p>
<p dir="rtl" style="text-align: right;"><u><i><b>هذا غامق، مائل ومسطر.</b></i></u></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><i><b>هذا غامق، مائل وملون.</b></i></span></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><u><b>هذا غامق، مسطر وملون.</b></u></span></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><u><i>هذا مائل، مسطر وملون</i></u></span></p>
<p dir="rtl" style="text-align: right;"><span style="color:#e51d74"><u><i><b>هذا غامق، مائل، مسطر وملون.</b></i></u></span></p>
2 Text (bold, italic, ... etc.) + inline math:
EN:
<p dir="ltr" style="text-align: left;"><b>This is Bold and here's an equation: </b>
<math-field default-mode="inline-math" value="x+y=z" className="hoverable-mathlive-mathfield inline"></math-field><b>.</b>
</p>
<p dir="ltr" style="text-align: left;"><i>This is Italic and here's an equation : </i>
<math-field default-mode="inline-math" value="\\sin\\left(\\frac{x}{y}\\right)" className="hoverable-mathlive-mathfield inline"></math-field><i>.</i>
</p>
<p dir="ltr" style="text-align: left;"><u>This is Underlined and here's an equation: </u>
<math-field default-mode="inline-math" value="\\sqrt[3]{x^2+y^2}" className="hoverable-mathlive-mathfield inline"></math-field><u>.</u>
</p>
<p dir="ltr" style="text-align: left;"><span style="color:#e51d74">This is Colored and here's an equation: </span>
<math-field default-mode="inline-math" value="x^{\\left(\\frac{\\sin45}{\\cos45}\\right)}" className="hoverable-mathlive-mathfield inline"></math-field><span style="color:#e51d74">.</span>
</p>
AR:
<p dir="rtl" style="text-align: right;"><b>هذا غامق وهذه معادلة:</b>
<math-field default-mode="inline-math" value="س+ص=ع" className="hoverable-mathlive-mathfield inline"></math-field>
<b>.</b>
</p>
<p dir="rtl" style="text-align: right;"><i>هذا مائل وهذه معادلة:</i>
<math-field default-mode="inline-math" value="\\ga\\left(\\frac{س}{ص}\\right)" className="hoverable-mathlive-mathfield inline"></math-field><i>.</i>
</p>
<p dir="rtl" style="text-align: right;"><u>هذا مسطر وهذه معادلة:</u>
<math-field default-mode="inline-math" value="\\sqrt[٣]{س^٢+ص^٢}" className="hoverable-mathlive-mathfield inline"></math-field><u>.</u>
</p>
<p dir="rtl" style="text-align: right;"><span style="color:rgb(229, 29, 116)">هذا ملون وهذه معادلة:</span>
<math-field default-mode="inline-math" value="س^{\\left(\\frac{\\ga٤٥}{\\gata٤٥}\\right)}" className="hoverable-mathlive-mathfield inline"></math-field><span style="color:rgb(229, 29, 116)">.</span>
</p>
2 Text + inline math + Displayed math:
EN:
<p>Here's an inline equation: <math-field default-mode="inline-math" value="x^2\\;=\\;\\sqrt[3]{y^{\\frac{x}{2}}+z}" className="hoverable-mathlive-mathfield inline"></math-field></p>
<p>Here's a display equation:</p>
<math-field default-mode="math" value="x^2e^{^{\\cos x}}=\\int_0^t\\frac{1}{\\sqrt{t^7}}\\;\\differentialD t" className="hoverable-mathlive-mathfield block"></math-field>
AR:
<p dir="rtl" style="text-align: right;">هذه معادلة في نفس السطر: <math-field default-mode="inline-math" value="س^٢=\\;\\sqrt[٣]{ص^{\\frac{س}{٢}}+ع}" className="hoverable-mathlive-mathfield inline"></math-field></p>
<p dir="rtl" style="text-align: right;">هذه معادلة في سطر منفصل:</p>
<math-field default-mode="math" value="س^٢\\exponentialHaa^{\\gataس}=\\int_٠^ز\\frac{١}{\\sqrt{ز^٧}}\\;دز" className="hoverable-mathlive-mathfield block"></math-field>
2 Text + inline math + chemistry:
EN:
<p>This is an inline equation <math-field default-mode="inline-math" value="y^{\\frac{3}{2}}" className="hoverable-mathlive-mathfield inline"></math-field></p>
<p>This is a display chemistry equation:</p>
<math-field default-mode="math" value="\\ce{H2O}+\\ce{2H2SO4}\\ce{->[\\Delta]}\\ce{\\ce{Na}}^-+\\ce{NaCL}\\ce{v}" className="hoverable-mathlive-mathfield block"></math-field>
AR:
<p dir="rtl" style="text-align: right;">هذه معادلة في نفس السطر: <math-field default-mode="inline-math" value="ص^{\\frac{٢}{٣}}" className="hoverable-mathlive-mathfield inline"></math-field></p>
<p dir="rtl" style="text-align: right;">هذه معادلة كيميائية في سطر منفصل:</p>
<math-field default-mode="math" value="\\ce{H2O}+\\ce{2H2SO4}\\ce{->[\\Delta]}\\ce{Na}^-+\\ce{NaCL}\\ce{v}" className="hoverable-mathlive-mathfield block"></math-field>
2 Text + inline math + chemistry + Table (cells include chemistry, math, text):
EN:
<p>Table without Headers:</p>
<div class="table-wrapper">
<table>
<tbody>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td>This is an inline equation: <math-field default-mode="inline-math" value="x+y=z\\sin45^{2+3}" className="hoverable-mathlive-mathfield inline"></math-field></td>
<td>This is an inline chemistry equation: <math-field default-mode="inline-math" value="\\ce{HCl}+\\ce{NaOH}\\ce{->[Heat][Heat]}\\ce{H2O}+\\ce{NaCl}\\ce{v}" className="hoverable-mathlive-mathfield inline"></math-field></td>
<td>Cell4</td>
</tr>
<tr>
<td>Cell5</td>
<td>Cell6</td>
<td>Cell7</td>
</tr>
</tbody>
</table>
</div>
<p>Table with Headers:</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell1</td>
<td style="text-align: right;">Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td>Cell4</td>
<td style="text-align: center;">Cell5</td>
<td>Cell6</td>
</tr>
</tbody>
</table>
</div>
AR:
<p dir="rtl" style="text-align: right;">جدول بلا عناوين:</p>
<div class="table-wrapper">
<table>
<tbody>
<tr>
<td dir="rtl" style="text-align: right;">خلية٣</td>
<td dir="rtl" style="text-align: right;">خلية٢</td>
<td dir="rtl" style="text-align: right;">خلية١</td>
</tr>
<tr>
<td dir="rtl" style="text-align: right;">هذه معادلة: <math-field default-mode="inline-math"
value="س+ص=ع\\ga٤٥^{٢+٣}" className="hoverable-mathlive-mathfield inline"></math-field>
</td>
<td dir="rtl" style="text-align: right;">هذه معادلة كيميائية: <math-field default-mode="inline-math"
value="\\ce{HCl}+\\ce{NaOH}\\ce{->[Heat][Heat]}\\ce{H2O}+\\ce{NaCl}\\ce{v}"
className="hoverable-mathlive-mathfield inline"></math-field>
</td>
<td dir="rtl" style="text-align: right;">خلية٤</td>
</tr>
<tr>
<td dir="rtl" style="text-align: right;">خلية٧</td>
<td dir="rtl" style="text-align: right;">خلية٦</td>
<td dir="rtl" style="text-align: right;">خلية٥</td>
</tr>
</tbody>
</table>
</div>
<p dir="rtl" style="text-align: right;">جدول بعناوين:</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th dir="rtl" style="text-align: right;">عنوان ٣</th>
<th dir="rtl" style="text-align: right;">عنوان ٢</th>
<th dir="rtl" style="text-align: right;">عنوان ١</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="rtl" style="text-align: right;">خلية٣</td>
<td dir="rtl" style="text-align: center;">خلية٢</td>
<td dir="rtl" style="text-align: right;">خلية١</td>
</tr>
<tr>
<td dir="rtl" style="text-align: right;">خلية٦</td>
<td dir="rtl" style="text-align: left;">خلية٥</td>
<td dir="rtl" style="text-align: right;">خلية٤</td>
</tr>
</tbody>
</table>
</div>
2 Text + inline math + image with style:
EN:
<p>Here's an equation: <math-field default-mode="inline-math" value="\\frac{x+y}{x+z}=y+2" className="hoverable-mathlive-mathfield inline"></math-field></p>
<div><img src="https://media.glassdoor.com/l/8b/74/4e/81/the-premises-at-night.jpg" alt="Nagwa's premises" /></div>
<p>Here's an unordered list:</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<p>Here's an ordered list:</p>
<ol>
<li>item</li>
<li>equation: <math-field default-mode="inline-math" value="x^2+1" className="hoverable-mathlive-mathfield inline"></math-field></li>
<li>item</li>
</ol>
AR:
<p dir="rtl" style="text-align: right;">هذه معادلة: <math-field default-mode="inline-math" value="\\frac{س+ص}{س+ع}=ص+٢" className="hoverable-mathlive-mathfield inline"></math-field></p>
<p></p>
<div><img src="https://media.glassdoor.com/l/8b/74/4e/81/the-premises-at-night.jpg" alt="Nagwa's premises" /></div>
<p dir="rtl" style="text-align: right;">هذه قائمة غير مرقمة:</p>
<ul>
<li dir="rtl" style="text-align: right;">عنصر</li>
<li dir="rtl" style="text-align: right;">عنصر</li>
<li dir="rtl" style="text-align: right;">عنصر</li>
</ul>
<p dir="rtl" style="text-align: right;">هذه قائمة مرقمة:</p>
<ol>
<li dir="rtl" style="text-align: right;">عنصر</li>
<li dir="rtl" style="text-align: right;">معادلة: <math-field default-mode="inline-math" value="س^٢+١" className="hoverable-mathlive-mathfield inline"></math-field></li>
<li dir="rtl" style="text-align: right;">عنصر</li>
</ol>
Here's an example of how to consume the API.
Folder Structure:
build
├─ index.html
└─ static
├─ css
│ ├─ NagwaHTMLEditor-min.css
│ └─ NagwaHTMLEditor-min.css.map
├─ fonts
│ ├─ KaTeX_AMS-Regular.woff2
│ ├─ KaTeX_Caligraphic-Bold.woff2
│ ├─ KaTeX_Caligraphic-Regular.woff2
│ ├─ KaTeX_Fraktur-Bold.woff2
│ ├─ KaTeX_Fraktur-Regular.woff2
│ ├─ KaTeX_Main-Bold.woff2
│ ├─ KaTeX_Main-BoldItalic.woff2
│ ├─ KaTeX_Main-Italic.woff2
│ ├─ KaTeX_Main-Regular.woff2
│ ├─ KaTeX_Math-BoldItalic.woff2
│ ├─ KaTeX_Math-Italic.woff2
│ ├─ KaTeX_SansSerif-Bold.woff2
│ ├─ KaTeX_SansSerif-Italic.woff2
│ ├─ KaTeX_SansSerif-Regular.woff2
│ ├─ KaTeX_Script-Regular.woff2
│ ├─ KaTeX_Size1-Regular.woff2
│ ├─ KaTeX_Size2-Regular.woff2
│ ├─ KaTeX_Size3-Regular.woff2
│ ├─ KaTeX_Size4-Regular.woff2
│ ├─ KaTeX_Typewriter-Regular.woff2
│ ├─ NagwaArabicMath.woff2
│ ├─ NagwaMath.woff2
│ ├─ NotoNaskhArabic-Bold.woff2
│ ├─ NotoNaskhArabic-Regular.woff2
│ ├─ STIX2Text-Bold.woff2
│ ├─ STIX2Text-BoldItalic.woff2
│ ├─ STIX2Text-Italic.woff2
│ ├─ STIX2Text-Regular.woff2
│ ├─ droidnaskh-bold.woff2
│ ├─ droidnaskh-regular.woff2
│ ├─ fa-brands-400.woff2
│ ├─ fa-light-300.woff2
│ ├─ fa-regular-400.woff2
│ ├─ fa-solid-900.woff2
│ ├─ notosans-bold-webfont.woff2
│ ├─ notosans-regular-webfont.woff2
│ ├─ summernote.eot
│ ├─ summernote.ttf
│ ├─ summernote.woff
│ ├─ summernote.woff2
│ └─ times-extrabold.woff2
├─ images
│ ├─ image-file.svg
│ ├─ latex-icon-blue.svg
│ ├─ latex-icon.svg
│ ├─ pattern.svg
│ ├─ select-arrow.svg
│ ├─ sorting-asc.svg
│ ├─ sorting-desc.svg
│ ├─ sorting.svg
│ ├─ three-dots.svg
│ ├─ upload-cloud-icon.svg
│ ├─ video-play-blue.svg
│ └─ video_play.svg
└─ js
├─ NagwaHTMLEditor.js
├─ NagwaHTMLEditor.js.LICENSE.txt
└─ NagwaHTMLEditor.js.map
index.html:
<!doctype html>
<html lang="en">
<head>
...
<link href="/static/css/NagwaHTMLEditor-min.css" rel="stylesheet">
</head>
<body>
...
<div id="StemEditor"></div>
...
<script src="/static/js/NagwaHTMLEditor.js"></script>
<script>
const stemEditor = NagwaHTMLEditor.init({
containerId: "StemEditor",
oldValue: "<p>Hello World!</p>",
locale: "en/eg"
})
const stemEditorValue = stemEditor.getValue()
</script>
</body>
</html>
These instructions will get you a copy of the project up and running on your local machine.
You have to have Node.js v14.18.1, and npm v6.14.15 installed.
Also, check ./package.json for all the packages used in this project
Clone this repo, open the terminal and navigate to the repo directory on your local machine, and then run:
npm install
wait until it's done and you're good to go!
Note: There will be a high severity audit problem when you install the packages.
This Problem is caused by react-scripts package.
This is a false positive according to #9469 (comment) from the maintainers on this issue, so there's nothing to worry about.
A commit messages consists of three distinct parts separated by a blank line: the title, an optional body and an optional footer. The layout looks like this:
type: subject
body
The type is contained within the title and can be one of these types:
Subjects should be no greater than 50 characters, should begin with a capital letter and do not end with a period.
Use an imperative tone to describe what a commit does, rather than what it did. For example, use change; not changed or changes.
Not all commits are complex enough to warrant a body, therefore it is optional and only used when a commit requires a bit of explanation and context. Use the body to explain the what and why of a commit, not the how.
When writing a body, the blank line between the title and the body is required and you should limit the length of each line to no more than 72 characters.
For more information about the style guide for Git and programming Languages check: Udacity's Code Style Guide
v0.1.11.md (v is a must)npm i in terminal, to update package.lockv0.1.11. (v is a must)npm run build in terminalasset-manifest.json file, and static folder from bucketasset-manifest.json file, and static foldernagwa-mathlivenpm run build-static in terminaldist folder from nagwa-mathlive, with contents of build/static folderdev-educator folderbuild/static folder, to dev-educator folder on FileZillaFAQs
A Typescript & React project that creates a WYSIWYG Rich text/ HTML editor using Slate js.
We found that @k.s./nagwa-html-editor-deprecated demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.