feat(toolgroup): create toolgroup table name, more feature

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -52,6 +52,11 @@ const MainMenuInner = styled.div`
   top: 0;
   background: transparent;
   z-index: 9999;
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 `;
 
 const SideMenuContainer = styled.div`

wax-prosemirror-services/src/TextStyleService/TextStyle.js

+import React from "react";
 import { injectable, inject } from "inversify";
 import ToolGroup from "../lib/ToolGroup";
-
 @injectable()
 export default class Annotation extends ToolGroup {
   tools = [];
+  title = () => {
+    return (
+      <span>
+        Annotations
+        <hr />
+      </span>
+    );
+  };
   constructor(
     @inject("Author") author,
     @inject("EpigraphPoetry") epigraphPoetry,
@@ -28,12 +36,4 @@ export default class Annotation extends ToolGroup {
       title
     ];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }

wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js

 import { injectable, inject } from "inversify";
 import ToolGroup from "../../lib/ToolGroup";
-
+import React, { useState } from "react";
+import { isFunction } from "lodash";
+import { NONAME } from "dns";
 @injectable()
 class Annotations extends ToolGroup {
   tools = [];
@@ -17,6 +19,11 @@ class Annotations extends ToolGroup {
     @inject("Blockquote") blockquote
   ) {
     super();
+    code.hideOnToolbar = true;
+    strong.hideOnToolbar = true;
+    blockquote.hideOnToolbar = true;
+    subscript.hideOnToolbar = true;
+    superscript.hideOnToolbar = true;
     this.tools = [
       code,
       emphasis,
@@ -30,14 +37,6 @@ class Annotations extends ToolGroup {
       blockquote
     ];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }
 
 export default Annotations;

wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js

@@ -8,14 +8,6 @@ class Base extends ToolGroup {
     super();
     this.tools = [undo, redo];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }
 
 export default Base;

wax-prosemirror-services/src/WaxToolGroups/ImageToolGroupService/Images.js

@@ -8,14 +8,6 @@ class Images extends ToolGroup {
     super();
     this.tools = [image];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }
 
 export default Images;

wax-prosemirror-services/src/WaxToolGroups/ListToolGroupService/Lists.js

@@ -13,14 +13,6 @@ class Lists extends ToolGroup {
     super();
     this.tools = [orderedlist, bulletlist, joinup, lift];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }
 
 export default Lists;

wax-prosemirror-services/src/WaxToolGroups/TableToolGroupService/Tables.js

@@ -11,14 +11,6 @@ class Tables extends ToolGroup {
     super();
     this.tools = [table, tableDropDownOptions];
   }
-
-  renderTools(view) {
-    const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
-    });
-    return tools;
-  }
 }
 
 export default Tables;

wax-prosemirror-services/src/lib/ToolGroup.js

+import React, { useState } from "react";
 import { injectable } from "inversify";
-
+import { isFunction } from "lodash";
 @injectable()
 export default class ToolGroup {
   _config = {};
+  title = "";
+  _tools = [];
   constructor() {}
   setGroupConfig(config) {
     this._config = config;
@@ -12,7 +15,7 @@ export default class ToolGroup {
     const { exclude = [], include = [] } = this._config;
 
     if (include.length > 0) {
-      this.tools.map(tool => {
+      this._tools.map(tool => {
         if (include.includes(tool.constructor.name)) {
           tool.enableTool();
         } else {
@@ -20,7 +23,7 @@ export default class ToolGroup {
         }
       });
     } else {
-      this.tools.map(tool => {
+      this._tools.map(tool => {
         if (exclude.includes(tool.constructor.name)) {
           tool.disableTool();
         }
@@ -28,11 +31,53 @@ export default class ToolGroup {
     }
   }
 
+  set tools(tools) {
+    this._tools = tools;
+    for (var i in this._tools) {
+      if (this._tools[i].hideOnToolbar) {
+        this._tools.push(this._tools.splice(i, 1)[0]);
+      }
+    }
+  }
+
   renderTools(view) {
+    const [more, showHide] = useState(false);
     const tools = [];
-    this.tools.forEach(tool => {
-      tools.push(tool.renderTool(view));
+    const rest = [];
+    this._tools.forEach(tool => {
+      if (tool.hideOnToolbar) {
+        rest.push(tool.renderTool(view));
+      } else {
+        tools.push(tool.renderTool(view));
+      }
     });
-    return tools;
+
+    const Title = isFunction(this.title) ? this.title : () => this.title;
+
+    return (
+      <div key={`groupName-${this.constructor.name}`}>
+        <Title />
+        {tools}
+        {rest.length && !more ? (
+          <button onClick={() => showHide(!more)}>...</button>
+        ) : null}
+        {more && (
+          <div>
+            <button onClick={() => showHide(!more)}>...</button>
+            <div
+              style={{
+                display: "flex",
+                width: "0",
+                top: "40px",
+                position: "relative",
+                right: "100%"
+              }}
+            >
+              {rest}
+            </div>
+          </div>
+        )}
+      </div>
+    );
   }
 }

wax-prosemirror-services/src/lib/Tools.js

@@ -8,6 +8,7 @@ export default class Tools {
   title = "title";
   content = "content";
   _isEnabled = true;
+  hideOnToolbar = false;
   config = {};
   pmplugins = {};