From a4ac442cdac27c550dc669dcff9133713d9ef561 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Fri, 7 May 2021 10:06:08 +0200
Subject: [PATCH] SALEOR 3115 Fix EditorJS inline formatting (#1096)

* Fix EditorJS inline formatting

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 package-lock.json                             |  5 +++++
 package.json                                  |  1 +
 .../RichTextEditor/RichTextEditorContent.tsx  | 20 ++++++++++++++++---
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 022fd9728d4..d2c3e8cde9e 100644
--- 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
index e6b0b510f6e..e4383f37a36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1837,6 +1837,11 @@
       "resolved": "https://registry.npmjs.org/@editorjs/list/-/list-1.6.2.tgz",
       "integrity": "sha512-OxowV0yuE11G01czYM1dEQlz1F37ehX0ak5vAbZ9ncSXrPh0fDRw/fBxTY654FlmrsQ40UFom3owSG++tLvVGw=="
     },
+    "@editorjs/paragraph": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.8.0.tgz",
+      "integrity": "sha512-z6w5ZR0ru3p/IjxJW/tb7OcSnVttkZukQMIsnBMX1FIKc1BNdr7NwM1YoCyTl4OnC90YfL0xgES6/20/W267pw=="
+    },
     "@editorjs/quote": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@editorjs/quote/-/quote-2.4.0.tgz",
diff --git a/package.json b/package.json
index cc3b03830fb..543b9ba3514 100644
--- 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
index c6772743dd0..bae447138ea 100644
--- 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: {}