@artibox/slate-link

<div align="center"> <img src="https://raw.githubusercontent.com/ianstormtaylor/slate/master/docs/images/banner.png" height="200" /> </div>

Usage no npm install needed!

<script type="module">
  import artiboxSlateLink from 'https://cdn.skypack.dev/@artibox/slate-link';
</script>

README

@artibox/slate-link

Slate link.

npm package npm downloads

Installation

npm install @artibox/slate-link --save

or

$ yarn add @artibox/slate-link

Usage

Editor

import React from 'react';
import { Link as LinkIcon } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { Toolbar } from '@artibox/slate-toolbar';
import { createLink } from '@artibox/slate-link';

const Link = createLink();

const plugins = [
  Link.forPlugin(),
  Toolbar.forPlugin({
    expandedTools: [
      { icon: Link, hook: link.forToolHook() },
      { icon: Unlink, hook: link.forToolHook({ command: 'remove' }) }
    ]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;

Jsx Serializer

import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
import { createLinkJsxSerializerRule } from '@artibox/slate-link';

const jsxSerializer = createJsxSerializer({
  inlines: [
    createLinkJsxSerializerRule()
  ]
});

...

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

API

Utils

Components

  • Link - Default component only for renderer of editor since it provide tooltip.
  • LinkModal - Currently archived, please don't use it.