@techstacker/tse-font-family-plugin

5.2.0-alpha.273b0e7e • Public • Published
Nossas Cidades logo

@slate-editor/font-family-plugin

SlateJS font family plugin.

npm package npm downloads

Installation

The @slate-editor/font-family-plugin is available as an npm package.

yarn add @slate-editor/font-family-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { FontFamilyPlugin, FontFamilyDropdown } from '@slate-editor/font-family-plugin'

const plugins = [
  FontFamilyPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <FontFamilyDropdown />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

API

Name Description
FontFamilyMark Component that holds the html that will wrap the content with font family style.
FontFamilyUtils Generic file that holds the util common functions.
FontFamilyButton Button component that have behaviour to wrap content with font family style.
FontFamilyKeyboardShortcut Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.

TODO

  • Make accepts keyboard shortcuts?;
  • Add keyboard shortcut to apply font family to expanded selection;
  • Add keyboard shortcut to remove font family from expanded selection;
  • Add button to apply font family to expanded selection;
  • Add button to remove font family from expanded selection;
  • Add handle to manipulates collapsed selection to remove font family to anchor word;
  • Add behaviour to show which font family have applied to collapsed selection;
  • Add behaviour to show which font family have applied to expanded selection;

Package Sidebar

Install

npm i @techstacker/tse-font-family-plugin

Weekly Downloads

0

Version

5.2.0-alpha.273b0e7e

License

MIT

Unpacked Size

13.8 kB

Total Files

11

Last publish

Collaborators

  • kandelborg
  • techstacker-owner