### Configuration Guide

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Guide to module setup, including registration, options, language configuration, toolbar customization, and keyboard bindings, with complete configuration examples.

```APIDOC
## Configuration Guide

This guide explains how to set up and configure the quill-table-better module for your application. It covers module registration, available options, language settings, and toolbar customization.

### Key Areas Covered:
- **Module Registration**: How to integrate the module into your Quill editor.
- **Options**: Detailed explanation of available configuration settings.
- **Language Configuration**: Support for 16 languages and custom language registration.
- **Toolbar and Menus**: Customizing buttons, menus, and keyboard bindings.
- **Examples**: Comprehensive configuration examples are provided.
```

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

### Installation and Usage

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Instructions for installing and including the quill-table-better module.

```APIDOC
## Installation and Usage

### npm
```javascript
npm i quill-table-better
```

### CDN
```html
<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
```
```

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

### Install quill-table-better

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Install the module using npm. This command downloads and installs the package into your project's node_modules directory.

```bash
npm install quill-table-better
```

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

### Complete Quill Table Better Initialization Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating the initialization of Quill with the Table Better module, including toolbar, custom menus, and keyboard bindings.

```javascript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';
import 'quill/dist/quill.snow.css';
import 'quill-table-better/dist/quill-table-better.css';

QuillTableBetter.register();

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['color', 'background'],
  ['link', 'image'],
  ['table-better']
];

const options = {
  theme: 'snow',
  modules: {
    table: false,  // Disable default table module
    toolbar: toolbarOptions,
    'table-better': {
      language: 'en_US',
      menus: [
        'column', 'row', 'merge', 'table', 
        'cell', 'wrap', 'copy', 'delete'
      ],
      toolbarTable: true,
      toolbarButtons: {
        whiteList: [
          'bold', 'italic', 'underline', 'strike',
          'size', 'color', 'background',
          'list', 'align', 'link', 'image'
        ],
        singleWhiteList: ['link', 'image']
      }
    },
    keyboard: {
      bindings: QuillTableBetter.keyboardBindings
    }
  }
};

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

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

### Full Registration Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Register all table formats and modules with Quill, then initialize the editor with the table-better module.

```javascript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';

// Register all table formats
QuillTableBetter.register();

// Or register explicitly
Quill.register({
  'modules/table-better': QuillTableBetter
}, true);

const quill = new Quill('#editor', {
  modules: {
    'table-better': {}
  }
});
```

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

### Format Blot Usage Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Example demonstrating how to import and check blot types using exported classes and helper functions.

```javascript
import { 
  TableContainer,
  TableCell,
  cellId,
  tableId
} from 'quill-table-better/src/formats/table';

// Check blot types
if (blot instanceof TableContainer) {
  const id = tableId();
  const cell = cellId();
}
```

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

### Initialize Quill with Table Module

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Register the table module and configure it within the Quill editor instance. This example shows basic setup with English localization and toolbar integration.

```javascript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';

QuillTableBetter.register();

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    'table-better': {
      language: 'en_US',
      toolbarTable: true
    }
  }
});

// Get module
const table = quill.getModule('table-better');

// Insert table
table.insertTable(3, 3);
```

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

### InsertTableHandler Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Provides an example of an InsertTableHandler function that logs the dimensions of the table to be inserted.

```javascript
const handler = (rows, cols) => {
  console.log(`Inserting ${rows}x${cols} table`);
};
```

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

### JavaScript Example: Custom Format Handler

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/clipboard-and-modules.md

Example demonstrating how to extend TableToolbar to add custom format handlers for table cells.

```javascript
import TableToolbar from 'quill-table-better/src/modules/toolbar';

// Extend TableToolbar
class CustomTableToolbar extends TableToolbar {
  attach(input) {
    super.attach(input);
    // Custom initialization
  }
}

// Register
Quill.register({
  'modules/toolbar': CustomTableToolbar
}, true);
```

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

### Get Correct Bounds Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Demonstrates how to use the getCorrectBounds utility function to obtain element boundary information.

```javascript
import { getCorrectBounds } from 'quill-table-better/src/utils';

const bounds = getCorrectBounds(cellElement);
// { left: 100, top: 50, right: 200, bottom: 100, width: 100, height: 50 }
```

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

### Install Quill Table Better via npm

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Installs the quill-table-better package using npm.

```javascript
npm i quill-table-better
```

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

### Apply Format Usage Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/clipboard-and-modules.md

Example demonstrating how to use the applyFormat function to apply bold and color formatting to a Quill delta. Ensure 'applyFormat' is imported from 'quill-table-better/src/utils/clipboard-matchers'.

```javascript
import { applyFormat } from 'quill-table-better/src/utils/clipboard-matchers';

let delta = new Delta().insert('text');
delta = applyFormat(delta, 'bold', true);
delta = applyFormat(delta, 'color', '#ff0000');
```

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

### Utility Function Usage Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Demonstrates how to import and use several utility functions for bounds calculation, color validation, conversion, and debouncing.

```javascript
import {
  getCorrectBounds,
  isValidColor,
  rgbToHex,
  debounce
} from 'quill-table-better/src/utils';

const bounds = getCorrectBounds(element, container);
const valid = isValidColor('#ff0000');
const hex = rgbToHex('rgb(255, 0, 0)');
const debouncedFn = debounce(() => console.log('done'), 300);
```

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

### Full Table Better Configuration Example

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

A comprehensive configuration for the 'table-better' module, including language, menus, toolbar buttons, and toolbar table insertion.

```javascript
'table-better': {
  language: 'en_US',
  menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
  toolbarButtons: {
    whiteList: ['link', 'image'],
    singleWhiteList: ['link', 'image']
  },
  toolbarTable: true
}
```

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

### UseLanguageHandler Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Demonstrates the usage of a UseLanguageHandler to retrieve localized text for a given language key.

```javascript
const lang = new Language('en_US');
const text = lang.useLanguage('cellProps');  // "Cell Properties"
```

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

### Quill Table Module Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-formats.md

Demonstrates how to interact with the table module in Quill to access table elements and their properties.

```javascript
const module = quill.getModule('table-better');
const [table] = module.getTable();
if (table) {
  console.log('Table body:', table.tbody());
  console.log('Table head:', table.thead());
  console.log('Max columns:', table.getMaxColumns(table.tbody().children));
}
```

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

### Keyboard Binding Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Illustrates the creation of a keyboard binding configuration for custom Enter key behavior within table headers, specifying key, format, and handler.

```javascript
const binding = {
  key: 'Enter',
  format: ['table-header'],
  collapsed: true,
  suffix: /^$/,
  handler(range, context) {
    // Custom Enter behavior in table headers
  }
};
```

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

### Exports and Integration Guide

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Reference for all exported symbols, format registration details, keyboard bindings export, and integration patterns for extending the module.

```APIDOC
## Exports and Integration Guide

This guide serves as a reference for all symbols exported by the quill-table-better library and provides patterns for integrating and extending its functionality.

### Key Areas Covered:
- **Exported Symbols**: A comprehensive list of all exported functions, classes, and types.
- **Format Registration**: Details on how to register custom table formats.
- **Keyboard Bindings Export**: Information on accessing and customizing keyboard bindings.
- **Integration Patterns**: Examples and guidance on how to extend the module for custom use cases.
```

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

### CDN Usage Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Provides CDN links for including Quill Table Better's CSS and JavaScript files. Shows how to register the module with Quill when using CDN.

```html
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet"/>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>

<!-- Usage -->
<script>
  Quill.register({
    'modules/table-better': QuillTableBetter
  });
</script>
```

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

### Configure Context Menus (String Array)

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/configuration.md

Specify which context menus to display by providing an array of menu names. This example shows how to display column, row, merge, table, cell, wrap, copy, and delete menus.

```javascript
modules: {
  'table-better': {
    menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete']
  }
}
```

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

### Utility Function Exports

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Lists all utility functions exported from `src/utils/index.ts` and provides a usage example demonstrating how to import and utilize several of these functions.

```APIDOC
## Utility Function Exports

### Description

This section details the utility functions exported from the `src/utils/index.ts` file, which provide helpful tools for various operations within the library. A usage example is provided to illustrate how to import and apply these functions.

### Location

`src/utils/index.ts`

### Exported Functions

- `addDimensionsUnit`
- `convertUnitToInteger`
- `createTooltip`
- `debounce`
- `filterWordStyle`
- `getAlign`
- `getCellChildBlot`
- `getCellFormats`
- `getCellId`
- `getClosestElement`
- `getComputeBounds`
- `getComputeSelectedCols`
- `getComputeSelectedTds`
- `getCopyTd`
- `getCorrectBounds`
- `getCorrectCellBlot`
- `getCorrectContainerWidth`
- `getCorrectWidth`
- `getElementStyle`
- `isDimensions`
- `isValidColor`
- `isValidDimensions`
- `removeElementProperty`
- `rgbToHex`
- `rgbaToHex`
- `setElementAttribute`
- `setElementProperty`
- `throttle`
- `throttleStrong`
- `updateTableWidth`

### Usage Example

```javascript
import {
  getCorrectBounds,
  isValidColor,
  rgbToHex,
  debounce
} from 'quill-table-better/src/utils';

const bounds = getCorrectBounds(element, container);
const valid = isValidColor('#ff0000');
const hex = rgbToHex('rgb(255, 0, 0)');
const debouncedFn = debounce(() => console.log('done'), 300);
```
```

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

### Get Module Instance

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Retrieve the 'table-better' module instance from a Quill editor.

```javascript
const table = quill.getModule('table-better');
```

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

### Initialize Quill with Table Module and Keyboard Bindings

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-main.md

Example of initializing a Quill editor with the 'snow' theme, enabling the keyboard module, and configuring it with QuillTableBetter's pre-defined keyboard bindings for table navigation and editing.

```javascript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';

QuillTableBetter.register();
// or equivalently:
// Table.register();
```

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

### Event Listener Examples

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Event listeners are automatically added to the editor root for table interactions.

```javascript
quill.root.addEventListener('keyup', this.handleKeyup.bind(this));
quill.root.addEventListener('mousedown', this.handleMousedown.bind(this));
quill.root.addEventListener('scroll', this.handleScroll.bind(this));
```

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

### TableCellMap Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Illustrates the creation and population of a TableCellMap, associating row identifiers with their respective cell elements.

```javascript
const cellMap = new Map();
cellMap.set('row-abc1', [td1, td2, td3]);
cellMap.set('row-xyz9', [td4, td5, td6]);
```

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

### Inspect Table Structure

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Get the table element and log the number of rows and maximum columns.

```javascript
const module = quill.getModule('table-better');
const [table] = module.getTable();
console.log('Rows:', table.tbody().children.length);
console.log('Columns:', table.getMaxColumns(table.tbody().children.head.children));
```

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

### Clipboard Matcher Examples

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Clipboard matchers are automatically added to handle pasting table-related content.

```javascript
quill.clipboard.addMatcher('td, th', matchTableCell);
quill.clipboard.addMatcher('tr', matchTable);
quill.clipboard.addMatcher('col', matchTableCol);
quill.clipboard.addMatcher('table', matchTableTemporary);
```

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

### Accessing and Using the Language Manager

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/language-system.md

This snippet demonstrates how to get the language module, access its properties, change the current language, retrieve translations, and register a new language.

```javascript
const module = quill.getModule('table-better');
const language = module.language;

// Get current language name
console.log(language.name);

// Change language
language.changeLanguage('zh_CN');

// Get translation
const text = language.useLanguage('cellProps');

// Register new language
language.registry('my_lang', { cellProps: 'My Text' });
```

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

### API Reference - Helper Functions

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Documentation for over 40 utility functions used for geometry, DOM manipulation, color handling, and formatting, complete with parameter types, return values, and usage examples.

```APIDOC
## API Reference - Helper Functions

This section lists and describes the utility functions provided by quill-table-better. These functions assist with common tasks such as geometry calculations, DOM manipulation, color formatting, and general data handling.

### Key Areas Covered:
- **Functionality**: Geometry, DOM, color, formatting utilities.
- **Quantity**: Over 40 utility functions.
- **Documentation**: Includes complete parameter and return type information.
- **Examples**: Usage examples are provided for each function.
```

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

### Example Quill Table Better Options Configuration

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Demonstrates how to configure the QuillTableBetter module with custom language settings, menu items, toolbar button whitelists, and enabling the table toolbar button.

```javascript
const options = {
  language: {
    name: 'custom',
    content: {
      'cellProps': 'Cell Options',
      'border': 'Border Settings',
      // ... more translations
    }
  },
  menus: ['column', 'row', 'merge', 'table', 'cell'],
  toolbarButtons: {
    whiteList: ['bold', 'italic', 'link'],
    singleWhiteList: ['link']
  },
  toolbarTable: true
};
```

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

### Table Paste HTML Example

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/clipboard-and-modules.md

Example of HTML content that a user might paste, which the TableClipboard matchers are designed to convert into appropriate Quill delta operations. This includes handling merged cells and inline formatting.

```javascript
// User pastes this HTML:
const html = "\
  <table>\
    <tr>\
      <td colspan=\"2\" style=\"color: red;\">
        <b>Merged Cell</b>
      </td>
    </tr>
  </table>
";

// Matchers convert to Delta with proper:
// - Cell attributes (colspan)
// - Inline formatting (bold)
// - Cell structure
```

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

### Type Imports - From Main Package

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Provides examples of importing various types from the main `quill-table-better` package, including the main `QuillTableBetter` type and specific blot types.

```APIDOC
## Type Imports - From Main Package

### Description

This section shows how to import type definitions directly from the main `quill-table-better` package. This is useful for TypeScript users who need to reference specific types for blot elements, props, and other related data structures.

### Import Statement

```javascript
import type {
  QuillTableBetter,
  TableCell,
  TableContainer,
  TableRow,
  TableCellBlock,
  Props,
  CorrectBound
} from 'quill-table-better';
```
```

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

### Get Table Better Module Instance

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Retrieves the 'table-better' module instance from the Quill editor.

```javascript
const module = quill.getModule('table-better');
```

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

### Language System Documentation

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Details on the language system, including the Language class, methods, all 16 supported languages, translation keys, and examples for custom language registration.

```APIDOC
## Language System Documentation

This section describes the localization features of quill-table-better, focusing on the `Language` class and how to manage translations.

### Key Areas Covered:
- **Language Class**: Core component for managing translations.
- **Supported Languages**: Details on all 16 built-in languages.
- **Translation Keys**: Reference for all available translation keys.
- **Customization**: Examples for registering custom languages.
```

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

### Get Module Instance

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Demonstrates how to access the `Table` module instance from a Quill editor instance using `getModule('table-better')`. It also lists the available properties on the module instance.

```APIDOC
## Get Module Instance

### Description

This section explains how to retrieve an instance of the `Table` module from an initialized Quill editor. It also outlines the key properties available on the `Table` module instance for further interaction and configuration.

### Accessing the Module

```javascript
const table = quill.getModule('table-better');
```

### Returns

- `Table` instance

### Properties

- **`table.language`**: Language instance.
- **`table.cellSelection`**: CellSelection instance.
- **`table.operateLine`**: OperateLine instance.
- **`table.tableMenus`**: TableMenus instance.
- **`table.tableSelect`**: TableSelect instance.
- **`table.options`**: Configuration options.
```

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

### Get Properties Function

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

A function to retrieve form configuration for property dialogs, based on type and attribute, with language support.

```javascript
// Get form configuration for properties dialogs
function getProperties({ type, attribute }, useLanguage) {
  // type: 'table' | 'cell'
  // Returns form structure with validation
}
```

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

### What Gets Registered

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Details the specific table formats (Blots) and modules that are registered when `Table.register()` is called, along with the clipboard matchers and event listeners automatically added.

```APIDOC
## What Gets Registered

### Description

This section outlines the various components that are registered with Quill when the `Table.register()` method is invoked. This includes Blot definitions for table elements, modules for toolbar and clipboard functionality, and event listeners for user interactions.

### Table Formats (Blots)

- `TableCellBlock` (format: 'table-cell-block')
- `TableThBlock` (format: 'table-th-block')
- `TableCell` (format: 'table-cell')
- `TableTh` (format: 'table-th')
- `TableRow` (format: 'table-row')
- `TableThRow` (format: 'table-th-row')
- `TableBody` (format: 'table-body')
- `TableThead` (format: 'table-thead')
- `TableTemporary` (format: 'table-temporary')
- `TableContainer` (format: 'table-container')
- `TableCol` (format: 'table-col')
- `TableColgroup` (format: 'table-colgroup')

### Modules

- `TableToolbar` (as 'modules/toolbar')
- `TableClipboard` (as 'modules/clipboard')

### Clipboard Matchers

Automatically added in the constructor:

- `quill.clipboard.addMatcher('td, th', matchTableCell);`
- `quill.clipboard.addMatcher('tr', matchTable);`
- `quill.clipboard.addMatcher('col', matchTableCol);`
- `quill.clipboard.addMatcher('table', matchTableTemporary);`

### Event Listeners

Automatically added in the constructor:

- `quill.root.addEventListener('keyup', this.handleKeyup.bind(this));`
- `quill.root.addEventListener('mousedown', this.handleMousedown.bind(this));`
- `quill.root.addEventListener('scroll', this.handleScroll.bind(this));`
```

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

### Custom Menu Icon

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/ui-components.md

Menus can be configured with custom SVG or HTML icons. This example shows how to set an SVG icon for a 'column' menu item.

```javascript
menus: [
  {
    name: 'column',
    icon: `<svg><use href="#icon-column"></use></svg>`
  }
]
```

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

### Basic Quill Table Better Setup

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Configure Quill to use the table-better module, disabling the default table functionality and enabling custom table features. Ensure the 'table-better' module and its keyboard bindings are correctly initialized.

```javascript
const options = {
  theme: 'snow',
  modules: {
    table: false,  // Disable default Quill tables
    'table-better': {
      language: 'en_US',
      menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
      toolbarTable: true,
      toolbarButtons: {
        whiteList: ['bold', 'italic', 'color', 'link', 'image'],
        singleWhiteList: ['link', 'image']
      }
    },
    keyboard: {
      bindings: QuillTableBetter.keyboardBindings
    }
  }
};
```

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

### Format Blot Exports

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Lists the format Blots exported from `src/formats/table.ts` and their corresponding helper functions, along with a usage example for checking blot types and generating IDs.

```APIDOC
## Format Blot Exports

### Description

This section enumerates the format Blots that are exported from the `src/formats/table.ts` file, which represent the different structural elements of a table within Quill. It also lists helper functions for generating unique IDs for cells and tables.

### Location

`src/formats/table.ts`

### Exported Blots

- `TableCellBlock`
- `TableThBlock`
- `TableCell`
- `TableTh`
- `TableRow`
- `TableThRow`
- `TableBody`
- `TableThead`
- `TableTemporary`
- `TableContainer`
- `TableCol`
- `TableColgroup`

### Helper Functions

- **`cellId()`**: Generates a unique cell ID (e.g., 'cell-xxxx').
- **`tableId()`**: Generates a unique table row ID (e.g., 'row-yyyy').

### Usage Example

```javascript
import {
  TableContainer,
  TableCell,
  cellId,
  tableId
} from 'quill-table-better/src/formats/table';

// Check blot types
if (blot instanceof TableContainer) {
  const id = tableId();
  const cell = cellId();
}
```
```

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

### Working with Selected Cells

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Access the currently selected cells using the Quill Table Better module. This example shows how to check the number of selected cells and apply formatting, such as bold, to all of them.

```javascript
const module = quill.getModule('table-better');
const selected = module.cellSelection.selectedTds;

if (selected.length) {
  console.log(`${selected.length} cells selected`);
  
  // Apply format to all
  module.cellSelection.setSelectedTdsFormat('bold', true);
}
```

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

### Configure Context Menus (Empty Array)

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/configuration.md

To display all available context menus, provide an empty array for the 'menus' option. Note that the 'copy' menu is not shown by default and must be explicitly included.

```javascript
modules: {
  'table-better': {
    menus: []  // Shows all menus
  }
}
```

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

### Initialize Quill with Table Better Module (CDN)

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

This HTML snippet demonstrates how to set up Quill with the table-better module using CDN links. It includes the necessary CSS and JavaScript files and initializes Quill with custom options.

```html
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>

<div id="root"></div>
<script>
  Quill.register({
    'modules/table-better': QuillTableBetter
  }, true);

  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['table-better']
  ];

  const options = {
    theme: 'snow',
    modules: {
      table: false,
      toolbar: toolbarOptions,
      'table-better': {
        language: 'en_US',
        menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
        toolbarTable: true
      },
      keyboard: {
        bindings: QuillTableBetter.keyboardBindings
      }
    }
  };
  const quill = new Quill('#root', options);
</script>
```

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

### Initialize Quill Table Module with Custom Options

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-main.md

Demonstrates how to instantiate a Quill editor and configure the 'table-better' module with custom options, including language settings, visible menus, toolbar button whitelists, and enabling the table insert button on the toolbar.

```javascript
const options = {
  theme: 'snow',
  modules: {
    table: false,  // disable Quill's default table module
    'table-better': {
      language: 'en_US',
      menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
      toolbarTable: true,
      toolbarButtons: {
        whiteList: ['bold', 'italic', 'color', 'link', 'image'],
        singleWhiteList: ['link', 'image']
      }
    }
  }
};
const quill = new Quill('#editor', options);
```

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

### html()

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-formats.md

Returns the outer HTML of the column element. This method can be used to get the HTML representation of a column.

```APIDOC
## html()

### Description
Returns the outer HTML of the column element.

### Method
Instance method

### Response
#### Success Response
- **string** - The outer HTML of the column element.
```

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

### Full Registration

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

This section demonstrates how to register all table formats and modules with Quill, or how to register them explicitly. It also shows how to initialize the Quill editor with the table-better module.

```APIDOC
## Full Registration

### Description

This section details the process of registering the `quill-table-better` module and its associated formats with the Quill editor. You can either register all formats at once or register them explicitly. The example also shows how to initialize the Quill editor with the table-better module enabled.

### Registration Methods

1.  **Register all formats:**
    ```javascript
    import QuillTableBetter from 'quill-table-better';
    QuillTableBetter.register();
    ```

2.  **Register explicitly:**
    ```javascript
    import Quill from 'quill';
    import QuillTableBetter from 'quill-table-better';
    Quill.register({
      'modules/table-better': QuillTableBetter
    }, true);
    ```

### Editor Initialization

```javascript
const quill = new Quill('#editor', {
  modules: {
    'table-better': {}
  }
});
```
```

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

### Get Table Information

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Retrieves information about the current table, row, cell, and offset within the editor. Defaults to the current selection.

```javascript
module.getTable();
```

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

### Initialize Quill with Table Better Module (JavaScript)

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Use this code to initialize Quill with the table-better module enabled. Ensure you import the necessary CSS files. The `updateContents` method should be used instead of `setContents` for initializing data to prevent display issues.

```JavaScript
const delta = quill.clipboard.convert({ html });
const [range] = quill.selection.getRange();
quill.updateContents(delta, Quill.sources.USER);
quill.setSelection(
  delta.length() - (range?.length || 0),
  Quill.sources.SILENT
);
quill.scrollSelectionIntoView();
```

```JavaScript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';
import 'quill/dist/quill.snow.css';
import 'quill-table-better/dist/quill-table-better.css'

Quill.register({
  'modules/table-better': QuillTableBetter
}, true);

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['table-better']
];

const options = {
  theme: 'snow',
  modules: {
    table: false,
    toolbar: toolbarOptions,
    'table-better': {
      language: 'en_US',
      menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
      toolbarTable: true
    },
    keyboard: {
      bindings: QuillTableBetter.keyboardBindings
    }
  }
};

const quill = new Quill('#root', options);
```

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

### Get Cell Text Alignment

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Determines the text alignment for a given table cell. Returns one of 'left', 'center', 'right', or 'justify'.

```typescript
function getAlign(cellBlot: TableCell): string
```

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

### Importing All Types

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Demonstrates how to import all available types from the 'quill-table-better' package. This is the default export method.

```javascript
import type {
  QuillTableBetter,
  TableCell,
  TableContainer,
  Props,
  CorrectBound
} from 'quill-table-better';
```

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

### Get Selected Table Columns

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Finds all table columns within a specified bounding rectangle. This is useful for operations that affect entire columns.

```typescript
function getComputeSelectedCols(
  computeBounds: CorrectBound,
  table: Element,
  container: Element
): Element[]
```

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

### TablePropertiesForm Get Form Data

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/ui-components.md

Retrieves the current values from the table properties form. Returns an object mapping property names to their values.

```typescript
getFormData(): Props
```

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

### Utility Function Usage

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Shows how to use utility functions like getCorrectBounds and rgbToHex provided by the library. These functions assist in DOM manipulation and color conversion.

```javascript
import { getCorrectBounds, rgbToHex } from 'quill-table-better/src/utils';

const element = document.querySelector('td');
const bounds = getCorrectBounds(element);
const hex = rgbToHex('rgb(255, 128, 0)');
```

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

### Language Class Constructor

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/language-system.md

Initializes a new Language instance. You can provide a language code string or a custom LanguageConfig object.

```APIDOC
## Constructor Language

### Description
Initializes a new Language instance. You can provide a language code string or a custom LanguageConfig object.

### Parameters
#### Path Parameters
- **language** (string | LanguageConfig) - Required - Language code or custom language object

### Request Example
```javascript
import Language from 'quill-table-better/src/language';

const lang1 = new Language('en_US');
const lang2 = new Language({
  name: 'custom_lang',
  content: { key: 'value' }
});
```
```

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

### Get Editor Container Width

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Use getCorrectContainerWidth to retrieve the actual width of the editor container, including any padding. This function returns the width in pixels.

```typescript
function getCorrectContainerWidth(): number
```

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

### Get Column Element HTML

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-formats.md

Retrieve the outer HTML string representation of a column element. This is useful for inspecting or serializing the column's structure.

```typescript
html(): string
```

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

### Type Imports - From Types/Keyboard

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Shows how to import specific type definitions related to keyboard bindings from the `quill-table-better/src/types/keyboard` module.

```APIDOC
## Type Imports - From Types/Keyboard

### Description

This section provides instructions for importing type definitions specifically related to keyboard bindings from the `quill-table-better/src/types/keyboard` module. This is useful for advanced customization or understanding of the keyboard interaction logic.

### Import Statement

```javascript
import type {
  BindingObject,
  Context,
  NormalizedBinding
} from 'quill-table-better/src/types/keyboard';
```
```

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

### Methods

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Available methods for interacting with the table module.

```APIDOC
## Methods

### `deleteTable()`
Deletes the currently selected table.

```javascript
const module = quill.getModule('table-better');
module.deleteTable();
```

### `deleteTableTemporary()`
Used to submit data (HTML or Delta) to the server. It temporarily removes table-specific elements before data submission.

```javascript
// For HTML
module.deleteTableTemporary();
const html = quill.getSemanticHTML();
axios.post(url, html);
```

### `hideTools()`
Hides the table tools, typically used before submitting data (Delta) to the server.

```javascript
// For Delta
module.hideTools();
const delta = quill.getContents();
axios.post(url, delta);
```

### `getTable(range = this.quill.getSelection())`
Returns information about the table, row, and cell at the current selection or a specified range. Returns `[table, row, cell, offset]`.

```javascript
const module = quill.getModule('table-better');
const tableInfo = module.getTable();
```

### `insertTable(rows: number, columns: number)`
Inserts a new table with the specified number of rows and columns.

```javascript
const module = quill.getModule('table-better');
module.insertTable(3, 3); // Inserts a 3x3 table
```
```

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

### Get Table Information

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-main.md

Returns table structure information at the given selection range. Locates the table, row, and cell containing the given range.

```typescript
getTable(range?: Range): 
  [null, null, null, -1] |
  [TableContainer, TableRow, TableCell, number]
```

```javascript
const module = quill.getModule('table-better');
const [table, row, cell, offset] = module.getTable();
if (table) {
  console.log('In table at offset', offset);
}
```

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

### Get Cell ID from Formats

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Extracts the cell ID from a formats object or a string. Handles both direct string IDs and IDs nested within an object.

```typescript
function getCellId(formats: string | Props): string
```

```javascript
import { getCellId } from 'quill-table-better/src/utils';

const id1 = getCellId('cell-abc1');  // 'cell-abc1'
const id2 = getCellId({ cellId: 'cell-xyz9' });  // 'cell-xyz9'
```

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

### TypeScript Configuration: DEFAULTS

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/clipboard-and-modules.md

Extends Quill Toolbar defaults with table-specific handlers for header, list, and table-better.

```typescript
TableToolbar.DEFAULTS = merge({}, Toolbar.DEFAULTS, {
  handlers: {
    header: [handler function],
    list: [handler function],
    'table-better': [handler function]
  }
});
```

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

### Type Imports - From Types Module

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Demonstrates how to import a comprehensive set of type definitions from the `quill-table-better/src/types` module, covering various aspects of the library's data structures and handlers.

```APIDOC
## Type Imports - From Types Module

### Description

This section illustrates how to import a broader range of type definitions from the dedicated types module within the `quill-table-better` package. This includes types related to props, bounds, cell children, handlers, and bindings.

### Import Statement

```javascript
import type {
  Props,
  CorrectBound,
  TableCellAllowedChildren,
  TableCellChildren,
  TableCellMap,
  UseLanguageHandler,
  InsertTableHandler,
  BindingObject,
  Context,
  NormalizedBinding
} from 'quill-table-better/src/types';
```
```

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

### Get Parent Cell Blot

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Walks up the blot hierarchy to find the parent table cell for a given blot. Returns null if no parent cell is found.

```typescript
function getCorrectCellBlot(
  blot: TableCell | TableCellChildren
): TableCell | null
```

```javascript
import { getCorrectCellBlot } from 'quill-table-better/src/utils';

const module = quill.getModule('table-better');
const [table, row, cell] = module.getTable();
const cellBlot = getCorrectCellBlot(cell);
```

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

### Get Selected Table Cells

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Finds all table cells within a specified bounding rectangle. Use this to identify cells covered by a user's selection.

```typescript
function getComputeSelectedTds(
  computeBounds: CorrectBound,
  table: Element,
  container: Element,
  type?: string
): Element[]
```

```javascript
import {
  getCorrectBounds,
  getComputeBounds,
  getComputeSelectedTds
} from 'quill-table-better/src/utils';

const td1 = document.querySelector('td.start');
const td2 = document.querySelector('td.end');
const table = document.querySelector('table');

const bounds = getComputeBounds(
  getCorrectBounds(td1, table),
  getCorrectBounds(td2, table)
);
const selected = getComputeSelectedTds(bounds, table, table);
```

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

### Basic Table Insertion

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Demonstrates how to register and use the QuillTableBetter module to insert a basic table into a Quill editor instance. Ensure the module is registered with the editor's configuration.

```javascript
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';

QuillTableBetter.register();

const quill = new Quill('#editor', {
  modules: { 'table-better': {} }
});

const table = quill.getModule('table-better');
table.insertTable(3, 3);
```

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

### Available Language Module Imports

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/exports-and-integration.md

Lists direct import paths for all available language modules, enabling easy integration of specific locales.

```javascript
// Direct imports
'./language/en_US'  // English
'./language/zh_CN'  // Chinese (Simplified)
'./language/zh_TW'  // Chinese (Traditional)
'./language/fr_FR'  // French
'./language/de_DE'  // German
'./language/ru_RU'  // Russian
'./language/tr_TR'  // Turkish
'./language/pt_PT'  // Portuguese
'./language/pt_BR'  // Portuguese (Brazil)
'./language/ja_JP'  // Japanese
'./language/pl_PL'  // Polish
'./language/cs_CZ'  // Czech
'./language/da_DK'  // Danish
'./language/nb_NO'  // Norwegian Bokmål
'./language/it_IT'  // Italian
'./language/sv_SE'  // Swedish
```

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

### Key Combinations

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Keyboard shortcuts for table operations.

```APIDOC
## Key Combinations

- **Delete cells and their contents**: `Ctrl + Backspace` or `Ctrl + Delete`
  When all cells in a row or column are selected, these key combinations can be used to delete cells and their contents.
```

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

### Get Cell Formats

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Extracts formatting attributes applied to a table cell blot. This includes styles like background color, text alignment, etc.

```javascript
getCellFormats(cell)
```

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

### Options Type

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-main.md

Represents the configuration object passed to the module's constructor.

```typescript
options: Options
```

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

### Get Correct Element Bounds

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Calculates the bounding box of an element relative to a specified container. Useful for positioning UI elements or determining element visibility.

```javascript
getCorrectBounds(element, container)
```

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

### API Reference - Main Table Module

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Documentation for the main Table module, including its class, public methods, properties, keyboard bindings, and event handlers.

```APIDOC
## API Reference - Main Table Module

This section details the `Table` class and its associated public methods and properties within the quill-table-better library. It also covers keyboard bindings and event handlers for table interactions.

### Key Areas Covered:
- **Class `Table`**: Core component for table functionality.
- **Public Methods and Properties**: All callable functions and accessible data members.
- **Keyboard Bindings**: Defined shortcuts for table operations.
- **Event Handlers**: Mechanisms for responding to user interactions within tables.
```

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

### Instantiate Language Class

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/language-system.md

Create a new instance of the Language class with a specified language code or a custom language configuration object.

```typescript
import Language from 'quill-table-better/src/language';

const lang1 = new Language('en_US');
const lang2 = new Language({
  name: 'custom_lang',
  content: { key: 'value' }
});
```

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

### Configure Menus for Table Better

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Customize the action bar by specifying which menus to display. An empty array or no configuration shows all default menus except 'copy'.

```javascript
'table-better': {
  menus: [
    { name: 'column', icon: '<span>column</span>' },
    { name: 'row', icon: '<svg></svg>' },
    'merge',
    'table',
    'cell',
    'wrap',
    'copy',
    'delete'
  ]
}
```

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

### Get Cell Formats and ID

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Extracts cell attributes and its unique ID from a cell blot. Returns a tuple containing the formats object and the cell ID string.

```typescript
function getCellFormats(cellBlot: TableCell): [Props, string]
```

```javascript
import { getCellFormats } from 'quill-table-better/src/utils';

const [formats, cellId] = getCellFormats(cellBlot);
console.log('Cell attributes:', formats);
console.log('Cell ID:', cellId);
```

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

### Convert Dimension Unit to Integer

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/api-reference-utilities.md

Extracts and rounds the numeric value from a dimension string, skipping percentage values. Use this to get a clean integer representation of a dimension.

```javascript
import { convertUnitToInteger } from 'quill-table-better/src/utils';

convertUnitToInteger('24.5px');    // '24px'
convertUnitToInteger('100px');     // '100px'
convertUnitToInteger('50%');       // '50%'
```

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

### Clipboard and Modules Documentation

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/README.md

Information on advanced features like the TableClipboard module, TableToolbar extension, copy/paste integration, and custom format handlers.

```APIDOC
## Clipboard and Modules Documentation

This section covers advanced features and modules that extend the functionality of quill-table-better, particularly focusing on clipboard operations and module integrations.

### Key Areas Covered:
- **TableClipboard Module**: Functionality for handling table data via clipboard.
- **TableToolbar Extension**: Extending the toolbar for table-specific actions.
- **Copy/Paste Integration**: How tables are handled during copy and paste operations.
- **Custom Format Handlers**: Mechanisms for integrating custom data formats.
```

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

### Configuration Options

Source: https://github.com/attoae/quill-table-better/blob/main/README.md

Configuration options for customizing the table editor, including menus, toolbar buttons, and table insertion.

```APIDOC
## Configuration Options

### menus
`menus` are used to configure the action bar. The available functions include column manipulation, row manipulation, merging cells, table properties, cell properties, wrapping text, deleting tables, and copying tables. Customization is supported.

### toolbarTable
`toolbarTable` is a boolean value used to add a button to insert a table on the toolbar. It needs to be added to `toolbarOptions`.

### toolbarButtons
`toolbarButtons` controls which buttons are enabled or disabled when a table is focused. It includes `whiteList` for multi-cell operations and `singleWhiteList` for single-cell formatting.

#### WHITE_LIST
Formats supported by the table for simultaneous operations on multiple cells.

#### SINGLE_WHITE_LIST
Formats supported for single-cell formatting.

### Example Configuration
```javascript
'table-better': {
  language: 'en_US',
  menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
  toolbarButtons: {
    whiteList: ['link', 'image'],
    singleWhiteList: ['link', 'image']
  },
  toolbarTable: true
}
```
```

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

### Get Cell Child Blot

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/INDEX.md

Retrieves the first child block element within a given table cell blot. This can be used to access the content area of the cell.

```javascript
getCellChildBlot(cell)
```

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

### CellSelection: Get Copy Data

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/ui-components.md

Extracts the content of the selected table cells into both sanitized HTML and plain text formats. This data is prepared for clipboard operations (copy/paste).

```typescript
getCopyData(): { html: string; text: string }
```

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

### BindingObject Interface for Keyboard Shortcuts

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Configuration for a single keyboard shortcut, including key combinations, modifiers, and custom handler functions. Supports optional prefix and suffix patterns.

```typescript
interface BindingObject
  extends Partial<Omit<Context, 'prefix' | 'suffix' | 'format'>> {
  key: number | string | string[];
  shortKey?: boolean | null;
  shiftKey?: boolean | null;
  altKey?: boolean | null;
  metaKey?: boolean | null;
  ctrlKey?: boolean | null;
  prefix?: RegExp;
  suffix?: RegExp;
  format?: Record<string, unknown> | string[];
  handler?: (
    this: { quill: Quill },
    range: Range,
    curContext: Context,
    binding: NormalizedBinding,
  ) => boolean | void;
}
```

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

### Retrieve Translation String

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/language-system.md

Get a localized string for a given translation key. The returned string depends on the currently active language. Demonstrates switching languages and retrieving translations.

```typescript
const lang = new Language('en_US');
const text = lang.useLanguage('cellProps');  // "Cell Properties"
lang.changeLanguage('zh_CN');
const zhText = lang.useLanguage('cellProps');  // "单元格属性"
```

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

### Importing Specific Type

Source: https://github.com/attoae/quill-table-better/blob/main/_autodocs/types.md

Shows how to import a specific type, such as 'Props', directly from the 'quill-table-better/src/types' path. This is useful for more granular imports.

```javascript
import type { Props } from 'quill-table-better/src/types';
```