WIP

static/admin-new/index.html

@@ -39,7 +39,7 @@
       CMS.registerShortcode('gallery', {
         label: 'Gallery',
         openTag: '{{< ',
-        closeTag: ' >}}',
+        closeTag: ' />}}',
         separator: ' ',
         toProps: args => {
           if (args.length > 0) {
@@ -66,8 +66,8 @@
         },
         preview: ({ dir }) => {
           return h('div', {"className": "row", "style": { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }},
-          h('b', {}, "Gallerie-Ordner: "),
-          h('span', {}, dir));
+          h('b', {"style": { marginRight: "5px" }}, "Gallerie-Ordner:"),
+          h('code', {}, dir));
         },
       });
       CMS.registerShortcode('load-photoswipe', {
@@ -87,6 +87,44 @@
           
         },
       });
+      
+    </script>
+    <script>
+      const CategoriesControl = ({ label, value, field, onChange }) => {
+        const separator = useMemo(() => field.separator ?? ', ', [field.separator]);
+    
+        const handleChange = useCallback((e) => {
+          onChange(e.target.value.split(separator).map(e => e.trim()));
+        }, [separator, onChange]);
+    
+        return h('div', {}, 
+          h('label', { for: 'inputId' }, label),
+          h('input', {
+            id: 'inputId',
+            type: 'text',
+            value: value ? value.join(separator) : '',
+            onChange: this.handleChange,
+          })
+        );
+      };
+    
+      const CategoriesPreview = ({ value }) => {
+        return h(
+          'ul',
+          {},
+          value.map(function (val, index) {
+            return h('li', { key: index }, val);
+          }),
+        );
+      };
+    
+      const schema = {
+        properties: {
+          separator: { type: 'string' },
+        },
+      };
+    
+      CMS.registerWidget('categories', CategoriesControl, CategoriesPreview, schema);
     </script>
     <script>
 CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/bootstrap/bootstrap.min.css");