fix: use display:none instead of conditional rendering

fix #111
BearToCode · Aug 21, 2024 · 2df3327 · 2df3327
1 parent 02bc2da
commit 2df3327
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 47 deletions.
diff --git a/packages/carta-md/src/lib/MarkdownEditor.svelte b/packages/carta-md/src/lib/MarkdownEditor.svelte
@@ -167,48 +167,46 @@
 
 	<div class="carta-wrapper">
 		<div class="carta-container mode-{windowMode}">
-			{#if windowMode == 'split' || selectedTab == 'write'}
-				<Input
-					{carta}
-					{placeholder}
-					props={textarea}
-					bind:value
-					bind:resize={resizeInput}
-					bind:elem={inputElem}
-					on:scroll={handleScroll}
-				>
-					<!-- Input extensions components -->
-					{#if mounted}
-						{#each carta.components.filter(({ parent }) => [parent]
-								.flat()
-								.includes('input')) as { component, props }}
-							<svelte:component this={component} {carta} {...props} />
-						{/each}
-					{/if}
-				</Input>
-			{/if}
-			{#if windowMode == 'split' || selectedTab == 'preview'}
-				<Renderer
-					{carta}
-					{value}
-					bind:elem={rendererElem}
-					on:scroll={handleScroll}
-					on:render={() => {
-						if (windowMode != 'split') return;
-						if (scroll != 'sync') return;
-						synchronizeScroll(inputElem, rendererElem);
-					}}
-				>
-					<!-- Renderer extensions components -->
-					{#if mounted}
-						{#each carta.components.filter(({ parent }) => [parent]
-								.flat()
-								.includes('renderer')) as { component, props }}
-							<svelte:component this={component} {carta} {...props} />
-						{/each}
-					{/if}
-				</Renderer>
-			{/if}
+			<Input
+				{carta}
+				{placeholder}
+				props={textarea}
+				hidden={!(windowMode == 'split' || selectedTab == 'write')}
+				bind:value
+				bind:resize={resizeInput}
+				bind:elem={inputElem}
+				on:scroll={handleScroll}
+			>
+				<!-- Input extensions components -->
+				{#if mounted}
+					{#each carta.components.filter(({ parent }) => [parent]
+							.flat()
+							.includes('input')) as { component, props }}
+						<svelte:component this={component} {carta} {...props} />
+					{/each}
+				{/if}
+			</Input>
+			<Renderer
+				{carta}
+				{value}
+				hidden={!(windowMode == 'split' || selectedTab == 'preview')}
+				bind:elem={rendererElem}
+				on:scroll={handleScroll}
+				on:render={() => {
+					if (windowMode != 'split') return;
+					if (scroll != 'sync') return;
+					synchronizeScroll(inputElem, rendererElem);
+				}}
+			>
+				<!-- Renderer extensions components -->
+				{#if mounted}
+					{#each carta.components.filter(({ parent }) => [parent]
+							.flat()
+							.includes('renderer')) as { component, props }}
+						<svelte:component this={component} {carta} {...props} />
+					{/each}
+				{/if}
+			</Renderer>
 		</div>
 	</div>
 

diff --git a/packages/carta-md/src/lib/internal/components/Input.svelte b/packages/carta-md/src/lib/internal/components/Input.svelte
@@ -32,6 +32,10 @@
 	 * Additional textarea properties.
 	 */
 	export let props: TextAreaProps = {};
+	/**
+	 * Whether this component is hidden (display: none).
+	 */
+	export let hidden = false;
 
 	let textarea: HTMLTextAreaElement;
 	let highlightElem: HTMLDivElement;
@@ -150,16 +154,17 @@
 	});
 </script>
 
-<div role="tooltip" id="editor-unfocus-suggestion">
+<div role="tooltip" id="editor-unfocus-suggestion" style="display: {hidden ? 'none' : 'unset'};">
 	Press ESC then TAB to move the focus off the field
 </div>
 <div
-	on:click={focus}
-	on:keydown={focus}
-	on:scroll
 	role="textbox"
 	tabindex="-1"
 	class="carta-input"
+	style="display: {hidden ? 'none' : 'unset'};"
+	on:click={focus}
+	on:keydown={focus}
+	on:scroll
 	bind:this={elem}
 >
 	<div class="carta-input-wrapper" bind:this={wrapperElem}>

diff --git a/packages/carta-md/src/lib/internal/components/Renderer.svelte b/packages/carta-md/src/lib/internal/components/Renderer.svelte
@@ -21,6 +21,10 @@
 	 * The element that wraps the rendered HTML.
 	 */
 	export let elem: HTMLDivElement;
+	/**
+	 * Whether this component is hidden (display: none).
+	 */
+	export let hidden = false;
 
 	let mounted = false;
 	let renderedHtml = carta.renderSSR(value);
@@ -48,7 +52,12 @@
 	const events = createEventDispatcher<{ render: void }>();
 </script>
 
-<div bind:this={elem} on:scroll class="carta-renderer markdown-body">
+<div
+	class="carta-renderer markdown-body"
+	style="display: {hidden ? 'none' : 'unset'};"
+	bind:this={elem}
+	on:scroll
+>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html renderedHtml}
 	{#if mounted}