# wangEditor hashtag plugin

[中文文档](./README.md)

## Introduction

**Fork from https://github.com/wangeditor-team/wangEditor-plugin-mention**

[wangEditor](https://www.wangeditor.com/en/) hashtag plugin, like `#James`.

![](./_img/demo.png)

## Installation

```shell
yarn add wangeditor-hashtag-plugin
```

## Usage

[Vue demo source code](https://github.com/wangfupeng1988/vue2-wangeditor-demo/blob/master/src/components/MyEditorWithMention.vue)

### Use in editor

```ts
import { IDomEditor, Boot, IEditorConfig } from '@wangeditor/editor'
import hashtagModule, { HashtagElement } from 'wangeditor-hashtag-plugin'

// Register
// You should register this before create editor, and register only once (not repeatedly).
Boot.registerModule(hashtagModule)

// Show your modal
function showModal(editor: IDomEditor) {
  // Get cursor's position info, to set modal position
  const domSelection = document.getSelection()
  const domRange = domSelection.getRangeAt(0)
  if (domRange == null) return
  const selectionRect = domRange.getBoundingClientRect()

  // Get editor container's position info, maybe help to get right modal position
  const containerRect = editor.getEditableContainer().getBoundingClientRect()

  // Show your modal, and set position
  // PS: You must implement the modal yourself, use <div> or Vue React component


  // Insert hashtag node when emit some event.
  function insertHashtag() {
    const hashtagNode: HashtagElement = {
      type: 'hashtag', // must be 'hashtag'
      value: 'James', // text
      info: { x: 1, y: 2 }, // extended info
      children: [{ text: '' }], // must have an empty text node in children
    }

    editor.restoreSelection()
    editor.deleteBackward('character') // delete '#'
    editor.insertNode(hashtagNode)
    editor.move(1) // move curser
  }
}

// hide your modal
function hideModal(editor: IDomEditor) {
  // hide your modal
}

// editor config
const editorConfig: Partial<IEditorConfig> = {
  EXTEND_CONF: {
    hashtagConfig: {
      showModal, // required
      hideModal, // required
    },
  },

  // others...
}

// Then create editor and toolbar, you will use `editorConfig`
```

### Render HTML

You will get a hashtag's HTML format like this. You need to `decodeURIComponent` the value of `data-info`.

```html
<span data-w-e-type="hashtag" data-w-e-is-void data-w-e-is-inline data-value="James" data-info="%7B%22x%22%3A10%7D">#James</span>
```

### Custom styles css variables

```css
--w-e-hashtag-ml: 2px;
--w-e-hashtag-mr: 2px;
--w-e-hashtag-radius: 4px;
--w-e-hashtag-pd: 2px;
--w-e-hashtag-text-color: #1472ff;
--w-e-hashtag-bg-color: transparent;
--w-e-hashtag-selected-border-color: #b4d5ff;
```