Blog Post Title
+Introduction with branded emphasis and + styled links.
+Section Header
+Regular content with italic text and more formatting.
+Important quote with custom styling+
diff --git a/CLASSES.md b/CLASSES.md new file mode 100644 index 0000000..e11f78c --- /dev/null +++ b/CLASSES.md @@ -0,0 +1,556 @@ +# Insertr Class Reference and Usage Guide +Complete definitions of Insertr's class-based functionality and editing behaviors. + +## Philosophy +Insertr uses semantic CSS classes to declare editing intent, following the principle of **"just add a class"**. Each class provides specific editing capabilities while maintaining zero configuration and respecting developer design intent. + +## .insertr +The basic insertr class makes an element editable. It preserves the context of the element and updates its inner HTML. The editing behavior is determined by the HTML element type, providing intuitive and predictable editing experiences. + +### Style Preservation (Shared with .insertr-content) +**Automatic nested element detection**: Insertr automatically analyzes existing markup within `.insertr` elements and preserves styled nested elements as formatting options during editing. + +```html + +
Save up to 50% today
+ Home +``` + +**Editor Experience**: +- **Preserved Elements**: ``, ``, `` +- **Formatting Options**: Users can apply these styles to other text portions +- **Design Safety**: Users cannot accidentally remove developer-intended styling +- **Element Addition**: If a styled anchor exists, users can add more links with the same styling + +### Style Detection Rules +- **One Layer Deep**: Only direct child elements are analyzed and preserved +- **All Elements Preserved**: Any nested element becomes a formatting option (spans, emphasis, icons, etc.) +- **Automatic Availability**: No configuration needed - styles are automatically detected and offered + +### Practical Examples + +#### **Branded Headings** +```html + +Save up to 50% today
+ + +- Text: "Save up to 50% today" +- Style options: Normal text + "Highlight price" style +- User edits: "Save 75% this week" +- Result:Save 75% this week
+``` + +#### **Call-to-Action Buttons** +```html + + + + +- Text: "Buy Now →" +- Arrow styling preserved automatically +- User can change text while keeping arrow design +``` + +### Element Behavior Categories + +**Text Elements**: Direct content editing with simple text input fields +**Interactive Elements**: Content plus relevant attributes (href, etc.) +**Media Elements**: Asset management with metadata editing +**Container Elements**: Automatic expansion to edit viable children +**Structured Elements**: Smart handling of lists, tables, and hierarchical content + +| Element | Behaviour | Use Cases | +| -------------- | --------------- | --------- | +| **Text Elements** |-|-| +| `h1, h2, h3, h4, h5, h6` | Content + nested style preservation | Page titles, section headers, headlines | +| `p` | Content + nested style preservation | Simple paragraphs, descriptions | +| `span` | Content + nested style preservation | Inline text, labels, tags | +| `label` | Content + nested style preservation | Form labels, captions | +| `blockquote` | Content + nested style preservation | Quotes, testimonials | +| `code` | Content + nested style preservation | Code snippets, technical text | +| **Interactive Elements** |-|-| +| `a` | Content + href + nested style preservation | Navigation links, CTAs, external links | +| `button` | Content + nested style preservation | Buttons, CTAs, form actions | +| **Media Elements** |-|-| +| `img` | src + alt + title | Images, photos, illustrations | +| **Container Elements** |-|-| +| `div` | Container expansion | Generic containers, cards, sections | +| `section` | Container expansion | Page sections, content blocks | +| `article` | Container expansion | Blog posts, news articles | +| `header` | Container expansion | Page/section headers | +| `footer` | Container expansion | Page/section footers | +| `nav` | Container expansion | Navigation menus | +| **List Elements** |-|-| +| `li` | Content only | List items, menu items | +| `ul, ol` | Container expansion | Lists (expands to li elements) | +| **Table Elements** |-|-| +| `td, th` | Content only | Table cells and headers | +| `tr` | Container expansion | Table rows (expands to td/th) | +| `table` | Container expansion | Tables (expands to rows) | + +### Special Considerations + +**Attribute Preservation**: All elements preserve their existing classes, IDs, data attributes, and styling context during content updates. + +**Content Type Detection**: +- Simple elements (h1-h6, p, span) → Text input with style preservation +- Complex elements (a, img) → Multi-field editors with style preservation +- Containers (div, section) → Child element expansion +- Rich content containers → Suggested for `.insertr-content` class + +**Nested Element Handling**: +- Container expansion stops at elements that already have `.insertr` class +- Styled nested elements (one layer deep) are preserved as formatting options +- Avoid infinite nesting by respecting existing editorial boundaries +- Preserve semantic HTML structure during content updates + +**Fallback Behavior**: +- Unknown/unsupported elements default to content-only editing +- Custom elements inherit behavior from their semantic role + +## Shared Functionality: Style Preservation + +All Insertr editing classes (`.insertr` and `.insertr-content`) share the same core style preservation system: + +### **Unified Style Detection** +- **One Layer Analysis**: Examines direct child elements for styling +- **Automatic Preservation**: Styled elements become formatting options +- **Zero Configuration**: No setup required - works automatically +- **Design Safety**: Prevents users from breaking developer styling + +### **Cross-Class Consistency** +- **`.insertr`**: Individual elements with style preservation +- **`.insertr-content`**: Rich text areas with style preservation +- **Same Logic**: Both use identical style detection and preservation + +### **Benefits** +- ✅ **Unified Experience**: Consistent behavior across all editing types +- ✅ **Design Integrity**: Developer styling always preserved +- ✅ **User Safety**: Cannot accidentally break carefully crafted designs +- ✅ **Zero Learning Curve**: Same formatting options everywhere + +### Syntactic Sugar Transformation +**Container Convenience**: When developers add `.insertr` to container elements (div, section, article), Insertr automatically transforms this "syntactic sugar" into granular editing: + +```html + +Hero description
+ +Hero description
+ +Introduction with branded emphasis and + styled links.
+Regular content with italic text and more formatting.
+Important quote with custom styling+
Not all that is gold does glitter+ Tolkien +
The journey of a thousand miles begins with one step+ Lao Tzu +
Introduction with branded emphasis
+Styled quote block+
Quote with styling+ Author Name +
This is a test paragraph with a link.
-Another paragraph here.
- +These examples test how well Insertr preserves styling during the markdown editing process.
+ + +Hello world and welcome!
Visit our about page for more info.
+Visit our site for amazing content!
+Welcome to Acme Corp where we create innovative solutions for modern businesses.
+Ready to start? and begin your journey!
+Check out our latest products and deals today!
+Hello valued customer, ready to explore our new features?
+This is just plain text with some basic markdown formatting like bold and italic.
+Need help? Contact our support team anytime.
+