markdown-editor-preview-plnkr.json

{"index.css":"#rtePreview .e-richtexteditor textarea.e-content#markdownPreview_editable-content {\r\n    float: left;\r\n    border-right: 1px solid rgba(0, 0, 0, 0.12);\r\n}\r\n#rtePreview #markdownPreview .e-richtexteditor .e-rte-content .e-content{\r\n    min-height: 150px;\r\n}\r\n\r\n#rtePreview #markdownPreview .e-richtexteditor .e-rte-content {\r\n    overflow: hidden;\r\n}\r\n\r\n#rtePreview .e-icon-btn.e-active .e-md-preview::before {\r\n    content: '\\e350';\r\n}\r\n\r\n#rtePreview .e-icon-btn .e-md-preview::before {\r\n    content: '\\e345';\r\n}\r\n\r\n#rtePreview .e-rte-content #markdownPreviewhtml-preview.e-content {\r\n    float: right;\r\n    width: 50%;\r\n    overflow: auto;\r\n    height: inherit;\r\n    padding: 8px;\r\n    height: 100%;\r\n}\r\n\r\n#rtePreview #markdownPreview .e-rte-content .e-content.e-pre-source {\r\n    width: 100%;\r\n}\r\n\r\n.sb-header {\r\n    z-index: 100 !important;\r\n}\r\n\r\n#rtePreview {\r\n    overflow: hidden;\r\n}\r\n\r\n#rtePreview .content-wrapper {\r\n    width: auto;\r\n    margin: 0;\r\n}","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Rich-text-editor · Preview · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/rich-text-editor\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/rich-text-editor/default.html\"><span>Rich-text-editor</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">Preview</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                    <p>This sample demonstrates how to preview markdown changes in rich text editor. \n        Type or edit the display text, and apply format to view the preview of markdown. \n        You can preview the markdown changes immediately in the preview area.</p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                <p>The rich text editor allows you to preview markdown changes immediately using <code>preview</code>. \n                The third-party library <code>Marked</code> is used in this sample to convert markdown into HTML content.</p>\n                \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * RichTextEditor markdown preview sample\r\n */\r\nimport * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RichTextEditorComponent, MarkdownEditor, Inject, Toolbar, Image, Link, IToolbarItems, RichTextEditor, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';\r\nimport { SampleBase } from './sample-base';\r\nimport { createElement, KeyboardEventArgs, isNullOrUndefined, addClass, removeClass, Browser } from '@syncfusion/ej2-base';\r\nimport * as Marked from 'marked';\r\n\r\n\r\nexport class Preview extends SampleBase<{}, {}> {\r\n\r\n    private rteObj: RichTextEditorComponent;\r\n\r\n    // set the value to RichTextEditor\r\n    private value: string = `In RichTextEditor , you click the toolbar buttons to format the words and the changes are visible immediately. \r\nMarkdown 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 \r\nand phrases should look different from each other\r\n    \r\nRichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.\r\n    \r\nWe can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).\r\n    \r\nThe third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content`;\r\n\r\n    // RichTextEditor items list\r\n    private items: (string | IToolbarItems)[] = ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',\r\n    { tooltipText: 'Preview', template: '<button id=\"preview-code\" class=\"e-tbar-btn e-control e-btn e-icon-btn\">' +\r\n        '<span class=\"e-btn-icon e-md-preview e-icons\"></span></button>' },\r\n    { tooltipText: 'Split Editor', template: '<button id=\"MD_Preview\" class=\"e-tbar-btn e-control e-btn e-icon-btn\">' +\r\n        '<span class=\"e-btn-icon e-view-side e-icons\"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo'];\r\n\r\n    private textArea: HTMLTextAreaElement;\r\n    private mdsource: HTMLElement;\r\n    private mdSplit: HTMLElement;\r\n    private htmlPreview: HTMLElement;\r\n\r\n    //RichTextEditor ToolbarSettings\r\n    private toolbarSettings: object = {\r\n        items: this.items\r\n    };\r\n\r\n    public markDownConversion(): void {\r\n        if (this.mdSplit.classList.contains('e-active')) {\r\n            let id: string = this.rteObj.getID() + 'html-view';\r\n            let htmlPreview: HTMLElement = this.rteObj.element.querySelector('#' + id);\r\n            this.htmlPreview.innerHTML = Marked((this.rteObj.contentModule.getEditPanel() as HTMLTextAreaElement).value);\r\n        }\r\n    }\r\n    public fullPreview(e: { [key: string]: string | boolean }): void {\r\n        let id: string = this.rteObj.getID() + 'html-preview';\r\n        this.htmlPreview = this.rteObj.element.querySelector('#' + id);\r\n        if ((this.mdsource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {\r\n            this.mdsource.classList.remove('e-active');\r\n            this.mdSplit.classList.remove('e-active');\r\n            this.mdsource.parentElement.title = 'Preview';\r\n            this.textArea.style.display = 'block';\r\n            this.textArea.style.width = '100%';\r\n            this.htmlPreview.style.display = 'none';\r\n        } else {\r\n            this.mdsource.classList.add('e-active');\r\n            this.mdSplit.classList.add('e-active');\r\n            if (!this.htmlPreview) {\r\n                this.htmlPreview = createElement('div', { className: 'e-content' });\r\n                this.htmlPreview.id = id;\r\n                this.textArea.parentNode.appendChild(this.htmlPreview);\r\n            }\r\n            if (e.type === 'preview') {\r\n                this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');\r\n            } else {\r\n                this.htmlPreview.classList.remove('e-pre-source');\r\n                this.textArea.style.width = '50%';\r\n            }\r\n            this.htmlPreview.style.display = 'block';\r\n            this.htmlPreview.innerHTML = Marked((this.rteObj.contentModule.getEditPanel() as HTMLTextAreaElement).value);\r\n            this.mdsource.parentElement.title = 'Code View';\r\n        }\r\n    }\r\n    public rendereComplete(): void {\r\n        this.textArea = this.rteObj.contentModule.getEditPanel() as HTMLTextAreaElement;\r\n        this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => { this.markDownConversion(); });\r\n        let rteObj: RichTextEditor = this.rteObj;\r\n        this.mdsource = document.getElementById('preview-code');\r\n        this.mdsource.addEventListener('click', (e: MouseEvent) => {\r\n            this.fullPreview({ mode: true, type: 'preview' });\r\n            if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {\r\n                rteObj.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\r\n                    'Formats', 'OrderedList', 'UnorderedList', '|',\r\n                    'CreateLink', 'Image', 'Undo', 'Redo']);\r\n                (e.currentTarget as HTMLElement).parentElement.nextElementSibling.classList.add('e-overlay');\r\n            } else {\r\n                rteObj.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\r\n                    'Formats', 'OrderedList', 'UnorderedList', '|',\r\n                    'CreateLink', 'Image', 'Undo', 'Redo']);\r\n                (e.currentTarget as HTMLElement).parentElement.nextElementSibling.classList.remove('e-overlay');\r\n            }\r\n        });\r\n        this.mdSplit = document.getElementById('MD_Preview');\r\n        this.mdSplit.addEventListener('click', (e: MouseEvent) => {\r\n            if (rteObj.element.classList.contains('e-rte-full-screen')) { this.fullPreview({ mode: true, type: '' }); }\r\n                this.mdsource.classList.remove('e-active');\r\n            if (!rteObj.element.classList.contains('e-rte-full-screen')) {\r\n                rteObj.showFullScreen();\r\n            }\r\n        });\r\n    }\r\n    public actionComplete(e: any): void {\r\n        if(e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {\r\n            this.fullPreview({ mode: true, type: '' })\r\n        }\r\n        else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {\r\n            if (e.targetItem === 'Minimize') {\r\n                this.textArea.style.display = 'block';\r\n                this.textArea.style.width = '100%';\r\n                if (this.htmlPreview) {\r\n                    this.htmlPreview.style.display = 'none';\r\n                }\r\n                this.mdSplit.classList.remove('e-active');\r\n                this.mdsource.classList.remove('e-active');\r\n            }\r\n            this.markDownConversion();\r\n        }\r\n        setTimeout(function () { this.rteObj.toolbarModule.refreshToolbarOverflow(); }, 400);\r\n    }\r\n    public handleFullScreen(e: any): void {\r\n        let leftBar: HTMLElement;\r\n        let transformElement: HTMLElement;\r\n        if (Browser.isDevice) {\r\n            leftBar = document.querySelector('#right-sidebar');\r\n            transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\r\n        } else {\r\n            leftBar = document.querySelector('#left-sidebar');\r\n            transformElement = document.querySelector('#right-pane');\r\n        }\r\n        if (e.targetItem === 'Maximize') {\r\n            addClass([leftBar], ['e-close']); removeClass([leftBar], ['e-open']);\r\n            if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; }\r\n            transformElement.style.transform = 'inherit';\r\n        } else if (e.targetItem === 'Minimize') {\r\n            removeClass([leftBar], ['e-close']);\r\n            if (!Browser.isDevice) { \r\n            addClass([leftBar], ['e-open']);\r\n            transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; }\r\n            transformElement.style.transform = 'translateX(0px)';\r\n        }\r\n    }\r\n    render() {\r\n        return (\r\n            <div id=\"dropdowndefault\" className='control-pane'>\r\n                <div className='control-section' id=\"rtePreview\">\r\n                    <div className=\"content-wrapper\">\r\n                            <RichTextEditorComponent  id=\"markdownPreview\"\r\n                                actionBegin={this.handleFullScreen.bind(this)}\r\n                                actionComplete={this.actionComplete.bind(this)}\r\n                                editorMode='Markdown' height= '300px'\r\n                                ref={(richtexteditor) => { this.rteObj = richtexteditor }}\r\n                                value={this.value} toolbarSettings={this.toolbarSettings} >\r\n                                <Inject services={[MarkdownEditor, Toolbar, Image, Link, QuickToolbar]} />\r\n                            </RichTextEditorComponent>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\nReactDOM.render(<Preview />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}