Use custom toast ui editor with all built-in plugins & 3 custom plugi…

…ns: abc, alphatex, mathjax.

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "submodules/tui.editor"]
+	path = submodules/tui.editor
+	url = git@github.com:yshlin/tui.editor.git

admin/src/components/TOASTUI/index.js

@@ -1,10 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import '@coderline/alphatab/dist/font/Bravura.svg';
+import '@coderline/alphatab/dist/font/Bravura.eot';
+import '@coderline/alphatab/dist/font/Bravura.otf';
+import '@coderline/alphatab/dist/font/Bravura.ttf';
+import '@coderline/alphatab/dist/font/Bravura.woff';
+import '@coderline/alphatab/dist/font/Bravura.woff2';
+// import '@coderline/alphatab/dist/font/BravuraText.woff';
+// import '@coderline/alphatab/dist/font/BravuraText.svg';
+// import '@coderline/alphatab/dist/font/BravuraText.otf';
+// import '@coderline/alphatab/dist/font/BravuraText.eot';
+import '@coderline/alphatab/dist/soundfont/sonivox.sf2'
 import '@toast-ui/editor/dist/toastui-editor.css';
-import 'codemirror/lib/codemirror.css';
+import 'prismjs/themes/prism.css';
 import { Editor } from '@toast-ui/react-editor';
-import { Button } from '@buffetjs/core';
+import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
+import chart from '@toast-ui/editor-plugin-chart';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all';
+import Prism from 'prismjs';
+import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
+import uml from '@toast-ui/editor-plugin-uml';
+import abc from '@toast-ui/editor-plugin-abc';
+import alphaTex from '@toast-ui/editor-plugin-alphatex';
+import mathjax from '@toast-ui/editor-plugin-mathjax';
 
 import MediaLib from '../MediaLib';
 
@@ -13,7 +32,7 @@ class TOIEditor extends React.Component {
 
   constructor(props) {
     super(props);
-    this.height = "400px";
+    this.height = "500px";
     this.initialEditType = "markdown";
     this.previewStyle = "vertical";
     this.state = { isOpen : false };
@@ -22,41 +41,35 @@ class TOIEditor extends React.Component {
 
   componentDidMount() {
     const editor = this.editorRef.current.getInstance();
-    const toolbar = editor.getUI().getToolbar();
-
-    editor.eventManager.addEventType('insertMediaButton');
-    editor.eventManager.listen('insertMediaButton', () => {
-      this.handleToggle();
-    } );
-
-    toolbar.insertItem(0, {
-      type: 'button',
-      options: {
-        className: 'first tui-image',
-        event: 'insertMediaButton',
-        tooltip: 'Insert Media',
-        text: '@',
-      }
+    editor.addCommand(this.initialEditType, 'insertMediaButton', () => {this.handleToggle();})
+    editor.insertToolbarItem({
+      groupIndex: 3,
+      itemIndex: 1,
+    }, {
+      name: 'insert-media',
+      className: 'image toastui-editor-toolbar-icons',
+      command: 'insertMediaButton',
+      tooltip: 'Insert Media',
+      text: '@',
     });
   }
 
   componentDidUpdate() {
     // Bug fix, where switch button become submit type - editor bug
-    const elements = document.getElementsByClassName('te-switch-button');
-    if ( elements.length ) {
-      elements[0].setAttribute('type','button');
-      elements[1].setAttribute('type','button');
-    }
+    // const elements = document.getElementsByClassName('te-switch-button');
+    // if ( elements.length ) {
+    //   elements[0].setAttribute('type','button');
+    //   elements[1].setAttribute('type','button');
+    // }
   }
 
   handleChange = data => {
-    let value = this.props.value;
-    let editor_instance = this.editorRef.current.getInstance();
+    const editor_instance = this.editorRef.current.getInstance();
     if (data.mime.includes('image')) {
-      editor_instance.exec('AddImage', { 'altText': data.caption, 'imageUrl': data.url } );
+      editor_instance.exec('addImage', { 'altText': data.caption || '', 'imageUrl': data.url } );
     }
     else {
-      editor_instance.exec('AddLink', { 'linkText': data.name, 'url': data.url } );
+      editor_instance.exec('addLink', { 'linkText': data.name || '', 'linkUrl': data.url } );
     }
   };
 
@@ -71,7 +84,6 @@ class TOIEditor extends React.Component {
           initialEditType={this.initialEditType}
           initialValue={this.props.value}
           ref={this.editorRef}
-          usageStatistics={false}
           onChange={(event) => {
             this.props.onChange({
               target: {
@@ -81,28 +93,7 @@ class TOIEditor extends React.Component {
               },
             });
           }}
-          toolbarItems={[
-            'heading',
-            'bold',
-            'italic',
-            'strike',
-            'divider',
-            'hr',
-            'quote',
-            'divider',
-            'ul',
-            'ol',
-            'task',
-            'indent',
-            'outdent',
-            'divider',
-            'table',
-            'link',
-            'divider',
-            'code',
-            'codeblock',
-            'divider',
-          ]}
+          plugins={[[codeSyntaxHighlight, { highlighter: Prism }], colorSyntax, tableMergedCell, chart, uml, abc, alphaTex, mathjax]}
         />
 
         <MediaLib onToggle={this.handleToggle} isOpen={this.state.isOpen} onChange={this.handleChange}/>

admin/src/components/Wysiwyg/index.js

@@ -18,6 +18,7 @@ import Wrapper from './Wrapper';
 class Wysiwyg extends React.Component {
 
   render() {
+    this.props.value = this.props.value || ''
     const {
       autoFocus,
       className,
@@ -115,7 +116,7 @@ Wysiwyg.defaultProps = {
   style: {},
   tabIndex: '0',
   validations: {},
-  value: null,
+  value: '',
 };
 
 Wysiwyg.propTypes = {

package.json

@@ -8,7 +8,19 @@
     "description": "Wysiwyg editor using toastui library."
   },
   "dependencies": {
-    "@toast-ui/react-editor": "^2.1.2"
+    "@coderline/alphatab": "github:yshlin/alphaTab#v1.3.0.a",
+    "@toast-ui/editor": "file:submodules/tui.editor/apps/editor",
+    "@toast-ui/editor-plugin-abc": "file:submodules/tui.editor/plugins/abc",
+    "@toast-ui/editor-plugin-alphatex": "file:submodules/tui.editor/plugins/alphatex",
+    "@toast-ui/editor-plugin-chart": "file:submodules/tui.editor/plugins/chart",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "file:submodules/tui.editor/plugins/code-syntax-highlight",
+    "@toast-ui/editor-plugin-color-syntax": "file:submodules/tui.editor/plugins/color-syntax",
+    "@toast-ui/editor-plugin-mathjax": "file:submodules/tui.editor/plugins/mathjax",
+    "@toast-ui/editor-plugin-table-merged-cell": "file:submodules/tui.editor/plugins/table-merged-cell",
+    "@toast-ui/editor-plugin-uml": "file:submodules/tui.editor/plugins/uml",
+    "@toast-ui/react-editor": "file:submodules/tui.editor/apps/react-editor",
+    "@toast-ui/vue-editor": "file:submodules/tui.editor/apps/vue-editor",
+    "prismjs": "^1.25.0"
   },
   "author": {
     "name": "Rakesh Kumar Shardiwal",