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

Make Collapsible unmount the component

Browse source
This commit is contained in:
Henrik Giesel 2022-09-14 01:52:16 +02:00
parent 0bf9294ad4
commit 52722065ea
3 changed files with 14 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ts/components/Collapsible.svelte
View file

@ -50,6 +50,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<div bind:this={collapsibleElement} class="collapsible" bind:clientHeight> {#if !collapsed}
<slot {collapsed} /> <div bind:this={collapsibleElement} class="collapsible" bind:clientHeight>
</div> <slot />
</div>
{/if}

12
ts/editor/NoteEditor.svelte
View file

@ -435,12 +435,8 @@ the AddCards dialog) should be implemented in the user of this component.
</LabelContainer> </LabelContainer>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="rich-text-input"> <svelte:fragment slot="rich-text-input">
<Collapsible <Collapsible collapse={richTextsHidden[index]}>
collapse={richTextsHidden[index]}
let:collapsed={hidden}
>
<RichTextInput <RichTextInput
{hidden}
on:focusout={() => { on:focusout={() => {
saveFieldNow(); saveFieldNow();
$focusedInput = null; $focusedInput = null;
@ -454,12 +450,8 @@ the AddCards dialog) should be implemented in the user of this component.
</Collapsible> </Collapsible>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="plain-text-input"> <svelte:fragment slot="plain-text-input">
<Collapsible <Collapsible collapse={plainTextsHidden[index]}>
collapse={plainTextsHidden[index]}
let:collapsed={hidden}
>
<PlainTextInput <PlainTextInput
{hidden}
on:focusout={() => { on:focusout={() => {
saveFieldNow(); saveFieldNow();
$focusedInput = null; $focusedInput = null;

43
ts/editor/plain-text-input/PlainTextInput.svelte
View file

@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<script lang="ts"> <script lang="ts">
import { onMount, tick } from "svelte"; import { onMount } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import { singleCallback } from "../../lib/typing"; import { singleCallback } from "../../lib/typing";
@ -39,8 +39,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import removeProhibitedTags from "./remove-prohibited"; import removeProhibitedTags from "./remove-prohibited";
import { storedToUndecorated, undecoratedToStored } from "./transform"; import { storedToUndecorated, undecoratedToStored } from "./transform";
export let hidden = false;
const configuration = { const configuration = {
mode: htmlanki, mode: htmlanki,
...baseOptions, ...baseOptions,
@ -71,11 +69,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
moveCaretToEnd(); moveCaretToEnd();
} }
function toggle(): boolean {
hidden = !hidden;
return hidden;
}
async function getInputAPI(target: EventTarget): Promise<FocusableInputAPI | null> { async function getInputAPI(target: EventTarget): Promise<FocusableInputAPI | null> {
const editor = (await codeMirror.editor) as any; const editor = (await codeMirror.editor) as any;
@ -89,32 +82,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const api: PlainTextInputAPI = { export const api: PlainTextInputAPI = {
name: "plain-text", name: "plain-text",
focus, focus,
focusable: !hidden,
moveCaretToEnd, moveCaretToEnd,
refocus, refocus,
toggle, focusable: true,
toggle() {
return true;
},
getInputAPI, getInputAPI,
codeMirror, codeMirror,
}; };
/**
* Communicate to editing area that input is not focusable
*/
function pushUpdate(isFocusable: boolean): void {
api.focusable = isFocusable;
$editingInputs = $editingInputs;
}
async function refresh(): Promise<void> {
const editor = await codeMirror.editor;
editor.refresh();
}
$: {
pushUpdate(!hidden);
tick().then(refresh);
}
function onChange({ detail: html }: CustomEvent<string>): void { function onChange({ detail: html }: CustomEvent<string>): void {
code.set(removeProhibitedTags(html)); code.set(removeProhibitedTags(html));
} }
@ -134,6 +111,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
code.subscribe((html: string): void => code.subscribe((html: string): void =>
content.set(undecoratedToStored(html)), content.set(undecoratedToStored(html)),
), ),
() => $editingInputs.splice($editingInputs.indexOf(api), 1),
); );
}); });
@ -144,15 +122,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="plain-text-input" class="plain-text-input"
class:light-theme={!$pageTheme.isDark} class:light-theme={!$pageTheme.isDark}
on:focusin={() => ($focusedInput = api)} on:focusin={() => ($focusedInput = api)}
{hidden}
> >
<CodeMirror <CodeMirror {configuration} {code} bind:api={codeMirror} on:change={onChange} />
{configuration}
{code}
{hidden}
bind:api={codeMirror}
on:change={onChange}
/>
</div> </div>
<style lang="scss"> <style lang="scss">