# vue-tik

> Opinionated Tiptap Vue Wrapper Editor

Latest version **1.0.8** (published 2023-08-07) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install vue-tik
pnpm add vue-tik
yarn add vue-tik
bun add vue-tik
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-08-07 |
| First published | 2023-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 37 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Albet Novendo |
| Maintainers | albetnov |
| Keywords | editor, vue, vue-editor, vue editor, tiptap |

## Links

- npm: https://www.npmjs.com/package/vue-tik
- Repository: https://github.com/albetnov/vue-tik
- Homepage: https://github.com/albetnov/vue-tik#readme
- Issues: https://github.com/albetnov/vue-tik/issues
- npm.io page: https://npm.io/package/vue-tik

## Dependencies (37)

- [lowlight](https://npm.io/package/lowlight.md) ^2.9.0
- [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.0.4
- [@tiptap/core](https://npm.io/package/@tiptap/core.md) ^2.0.4
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.8.0
- [oh-vue-icons](https://npm.io/package/oh-vue-icons.md) 1.0.0-rc3
- [@tiptap/vue-3](https://npm.io/package/@tiptap/vue-3.md) ^2.0.4
- [@headlessui/vue](https://npm.io/package/@headlessui/vue.md) ^1.7.14
- [@tiptap/extension-bold](https://npm.io/package/@tiptap/extension-bold.md) ^2.0.4
- [@tiptap/extension-code](https://npm.io/package/@tiptap/extension-code.md) ^2.0.4
- [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^2.0.4
- [@tiptap/extension-text](https://npm.io/package/@tiptap/extension-text.md) ^2.0.4
- [@tiptap/extension-color](https://npm.io/package/@tiptap/extension-color.md) ^2.0.4
- [@tiptap/extension-image](https://npm.io/package/@tiptap/extension-image.md) ^2.0.4
- [@tiptap/extension-table](https://npm.io/package/@tiptap/extension-table.md) ^2.0.4
- [@tiptap/extension-italic](https://npm.io/package/@tiptap/extension-italic.md) ^2.0.4
- [@tiptap/extension-strike](https://npm.io/package/@tiptap/extension-strike.md) ^2.0.4
- [@tiptap/extension-heading](https://npm.io/package/@tiptap/extension-heading.md) ^2.0.4
- [@tiptap/extension-history](https://npm.io/package/@tiptap/extension-history.md) ^2.0.4
- [@tiptap/extension-youtube](https://npm.io/package/@tiptap/extension-youtube.md) ^2.0.4
- [@tiptap/extension-document](https://npm.io/package/@tiptap/extension-document.md) ^2.0.4
- [@tiptap/extension-highlight](https://npm.io/package/@tiptap/extension-highlight.md) ^2.0.4
- [@tiptap/extension-list-item](https://npm.io/package/@tiptap/extension-list-item.md) ^2.0.4
- [@tiptap/extension-paragraph](https://npm.io/package/@tiptap/extension-paragraph.md) ^2.0.4
- [@tiptap/extension-table-row](https://npm.io/package/@tiptap/extension-table-row.md) ^2.0.4
- [@tiptap/extension-task-item](https://npm.io/package/@tiptap/extension-task-item.md) ^2.0.4
- [@tiptap/extension-task-list](https://npm.io/package/@tiptap/extension-task-list.md) ^2.0.4
- [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^2.0.4
- [@tiptap/extension-blockquote](https://npm.io/package/@tiptap/extension-blockquote.md) ^2.0.4
- [@tiptap/extension-table-cell](https://npm.io/package/@tiptap/extension-table-cell.md) ^2.0.4
- [@tiptap/extension-text-align](https://npm.io/package/@tiptap/extension-text-align.md) ^2.0.4
- [@tiptap/extension-text-style](https://npm.io/package/@tiptap/extension-text-style.md) ^2.0.4
- [@tiptap/extension-typography](https://npm.io/package/@tiptap/extension-typography.md) ^2.0.4
- [@tiptap/extension-bullet-list](https://npm.io/package/@tiptap/extension-bullet-list.md) ^2.0.4
- [@tiptap/extension-ordered-list](https://npm.io/package/@tiptap/extension-ordered-list.md) ^2.0.4
- [@tiptap/extension-table-header](https://npm.io/package/@tiptap/extension-table-header.md) ^2.0.4
- [@tiptap/extension-horizontal-rule](https://npm.io/package/@tiptap/extension-horizontal-rule.md) ^2.0.4
- [@tiptap/extension-code-block-lowlight](https://npm.io/package/@tiptap/extension-code-block-lowlight.md) ^2.0.4

## 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

- 1.0.8 (latest) — 2023-08-07
- 1.0.7 — 2023-08-02
- 1.0.6 — 2023-08-02
- 1.0.5 — 2023-07-21
- 1.0.4 — 2023-07-20
- 1.0.2 — 2023-07-08

## README

# Vue Tik

A Opinionated Tiptap Vue Wrapper Editor. This project is simply a wrapper for Tiptap with predesigned and preinstalled module
and of course some opinionated customization.

Built on top of [UnoCSS](unocss.dev), [Headless UI](https://headlessui.com), and of course [Tiptap](tiptap.dev).

# Installation

Install the package from the NPM:

```bash
pnpm i vue-tik
```

# Quick Start

You can install the plugin in your main entry vue files:

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { Editor } from 'vue-tik'
import 'vue-tik/dist/style.css'

createApp(App).use(Editor).mount('#app')
```

After it you can start using it immediately:

```vue
<script setup lang="ts">
import { useEditor } from 'vue-tik'

const { editor } = useEditor()
</script>
<template>
  <vue-tik :config="editor" />
</template>
```

# Configuration

The package supports Global and Local scope configuration.

To define a global scope configuration, simply put the configuration right next to your `use()` statement:

```typescript
createApp(App)
  .use(Editor, {
    image: {
      strategy: 'string'
    }
  })
  .mount('#app')
```

And for local scope configuration, you can put the config in `useEditor` argument:

```typescript
const { editor } = useEditor({
  image: {
    strategy: 'string'
  }
})
```

> Using local configuration will override the current global configuration for the component.

Here's the full configuration schema:

```typescript
export interface EditorOptions {
  image?: {
    strategy?: 'string' | 'upload'
    url?: string
    requests?: object
    headers?: HeadersInit
    bindId?: boolean
  }
  initialValue?: string
  highlight?: {
    color?: string
  }
}
```

| Key               | Description                                                                        | Value              |
| ----------------- | ---------------------------------------------------------------------------------- | ------------------ |
| `image.strategy`  | Set the strategy of how image being uploaded is handled                            | `string \| upload` |
| `image.url`       | Set the target url of `upload` strategy (required if `image.strategy` is `upload`) | `string`           |
| `image.requests`  | Append the requests payload of the image upload (optional)                         | `object`           |
| `image.headers`   | Append the header payload of the image upload (optional)                           | `object`           |
| `image.bindId`    | Bind the unique id from the image upload to the parsed content (optional)          | `boolean`          |
| `initialValue`    | Set the initial value of the editor.                                               | `string`           |
| `highlight.color` | Set the color of the editor highlight                                              | `string`           |

# Handling Image Uploads

VueTik also provide 2 ways of uploading an image. The easiest `string` method which use `base64` by default.

If that's not satisfies you, VueTik also provide `upload` method which as the name said, it's basically an upload type.

To setup the `upload` all you need to do is:

```typescript
import { useEditor } from 'vue-tik'

const { Editor } = useEditor({
  image: {
    strategy: 'upload',
    url: 'http://localhost:3000/upload'
  }
})
```

The upload will use `POST` using `form-data`, and this is the response VueTik will expect from your API:

```json
{
  "image": {
    "url": "https://localhost:3000/img/upload.jpg",
    "id": "bf81cb61-3014-4d23-a029-0bd202396f31"
  },

  "error": false
}
```

and of course `2xx` status code. To simplify the upload there's also the server side integration (Coming Soon).

# Twitter Integration

The editor also support twitter embeds. However it's not like full integration yet. I do have a plan for it.

The editor integration requires you to register the peer dependency in order to render the twitter embed:

```html
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
```

> There's still a limitation for twitter integeration. Currently if you use `getContent` or `getContentJson` the twitter node will only return div with data-twitter-id attribute. This means you have to hydrate it manually using the createTwitter API.

# Rendering VueTik

To render the result of VueTik you can use api from `useEditor`:

- `getContent()` return the `html` content
- `getContentJson()` return the `json` content

Alternatively, you can also use the editor itself [Tiptap Docs](https://tiptap.dev/guide/output#option-1-read-only-instance-of-tiptap). The `useEditor` also exposed the API of the original Tiptap's Editor.

Here's the example:

```typescript
const { editor } = useEditor()

onMounted(() => {
  editor.editor.value?.setEditable(false)
})
```

> Even though you can do above example, I am still unsure if the menu will also gone? Perhaps I should provide the official API to perform that. Well that's a plan for sure.

The recommended way is of course to use the content from `getContent` or `getContentJson` API and transforms it manually or use Server Side Integration to do it automatically for you (Coming Soon).

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