### Initialize CommonMark Preset

Source: https://context7.com/milkdown/awesome/llms.txt

Enables standard markdown parsing and rendering support.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';

const editor = await Editor.make()
  .use(commonmark)
  .create();
```

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

### Enable Split Editing with @milkdown-lab/plugin-split-editing

Source: https://context7.com/milkdown/awesome/llms.txt

Adds a split view mode to display markdown source and rendered preview side-by-side. Requires importing the `splitEditing` plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { splitEditing } from '@milkdown-lab/plugin-split-editing';

const editor = await Editor.make()
  .use(commonmark)
  .use(splitEditing)
  .create();
```

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

### Initialize GFM Preset

Source: https://context7.com/milkdown/awesome/llms.txt

Adds support for GitHub Flavored Markdown features like tables and task lists.

```javascript
import { Editor } from '@milkdown/core';
import { gfm } from '@milkdown/preset-gfm';

const editor = await Editor.make()
  .use(gfm)
  .create();
```

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

### Enable Clipboard Support

Source: https://context7.com/milkdown/awesome/llms.txt

Preserves markdown formatting when copying and pasting content.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { clipboard } from '@milkdown/plugin-clipboard';

const editor = await Editor.make()
  .use(commonmark)
  .use(clipboard)
  .create();
```

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

### Implement Placeholder Text with milkdown-plugin-placeholder

Source: https://context7.com/milkdown/awesome/llms.txt

Adds placeholder text functionality to display hints when the editor is empty. Requires importing the `placeholder` plugin and providing the placeholder text as an argument.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { placeholder } from 'milkdown-plugin-placeholder';

const editor = await Editor.make()
  .use(commonmark)
  .use(placeholder('Start typing here...'))
  .create();
```

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

### Add Shiki Syntax Highlighting with milkdown-plugin-shiki

Source: https://context7.com/milkdown/awesome/llms.txt

Integrates Shiki for VS Code-quality syntax highlighting in code blocks. Requires importing the `shiki` plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { shiki } from 'milkdown-plugin-shiki';

const editor = await Editor.make()
  .use(commonmark)
  .use(shiki)
  .create();
```

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

### Configure File Uploads with @milkdown/plugin-upload

Source: https://context7.com/milkdown/awesome/llms.txt

Enables drag-and-drop file uploads, particularly for images. Requires custom configuration for the `uploader` function to handle file uploads to a server and return image nodes.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { upload, uploadConfig } from '@milkdown/plugin-upload';

const editor = await Editor.make()
  .config((ctx) => {
    ctx.update(uploadConfig.key, (prev) => ({
      ...prev,
      uploader: async (files, schema) => {
        const images = await Promise.all(
          files.map(async (file) => {
            const url = await uploadToServer(file);
            return schema.nodes.image.createAndFill({ src: url });
          })
        );
        return images;
      },
    }));
  })
  .use(commonmark)
  .use(upload)
  .create();
```

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

### Enable Prism Syntax Highlighting

Source: https://context7.com/milkdown/awesome/llms.txt

Adds syntax highlighting for code blocks using Prism.js.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { prism } from '@milkdown/plugin-prism';

import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-typescript';

const editor = await Editor.make()
  .use(commonmark)
  .use(prism)
  .create();
```

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

### Add Slash Command Support with @milkdown/plugin-slash

Source: https://context7.com/milkdown/awesome/llms.txt

Integrates slash command functionality, enabling users to type '/' to open a command palette. Requires importing the `slash` plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { slash } from '@milkdown/plugin-slash';

const editor = await Editor.make()
  .use(commonmark)
  .use(slash)
  .create();

// Type "/" in the editor to see available commands
```

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

### Implement Indentation Support with @milkdown/plugin-indent

Source: https://context7.com/milkdown/awesome/llms.txt

Provides tab indentation for list items and code blocks. Requires importing the `indent` plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { indent } from '@milkdown/plugin-indent';

const editor = await Editor.make()
  .use(commonmark)
  .use(indent)
  .create();

// Press Tab to indent, Shift+Tab to outdent
```

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

### Enable Cursor Support

Source: https://context7.com/milkdown/awesome/llms.txt

Adds drop and gap cursor functionality for improved block element interaction.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { cursor } from '@milkdown/plugin-cursor';

const editor = await Editor.make()
  .use(commonmark)
  .use(cursor)
  .create();
```

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

### Implement Event Listeners

Source: https://context7.com/milkdown/awesome/llms.txt

Responds to editor state changes and content updates via the listener plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { listener, listenerCtx } from '@milkdown/plugin-listener';

const editor = await Editor.make()
  .config((ctx) => {
    ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
      console.log('Content changed:', markdown);
    });
  })
  .use(commonmark)
  .use(listener)
  .create();
```

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

### Enable Collaborative Editing

Source: https://context7.com/milkdown/awesome/llms.txt

Configures real-time multi-user editing using Yjs and WebSockets.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { collaborative, collabServiceCtx } from '@milkdown/plugin-collaborative';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const doc = new Y.Doc();
const wsProvider = new WebsocketProvider('wss://your-server.com', 'room-name', doc);

const editor = await Editor.make()
  .config((ctx) => {
    ctx.set(collabServiceCtx, {
      doc,
      awareness: wsProvider.awareness,
    });
  })
  .use(commonmark)
  .use(collaborative)
  .create();
```

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

### Enable Undo and Redo History

Source: https://context7.com/milkdown/awesome/llms.txt

Integrates undo/redo functionality into the editor instance.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { history } from '@milkdown/plugin-history';

const editor = await Editor.make()
  .use(commonmark)
  .use(history)
  .create();

// Keyboard shortcuts: Ctrl/Cmd+Z for undo, Ctrl/Cmd+Shift+Z for redo
```

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

### Enable Emoji Autocomplete with @milkdown/plugin-emoji

Source: https://context7.com/milkdown/awesome/llms.txt

Adds emoji support with autocomplete for shortcodes like ':smile:'. Requires importing the `emoji` plugin.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { emoji } from '@milkdown/plugin-emoji';

const editor = await Editor.make()
  .use(commonmark)
  .use(emoji)
  .create();

// Type ":smile:" to insert 😄
```

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

### Enable Floating Tooltip

Source: https://context7.com/milkdown/awesome/llms.txt

Provides a floating menu for inline formatting options like bold and italic.

```javascript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { tooltip } from '@milkdown/plugin-tooltip';

const editor = await Editor.make()
  .use(commonmark)
  .use(tooltip)
  .create();
```

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

### Angular Integration with @star-dancer/milkdown

Source: https://context7.com/milkdown/awesome/llms.txt

Provides an Angular component for embedding Milkdown editors. Uses `milkdown-editor` directive and ngModel for two-way data binding.

```typescript
import { Component } from '@angular/core';
import { MilkdownModule } from '@star-dancer/milkdown';

@Component({
  selector: 'app-editor',
  template: '<milkdown-editor [(ngModel)]="content"></milkdown-editor>',
})
export class EditorComponent {
  content = '# Hello World';
}
```

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