feat: add textarea property to allow additional textarea properties (…

…#27)
BearToCode · Dec 9, 2023 · 14be70b · 14be70b
2 parents 4075b8a + 661cd13
commit 14be70b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 2 deletions.
diff --git a/docs/src/pages/api/core.svelte.md b/docs/src/pages/api/core.svelte.md
@@ -112,6 +112,14 @@ Type: `string`
 
 Set the textarea placeholder.
 
+### `textarea`
+
+Type: `TextAreaProps` (extends `Record<string, unknown>`)
+
+Additional properties that will be used in the textarea used under the hood in the editor.
+`class`, `placeholder` and `value` are not allowed. Use the corresponding editor properties
+instead.
+
 # `CartaViewer` options
 
 List of options that can be used in the `<CartaViewer>` component.

diff --git a/packages/carta-md/src/lib/CartaEditor.svelte b/packages/carta-md/src/lib/CartaEditor.svelte
@@ -4,6 +4,7 @@
 	import CartaRenderer from './internal/components/CartaRenderer.svelte';
 	import MarkdownInput from './internal/components/MarkdownInput.svelte';
 	import { debounce } from './internal/utils';
+	import type { TextAreaProps } from './internal/textarea-props';
 
 	export let carta: Carta;
 	export let theme = 'default';
@@ -12,6 +13,7 @@
 	export let scroll: 'sync' | 'async' = 'sync';
 	export let disableToolbar = false;
 	export let placeholder = '';
+	export let textarea: TextAreaProps = {};
 
 	let width: number;
 	let selectedTab: 'write' | 'preview' = 'write';
@@ -134,6 +136,7 @@
 					{carta}
 					{placeholder}
 					{handleScroll}
+					props={textarea}
 					bind:value
 					bind:resize={resizeInput}
 					bind:elem={inputElem}

diff --git a/packages/carta-md/src/lib/index.ts b/packages/carta-md/src/lib/index.ts
@@ -6,5 +6,6 @@ export type { KeyboardShortcut } from '$lib/internal/shortcuts';
 export type { Prefix } from '$lib/internal/prefixes';
 export * from '$lib/internal/carta';
 export * from '$lib/internal/highlight';
+export * from '$lib/internal/textarea-props';
 export * from './default.css?inline';
 export * from './light.css?inline';
diff --git a/packages/carta-md/src/lib/internal/components/MarkdownInput.svelte b/packages/carta-md/src/lib/internal/components/MarkdownInput.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	import type { Carta } from '../carta';
 	import { onMount } from 'svelte';
+	import type { Carta } from '../carta';
+	import type { TextAreaProps } from '../textarea-props';
 
 	export let carta: Carta;
 	export let value = '';
 	export let placeholder = '';
 	export let elem: HTMLDivElement;
 	export let handleScroll: (e: UIEvent) => void;
+	export let props: TextAreaProps = {};
 
 	let textarea: HTMLTextAreaElement;
 	let highlighElem: HTMLPreElement;
@@ -62,6 +64,7 @@
 			spellcheck="false"
 			class="carta-font-code"
 			{placeholder}
+			{...props}
 			bind:value
 			bind:this={textarea}
 			on:scroll={() => (textarea.scrollTop = 0)}
@@ -84,7 +87,7 @@
 		font-family: monospace;
 	}
 
-	textarea#md {
+	textarea {
 		position: relative;
 		width: 100%;
 		max-width: 100%;

diff --git a/packages/carta-md/src/lib/internal/textarea-props.ts b/packages/carta-md/src/lib/internal/textarea-props.ts
@@ -0,0 +1,36 @@
+/**
+ * Base props for HTML textarea element.
+ */
+interface BaseTextAreaProps {
+	id?: string;
+	name?: string;
+	spellCheck?: boolean;
+	autoCapitalize?: string;
+	autoComplete?: string;
+	autoFocus?: boolean;
+	dirname?: string;
+	disabled?: boolean;
+	form?: string;
+	maxLength?: number;
+	minLength?: number;
+	required?: boolean;
+	spellcheck?: boolean;
+
+	// Props handled by Carta
+
+	/**
+	 * Bind the value to the Editor instead.
+	 */
+	value?: never;
+	/**
+	 * Use the placeholder property of the Editor instead.
+	 */
+	placeholder?: never;
+	class?: never;
+}
+
+/**
+ * Props for HTML textarea element.
+ */
+export type TextAreaProps<T extends Record<string, unknown> = Record<string, unknown>> =
+	BaseTextAreaProps & T;