feat: Input to add custom class

surajshetty3416 · surajshetty3416 · commit f8a87d1e1cb2 · 2023-09-13T14:45:30.000+05:30
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
@@ -243,6 +243,14 @@
 			v-if="blockController.isImage()"
 			:modelValue="blockController.getAttribute('alt')"
 			@update:modelValue="(val) => blockController.setAttribute('alt', val)" />
+
+		<!-- class -->
+		<InlineInput
+			label="Class"
+			v-if="!blockController.multipleBlocksSelected()"
+			:modelValue="getClasses()"
+			@update:modelValue="(val) => setClasses(val)" />
+
 		<CodeEditor
 			class="mt-8"
 			label="RAW Styles (as JSON)"
@@ -287,4 +295,13 @@ const setFont = (font: string) => {
 		blockController.setFontFamily(font);
 	});
 };
+
+const getClasses = () => {
+	return blockController.getClasses().join(", ");
+};
+
+const setClasses = (val: string) => {
+	const classes = val.split(",").map((c) => c.trim());
+	blockController.setClasses(classes);
+};
 </script>
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
@@ -97,7 +97,6 @@ const handleRightResize = (ev: MouseEvent) => {
 		// movement / scale * speed
 		const movement = (mouseMoveEvent.clientX - startX) / canvasProps.scale;
 		const finalWidth = Math.abs(guides.getFinalWidth(startWidth + movement));
-		console.log(startFontSize, movement);
 		if (targetBlock.isText() && !mouseMoveEvent.shiftKey) {
 			const fontSize = clamp(Math.round(startFontSize + 0.5 * movement), 10, 150);
 			targetBlock.setStyle("fontSize", `${fontSize}px`);
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
@@ -93,6 +93,14 @@ const blockController = {
 			block[key] = value;
 		});
 	},
+	getClasses: () => {
+		let classes = [] as string[];
+		classes = store.selectedBlocks[0].getClasses();
+		return classes;
+	},
+	setClasses: (classes: string[]) => {
+		store.selectedBlocks[0].classes = classes;
+	},
 	getRawStyles: () => {
 		return blockController.isBLockSelected() && store.selectedBlocks[0].rawStyles;
 	},
