GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-22 07:52:24 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Move ImageOverlay to NoteEditor root

Browse source
This commit is contained in:
Henrik Giesel 2022-09-13 23:04:12 +02:00
parent 36eea447d1
commit f25f5d1461
8 changed files with 52 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor/ClozeButtons.svelte
View file

@ -67,7 +67,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
});
}
$: disabled = !editingInputIsRichText($focusedInput);
$: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
const incrementKeyCombination = "Control+Shift+C";
const sameKeyCombination = "Control+Alt+Shift+C";

4
ts/editor/NoteEditor.svelte
View file

@ -57,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import Fields from "./Fields.svelte";
import FrameElement from "./FrameElement.svelte";
import { alertIcon } from "./icons";
import ImageHandle from "./image-overlay";
import ImageOverlay from "./image-overlay";
import MathjaxOverlay from "./mathjax-overlay";
import MathjaxElement from "./MathjaxElement.svelte";
import Notification from "./Notification.svelte";
@ -447,7 +447,6 @@ the AddCards dialog) should be implemented in the user of this component.
}}
bind:this={richTextInputs[index]}
>
<ImageHandle maxWidth={250} maxHeight={125} />
{#if insertSymbols}
<SymbolsOverlay />
{/if}
@ -483,6 +482,7 @@ the AddCards dialog) should be implemented in the user of this component.
</Fields>
<MathjaxOverlay />
<ImageOverlay maxWidth={250} maxHeight={125} />
<div class="note-editor-tag-editor">
<TagEditor {tags} on:tagsupdate={saveTags} />

2
ts/editor/editor-toolbar/BlockButtons.svelte
View file

@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const { focusedInput } = context.get();
$: disabled = !editingInputIsRichText($focusedInput);
$: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
let showFloating = false;
</script>

2
ts/editor/editor-toolbar/CommandIconButton.svelte
View file

@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
execCommand(key);
}
$: disabled = !editingInputIsRichText($focusedInput);
$: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
</script>
{#if withoutState}

2
ts/editor/editor-toolbar/LatexButton.svelte
View file

@ -66,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
[onLatexMathEnv, "Control+T, M", tr.editingLatexMathEnv()],
];
$: disabled = !editingInputIsRichText($focusedInput);
$: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
let showFloating = false;
</script>

12
ts/editor/editor-toolbar/TemplateButtons.svelte
View file

@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { getPlatformString } from "../../lib/shortcuts";
import { context } from "../NoteEditor.svelte";
import { setFormat } from "../old-editor-adapter";
import { editingInputIsRichText } from "../rich-text-input";
import { editingInputIsRichText, RichTextInputAPI } from "../rich-text-input";
import { micIcon, paperclipIcon } from "./icons";
import LatexButton from "./LatexButton.svelte";
@ -35,12 +35,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
function attachMediaOnFocus(): void {
if (!editingInputIsRichText($focusedInput)) {
if (disabled) {
return;
}
[mediaPromise, resolve] = promiseWithResolver<string>();
$focusedInput.editable.focusHandler.focus.on(
($focusedInput as RichTextInputAPI).editable.focusHandler.focus.on(
async () => setFormat("inserthtml", await mediaPromise),
{ once: true },
);
@ -55,12 +55,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const recordCombination = "F5";
function attachRecordingOnFocus(): void {
if (!editingInputIsRichText($focusedInput)) {
if (disabled) {
return;
}
[mediaPromise, resolve] = promiseWithResolver<string>();
$focusedInput.editable.focusHandler.focus.on(
($focusedInput as RichTextInputAPI).editable.focusHandler.focus.on(
async () => setFormat("inserthtml", await mediaPromise),
{ once: true },
);
@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bridgeCommand("record");
}
$: disabled = !editingInputIsRichText($focusedInput);
$: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
export let api = {};
</script>

52
ts/editor/image-overlay/ImageOverlay.svelte
View file

@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { onMount, tick } from "svelte";
import { tick } from "svelte";
import ButtonToolbar from "../../components/ButtonToolbar.svelte";
import Popover from "../../components/Popover.svelte";
@ -12,17 +12,52 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { on } from "../../lib/events";
import * as tr from "../../lib/ftl";
import { removeStyleProperties } from "../../lib/styling";
import type { Callback } from "../../lib/typing";
import type { EditingInputAPI } from "../EditingArea.svelte";
import HandleBackground from "../HandleBackground.svelte";
import HandleControl from "../HandleControl.svelte";
import HandleLabel from "../HandleLabel.svelte";
import { context } from "../rich-text-input";
import { context } from "../NoteEditor.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import {
editingInputIsRichText,
lifecycle as richTextLifecycle,
} from "../rich-text-input";
import FloatButtons from "./FloatButtons.svelte";
import SizeSelect from "./SizeSelect.svelte";
export let maxWidth: number;
export let maxHeight: number;
const { element } = context.get();
richTextLifecycle.onMount(({ element }: RichTextInputAPI): void => {
(async () => {
const container = await element;
container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`);
container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`);
})();
});
const { focusedInput } = context.get();
let cleanup: Callback;
let richTextInput: RichTextInputAPI | null = null;
async function initialize(input: EditingInputAPI | null): Promise<void> {
cleanup?.();
if (!input || !editingInputIsRichText(input)) {
richTextInput = null;
return;
}
const container = await input.element;
cleanup = on(container, "click", maybeShowHandle);
richTextInput = input;
}
$: initialize($focusedInput);
let activeImage: HTMLImageElement | null = null;
@ -101,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: observes = Boolean(activeImage);
async function toggleResizeObserver(observes: boolean) {
const container = await element;
const container = await richTextInput!.element;
if (observes) {
resizeObserver.observe(container);
@ -193,15 +228,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeImage!.removeAttribute("width");
}
onMount(async () => {
const container = await element;
container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`);
container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`);
return on(container, "click", maybeShowHandle);
});
let shrinkingDisabled: boolean;
$: shrinkingDisabled =
Number(actualWidth) <= maxWidth && Number(actualHeight) <= maxHeight;

1
ts/editor/rich-text-input/RichTextInput.svelte
View file

@ -54,6 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
context,
editingInputIsRichText,
globalInputHandler as inputHandler,
lifecycle,
surrounder,
};
</script>