Make sure editors are scrollable in fullscreen mode

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,8 +64,16 @@ export class RichInput extends LitElement {
     }
 
     focus() {
+        if (this.mode === "wysiwyg") {
+            if (!this._editor.isFocused) {
                 this._editor.commands.focus();
             }
+        } else {
+            if (!this._markdownInput.focused) {
+                this._markdownInput.focus();
+            }
+        }
+    }
 
     private async _toggleMarkdown() {
         if (this.mode === "markdown") {
@@ -83,30 +96,38 @@ 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="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")}">
@@ -267,7 +288,10 @@ export class RichInput extends LitElement {
                     @click=${(e: Event) => e.stopPropagation()}
                     ?hidden=${this.mode !== "wysiwyg"}
                 ></div>
-            <pl-textarea autosize class="stretch" ?hidden=${this.mode !== "markdown"}></pl-textarea>
+                <div class="scrolling stretch">
+                    <pl-textarea autosize ?hidden=${this.mode !== "markdown"} class="fill-vertically"></pl-textarea>
+                </div>
+            </div>
         `;
     }
 }

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;
     }
 `;