import * as React from 'react';

import { Editor as TinyMCEEditor } from '@tinymce/tinymce-react';

export class Editor extends React.Component<any, any> {
    public render(): JSX.Element {
        return (<TinyMCEEditor
            apiKey='0vr591qgixkzjtdl5xaiwvoichw7f4mylvyxils883wb0f15' cloudChannel='dev'
            initialValue=""
            init={{
                language:'ar',
                plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help',
                toolbar: 'formatselect | bold italic strikethrough forecolor backcolor permanentpen formatpainter | link image media pageembed | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent | removeformat | addcomment | ltr rtl',
                image_advtab: true,
                content_css: [
                  '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                  '//www.tiny.cloud/css/codepen.min.css'
                ],
                link_list: [
                  { title: 'My page 1', value: 'http://www.tinymce.com' },
                  { title: 'My page 2', value: 'http://www.moxiecode.com' }
                ],
                directionality : "ltr",
                image_list: [
                  { title: 'My page 1', value: 'http://www.tinymce.com' },
                  { title: 'My page 2', value: 'http://www.moxiecode.com' }
                ],
                image_class_list: [
                  { title: 'None', value: '' },
                  { title: 'Some class', value: 'class-name' }
                ],
                importcss_append: true,
                height: 400,
                templates: [
                  { title: 'Some title 1', description: 'Some desc 1', content: 'My content' },
                  { title: 'Some title 2', description: 'Some desc 2', content: '<div class="mceTmpl"><span class="cdate">cdate</span><span class="mdate">mdate</span>My content2</div>' }
                ],
                template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
                template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
                image_caption: true,
                content_style: '.mce-annotation { background: #fff0b7; } .tc-active-annotation {background: #ffe168; color: black; }'
               }}
            {...this.props}>
        </TinyMCEEditor>);
    }
}