From 4089e768000bcde92d385b87c5e3e93939f89a31 Mon Sep 17 00:00:00 2001 From: Damien Elmes Date: Mon, 26 Sep 2022 09:47:50 +1000 Subject: [PATCH] Add option to shrink editor images by default (#2071) + Don't persist shrinking toggle Closes #1894 --- ftl/core/editing.ftl | 1 + qt/aqt/editor.py | 9 ++++ ts/.eslintrc.js | 1 + ts/editable/ResizableImage.svelte | 16 ++++-- ts/editor/NoteEditor.svelte | 23 ++++++++- ts/editor/editor-toolbar/EditorToolbar.svelte | 5 ++ ts/editor/editor-toolbar/OptionsButton.svelte | 49 ++++++++++++++++++ ts/editor/editor-toolbar/icons.ts | 1 + ts/editor/image-overlay/ImageOverlay.svelte | 51 ++++++++++++++++--- 9 files changed, 142 insertions(+), 14 deletions(-) create mode 100644 ts/editor/editor-toolbar/OptionsButton.svelte diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl index f5bccd201..04b31b86b 100644 --- a/ftl/core/editing.ftl +++ b/ftl/core/editing.ftl @@ -61,6 +61,7 @@ editing-underline-text = Underline text editing-unordered-list = Unordered list editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze. editing-toggle-mathjax-rendering = Toggle MathJax Rendering +editing-shrink-images = Shrink Images ## You don't need to translate these strings, as they will be replaced with different ones soon. diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 64c9d007e..d386dd1b2 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -534,6 +534,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too setColorButtons({}); setTags({}); setMathjaxEnabled({}); + setShrinkImages({}); """.format( json.dumps(data), json.dumps(collapsed), @@ -545,6 +546,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too json.dumps([text_color, highlight_color]), json.dumps(self.note.tags), json.dumps(self.mw.col.get_config("renderMathjax", True)), + json.dumps(self.mw.col.get_config("shrinkEditorImages", True)), ) if self.addMode: @@ -1159,6 +1161,12 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too self.setupWeb() self.loadNoteKeepingFocus() + def toggleShrinkImages(self) -> None: + self.mw.col.set_config( + "shrinkEditorImages", + not self.mw.col.get_config("shrinkEditorImages", True), + ) + # Links from HTML ###################################################################### @@ -1186,6 +1194,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too mathjaxBlock=Editor.insertMathjaxBlock, mathjaxChemistry=Editor.insertMathjaxChemistry, toggleMathjax=Editor.toggleMathjax, + toggleShrinkImages=Editor.toggleShrinkImages, ) diff --git a/ts/.eslintrc.js b/ts/.eslintrc.js index 1b9095107..7bd2042cb 100644 --- a/ts/.eslintrc.js +++ b/ts/.eslintrc.js @@ -14,6 +14,7 @@ module.exports = { "warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }, ], + "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }], "import/newline-after-import": "warn", "import/no-useless-path-segments": "warn", "simple-import-sort/imports": "warn", diff --git a/ts/editable/ResizableImage.svelte b/ts/editable/ResizableImage.svelte index 36b06871b..ea78f3a87 100644 --- a/ts/editable/ResizableImage.svelte +++ b/ts/editable/ResizableImage.svelte @@ -3,9 +3,17 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte index 8d77f780f..bd8ed5029 100644 --- a/ts/editor/NoteEditor.svelte +++ b/ts/editor/NoteEditor.svelte @@ -58,6 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import FrameElement from "./FrameElement.svelte"; import { alertIcon } from "./icons"; import ImageHandle from "./image-overlay"; + import { shrinkImagesByDefault } from "./image-overlay/ImageOverlay.svelte"; import MathjaxHandle from "./mathjax-overlay"; import MathjaxElement from "./MathjaxElement.svelte"; import Notification from "./Notification.svelte"; @@ -210,9 +211,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html const fieldSave = new ChangeTimer(); + function transformContentBeforeSave(content: string): string { + return content.replace(/ data-editor-shrink="(true|false)"/g, ""); + } + function updateField(index: number, content: string): void { fieldSave.schedule( - () => bridgeCommand(`key:${index}:${getNoteId()}:${content}`), + () => + bridgeCommand( + `key:${index}:${getNoteId()}:${transformContentBeforeSave( + content, + )}`, + ), 600, ); } @@ -250,6 +260,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html const toolbar: Partial = {}; + function setShrinkImages(shrinkByDefault: boolean) { + $shrinkImagesByDefault = shrinkByDefault; + } + import { mathjaxConfig } from "../editable/mathjax-element"; import { wrapInternal } from "../lib/wrap"; import { refocusInput } from "./helpers"; @@ -283,6 +297,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html wrap, setMathjaxEnabled, setInsertSymbolsEnabled, + setShrinkImages, ...oldEditorAdapter, }); @@ -350,7 +365,11 @@ the AddCards dialog) should be implemented in the user of this component. }} on:focusout={() => { $focusedField = null; - bridgeCommand(`blur:${index}:${getNoteId()}:${get(content)}`); + bridgeCommand( + `blur:${index}:${getNoteId()}:${transformContentBeforeSave( + get(content), + )}`, + ); }} on:mouseenter={() => { $hoveredField = fields[index]; diff --git a/ts/editor/editor-toolbar/EditorToolbar.svelte b/ts/editor/editor-toolbar/EditorToolbar.svelte index 16023a7b5..09ab00ecf 100644 --- a/ts/editor/editor-toolbar/EditorToolbar.svelte +++ b/ts/editor/editor-toolbar/EditorToolbar.svelte @@ -56,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import BlockButtons from "./BlockButtons.svelte"; import InlineButtons from "./InlineButtons.svelte"; import NotetypeButtons from "./NotetypeButtons.svelte"; + import OptionsButton from "./OptionsButton.svelte"; import RichTextClozeButtons from "./RichTextClozeButtons.svelte"; import TemplateButtons from "./TemplateButtons.svelte"; @@ -108,6 +109,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + + + + diff --git a/ts/editor/editor-toolbar/OptionsButton.svelte b/ts/editor/editor-toolbar/OptionsButton.svelte new file mode 100644 index 000000000..83bb1b2ee --- /dev/null +++ b/ts/editor/editor-toolbar/OptionsButton.svelte @@ -0,0 +1,49 @@ + + + + (showFloating = false)} + let:asReference +> + + (showFloating = !showFloating)} + > + {@html cogIcon} + + + + + + + {tr.editingShrinkImages()} + + + diff --git a/ts/editor/editor-toolbar/icons.ts b/ts/editor/editor-toolbar/icons.ts index e47fde20c..159712b75 100644 --- a/ts/editor/editor-toolbar/icons.ts +++ b/ts/editor/editor-toolbar/icons.ts @@ -3,6 +3,7 @@ /// +export { default as cogIcon } from "@mdi/svg/svg/cog.svg"; export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg"; export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg"; export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg"; diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte index 901ec3b93..918743534 100644 --- a/ts/editor/image-overlay/ImageOverlay.svelte +++ b/ts/editor/image-overlay/ImageOverlay.svelte @@ -2,6 +2,12 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> + +