# svelte-rich-text

> A Svelte rich text editor component

Latest version **0.0.9** (published 2023-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-rich-text
pnpm add svelte-rich-text
yarn add svelte-rich-text
bun add svelte-rich-text
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-04-18 |
| First published | 2023-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Max Elia Schweigkofler |
| Maintainers | maxelia |

## Links

- npm: https://www.npmjs.com/package/svelte-rich-text
- Repository: https://github.com/hintergrundjs/svelte-rich-text
- Homepage: https://github.com/hintergrundjs/svelte-rich-text#readme
- Issues: https://github.com/hintergrundjs/svelte-rich-text/issues
- npm.io page: https://npm.io/package/svelte-rich-text

## Recent versions

- 0.0.9 (latest) — 2023-04-18
- 0.0.8 — 2023-04-18
- 0.0.7 — 2023-04-18
- 0.0.6 — 2023-04-17
- 0.0.5 — 2023-04-17
- 0.0.4 — 2023-04-17
- 0.0.3 — 2023-04-17
- 0.0.2 — 2023-04-17
- 0.0.1 — 2023-04-17

## README

# Rich Text for Svelte

A rich editor, different than most others, because in it's object representation it separates the text from the formatting.
It is aspiring to become the most minimalistic most customizable rich-text-editor of all time.

**It's bundle size is only 8.1 kB!**

_!!! Attention the editor is not production ready and still contains some known bugs !!!_

## Demo

The Demo can be found at:
[sveltehack.maxelia.com](https://sveltehack.maxelia.com)

## Usage

Install the package:

```
npm install svelte-rich-text
# or yarn, pnpm, etc.
```

Import the components you need:

```svelte
<script>
	import { RichEditor, html } from 'svelte-rich-text';

	let startContent = [
        {
            type: 'h1',
            text: "Rich's favourite rich-text-editor",
        },
        {
            type: 'p',
            text: "This rich editor is different than most others.",
            format: [
                {
                    start: 20,
                    end: 29,
                    i: true,
                },
            ],
        },
    ];
</script>

<RichEditor content={startContent} />
```

The `html` export is a svelte store which is constantly updated. This can be handy if clean html has to be exported.

In order to use it use it like any other svelte store:

```svelte
<script>
    import { RichEditor, html } from 'svelte-rich-text';

    html.subscribe((value) => {
        // do something with the html value
    });
</script>
<div>
    {@html $html}
</div>
```

## Docs

Unlike most other available rich-text-editors, which constantly split up text in small chuncks on format changes, this one simply stores the text separately from the formatting and only updates the format in the object representation without triggering a re-render of the DOM inside the editor.

The object representation is an array of TextNodes which each have a type and a text.

```typescript
export type TextNode = {
    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'ul' | 'ol' | 'blockquote' | 'code' | 'hr';
    text: string;
    format?: FormatSection[];
};
```

The `format` property is an array of FormatSections which each have a start and end index and a format.

```typescript
export type FormatSection = {
    start: number;
    end: number;
} & { [key in HtmlFormat]?: boolean | undefined };

export type HtmlFormat = 'b' | 'i' | 'code' | 'u' | 'span' | 'a' | 'img';
```

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