static/admin/shortcodes/audio.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const AudioShortcode = {
   label: "Audiodatei",
@@ -33,24 +33,31 @@ const AudioShortcode = {
     );
 
     return Card([
-      TextField({
+      Label("Audiodatei"),
-        label: "Audiodatei",
-        value: src,
-        onChange: (event) => {
-          onChange({ src: event.target.value });
-        },
-      }),
       h(
         "span",
-        { key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" },
+        { className: "CMS_WidgetDateTime_inputs" },
-        h(
+        TextField({
-          "button",
+          value: src,
-          {
+          onChange: (event) => {
-            type: "button",
+            onChange({ src: event.target.value });
-            onClick: handleOpenMediaLibrary,
-            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
-          "wählen"
+        }),
+        h(
+          "span",
+          {
+            key: "audio-button",
+            className: "CMS_WidgetDateTime_NowButton_root",
+          },
+          h(
+            "button",
+            {
+              type: "button",
+              onClick: handleOpenMediaLibrary,
+              className: "CMS_Button_root CMS_Button_outlined-primary",
+            },
+            "wählen"
+          )
         )
       ),
     ]);

static/admin/shortcodes/card.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const CardShortcode = {
   label: "Link-Karte",
@@ -27,15 +27,15 @@ const CardShortcode = {
   },
   control: ({ title, link, onChange }) => {
     return Card([
+      Label("Titel"),
       TextField({
-        label: "Titel",
         value: title,
         onChange: (event) => {
           onChange({ title: event.target.value.trimStart(), link });
         },
       }),
+      Label("Link"),
       TextField({
-        label: "Link",
         value: link,
         onChange: (event) => {
           onChange({ title, link: event.target.value });

static/admin/shortcodes/components.js

@@ -0,0 +1,58 @@
+const Card = (children, opts = { vertical: false }) =>
+  h(
+    "span",
+    {
+      className:
+        "CMS_Card_root CMS_Field_root CMS_WidgetString_root CMS_WidgetString_required CMS_Field_cursor-text CMS_WidgetMarkdown_Paragraph_root" +
+        (opts.vertical ? " flex-col" : ""),
+    },
+    h("span", { className: "CMS_Field_wrapper" }, children)
+  );
+
+const Image = ({ assetSource, handleOpenMediaLibrary }) =>
+  h(
+    "span",
+    { className: "CMS_WidgetFileImage_content" },
+    h(
+      "span",
+      {},
+      h("img", {
+        role: "presentation",
+        src: assetSource,
+        className: "CMS_Image_root",
+      })
+    ),
+    h(
+      "span",
+      { className: "CMS_WidgetFileImage_actions" },
+      h(
+        "button",
+        {
+          type: "button",
+          onClick: handleOpenMediaLibrary,
+          className: "CMS_Button_root CMS_Button_outlined-primary",
+        },
+        "Bild auswählen"
+      )
+    )
+  );
+
+const TextField = ({ value, onChange }) =>
+  h("input", {
+    className:
+      "MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
+    type: "text",
+    value,
+    onChange,
+  });
+
+const Label = (label) =>
+  h(
+    "label",
+    {
+      className: "CMS_Label_root CMS_Label_cursor-pointer",
+    },
+    label
+  );
+
+export { Card, Image, TextField, Label };

static/admin/shortcodes/components/card.js

@@ -1,12 +0,0 @@
-const Card = (child, opts = { vertical: false }) =>
-  h(
-    "span",
-    {
-      className:
-        "CMS_Card_root CMS_Field_root CMS_WidgetString_root CMS_WidgetString_required CMS_Field_cursor-text CMS_WidgetMarkdown_Paragraph_root" +
-        (opts.vertical ? " flex-col" : ""),
-    },
-    child
-  );
-
-export default Card;

static/admin/shortcodes/components/image.js

@@ -1,40 +0,0 @@
-const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
-  h(
-    "span",
-    { className: "CMS_Field_wrapper" },
-    h(
-      "label",
-      {
-        className: "CMS_Label_root CMS_Label_cursor-pointer",
-      },
-      label
-    ),
-    h(
-      "span",
-      { className: "CMS_WidgetFileImage_content" },
-      h(
-        "span",
-        {},
-        h("img", {
-          role: "presentation",
-          src: assetSource,
-          className: "CMS_Image_root",
-        })
-      ),
-      h(
-        "span",
-        { className: "CMS_WidgetFileImage_actions" },
-        h(
-          "button",
-          {
-            type: "button",
-            onClick: handleOpenMediaLibrary,
-            className: "CMS_Button_root CMS_Button_outlined-primary",
-          },
-          "Bild auswählen"
-        )
-      )
-    )
-  );
-
-export default Image;

static/admin/shortcodes/components/index.js

@@ -1,5 +0,0 @@
-import Card from "./card.js";
-import TextField from "./text-field.js";
-import Image from "./image.js";
-
-export { Card, TextField, Image };

static/admin/shortcodes/components/text-field.js

@@ -1,21 +0,0 @@
-const TextField = ({ label, value, onChange }) =>
-  h(
-    "span",
-    { key: "text-" + label, className: "CMS_Field_wrapper" },
-    h(
-      "label",
-      {
-        className: "CMS_Label_root CMS_TextField_cursor-default",
-      },
-      label
-    ),
-    h("input", {
-      className:
-        "MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
-      type: "text",
-      value,
-      onChange,
-    })
-  );
-
-export default TextField;

static/admin/shortcodes/download.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const DownloadShortcode = {
   label: "Download-Karte",
@@ -39,24 +39,20 @@ const DownloadShortcode = {
     );
 
     return Card([
+      Label("Titel"),
       TextField({
-        label: "Titel",
         value: title,
         onChange: (event) => {
           onChange({ title: event.target.value.trimStart(), link });
         },
       }),
+      Label("Download-Link"),
       h(
         "span",
         {
-          style: {
+          class: "CMS_WidgetDateTime_inputs"
-            display: "flex",
-            "flex-direction": "row",
-            "align-items": "end",
-          },
         },
         TextField({
-          label: "Download-Link",
           value: link,
           onChange: (event) => {
             onChange({ title, link: event.target.value });

static/admin/shortcodes/gallery.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const GalleryShortcode = {
   label: "Bildergallerie",
@@ -34,27 +34,31 @@ const GalleryShortcode = {
     );
 
     return Card([
-      TextField({
+      Label("Galerie-Ordner"),
-        label: "Gallerie-Ordner",
-        value: dir,
-        onChange: (event) => {
-          onChange({ dir: event.target.value });
-        },
-      }),
       h(
         "span",
-        {
+        { className: "CMS_WidgetDateTime_inputs" },
-          key: "gallery-button",
+        TextField({
-          className: "CMS_WidgetDateTime_NowButton_root",
+          value: dir,
-        },
+          onChange: (event) => {
-        h(
+            onChange({ dir: event.target.value });
-          "button",
-          {
-            type: "button",
-            onClick: handleOpenMediaLibrary,
-            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
-          "wählen"
+        }),
+        h(
+          "span",
+          {
+            key: "gallery-button",
+            className: "CMS_WidgetDateTime_NowButton_root",
+          },
+          h(
+            "button",
+            {
+              type: "button",
+              onClick: handleOpenMediaLibrary,
+              className: "CMS_Button_root CMS_Button_outlined-primary",
+            },
+            "wählen"
+          )
         )
       ),
     ]);

static/admin/shortcodes/image.js

@@ -1,4 +1,4 @@
-import { Card, Image } from "./components/index.js";
+import { Card, Image, Label } from "./components.js";
 import { md5 } from "../previews/page-previews/components/index.js";
 
 const ImageShortcode = {
@@ -36,13 +36,13 @@ const ImageShortcode = {
     );
     const assetSource = useMediaAsset(src, collection, field, entry);
 
-    return Card(
+    return Card([
+      Label("Bild"),
       Image({
-        label: "Bild",
         assetSource,
         handleOpenMediaLibrary,
-      })
+      }),
-    );
+    ]);
   },
   preview: ({ src }) => {
     return h(

static/admin/shortcodes/slider.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const SliderShortcode = {
   label: "Bilderkarussell",
@@ -34,27 +34,31 @@ const SliderShortcode = {
     );
 
     return Card([
-      TextField({
+      Label("Bilderkarussell"),
-        label: "Bilderkarussell",
-        value: dir,
-        onChange: (event) => {
-          onChange({ dir: event.target.value });
-        },
-      }),
       h(
         "span",
-        {
+        { className: "CMS_WidgetDateTime_inputs" },
-          key: "slider-button",
+        TextField({
-          className: "CMS_WidgetDateTime_NowButton_root",
+          value: dir,
-        },
+          onChange: (event) => {
-        h(
+            onChange({ dir: event.target.value });
-          "button",
-          {
-            type: "button",
-            onClick: handleOpenMediaLibrary,
-            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
-          "wählen"
+        }),
+        h(
+          "span",
+          {
+            key: "slider-button",
+            className: "CMS_WidgetDateTime_NowButton_root",
+          },
+          h(
+            "button",
+            {
+              type: "button",
+              onClick: handleOpenMediaLibrary,
+              className: "CMS_Button_root CMS_Button_outlined-primary",
+            },
+            "wählen"
+          )
         )
       ),
     ]);

static/admin/shortcodes/youtube.js

@@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";
 
 const YoutubeShortcode = {
   label: "YouTube-Video",
@@ -18,8 +18,8 @@ const YoutubeShortcode = {
   control: ({ src, onChange }) => {
     return Card(
       [
+        Label("YouTUbe-Video"),
         TextField({
-          label: "YouTube-Video-ID",
           value: src,
           onChange: (event) => {
             onChange({ src: event.target.value });