DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -1679,6 +1679,12 @@
 </li>
 <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/maps/">API Reference</a></li>
 </ul>
+</li><li>
+Markdown Converter
+<ul>
+<li><a href="ej2-javascript/markdown-converter/getting-started">Getting Started</a></li>
+<li><a href="ej2-javascript/markdown-converter/convert-markdown-to-html">Convert Markdown toHTML</a></li>
+</ul>
 </li><li> Markdown Editor 
     <ul>
         <li><a href="/ej2-javascript/markdown-editor/getting-started">Getting Started</a></li>

ej2-javascript/code-snippet/markdown-converter/markdown-converter-default/index.css

@@ -0,0 +1,25 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element1, #element2 {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    float: left;
+    height: 100px;
+    width:100px;
+}
+
+#element2 {
+    margin-left: 20px;
+}

ej2-javascript/code-snippet/markdown-converter/markdown-converter-default/index.js

@@ -0,0 +1,94 @@
+ej.base.enableRipple(true);
+
+var textArea;
+var srcArea;
+var markdownConverter = ej.markdownconverter.MarkdownConverter;
+
+var markdownRTE = new ej.richtexteditor.RichTextEditor({
+    height: '520px',
+    value:
+        'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The Syncfusion’s <b>Markdown Converter</b> is used in this sample to convert markdown into HTML content.',
+    placeholder: 'Enter your text here...',
+    formatter: new ej.richtexteditor.MarkdownFormatter({ listTags: { 'OL': '1., 2., 3.' } }),
+    editorMode: 'Markdown',
+    toolbarSettings: {
+        items: ['Bold', 'Italic', 'StrikeThrough', '|',
+            'Formats', 'Blockquote', 'OrderedList', 'UnorderedList', 'SuperScript', 'SubScript', '|',
+            'CreateLink', 'Image', 'CreateTable', '|',
+            {
+                tooltipText: 'Preview',
+                template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn"  aria-label="Preview Code">' +
+                    '<span class="e-btn-icon e-md-preview e-icons"></span></button>'
+            }, '|', 'Undo', 'Redo'
+        ]
+
+    },
+    created: function () {
+        textArea = defaultRTE.contentModule.getEditPanel();
+        textArea.addEventListener('keyup', function (e) {
+            markdownConversion();
+        });
+        mdsource = document.getElementById('preview-code');
+        mdsource.addEventListener('click', function (e) {
+            fullPreview();
+            if (e.currentTarget.classList.contains('e-active')) {
+                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
+                    'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo'
+                ]);
+            } else {
+                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
+                    'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo'
+                ]);
+            }
+        });
+    }
+});
+markdownRTE.appendTo('#markdown-editor');
+
+function markdownConversion() {
+    if (mdsource.classList.contains('e-active')) {
+        var id = defaultRTE.getID() + 'html-view';
+        var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');
+        htmlPreview.innerHTML = markdownConverterr.toHtml(defaultRTE.contentModule.getEditPanel().value, {
+            async: true,
+            gfm: true,
+            lineBreak: true,
+            silence: true
+        });
+    }
+}
+
+function fullPreview() {
+    var id = defaultRTE.getID() + 'html-preview';
+    var htmlPreview = defaultRTE.element.querySelector('#' + id);
+    var previewTextArea = defaultRTE.element.querySelector('.e-rte-content');
+    if (mdsource.classList.contains('e-active')) {
+        mdsource.classList.remove('e-active');
+        mdsource.parentElement.title = 'Preview';
+        textArea.style.display = 'block';
+        htmlPreview.style.display = 'none';
+        previewTextArea.style.overflow = 'hidden';
+    }
+    else {
+        mdsource.classList.add('e-active');
+        if (!htmlPreview) {
+            htmlPreview = ej.base.createElement('div', { className: 'e-content e-pre-source' });
+            htmlPreview.id = id;
+            textArea.parentNode.appendChild(htmlPreview);
+            previewTextArea.style.overflow = 'auto';
+        }
+        if (previewTextArea.style.overflow === 'hidden') {
+            previewTextArea.style.overflow = 'auto';
+        }
+        textArea.style.display = 'none';
+        htmlPreview.style.display = 'block';
+        htmlPreview.innerHTML = markdownConverter.toHtml(defaultRTE.contentModule.getEditPanel().value, {
+            async: true,
+            gfm: true,
+            lineBreak: true,
+            silence: true
+        });
+        mdsource.parentElement.title = 'Code View';
+    }
+}
+

ej2-javascript/code-snippet/markdown-converter/markdown-converter-default/index.ts

@@ -0,0 +1,99 @@
+import { enableRipple } from '@syncfusion/ej2-base';
+enableRipple(true);
+
+import {
+    RichTextEditor,
+    Link,
+    Image,
+    MarkdownEditor,
+    Toolbar,
+    Table,
+} from '@syncfusion/ej2-richtexteditor';
+import { MarkdownFormatter } from '@syncfusion/ej2-richtexteditor';
+import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';
+RichTextEditor.Inject(Link, Image, MarkdownEditor, Toolbar, Table);
+
+let textArea: HTMLTextAreaElement;
+let mdsource: HTMLElement;
+
+let markdownRTE: RichTextEditor = new RichTextEditor({
+    height: '520px',
+    value:
+        'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The Syncfusion’s <b>Markdown Converter</b> is used in this sample to convert markdown into HTML content.',
+    placeholder: 'Enter your text here...',
+    formatter: new MarkdownFormatter({ listTags: { 'OL': '1., 2., 3.' } }),
+    editorMode: 'Markdown',
+    toolbarSettings: {
+        items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'Blockquote', 'OrderedList',
+            'UnorderedList', 'SuperScript', 'SubScript', '|', 'CreateLink', 'Image', 'CreateTable', '|',
+            {
+                tooltipText: 'Preview', template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" aria-label="Preview Code">' +
+                    '<span class="e-btn-icon e-md-preview e-icons"></span></button>'
+            }, '|', 'Undo', 'Redo']
+
+    },
+    created: () => {
+        textArea = markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
+        textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
+            markDownConversion();
+        });
+        mdsource = document.getElementById('preview-code');
+        mdsource.addEventListener('click', (e: MouseEvent) => {
+            fullPreview();
+            if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
+                markdownRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
+                    'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo']);
+            } else {
+                markdownRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
+                    'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo']);
+            }
+        });
+    }
+});
+markdownRTE.appendTo('#markdown-editor');
+
+function markDownConversion(): void {
+    if (mdsource.classList.contains('e-active')) {
+        let id: string = markdownRTE.getID() + 'html-view';
+        let htmlPreview: HTMLElement = markdownRTE.element.querySelector('#' + id);
+        htmlPreview.innerHTML = MarkdownConverter.toHtml((markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value, {
+            async: true,
+            gfm: true,
+            lineBreak: true,
+            silence: true
+        }) as string;
+    }
+}
+function fullPreview(): void {
+    let id: string = markdownRTE.getID() + 'html-preview';
+    let htmlPreview: HTMLElement = markdownRTE.element.querySelector('#' + id);
+    let previewTextArea: HTMLElement = markdownRTE.element.querySelector('.e-rte-content') as HTMLElement;
+    if (mdsource.classList.contains('e-active')) {
+        mdsource.classList.remove('e-active');
+        mdsource.parentElement.title = 'Preview';
+        textArea.style.display = 'block';
+        htmlPreview.style.display = 'none';
+        previewTextArea.style.overflow = 'hidden';
+    } else {
+        mdsource.classList.add('e-active');
+        if (!htmlPreview) {
+            htmlPreview = createElement('div', { className: 'e-content e-pre-source' });
+            htmlPreview.id = id;
+            textArea.parentNode.appendChild(htmlPreview);
+            previewTextArea.style.overflow = 'auto';
+        }
+        if (previewTextArea.style.overflow === 'hidden') {
+            previewTextArea.style.overflow = 'auto';
+        }
+        textArea.style.display = 'none';
+        htmlPreview.style.display = 'block';
+        htmlPreview.innerHTML = MarkdownConverter.toHtml((markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value, {
+            async: true,
+            gfm: true,
+            lineBreak: true,
+            silence: true
+        }) as string;
+        mdsource.parentElement.title = 'Code View';
+    }
+}

ej2-javascript/code-snippet/markdown-converter/markdown-converter-default/js/index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Essential JS 2 Markdown Editor with Markdown Converter</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Typescript UI Controls">
+  <meta name="author" content="Syncfusion">
+  <link href="index.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-richtexteditor/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/material.css" rel="stylesheet" />
+
+  <script src="../index.js"></script>
+  <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+
+  <div id="container">
+    <div class="default-section">
+      <div id="splitter-rte-markdown-preview">
+        <div class="splitter-default-content pane1">
+          <div id="markdown-editor"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <style>
+    .heading {
+      float: left;
+      width: 50%;
+      position: relative;
+      box-sizing: border-box;
+      padding: 0px;
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
+    .title {
+      color: #333333;
+      letter-spacing: 1px;
+      padding-left: 10px;
+      text-align: center;
+      margin: 15px 0;
+    }
+
+    .e-richtexteditor textarea.e-content {
+      float: left;
+      border-right: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .e-richtexteditor .e-rte-content .e-content {
+      min-height: 150px;
+    }
+
+    .e-richtexteditor .e-rte-content {
+      overflow: hidden;
+    }
+
+    .bootstrap4 .e-icon-btn.e-active .e-md-preview::before {
+      content: '\e790';
+    }
+
+    .bootstrap4 .e-icon-btn .e-md-preview::before {
+      content: '\e787';
+    }
+
+    .tailwind .e-icon-btn.e-active .e-md-preview::before,
+    .tailwind-dark .e-icon-btn.e-active .e-md-preview::before,
+    .tailwind3 .e-icon-btn.e-active .e-md-preview::before,
+    .tailwind3-dark .e-icon-btn.e-active .e-md-preview::before,
+    .fluent .e-icon-btn.e-active .e-md-preview::before,
+    .fluent-dark .e-icon-btn.e-active .e-md-preview::before,
+    .fluent2 .e-icon-btn.e-active .e-md-preview::before,
+    .fluent2-dark .e-icon-btn.e-active .e-md-preview::before,
+    .bootstrap5 .e-icon-btn.e-active .e-md-preview::before,
+    .bootstrap5\.3 .e-icon-btn.e-active .e-md-preview::before,
+    .bootstrap5\.3-dark .e-icon-btn.e-active .e-md-preview::before,
+    .bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before,
+    .material3 .e-icon-btn.e-active .e-md-preview::before,
+    .material3-dark .e-icon-btn.e-active .e-md-preview::before {
+      content: '\e80e';
+    }
+
+    .tailwind .e-icon-btn .e-md-preview::before,
+    .tailwind-dark .e-icon-btn .e-md-preview::before,
+    .tailwind3 .e-icon-btn .e-md-preview::before,
+    .tailwind3-dark .e-icon-btn .e-md-preview::before,
+    .bootstrap5 .e-icon-btn .e-md-preview::before,
+    .bootstrap5\.3 .e-icon-btn .e-md-preview::before,
+    .bootstrap5\.3-dark .e-icon-btn .e-md-preview::before,
+    .bootstrap5-dark .e-icon-btn .e-md-preview::before,
+    .fluent .e-icon-btn .e-md-preview::before,
+    .fluent-dark .e-icon-btn .e-md-preview::before,
+    .fluent2 .e-icon-btn .e-md-preview::before,
+    .fluent2-dark .e-icon-btn .e-md-preview::before,
+    .material3 .e-icon-btn .e-md-preview::before,
+    .material3-dark .e-icon-btn .e-md-preview::before {
+      content: '\e7de';
+    }
+
+    .e-icon-btn.e-active .e-md-preview::before {
+      content: '\e350';
+    }
+
+    .e-icon-btn .e-md-preview::before {
+      content: '\e345';
+    }
+
+    .e-rte-content .e-content {
+      float: right;
+      width: 50%;
+      overflow: auto;
+      height: inherit;
+      padding: 8px;
+      height: 100%;
+    }
+
+    .e-rte-content .e-content.e-pre-source {
+      width: 100%;
+    }
+
+    .highcontrast .e-richtexteditor textarea.e-content {
+      border-right: 1px solid #fff;
+    }
+  </style>
+
+
+  <script>
+    var ele = document.getElementById('container');
+    if (ele) {
+      ele.style.visibility = "visible";
+    }   
+  </script>
+  <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>