From 805ef26e20bc56d65b9ad04751833a55f98dfe7b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 14:01:55 +0200
Subject: [PATCH] Add all format inline buttons

---
 ts/editor/EditorToolbar.svelte       |  2 +-
 ts/editor/FormatInlineButtons.svelte | 59 +++++++++++++++++++---------
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index ad87ca7ad..256e57b9d 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {
-        updateAllState(event)
+        updateAllState(event);
     }
 
     export function clearActiveButtons() {
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index e8010edf4..e800c58b2 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -80,31 +80,52 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithState>
     </WithShortcut>
 
-    <!--<WithShortcut shortcut="Control+KeyU">
-        <CommandIconButton tooltip={tr.editingUnderlineText()} command="underline">
-            {@html underlineIcon}
-        </CommandIconButton>
+    <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="superscript"
+            update={() => document.queryCommandState('superscript')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingSuperscript()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('superscript');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html superscriptIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+Shift+Equal">
-        <CommandIconButton tooltip={tr.editingSuperscript()} command="superscript">
-            {@html superscriptIcon}
-        </CommandIconButton>
+    <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="subscript"
+            update={() => document.queryCommandState('subscript')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingSubscript()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('subscript');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html subscriptIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+Equal">
-        <CommandIconButton tooltip={tr.editingSubscript()} command="subscript">
-            {@html subscriptIcon}
-        </CommandIconButton>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyR">
+    <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
         <IconButton
-            tooltip={tr.editingSubscript()}
-            on:click={() => {
+            tooltip={tr.editingRemoveFormatting()}
+            on:click={(event) => {
                 document.execCommand('removeFormat');
-            }}>
+            }}
+            on:mount={createShortcut}>
             {@html eraserIcon}
         </IconButton>
-    </WithShortcut> -->
+    </WithShortcut>
 </ButtonGroup>