static/admin/shortcodes/audio.js

@@ -42,13 +42,13 @@ const AudioShortcode = {
       }),
       h(
         "span",
-        { key: "audio-button", className: "flex gap-2 pt-2 px-2" },
+        { key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/card.js

@@ -17,7 +17,7 @@ const CardShortcode = {
       for (let arg of args.slice(linkIndex)) {
         link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
       }
-      return { title: title.trim(), link: link.trim() };
+      return { title: title.trimStart(), link: link.trim() };
     }
 
     return { title: "", link: "" };
@@ -31,7 +31,7 @@ const CardShortcode = {
         label: "Titel",
         value: title,
         onChange: (event) => {
-          onChange({ title: event.target.value, link });
+          onChange({ title: event.target.value.trimStart(), link });
         },
       }),
       TextField({

static/admin/shortcodes/components/card.js

@@ -3,7 +3,7 @@ const Card = (child, opts = { vertical: false }) =>
     "span",
     {
       className:
-        "relative flex border border-slate-400 focus-within:border-blue-800 dark:focus-within:border-blue-100 focus-within:bg-slate-100 dark:focus-within:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 pb-3 cursor-text group/active top-3 bottom-3" +
+        "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

static/admin/shortcodes/components/image.js

@@ -1,36 +1,35 @@
 const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
   h(
     "span",
-    { className: "flex flex-col w-full" },
+    { className: "CMS_Field_wrapper" },
     h(
       "label",
       {
-        className:
-          "w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
+        className: "CMS_Label_root CMS_Label_cursor-pointer",
       },
       label
     ),
     h(
       "span",
-      { className: "flex flex-col gap-2 px-3 pt-2" },
+      { className: "CMS_WidgetFileImage_content" },
       h(
         "span",
         {},
         h("img", {
           role: "presentation",
           src: assetSource,
-          className: "object-cover max-w-full overflow-hidden",
+          className: "CMS_Image_root",
         })
       ),
       h(
         "span",
-        { className: "flex gap-2" },
+        { className: "CMS_WidgetFileImage_actions" },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "Bild auswählen"
         )

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

@@ -1,18 +1,18 @@
 const TextField = ({ label, value, onChange }) =>
   h(
     "span",
-    { key: "text-" + label, className: "flex flex-col w-full" },
+    { key: "text-" + label, className: "CMS_Field_wrapper" },
     h(
       "label",
       {
-        className:
-          "w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
+        className: "CMS_Label_root CMS_TextField_cursor-default",
       },
       label
     ),
     h("input", {
       className:
-        "MuiInout-Input w-full h-6 px-3 bg-transparent outline-none text-sm font-medium text-gray-900 dark:text-gray-100 cursor-default",
+        "MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
+      type: "text",
       value,
       onChange,
     })

static/admin/shortcodes/download.js

@@ -17,7 +17,7 @@ const DownloadShortcode = {
       for (let arg of args.slice(linkIndex)) {
         link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
       }
-      return { title: title.trim(), link: link.trim() };
+      return { title: title.trimStart(), link: link.trim() };
     }
 
     return { title: "", link: "" };
@@ -25,22 +25,54 @@ const DownloadShortcode = {
   toArgs: ({ title, link }) => {
     return [`title=\"${title}\"`, `link=\"${link}\"`];
   },
-  control: ({ title, link, onChange }) => {
+  control: ({ title, link, onChange, controlProps }) => {
+    const { collection, field } = controlProps;
+
+    const handleChange = ({ path }) => {
+      onChange({ title: title, link: path });
+    };
+
+    const handleOpenMediaLibrary = useMediaInsert(
+      link,
+      { collection, field },
+      handleChange
+    );
+
     return Card([
       TextField({
         label: "Titel",
         value: title,
         onChange: (event) => {
-          onChange({ title: event.target.value, link });
+          onChange({ title: event.target.value.trimStart(), link });
         },
       }),
-      TextField({
-        label: "Download-Link",
-        value: link,
-        onChange: (event) => {
-          onChange({ title, link: event.target.value });
+      h(
+        "span",
+        {
+          style: {
+            display: "flex",
+            "flex-direction": "row",
+            "align-items": "end",
+          },
         },
-      }),
+        TextField({
+          label: "Download-Link",
+          value: link,
+          onChange: (event) => {
+            onChange({ title, link: event.target.value });
+          },
+        }),
+        h(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenMediaLibrary,
+            className: "CMS_Button_root CMS_Button_outlined-primary",
+            style: { "margin-left": "0.75rem", "margin-right": "0.75rem" },
+          },
+          "wählen"
+        )
+      ),
     ]);
   },
   preview: ({ title, link }) => {

static/admin/shortcodes/gallery.js

@@ -43,13 +43,16 @@ const GalleryShortcode = {
       }),
       h(
         "span",
-        { key: "gallery-button", className: "flex gap-2 pt-2 px-2" },
+        {
+          key: "gallery-button",
+          className: "CMS_WidgetDateTime_NowButton_root",
+        },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/slider.js

@@ -43,13 +43,16 @@ const SliderShortcode = {
       }),
       h(
         "span",
-        { key: "slider-button", className: "flex gap-2 pt-2 px-2" },
+        {
+          key: "slider-button",
+          className: "CMS_WidgetDateTime_NowButton_root",
+        },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/youtube.js

@@ -31,7 +31,11 @@ const YoutubeShortcode = {
             width: "100%",
             height: "360",
             src: `https://piped.kavin.rocks/embed/${src}`,
-            className: "px-3 pt-3",
+            style: {
+              paddingLeft: "0.75rem",
+              paddingRight: "0.75rem",
+              paddingTop: "0.75rem",
+            },
           },
           ""
         ),