carta-md
Version:
A lightweight, fully customizable, Markdown editor
64 lines (63 loc) • 2 kB
TypeScript
import type { Carta } from './internal/carta';
import type { TextAreaProps } from './internal/textarea-props';
import { type Labels } from './internal/labels';
interface Props {
/**
* The Carta instance to use.
*/
carta: Carta;
/**
* The theme to use, which translates to the CSS class `carta-theme__{theme}`.
*/
theme?: string;
/**
* The editor content.
*/
value?: string;
/**
* The mode to use. Can be 'tabs', 'split', or 'auto'
* - 'tabs': The input and renderer are displayed in tabs.
* - 'split': The input and renderer are displayed side by side.
* - 'auto': The mode is automatically selected based on the window width.
*/
mode?: 'tabs' | 'split' | 'auto';
/**
* The scroll synchronization mode. Can be 'sync' or 'async'.
* - 'sync': The scroll is synchronized between the input and renderer.
* - 'async': The scroll is not synchronized between the input and renderer.
*/
scroll?: 'sync' | 'async';
/**
* Whether to disable the toolbar.
*/
disableToolbar?: boolean;
/**
* The placeholder text for the textarea.
*/
placeholder?: string;
/**
* Additional textarea properties.
*/
textarea?: TextAreaProps;
/**
* The selected tab. Can be 'write' or 'preview'.
*/
selectedTab?: 'write' | 'preview';
/**
* The labels to use for the editor.
*/
userLabels?: Partial<Labels>;
/**
* Highlight delay in milliseconds.
* @default 250
*/
highlightDelay?: number;
}
/**
* This is the main editor component that combines the input and renderer
* components. It also handles the scroll synchronization between the input and renderer
* components (if set to sync), and the window mode management (tabs or split).
*/
declare const MarkdownEditor: import("svelte").Component<Props, {}, "value">;
type MarkdownEditor = ReturnType<typeof MarkdownEditor>;
export default MarkdownEditor;