diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 2ee3917ef7885cd48c5f63b7fc15749bec5abd16..55c91aef457ab7e5a823c6c374858170fa8ea1c4 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/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`
diff --git a/wax-prosemirror-services/src/TextStyleService/TextStyle.js b/wax-prosemirror-services/src/TextStyleService/TextStyle.js
index 09b03729f230cdc97dce7f7d2caacd81ee712165..0a7af60ef453ef272be64fe41d53184ccc3251cd 100644
--- a/wax-prosemirror-services/src/TextStyleService/TextStyle.js
+++ b/wax-prosemirror-services/src/TextStyleService/TextStyle.js
@@ -1,9 +1,17 @@
+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;
- }
}
diff --git a/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js b/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
index efec146dde9b0cebfe382704650ef526762ac7da..91a3c58bf189ebef049667075d926259c553d27a 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
@@ -1,6 +1,8 @@
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;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js b/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js
index e0b2190aa462d9271c67f657f4d2697b7fb7a47d..d9d35019ad83c726d610b45c19c7255c06a7b7fd 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/ImageToolGroupService/Images.js b/wax-prosemirror-services/src/WaxToolGroups/ImageToolGroupService/Images.js
index 2614e20a002804908ad6b902f87804b3cbb68fd4..7f6b397a683db2ad9e31d76bbf38e13e660561a1 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/ImageToolGroupService/Images.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/ListToolGroupService/Lists.js b/wax-prosemirror-services/src/WaxToolGroups/ListToolGroupService/Lists.js
index 0e8bbf77740e9a225e26ee9a79b99a246414a822..2d0a9674a84b3a57167300ed51517ccf5865c922 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/ListToolGroupService/Lists.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/TableToolGroupService/Tables.js b/wax-prosemirror-services/src/WaxToolGroups/TableToolGroupService/Tables.js
index eff5bb286104f40cb9da9a5388df32d48cce1d54..c6719878a408aa708d654adc17e65a9634e7d8cf 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/TableToolGroupService/Tables.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/lib/ToolGroup.js b/wax-prosemirror-services/src/lib/ToolGroup.js
index f1f988e0b1d228bcaf6561fc39e26f75d655c833..1340e666f8fbfa0e1ae2f9bc57302b2fde3060ea 100644
--- a/wax-prosemirror-services/src/lib/ToolGroup.js
+++ b/wax-prosemirror-services/src/lib/ToolGroup.js
@@ -1,8 +1,11 @@
+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>
+ );
}
}
diff --git a/wax-prosemirror-services/src/lib/Tools.js b/wax-prosemirror-services/src/lib/Tools.js
index a89cf6f46d245a42b72e45ff6dc85d5d3eb88315..3495a7a4ca258779f441d112f59bbf20054d61a6 100644
--- a/wax-prosemirror-services/src/lib/Tools.js
+++ b/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 = {};