# Plain Text Editor

## Example

```svelte
<script lang="ts">
	import { Box } from '@foxui/all';
	import { PlainTextEditor } from '@foxui/all';

	let content = $state('');
</script>

<Box class="not-prose text-lg font-semibold">
	<PlainTextEditor bind:content placeholder="Write something..." />
</Box>
```

## Documentation

## Usage

```svelte
<script lang="ts">
	import { PlainTextEditor } from '@foxui/text';

	let content = $state('');
</script>

<PlainTextEditor bind:content placeholder="Write something..." />
```

## Sources

Based on "TipTap" (https://tiptap.dev/)

## API Reference

### PlainTextEditor
A plain text editor powered by TipTap, with optional single-line mode.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| content | `Content` | `''` | The editor content (TipTap Content type). (bindable) |
| placeholder | `string` | `''` | Placeholder text. |
| allowMultiline | `boolean` | `false` | Whether to allow multiple lines of text. |
| editor | `Editor` | `-` | The TipTap Editor instance. (bindable) |
| onupdate | `(value: string) => void` | `-` | Callback invoked when the text content changes. |
| ontransaction | `() => void` | `-` | Callback invoked on every TipTap transaction. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |