fix(html-element-web): add void element handling

Author: Illia Obukhau

packages/pluggableWidgets/html-element-web/src/HTMLElement.editorConfig.ts

@@ -1,28 +1,17 @@
 import { AttributeValueTypeEnum, HTMLElementPreviewProps } from "../typings/HTMLElementProps";
 import { hideNestedPropertiesIn, hidePropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
-import { container, datasource, dropzone, StructurePreviewProps, text } from "@mendix/pluggable-widgets-commons";
-import { prepareTag } from "./utils/props-utils";
+import {
+    container,
+    ContainerProps,
+    datasource,
+    dropzone,
+    StructurePreviewProps,
+    text
+} from "@mendix/pluggable-widgets-commons";
+import { isVoidElement, prepareTag } from "./utils/props-utils";
 
 type TagAttributeValuePropName = keyof HTMLElementPreviewProps["attributes"][number];
 
-const voidElements = [
-    "area",
-    "base",
-    "br",
-    "col",
-    "embed",
-    "hr",
-    "img",
-    "input",
-    "link",
-    "meta",
-    "source",
-    "track",
-    "wbr",
-    // react specific, it uses `value` prop
-    "textarea"
-];
-
 const disabledElements = ["script"];
 
 function isValidHtmlTagName(name: string): boolean {
@@ -86,7 +75,7 @@ export function getProperties(values: HTMLElementPreviewProps, defaultProperties
 
     const tagName = values.tagName === "__customTag__" ? values.tagNameCustom : values.tagName;
 
-    if (voidElements.includes(tagName)) {
+    if (isVoidElement(tagName)) {
         // void elements don't allow children, hide all content props and the content mode switch
         propsToHide.push(
             "tagContentMode",
@@ -180,8 +169,10 @@ export function check(values: HTMLElementPreviewProps): Problem[] {
 export function getPreview(values: HTMLElementPreviewProps, _isDarkMode: boolean): StructurePreviewProps | null {
     const tagName = prepareTag(values.tagName, values.tagNameCustom);
 
-    return container({ grow: 1, borders: true, borderWidth: 1 })(
-        values.tagContentRepeatDataSource ? datasource(values.tagContentRepeatDataSource)() : container()(),
+    const voidElementPreview = (tagName: keyof JSX.IntrinsicElements): ContainerProps =>
+        container({ padding: 4 })(text()(`<${tagName} />`));
+
+    const flowElementPreview = (): ContainerProps =>
         values.tagContentMode === "innerHTML"
             ? container({ padding: 4 })(
                   text()(
@@ -194,6 +185,10 @@ export function getPreview(values: HTMLElementPreviewProps, _isDarkMode: boolean
                   text()(`<${tagName}>`),
                   dropzone(values.tagUseRepeat ? values.tagContentRepeatContainer : values.tagContentContainer),
                   text()(`</${tagName}>`)
-              )
+              );
+
+    return container({ grow: 1, borders: true, borderWidth: 1 })(
+        values.tagContentRepeatDataSource ? datasource(values.tagContentRepeatDataSource)() : container()(),
+        isVoidElement(tagName) ? voidElementPreview(tagName) : flowElementPreview()
     );
 }

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

@@ -1,34 +1,39 @@
 import { ReactElement, createElement, Fragment } from "react";
 import { HTMLElementPreviewProps } from "../typings/HTMLElementProps";
 import { HTMLTag } from "./components/HTMLTag";
-import { prepareTag } from "./utils/props-utils";
+import { isVoidElement, prepareTag } from "./utils/props-utils";
 
 export function preview(props: HTMLElementPreviewProps): ReactElement {
+    console.dir(props, { depth: 4 });
     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>
-            ))}
+            {items.map(i =>
+                isVoidElement(tag) ? (
+                    createElement(tag, { className: props.className, style: props.styleObject })
+                ) : (
+                    <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>
     );
 }

packages/pluggableWidgets/html-element-web/src/utils/props-utils.ts

@@ -116,3 +116,26 @@ export function prepareChildren(
 
     return props.tagContentRepeatContainer?.get(item);
 }
+
+const voidElements = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "source",
+    "track",
+    "wbr",
+    "textarea"
+] as const;
+
+export type VoidElement = typeof voidElements[number];
+
+export function isVoidElement(tag: unknown): tag is VoidElement {
+    return voidElements.includes(tag as VoidElement);
+}

packages/pluggableWidgets/html-element-web/src/utils/style-utils.ts

@@ -1,11 +1,18 @@
 import React from "react";
 
+// We need regexp to split rows in prop/value pairs
+// split by : not work for all cases, eg "background-image: url(http://localhost:8080);"
+const cssPropRegex = /(?<prop>[^:]+):\s+?(?<value>[^;]+);?/m;
+
 export function convertInlineCssToReactStyle(inlineStyle: string): React.CSSProperties {
     return Object.fromEntries(
         inlineStyle
             .split(";") // split by ;
             .filter(r => r.length) // filter out empty
-            .map(r => r.split(":").map(v => v.trim())) // split by key and value by :
+            .map(r => {
+                const { prop = "", value = "" } = cssPropRegex.exec(r.trim())?.groups ?? {};
+                return [prop, value];
+            })
             .filter(v => v.length === 2 && v[0].length && v[1].length) // filter out broken lines
             .map(([key, value]) => [convertStylePropNameToReactPropName(key), value] as [string, string])
     );