---
title: "Selection Module"
description: "A module for working with the cursor and text selections, inserting HTML, nodes, and images at the cursor, setting focus, and applying styles to selected text."
metadata:
  - name: keywords
    content: "jodit, selection, cursor, insert html, commit style, text selection"
---
# Selection

A module for working with the cursor, text selections, processing selections, inserting html in place of the cursor.
Most obvious use case

## How to insert HTML into Jodit

There is a family of methods for this.[ISelect.insertHTML](../interfaces/types.ISelect.html#inserthtml), [ISelect.insertNode](../interfaces/types.ISelect.html#insertnode), [ISelect.insertImage](../interfaces/types.ISelect.html#insertimage).

```js
const jodit = Jodit.make('#editor');
jodit.selection.insertHTML('<span>some html</span>');
jodit.selection.insertNode(document.createElement('div')); // don't do that =) see [[core/create]]
jodit.selection.insertImage('https://somesite.com/image.png');
```

## How to set focus in Jodit editor

```js
const jodit = Jodit.make('#editor');
jodit.selection.focus();
```

## Apply a style to selected text

```js
const jodit = Jodit.make('#editor');
jodit.s.commitStyle({ element: 'h1' }); // Wrap selected text in <h1> tag
jodit.s.commitStyle({ attributes: { className: 'some-class' } }); // Add class to selected text
jodit.s.commitStyle({ attributes: { style: { color: 'red' } } }); // Apply style to selected text
jodit.synchronizeValues();
```

> s - is a shortcut for `selection`


## Classes

- [Selection](../classes/selection.Selection.html)
- [CommitStyle](../classes/selection.CommitStyle.html)

## Interfaces

- [IStyleTransactionValue](../interfaces/selection.IStyleTransactionValue.html)

### states

`const` **states**: `object`

Defined in: [src/core/selection/style/transactions.ts:39](https://github.com/xdan/jodit/blob/main/src/core/selection/style/transactions.ts#L39)

##### START

`readonly` **START**: `"START"` = `'START'`

##### ELEMENT

`readonly` **ELEMENT**: `"ELEMENT"` = `'ELEMENT'`

##### UNWRAP

`readonly` **UNWRAP**: `"UNWRAP"` = `'UNWRAP'`

##### UNWRAP\_CHILDREN

`readonly` **UNWRAP\_CHILDREN**: `"UNWRAP_CHILDREN"` = `'UNWRAP_CHILDREN'`

##### CHANGE

`readonly` **CHANGE**: `"CHANGE"` = `'CHANGE'`

##### REPLACE\_DEFAULT

`readonly` **REPLACE\_DEFAULT**: `"REPLACE_DEFAULT"` = `'REPLACE_DEFAULT'`

##### LIST

`readonly` **LIST**: `"LIST"` = `'LIST'`

##### TOGGLE\_LIST

`readonly` **TOGGLE\_LIST**: `"TOGGLE_LIST"` = `'TOGGLE_LIST'`

##### WRAP

`readonly` **WRAP**: `"WRAP"` = `'WRAP'`

##### EXTRACT

`readonly` **EXTRACT**: `"EXTRACT"` = `'EXTRACT'`

##### END

`readonly` **END**: `"END"` = `'END'`

***

### transactions

`const` **transactions**: `IStyleTransactions`

Defined in: [src/core/selection/style/transactions.ts:67](https://github.com/xdan/jodit/blob/main/src/core/selection/style/transactions.ts#L67)

### findCorrectCurrentNode()

**findCorrectCurrentNode**(`node`, `range`, `rightMode`, `isCollapsed`, `checkChild`, `child`): `object`

Defined in: [src/core/selection/helpers/index.ts:43](https://github.com/xdan/jodit/blob/main/src/core/selection/helpers/index.ts#L43)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | [`Node`](https://developer.mozilla.org/docs/Web/API/Node) |
| `range` | [`Range`](https://developer.mozilla.org/docs/Web/API/Range) |
| `rightMode` | `boolean` |
| `isCollapsed` | `boolean` |
| `checkChild` | `boolean` |
| `child` | (`nd`) => [`Node`](https://developer.mozilla.org/docs/Web/API/Node) \| `null` |

#### Returns

`object`

##### node

**node**: [`Node`](https://developer.mozilla.org/docs/Web/API/Node)

##### rightMode

**rightMode**: `boolean`