fix: display option, tree shaking

README.md

@@ -91,7 +91,7 @@ suneditor.create('sample', {
 });
 ```
 
-### 2. Load plugins
+### 2. Load only what you want
 ```javascript
 import 'suneditor/dist/css/suneditor.min.css'
 import suneditor from 'suneditor'
@@ -131,7 +131,7 @@ import suneditor from 'suneditor'
 import plugins from 'suneditor/src/plugins'
 
 suneditor.create('sample', {
-    modules: plugins,
+    plugins: plugins,
     buttonList: [
         ['undo', 'redo'],
         ['font', 'fontSize', 'formatBlock'],
@@ -146,6 +146,20 @@ suneditor.create('sample', {
         ['preview', 'print']
     ]
 })
+
+// You can also load what you want
+suneditor.create('sample', {
+    plugins: [
+        plugins.font
+        plugins.fontSize,
+        plugins.formatBlock
+    ],
+    buttonList: [
+        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+        ['font', 'fontSize', 'formatBlock'],
+        ['removeFormat']
+    ]
+})
 ```
 
 ### 4. Plugins can be used directly in the button list

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

sample/html/getting-started.html

@@ -97,7 +97,7 @@ <h4>1. Default options</h4>
     <span class="pl-c"><span class="pl-c">//</span> insert options</span>
 });</pre></div>
 
-    <h4>2. Load plugins</h4>
+    <h4>2. Load only what you want</h4>
 <div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>suneditor/dist/css/suneditor.min.css<span class="pl-pds">'</span></span>
 <span class="pl-k">import</span> <span class="pl-smi">suneditor</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>suneditor<span class="pl-pds">'</span></span>
 <span class="pl-k">import</span> {<span class="pl-smi">en</span>, <span class="pl-smi">ko</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>suneditor/src/lang<span class="pl-pds">'</span></span>
@@ -134,7 +134,7 @@ <h4>3. Load all plugins</h4>
 <span class="pl-k">import</span> <span class="pl-smi">plugins</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>suneditor/src/plugins<span class="pl-pds">'</span></span>
 
 <span class="pl-smi">suneditor</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>sample<span class="pl-pds">'</span></span>, {
-    modules<span class="pl-k">:</span> plugins,
+    plugins<span class="pl-k">:</span> plugins,
     buttonList<span class="pl-k">:</span> [
         [<span class="pl-s"><span class="pl-pds">'</span>undo<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>redo<span class="pl-pds">'</span></span>],
         [<span class="pl-s"><span class="pl-pds">'</span>font<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>fontSize<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>formatBlock<span class="pl-pds">'</span></span>],
@@ -148,6 +148,20 @@ <h4>3. Load all plugins</h4>
         [<span class="pl-s"><span class="pl-pds">'</span>fullScreen<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>showBlocks<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>codeView<span class="pl-pds">'</span></span>],
         [<span class="pl-s"><span class="pl-pds">'</span>preview<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>print<span class="pl-pds">'</span></span>]
     ]
+})
+
+<span class="pl-c"><span class="pl-c">//</span> You can also load what you want</span>
+<span class="pl-smi">suneditor</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>sample<span class="pl-pds">'</span></span>, {
+    plugins<span class="pl-k">:</span> [
+        <span class="pl-smi">plugins</span>.<span class="pl-smi">font</span>
+        <span class="pl-smi">plugins</span>.<span class="pl-c1">fontSize</span>,
+        <span class="pl-smi">plugins</span>.<span class="pl-smi">formatBlock</span>
+    ],
+    buttonList<span class="pl-k">:</span> [
+        [<span class="pl-s"><span class="pl-pds">'</span>bold<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>underline<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>italic<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>strike<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>subscript<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>superscript<span class="pl-pds">'</span></span>],
+        [<span class="pl-s"><span class="pl-pds">'</span>font<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>fontSize<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>formatBlock<span class="pl-pds">'</span></span>],
+        [<span class="pl-s"><span class="pl-pds">'</span>removeFormat<span class="pl-pds">'</span></span>]
+    ]
 })</pre></div>
 
     <h4>4. Plugins can be used directly in the button list</h4>

src/lib/context.js

@@ -45,7 +45,8 @@ const _Context = function (element, cons, options) {
             font: options.font,
             fontSize: options.fontSize,
             height: options.height.match(/\d+/)[0],
-            showPathLabel: options.showPathLabel
+            showPathLabel: options.showPathLabel,
+            display: options.display
         },
         dialog: {},
         submenu: {}

src/lib/core.js

@@ -4,12 +4,11 @@
  * @description SunEditor core closure
  * @param context
  * @param util
- * @param modules
  * @param plugins
  * @param lang
  * @returns {{save: save, getContext: getContext, getContent: getContent, setContent: setContent, appendContent: appendContent, disabled: disabled, enabled: enabled, show: show, hide: hide, destroy: destroy}}
  */
-const core = function (context, util, modules, plugins, lang) {
+const core = function (context, util, plugins, lang) {
     /**
      * @description Practical editor function
      * This function is 'this' used by other plugins
@@ -20,11 +19,6 @@ const core = function (context, util, modules, plugins, lang) {
          */
         context: context,
 
-        /**
-         * @description loaded modules
-         */
-        modules: {},
-
         /**
          * @description loaded plugins
          */
@@ -1555,8 +1549,7 @@ const core = function (context, util, modules, plugins, lang) {
          */
         show: function () {
             const topAreaStyle = context.element.topArea.style;
-            topAreaStyle.cssText = editor._variable.originCssText;
-            if (topAreaStyle.display === 'none') topAreaStyle.display = 'block';
+            if (topAreaStyle.display === 'none') topAreaStyle.display = context.user.display;
         },
 
         /**

src/suneditor.js

@@ -75,6 +75,6 @@ export default {
             element.parentNode.appendChild(cons.constructed._top);
         }
 
-        return this.core(this._Context(element, cons.constructed, cons.options), this.util, options.modules, cons.plugins, cons.options.lang);
+        return this.core(this._Context(element, cons.constructed, cons.options), this.util, cons.plugins, cons.options.lang);
     }
 };