Make sure editors are scrollable in fullscreen mode
This commit is contained in:
Martin Kleinschrodt
parent
b64ae60886
commit
26b72d7d4f
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue