WIP

packages/app/src/elements/field.ts

@@ -12,13 +12,15 @@ import { Drawer } from "./drawer";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { css, html, LitElement } from "lit";
 import { generatePassphrase } from "@padloc/core/src/diceware";
-import { randomString, charSets } from "@padloc/core/src/util";
+import { randomString, charSets, wait } from "@padloc/core/src/util";
 import { app } from "../globals";
 import { descriptionForAudit, iconForAudit, titleTextForAudit } from "../lib/audit";
 import "./popover";
 import "./rich-input";
 import "./rich-content";
 import { RichInput } from "./rich-input";
+import { singleton } from "../lib/singleton";
+import { NoteDialog } from "./note-dialog";
 
 @customElement("pl-field")
 export class FieldElement extends LitElement {
@@ -55,23 +57,38 @@ export class FieldElement extends LitElement {
     @query(".drawer")
     private _drawer: Drawer;
 
+    @singleton("pl-note-dialog")
+    private _noteDialog: NoteDialog;
+
     private get _fieldDef() {
         return FIELD_DEFS[this.field.type] || FIELD_DEFS.text;
     }
 
     private get _fieldActions() {
-        const actions = [
-            ...(this._fieldDef.actions || []),
-            { icon: "copy", label: $l("Copy"), action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")) },
-            {
-                icon: "edit",
-                label: $l("Edit"),
-                action: () => {
-                    this.dispatchEvent(new CustomEvent("edit"));
-                    this._drawer.collapsed = true;
-                },
+        const actions = [...(this._fieldDef.actions || [])];
+
+        if (this.field.type === FieldType.Note) {
+            actions.push({
+                icon: "expand",
+                label: "Fullscreen",
+                action: () => this._editNoteFullscreen(),
+            });
+        } else {
+            actions.push({
+                icon: "copy",
+                label: $l("Copy"),
+                action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")),
+            });
+        }
+
+        actions.push({
+            icon: "edit",
+            label: $l("Edit"),
+            action: () => {
+                this.dispatchEvent(new CustomEvent("edit"));
+                this._drawer.collapsed = true;
             },
-        ];
+        });
 
         if (this._fieldDef.mask && !app.settings.unmaskFieldsOnHover) {
             actions.unshift({
@@ -181,6 +198,18 @@ export class FieldElement extends LitElement {
         }, 50);
     }
 
+    private async _editNoteFullscreen() {
+        const value = await this._noteDialog.show(this.field.value);
+        if (typeof value === "string" && value !== this.field.value) {
+            if (!this.editing) {
+                this.dispatchEvent(new CustomEvent("edit"));
+                await wait(100);
+                await this.updateComplete;
+            }
+            this._valueInput.value = this.field.value = value;
+        }
+    }
+
     static styles = [
         shared,
         css`
@@ -282,6 +311,7 @@ export class FieldElement extends LitElement {
                         class="small value-input"
                         @input=${(e: Event) => (this.field.value = (e.target! as RichInput).value)}
                         .value=${this.field.value}
+                        @toggle-fullscreen=${this._editNoteFullscreen}
                     >
                     </pl-rich-input>
                 `;

packages/app/src/elements/icon.ts

@@ -641,6 +641,10 @@ export class PlIcon extends LitElement {
             :host([icon="expand"]) > div::before {
                 content: "\\f320";
             }
+
+            :host([icon="collapse"]) > div::before {
+                content: "\\f326";
+            }
         `,
     ];
 

packages/app/src/elements/note-dialog.ts

@@ -0,0 +1,58 @@
+import { mixins } from "../styles";
+import { Dialog } from "./dialog";
+import "./icon";
+import { css, html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+import "./button";
+import "./rich-input";
+import { RichInput } from "./rich-input";
+// import { VaultItem } from "./vault-item";
+// import { View } from "./view";
+
+@customElement("pl-note-dialog")
+export class NoteDialog extends Dialog<string, string> {
+    @query("pl-rich-input")
+    _input: RichInput;
+
+    static styles = [
+        ...Dialog.styles,
+        css`
+            .inner {
+                box-shadow: none;
+                border-radius: 0;
+                ${mixins.fullbleed()};
+                max-width: none;
+            }
+
+            :host([open]) .scrim {
+                opacity: 1;
+            }
+
+            pl-rich-input {
+                border: none;
+            }
+        `,
+    ];
+
+    async show(value: string) {
+        const promise = super.show();
+        await this.updateComplete;
+        this._input.value = value;
+        setTimeout(() => this._input.focus(), 100);
+        return promise;
+    }
+
+    done(val?: string) {
+        return super.done(val || this._input.value);
+    }
+
+    renderContent() {
+        return html`
+            <pl-rich-input
+                class="fullbleed"
+                isFullscreen
+                @toggle-fullscreen=${() => this.done(this._input.value)}
+            ></pl-rich-input>
+        `;
+    }
+}

packages/app/src/elements/rich-input.ts

@@ -1,4 +1,4 @@
-import { css, customElement, html, LitElement } from "lit-element";
+import { css, customElement, html, LitElement, property } from "lit-element";
 import { Editor } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { shared, content } from "../styles";
@@ -22,6 +22,9 @@ export class RichInput extends LitElement {
         this._editor.commands.insertContent(html);
     }
 
+    @property({ type: Boolean })
+    isFullscreen = false;
+
     private _editor = new Editor({
         extensions: [StarterKit],
         onTransaction: () => {
@@ -167,8 +170,11 @@ export class RichInput extends LitElement {
 
                 <div class="stretch"></div>
 
-                <pl-button class="transparent slim">
-                    <pl-icon icon="expand"></pl-icon>
+                <pl-button
+                    class="transparent slim"
+                    @click=${() => this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
+                >
+                    <pl-icon icon="${this.isFullscreen ? "collapse" : "expand"}"></pl-icon>
                 </pl-button>
             </div>
             <div class="double-padded container scroller stretch" @click=${(e: Event) => e.stopPropagation()}></div>

packages/app/src/styles/content.ts

@@ -49,6 +49,22 @@ export const content = css`
         margin-bottom: 0;
     }
 
+    ol > li > ol {
+        list-style: lower-roman;
+    }
+
+    ol > li > ol > li > ol {
+        list-style: lower-alpha;
+    }
+
+    ul > li > ul {
+        list-style: circle;
+    }
+
+    ul > li > ul > li > ul {
+        list-style: square;
+    }
+
     ul.plain {
         list-style: none;
         padding: 0;