#3654: add image element to document builder (#3655)

package.json

@@ -70,6 +70,7 @@
     "handlebars": "^4.7.7",
     "hex-rgb": "^5.0.0",
     "history": "^4.10.1",
+    "holderjs": "^2.9.9",
     "htmlmetaparser": "^2.1.1",
     "htmlparser2": "^8.0.0",
     "http-status-codes": "^2.1.4",
@@ -183,6 +184,7 @@
     "@types/gapi.client.oauth2": "^2.0.2",
     "@types/gapi.client.sheets": "^4.0.20201029",
     "@types/google.picker": "0.0.39",
+    "@types/holderjs": "^2.9.2",
     "@types/intro.js": "^3.0.2",
     "@types/jest": "^28.1.1",
     "@types/jquery": "^3.5.6",

src/__mocks__/holderjs.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export function run(...args) {
+  console.debug("holderjs:run", args);
+}

src/blocks/renderers/propertyTable.tsx

@@ -20,6 +20,7 @@ import { Renderer } from "@/types";
 import { propertiesToSchema } from "@/validators/generic";
 import { BlockArg, BlockOptions, SafeHTML } from "@/core";
 import { sortBy, isPlainObject } from "lodash";
+import { isValidUrl } from "@/utils";
 
 interface Item {
   key: string;
@@ -30,15 +31,6 @@ interface Item {
   children: Item[];
 }
 
-function isValidUrl(value: string): boolean {
-  try {
-    const url = new URL(value);
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-
 function richValue(value: unknown): unknown {
   if (typeof value === "string" && isValidUrl(value)) {
     return (

src/components/documentBuilder/allowedElementTypes.ts

@@ -26,6 +26,7 @@ export const ROOT_ELEMENT_TYPES: DocumentElementType[] = [
   "header_2",
   "header_3",
   "text",
+  "image",
   "container",
   "card",
   "pipeline",
@@ -49,6 +50,7 @@ const allowedChildTypes: Record<string, DocumentElementType[]> = {
     "header_2",
     "header_3",
     "text",
+    "image",
     "card",
     "pipeline",
     "button",
@@ -59,6 +61,7 @@ const allowedChildTypes: Record<string, DocumentElementType[]> = {
     "header_2",
     "header_3",
     "text",
+    "image",
     "container",
     "pipeline",
     "button",

src/components/documentBuilder/createNewElement.ts

@@ -35,6 +35,10 @@ export function createNewElement(elementType: DocumentElementType) {
       element.config.text = "Paragraph text.";
       break;
 
+    case "image":
+      element.config.url = null;
+      break;
+
     case "container":
       element.children = [createNewElement("row")];
       break;

src/components/documentBuilder/documentBuilderTypes.ts

@@ -25,6 +25,7 @@ export const DOCUMENT_ELEMENT_TYPES = [
   "header_2",
   "header_3",
   "text",
+  "image",
   "container",
   "row",
   "column",

src/components/documentBuilder/documentTree.tsx

@@ -20,7 +20,7 @@ import BlockElement from "@/components/documentBuilder/render/BlockElement";
 import { isPipelineExpression } from "@/runtime/mapArgs";
 import { UnknownObject } from "@/types";
 import { get } from "lodash";
-import { Card, Col, Container, Row } from "react-bootstrap";
+import { Card, Col, Container, Row, Image } from "react-bootstrap";
 import {
   BuildDocumentBranch,
   DocumentComponent,
@@ -75,6 +75,13 @@ export function getComponentDefinition(
       return { Component: "p", props };
     }
 
+    case "image": {
+      const { url, ...props } = config;
+      props.src = url;
+      props.height = props.height ?? 50;
+      return { Component: Image, props };
+    }
+
     case "container":
     case "row":
     case "column": {

src/components/documentBuilder/edit/getElementEditSchemas.ts

@@ -52,6 +52,25 @@ function getElementEditSchemas(
       return [textEdit, getClassNameEdit(elementName)];
     }
 
+    case "image": {
+      const imageUrl: SchemaFieldProps = {
+        name: joinName(elementName, "config", "url"),
+        schema: { type: "string", format: "uri" },
+        label: "Image URL",
+      };
+      const height: SchemaFieldProps = {
+        name: joinName(elementName, "config", "height"),
+        schema: { type: ["string", "number"] },
+        label: "Height",
+      };
+      const width: SchemaFieldProps = {
+        name: joinName(elementName, "config", "width"),
+        schema: { type: ["string", "number"] },
+        label: "Width",
+      };
+      return [imageUrl, height, width, getClassNameEdit(elementName)];
+    }
+
     case "card": {
       const headingEdit: SchemaFieldProps = {
         name: joinName(elementName, "config", "heading"),

src/components/documentBuilder/elementTypeLabels.ts

@@ -26,6 +26,7 @@ const elementTypeLabels: Record<DocumentElementType, string> = {
   column: "Column",
   card: "Card",
   text: "Text",
+  image: "Image",
   button: "Button",
   pipeline: "Brick",
   list: "List",

src/components/documentBuilder/preview/__snapshots__/ElementPreview.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`can preview default button 1`] = `
 <DocumentFragment>
   <div>
     <div
-      class="root inlineWrapper wrapperShiftRight"
+      class="root inlineWrapper"
     >
       <button
         class="btn btn-primary"
@@ -20,7 +20,7 @@ exports[`can preview default button 1`] = `
 exports[`can preview default card 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <div
       class="card"
@@ -208,7 +208,7 @@ exports[`can preview default container 1`] = `
 exports[`can preview default header_1 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <h1>
       Header
@@ -220,7 +220,7 @@ exports[`can preview default header_1 1`] = `
 exports[`can preview default header_2 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <h2>
       Header
@@ -232,7 +232,7 @@ exports[`can preview default header_2 1`] = `
 exports[`can preview default header_3 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <h3>
       Header
@@ -241,6 +241,22 @@ exports[`can preview default header_3 1`] = `
 </DocumentFragment>
 `;
 
+exports[`can preview default image 1`] = `
+<DocumentFragment>
+  <div
+    class="imageWrapper root"
+    height="50"
+    width="100"
+  >
+    <img
+      alt="Placeholder"
+      class=""
+      src="holder.js/100x50"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`can preview default list 1`] = `
 <DocumentFragment>
   <div
@@ -257,7 +273,7 @@ exports[`can preview default list 1`] = `
       Element key: @element
     </div>
     <div
-      class="wrapperShiftRight root"
+      class="shiftRightWrapper root"
     >
       <p>
         Paragraph text.
@@ -270,7 +286,7 @@ exports[`can preview default list 1`] = `
 exports[`can preview default pipeline 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <h3>
       Brick
@@ -352,7 +368,7 @@ exports[`can preview default row 1`] = `
 exports[`can preview default text 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <p>
       Paragraph text.
@@ -364,7 +380,7 @@ exports[`can preview default text 1`] = `
 exports[`can preview pipeline element with bricks 1`] = `
 <DocumentFragment>
   <div
-    class="wrapperShiftRight root"
+    class="shiftRightWrapper root"
   >
     <h3>
       Brick

src/components/documentBuilder/preview/documentTree.module.scss

@@ -41,10 +41,18 @@
 
 .inlineWrapper {
   display: inline-block;
+  position: relative;
 }
 
-.wrapperShiftRight {
+.shiftRightWrapper {
+  position: relative;
+}
+
+.imageWrapper {
+  padding: 2px;
+  display: inline-block;
   position: relative;
+  min-width: 75px; // restrict min width so the popup label doesn't overflow
 }
 
 .labelShiftRight {