From 26b72d7d4fb69b59216368852a7a054b322a4be6 Mon Sep 17 00:00:00 2001
From: Martin Kleinschrodt <martin@maklesoft.com>
Date: Mon, 18 Jul 2022 10:02:08 +0200
Subject: [PATCH] Make sure editors are scrollable in fullscreen mode

---
 packages/app/src/elements/rich-input.ts | 320 +++++++++++++-----------
 packages/app/src/styles/content.ts      |   4 +-
 2 files changed, 175 insertions(+), 149 deletions(-)

diff --git a/packages/app/src/elements/rich-input.ts b/packages/app/src/elements/rich-input.ts
index bbc4bdeb..d36dd3f6 100644
--- a/packages/app/src/elements/rich-input.ts
+++ b/packages/app/src/elements/rich-input.ts
@@ -11,6 +11,7 @@ import { $l } from "@padloc/locale/src/translate";
 import "./textarea";
 import { Textarea } from "./textarea";
 import "./select";
+import { customScrollbar } from "../styles/mixins";
 
 @customElement("pl-rich-input")
 export class RichInput extends LitElement {
@@ -19,6 +20,10 @@ export class RichInput extends LitElement {
     }
 
     set value(md: string) {
+        // Disallow updating the value while we're editing
+        if (this._editor.isFocused || this._markdownInput?.focused) {
+            return;
+        }
         const html = markdownToHtml(md).replace(/\n/g, "");
         console.log(md, html);
         this._editor.commands.clearContent();
@@ -59,7 +64,15 @@ export class RichInput extends LitElement {
     }
 
     focus() {
-        this._editor.commands.focus();
+        if (this.mode === "wysiwyg") {
+            if (!this._editor.isFocused) {
+                this._editor.commands.focus();
+            }
+        } else {
+            if (!this._markdownInput.focused) {
+                this._markdownInput.focus();
+            }
+        }
     }
 
     private async _toggleMarkdown() {
@@ -83,191 +96,202 @@ export class RichInput extends LitElement {
         content,
         css`
             :host {
+                display: block;
                 position: relative;
                 cursor: text;
                 border: solid 1px var(--color-shade-1);
                 border-radius: 0.5em;
-                display: flex;
-                flex-direction: column;
             }
 
             :host(.focused) {
                 border-color: var(--color-highlight);
             }
 
+            .container {
+                min-height: 0;
+                overflow-y: auto;
+            }
+
+            ${customScrollbar(".container")}
+
             pl-textarea {
                 border: none;
                 --input-padding: calc(2 * var(--spacing));
                 font-family: var(--font-family-mono);
                 font-size: 0.9em;
                 line-height: 1.3em;
+                min-height: 0;
             }
         `,
     ];
 
     render() {
         return html`
-            <div class="small padded double-spacing horizontal layout border-bottom">
-                <div class="half-spacing wrapping horizontal layout stretch" ?disabled=${this.mode !== "wysiwyg"}>
-                    <pl-button class="transparent slim" title="${$l("Text Mode")}">
-                        ${this._editor?.isActive("heading", { level: 1 })
-                            ? html` <pl-icon icon="heading-1"></pl-icon> `
-                            : this._editor?.isActive("heading", { level: 2 })
-                            ? html` <pl-icon icon="heading-2"></pl-icon> `
-                            : this._editor?.isActive("heading", { level: 3 })
-                            ? html` <pl-icon icon="heading-3"></pl-icon> `
-                            : html` <pl-icon icon="text"></pl-icon> `}
+            <div class="vertical layout fit-vertically">
+                <div class="small padded double-spacing horizontal layout border-bottom">
+                    <div class="half-spacing wrapping horizontal layout stretch" ?disabled=${this.mode !== "wysiwyg"}>
+                        <pl-button class="transparent slim" title="${$l("Text Mode")}">
+                            ${this._editor?.isActive("heading", { level: 1 })
+                                ? html` <pl-icon icon="heading-1"></pl-icon> `
+                                : this._editor?.isActive("heading", { level: 2 })
+                                ? html` <pl-icon icon="heading-2"></pl-icon> `
+                                : this._editor?.isActive("heading", { level: 3 })
+                                ? html` <pl-icon icon="heading-3"></pl-icon> `
+                                : html` <pl-icon icon="text"></pl-icon> `}
 
-                        <pl-icon class="small" icon="dropdown"></pl-icon>
-                    </pl-button>
+                            <pl-icon class="small" icon="dropdown"></pl-icon>
+                        </pl-button>
 
-                    <pl-popover hide-on-click>
-                        <pl-list>
-                            <div
-                                class="small double-padded centering horizontal layout list-item hover click"
-                                @click=${() => this._editor.chain().focus().setHeading({ level: 1 }).run()}
-                            >
-                                <pl-icon icon="heading-1"></pl-icon>
-                            </div>
-                            <div
-                                class="small double-padded centering horizontal layout list-item hover click"
-                                @click=${() => this._editor.chain().focus().setHeading({ level: 2 }).run()}
-                            >
-                                <pl-icon icon="heading-2"></pl-icon>
-                            </div>
-                            <div
-                                class="small double-padded centering horizontal layout list-item hover click"
-                                @click=${() => this._editor.chain().focus().setHeading({ level: 3 }).run()}
-                            >
-                                <pl-icon icon="heading-3"></pl-icon>
-                            </div>
-                            <div
-                                class="small double-padded centering horizontal layout list-item hover click"
-                                @click=${() => this._editor.chain().focus().setParagraph().run()}
-                            >
-                                <pl-icon icon="text"></pl-icon>
-                            </div>
-                        </pl-list>
-                    </pl-popover>
+                        <pl-popover hide-on-click>
+                            <pl-list>
+                                <div
+                                    class="small double-padded centering horizontal layout list-item hover click"
+                                    @click=${() => this._editor.chain().focus().setHeading({ level: 1 }).run()}
+                                >
+                                    <pl-icon icon="heading-1"></pl-icon>
+                                </div>
+                                <div
+                                    class="small double-padded centering horizontal layout list-item hover click"
+                                    @click=${() => this._editor.chain().focus().setHeading({ level: 2 }).run()}
+                                >
+                                    <pl-icon icon="heading-2"></pl-icon>
+                                </div>
+                                <div
+                                    class="small double-padded centering horizontal layout list-item hover click"
+                                    @click=${() => this._editor.chain().focus().setHeading({ level: 3 }).run()}
+                                >
+                                    <pl-icon icon="heading-3"></pl-icon>
+                                </div>
+                                <div
+                                    class="small double-padded centering horizontal layout list-item hover click"
+                                    @click=${() => this._editor.chain().focus().setParagraph().run()}
+                                >
+                                    <pl-icon icon="text"></pl-icon>
+                                </div>
+                            </pl-list>
+                        </pl-popover>
 
-                    <div class="border-left"></div>
+                        <div class="border-left"></div>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("bold")}
-                        @click=${() => this._editor.chain().focus().toggleBold().run()}
-                        title="${$l("Bold")}"
-                    >
-                        <pl-icon icon="bold"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("bold")}
+                            @click=${() => this._editor.chain().focus().toggleBold().run()}
+                            title="${$l("Bold")}"
+                        >
+                            <pl-icon icon="bold"></pl-icon>
+                        </pl-button>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("italic")}
-                        @click=${() => this._editor.chain().focus().toggleItalic().run()}
-                        title="${$l("Italic")}"
-                    >
-                        <pl-icon icon="italic"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("italic")}
+                            @click=${() => this._editor.chain().focus().toggleItalic().run()}
+                            title="${$l("Italic")}"
+                        >
+                            <pl-icon icon="italic"></pl-icon>
+                        </pl-button>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("strike")}
-                        @click=${() => this._editor.chain().focus().toggleStrike().run()}
-                        title="${$l("Strikethrough")}"
-                    >
-                        <pl-icon icon="strikethrough"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("strike")}
+                            @click=${() => this._editor.chain().focus().toggleStrike().run()}
+                            title="${$l("Strikethrough")}"
+                        >
+                            <pl-icon icon="strikethrough"></pl-icon>
+                        </pl-button>
 
-                    <div class="border-left"></div>
+                        <div class="border-left"></div>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("bulletList")}
-                        @click=${() => this._editor.chain().focus().toggleBulletList().run()}
-                        title="${$l("Unordered List")}"
-                    >
-                        <pl-icon icon="list"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("bulletList")}
+                            @click=${() => this._editor.chain().focus().toggleBulletList().run()}
+                            title="${$l("Unordered List")}"
+                        >
+                            <pl-icon icon="list"></pl-icon>
+                        </pl-button>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("orderedList")}
-                        @click=${() => this._editor.chain().focus().toggleOrderedList().run()}
-                        title="${$l("Ordered List")}"
-                    >
-                        <pl-icon icon="list-ol"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("orderedList")}
+                            @click=${() => this._editor.chain().focus().toggleOrderedList().run()}
+                            title="${$l("Ordered List")}"
+                        >
+                            <pl-icon icon="list-ol"></pl-icon>
+                        </pl-button>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("blockquote")}
-                        @click=${() => this._editor.chain().focus().toggleBlockquote().run()}
-                        title="${$l("Blockquote")}"
-                    >
-                        <pl-icon icon="blockquote"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("blockquote")}
+                            @click=${() => this._editor.chain().focus().toggleBlockquote().run()}
+                            title="${$l("Blockquote")}"
+                        >
+                            <pl-icon icon="blockquote"></pl-icon>
+                        </pl-button>
 
-                    <pl-button
-                        class="transparent slim"
-                        .toggled=${this._editor?.isActive("codeBlock")}
-                        @click=${() => this._editor.chain().focus().toggleCodeBlock().run()}
-                        title="${$l("Code Block")}"
-                    >
-                        <pl-icon icon="code"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            .toggled=${this._editor?.isActive("codeBlock")}
+                            @click=${() => this._editor.chain().focus().toggleCodeBlock().run()}
+                            title="${$l("Code Block")}"
+                        >
+                            <pl-icon icon="code"></pl-icon>
+                        </pl-button>
 
-                    <div class="border-left"></div>
+                        <div class="border-left"></div>
 
-                    <pl-button
-                        class="transparent slim"
-                        @click=${() => this._editor.chain().focus().setHorizontalRule().run()}
-                        title="${$l("Insert Horizontal Line")}"
-                    >
-                        <pl-icon icon="line"></pl-icon>
-                    </pl-button>
+                        <pl-button
+                            class="transparent slim"
+                            @click=${() => this._editor.chain().focus().setHorizontalRule().run()}
+                            title="${$l("Insert Horizontal Line")}"
+                        >
+                            <pl-icon icon="line"></pl-icon>
+                        </pl-button>
+                    </div>
+                    <div class="half-spacing left-padded horizontal layout border-left">
+                        <pl-select
+                            class="slim"
+                            .value=${this.mode as any}
+                            .options=${[
+                                {
+                                    label: "WYSIWYG",
+                                    value: "wysiwyg",
+                                },
+                                {
+                                    label: "Markdown",
+                                    value: "markdown",
+                                },
+                            ]}
+                            hidden
+                        ></pl-select>
+
+                        <pl-button
+                            class="transparent slim"
+                            style="line-height: 1.2em"
+                            @click=${() => this._toggleMarkdown()}
+                            .toggled=${this.mode === "markdown"}
+                        >
+                            <div>M</div>
+                            <pl-icon icon="markdown"></pl-icon>
+                        </pl-button>
+
+                        <pl-button
+                            class="transparent slim"
+                            @click=${() => this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
+                        >
+                            <pl-icon icon="${this.isFullscreen ? "cancel" : "expand"}"></pl-icon>
+                        </pl-button>
+                    </div>
                 </div>
-                <div class="half-spacing left-padded horizontal layout border-left">
-                    <pl-select
-                        class="slim"
-                        .value=${this.mode as any}
-                        .options=${[
-                            {
-                                label: "WYSIWYG",
-                                value: "wysiwyg",
-                            },
-                            {
-                                label: "Markdown",
-                                value: "markdown",
-                            },
-                        ]}
-                        hidden
-                    ></pl-select>
-
-                    <pl-button
-                        class="transparent slim"
-                        style="line-height: 1.2em"
-                        @click=${() => this._toggleMarkdown()}
-                        .toggled=${this.mode === "markdown"}
-                    >
-                        <div>M</div>
-                        <pl-icon icon="markdown"></pl-icon>
-                    </pl-button>
-
-                    <pl-button
-                        class="transparent slim"
-                        @click=${() => this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
-                    >
-                        <pl-icon icon="${this.isFullscreen ? "cancel" : "expand"}"></pl-icon>
-                    </pl-button>
+                <div
+                    class="double-padded container scroller stretch"
+                    @click=${(e: Event) => e.stopPropagation()}
+                    ?hidden=${this.mode !== "wysiwyg"}
+                ></div>
+                <div class="scrolling stretch">
+                    <pl-textarea autosize ?hidden=${this.mode !== "markdown"} class="fill-vertically"></pl-textarea>
                 </div>
             </div>
-            <div
-                class="double-padded container scroller stretch"
-                @click=${(e: Event) => e.stopPropagation()}
-                ?hidden=${this.mode !== "wysiwyg"}
-            ></div>
-            <pl-textarea autosize class="stretch" ?hidden=${this.mode !== "markdown"}></pl-textarea>
         `;
     }
 }
diff --git a/packages/app/src/styles/content.ts b/packages/app/src/styles/content.ts
index 9c2f7e94..4d02627e 100644
--- a/packages/app/src/styles/content.ts
+++ b/packages/app/src/styles/content.ts
@@ -109,12 +109,13 @@ export const content = css`
 
     blockquote {
         border-left: solid 2px var(--color-shade-3);
-        padding-left: 0.5em;
+        padding: 0.25em 0 0.25em 0.5em;
     }
 
     hr {
         border: none;
         border-top: solid 1px var(--color-shade-3);
+        margin: 0.5em 0;
     }
 
     pre > code {
@@ -125,5 +126,6 @@ export const content = css`
         border-radius: 0.5em;
         font-size: 0.9em;
         margin-bottom: 0.5em;
+        overflow-x: auto;
     }
 `;