From 28eae0667a048f2df5ccd9fd635bf1f467777f15 Mon Sep 17 00:00:00 2001 From: BlueGreenMagick Date: Wed, 31 Aug 2022 17:35:01 +0900 Subject: [PATCH 1/5] fix wrong rich-text-widget offset (#2033) .rich-text-input { padding: 6px; } messed up image & mathjax overlay positioning because parent padding isn't added to absolute positioning px --- ts/editor/FieldDescription.svelte | 3 --- ts/editor/rich-text-input/RichTextInput.svelte | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/ts/editor/FieldDescription.svelte b/ts/editor/FieldDescription.svelte index 41f2cd105..40ba2927c 100644 --- a/ts/editor/FieldDescription.svelte +++ b/ts/editor/FieldDescription.svelte @@ -40,9 +40,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html opacity: 0.4; pointer-events: none; - /* same as in ContentEditable */ - padding: 6px; - /* stay a on single line */ overflow-x: hidden; white-space: nowrap; diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte index c04813c95..47be4117a 100644 --- a/ts/editor/rich-text-input/RichTextInput.svelte +++ b/ts/editor/rich-text-input/RichTextInput.svelte @@ -244,7 +244,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte index bd3f1983d..9f903c824 100644 --- a/ts/editor/EditorField.svelte +++ b/ts/editor/EditorField.svelte @@ -14,6 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html direction: "ltr" | "rtl"; plainText: boolean; description: string; + collapsed: boolean; } export interface EditorFieldAPI { @@ -54,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let content: Writable; export let field: FieldData; export let collapsed = false; + export let flipInputs = false; const directionStore = writable<"ltr" | "rtl">(); setContext(directionKey, directionStore); @@ -101,7 +103,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html fontSize={field.fontSize} api={editingArea} > - + {#if flipInputs} + + + {:else} + + + {/if} diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte index 9f942f3ba..7aaa1d01f 100644 --- a/ts/editor/NoteEditor.svelte +++ b/ts/editor/NoteEditor.svelte @@ -66,6 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import PlainTextInput from "./plain-text-input"; import PlainTextBadge from "./PlainTextBadge.svelte"; import RichTextInput, { editingInputIsRichText } from "./rich-text-input"; + import RichTextBadge from "./RichTextBadge.svelte"; function quoteFontFamily(fontFamily: string): string { // generic families (e.g. sans-serif) must not be quoted @@ -113,13 +114,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html fieldNames = newFieldNames; } - let plainTexts: boolean[] = []; + let fieldsCollapsed: boolean[] = []; + export function setCollapsed(fs: boolean[]): void { + fieldsCollapsed = fs; + } + let richTextsHidden: boolean[] = []; let plainTextsHidden: boolean[] = []; + let plainTextDefaults: boolean[] = []; export function setPlainTexts(fs: boolean[]): void { - richTextsHidden = plainTexts = fs; + richTextsHidden = fs; plainTextsHidden = Array.from(fs, (v) => !v); + plainTextDefaults = [...richTextsHidden]; } function setMathjaxEnabled(enabled: boolean): void { @@ -132,13 +139,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } let fonts: [string, number, boolean][] = []; - let fieldsCollapsed: boolean[] = []; const fields = clearableArray(); export function setFonts(fs: [string, number, boolean][]): void { fonts = fs; - fieldsCollapsed = fonts.map((_, index) => fieldsCollapsed[index] ?? false); } export function focusField(index: number | null): void { @@ -186,11 +191,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html $: fieldsData = fieldNames.map((name, index) => ({ name, - plainText: plainTexts[index], + plainText: plainTextDefaults[index], description: fieldDescriptions[index], fontFamily: quoteFontFamily(fonts[index][0]), fontSize: fonts[index][1], direction: fonts[index][2] ? "rtl" : "ltr", + collapsed: fieldsCollapsed[index], })) as FieldData[]; function saveTags({ detail }: CustomEvent): void { @@ -241,6 +247,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { mathjaxConfig } from "../editable/mathjax-element"; import { wrapInternal } from "../lib/wrap"; + import { refocusInput } from "./helpers"; import * as oldEditorAdapter from "./old-editor-adapter"; onMount(() => { @@ -256,6 +263,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html Object.assign(globalThis, { setFields, + setCollapsed, setPlainTexts, setDescriptions, setFonts, @@ -329,6 +337,7 @@ the AddCards dialog) should be implemented in the user of this component. { $focusedField = fields[index]; @@ -357,11 +366,16 @@ the AddCards dialog) should be implemented in the user of this component. on:toggle={async () => { fieldsCollapsed[index] = !fieldsCollapsed[index]; + const defaultInput = !plainTextDefaults[index] + ? richTextInputs[index] + : plainTextInputs[index]; + if (!fieldsCollapsed[index]) { - await tick(); - richTextInputs[index].api.refocus(); - } else { + refocusInput(defaultInput.api); + } else if (!plainTextDefaults[index]) { plainTextsHidden[index] = true; + } else { + richTextsHidden[index] = true; } }} > @@ -374,21 +388,41 @@ the AddCards dialog) should be implemented in the user of this component. {#if cols[index] === "dupe"} {/if} - { - plainTextsHidden[index] = - !plainTextsHidden[index]; + {#if plainTextDefaults[index]} + { + richTextsHidden[index] = + !richTextsHidden[index]; - if (!plainTextsHidden[index]) { - await tick(); - plainTextInputs[index].api.refocus(); - } - }} - /> + if (!richTextsHidden[index]) { + refocusInput( + richTextInputs[index].api, + ); + } + }} + /> + {:else} + { + plainTextsHidden[index] = + !plainTextsHidden[index]; + + if (!plainTextsHidden[index]) { + refocusInput( + plainTextInputs[index].api, + ); + } + }} + /> + {/if} - - + + { saveFieldNow(); $focusedInput = null; @@ -416,10 +450,13 @@ the AddCards dialog) should be implemented in the user of this component. - - + + + { saveFieldNow(); $focusedInput = null; diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte new file mode 100644 index 000000000..180925395 --- /dev/null +++ b/ts/editor/RichTextBadge.svelte @@ -0,0 +1,59 @@ + + + + + {@html richTextIcon} + + + diff --git a/ts/editor/helpers.ts b/ts/editor/helpers.ts index 98fe4f892..53aeee6d4 100644 --- a/ts/editor/helpers.ts +++ b/ts/editor/helpers.ts @@ -1,6 +1,9 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import type { PlainTextInputAPI } from "./plain-text-input"; +import type { RichTextInputAPI } from "./rich-text-input"; + function isFontElement(element: Element): element is HTMLFontElement { return element.tagName === "FONT"; } @@ -19,3 +22,15 @@ export function withFontColor( return false; } + +/*** + * Required for field inputs wrapped in Collapsible + */ +export async function refocusInput( + api: RichTextInputAPI | PlainTextInputAPI, +): Promise { + do { + await new Promise(window.requestAnimationFrame); + } while (!api.focusable); + api.refocus(); +} diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte index 67d4f8049..d3479f418 100644 --- a/ts/editor/plain-text-input/PlainTextInput.svelte +++ b/ts/editor/plain-text-input/PlainTextInput.svelte @@ -39,7 +39,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import removeProhibitedTags from "./remove-prohibited"; import { storedToUndecorated, undecoratedToStored } from "./transform"; + export let isDefault: boolean; export let hidden: boolean; + export let richTextHidden: boolean; const configuration = { mode: htmlanki, @@ -143,6 +145,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
($focusedInput = api)} > .plain-text-input { - overflow-x: hidden; + overflow: hidden; + + border-top: 1px solid var(--border); + border-radius: 0 0 5px 5px; + + &.is-default { + border-top: none; + border-bottom: 1px solid var(--border); + border-radius: 5px 5px 0 0; + } + &.alone { + border: none; + border-radius: 5px; + } :global(.CodeMirror) { - border-radius: 0 0 5px 5px; - border-top: 1px solid var(--border); background: var(--code-bg); } :global(.CodeMirror-lines) {