Block Style Plugin
The Block Style Plugin provides comprehensive styling capabilities for block elements in the on-CodeMerge editor, allowing users to apply custom CSS styles and classes to selected elements.
Features
- Block Element Detection: Automatic detection of block-level elements
- Style Editor: Visual interface for applying CSS styles
- Class Management: Add and remove CSS classes
- Property Selection: Choose from predefined CSS properties
- Value Selection: Select from predefined values for each property
- Real-time Preview: See style changes immediately
- Toolbar Integration: Easy access via toolbar button
- Active State: Visual feedback when block is selected
Installation
bash
npm install on-codemerge
Basic Usage
javascript
import { HTMLEditor, BlockStylePlugin } from 'on-codemerge';
const editor = new HTMLEditor(container);
editor.use(new BlockStylePlugin());
Demo
on-CodeMerge
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:
API Reference
Block Detection
javascript
// Check if element is a block element
const isBlock = blockStylePlugin.isBlockElement(element);
// Get selected block element
const selectedBlock = blockStylePlugin.getSelectedElement();
// Check if block is currently selected
const hasBlockSelected = blockStylePlugin.hasBlockSelected();
Style Management
javascript
// Apply styles to selected block
blockStylePlugin.applyStyles(styles);
// Add CSS class to block
blockStylePlugin.addClass(className);
// Remove CSS class from block
blockStylePlugin.removeClass(className);
// Get current styles of block
const currentStyles = blockStylePlugin.getCurrentStyles();
Available CSS Properties
Colors
color
- Text colorbackground-color
- Background color
Typography
font-size
- Font size (8px to 72px)font-weight
- Font weight (normal, bold, 100-900)
Layout
text-align
- Text alignmentmargin-top
,margin-right
,margin-bottom
,margin-left
- Marginspadding-top
,padding-right
,padding-bottom
,padding-left
- Padding
Borders
border-style
- Border style (solid, dashed, dotted, etc.)border-width
- Border width (1px to 10px, thin, medium, thick)border-color
- Border color
Positioning
position
- Position typetop
,right
,bottom
,left
- Position valuesz-index
- Z-index value
Display
display
- Display typefloat
- Float propertyclear
- Clear property
Dimensions
width
,height
- Element dimensionsmin-width
,min-height
- Minimum dimensionsmax-width
,max-height
- Maximum dimensions
Events
javascript
// Listen to block selection events
editor.on('block:selected', (element) => {
console.log('Block selected:', element);
});
editor.on('block:deselected', () => {
console.log('Block deselected');
});
editor.on('styles:applied', (styles) => {
console.log('Styles applied:', styles);
});
editor.on('class:added', (className) => {
console.log('Class added:', className);
});
editor.on('class:removed', (className) => {
console.log('Class removed:', className);
});
Examples
Basic Block Styling
html
<!-- Styled paragraph -->
<p style="color: blue; font-size: 18px; text-align: center;">
This is a styled paragraph
</p>
<!-- Styled div with background -->
<div style="background-color: lightgray; padding: 20px; border: 2px solid black;">
This div has custom styling
</div>
Block with CSS Classes
html
<!-- Block with custom class -->
<div class="custom-block">
This block uses a CSS class
</div>
<!-- Multiple classes -->
<p class="highlighted important">
This paragraph has multiple classes
</p>
Complex Block Styling
html
<!-- Complex styled block -->
<section style="
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-left: 4px solid #007bff;
">
<h2 style="color: #333; margin-bottom: 15px;">Styled Section</h2>
<p style="line-height: 1.6; color: #666;">
This section demonstrates complex styling capabilities.
</p>
</section>
Integration Examples
React Integration
jsx
import React, { useEffect, useRef } from 'react';
import { HTMLEditor, BlockStylePlugin } from 'on-codemerge';
function MyEditor() {
const editorRef = useRef(null);
const editorInstance = useRef(null);
useEffect(() => {
if (editorRef.current && !editorInstance.current) {
editorInstance.current = new HTMLEditor(editorRef.current);
editorInstance.current.use(new BlockStylePlugin());
}
return () => {
if (editorInstance.current) {
editorInstance.current.destroy();
}
};
}, []);
return <div ref={editorRef} className="editor-container" />;
}
Vue Integration
vue
<template>
<div ref="editorContainer" class="editor-container"></div>
</template>
<script>
import { HTMLEditor, BlockStylePlugin } from 'on-codemerge';
export default {
name: 'MyEditor',
mounted() {
this.editor = new HTMLEditor(this.$refs.editorContainer);
this.editor.use(new BlockStylePlugin());
},
beforeDestroy() {
if (this.editor) {
this.editor.destroy();
}
}
};
</script>
Styling
Default Styles
css
/* Block style editor popup */
.block-style-editor {
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
max-width: 500px;
}
/* Style property selector */
.style-property {
margin-bottom: 1rem;
}
.style-property label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: #374151;
}
.style-property select {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
background-color: white;
}
/* Value selector */
.style-value {
margin-left: 1rem;
}
/* Class management */
.class-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 0.25rem;
padding: 0.5rem;
}
.class-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0;
border-bottom: 1px solid #f3f4f6;
}
.class-item:last-child {
border-bottom: none;
}
Custom Block Styles
css
/* Custom block themes */
.block-style-dark {
background-color: #1f2937;
color: #f9fafb;
}
.block-style-light {
background-color: #ffffff;
color: #374151;
}
/* Custom block indicators */
.block-indicator {
position: relative;
}
.block-indicator::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background-color: #3b82f6;
opacity: 0;
transition: opacity 0.2s ease;
}
.block-indicator:hover::before {
opacity: 1;
}
Responsive Block Styles
css
/* Mobile-first block styles */
@media (max-width: 768px) {
.block-style-editor {
max-width: 100%;
margin: 0 1rem;
}
.style-property {
flex-direction: column;
}
.style-value {
margin-left: 0;
margin-top: 0.5rem;
}
}
/* Tablet block styles */
@media (min-width: 769px) and (max-width: 1024px) {
.block-style-editor {
max-width: 600px;
}
}
Block Element Types
The plugin recognizes these block-level elements:
Text Elements
p
,h1
,h2
,h3
,h4
,h5
,h6
blockquote
,pre
,address
Container Elements
div
,section
,article
,header
,footer
nav
,aside
,main
,figure
,figcaption
List Elements
ul
,ol
,li
,dl
,dt
,dd
Table Elements
table
,thead
,tbody
,tfoot
,tr
,th
,td
,caption
Form Elements
form
,fieldset
,legend
Other Elements
hr
,menu
,dialog
,iframe
,canvas
video
,audio
,picture
,object
,embed
Troubleshooting
Common Issues
Block not detected
- Check if element is in the supported block list
- Verify element is properly selected
- Check for JavaScript errors
Styles not applying
- Ensure block is selected before applying styles
- Check for CSS conflicts
- Verify style property and value are valid
Popup not opening
- Check if toolbar button exists
- Verify plugin initialization
- Check for popup manager errors
Classes not working
- Ensure CSS classes are defined in stylesheet
- Check for class name conflicts
- Verify class addition/removal logic
Debug Mode
Enable debug logging:
javascript
// Add console logging
console.log('Block Style plugin initialized');
// Check block selection
editor.on('block:selected', (element) => {
console.log('Block selected:', element.tagName, element);
});
// Check style application
editor.on('styles:applied', (styles) => {
console.log('Styles applied:', styles);
});
// Check current block
const selectedBlock = blockStylePlugin.getSelectedElement();
console.log('Current selected block:', selectedBlock);
Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Performance Considerations
- Block detection is optimized
- Style application is efficient
- Popup creation is lazy-loaded
- CSS property validation is cached
Accessibility
- Screen reader support for style controls
- Keyboard navigation for style selection
- Proper ARIA labels for style properties
- High contrast style indicators
License
MIT License - see LICENSE file for details.