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

Fix HTML editor not showing content initially (#2181)

Browse source 
* Fix HTML editor not showing initially

* Remove line numbers from PlainTextInput
This commit is contained in:
Matthias Metelka 2022-11-05 01:58:04 +01:00 committed by GitHub
parent c60a1c8ebd
commit 03fe2385ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ts/components/Collapsible.svelte
View file

@ -11,7 +11,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let toggleDisplay = false; export let toggleDisplay = false;
export let animated = !document.body.classList.contains("reduced-motion"); export let animated = !document.body.classList.contains("reduced-motion");
let collapsed = false;
let contentHeight = 0; let contentHeight = 0;
function dynamicDuration(height: number): number { function dynamicDuration(height: number): number {
@ -56,6 +55,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: height = $size * contentHeight; $: height = $size * contentHeight;
$: transitioning = $size > 0 && !(collapsed || expanded); $: transitioning = $size > 0 && !(collapsed || expanded);
$: measuring = !(collapsed || transitioning || expanded); $: measuring = !(collapsed || transitioning || expanded);
let hidden = collapsed;
$: {
/* await changes dependent on collapsed state */
tick().then(() => (hidden = collapsed));
}
</script> </script>
<div <div
@ -64,9 +70,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:animated class:animated
class:expanded class:expanded
class:full-hide={toggleDisplay} class:full-hide={toggleDisplay}
class:collapsed={!expanded}
class:measuring class:measuring
class:transitioning class:transitioning
class:hidden
style:--height="{height}px" style:--height="{height}px"
> >
<slot {collapsed} /> <slot {collapsed} />
@ -80,7 +86,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
.collapsible.animated { .collapsible.animated {
&.measuring { &.measuring {
display: unset; display: initial;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
} }
@ -94,7 +100,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
&.full-hide { &.full-hide {
&.collapsed { &.hidden {
display: none; display: none;
} }
&.transitioning { &.transitioning {

1
ts/editor/CodeMirror.svelte
View file

@ -34,6 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const defaultConfiguration = { const defaultConfiguration = {
rtlMoveVisually: true, rtlMoveVisually: true,
lineNumbers: false,
}; };
const [editorPromise, resolve] = promiseWithResolver<CodeMirrorLib.Editor>(); const [editorPromise, resolve] = promiseWithResolver<CodeMirrorLib.Editor>();

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

@ -164,10 +164,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
:global(.CodeMirror) { :global(.CodeMirror) {
height: 100%; height: 100%;
background: var(--canvas-code); background: var(--canvas-code);
padding-inline: 4px;
} }
:global(.CodeMirror-lines) { :global(.CodeMirror-lines) {
padding: 8px 0; padding: 8px 0;
} }
:global(.CodeMirror-gutters) {
background: var(--canvas-code);
}
} }
</style> </style>