Made modal more native-looking. Moved cssclasses field inside properties object

Author: Developer-Mike

src/@types/Canvas.d.ts

@@ -102,7 +102,7 @@ export interface CanvasOptions {
 }
 
 export interface CanvasMetadata {
-  cssclasses: string[]
+  properties: { [key: string]: any }
 }
 
 export interface CanvasHistory {

src/canvas-extensions/properties-canvas-extension.ts

@@ -39,7 +39,7 @@ export default class PropertiesCanvasExtension {
       canvas.wrapperEl.classList.remove(cssclass)
     })
 
-    this.previousCssclasses = canvas.metadata.cssclasses || []
+    this.previousCssclasses = canvas.metadata.properties?.cssclasses || []
     this.previousCssclasses.forEach((cssclass) => {
       canvas.wrapperEl.classList.add(cssclass)
     })
@@ -66,13 +66,15 @@ class PropertiesModal extends Modal {
 
     new Setting(this.contentEl)
       .setName("cssclasses")
+      .setTooltip("Add classes to the canvas wrapper element. Separate multiple classes with spaces.")
       .addText((text) =>
         text
-          .setValue(this.canvas.metadata.cssclasses.join(' '))
-          .onChange((value) =>
-            this.canvas.metadata.cssclasses = value.split(' ')
-          )
-      )
+          .setValue(this.canvas.metadata.properties?.cssclasses?.join(' '))
+          .onChange((value) => {
+            this.canvas.metadata.properties = this.canvas.metadata.properties || {}
+            this.canvas.metadata.properties.cssclasses = value.split(' ')
+          })
+      ).settingEl.classList.add('properties-field')
   }
 
   onClose() {}

src/styles.scss

@@ -1,3 +1,4 @@
+@use "styles/settings";
 @use "styles/menu";
 @use "styles/stickers";
 @use "styles/shapes";

src/styles/settings.scss

@@ -0,0 +1,16 @@
+.properties-field {
+  & > .setting-item-info {
+    flex: 0;
+    margin: 0;
+    padding: var(--size-4-1) var(--size-4-2);
+
+    border: var(--input-border-width) solid var(--background-modifier-border);
+    border-radius: var(--input-radius) 0 0 var(--input-radius);
+  }
+
+  & > .setting-item-control > input {
+    width: 100%;
+
+    border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+}