From 7d91cc1e56163f7a35c5c69e4e2e352d181849e2 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 4 Feb 2021 14:18:01 +0100
Subject: [PATCH] rte: add bubble/overlay commands

---
 zero.Web.UI/App/components/forms/rte.vue | 71 +++++++++++++-----------
 zero.Web.UI/App/config/rte.config.js     | 12 ++--
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue
index 2cd5815c..cc4ce2ab 100644
--- a/zero.Web.UI/App/components/forms/rte.vue
+++ b/zero.Web.UI/App/components/forms/rte.vue
@@ -1,36 +1,37 @@
 <template>
-  <div class="ui-rte" :disabled="disabled">
-    <div :id="id">
-      <!--<editor-menu-bubble :editor="editor" :keep-in-bounds="true" v-slot="{ commands, isActive, menu }">
-        <div class="ui-rte-overlay-controls theme-dark" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
-          <button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.bold() }" @click="commands.bold"><ui-icon symbol="fth-bold" /></button>
-          <button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.italic() }" @click="commands.italic"><ui-icon symbol="fth-italic" /></button>
-          <button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.underline() }" @click="commands.underline"><ui-icon symbol="fth-underline" /></button>
-          <button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.link() }" @click="commands.link"><ui-icon symbol="fth-link" /></button>
-          <button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.code() }" @click="commands.code"><ui-icon symbol="fth-code" /></button>
+  <div class="ui-rte" :id="id" :disabled="disabled">
+
+    <editor-menu-bubble v-if="hasBubble" :editor="editor" :keep-in-bounds="true" v-slot="{ commands, isActive, menu }">
+      <div class="ui-rte-overlay-controls theme-dark" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
+        <div class="ui-rte-overlay-control-outer" v-for="cmd in cmds" v-if="cmd.bubble && !cmd.isParent" :key="cmd.id">
+          <button type="button" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-overlay-control" :class="{ 'is-active': cmd.isActive(isActive) }"  @click="cmd.onClick($event, commands)">
+            <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
+          </button>
         </div>
-      </editor-menu-bubble>-->
-      <editor-menu-bar v-if="cmds.length > 0 && editor" :editor="editor" v-slot="{ commands, isActive }">
-        <div class="ui-rte-controls">
-          <div class="ui-rte-control-outer" v-for="cmd in cmds" :key="cmd.id">
-            <button type="button" v-if="!cmd.isParent" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }"
-                    @click="cmd.onClick($event, commands)">
-              <!--// TODO :disabled="cmd.disabled(commands)" | this triggers a recursive loop error when used in multiple properties per editor-->
-              <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
-            </button>
-            <ui-dropdown v-if="cmd.isParent" align="right">
-              <template v-slot:button>
-                <button :data-alias="cmd.alias" type="button" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }">
-                  <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
-                </button>
-              </template>
-              <ui-dropdown-button v-for="child in cmd.children" :label="child.title" @click="child.onClick($event, commands)" />
-            </ui-dropdown>
-          </div>
+      </div>
+    </editor-menu-bubble>
+
+    <editor-menu-bar v-if="cmds.length > 0 && editor" :editor="editor" v-slot="{ commands, isActive }">
+      <div class="ui-rte-controls">
+        <div class="ui-rte-control-outer" v-for="cmd in cmds" :key="cmd.id">
+          <button type="button" v-if="!cmd.isParent" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }" @click="cmd.onClick($event, commands)">
+            <!--// TODO :disabled="cmd.disabled(commands)" | this triggers a recursive loop error when used in multiple properties per editor-->
+            <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
+          </button>
+          <ui-dropdown v-if="cmd.isParent" align="right">
+            <template v-slot:button>
+              <button :data-alias="cmd.alias" type="button" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }">
+                <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
+              </button>
+            </template>
+            <ui-dropdown-button v-for="child in cmd.children" :label="child.title" @click="child.onClick($event, commands)" />
+          </ui-dropdown>
         </div>
-      </editor-menu-bar>
-      <editor-content class="ui-rte-input" :editor="editor" />
-    </div>
+      </div>
+    </editor-menu-bar>
+
+    <editor-content class="ui-rte-input" :editor="editor" />
+
   </div>
 </template>
 
@@ -92,6 +93,13 @@
       },
     },
 
+    computed: {
+      hasBubble()
+      {
+        return this.cmds.find(x => x.bubble) != null;
+      }
+    },
+
     created()
     {
       this.onDebouncedChange = _debounce(this.onChange, 350);
@@ -163,7 +171,8 @@
           symbolSize: cmd.symbolSize || 17,
           isActive: typeof cmd.isActive === 'function' ? cmd.isActive : () => false,
           disabled: typeof cmd.disabled === 'function' ? cmd.disabled : () => false,
-          onClick: typeof cmd.onClick === 'function' ? cmd.onClick : () => { }
+          onClick: typeof cmd.onClick === 'function' ? cmd.onClick : () => { },
+          bubble: cmd.bubble || false
         };
       }
     },
diff --git a/zero.Web.UI/App/config/rte.config.js b/zero.Web.UI/App/config/rte.config.js
index 417938a0..699482ea 100644
--- a/zero.Web.UI/App/config/rte.config.js
+++ b/zero.Web.UI/App/config/rte.config.js
@@ -57,7 +57,8 @@ export default function ()
         symbol: 'fth-bold',
         symbolSize: 14,
         isActive: active => active.bold(),
-        onClick: (ev, cmd) => cmd.bold(ev)
+        onClick: (ev, cmd) => cmd.bold(ev),
+        bubble: true
       },
       {
         alias: 'italic',
@@ -65,7 +66,8 @@ export default function ()
         symbol: 'fth-italic',
         symbolSize: 14,
         isActive: active => active.italic(),
-        onClick: (ev, cmd) => cmd.italic(ev)
+        onClick: (ev, cmd) => cmd.italic(ev),
+        bubble: true
       },
       {
         alias: 'underline',
@@ -73,7 +75,8 @@ export default function ()
         symbol: 'fth-underline',
         symbolSize: 14,
         isActive: active => active.underline(),
-        onClick: (ev, cmd) => cmd.underline(ev)
+        onClick: (ev, cmd) => cmd.underline(ev),
+        bubble: true
       },
       //{
       //  alias: 'strikethrough',
@@ -89,7 +92,8 @@ export default function ()
         symbol: 'fth-code',
         symbolSize: 14,
         isActive: active => active.code(),
-        onClick: (ev, cmd) => cmd.code(ev)
+        onClick: (ev, cmd) => cmd.code(ev),
+        bubble: true
       },
       {
         alias: 'line',