feat: add custom labels support (#23)

* feat: add custom labels
* build: pin prettier to v3.1.0

docs/src/pages/api/core.svelte.md

@@ -66,6 +66,12 @@ Type: `(html: string) => void`
 
 HTML sanitizer. See [here]({base}/getting-started#sanitization) for more details.
 
+### `labels`
+
+Type: `Partial<CartaLabels>`
+
+Can be used to provide custom text for labels in the editor.
+
 # `CartaEditor` options
 
 List of options that can be used in the `<CartaEditor>` component.

package.json

@@ -31,7 +31,7 @@
 		"husky": "^8.0.3",
 		"lint-staged": "^13.2.2",
 		"ora": "^6.3.0",
-		"prettier": "^3.1.0",
+		"prettier": "3.1.0",
 		"prettier-plugin-svelte": "^3.1.0",
 		"prettier-plugin-tailwindcss": "^0.5.7",
 		"semantic-release": "^20.1.3",

packages/carta-md/src/lib/CartaEditor.svelte

@@ -5,6 +5,7 @@
 	import MarkdownInput from './internal/components/MarkdownInput.svelte';
 	import { debounce } from './internal/utils';
 	import type { TextAreaProps } from './internal/textarea-props';
+	import { DefaultCartaLabels, type CartaLabels } from './internal/labels';
 
 	export let carta: Carta;
 	export let theme = 'default';
@@ -15,6 +16,13 @@
 	export let placeholder = '';
 	export let textarea: TextAreaProps = {};
 
+	let userLabels: Partial<CartaLabels> = {};
+	export { userLabels as labels };
+	const labels: CartaLabels = {
+		...DefaultCartaLabels,
+		...userLabels
+	};
+
 	let width: number;
 	let selectedTab: 'write' | 'preview' = 'write';
 	let windowMode: 'tabs' | 'split';
@@ -99,14 +107,14 @@
 						on:click={() => (selectedTab = 'write')}
 						class={selectedTab === 'write' ? 'carta-active' : ''}
 					>
-						Write
+						{labels.writeTab}
 					</button>
 					<button
 						type="button"
 						on:click={() => (selectedTab = 'preview')}
 						class={selectedTab === 'preview' ? 'carta-active' : ''}
 					>
-						Preview
+						{labels.previewTab}
 					</button>
 				{/if}
 			</div>

packages/carta-md/src/lib/index.ts

@@ -7,5 +7,6 @@ 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 '$lib/internal/labels';
 export * from './default.css?inline';
 export * from './light.css?inline';

packages/carta-md/src/lib/internal/labels.ts

@@ -0,0 +1,12 @@
+/**
+ * Labels that may appear in the editor.
+ */
+export interface CartaLabels {
+	writeTab: string;
+	previewTab: string;
+}
+
+export const DefaultCartaLabels: CartaLabels = {
+	writeTab: 'Write',
+	previewTab: 'Preview'
+};