feat(html-element-web): add design preview for html element widget

This adds design preview, the iteration over items is needed to represent repeating nodes
of the widget, though in case of HTML content the items are not greyed out

Author: r0b1n

packages/pluggableWidgets/html-element-web/src/HTMLElement.editorPreview.tsx

@@ -1,8 +1,36 @@
-import { ReactElement, createElement } from "react";
+import { ReactElement, createElement, Fragment } from "react";
 import { HTMLElementPreviewProps } from "../typings/HTMLElementProps";
+import { HTMLTag } from "./components/HTMLTag";
+import { prepareTag } from "./utils/props-utils";
 
 export function preview(props: HTMLElementPreviewProps): ReactElement {
-    return <div className={props.className}>HTML Element</div>;
+    const tag = prepareTag(props.tagName, props.tagNameCustom);
+
+    const items = props.tagUseRepeat ? [1, 2, 3] : [1];
+
+    return (
+        <Fragment>
+            {items.map(i => (
+                <HTMLTag
+                    key={i}
+                    tagName={tag}
+                    attributes={{
+                        className: props.className,
+                        style: props.styleObject
+                    }}
+                >
+                    {props.tagContentRepeatHTML}
+                    {props.tagContentHTML}
+                    <props.tagContentRepeatContainer.renderer>
+                        <div />
+                    </props.tagContentRepeatContainer.renderer>
+                    <props.tagContentContainer.renderer>
+                        <div />
+                    </props.tagContentContainer.renderer>
+                </HTMLTag>
+            ))}
+        </Fragment>
+    );
 }
 
 export function getPreviewCss(): string {