### HTML with Quill Core Build (CDN)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/installation.mdx

Shows how to set up the core build of Quill using CDN. This example includes the core JavaScript and CSS, initializing a basic editor without any pre-defined theme or formats.

```html
<link href="{{site.cdn}}/quill.core.css" rel="stylesheet">
<script src="{{site.cdn}}/quill.core.js"></script>

<div id="editor">
  <p>Core build with no theme, formatting, non-essential modules</p>
</div>

<script>
  const quill = new Quill('#editor');
</script>
```

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

### npm Installation and Basic Usage

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/installation.mdx

Provides instructions for installing Quill using npm and initializing a new editor instance in JavaScript. It shows both the full and core build import options.

```bash
npm install quill@{{site.version}}
```

```javascript
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

const quill = new Quill('#editor');
```

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

### Quill: Comprehensive Toolbar Configuration Example

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

A detailed example of a `toolbarOptions` array demonstrating various complex configurations including headers, lists, scripts, indents, directions, sizes, colors, fonts, alignment, and a clean format button.

```javascript
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});
```

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

### Install Quill 1.0 RC with npm

Source: https://github.com/slab/quill/blob/main/packages/website/content/blog/quill-1-0-release-candidate-released.mdx

This command installs the Quill 1.0 release candidate version from npm. It's a direct way to get the latest pre-release build for testing.

```bash
npm install quill@1.0.0-rc.0
```

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

### Quill History Module Configuration Example

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/history.mdx

Demonstrates how to initialize Quill with custom history module configurations for delay, max stack size, and user-only changes.

```javascript
const quill = new Quill('#editor', {
  modules: {
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    },
  },
  theme: 'snow'
});
```

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

### HTML with Quill Full Build (CDN)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/installation.mdx

Demonstrates how to include the full build of Quill via CDN in an HTML file. It loads the necessary JavaScript and CSS for the 'snow' theme and initializes an editor instance.

```html
<script src="{{site.cdn}}/quill.js"></script>
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet">

<div id="editor">
  <h2>Demo Content</h2>
  <p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>

<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
```

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

### npm Import with Specific Formats/Modules

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/installation.mdx

Illustrates importing specific Quill components like Delta and Link in an npm environment. This allows for a more customized build by avoiding the import of the entire library.

```javascript
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

import { Delta } from 'quill';
// Or if you only need the core build
// import { Delta } from 'quill/core';
// Or const Delta = Quill.import('delta');

import Link from 'quill/formats/link';
// Or const Link = Quill.import('formats/link');
```

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

### Basic HTML Setup with jQuery Event Listener

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/cloning-medium-with-parchment.mdx

Sets up a basic HTML page with a textarea and a button, using jQuery for event handling. This serves as the foundational structure before integrating Quill.

```html
<textarea id="editor">Tell your story...</textarea>

<script type="module" src="/index.js"></script>
```

```javascript
document.querySelectorAll('button').forEach((button) => {
  button.addEventListener('click', () => {
    alert('Click!');
  });
});
```

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

### Install Quill via npm

Source: https://github.com/slab/quill/blob/main/README.md

This command installs the Quill rich text editor package using npm. It's the recommended way to add Quill to your project for managing dependencies and build processes.

```shell
npm install quill
```

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

### HTML/JS: Quill Snow Theme Example with Sandpack

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/customization/themes.mdx

An embedded example using Sandpack to demonstrate the Quill Snow theme. It includes the required HTML, CSS link, and JavaScript for initializing the Quill editor with the Snow theme.

```html
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />

<div id="editor">
  <p>Hello, <strong>World</strong></p>
</div>

<script src="{{site.cdn}}/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    placeholder: 'Compose an epic...',
    theme: 'snow',
  });
</script>
```

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

### Quill Playground with Delta Viewer

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/delta.mdx

A JavaScript example setting up a Quill editor and displaying its contents and changes as Deltas in a playground. It listens for text changes and formats the Delta operations into HTML for display.

```javascript
const quill = new Quill('#editor', { theme: 'snow' });

quill.on(Quill.events.TEXT_CHANGE, update);
const playground = document.querySelector('#playground');
update();

function formatDelta(delta) {
  return `<div>${JSON.stringify(delta.ops, null, 2)}</div>`;
}

function update(delta) {
  const contents = quill.getContents();
  let html = `<h3>contents</h3>${formatDelta(contents)}`;
  if (delta) {
    html = `${html}<h3>change</h3>${formatDelta(delta)}`;
  }
  playground.innerHTML = html;
}
```

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

### HTML/JS: Quill Bubble Theme Example with Sandpack

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/customization/themes.mdx

An embedded example using Sandpack to showcase the Quill Bubble theme. It includes the necessary HTML structure, CSS link, and JavaScript initialization for the Quill editor.

```html
<link href="{{site.cdn}}/quill.bubble.css" rel="stylesheet" />

<div id="editor" style="margin: 50px 0;">
  <p>Hello, <strong>World</strong></p>
</div>

<script src="{{site.cdn}}/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    placeholder: 'Compose an epic...',
    theme: 'bubble',
  });
</script>
```

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

### Initialize Quill Editor with HTML and JavaScript

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/quickstart.mdx

This snippet shows how to include Quill's stylesheet and library, create a div for the editor, and then initialize the Quill editor with a 'snow' theme. It takes an HTML element as input and outputs a functional Quill editor instance.

```html
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Include the Quill library -->
<script src="{{site.cdn}}/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
```

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

### Initialize Quill Editor with Toolbar - JavaScript

Source: https://github.com/slab/quill/blob/main/packages/website/src/pages/standalone/full.mdx

Initializes a Quill editor instance with a specified theme, placeholder text, and toolbar configuration. It utilizes the 'snow' theme and enables syntax highlighting. The toolbar is linked to a specific HTML element.

```javascript
const quill = new Quill('#editor', {
  modules: {
    syntax: true,
    toolbar: '#toolbar-container',
  },
  placeholder: 'Compose an epic...',
  theme: 'snow',
});
```

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

### Quill Core Integration with Basic Event Listener

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/cloning-medium-with-parchment.mdx

Replaces the textarea with Quill core, initializing it without any themes or extraneous modules. It includes a basic JavaScript event listener for buttons and demonstrates the initial setup of the Quill editor.

```javascript
document.querySelectorAll('button').forEach((button) => {
  button.addEventListener('click', () => {
    alert('Click!');
  });
});

const quill = new Quill('#editor');
```

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

### Initialize Quill Editor with Custom Options

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/customization.mdx

This JavaScript example demonstrates initializing a Quill editor with specific configuration options. It disables the default toolbar and sets the theme to 'snow'.

```javascript
const quill = new Quill('#editor', {
  modules: {
    toolbar: false    // Snow includes toolbar by default
  },
  theme: 'snow'
});
```

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

### Quill Editor HTML Structure - HTML

Source: https://github.com/slab/quill/blob/main/packages/website/src/pages/standalone/full.mdx

Defines the HTML structure for a Quill editor, including external script and stylesheet links for Quill, KaTeX, and Highlight.js. It sets up a toolbar with various formatting options and a container for the editor itself.

```html
<script src="{{site.highlightjs}}/highlight.min.js"></script>
<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
<script src="{{site.katex}}/katex.min.js"></script>
<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
<link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" />
<link rel="stylesheet" href="{{site.cdn}}/quill.bubble.css" />
<script src="{{site.cdn}}/quill.js"></script>

<div id="standalone-container">
  <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font"></select>
      <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <button class="ql-video"></button>
      <button class="ql-formula"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>
  <div id="editor" style="height: 220px">
  </div>
</div>
<script src="/index.js"></script>
```

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

### Create and Register Quill Word Counter Module (JavaScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/building-a-custom-module.mdx

This JavaScript code defines a custom Quill module named 'counter'. It listens for text changes in the editor, retrieves the text content, and updates a UI element to display the word count. The module is then registered with Quill using `Quill.register()`. This example assumes a basic HTML setup with an editor and a counter element.

```javascript
function Counter(quill, options) {
  const container = document.querySelector('#counter');
  quill.on(Quill.events.TEXT_CHANGE, () => {
    const text = quill.getText();
    // There are a couple issues with counting words
    // this way but we'll fix these later
    container.innerText = text.split(/\s+/).length;
  });
}

Quill.register('modules/counter', Counter);

// We can now initialize Quill with something like this:
const quill = new Quill('#editor', {
  modules: {
    counter: true
  }
});
```

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

### Importing Quill Stylesheet via npm

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/installation.mdx

Shows how to import Quill's core stylesheet directly within a JavaScript file when using a bundler like Webpack. This ensures the necessary styles are included in the project build.

```javascript
import "quill/dist/quill.core.css";
```

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

### JavaScript: Compact Delta Representation Example

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/designing-the-delta-format.mdx

Illustrates the concept of a compact Delta format in JavaScript. It shows how consecutive text segments without formatting should be merged into a single entry to ensure a predictable and maximally condensed representation.

```javascript
const content = [
  { text: 'Hel' },
  { text: 'lo' },
  { text: 'World', attributes: { bold: true } }
];
```

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

### Configure Quill Syntax Module with npm highlight.js

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/syntax.mdx

This snippet shows how to configure the Quill syntax module when highlight.js is installed as an npm package. It demonstrates importing both Quill and highlight.js, then passing the imported `hljs` object to the syntax module's configuration, avoiding global exposure.

```javascript
import Quill from 'quill';
import hljs from 'highlight.js';

const quill = new Quill('#editor', {
  modules: {
    syntax: { hljs },
  },
});
```

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

### Include Quill Themes and Editor via CDN

Source: https://github.com/slab/quill/blob/main/packages/website/content/blog/quill-1-0-release-candidate-released.mdx

These HTML tags link to the Quill editor and its Snow and Bubble themes using CDN. They are essential for integrating Quill into a web page without local installation.

```html
<link href="//cdn.quilljs.com/1.0.0-rc.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0-rc.0/quill.bubble.css" rel="stylesheet" />

<script src="//cdn.quilljs.com/1.0.0-rc.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0-rc.0/quill.min.js"></script>
```

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

### JavaScript: Canonical Delta Representation with Custom Attributes

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/designing-the-delta-format.mdx

Provides a JavaScript example showcasing the canonical nature of Deltas with custom attributes. It highlights that while attribute names ('a', 'b') and values can be arbitrary, their consistent and unique representation is key to deep comparison for equality.

```javascript
const content = [{
  text: "Mystery",
  attributes: {
    a: true,
    b: true
  }
}];
```

```javascript
const content = [{
  text: "Mystery",
  attributes: {
    italic: true,
    bold: true
  }
}];
```

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

### Initialize Quill Rich Text Editor with Basic Toolbar

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/why-quill.mdx

This snippet demonstrates the basic initialization of the Quill rich text editor. It requires the Quill library and targets an HTML element with the ID 'editor'. The configuration enables the default toolbar and uses the 'snow' theme. This is a starting point for integrating Quill into a web application.

```javascript
const quill = new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
});
```

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

### Integrate Custom Formats in Quill Editor (HTML, CSS, JS)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/cloning-medium-with-parchment.mdx

A Sandpack example demonstrating the integration of custom bold, italic, and link formats into a Quill editor. It includes HTML for the editor and buttons, CSS for basic styling, and JavaScript to import and register the custom blots and handle button click events for formatting.

```javascript
import './formats/boldBlot.js';
import './formats/italicBlot.js';
import './formats/linkBlot.js';

const onClick = (selector, callback) => {
  document.querySelector(selector).addEventListener('click', callback);
};

onClick('#bold-button', () => {
  quill.format('bold', true);
});

onClick('#italic-button', () => {
  quill.format('italic', true);
});

onClick('#link-button', () => {
  const value = prompt('Enter link URL');
  quill.format('link', value);
});

const quill = new Quill('#editor');
```

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

### Define Custom Toolbar Handlers in Quill

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

Example of defining custom handlers for Quill's toolbar. This allows overriding default formatting actions, such as the 'link' format, to implement custom logic like prompting the user for input. The handler function receives the current value and the Quill instance via `this`. It merges with default handlers.

```javascript
const toolbarOptions = {
  handlers: {
    // handlers object will be merged with default handlers object
    link: function (value) {
      if (value) {
        const href = prompt('Enter the URL');
        this.quill.format('link', href);
      } else {
        this.quill.format('link', false);
      }
    }
  }
};

const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});

// Handlers can also be added post initialization
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);
```

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

### Get Current Selection - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Retrieve the current selection range within the editor, returning the starting index and length of the selection. It can also return the focused selection if a boolean argument is provided.

```javascript
// Get current selection
const range = quill.getSelection();
if (range) {
  console.log('Selection:', range.index, range.length);
  if (range.length === 0) {
    console.log('Cursor at position', range.index);
  } else {
    console.log('Selected from', range.index, 'to', range.index + range.length);
  }
}

// Get selection with focus
const focusedRange = quill.getSelection(true);
```

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

### Quill Editor Initialization with Toolbar Configuration (HTML/JavaScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/formats.mdx

This snippet demonstrates initializing a Quill editor with a Snow theme and configuring a toolbar. It includes HTML for the toolbar and editor elements, along with JavaScript to instantiate the Quill instance and link it to the specified toolbar. Dependencies include Quill CSS and JavaScript files, along with optional syntax highlighting and KaTeX for formulas.

```html
<link href="/styles.css" rel="stylesheet" />
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
<script src="{{site.highlightjs}}/highlight.min.js"></script>
<script src="{{site.cdn}}/quill.js"></script>
<link
  rel="stylesheet"
  href="{{site.highlightjs}}/styles/atom-one-dark.min.css"
/>
<script src="{{site.katex}}/katex.min.js"></script>
<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />

<div id="toolbar-container">
  <span class="ql-formats">
    <select class="ql-font"></select>
    <select class="ql-size"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
    <button class="ql-strike"></button>
  </span>
  <span class="ql-formats">
    <select class="ql-color"></select>
    <select class="ql-background"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-script" value="sub"></button>
    <button class="ql-script" value="super"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-header" value="1"></button>
    <button class="ql-header" value="2"></button>
    <button class="ql-blockquote"></button>
    <button class="ql-code-block"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-list" value="ordered"></button>
    <button class="ql-list" value="bullet"></button>
    <button class="ql-indent" value="-1"></button>
    <button class="ql-indent" value="+1"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-direction" value="rtl"></button>
    <select class="ql-align"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-link"></button>
    <button class="ql-image"></button>
    <button class="ql-video"></button>
    <button class="ql-formula"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-clean"></button>
  </span>
</div>
<div id="editor">
</div>

<!-- Initialize Quill editor -->
<script>
  const quill = new Quill('#editor', {
    modules: {
      syntax: true,
      toolbar: '#toolbar-container',
    },
    placeholder: 'Compose an epic...', 
    theme: 'snow',
  });
</script>

```

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

### getSemanticHTML

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Gets the HTML representation of the editor contents.

```APIDOC
## getSemanticHTML

### Description
Get the HTML representation of the editor contents.
This method is useful for exporting the contents of the editor in a format that can be used in other applications.

The `length` parameter defaults to the length of the remaining document.

### Method
```typescript
getSemanticHTML(index: number = 0, length: number = remaining): string
```

### Parameters
#### Path Parameters
- **index** (number) - Optional - The starting index from where to retrieve HTML, defaults to 0.
- **length** (number) - Optional - The number of characters to retrieve HTML for, defaults to the remaining length of the document.

### Request Example
```javascript
const html = quill.getSemanticHTML(0, 10);
```

### Response
#### Success Response (200)
- **string** (string) - The HTML representation of the editor contents.

#### Response Example
```html
"<p>Hello, World!</p>"
```
```

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

### Quill History Module API: undo()

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/history.mdx

Provides an example of how to execute the 'undo' operation to revert the last change in Quill.

```javascript
quill.history.undo();
```

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

### Configure Quill with Options

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/configuration.mdx

Illustrates initializing Quill with a comprehensive options object. This includes settings for debugging, enabling the toolbar module, setting a placeholder message, and specifying the editor's theme.

```javascript
const options = {
  debug: 'info',
  modules: {
    toolbar: true,
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
};
const quill = new Quill('#editor', options);
```

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

### Quill: Custom HTML Toolbar Container Initialization

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

Shows how to initialize Quill using a custom HTML container for the toolbar. Quill automatically attaches handlers to elements with class names like `ql-bold` and `ql-size`.

```html
<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor with toolbar -->
<script>
  const quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    }
  });
</script>
```

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

### Get Blot Index (TypeScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Calculates the document index corresponding to the beginning of a given Parchment Blot. This is useful for converting Blot references back into precise document positions.

```typescript
let [line, offset] = quill.getLine(10);
let index = quill.getIndex(line); // index + offset should == 10
```

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

### Quill: Basic Toolbar Array Configuration

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

Demonstrates the simplest way to configure Quill's toolbar using a flat array of format names. This method is straightforward for basic formatting options.

```javascript
const toolbarOptions = ['bold', 'italic', 'underline', 'strike'];

const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});
```

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

### Get Quill Editor Length

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves the total length of the content within the Quill editor. Note that even an empty editor contains a newline character, resulting in a length of 1.

```typescript
getLength(): number
```

```javascript
const length = quill.getLength();
```

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

### Initialize Quill with CSS Selector

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/configuration.mdx

Demonstrates initializing a Quill editor by providing a CSS selector string for the editor's container element. Quill will use the first matching element it finds.

```javascript
const quill = new Quill('#editor');  // First matching element will be used
```

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

### Get Leaf Blot at Index (TypeScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves the leaf Parchment Blot (typically a Text Blot) and its offset at a specific document index. This is fundamental for detailed content manipulation and analysis at the character level.

```typescript
quill.setText('Hello Good World!');
quill.formatText(6, 4, 'bold', true);

let [leaf, offset] = quill.getLeaf(7);
// leaf should be a Text Blot with value "Good"
// offset should be 1, since the returned leaf started at index 6
```

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

### Initialize Quill Editor with Snow Theme (HTML)

Source: https://github.com/slab/quill/blob/main/packages/website/src/pages/standalone/snow.mdx

This snippet shows the HTML structure required to initialize the Quill editor with the Snow theme. It includes necessary CDN links for Quill, KaTeX, and highlight.js, along with the editor's container div.

```html
<script src="{{site.highlightjs}}/highlight.min.js"></script>
<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
<script src="{{site.katex}}/katex.min.js"></script>
<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
<link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" />
<script src="{{site.cdn}}/quill.js"></script>
<div id="editor" style="height: 220px">
</div>
<script src="/index.js"></script>
    
```

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

### Get Quill Editor as Semantic HTML

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves the editor's content as semantic HTML. This is useful for exporting the editor's content to other applications. The length parameter defaults to the remaining document length.

```typescript
getSemanticHTML(index: number = 0, length: number = remaining): string
```

```javascript
const html = quill.getSemanticHTML(0, 10);
```

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

### Quill Editor Initialization and Video Insertion

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/guides/cloning-medium-with-parchment.mdx

This JavaScript code sets up a Quill editor instance and provides functionality to insert a video embed. It includes event listeners for a button click that triggers the insertion of a YouTube video iframe with specified dimensions using Quill's `insertEmbed` and `formatText` methods.

```javascript
const quill = new Quill('#editor');

onClick('#video-button', () => {
  let range = quill.getSelection(true);
  quill.insertText(range.index, '\n', Quill.sources.USER);
  let url = 'https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0';
  quill.insertEmbed(range.index + 1, 'video', url, Quill.sources.USER);
  quill.formatText(range.index + 1, 1, { height: '170', width: '400' });
  quill.setSelection(range.index + 2, Quill.sources.SILENT);
});

const onClick = (selector, callback) => {
  document.querySelector(selector).addEventListener('click', callback);
};
```

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

### Extend and Re-register Quill Clipboard Module

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules.mdx

Shows how to extend the existing 'clipboard' module in Quill and re-register it. This example creates a 'PlainClipboard' class that overrides the default conversion behavior to only handle plain text.

```javascript
const Clipboard = Quill.import('modules/clipboard');
const Delta = Quill.import('delta');

class PlainClipboard extends Clipboard {
  convert(html = null) {
    if (typeof html === 'string') {
      this.container.innerHTML = html;
    }
    let text = this.container.innerText;
    this.container.innerHTML = '';
    return new Delta().insert(text);
  }
}

Quill.register('modules/clipboard', PlainClipboard, true);

// Will be created with instance of PlainClipboard
const quill = new Quill('#editor');
```

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

### Quill Toolbar Configuration with Shorthand Container (JavaScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

This snippet shows a simplified way to configure the Quill toolbar by providing a direct CSS selector string for the toolbar container. This shorthand is equivalent to specifying the container within the `toolbar` module's options.

```javascript
const quill = new Quill('#editor', {
  modules: {
    // Equivalent to { toolbar: { container: '#toolbar' }}
    toolbar: '#toolbar'
  }
});
```

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

### Get Lines within Range (TypeScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves an array of line Parchment Blots that fall within a given document range (specified by index and length, or a Range object). This is useful for batch operations on multiple lines.

```typescript
quill.setText('Hello\nGood\nWorld!');
quill.formatLine(1, 1, 'list', 'bullet');

let lines = quill.getLines(2, 5);
// array with a ListItem and Block Blot,
// representing the first two lines
```

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

### Get Current Selection Range in Quill

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves the current user's selection range (index and length) within the Quill editor. Optionally, it can focus the editor before returning the range. If the editor does not have focus, it returns `null`.

```typescript
getSelection(focus = false): { index: number, length: number }
```

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

### Integrate Syntax Highlighter in HTML with Quill

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/syntax.mdx

This snippet demonstrates how to set up Quill with the syntax highlighter module using direct HTML and JavaScript inclusion. It includes the necessary highlight.js stylesheet and library, Quill CSS and JS, and configures the editor with the syntax module and a code-block toolbar button. It also populates the editor with sample code blocks.

```html
<link href="{{site.highlightjs}}/styles/atom-one-dark.min.css" rel="stylesheet">

<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
<script src="{{site.cdn}}/quill.js"></script>

<div id="editor"></div>

<script>
const quill = new Quill('#editor', {
  modules: {
    syntax: true,
    toolbar: [['code-block']]
  },
  theme: 'snow'
});

const Delta = Quill.import('delta');
quill.setContents(
  new Delta()
    .insert('const language = "JavaScript";')
    .insert('\n', { 'code-block': 'javascript' })
    .insert('console.log("I love " + language + "!");')
    .insert('\n', { 'code-block': 'javascript' })
);
</script>
```

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

### Get Quill Editor Contents as Delta

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Retrieves the current contents of the editor, including formatting, as a Delta object. Optionally specify an index and length to retrieve a portion of the content. Defaults to retrieving all content if index and length are not provided.

```typescript
getContents(index: number = 0, length: number = remaining): Delta
```

```javascript
const delta = quill.getContents();
```

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

### Quill: Custom HTML Toolbar with Non-Quill Elements

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

Demonstrates initializing Quill with a custom HTML toolbar that includes both Quill-specific buttons (e.g., `ql-bold`) and custom, non-Quill elements (e.g., `#custom-button`). The custom elements can be managed with standard JavaScript event listeners.

```html
<div id="toolbar">
  <!-- Add buttons as you would before -->
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>

  <!-- But you can also add your own -->
  <button id="custom-button"></button>
</div>
<div id="editor"></div>

<script>
  const quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar',
    },
  });

  const customButton = document.querySelector('#custom-button');
  customButton.addEventListener('click', function () {
    console.log('Clicked!');
  });
</script>
```

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

### Include Quill via CDN

Source: https://github.com/slab/quill/blob/main/README.md

This snippet shows how to include the Quill library and its themes directly from a CDN. It provides links for the main Quill script, the 'snow' theme stylesheet, the 'bubble' theme stylesheet, and the core Quill library with its stylesheet. Choose the appropriate links based on your project's needs.

```html
<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Theme included stylesheets -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
  rel="stylesheet"
/>

<!-- Core build with no theme, formatting, non-essential modules -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>
```

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

### Get Line Blot at Index (TypeScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/api.mdx

Fetches the line Parchment Blot (e.g., Block or BlockEmbed) and its offset at a specified document index. This method is essential for operations that target entire lines of text, such as formatting or querying line properties.

```typescript
quill.setText('Hello\nWorld!');

let [line, offset] = quill.getLine(7);
// line should be a Block Blot representing the 2nd "World!" line
// offset should be 1, since the returned line started at index 6
```

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

### History Module Configuration

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/history.mdx

Configuration options for the History module, including delay, maxStack, and userOnly.

```APIDOC
## History Module Configuration

### Description

Configuration options for the History module that control how changes are merged and stored in the undo/redo stack.

### Options

- **delay** (number) - Optional - Default: `1000`
  Changes occurring within this number of milliseconds are merged into a single change.

- **maxStack** (number) - Optional - Default: `100`
  Maximum size of the history's undo/redo stack. Merged changes count as a single change.

- **userOnly** (boolean) - Optional - Default: `false`
  If true, only user-initiated changes are tracked for undo/redo.

### Example

```javascript
const quill = new Quill('#editor', {
  modules: {
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    },
  },
  theme: 'snow'
});
```
```

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

### Get Selection Bounds - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Obtain the bounding rectangle (position and size) of a specific selection range or cursor position. This is useful for positioning UI elements like tooltips relative to the editor content.

```javascript
// Get bounds at cursor
const range = quill.getSelection();
if (range) {
  const bounds = quill.getBounds(range.index);
  console.log('Position:', bounds.left, bounds.top);
  console.log('Size:', bounds.width, bounds.height);
}

// Get bounds for range
const rangeBounds = quill.getBounds(0, 10);

// Use bounds for tooltips
const bounds = quill.getBounds(range.index);
if (bounds) {
  tooltip.style.left = bounds.left + 'px';
  tooltip.style.top = (bounds.top + bounds.height) + 'px';
}
```

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

### Retrieve Formatting - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Get the formatting information at a specific cursor position or across a range of text. This function returns an object detailing applied formats, useful for UI feedback or conditional formatting.

```javascript
// Get format at cursor
const range = quill.getSelection();
const formats = quill.getFormat(range);
console.log('Current formats:', formats);

// Get format at specific position
const formatAt10 = quill.getFormat(10, 0);

// Get format for range
const rangeFormats = quill.getFormat(0, 10);
console.log('Formats in range:', rangeFormats);

// Check specific format
if (formats.bold) {
  console.log('Text is bold');
}
```

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

### Initialize Quill Editor - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Initializes a Quill rich text editor instance. Supports basic initialization with a theme and advanced configuration including toolbars, history modules, and placeholders. Requires a target HTML element for mounting.

```javascript
const quill = new Quill('#editor', {
  theme: 'snow'
});
```

```javascript
const quill = new Quill('#editor', {
  theme: 'snow',
  placeholder: 'Compose an epic...',
  readOnly: false,
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['link', 'image', 'video'],
      ['clean']
    ],
    history: {
      delay: 1000,
      maxStack: 100,
      userOnly: false
    }
  }
});
```

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

### Initialize Quill Editor with HTML Structure

Source: https://github.com/slab/quill/blob/main/README.md

This snippet demonstrates how to set up a Quill rich text editor in an HTML document. It includes the necessary stylesheet, toolbar configuration, editor container, the Quill library script, and the JavaScript initialization code. Ensure the HTML elements have the correct IDs and classes as shown.

```html
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  const quill = new Quill("#editor", {
    theme: "snow",
  });
</script>
```

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

### Quill Toolbar Configuration with Custom Handler (JavaScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/toolbar.mdx

This snippet demonstrates how to initialize a Quill editor and configure its toolbar with a custom handler for the 'bold' action. It specifies the toolbar container using a CSS selector and defines a custom function to handle the bold formatting.

```javascript
const quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar', // Selector for toolbar container
      handlers: {
        bold: customBoldHandler
      }
    }
  }
});
```

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

### Initialize Quill with DOM Element

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/configuration.mdx

Shows how to initialize a Quill editor by passing a direct reference to the DOM element that will serve as the editor's container. This provides more explicit control over the container selection.

```javascript
const container = document.getElementById('editor');
const quill = new Quill(container);
```

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

### Control Handler Propagation (JavaScript)

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/modules/keyboard.mdx

Shows how to control the propagation of keyboard event handlers. By default, a handler stops propagation unless it explicitly returns true. This example prevents default 'Tab' key handlers unless the handler returns true.

```javascript
quill.keyboard.addBinding({ key: 'Tab' }, function(range) {
  // I will normally prevent handlers of the tab key
  // Return true to let later handlers be called
  return true;
});
```

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

### Retrieve Text Content - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Get plain text content from the editor, with or without formatting. This function can retrieve all text, text within a specific range, or selected text. It also provides the total length of the text.

```javascript
// Get all text
const text = quill.getText();
console.log(text);

// Get text in range
const partialText = quill.getText(0, 10);

// Get selected text
const range = quill.getSelection();
if (range) {
  const selectedText = quill.getText(range.index, range.length);
  console.log('Selected:', selectedText);
}

// Get text length
const length = quill.getLength();
console.log('Total characters:', length);
```

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

### Load Quill Core Stylesheet

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/customization.mdx

This HTML snippet shows how to include the core Quill stylesheet. It's a minimal requirement for basic rendering, especially when creating a custom theme.

```html
<link rel="stylesheet" href="{{site.cdn}}/quill.core.css" />
```

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

### Delete Text from Quill Editor - JavaScript

Source: https://context7.com/slab/quill/llms.txt

Deletes text from the Quill editor based on a starting position and length, or by using a Range object. It can also track the source of the deletion (e.g., user input or API call).

```javascript
quill.deleteText(0, 5);
```

```javascript
const range = quill.getSelection();
if (range) {
  quill.deleteText(range);
}
```

```javascript
quill.deleteText(10, 20, Quill.sources.USER);
```

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

### HTML/JS: Initialize Quill with Bubble Theme

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/customization/themes.mdx

Demonstrates how to include the Bubble theme stylesheet and initialize Quill with the 'bubble' theme using JavaScript. This is suitable for web applications where Quill is integrated via HTML.

```html
<link rel="stylesheet" href="{{site.cdn}}/quill.bubble.css" />

<script src="{{site.cdn}}/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    theme: 'bubble' // Specify theme in configuration
  });
</script>
```

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

### Quill Delta Retain Operation Example

Source: https://github.com/slab/quill/blob/main/packages/website/content/docs/delta.mdx

Demonstrates the 'retain' operation in Quill Deltas. This operation is used to keep a specified number of characters, optionally applying new formatting or removing existing formatting. It also shows how 'insert' and 'delete' operations can be used in conjunction with 'retain'.

```javascript
{
  ops: [
    // Unbold and italicize "Gandalf"
    { retain: 7, attributes: { bold: null, italic: true } },

    // Keep " the " as is
    { retain: 5 },

    // Insert "White" formatted with color #fff
    { insert: 'White', attributes: { color: '#fff' } },

    // Delete "Grey"
    { delete: 4 }
  ]
}
```