From b25663f76b4487f074c668cd100354787c5b9caf Mon Sep 17 00:00:00 2001 From: Joakim Date: Sun, 21 Sep 2025 22:31:42 +0200 Subject: [PATCH] Unify all formatting buttons to use consistent three-layer architecture - Remove .insertr-default-style special styling (blue background, border, dot indicator) - Make ALL buttons use .insertr-style-preview with unified appearance - Maintain authentic style previews in isolated .insertr-style-sample layer - Bold buttons show bold text, .brand buttons show green uppercase text, etc. - Eliminate visual inconsistency between semantic and detected style buttons - Simplify CSS by removing ~50 lines of duplicate button styling - Provide consistent professional toolbar appearance across all formatting options --- CLASSES.md | 4 +- WORKING_ON.md | 187 ---------------------------- internal/content/assets/insertr.css | 50 -------- lib/src/styles/insertr.css | 50 -------- lib/src/ui/style-aware-editor.js | 16 +-- 5 files changed, 8 insertions(+), 299 deletions(-) delete mode 100644 WORKING_ON.md diff --git a/CLASSES.md b/CLASSES.md index e11f78c..44e03c9 100644 --- a/CLASSES.md +++ b/CLASSES.md @@ -256,8 +256,8 @@ The `.insertr-add` class transforms a container into a dynamic collection where - Styling: All classes and structure preserved ### User Interface -- **Add Button**: Floating "+" button. -- **Remove Controls**: Delete option for each item (with confirmation) +- **Add Button**: Floating "+" button. Should be in the top right of the .insertr-add container. +- **Remove Controls**: Delete option for each item (with confirmation). Should be in the top tight corner of the item. - **Reorder Capability**: Drag-and-drop or up/down controls - **Duplication**: New items inherit the exact structure and styling diff --git a/WORKING_ON.md b/WORKING_ON.md deleted file mode 100644 index c070fe3..0000000 --- a/WORKING_ON.md +++ /dev/null @@ -1,187 +0,0 @@ -# Insertr Structural Refactoring - Work in Progress - -## Current Status: Major Simplification Opportunity Identified - -We've identified that the current Insertr codebase has remnants from multiple refactoring phases and can be significantly simplified by fully embracing the HTML-first philosophy outlined in CLASSES.md. - -## Key Insights Discovered - -### 1. **Obsolete Content Type System** -- **Problem**: Currently has 3 content types (`'text'`, `'html'`, `'structured'`) with complex routing logic -- **HTML-First Reality**: Only need HTML preservation with automatic style detection -- **Opportunity**: Remove `data-content-type` attributes entirely and detect behavior from HTML element tags - -### 2. **Multiple Editor Systems (Legacy)** -- **Current**: Complex strategy detection choosing between simple vs rich editors -- **HTML-First**: Always use StyleAwareEditor with HTML preservation and remove legacy code -- **Benefit**: Massive code reduction, consistent behavior everywhere - -### 3. **Element-Based Behavior Detection** -- **Instead of**: `data-content-type="link"` attributes -- **Use**: Element tag analysis (`` = link behavior, `

` = text behavior) -- **Source**: Behavior rules already defined in CLASSES.md - -### 4. **UX Optimization Opportunity** -- **Direct Multi-Property Editing**: `` should open URL+text editor immediately -- **Rich Text Editing**: `

` with nested elements should use StyleAwareEditor -- **Context-Appropriate UX**: Right editor for the right element type - -## Planned Refactoring (Major Changes) -Keep in mind that we need no legacy code preserved or backwards compatibility. Database changes can be done to the schema, not with ALTER statements. We have no data to preserve and no users of any current insertr versions. - -### Phase 1: Frontend Simplification -- [ ] **Remove content type routing** from StyleAwareEditor -- [ ] **Eliminate 'text' and 'structured' handlers** - keep only HTML preservation -- [ ] **Remove simple/textarea editor** that strips HTML formatting -- [ ] **Implement element-based behavior detection** using tag names -- [ ] **Create direct multi-property editors** for ``, `