feat: add two pre-defined tools: ItalicInlineTool and StrongInlineTool

README.md

@@ -45,6 +45,8 @@ import EditorJs from '@natterstefan/react-editor-js'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
 
+import createGenericInlineTool, { ItalicInlineTool } from 'editorjs-inline-tool'
+
 const TOOLS = {
   header: Header,
   paragraph: {
@@ -64,6 +66,8 @@ const TOOLS = {
         '<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,
 }
 
 const App = () => {
@@ -83,6 +87,9 @@ options are available:
 | tagName     |  `true`  | `string` | `undefined` | text [formatting tag](https://www.w3schools.com/html/html_formatting.asp) (eg. `bold`)                                                             |
 | toolboxIcon |  `true`  | `string` | `undefined` | Icon for the tools [inline toolbar](https://editorjs.io/inline-tools-api-1#render)                                                                 |
 
+Additionally, there are two pre-defined inline tools available: `ItalicInlineTool`
+and `StrongInlineTool` (they can be found [here](src/inline-tools.tsx)).
+
 ## Licence
 
 [MIT](LICENCE)

src/__stories__/config.ts

@@ -20,12 +20,19 @@ import SimpleImage from '@editorjs/simple-image'
 import Table from '@editorjs/table'
 import Warning from '@editorjs/warning'
 
-import createGenericInlineTool from '..'
+import createGenericInlineTool, { ItalicInlineTool } from '..'
 
 export const TOOLS = {
   embed: Embed,
-  table: Table,
-  list: List,
+  table: {
+    class: Table,
+    // in some cases it is also required to explicitly define `inlineToolbar` _again_
+    inlineToolbar: ['bold', 'italic', 'link'],
+  },
+  list: {
+    class: List,
+    inlineToolbar: ['bold', 'italic', 'link'],
+  },
   warning: Warning,
   code: Code,
   linkTool: LinkTool,
@@ -39,6 +46,7 @@ export const TOOLS = {
   simpleImage: SimpleImage,
   // overwrite default tools of editorjs by using the same name
   bold: {
+    // use createGenericInlineTool
     class: createGenericInlineTool({
       sanitize: {
         strong: {},
@@ -49,15 +57,6 @@ export const TOOLS = {
         '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
     }),
   },
-  italic: {
-    class: createGenericInlineTool({
-      sanitize: {
-        em: {},
-      },
-      shortcut: 'CMD+I',
-      tagName: 'EM',
-      toolboxIcon:
-        '<svg class="icon icon--italic" width="34px" height="34px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#italic"></use></svg>',
-    }),
-  },
+  // or use a pre-defined tool
+  italic: ItalicInlineTool,
 }

src/index.tsx

@@ -1 +1,2 @@
 export { default } from './tool'
+export { ItalicInlineTool, StrongInlineTool } from './inline-tools'

src/inline-tools.tsx

@@ -0,0 +1,23 @@
+import createGenericInlineTool from './tool'
+
+export const ItalicInlineTool = createGenericInlineTool({
+  sanitize: {
+    em: {},
+  },
+  shortcut: 'CMD+I',
+  tagName: 'EM',
+  toolboxIcon:
+    // icon editor-js uses
+    '<svg class="icon icon--italic" width="34px" height="34px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#italic"></use></svg>',
+})
+
+export const StrongInlineTool = createGenericInlineTool({
+  sanitize: {
+    strong: {},
+  },
+  shortcut: 'CMD+B',
+  tagName: 'STRONG',
+  toolboxIcon:
+    // icon editor-js uses
+    '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
+})