refactor: split dist for extensions (fix #1021, #1047)

* refactor: split distribution for chart extension (fix #1021) * refactor: split distibution for uml extension (fix #1021) * refactor: split distribution for colorSyntax extension (fix#1021) * refactor: split dist for scrollFollow extension (fix #1021) * refactor: split dist for taskCounter extension (fix #1021) * refactor: split dist for mark extension (fix #1021) * refactor: split dist for table extension (fix #1021) * refactor: change ext file path (fix #1021) * refactor: global root to es6 import (fix #1021) * refactor: change ext function name * chore: extension namespace webpack config (#1021) * refactor: static markdownit instance (fix #1021) remove language option from chart, uml extensions * chore: change namespace webpack config (fix #1021) * chore: add script extension bundled build (fix #1021) * fix: plantuml server encodng changed (fix: #1021) * fix: apply code review (fix #1047)
nhn · Dec 13, 2017 · 4e2cc53 · 4e2cc53
1 parent b9a7788
commit 4e2cc53
Show file tree

Hide file tree

Showing 84 changed files with 957 additions and 755 deletions.
diff --git a/bower.json b/bower.json
@@ -35,7 +35,7 @@
     "toMark": "https://github.com/nhnent/toMark.git#0.0.18",
     "tui-component-colorpicker": "~1.0.2",
     "squire-rte": "https://github.com/neilj/Squire.git#306230d0df9b38047cd06204476ddc0582569cfd",
-    "plantuml-encoder": "^1.2.4",
+    "plantuml-encoder": "https://github.com/aleung/plantuml-encoder.git#156729063bfa62da6fa5f577627ebab57ae98c95",
     "tui-chart": "^2.9.4"
   },
   "resolutions": {

diff --git a/demo/demo-chart-viewOnly.html b/demo/demo-chart-viewOnly.html
@@ -0,0 +1,64 @@
+<!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-ViewOnly.js"></script>
+<script src="../dist/tui-editor-extChart.js"></script>
+<script>
+    var content = [
+        '```chart',
+        ',category1,category2',
+        'Jan,21,23',
+        'Feb,31,17',
+        '',
+        'type: column',
+        'width: 700',
+        'height: 300',
+        'title: Monthly Revenue',
+        'x.title: Amount',
+        'y.title: Month',
+        'y.min: 1',
+        'y.max: 40',
+        'y.suffix: $'
+    ].join('\n');
+    $('#editSection').tuiEditorViewOnly({
+        previewStyle: 'vertical',
+        height: '100%',
+        initialValue: content,
+        exts: ['chart']
+    });
+</script>
+</body>
+</html>
diff --git a/demo/demo-chart.html b/demo/demo-chart.html
@@ -34,14 +34,32 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extChart.js"></script>
 <script>
+    var content = [
+        '```chart',
+        ',category1,category2',
+        'Jan,21,23',
+        'Feb,31,17',
+        '',
+        'type: column',
+        'width: 700',
+        'height: 300',
+        'title: Monthly Revenue',
+        'x.title: Amount',
+        'y.title: Month',
+        'y.min: 1',
+        'y.max: 40',
+        'y.suffix: $'
+    ].join('\n');
     $('#editSection').tuiEditor({
         previewStyle: 'vertical',
         height: '100%',
-        initialEditType: 'wysiwyg',
+        initialEditType: 'markdown',
         useCommandShortcut: true,
-        exts: ['scrollFollow', 'colorSyntax', 'chart']
+        initialValue: content,
+        exts: ['chart']
     });
 </script>
 </body>

diff --git a/demo/demo-dev.html b/demo/demo-dev.html
@@ -31,14 +31,16 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extScrollFollow.js"></script>
+<script src="../dist/tui-editor-extColorSyntax.js"></script>
 <script>
     $('#editSection').tuiEditor({
         previewStyle: 'vertical',
         height: '100%',
         initialEditType: 'wysiwyg',
         useCommandShortcut: true,
-        exts: ['scrollFollow', 'colorSyntax', 'plantUML']
+        exts: ['scrollFollow', 'colorSyntax', 'uml']
     });
 </script>
 </body>

diff --git a/demo/demo-marker.html b/demo/demo-marker.html
@@ -31,7 +31,8 @@
 <body>
 <button id="addMarker">ADD MARKER</button>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extMark.js"></script>
 <script>
     if (!window.console || !console.log) {
         window.console = {};

diff --git a/demo/demo-scrollfollow.html b/demo/demo-scrollfollow.html
@@ -30,7 +30,8 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extScrollFollow.js"></script>
 <script>
     $('#editSection').tuiEditor({
         previewStyle: 'vertical',

diff --git a/demo/demo-tableExtension-viewOnly.html → demo/demo-table-viewOnly.html b/demo/demo-tableExtension-viewOnly.html → demo/demo-table-viewOnly.html
@@ -24,7 +24,8 @@
 </head>
 <body style='padding:0;margin:0'>
 <div id="editSection"></div>
-<script src="../dist/tui-editor-viewonly.js"></script>
+<script src="../dist/tui-editor-ViewOnly.js"></script>
+<script src="../dist/tui-editor-extTable.js"></script>
 <script>
     var content = '# Heading 1' + '\n'
         + '## Heading 2' + '\n'
@@ -53,7 +54,7 @@
     $('#editSection').tuiEditorViewOnly({
         viewOnly: true,
         initialValue: content,
-        exts: ['tableExtension']
+        exts: ['table']
     });
 </script>
 </body>

diff --git a/demo/demo-tableExtension.html → demo/demo-table.html b/demo/demo-tableExtension.html → demo/demo-table.html
@@ -30,7 +30,8 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extTable.js"></script>
 <script>
     var content = '# Heading 1' + '\n'
         + '## Heading 2' + '\n'
@@ -60,7 +61,7 @@
         viewOnly: false,
         height: '400px',
         initialValue: content,
-        exts: ['tableExtension']
+        exts: ['table']
     });
 </script>
 </body>

diff --git a/demo/demo-textpalette.html b/demo/demo-textpalette.html
@@ -30,7 +30,7 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
 <script src="./textPalette.js"></script>
 <script>
     if (!window.console || !console.log) {

diff --git a/demo/demo-plantuml-viewOnly.html → demo/demo-uml-viewOnly.html b/demo/demo-plantuml-viewOnly.html → demo/demo-uml-viewOnly.html
@@ -30,7 +30,8 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor-viewonly.js"></script>
+<script src="../dist/tui-editor-ViewOnly.js"></script>
+<script src="../dist/tui-editor-extUML.js"></script>
 <script>
     var content = [
         'uml start',
@@ -60,8 +61,7 @@
     $('#editSection').tuiEditorViewOnly({
         initialValue: content,
         exts: ['scrollFollow', {
-            name: 'plantUML', // enable plant uml plugin
-            languages: ['uml', 'plantuml'], // which languages you want to be rendered as plant uml. default is 'uml' and 'plantuml'
+            name: 'uml', // enable plant uml plugin
             rendererURL: 'http://www.plantuml.com/plantuml/png/'
         }]
     });

diff --git a/demo/demo-plantuml.html → demo/demo-uml.html b/demo/demo-plantuml.html → demo/demo-uml.html
@@ -31,7 +31,8 @@
 </head>
 <body>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extUML.js"></script>
 <script>
     var content = [
         'uml start',
@@ -65,8 +66,7 @@
         useCommandShortcut: true,
         initialValue: content,
         exts: [{
-            name: 'plantUML', // enable plant uml plugin
-            languages: ['uml', 'plantuml'], // which languages you want to be rendered as plant uml. default is 'uml' and 'plantuml'
+            name: 'uml', // enable plant uml plugin
             rendererURL: 'http://www.plantuml.com/plantuml/png/'
         }],
         codeBlockLanguages: ['javascript', 'java', 'uml', 'plantuml']

diff --git a/demo/demo-viewOnlyMarker.html b/demo/demo-viewOnlyMarker.html
@@ -31,7 +31,8 @@
 <body style='padding:0;margin:0'>
 <button id="addMarker">ADD MARKER</button>
 <div id="editSection"></div>
-<script src="../dist/tui-editor.js"></script>
+<script src="../dist/tui-editor-Editor.js"></script>
+<script src="../dist/tui-editor-extMark.js"></script>
 <script>
     if (!window.console || !console.log) {
         window.console = {};
@@ -40,7 +41,7 @@
     $('#editSection').tuiEditor({
         viewOnly: true,
         initialValue: '# Hello\n## this is world\n\nfirst view mode',
-        exts: ['mark', 'colorSyntax'],
+        exts: ['mark'],
         events: {
             load: function(editor) {
                 editor.setValueWithMarkers('### ab[cdee(wf\n* a**bd)**efg\n\n123]4\nmse\n1\n3\n4\n5\nmse\n1\n3\n4\n5mse\n1\n3\n4\n5\nmse\n1\n3\n4\n5\n* [ ] test\n    * [ ] test\n    * [ ] test\n    * [ ] test\n    * [ ] test\n* [x] test2', [

diff --git a/demo/demo.html b/demo/demo.html
@@ -11,7 +11,9 @@
     <script src="../lib/highlightjs/highlight.pack.js"></script>
     <script src="../lib/squire-rte/build/squire-raw.js"></script>
     <script src="../lib/tui-component-colorpicker/dist/colorpicker.js"></script>
-    <script src="../dist/tui-editor.js"></script>
+    <script src="../dist/tui-editor-Editor.js"></script>
+    <script src="../dist/tui-editor-extTable.js"></script>
+    <script src="../dist/tui-editor-extColorSyntax.js"></script>
     <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
     <link rel="stylesheet" href="../lib/tui-component-colorpicker/dist/colorpicker.css">
@@ -38,7 +40,7 @@
         initialEditType: 'markdown',
         previewStyle: 'vertical',
         height: '300px',
-        exts: ['colorSyntax', 'tableExtension'],
+        exts: ['colorSyntax', 'table'],
         contentCSSStyles: [
             '../dist/tui-editor-contents.css'
         ],

diff --git a/demo/textPalette.js b/demo/textPalette.js
@@ -1,6 +1,6 @@
 'use strict';
 
-tui.Editor.defineExtension('textPalette', function(editor) {
+tui.editor.Editor.defineExtension('textPalette', function(editor) {
     var $layer = $('<div style="z-index:9999;border:1px solid #f00;width:200px"></div>');
     var isTextPaleltteActive = false;
     var to;

diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "test:sl": "cross-env SERVER=saucelabs karma start",
     "test:lh": "cross-env SERVER=localhost karma start",
     "serve": "webpack-dev-server --progress --inline",
-    "build": "cross-env webpack && webpack -p",
+    "build": "cross-env webpack & webpack -p & BUILD_ALL=true webpack & BUILD_ALL=true webpack -p",
     "note": "tuie --tag=$(git describe --tags)"
   }
 }
diff --git a/src/js/codeBlockManager.js b/src/js/codeBlockManager.js
@@ -9,13 +9,11 @@ const {hljs} = window;
  * Class Code Block Manager
  */
 class CodeBlockManager {
-
     /**
      * Creates an instance of CodeBlockManager.
      * @memberof CodeBlockManager
      */
     constructor() {
-        this._supportedLanguages = hljs.listLanguages();
         this._replacers = {};
     }
 
@@ -26,9 +24,6 @@ class CodeBlockManager {
      */
     setReplacer(language, replacer) {
         this._replacers[language] = replacer;
-        if (this._supportedLanguages.indexOf(language) < 0) {
-            this._supportedLanguages.push(language);
-        }
     }
 
     /**
@@ -41,33 +36,6 @@ class CodeBlockManager {
         return this._replacers[language];
     }
 
-    /**
-     * sets supported languages options
-     * default value is what highlight js supports
-     * @param {string[]} supportedLanguages - user set supported languages via options
-     * @memberof CodeBlockManager
-     */
-    setSupportedLanguages(supportedLanguages) {
-        this._supportedLanguages = supportedLanguages;
-    }
-
-    /**
-     * gets supported languages
-     * default value is what highlight js supports
-     * supported languages by replacers will be added
-     * @returns {string[]} - list of supportedLanguages
-     * @memberof CodeBlockManager
-     */
-    getSupportedLanguages() {
-        return this._supportedLanguages;
-    }
-
-    /**
-     * get supported languages by highlight-js
-     * @returns {Array<string>} - supported languages by highlight-js
-     * @memberof CodeBlockManager
-     */
-
     /**
      * Create code block html.
      * @param {string} language - code block language
@@ -112,4 +80,7 @@ function escape(html, encode) {
         .replace(/'/g, '&#39;');
 }
 
-export default CodeBlockManager;
+export {
+    CodeBlockManager
+};
+export default new CodeBlockManager();