Naan and Paneer Makhani

    editorjs-inline-tool
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    editorjs-inline-tool

    npm version Commitizen friendly

    Create an inline tool for (https://editorjs.io/) with text formatting tags (eg. bold, strong, em, u, ...).

    Getting started

    npm i editorjs-inline-tool --save
     
    # or 
    yarn add editorjs-inline-tool

    PeerDependencies

    You have to install the required peerDependencies, which are listed by the following command:

    npm info "editorjs-inline-tool" peerDependencies

    If using npm 5+, use this shortcut:

    npx install-peerdeps --dev editorjs-inline-tool
     
    # or 
    yarn add editorjs-inline-tool -D --peer

    Usage

    This is an example where GenericInlineTool is used in a React app (using @natterstefan/react-editor-js). But this should work for any other framework as well.

    // index.js
    import EditorJs from '@natterstefan/react-editor-js'
    import Header from '@editorjs/header'
    import Paragraph from '@editorjs/paragraph'
     
    import createGenericInlineTool, {
      ItalicInlineTool,
      UnderlineInlineTool,
    } from 'editorjs-inline-tool'
     
    const TOOLS = {
      header: Header,
      paragraph: {
        class: Paragraph,
        inlineToolbar: true,
      },
      // add custom tags or overwrite default tools of editorjs by using the same
      // name (eg. `bold` or `italic`)
      bold: {
        class: createGenericInlineTool({
          sanitize: {
            strong: {},
          },
          shortcut: 'CMD+B',
          tagName: 'STRONG',
          toolboxIcon:
            '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
        }),
      },
      // or use a pre-defined tool instead
      italic: ItalicInlineTool,
      underline: UnderlineInlineTool,
    }
     
    const App = () => {
      return <EditorJs tools={TOOLS} data={data} />
    }

    Configuration

    createGenericInlineTool returns an InlineTool for EditorJS. The following options are available:

    Name Required Type Default Description
    sanitize false object undefined Object that defines rules for automatic sanitizing.
    shortcut false string undefined Shortcut to apply Tool's render and inserting behaviour
    tagName true string undefined text formatting tag (eg. bold)
    toolboxIcon true string undefined Icon for the tools inline toolbar

    Additionally, there are pre-defined inline tools available: ItalicInlineTool, StrongInlineTool and UnderlineInlineTool (they can be found here).

    Licence

    MIT

    This project is not affiliated, associated, authorized, endorsed by or in any way officially connected to EditorJS (editorjs.io).

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):

    Stefan Natter
    Stefan Natter

    💻 📖 💡

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i editorjs-inline-tool

    DownloadsWeekly Downloads

    1,654

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    82.2 kB

    Total Files

    42

    Last publish

    Collaborators

    • natterstefan