From 8131ea190860e1f633a3bd009a0c6c5ca1af5ee5 Mon Sep 17 00:00:00 2001 From: Damien Elmes Date: Fri, 13 Jan 2023 16:37:49 +1000 Subject: [PATCH 1/2] Fix quotes breaking field descriptions, and prevent content injection https://forums.ankiweb.net/t/some-field-descriptions-are-not-showing/26295 --- ts/editor/NoteEditor.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte index d3ba0f811..da0543417 100644 --- a/ts/editor/NoteEditor.svelte +++ b/ts/editor/NoteEditor.svelte @@ -162,7 +162,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html let fieldDescriptions: string[] = []; export function setDescriptions(descriptions: string[]): void { - fieldDescriptions = descriptions; + fieldDescriptions = descriptions.map((d) => + d.replace(/\\/g, "").replace(/"/g, '\\"'), + ); } let fonts: [string, number, boolean][] = []; From 604e0f46e1b234991488a701801435b8b3fa6692 Mon Sep 17 00:00:00 2001 From: Hikaru Y Date: Fri, 13 Jan 2023 22:18:25 +0900 Subject: [PATCH 2/2] Fix and refactor image size constraints (#2318) * Remove 'ResizableImage.svelte' Rather than having a svelte file that just sets global styles, it's better to set those in a (s)css file. * Fix and refactor image size constraints - Fixes https://forums.ankiweb.net/t/2-1-56-image-size-problem-in-editor/26207 - Use :host-context() to switch image styles instead of toggling CSS variables. * Fix toolbar buttons for image overlay sometimes being cut off --- ts/editable/ResizableImage.svelte | 19 --------- ts/editable/editable-base.scss | 15 +++++++ ts/editable/index.ts | 1 - ts/editor/image-overlay/ImageOverlay.svelte | 44 +++++++-------------- 4 files changed, 29 insertions(+), 50 deletions(-) delete mode 100644 ts/editable/ResizableImage.svelte diff --git a/ts/editable/ResizableImage.svelte b/ts/editable/ResizableImage.svelte deleted file mode 100644 index a95299793..000000000 --- a/ts/editable/ResizableImage.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss index de754052e..54e9ef72c 100644 --- a/ts/editable/editable-base.scss +++ b/ts/editable/editable-base.scss @@ -26,3 +26,18 @@ p { pre { white-space: pre-wrap; } + +// image size constraints +img:not(.mathjax) { + &:not([data-editor-shrink="false"]) { + :host-context(.shrink-image) & { + max-width: var(--editor-default-max-width); + max-height: var(--editor-default-max-height); + } + } + + &[data-editor-shrink="true"] { + max-width: var(--editor-shrink-max-width); + max-height: var(--editor-shrink-max-height); + } +} diff --git a/ts/editable/index.ts b/ts/editable/index.ts index e9fbef038..b44eb6435 100644 --- a/ts/editable/index.ts +++ b/ts/editable/index.ts @@ -5,4 +5,3 @@ import "./editable-base.scss"; /* only imported for the CSS */ import "./ContentEditable.svelte"; import "./Mathjax.svelte"; -import "./ResizableImage.svelte"; diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte index 0178b2609..759e7dca3 100644 --- a/ts/editor/image-overlay/ImageOverlay.svelte +++ b/ts/editor/image-overlay/ImageOverlay.svelte @@ -24,25 +24,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import HandleControl from "../HandleControl.svelte"; import HandleLabel from "../HandleLabel.svelte"; import { context } from "../NoteEditor.svelte"; - import type { RichTextInputAPI } from "../rich-text-input"; - import { - editingInputIsRichText, - lifecycle as richTextLifecycle, - } from "../rich-text-input"; + import { editingInputIsRichText } from "../rich-text-input"; import FloatButtons from "./FloatButtons.svelte"; import SizeSelect from "./SizeSelect.svelte"; export let maxWidth: number; export let maxHeight: number; - richTextLifecycle.onMount(({ element }: RichTextInputAPI): void => { - (async () => { - const container = await element; + (<[string, number][]>[ + ["--editor-shrink-max-width", maxWidth], + ["--editor-shrink-max-height", maxHeight], + ["--editor-default-max-width", maxWidth], + ["--editor-default-max-height", maxHeight], + ]).forEach(([prop, value]) => + document.documentElement.style.setProperty(prop, `${value}px`), + ); - container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`); - container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`); - })(); - }); + $: document.documentElement.classList.toggle( + "shrink-image", + $shrinkImagesByDefault, + ); const { focusedInput } = context.get(); @@ -83,24 +84,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } - $: { - if ($shrinkImagesByDefault) { - document.documentElement.style.setProperty( - "--editor-default-max-width", - `${maxWidth}px`, - ); - document.documentElement.style.setProperty( - "--editor-default-max-height", - `${maxHeight}px`, - ); - } else { - document.documentElement.style.removeProperty("--editor-default-max-width"); - document.documentElement.style.removeProperty( - "--editor-default-max-height", - ); - } - } - async function resetHandle(): Promise { activeImage = null; await tick(); @@ -265,6 +248,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html offset={20} inline hideIfReferenceHidden + portalTarget={document.body} let:position={positionFloating} on:close={async ({ detail }) => { const { reason, originalEvent } = detail;