Implement professional smart formatting with toggle logic and whitespace preservation

lib/src/core/api-client.js

@@ -29,12 +29,11 @@ export class ApiClient {
     }
     
 
-    async createContent(content, type, htmlMarkup) {
+    async createContent(content, htmlMarkup) {
         try {
             const payload = {
                 html_markup: htmlMarkup,  // Always send HTML markup - server extracts ID or generates new one
                 html_content: content,
-                type: type,
                 file_path: this.getCurrentFilePath()  // Always include file path for consistent ID generation
             };
             
@@ -49,7 +48,7 @@ export class ApiClient {
             
             if (response.ok) {
                 const result = await response.json();
-                console.log(`✅ Content created: ${result.id} (${result.type})`);
+                console.log(`✅ Content created: ${result.id}`);
                 return result;
             } else {
                 console.warn(`⚠️ Create failed (${response.status}): server will generate ID`);

lib/src/core/editor.js

@@ -131,10 +131,8 @@ export class InsertrEditor {
                 result = await this.apiClient.updateContent(meta.contentId, contentValue);
             } else {
                 // Create new content - server handles ID extraction/generation from markup
-                const contentType = this.determineContentType(meta.element);
                 result = await this.apiClient.createContent(
                     contentValue, 
-                    contentType, 
                     meta.htmlMarkup  // Always send HTML markup - server is smart about ID handling
                 );
             }
@@ -142,7 +140,6 @@ export class InsertrEditor {
             if (result) {
                 // Store the backend-generated/confirmed ID in the element
                 meta.element.setAttribute('data-content-id', result.id);
-                meta.element.setAttribute('data-content-type', result.type);
                 console.log(`✅ Content saved: ${result.id}`, contentValue);
             } else {
                 console.error('❌ Failed to save content to server');
@@ -157,16 +154,7 @@ export class InsertrEditor {
         }
     }
     
-    determineContentType(element) {
-        const tagName = element.tagName.toLowerCase();
-        
-        if (tagName === 'a' || tagName === 'button') {
-            return 'link';
-        }
-        
-        // ALL text elements use text content type
-        return 'text';
-    }
+
     
     handleCancel(meta) {
         console.log('❌ Edit cancelled:', meta.contentId);

lib/src/core/insertr.js

@@ -9,29 +9,23 @@ export class InsertrCore {
             ...options
         };
     }
-    
+
     // Find all enhanced elements on the page
-    // Note: Container expansion is handled at build-time by the backend enhancer
-    // Frontend should only find elements that already have .insertr class
     findEnhancedElements() {
         return document.querySelectorAll('.insertr');
     }
-    
-    // Note: All container expansion logic removed - handled by backend enhancer
-    // Frontend only works with elements that already have .insertr class
-    
+
     // Get element metadata
     getElementMetadata(element) {
         const existingId = element.getAttribute('data-content-id');
-        
-        // HTML-first approach: no content type needed, just HTML markup for ID generation
+
         return {
-            contentId: existingId,  // null if new content, existing ID if updating
+            contentId: existingId,
             element: element,
             htmlMarkup: element.outerHTML // Server will generate ID from this
         };
     }
-    
+
     // Get current file path from URL for consistent ID generation
     getCurrentFilePath() {
         const path = window.location.pathname;
@@ -41,11 +35,10 @@ export class InsertrCore {
         // Remove leading slash: "/about.html" → "about.html"
         return path.replace(/^\//, '');
     }
-    
+
     // Get all elements with their metadata
-    // Note: Container expansion handled by backend - frontend finds enhanced elements only
     getAllElements() {
         const elements = this.findEnhancedElements();
         return Array.from(elements).map(el => this.getElementMetadata(el));
     }
-}
+}

lib/src/index.js

@@ -16,7 +16,7 @@ window.Insertr = {
     editor: null,
     auth: null,
     apiClient: null,
-    
+
     // UI layer (presentation)
     controlPanel: null,
 
@@ -32,7 +32,7 @@ window.Insertr = {
         this.auth = new InsertrAuth(options);
         this.apiClient = new ApiClient(options);
         this.editor = new InsertrEditor(this.core, this.auth, this.apiClient, options);
-        
+
         // Initialize UI layer
         this.controlPanel = new InsertrControlPanel(this.auth, this.editor, this.apiClient, options);
 
@@ -74,7 +74,7 @@ window.Insertr = {
         link.href = cssPath;
         link.onload = () => console.log('✅ Insertr CSS loaded');
         link.onerror = () => console.warn('⚠️ Failed to load Insertr CSS from:', cssPath);
-        
+
         document.head.appendChild(link);
     },
 
@@ -83,9 +83,6 @@ window.Insertr = {
         if (this.auth) {
             this.auth.init(); // Sets up invisible editor gates only
         }
-        
-        // Note: Control panel is NOT created here - only after gate activation
-        // Note: Editor is NOT started here - only when authentication succeeds
     },
 
     // Start the full editor system (called when gate is activated)
@@ -94,12 +91,12 @@ window.Insertr = {
         if (this.controlPanel && !this.controlPanel.isInitialized) {
             this.controlPanel.init(); // Creates unified control panel UI
         }
-        
+
         // Start editor functionality
         if (this.editor && !this.editor.isActive) {
             this.editor.start();
         }
-        
+
         // Add editing indicators when editor starts
         if (this.controlPanel) {
             this.controlPanel.addEditingIndicators();
@@ -138,7 +135,7 @@ function autoInitialize() {
         // Check for configuration from script data attributes
         const insertrScript = document.querySelector('script[data-insertr-injected]');
         const config = {};
-        
+
         if (insertrScript) {
             config.siteId = insertrScript.getAttribute('data-site-id'); // No fallback - let ApiClient handle missing values
             config.apiEndpoint = insertrScript.getAttribute('data-api-endpoint') || '/api/content';
@@ -146,7 +143,7 @@ function autoInitialize() {
             config.mockAuth = config.authProvider === 'mock'; // Set mockAuth based on provider
             config.debug = insertrScript.getAttribute('data-debug') === 'true';
         }
-        
+
         window.Insertr.init(config);
     }
 }

lib/src/styles/insertr.css

@@ -442,6 +442,36 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
+/* Active/applied formatting state - shows current selection has this formatting */
+.insertr-style-btn.insertr-style-active {
+    background: var(--insertr-primary);
+    border-color: var(--insertr-primary);
+    color: white;
+    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
+}
+
+.insertr-style-btn.insertr-style-active .insertr-preview-content {
+    color: white;
+}
+
+.insertr-style-btn.insertr-style-active:hover {
+    background: var(--insertr-primary-hover);
+    border-color: var(--insertr-primary-hover);
+    transform: none;
+}
+
+/* Active state for default style buttons */
+.insertr-style-btn.insertr-default-style.insertr-style-active {
+    background: var(--insertr-info);
+    border-color: var(--insertr-info);
+    color: white;
+    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
+}
+
+.insertr-style-btn.insertr-default-style.insertr-style-active .insertr-preview-content {
+    color: white;
+}
+
 /* Default formatting style buttons */
 .insertr-style-btn.insertr-default-style {
     border-color: var(--insertr-info);