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

Add field description directly in NoteEditor

Browse source
This commit is contained in:
Henrik Giesel 2022-08-01 01:52:34 +02:00
parent 3eb8a6ce9d
commit 2c91917e4a
2 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/editor/FieldDescription.svelte Normal file
View file

@ -0,0 +1,22 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<div class="field-description">
<slot />
</div>
<style>
.field-description {
opacity: 0.4;
cursor: text;
/* same as in ContentEditable */
padding: 6px;
/* stay a on single line */
position: absolute;
max-width: 95%;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

4
ts/editor/NoteEditor.svelte
View file

@ -49,6 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { EditorToolbar } from "./editor-toolbar"; import { EditorToolbar } from "./editor-toolbar";
import type { FieldData } from "./EditorField.svelte"; import type { FieldData } from "./EditorField.svelte";
import EditorField from "./EditorField.svelte"; import EditorField from "./EditorField.svelte";
import FieldDescription from "./FieldDescription.svelte";
import Fields from "./Fields.svelte"; import Fields from "./Fields.svelte";
import FieldsEditor from "./FieldsEditor.svelte"; import FieldsEditor from "./FieldsEditor.svelte";
import FrameElement from "./FrameElement.svelte"; import FrameElement from "./FrameElement.svelte";
@ -361,6 +362,9 @@ the AddCards dialog) should be implemented in the user of this component.
> >
<ImageHandle maxWidth={250} maxHeight={125} /> <ImageHandle maxWidth={250} maxHeight={125} />
<MathjaxHandle /> <MathjaxHandle />
<FieldDescription>
{fieldDescriptions[index]}
</FieldDescription>
</RichTextInput> </RichTextInput>
<PlainTextInput <PlainTextInput