refactor

ts_web/elements/wysiwyg/blocks/block.styles.ts

@@ -0,0 +1,64 @@
+/**
+ * Common styles shared across all block types
+ */
+
+export const commonBlockStyles = `
+  /* Common block spacing and layout */
+  /* TODO: Extract common spacing from existing blocks */
+  
+  /* Common focus states */
+  /* TODO: Extract common focus styles */
+  
+  /* Common selected states */
+  /* TODO: Extract common selection styles */
+  
+  /* Common hover states */
+  /* TODO: Extract common hover styles */
+  
+  /* Common transition effects */
+  /* TODO: Extract common transitions */
+  
+  /* Common placeholder styles */
+  /* TODO: Extract common placeholder styles */
+  
+  /* Common error states */
+  /* TODO: Extract common error styles */
+  
+  /* Common loading states */
+  /* TODO: Extract common loading styles */
+`;
+
+/**
+ * Helper function to generate consistent block classes
+ */
+export const getBlockClasses = (
+  type: string,
+  isSelected: boolean,
+  additionalClasses: string[] = []
+): string => {
+  const classes = ['block', type];
+  if (isSelected) {
+    classes.push('selected');
+  }
+  classes.push(...additionalClasses);
+  return classes.join(' ');
+};
+
+/**
+ * Helper function to generate consistent data attributes
+ */
+export const getBlockDataAttributes = (
+  blockId: string,
+  blockType: string,
+  additionalAttributes: Record<string, string> = {}
+): string => {
+  const attributes = {
+    'data-block-id': blockId,
+    'data-block-type': blockType,
+    ...additionalAttributes
+  };
+  
+  return Object.entries(attributes)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+};