Extensions

hashtag

Node takes options 0.24 kB gzipped

A hashtag, as a node rather than styled text.

The same argument as `mention`: an atom cannot be half-deleted into `#mat`, and a document that stores the tag as an attribute can be asked for its tags without anyone parsing prose. Typing `#word` and a space makes one; `#` inside a word — `a#b`, a colour, a URL fragment — is left alone.

1 · Install

One package for every extension · there is no @matrajs/hashtag to install. 

npm i @matrajs/core

2 · Add it to the editor

Import it and put it in the extensions array. That array is the whole feature list: what is not in it is not in your bundle and not in the document's schema. 

import { createEditor, document, paragraph, text, hashtag } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, hashtag({ … })],
  element: document.querySelector('#editor'),
})

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.insertHashtag('…')
editor.focus()

Wired to a button, with the pressed state kept in step:

const button = document.querySelector('#insertHashtag')

button.addEventListener('click', () => {
  editor.commands.insertHashtag('…')
  editor.focus()
})

const read = () => button.setAttribute('aria-pressed', String(editor.isActive('hashtag')))
editor.on('selectionChange', read)
editor.on('change', read)
read()

Both events, not one. selectionChange covers the caret moving into it; change covers the command that changed it without moving anything. A toolbar wired to only the first goes stale the moment someone uses the keyboard.

Options

hashtag is a function · call it with an options object.

Option Type What it does
name string Node name, if you need two kinds of tag in one editor.
render (tag: string) => string What appears in the document. Defaults to `#tag`.

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Command Call
insertHashtag editor.commands.insertHashtag(tag: string)

In the document

Attribute Default
tag none

← All 83 extensions

Edit this page on GitHub