7164723a7a
* Fix shortcut not being unregistered when Plain/RichTextBadge is detroyed This fixes an issue where, if the "Show HTML by default" option of fields located at the same position in two notetypes have different values, switching between those notetypes during an editor session would cause the keyboard shortcut (Ctrl+Shift+X) to no longer function correctly thereafter. * Don't restore fields' state if notetype has been modified This fixes an issue where editor fields behave incorrectly after opening the 'Fields' dialog and customizing the notetype. An example of incorrect behavior is that after adding a new field and closing the dialog, the added field would display both richtext input and plaintext input, regardless of the options. * Rename type, variable and function - Apply suggestions from code review - Also use optional chaining instead of non-null assertion
66 lines
1.6 KiB
Svelte
66 lines
1.6 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import * as tr from "@tslib/ftl";
|
|
import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
|
|
import { createEventDispatcher, onDestroy } from "svelte";
|
|
|
|
import Badge from "../components/Badge.svelte";
|
|
import { context as editorFieldContext } from "./EditorField.svelte";
|
|
import { richTextIcon } from "./icons";
|
|
|
|
const animated = !document.body.classList.contains("reduce-motion");
|
|
|
|
const editorField = editorFieldContext.get();
|
|
const keyCombination = "Control+Shift+X";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let show = false;
|
|
export let off = false;
|
|
|
|
function toggle() {
|
|
dispatch("toggle");
|
|
}
|
|
|
|
let unregister: ReturnType<typeof registerShortcut> | undefined;
|
|
|
|
editorField.element.then((target) => {
|
|
unregister = registerShortcut(toggle, keyCombination, { target });
|
|
});
|
|
|
|
onDestroy(() => unregister?.());
|
|
</script>
|
|
|
|
<span
|
|
class="plain-text-badge"
|
|
class:visible={show || !animated}
|
|
class:highlighted={!off}
|
|
on:click|stopPropagation={toggle}
|
|
>
|
|
<Badge
|
|
tooltip="{tr.editingToggleVisualEditor()} ({getPlatformString(keyCombination)})"
|
|
iconSize={80}
|
|
>
|
|
{@html richTextIcon}
|
|
</Badge>
|
|
</span>
|
|
|
|
<style lang="scss">
|
|
span {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
|
|
&.visible {
|
|
opacity: 0.4;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
&.highlighted {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|