From 17cc691403626cad0e5adfff65976b5d099c0d5e Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Fri, 26 Jun 2020 00:07:15 +0200
Subject: [PATCH] Fixed bug that two p-tags were encapsulated inside each other
 (#278)

* Fixed bug that two p-tags were encapsulated inside each other

This bug was introduced because the wider-possible-replacer replaced each element that was subject to be enlarged with a brand new p-surrounding. That surrounding got the key of the old (now inner) element and therefore casts an duplicate key exception.
This fix solves that problem by setting the 'wider-possible' class attribute directly on the selected tag instead of creating a surrounding.

* Removed unnecessary console log

* Optimized attribute assignment to not fail on elements without attribs

* Added comment describing the node.attribs assignment
---
 .../editor/markdown-renderer/markdown-renderer.tsx         | 2 +-
 .../possible-wider/possible-wider-replacer.tsx             | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/markdown-renderer/markdown-renderer.tsx b/src/components/editor/markdown-renderer/markdown-renderer.tsx
index 9caf1acfe..d8e77892f 100644
--- a/src/components/editor/markdown-renderer/markdown-renderer.tsx
+++ b/src/components/editor/markdown-renderer/markdown-renderer.tsx
@@ -52,7 +52,7 @@ export interface MarkdownPreviewProps {
   wide?: boolean
 }
 
-const createMarkdownIt = ():MarkdownIt => {
+const createMarkdownIt = (): MarkdownIt => {
   const md = new MarkdownIt('default', {
     html: true,
     breaks: true,
diff --git a/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx b/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
index 6ed82aa3a..ecb0117cb 100644
--- a/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
@@ -17,8 +17,9 @@ export class PossibleWiderReplacer implements ComponentReplacer {
     if (!(childIsImage || childIsYoutube || childIsVimeo || childIsPDF)) {
       return
     }
-    return (<p className='wider-possible'>
-      {subNodeConverter(node, index)}
-    </p>)
+
+    // This appends the 'wider-possible' class to the node for a wider view in view-mode
+    node.attribs = Object.assign(node.attribs || {}, { class: `wider-possible ${node.attribs?.class || ''}` })
+    return subNodeConverter(node, index)
   }
 }