From 94681f7b513558264b0a85e838466694ebbfa964 Mon Sep 17 00:00:00 2001 From: Eddie Lin Date: Tue, 19 Oct 2021 12:04:17 +0800 Subject: [PATCH] Use custom toast ui editor with all built-in plugins & 3 custom plugins: abc, alphatex, mathjax. --- .gitmodules | 3 + admin/src/components/TOASTUI/index.js | 91 ++++++++++++--------------- admin/src/components/Wysiwyg/index.js | 3 +- package.json | 14 ++++- submodules/tui.editor | 1 + 5 files changed, 60 insertions(+), 52 deletions(-) create mode 100644 .gitmodules create mode 160000 submodules/tui.editor diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..2923130 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "submodules/tui.editor"] + path = submodules/tui.editor + url = git@github.com:yshlin/tui.editor.git diff --git a/admin/src/components/TOASTUI/index.js b/admin/src/components/TOASTUI/index.js index ca6d9ed..4ae486d 100644 --- a/admin/src/components/TOASTUI/index.js +++ b/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]} /> diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js index 80bd7e7..01703fd 100644 --- a/admin/src/components/Wysiwyg/index.js +++ b/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 = { diff --git a/package.json b/package.json index 2d62ff6..dff1cab 100644 --- a/package.json +++ b/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", diff --git a/submodules/tui.editor b/submodules/tui.editor new file mode 160000 index 0000000..9d69bfc --- /dev/null +++ b/submodules/tui.editor @@ -0,0 +1 @@ +Subproject commit 9d69bfc613ccdfd8b44da538c0f77806c6f5ca68