### Install Edra with Headless UI

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Use this command to initialize Edra with the headless UI flavor. It copies the Edra component and installs dependencies.

```sh
npx edra@next init headless
```

```sh
pnpm dlx edra@next init headless
```

```sh
bunx edra@next init headless
```

--------------------------------

### Install Edra with shadcn UI

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Use this command to initialize Edra with the shadcn UI flavor after setting up prerequisites. It copies the Edra component and installs dependencies.

```sh
npx edra@next init shadcn
```

```sh
pnpm dlx edra@next init shadcn
```

```sh
bunx edra@next init shadcn
```

--------------------------------

### Install shadcn-svelte Components

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Add necessary shadcn-svelte components to your project before initializing Edra with the shadcn UI flavor. This command installs multiple components at once.

```sh
npx shadcn-svelte add button command dropdown-menu input popover separator tabs textarea tooltip sonner
```

```sh
pnpm dlx shadcn-svelte add button command dropdown-menu input popover separator tabs textarea tooltip sonner
```

```sh
bunx shadcn-svelte add button command dropdown-menu input popover separator tabs textarea tooltip sonner
```

--------------------------------

### Basic Shadcn Edra Editor Setup

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

A simple Svelte component setup using Shadcn UI components for Edra editor, toolbar, and drag handle. Ensure an editor instance is created before using EdraToolBar or EdraBubbleMenu.

```svelte
<script lang="ts">
	import type { Content, Editor } from '@tiptap/core';
	import { EdraEditor, EdraToolBar, EdraDragHandleExtended } from '$lib/components/edra/shadcn';

	// Editor states
	let content = $state<Content>();
	let editor = $state<Editor>();

	function onUpdate() {
		content = editor?.getJSON();
	}
</script>

<div class="py-4 text-center text-xl font-bold">Shadcn Example
	<div class="bg-background z-50 mt-12 size-full max-w-5xl rounded-md border border-dashed">
		{#if editor && !editor.isDestroyed}
			<EdraToolBar
				class="bg-secondary/50 flex w-full items-center overflow-x-auto border-b border-dashed p-0.5"
				{editor}
			/>
			<EdraDragHandleExtended {editor} />
		{/if}
		<EdraEditor
			bind:editor
			{content}
			class="h-120 max-h-screen overflow-y-scroll pr-2 pl-6"
			{onUpdate}
		/>
	</div>
</div>

```

--------------------------------

### Set Maximum Image Paste Size

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Configure the maximum size for pasted images in the editor. This example sets the limit to 3 MB.

```typescript
editor.setOptions({
	editorProps: {
		// maximum 3 MBs
		handlePaste: getHandlePaste(editor, 3)
	}
});
```

--------------------------------

### Get HTML Output from Editor

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Retrieve the editor's content as HTML within the `onUpdate` callback by calling the `getHTML()` method. This is suitable for displaying content in web pages.

```typescript
function onUpdate() {
	const myOutput = editor?.getHTML();
	// save the output in your preferred way
	saveContent(myOutput);
}
```

--------------------------------

### Get JSON Output from Editor

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Use the `onUpdate` callback to retrieve the editor's content as JSON using the `getJSON()` method. This is useful for saving or processing structured content.

```typescript
function onUpdate() {
	const myOutput = editor?.getJSON();
	// save the output in your preferred way
	saveContent(myOutput);
}
```

--------------------------------

### Configure Link Behavior

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Configure how links behave in the editor, such as opening on click and autolinking. You can also set default protocols and HTML attributes for links.

```svelte
Link.configure({
	openOnClick: true,
	openOnClick: false,
	autolink: true,
	defaultProtocol: 'https',
	HTMLAttributes: {
		target: '_blank',
		rel: 'noopener noreferrer'
	}
})
```

--------------------------------

### Registering Drag Handle Plugin

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

This snippet shows how to register the DragHandlePlugin with custom configurations like width, scroll threshold, and drag handle selector. It also includes an onMouseMove callback to track hovered nodes and their positions.

```svelte
<script lang="ts">
	let currentNode: Node | null = $state(null);
	let currentNodePos: number = $state(-1);
	let open = $state(false);

	const pluginKey = 'globalDragHandle';

	onMount(() => {
		const plugin = DragHandlePlugin({
			pluginKey: pluginKey,
			dragHandleWidth: 55,
			scrollTreshold: 100,
			dragHandleSelector: '.drag-handle',
			excludedTags: ['pre', 'code', 'table p'],
			customNodes: [],
			onMouseMove: onMouseMove
		});
		editor.registerPlugin(plugin);
		return () => editor.unregisterPlugin(pluginKey);
	});

	onMouseMove = (data: { node: Node; pos: number }) => {
		if (data.node) currentNode = data.node;
		currentNodePos = data.pos;
	};
</script>
```

--------------------------------

### Edra Editor Props for File Handling

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Defines the `onFileSelect` and `onDropOrPaste` callbacks within the `EdraEditorProps` interface. These are used for handling file uploads and processing dropped or pasted files.

```typescript
export interface EdraEditorProps {
	/**
	 * Initial content to be set for editor
	 */
	content?: Content;
	/**
	 * Initial State of the editor
	 */
	editable?: boolean;
	/**
	 * Bindable editor instance
	 */
	editor?: Editor;
	/**
	 * Bindable Editor HTMLElement instance
	 */
	element?: HTMLElement;
	/**
	 * Let's editor have auto focus when Initialed
	 */
	autofocus?: boolean;
	/**
	 * Call back when editor content changes
	 * @returns
	 */
	onUpdate?: () => void;
	/**
	 * Optional class for editor
	 */
	class?: string;
	/**
	 * Should spell check be done
	 */
	spellcheck?: boolean;
	/**
	 * Use this to upload or process a file once it's selected returning final file source.
	 * Usefull when you want user to upload a file from system, upload it and set the final path as content source
	 * @param file Current File Path from System
	 * @returns Promise<string> - Final Path of file
	 */
	onFileSelect?: (file: string) => Promise<string>;
	/**
	 * Runs when a file is dropped or pasted on editor returning final file source.
	 * Usefull when you want user to Drop a file on editor, process and(or) upload it
	 * and set the final path as content source
	 * @param file File
	 * @returns finalPath string
	 */
	onDropOrPaste?: (file: File) => Promise<string>;
}
```

--------------------------------

### EdraToolbar Component Props

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Defines the properties for the Edra toolbar component, allowing customization of displayed commands and editor instance binding.

```typescript
export interface EdraToolbarProps {
	editor: Editor;
	class?: string;
	excludedCommands?: string[];
	children?: Snippet<[]>;
}
```

--------------------------------

### EdraEditor Component Props

Source: https://github.com/tsuzat/edra/blob/next/src/routes/docs/+page.svx

Defines the properties for the main Edra editor component, including content, editability, and event handlers.

```typescript
/**
 * Props for Edra's editor component
 */
export interface EdraEditorProps {
	content?: Content;
	editable?: boolean;
	editor?: Editor;
	element?: HTMLElement;
	autofocus?: boolean;
	onUpdate?: () => void;
	class?: string;
	spellcheck?: boolean;
	onFileSelect?: (file: string) => Promise<string>;
	onDropOrPaste?: (file: File) => Promise<string>;
	getAssets?: (fileType: FileType) => Promise<string[]>;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.