Slate toggle-mark.

Introduction

This package is not for installing directly.
Toggle mark means a mark which is toggleable and without any data, like bold, italic, underline, ...etc.

Usage

Editor

import React from 'react';
import { Bold as BoldIcon } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { Toolbar } from '@artibox/slate-toolbar';
import { createToggleMarkCreator } from '@artibox/slate-toggle-mark';

const createBold = createToggleMarkCreator({
  type: 'bold',
  component: 'strong',
  hotkey: 'mod+b'
});
const Bold = createBold();

const plugins = [
  Bold.forPlugin(),
  Toolbar.forPlugin({
    expandedTools: [{ icon: BoldIcon, hook: Bold.forToolHook() }]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;

Jsx Serializer

import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
import { createToggleMarkJsxSerializerRuleCreator } from '@artibox/slate-toggle-mark';

const createBoldJsxSerializerRule = createToggleMarkJsxSerializerRuleCreator({
  type: 'bold',
  component: 'strong'
});

const jsxSerializer = createJsxSerializer({
  marks: [
    createBoldJsxSerializerRule()
  ]
});

...

return (
  <div>
    {jsxSerializer(valueJSON /* from slate */)}
  </div>
);

API

• createToggleMarkCreator
• createToggleMarkJsxSerializerRuleCreator
• ToggleMark.forPlugin
• ToggleMark.forToolHook
• ToggleMarkController