import * as React from 'react' ; import BuildInPluginState , { BuildInPluginProps } from '../../BuildInPluginState' ; import Code from './Code' ; import DefaultFormatPane from './DefaultFormat' ; import EditorCode from './codes/EditorCode' ; import Plugins from './Plugins' ; const htmlStart = '<html>\n' + '<body>\n' + '<div id="contentDiv" style="width: 800px; height: 400px; border: solid 1px black; overflow: auto"></div>\n' ; const htmlButtons = '<button id=buttonB><b>B</b></button>\n' + '<button id=buttonI><i>I</i></button>\n' + '<button id=buttonU><u>U</u></button>\n' + '<button id=buttonBullet>Bullet</button>\n' + '<button id=buttonNumbering>Numbering</button>\n' + '<button id=buttonUndo>Undo</button>\n' + '<button id=buttonRedo>Redo</button>\n' ; const htmlEnd = '<script src="https://microsoft.github.io/roosterjs/dist/rooster.js"></script>\n' + '</body>\n' + '</html>' ; export default class OptionsPane extends React . Component < BuildInPluginProps , BuildInPluginState > { private exportForm = React . createRef < HTMLFormElement > ( ) ; private exportData = React . createRef < HTMLInputElement > ( ) ; private showRibbon = React . createRef < HTMLInputElement > ( ) ; constructor ( props ) { super ( props ) ; this . state = { ... props } ; } render ( ) { return ( < div > < div > < button onClick = { this . onExport } > Export to CodePen < /button> < /div> < details > < summary > < b > Plugins : < /b> < /summary> < Plugins state = { this . state } resetState = { this . resetState } / > < /details> < details > < summary > < b > Default Format : < /b> < /summary> < DefaultFormatPane state = { this . state . defaultFormat } resetState = { this . resetState } / > < /details> < input id = "showRibbon" type = "checkbox" checked = { this . state . showRibbon } onChange = { this . onToggleRibbon } ref = { this . showRibbon } / > < label htmlFor = "showRibbon" > Show format buttons < /label> < hr / > < details > < summary > < b > HTML Code : < /b> < /summary> < div > < code > < pre > { this . getHtml ( ) } < /pre> < /code> < /div> < /details> < details > < summary > < b > Typescript Code : < /b> < /summary> < Code state = { this . state } / > < /details> < form ref = { this . exportForm } method = "POST" action = "https://codepen.io/pen/define" target = "_blank" > < input name = "data" type = "hidden" ref = { this . exportData } / > < /form> < /div>); } getState ( ) { return { ... this . state } ; } private resetState = ( callback , resetEditor ) => { let state = { linkTitle : this . state . linkTitle , watermarkText : this . state . watermarkText , showRibbon : this . state . showRibbon , pluginList : { ... this . state . pluginList } , contentEditFeatures : { ... this . state . contentEditFeatures } , defaultFormat : { ... this . state . defaultFormat } , } ; if ( callback ) { callback ( state ) ; this . setState ( state ) ; } if ( resetEditor ) { } } ; private onExport = ( ) => { let editor = new EditorCode ( this . state ) ; let code = editor . getCode ( ) ; let json = { title : 'RoosterJs' , html : this . getHtml ( ) , head : '' , js : code , js_pre_processor : 'typescript' , } ; this . exportData . current . value = JSON . stringify ( json ) ; this . exportForm . current . submit ( ) ; } ; private onToggleRibbon = ( ) => { let showRibbon = this . showRibbon . current . checked ; this . setState ( { showRibbon , } ) ; } ; private getHtml ( ) { return `${ htmlStart }${ this . state . showRibbon ? htmlButtons : '' }${ htmlEnd }` ; } }