From 8ccb1d08cf0920eca62db59c1d7e3fb872f4ee3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 14 Mar 2021 21:45:14 +0100
Subject: [PATCH] add dynamic tags

---
 packages/react/src/NodeViewContent.tsx | 11 ++++++++---
 packages/react/src/NodeViewWrapper.tsx | 13 +++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/NodeViewContent.tsx b/packages/react/src/NodeViewContent.tsx
index ad205bac..62d9cb28 100644
--- a/packages/react/src/NodeViewContent.tsx
+++ b/packages/react/src/NodeViewContent.tsx
@@ -1,13 +1,19 @@
 import React from 'react'
 import { useReactNodeView } from './useReactNodeView'
 
-export const NodeViewContent: React.FC = props => {
+export interface NodeViewContentProps {
+  as: React.ElementType
+}
+
+export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
   // TODO
   // @ts-ignore
   const { isEditable } = useReactNodeView()
 
+  const Tag = props.as || 'div'
+
   return (
-    <div
+    <Tag
       data-node-view-content=""
       contentEditable={isEditable}
       style={{
@@ -15,5 +21,4 @@ export const NodeViewContent: React.FC = props => {
       }}
     />
   )
-
 }
diff --git a/packages/react/src/NodeViewWrapper.tsx b/packages/react/src/NodeViewWrapper.tsx
index 5905377e..3941106e 100644
--- a/packages/react/src/NodeViewWrapper.tsx
+++ b/packages/react/src/NodeViewWrapper.tsx
@@ -1,13 +1,19 @@
 import React from 'react'
 import { useReactNodeView } from './useReactNodeView'
 
-export const NodeViewWrapper: React.FC = props => {
+export interface NodeViewWrapperProps {
+  as: React.ElementType
+}
+
+export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = props => {
   // TODO
   // @ts-ignore
   const { onDragStart } = useReactNodeView()
 
+  const Tag = props.as || 'div'
+
   return (
-    <div
+    <Tag
       data-node-view-wrapper=""
       style={{
         whiteSpace: 'normal'
@@ -15,7 +21,6 @@ export const NodeViewWrapper: React.FC = props => {
       onDragStart={onDragStart}
     >
      {props.children}
-    </div>
+    </Tag>
   )
-
 }