SALEOR 3115 Fix EditorJS inline formatting (#1096)

* Fix EditorJS inline formatting * Update changelog
saleor · May 7, 2021 · a4ac442 · a4ac442
1 parent 074c76f
commit a4ac442
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,6 +42,7 @@ All notable, unreleased changes to this project will be documented in this file.
   - useFormset.setItemValue wrong updates,
 - Drop deprecated fields - #1071 by @jwm0
 - Add service worker - #1073 by @dominik-zeglen
+- Fix EditorJS inline formatting - #1096 by @orzechdev
 
 # 2.11.1
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@editorjs/header": "^2.6.1",
     "@editorjs/image": "^2.6.0",
     "@editorjs/list": "^1.6.1",
+    "@editorjs/paragraph": "^2.8.0",
     "@editorjs/quote": "^2.4.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",

diff --git a/src/components/RichTextEditor/RichTextEditorContent.tsx b/src/components/RichTextEditor/RichTextEditorContent.tsx
@@ -6,6 +6,7 @@ import EditorJS, {
 } from "@editorjs/editorjs";
 import Header from "@editorjs/header";
 import List from "@editorjs/list";
+import Paragraph from "@editorjs/paragraph";
 import Quote from "@editorjs/quote";
 import strikethroughIcon from "@saleor/icons/StrikethroughIcon";
 import classNames from "classnames";
@@ -20,16 +21,29 @@ export interface RichTextEditorContentProps {
   onReady?: () => void;
 }
 
+const inlineToolbar = ["link", "bold", "italic", "strikethrough"];
+
 export const tools: Record<string, ToolConstructable | ToolSettings> = {
   header: {
     class: Header,
     config: {
       defaultLevel: 1,
       levels: [1, 2, 3]
-    }
+    },
+    inlineToolbar
+  },
+  list: {
+    class: List,
+    inlineToolbar
+  },
+  quote: {
+    class: Quote,
+    inlineToolbar
+  },
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar
   },
-  list: List,
-  quote: Quote,
   strikethrough: createGenericInlineTool({
     sanitize: {
       s: {}