This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtypes-plnkr.json
More file actions
1 lines (1 loc) · 27.8 KB
/
types-plnkr.json
File metadata and controls
1 lines (1 loc) · 27.8 KB
1
{"index.css":"#rteTypes .property-section {\r\n top: -20px;\r\n width: 200px;\r\n}\r\n\r\n#rteTypes img {\r\n width: 300px;\r\n}\r\n\r\n.sb-header {\r\n z-index: 100 !important;\r\n}\r\n\r\n#rteTypes .e-richtexteditor .e-rte-content .e-content {\r\n float: left;\r\n width: 100%;\r\n}\r\n\r\n#rteTypes .e-richtexteditor .e-rte-content {\r\n height: 100%;\r\n}\r\n\r\n#rteTypes {\r\n overflow: hidden;\r\n padding-right: 10px;\r\n}\r\n\r\n#rteTypes .property-panel-content {\r\n overflow: inherit;\r\n min-height: 0;\r\n}\r\n\r\n#rteTypes .content-wrapper {\r\n width: auto;\r\n margin: 0;\r\n}\r\n\r\n#rteTypes .property-panel-header {\r\n padding-top: 22px;\r\n padding-bottom: 20px;\r\n}\r\n\r\n#rteTypes .property-panel-content div {\r\n padding-left: 0;\r\n}","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\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 · Type · 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\">Type</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 the different behavior of toolbar support in the rich text editor. Change the toolbar type as multiRow or expand from the property panel to see its appearance . Check or uncheck the floating toolbar in property panel to look on its behavior.</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><code>Floating</code>: set boolean value to toolbarSettings.enableFloating property to enable or disable the floating toolbar.</p>\n <p> The rich text editor allows you to configure different types of toolbar using <code>toolbarSettings.type</code> property. The types of\n toolbar are: </p>\n <ul>\n <li><code>Expand</code>: The toolbar hides the overflowing items in the next row. Click the expand arrow to view overflowing toolbar items</li>\n <li><code>Multi Row</code>: The toolbar hides the overflowing items in the next row.</li>\n </ul>\n <p><b>Injecting Module</b></p>\n <p>RichTextEditor component features are segregated into individual feature-wise modules. To use richtexteditor feature, we need to inject <code>Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar</code> modules into the services.</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 toolbar types sample\r\n */\r\nimport * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, ToolbarType } from '@syncfusion/ej2-react-richtexteditor';\r\nimport { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { SampleBase } from './sample-base';\r\nimport { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { addClass, removeClass, Browser } from '@syncfusion/ej2-base';\r\nimport { PropertyPane } from './property-pane';\r\n\r\n\r\nexport class Type extends SampleBase<{}, {}> {\r\n\r\n private rteObj: RichTextEditorComponent;\r\n private listObj: DropDownListComponent;\r\n public checkboxObj: CheckBoxComponent;\r\n\r\n // set the value to RichTextEditor\r\n private value: string = `<p>The rich text editor is WYSIWYG (\"what you see is what you get\") editor useful to create and edit content, and return the valid HTML markup or markdown of the content</p>\r\n \r\n <p><b>Toolbar</b></p>\r\n \r\n <ol>\r\n <li>\r\n <p>Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations, HTML view, etc </p>\r\n </li>\r\n <li>\r\n <p>Toolbar is fully customizable </p>\r\n </li>\r\n </ol>\r\n \r\n <p><b>Links</b></p>\r\n <ol>\r\n <li>\r\n <p>You can insert a hyperlink with its corresponding dialog </p> \r\n </li>\r\n <li>\r\n <p>Attach a hyperlink to the displayed text. </p>\r\n </li>\r\n <li>\r\n <p>Customize the quick toolbar based on the hyperlink </p>\r\n </li>\r\n </ol>\r\n \r\n <p><b>Validation</b></p>\r\n <ul>\r\n <li>\r\n <p>The editor’s content can be validated on form submission by applying validation rules and validation message</p>\r\n </li>\r\n </ul>\r\n \r\n <p><b>Locale.</p></b></p>\r\n <ul>\r\n <li>\r\n <p>The editor provides an option to localize its static strings to adapt the editor to a local language.</p>\r\n </li>\r\n </ul>\r\n \r\n <p><b>Image.</p></b></p>\r\n <ol>\r\n <li>\r\n <p>Allows you to insert images from an online source as well as the local computer </p>\r\n </li>\r\n <li>\r\n <p>You can upload an image </p>\r\n </li>\r\n <li>\r\n <p>Provides an option to customize quick toolbar for an image </p>\r\n </li>\r\n </ol>\r\n <img alt=\"Logo\" src=\"http://ej2.syncfusion.com/react/demos/src/rich-text-editor/images/RTEImage-Feather.png\" />`;\r\n\r\n // RichTextEditor items list\r\n private items: string[] = ['Bold', 'Italic', 'Underline', 'StrikeThrough',\r\n 'FontName', 'FontSize', 'FontColor', 'BackgroundColor',\r\n 'LowerCase', 'UpperCase', '|',\r\n 'Formats', 'Alignments', 'OrderedList', 'UnorderedList',\r\n 'Outdent', 'Indent', '|',\r\n 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',\r\n 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'];\r\n\r\n //RichTextEditor ToolbarSettings\r\n private toolbarSettings: object = {\r\n type: ToolbarType.Expand,\r\n items: this.items,\r\n enableFloating: false\r\n };\r\n public onChange(args: ChangeEventArgs): void {\r\n switch (args.value as string) {\r\n case '1':\r\n (this.rteObj.toolbarSettings.type as string) = ToolbarType.Expand;\r\n break;\r\n case '2':\r\n (this.rteObj.toolbarSettings.type as string) = ToolbarType.MultiRow;\r\n break;\r\n }\r\n this.rteObj.dataBind();\r\n }\r\n onFloatChange(args: ChangeEventArgs): void {\r\n this.rteObj.toolbarSettings.enableFloating = (args as any).checked;\r\n this.rteObj.dataBind();\r\n }\r\n private ddlValue: { [key: string]: Object }[] = [\r\n { Id: '1', Text: 'Expand' },\r\n { Id: '2', Text: 'MultiRow' }\r\n ];\r\n\r\n // maps the appropriate column to fields property\r\n private fields: object = { text: 'Text', value: 'Id' };\r\n // set the value to select an item based on mapped value at initial rendering\r\n private ddlSelectedValue: string = '1';\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']);\r\n 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\r\n public actionCompleteHandler(): void {\r\n setTimeout(() => { (this.rteObj as any).defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\r\n }\r\n\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <div className='control-section' id='rteTypes'>\r\n <div className='col-lg-8' style={{ paddingBottom: '20px' }}>\r\n <RichTextEditorComponent id=\"defaultRTE\" ref={(scope) => { this.rteObj = scope; }}\r\n value={this.value} floatingToolbarOffset={50} toolbarSettings={this.toolbarSettings} \r\n actionBegin={this.handleFullScreen.bind(this)} actionComplete={this.actionCompleteHandler.bind(this)}>\r\n <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />\r\n </RichTextEditorComponent>\r\n </div>\r\n <div className='col-lg-4 property-section'>\r\n <PropertyPane title='Properties'>\r\n <table id=\"property\" title=\"Properties\" style={{ width: '100%', margin: '10px' }}>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div style={{ paddingLeft: '10px' , paddingBottom: '10px'}}>\r\n <DropDownListComponent id=\"types\" dataSource={this.ddlValue} ref={(dropdownlist) => { this.listObj = dropdownlist }}\r\n fields={this.fields} change={this.onChange.bind(this)} floatLabelType='Auto'\r\n placeholder=\"Types\" index={0} popupHeight='220px'/>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div style={{ paddingLeft: '10px' }}>\r\n <CheckBoxComponent checked={false} label='Enable Floating' ref={(scope) => { this.checkboxObj = scope; }} change={this.onFloatChange.bind(this)} ></CheckBoxComponent>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\nReactDOM.render(<Type />, 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}"}