# slate-edit-code

> A Slate plugin to handle code blocks editing.

Latest version **0.15.5** (published 2018-06-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install slate-edit-code
pnpm add slate-edit-code
yarn add slate-edit-code
bun add slate-edit-code
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.5 |
| Published | 2018-06-24 |
| First published | 2016-07-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Maintainers | aarono, gitbook-bot, jpreynat, samypesse, soreine, zhouzi |
| Keywords | slate |

## Links

- npm: https://www.npmjs.com/package/slate-edit-code
- Repository: https://github.com/GitbookIO/slate-edit-code
- Homepage: https://github.com/GitbookIO/slate-edit-code#readme
- Issues: https://github.com/GitbookIO/slate-edit-code/issues
- npm.io page: https://npm.io/package/slate-edit-code

## Dependencies (4)

- [ends-with](https://npm.io/package/ends-with.md) ^0.2.0
- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.1.1
- [detect-indent](https://npm.io/package/detect-indent.md) ^4.0.0
- [detect-newline](https://npm.io/package/detect-newline.md) ^2.1.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.15.5 (latest) — 2018-06-24
- 0.15.4 — 2018-06-19
- 0.15.3 — 2018-06-18
- 0.15.2 — 2018-06-18
- 0.15.1 — 2018-06-15
- 0.15.0 — 2018-03-23
- 0.14.0 — 2018-03-03
- 0.13.3 — 2018-03-03
- 0.13.2 — 2017-11-27
- 0.13.1 — 2017-11-27
- 0.13.0 — 2017-11-07
- 0.12.0 — 2017-11-07
- 0.11.0 — 2017-09-18
- 0.10.4 — 2017-09-18
- 0.10.3 — 2017-07-03
- … 20 more at https://npm.io/package/slate-edit-code/versions

## README

# slate-edit-code

[![NPM version](https://badge.fury.io/js/slate-edit-code.svg)](http://badge.fury.io/js/slate-edit-code)
[![Linux Build Status](https://travis-ci.org/GitbookIO/slate-edit-code.png?branch=master)](https://travis-ci.org/GitbookIO/slate-edit-code)

A Slate plugin to handle code block editing.

### Install

```js
npm install slate-edit-code
```

### Features

- Pressing <kbd>Enter</kbd> insert a new line starting with the right indentation
- Pressing <kbd>Tab</kbd> insert the right indentation if selection is collapsed or indent all lines in selection
- Pressing <kbd>Delete</kbd> remove the indentation before cursor if possible
- Pressing <kbd>Mod+Enter</kbd> exits the code block
- Pressing <kbd>Mod+A</kbd> selects all the text in the block

> <kbd>Mod</kbd> means <kbd>Ctrl</kbd> on Windows/Linux and <kbd>Command</kbd> on Mac.

### Structure

This plugin uses the following structure for code blocks:

``` yaml
nodes:
  - object: block
    type: code_block
    nodes:
      - object: block
        type: code_line
        nodes:
          - text: "A code block is made of..."
      - object: block
        type: code_line
        nodes:
          - text: "...several code lines"

```

The plugin automatically converts multiline texts in `code_blocks` into the appropriate number of `code_lines`.


### Simple Usage

```js
import EditCode from 'slate-edit-code'

const plugins = [
  EditCode()
]
```

#### Options arguments

- `containerType = 'code_block' : string` — The type of the code containers
- `lineType = 'code_line' : string` — The type of the code lines
- `exitBlockType = 'paragraph' : null | string` — <kbd>Mod+Enter</kbd> will exit the code container, into the given block type. Backspace at start of an empty code container will convert it to the given block type. Pass `null` to disable this behavior.
- `onExit: (Change) => void | Change` — Change to do when the user hits <kbd>Mod+Enter</kbd>. Defaults to exiting the code block, into a new `exitBlockType` block.
- `selectAll = true : boolean` — True to select all code inside a code container on <kbd>Mod+A</kbd>
- `allowMarks = false : boolean` —  False disallow marks in code blocks by normalizing them away.
- `getIndent: (Value) => string` — Returns the indent unit as a string. The current value is passed as context.

#### Suppressing onKeyDown behavior

Some behavior implemented by this plugins have no corresponding option. While there is an option `selectAll` to disable the behavior on `Mod+A`,  If you would like to fine tune these behavior, you can always redefine the exported `onKeyDown` function.

The following example disable all indent behavior

```js
import EditCode from 'slate-edit-code'

const options = { ... };

const basePlugin = EditCode(options);

const customPlugin = {
  ...basePlugin,
  onKeyDown(event, change, editor) {
    if (event.key === 'Tab') {
      // Bypass the original plugin behavior on `Tab`
      return;
    } else {
      return basePlugin.onKeyDown(event, change, editor);
    }
  }
}

// Use customPlugin later on
```

### Utilities and Changes

`slate-edit-code` exports utilities, accessible like so:

``` js
const plugin = EditCode()

// Access exported utilities there
plugin.utils
```

#### `utils.deserializeCode`

`plugin.utils.deserializeCode(text: String) => Block`

Split a text string into lines, and deserialize them to a `code_container` `Block`, with one children `code_line` `Block` per line.


#### `changes.toggleCodeBlock`

`plugin.changes.toggleCodeBlock(change: Change, type: String) => Change`

Toggle a block into a code block or a normal block (defined by `type`).

#### `changes.wrapCodeBlockByKey`

`plugin.changes.wrapCodeBlockByKey(change: Change, key: String) => Change`

Convert a block (paragraph, etc) into a code block.

#### `changes.wrapCodeBlock`

`plugin.changes.wrapCodeBlock(change: Change) => Change`

Convert current block (paragraph, etc) into a code block.

#### `changes.unwrapCodeBlockByKey`
`plugin.changes.unwrapCodeBlockByKey(change: Change, key: String, type: String) => Change`

Convert a code block into a normal block (paragraph, etc).

#### `changes.unwrapCodeBlock`

`plugin.changes.unwrapCodeBlock(change: Change, type: String) => Change`

Convert current code block into a normal block (paragraph, etc).

---
_Source: https://npm.io/package/slate-edit-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._