Feature/chart extension (#1016)

* feat: chart extension * feat: multiple chart instance * refactor: csv, dsv parser to papa * refactor: apply review (ref #1010) * fix: remove papa global dependency (fix #1011) * refactor: change default chart to column * feat: support whitespace separated values for chart data (ref #1009) * refactor: apply code review (ref #1013)
nhn · Jan 6, 2020 · b6ea7c5 · b6ea7c5
1 parent 1403676
commit b6ea7c5
Show file tree

Hide file tree

Showing 9 changed files with 1,351 additions and 4 deletions.
diff --git a/apps/editor/bower.json b/apps/editor/bower.json
@@ -35,10 +35,11 @@
     "toMark": "https://github.com/nhnent/toMark.git#0.0.18",
     "tui-component-colorpicker": "~1.0.2",
     "squire-rte": "kyuwoo-choi/Squire#tui-editor-release",
-    "plantuml-encoder": "^1.2.4"
+    "plantuml-encoder": "^1.2.4",
+    "tui-chart": "^2.9.4"
   },
   "resolutions": {
     "jquery": "~2.1.4",
-    "tui-code-snippet": "1.2.1"
+    "tui-code-snippet": "1.2.5"
   }
 }
diff --git a/apps/editor/demo/demo-chart.html b/apps/editor/demo/demo-chart.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>DEMO</title>
+    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
+    <script src="../lib/toMark/dist/toMark.js"></script>
+    <script src="../lib/jquery/dist/jquery.js"></script>
+    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
+    <script src="../lib/tui-component-colorpicker/dist/colorpicker.js"></script>
+    <script src="../lib/codemirror/lib/codemirror.js"></script>
+    <script src="../lib/highlightjs/highlight.pack.js"></script>
+    <script src="../lib/squire-rte/build/squire-raw.js"></script>
+    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
+    <script src="../lib/raphael/raphael.min.js"></script>
+    <script src="../lib/tui-chart/dist/chart.js"></script>
+    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
+    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
+    <link rel="stylesheet" href="../dist/tui-editor.css">
+    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
+    <link rel="stylesheet" href="../lib/tui-component-colorpicker/dist/colorpicker.css">
+    <link rel="stylesheet" href="../lib/tui-chart/dist/chart.css">
+    <style type="text/css">
+        html, body {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+        }
+        #editSection {
+            padding: 15px;
+            padding-top: 35px;
+        }
+    </style>
+</head>
+<body>
+<div id="editSection"></div>
+<script src="../dist/tui-editor.js"></script>
+<script>
+    $('#editSection').tuiEditor({
+        previewStyle: 'vertical',
+        height: '100%',
+        initialEditType: 'wysiwyg',
+        useCommandShortcut: true,
+        exts: ['scrollFollow', 'colorSyntax', 'chart']
+    });
+</script>
+</body>
+</html>
diff --git a/apps/editor/src/js/codeBlockEditor.js b/apps/editor/src/js/codeBlockEditor.js
@@ -13,19 +13,28 @@ class CodeBlockEditor extends CodeMirrorExt {
      * @param {EventManager} eventManager - event manager
      * @memberof CodeBlockEditor
      */
-    constructor(el) {
+    constructor(el, eventManager) {
         super(el, {
             singleCursorHeightPerLine: false,
             theme: 'none'
         });
 
         this._language = '';
+        this._eventManager = eventManager;
 
         this._initEvent();
     }
 
     _initEvent() {
         this.on('cursorActivity', this._onRequireScrollIntoView.bind(this));
+        this.on('beforeChange', (cm, ev) => {
+            if (ev.origin === 'paste') {
+                this._eventManager.emit('pasteBefore', {
+                    source: 'codeblock',
+                    data: ev
+                });
+            }
+        });
     }
 
     _onRequireScrollIntoView() {

diff --git a/apps/editor/src/js/codeBlockManager.js b/apps/editor/src/js/codeBlockManager.js
@@ -79,7 +79,7 @@ class CodeBlockManager {
         let html;
 
         if (replacer) {
-            html = replacer(codeText);
+            html = replacer(codeText, language);
         } else {
             html = hljs.getLanguage(language) ? hljs.highlight(language, codeText).value : escape(codeText, false);
         }