# tiptap-editor

> custom setup for the tiptap editor

Latest version **2.0.0** (published 2023-09-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tiptap-editor
pnpm add tiptap-editor
yarn add tiptap-editor
bun add tiptap-editor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-09-20 |
| First published | 2019-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 441.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | alec@mirusresearch.com |
| Maintainers | eyepulp, alec.troemel |

## Links

- npm: https://www.npmjs.com/package/tiptap-editor
- Repository: https://github.com/mirusresearch/tiptap-editor
- Issues: https://github.com/mirusresearch/tiptap-editor
- npm.io page: https://npm.io/package/tiptap-editor

## Dependencies (1)

- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.7.14

## Recent versions

- 2.0.0 (latest) — 2023-09-20
- 1.5.0 — 2023-03-29
- 1.4.10 — 2023-02-21
- 1.4.9 — 2022-11-28
- 1.4.8 — 2022-11-28
- 1.4.7 — 2022-10-27
- 1.4.6 — 2022-08-13
- 1.4.5 — 2022-06-30
- 1.4.4 — 2022-04-11
- 1.4.3 — 2021-09-23
- 1.4.2 — 2021-08-18
- 1.4.1 — 2021-07-22
- 1.4.0 — 2020-05-04
- 1.3.5 — 2019-07-31
- 1.3.4 — 2019-07-31
- … 31 more at https://npm.io/package/tiptap-editor/versions

## README

# tiptap-editor

Vue component that contains our custom setup for the tiptap editor. Able to highlight phrases and give reasons/fixes to the warnings

```bash
npm i tiptap-editor
yarn add tiptap-editor
```

![example image](img/example.png)

```js
<template>
  <TextEditor
	:value.sync="localtext"
	:warnings="warnings"
	:showMenu="true"
	:maxCharacterCount="200"
	height="500px"
	placeholder="write something will-ya!"
	id="some_unique_id"
  />
</template

<script>
import tiptapEditor from './tiptap-editor.vue';

export default {
	components: { tiptapEditor },
	data() {
		return {
			warnings: [],
			value: 'this is the initial value'
		}
	}
}

</script>
```

## Props


- **value:** `String` - the text to edit

- **placeholder:** `String` - the text to display when there is nothing in the editor

- **warnings:** `[ Objects ]` - an array of text that should be warned about

	- example:
		```js
		[
			{
				value: 'the',
				message: 'did you mean...',
				options: ['too', 'pizza'], // optional
			},
			{
				value: 'test text',
				message: 'cannot say that, sorry',
				overrideClass: 'underlined-green', // optional
			},
		]
		```

- **maxCharacterCount:** `Number` - Show a count of the current number of characters. If over the max the count will show red

- **height:** `String` - height of the text editor, default is `300px`

- **showMenu:** `Boolean` - if false, hide the format menu

- **id:** `String` - give the editor a unique id. Also adds aria tags to link the editor menu to the text area

## Events

- **update:value** - emitted whenever the core text value changes

- **new-character-count** - the new internal character count of the value. This is useful since the synced value may have formatting, which internal is ignored when counting characters.

## Setup

- clone this repo
- `cd` into the repo directory and run `yarn install`
- run `yarn serve`

## Available Scripts

- `yarn serve` - start the dev server
- `yarn build` - build for production
- `yarn preview` - locally preview production build
- `yarn format` - run Prettier to format code
- `yarn validate:format` - run Prettier with `--check` flag
- `yarn test` - run tests using vitest

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