joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement three-layer button architecture for consistent formatting button styling

Browse Source 
- Add button frame isolation layer to prevent site CSS from affecting toolbar appearance
- Create style sample container for authentic style previews without layout interference
- Update CSS with proper containment boundaries and !important rules for button structure
- Preserve all authentic styling (color, weight, transform, decoration) in isolated preview
- Fix inconsistent button appearance across different site stylesheets (e.g. .brand class)
- Maintain professional toolbar UX while showing accurate style previews
This commit is contained in:
Joakim
2025-09-21 22:06:35 +02:00
parent 0cfce1c95a
commit 551b3fa301
3 changed files with 97 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/src/ui/style-aware-editor.js
View File

@@ -597,27 +597,32 @@ export class StyleAwareEditor {
button.dataset.styleId = styleId;
}
// Create preview content container
const previewContent = document.createElement('span');
previewContent.className = 'insertr-preview-content';
previewContent.textContent = text;
// Create three-layer structure for style isolation
const buttonFrame = document.createElement('span');
buttonFrame.className = 'insertr-button-frame';
const styleSample = document.createElement('span');
styleSample.className = 'insertr-style-sample';
styleSample.textContent = text;
// Apply type-specific styling
switch (type) {
case 'style':
this.applyStyleButtonStyling(button, previewContent, styleInfo);
this.applyStyleButtonStyling(button, styleSample, styleInfo);
break;
case 'link':
this.applyLinkButtonStyling(button, previewContent);
this.applyLinkButtonStyling(button, styleSample);
break;
case 'action':
default:
// Default action button styling
// Default action button styling - add fallback class
styleSample.classList.add('insertr-fallback-style');
break;
}
// Add the preview content to the button
button.appendChild(previewContent);
// Build three-layer structure: button → frame → sample
buttonFrame.appendChild(styleSample);
button.appendChild(buttonFrame);
// Add click handler
button.addEventListener('click', (e) => {
@@ -631,48 +636,51 @@ export class StyleAwareEditor {
/**
* Apply styling for style buttons
*/
applyStyleButtonStyling(button, previewContent, styleInfo) {
applyStyleButtonStyling(button, styleSample, styleInfo) {
if (!styleInfo) return;
// Apply styling based on whether this is a detected style or default
if (styleInfo.isDefault) {
// Default style - apply semantic styling
button.classList.add('insertr-default-style');
previewContent.classList.add('insertr-default-preview');
// Add semantic styling for default elements
if (styleInfo.tagName === 'strong') {
previewContent.style.fontWeight = 'bold';
styleSample.style.fontWeight = 'bold';
} else if (styleInfo.tagName === 'em') {
previewContent.style.fontStyle = 'italic';
styleSample.style.fontStyle = 'italic';
} else if (styleInfo.tagName === 'a') {
previewContent.style.textDecoration = 'underline';
previewContent.style.color = '#0066cc';
styleSample.style.textDecoration = 'underline';
styleSample.style.color = '#0066cc';
}
// Add helpful description to title
button.title = `${styleInfo.name}: ${styleInfo.description || 'Default formatting option'}`;
} else if (styleInfo.element && styleInfo.classes && styleInfo.classes.length > 0) {
// Detected style - apply original classes to preview
// Detected style - apply original classes to style sample
button.classList.add('insertr-style-preview');
// Add the detected classes to the preview content
// Add the detected classes to the style sample (isolated preview)
styleInfo.classes.forEach(className => {
previewContent.classList.add(className);
styleSample.classList.add(className);
});
button.title = `Apply ${styleInfo.classes.join(' ')} styling`;
} else {
// No meaningful styles detected - use fallback
previewContent.classList.add('insertr-fallback-style');
button.classList.add('insertr-style-preview');
styleSample.classList.add('insertr-fallback-style');
}
}
/**
* Apply styling for link buttons
*/
applyLinkButtonStyling(button, previewContent) {
// Add link-specific styling
previewContent.style.textDecoration = 'underline';
previewContent.style.color = '#0066cc';
applyLinkButtonStyling(button, styleSample) {
// Add link-specific styling to the isolated sample
styleSample.style.textDecoration = 'underline';
styleSample.style.color = '#0066cc';
button.title = 'Create hyperlink';
}
/**