Several editor fixes (#1478)

* Declare toolbar api via modifiable property * Fix addon buttons * Assign editing areas in a synchronous way * Restore the Tab shortcut that moves the caret to end - moveCaretToEnd is called twice now: The moveCaretToEnd calls in *TextInput causes the caret to be moved to the end when switching back from the window and back. - To fix this, I will need the code for saving and restoring locations from #1377 * Restore selections in the PlainTextInput * Improve type safety of destroyable - clearable-array was renamed to destroyable
2021-11-05 02:29:02 +01:00 · 2021-11-05 02:29:02 +01:00 · c9bd39c6a2
commit c9bd39c6a2
parent 896d11546b
15 changed files with 197 additions and 99 deletions
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@ -408,7 +408,7 @@ class Browser(QMainWindow):
        def add_preview_button(editor: Editor) -> None:
            editor._links["preview"] = lambda _editor: self.onTogglePreview()
            editor.web.eval(
-                "noteEditorPromise.then(noteEditor => noteEditor.toolbar.then(toolbar => toolbar.notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' })));",
+                "noteEditorPromise.then(noteEditor => noteEditor.toolbar.notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' }));",
            )

        gui_hooks.editor_did_init.append(add_preview_button)
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@ -137,7 +137,7 @@ class Editor:
        gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)

        lefttopbtns_defs = [
-            f"noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then((toolbar) => toolbar.notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: {json.dumps(button)} }} }}, -1)));"
+            f"noteEditorPromise.then((noteEditor) => noteEditor.toolbar.notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: {json.dumps(button)} }} }}, -1));"
            for button in lefttopbtns
        ]
        lefttopbtns_js = "\n".join(lefttopbtns_defs)
@ -150,7 +150,7 @@ class Editor:
        righttopbtns_defs = ", ".join([json.dumps(button) for button in righttopbtns])
        righttopbtns_js = (
            f"""
-noteEditorPromise.then(noteEditor => noteEditor.toolbar.then((toolbar) => toolbar.toolbar.appendGroup({{
+noteEditorPromise.then(noteEditor => noteEditor.toolbar.toolbar.appendGroup({{
    component: editorToolbar.AddonButtons,
    id: "addons",
    props: {{ buttons: [ {righttopbtns_defs} ] }},
@ -1323,11 +1323,11 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
 def set_cloze_button(editor: Editor) -> None:
    if editor.note.note_type()["type"] == MODEL_CLOZE:
        editor.web.eval(
-            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then((toolbar) => toolbar.templateButtons.showButton("cloze"))); '
+            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.templateButtons.showButton("cloze")); '
        )
    else:
        editor.web.eval(
-            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze"))); '
+            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.templateButtons.hideButton("cloze")); '
        )


--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@ -2,16 +2,27 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<script context="module" lang="ts">
+    import type { SvelteComponent } from "./registration";
+    import type { Identifier } from "./identifier";
+
+    export interface ButtonGroupAPI {
+        insertButton(button: SvelteComponent, position: Identifier): void;
+        appendButton(button: SvelteComponent, position: Identifier): void;
+        showButton(position: Identifier): void;
+        hideButton(position: Identifier): void;
+        toggleButton(position: Identifier): void;
+    }
+</script>
+
 <script lang="ts">
    import ButtonGroupItem from "./ButtonGroupItem.svelte";
    import { setContext } from "svelte";
    import { writable } from "svelte/store";
    import { buttonGroupKey } from "./context-keys";
-    import type { Identifier } from "./identifier";
    import { insertElement, appendElement } from "./identifier";
    import type { ButtonRegistration } from "./buttons";
    import { ButtonPosition } from "./buttons";
-    import type { SvelteComponent } from "./registration";
    import { makeInterface } from "./registration";

    export let id: string | undefined = undefined;
@ -57,10 +68,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    setContext(buttonGroupKey, registerComponent);

-    export let api: Record<string, unknown> | undefined = undefined;
+    export let api: Partial<ButtonGroupAPI> | undefined = undefined;
    let buttonGroupRef: HTMLDivElement;

-    $: if (api && buttonGroupRef) {
+    function createApi(): void {
        const { addComponent, updateRegistration } =
            getDynamicInterface(buttonGroupRef);

@ -89,7 +100,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            showButton,
            hideButton,
            toggleButton,
-        });
+        } as ButtonGroupAPI);
+    }
+
+    $: if (api && buttonGroupRef) {
+        createApi();
    }
 </script>

--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@ -2,14 +2,26 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<script context="module" lang="ts">
+    import type { Identifier } from "./identifier";
+    import type { SvelteComponent } from "./registration";
+
+    export interface ButtonToolbarAPI {
+        insertGroup(button: SvelteComponent, position: Identifier): void;
+        appendGroup(button: SvelteComponent, position: Identifier): void;
+        showGroup(position: Identifier): void;
+        hideGroup(position: Identifier): void;
+        toggleGroup(position: Identifier): void;
+    }
+</script>
+
 <script lang="ts">
    import { getContext, setContext } from "svelte";
    import { writable } from "svelte/store";
    import Item from "./Item.svelte";
+    import type { Registration } from "./registration";
    import { sectionKey, nightModeKey } from "./context-keys";
-    import type { Identifier } from "./identifier";
    import { insertElement, appendElement } from "./identifier";
-    import type { SvelteComponent, Registration } from "./registration";
    import { makeInterface } from "./registration";

    export let id: string | undefined = undefined;
@ -39,10 +51,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    setContext(sectionKey, registerComponent);

-    export let api: Record<string, unknown> | undefined = undefined;
+    export let api: Partial<ButtonToolbarAPI> | undefined = undefined;
    let buttonToolbarRef: HTMLDivElement;

-    $: if (buttonToolbarRef && api) {
+    function createApi(): void {
        const { addComponent, updateRegistration } =
            getDynamicInterface(buttonToolbarRef);

@ -74,6 +86,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        });
    }

+    $: if (buttonToolbarRef && api) {
+        createApi();
+    }
+
    const nightMode = getContext<boolean>(nightModeKey);
 </script>

--- a/ts/editor/CodeMirror.svelte
+++ b/ts/editor/CodeMirror.svelte
@ -44,14 +44,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        // TODO passing in the tabindex option does not do anything: bug?
        codeMirror.getInputField().tabIndex = 0;

+        let ranges: CodeMirrorLib.Range[] | null = null;
+
        codeMirror.on("change", () => dispatch("change", codeMirror.getValue()));
+        codeMirror.on("mousedown", () => {
+            ranges = null;
+        });
        codeMirror.on("focus", () => {
+            if (ranges) {
+                codeMirror.setSelections(ranges);
+            }
            unsubscribe();
-            dispatch("focus");
        });
        codeMirror.on("blur", () => {
+            ranges = codeMirror.listSelections();
            subscribe();
-            dispatch("blur");
        });

        subscribe();
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        readonly name: string;
        focusable: boolean;
        focus(): void;
+        moveCaretToEnd(): void;
        refocus(): void;
    }

@ -48,7 +49,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    let focusTrap: HTMLInputElement;

    const inputsStore = writable<EditingInputAPI[]>([]);
-
    $: editingInputs = $inputsStore;

    function getAvailableInput(): EditingInputAPI | undefined {
@ -111,12 +111,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        }
    }

-    export const api = set({
-        content,
-        editingInputs: inputsStore,
-        focus,
-        refocus,
-    });
+    export let api: Partial<EditingAreaAPI> = {};
+
+    Object.assign(
+        api,
+        set({
+            content,
+            editingInputs: inputsStore,
+            focus,
+            refocus,
+        }),
+    );

    onMount(() => {
        if (autofocus) {
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script context="module" lang="ts">
    import type { EditingAreaAPI } from "./EditingArea.svelte";
    import contextProperty from "../sveltelib/context-property";
+    import type { Readable } from "svelte/store";

    export interface FieldData {
        name: string;
@ -14,10 +15,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    }

    export interface EditorFieldAPI {
-        element: HTMLElement;
-        index: number;
-        direction: "ltr" | "rtl";
-        editingArea?: EditingAreaAPI;
+        element: Promise<HTMLElement>;
+        direction: Readable<"ltr" | "rtl">;
+        editingArea: EditingAreaAPI;
    }

    const key = Symbol("editorField");
@ -32,43 +32,46 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import LabelName from "./LabelName.svelte";
    import FieldState from "./FieldState.svelte";

-    import { setContext } from "svelte";
+    import { onDestroy, setContext } from "svelte";
    import { writable } from "svelte/store";
    import type { Writable } from "svelte/store";
    import { directionKey } from "../lib/context-keys";
+    import { promiseWithResolver } from "../lib/promise";
+    import type { Destroyable } from "./destroyable";

    export let content: Writable<string>;
    export let field: FieldData;
    export let autofocus = false;

-    const directionStore = writable();
+    export let api: (Partial<EditorFieldAPI> & Destroyable) | undefined = undefined;
+
+    const directionStore = writable<"ltr" | "rtl">();
    setContext(directionKey, directionStore);

    $: $directionStore = field.direction;

-    let editorField: HTMLElement;
+    const editingArea: Partial<EditingAreaAPI> = {};
+    const [element, elementResolve] = promiseWithResolver<HTMLElement>();

-    export const api = set(
-        Object.create(
-            {},
-            {
-                element: {
-                    get: () => editorField,
-                },
-                direction: {
-                    get: () => $directionStore,
-                },
-            },
-        ) as EditorFieldAPI,
-    );
+    const editorFieldApi = set({
+        element,
+        direction: directionStore,
+        editingArea: editingArea as EditingAreaAPI,
+    });
+
+    if (api) {
+        Object.assign(api, editorFieldApi);
+    }
+
+    onDestroy(() => api?.destroy());
 </script>

 <div
-    bind:this={editorField}
+    use:elementResolve
    class="editor-field"
    on:focusin
    on:focusout
-    on:click={() => api.editingArea?.focus()}
+    on:click={() => editingArea.focus?.()}
 >
    <LabelContainer>
        <LabelName>{field.name}</LabelName>
@ -79,7 +82,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        {autofocus}
        fontFamily={field.fontFamily}
        fontSize={field.fontSize}
-        bind:api={api.editingArea}
+        api={editingArea}
    >
        <slot name="editing-inputs" />
    </EditingArea>
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@ -6,6 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import "./legacy.css";
    import { updateAllState, resetAllState } from "../components/WithState.svelte";

+    import type { ButtonGroupAPI } from "../components/ButtonGroup.svelte";
+    import type { ButtonToolbarAPI } from "../components/ButtonToolbar.svelte";
+
    export function updateActiveButtons(event: Event) {
        updateAllState(event);
    }
@ -15,12 +18,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    }

    export interface EditorToolbarAPI {
-        toolbar: any;
-        notetypeButtons: any;
-        formatInlineButtons: any;
-        formatBlockButtons: any;
-        colorButtons: any;
-        templateButtons: any;
+        toolbar: ButtonToolbarAPI;
+        notetypeButtons: ButtonGroupAPI;
+        formatInlineButtons: ButtonGroupAPI;
+        formatBlockButtons: ButtonGroupAPI;
+        colorButtons: ButtonGroupAPI;
+        templateButtons: ButtonGroupAPI;
    }

    /* Our dynamic components */
@ -57,14 +60,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    const colorButtons = {};
    const templateButtons = {};

-    export const api = {
+    export let api: Partial<EditorToolbarAPI> = {};
+
+    Object.assign(api, {
        toolbar,
        notetypeButtons,
        formatInlineButtons,
        formatBlockButtons,
        colorButtons,
        templateButtons,
-    };
+    } as EditorToolbarAPI);
 </script>

 <StickyHeader>
--- a/ts/editor/OldEditorAdapter.svelte
+++ b/ts/editor/OldEditorAdapter.svelte
@ -8,11 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import type { PlainTextInputAPI } from "./PlainTextInput.svelte";
    import type { EditorToolbarAPI } from "./EditorToolbar.svelte";

+    import { registerShortcut } from "../lib/shortcuts";
    import contextProperty from "../sveltelib/context-property";
+    import { writable, get } from "svelte/store";

    export interface NoteEditorAPI {
        fields: EditorFieldAPI[];
-        currentField: Writable<EditorFieldAPI>;
+        currentField: Writable<EditorFieldAPI | null>;
        activeInput: Writable<RichTextInputAPI | PlainTextInputAPI | null>;
        focusInRichText: Writable<boolean>;
        toolbar: EditorToolbarAPI;
@ -22,6 +24,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    const [set, getNoteEditor, hasNoteEditor] = contextProperty<NoteEditorAPI>(key);

    export { getNoteEditor, hasNoteEditor };
+
+    const activeInput = writable<RichTextInputAPI | PlainTextInputAPI | null>(null);
+    const currentField = writable<EditorFieldAPI | null>(null);
+
+    function updateFocus() {
+        get(activeInput)?.moveCaretToEnd();
+    }
+
+    registerShortcut(
+        () => document.addEventListener("focusin", updateFocus, { once: true }),
+        "Shift?+Tab",
+    );
 </script>

 <script lang="ts">
@ -49,12 +63,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    import { onMount, onDestroy } from "svelte";
    import type { Writable } from "svelte/store";
-    import { writable, get } from "svelte/store";
    import { bridgeCommand } from "../lib/bridgecommand";
    import { isApplePlatform } from "../lib/platform";
-    import { promiseWithResolver } from "../lib/promise";
    import { ChangeTimer } from "./change-timer";
    import { alertIcon } from "./icons";
+    import { clearableArray } from "./destroyable";

    function quoteFontFamily(fontFamily: string): string {
        // generic families (e.g. sans-serif) must not be quoted
@ -105,6 +118,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    let fonts: [string, number, boolean][] = [];
    let richTextsHidden: boolean[] = [];
    let plainTextsHidden: boolean[] = [];
+    let fields = clearableArray<EditorFieldAPI>();

    export function setFonts(fs: [string, number, boolean][]): void {
        fonts = fs;
@ -115,9 +129,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    let focusTo: number = 0;
    export function focusField(n: number): void {
-        focusTo = n;
-
-        fieldApis[focusTo]?.editingArea?.refocus();
+        if (typeof n === "number") {
+            focusTo = n;
+            fields[focusTo].editingArea?.refocus();
+        }
    }

    let textColor: string = "black";
@ -192,8 +207,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        bridgeCommand("toggleStickyAll", (values: boolean[]) => (stickies = values));
    }

-    import { registerShortcut } from "../lib/shortcuts";
-
    let deregisterSticky: () => void;
    export function activateStickyShortcuts() {
        deregisterSticky = registerShortcut(toggleStickyAll, "Shift+F9");
@ -218,31 +231,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    let plainTextInputs: PlainTextInput[] = [];
    $: plainTextInputs = plainTextInputs.filter(Boolean);

-    let editorFields: EditorField[] = [];
-    $: fieldApis = editorFields.filter(Boolean).map((field) => field.api);
-
-    const currentField = writable<EditorFieldAPI | null>(null);
-    const activeInput = writable<RichTextInputAPI | PlainTextInputAPI | null>(null);
    const focusInRichText = writable<boolean>(false);

-    const [toolbarPromise, toolbarResolve] = promiseWithResolver<EditorToolbarAPI>();
-    let toolbar: EditorToolbarAPI;
-    $: if (toolbar) {
-        toolbarResolve(toolbar);
-    }
+    let toolbar: Partial<EditorToolbarAPI> = {};

-    export const api = set(
-        Object.create(
-            {
-                currentField,
-                activeInput,
-                focusInRichText,
-                toolbar: toolbarPromise,
-            },
-            {
-                fields: { get: () => fieldApis },
-            },
-        ),
+    export let api = {};
+
+    Object.assign(
+        api,
+        set({
+            currentField,
+            activeInput,
+            focusInRichText,
+            toolbar: toolbar as EditorToolbarAPI,
+            fields,
+        }),
    );

    onMount(() => {
@ -255,7 +258,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

 <NoteEditor>
    <FieldsEditor>
-        <EditorToolbar {size} {wrap} {textColor} {highlightColor} bind:api={toolbar} />
+        <EditorToolbar {size} {wrap} {textColor} {highlightColor} api={toolbar} />

        {#if hint}
            <Absolute bottom right --margin="10px">
@ -274,9 +277,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                    {field}
                    content={fieldStores[index]}
                    autofocus={index === focusTo}
-                    bind:this={editorFields[index]}
+                    api={fields[index]}
                    on:focusin={() => {
-                        $currentField = api.fields[index];
+                        $currentField = fields[index];
                        bridgeCommand(`focus:${index}`);
                    }}
                    on:focusout={() => {
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@ -22,9 +22,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        off = !off;
    }

-    onMount(() =>
-        registerShortcut(toggle, keyCombination, editorField.element as HTMLElement),
-    );
+    function shortcut(element: HTMLElement): void {
+        registerShortcut(toggle, keyCombination, element);
+    }
+
+    onMount(() => editorField.element.then(shortcut));
 </script>

 <span class:highlighted={!off} on:click|stopPropagation={toggle}>
--- a/ts/editor/PlainTextInput.svelte
+++ b/ts/editor/PlainTextInput.svelte
@ -148,7 +148,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        {configuration}
        {code}
        bind:api={codeMirror}
-        on:focus={moveCaretToEnd}
        on:change={({ detail: html }) => code.set(parseAsHTML(html))}
    />
 </div>
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@ -20,16 +20,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    export let index: number;

-    function toggleSticky() {
+    function toggle() {
        bridgeCommand(`toggleSticky:${index}`, (value: boolean) => {
            active = value;
        });
    }

-    onMount(() => registerShortcut(toggleSticky, keyCombination, editorField.element));
+    function shortcut(element: HTMLElement): void {
+        registerShortcut(toggle, keyCombination, element);
+    }
+
+    onMount(() => editorField.element.then(shortcut));
 </script>

-<span class:highlighted={active} on:click|stopPropagation={toggleSticky}>
+<span class:highlighted={active} on:click|stopPropagation={toggle}>
    <Badge
        tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
        widthMultiplier={0.7}>{@html icon}</Badge
--- a/ts/editor/destroyable.ts
+++ b/ts/editor/destroyable.ts
@ -0,0 +1,35 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export interface Destroyable {
+    destroy(): void;
+}
+
+export function clearableArray<T>(): (T & Destroyable)[] {
+    const list: (T & Destroyable)[] = [];
+
+    return new Proxy(list, {
+        get: function (target: (T & Destroyable)[], prop: string | symbol) {
+            if (!isNaN(Number(prop)) && !target[prop]) {
+                const item = {} as T & Destroyable;
+
+                const destroy = (): void => {
+                    const index = list.indexOf(item);
+                    list.splice(index, 1);
+                };
+
+                target[prop] = new Proxy(item, {
+                    get: function (target: T & Destroyable, prop: string | symbol) {
+                        if (prop === "destroy") {
+                            return destroy;
+                        }
+
+                        return target[prop];
+                    },
+                });
+            }
+
+            return target[prop];
+        },
+    });
+}
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@ -75,8 +75,11 @@ async function setupNoteEditor(): Promise<NoteEditorAPI> {

    await i18n;

+    const api: Partial<NoteEditorAPI> = {};
+
    const noteEditor = new OldEditorAdapter({
        target: document.body,
+        props: { api: api as NoteEditorAPI },
        context,
    });

@ -95,7 +98,7 @@ async function setupNoteEditor(): Promise<NoteEditorAPI> {
        setNoteId: noteEditor.setNoteId,
    });

-    return noteEditor.api;
+    return api as NoteEditorAPI;
 }

 export const noteEditorPromise = setupNoteEditor();
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@ -6,6 +6,7 @@
    background-color: white;
    border: 1px solid var(--medium-border);
    padding: 0 !important;
+    margin-left: -1px;

    /* !important cannot be used with @include */
    border-top-left-radius: var(--border-left-radius) !important;
@ -13,8 +14,6 @@
    border-top-right-radius: var(--border-right-radius) !important;
    border-bottom-right-radius: var(--border-right-radius) !important;

-    margin-left: -1px;
-
    &:hover {
        background-color: #ebebeb;
    }
@ -27,10 +26,12 @@
    }

    .nightMode & {
+        background: linear-gradient(0deg, #555555 0%, #656565 100%);
+        border-width: 0px;
        margin-left: 1px;

        &:hover {
-            background-color: #7a7a7a;
+            background: #7a7a7a;
            border-color: #7a7a7a;
        }

@ -45,7 +46,7 @@

 .topbut {
    display: inline-block;
-    vertical-align: middle;
+    vertical-align: baseline;
    width: calc(var(--buttons-size) - 12px);
    height: calc(var(--buttons-size) - 12px);
 }