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`
-
-
-
- ${this._editor?.isActive("heading", { level: 1 })
- ? html` `
- : this._editor?.isActive("heading", { level: 2 })
- ? html` `
- : this._editor?.isActive("heading", { level: 3 })
- ? html` `
- : html` `}
+
+
+
+
+ ${this._editor?.isActive("heading", { level: 1 })
+ ? html` `
+ : this._editor?.isActive("heading", { level: 2 })
+ ? html` `
+ : this._editor?.isActive("heading", { level: 3 })
+ ? html` `
+ : html` `}
-
-
+
+
-
-
- this._editor.chain().focus().setHeading({ level: 1 }).run()}
- >
-
-
- this._editor.chain().focus().setHeading({ level: 2 }).run()}
- >
-
-
- this._editor.chain().focus().setHeading({ level: 3 }).run()}
- >
-
-
- this._editor.chain().focus().setParagraph().run()}
- >
-
-
-
-
+
+
+ this._editor.chain().focus().setHeading({ level: 1 }).run()}
+ >
+
+
+ this._editor.chain().focus().setHeading({ level: 2 }).run()}
+ >
+
+
+ this._editor.chain().focus().setHeading({ level: 3 }).run()}
+ >
+
+
+ this._editor.chain().focus().setParagraph().run()}
+ >
+
+
+
+
-
+
-
this._editor.chain().focus().toggleBold().run()}
- title="${$l("Bold")}"
- >
-
-
+
this._editor.chain().focus().toggleBold().run()}
+ title="${$l("Bold")}"
+ >
+
+
-
this._editor.chain().focus().toggleItalic().run()}
- title="${$l("Italic")}"
- >
-
-
+
this._editor.chain().focus().toggleItalic().run()}
+ title="${$l("Italic")}"
+ >
+
+
-
this._editor.chain().focus().toggleStrike().run()}
- title="${$l("Strikethrough")}"
- >
-
-
+
this._editor.chain().focus().toggleStrike().run()}
+ title="${$l("Strikethrough")}"
+ >
+
+
-
+
-
this._editor.chain().focus().toggleBulletList().run()}
- title="${$l("Unordered List")}"
- >
-
-
+
this._editor.chain().focus().toggleBulletList().run()}
+ title="${$l("Unordered List")}"
+ >
+
+
-
this._editor.chain().focus().toggleOrderedList().run()}
- title="${$l("Ordered List")}"
- >
-
-
+
this._editor.chain().focus().toggleOrderedList().run()}
+ title="${$l("Ordered List")}"
+ >
+
+
-
this._editor.chain().focus().toggleBlockquote().run()}
- title="${$l("Blockquote")}"
- >
-
-
+
this._editor.chain().focus().toggleBlockquote().run()}
+ title="${$l("Blockquote")}"
+ >
+
+
-
this._editor.chain().focus().toggleCodeBlock().run()}
- title="${$l("Code Block")}"
- >
-
-
+
this._editor.chain().focus().toggleCodeBlock().run()}
+ title="${$l("Code Block")}"
+ >
+
+
-
+
-
this._editor.chain().focus().setHorizontalRule().run()}
- title="${$l("Insert Horizontal Line")}"
- >
-
-
+
this._editor.chain().focus().setHorizontalRule().run()}
+ title="${$l("Insert Horizontal Line")}"
+ >
+
+
+
+
+
+
+
this._toggleMarkdown()}
+ .toggled=${this.mode === "markdown"}
+ >
+ M
+
+
+
+
this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
+ >
+
+
+
-
-
-
-
this._toggleMarkdown()}
- .toggled=${this.mode === "markdown"}
- >
- M
-
-
-
-
this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
- >
-
-
+
e.stopPropagation()}
+ ?hidden=${this.mode !== "wysiwyg"}
+ >
+
-
e.stopPropagation()}
- ?hidden=${this.mode !== "wysiwyg"}
- >
-
`;
}
}
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;
}
`;