@evolution-james/evolution-editor 1.0.1 → 1.0.3

package/README.md

@@ -3,6 +3,7 @@
 
 Evolution Editor is a standalone, rich text editor React component designed for easy integration into any React project. It supports both read-only and editable modes, JSON import/export, and theming via CSS variables.
 
+[Live Demo](https://evolution-editor-demo.vercel.app/)
 
 
 ## Table of Contents
@@ -81,12 +82,9 @@ import '@evolution-james/evolution-editor/dist/styles.css';
 
 ## Styling Guidelines
 
-### Parent Container CSS Classes
+### Parent Container CSS Class
 
-To constrain the size of your editor, I recommend wrapping it in a container element.
-For example, a <div> with the class .container
-You can then apply styling as you'd like. For example, if you wish to restrict its width to 80% of the viewport
-and it's height to 800 pixels, and you wish to center it, you could do this:
+To constrain the size of your editor, I recommend wrapping it in a container element, such as a ```<div>``` with the class ```.container``` You can then apply styling as you'd like. For example, if you wish to restrict its width to 80% of the viewport and it's height to 800 pixels, and you wish to center it, you could do this:
 
 ```css
 .container {

package/dist/styles.css

@@ -1 +1 @@
-.margin-option,.padding-option{background:none;border:none;color:#333;cursor:pointer;font-size:14px;padding:6px 12px}.margin-option:hover,.padding-option:hover{background:#eaf3fb;color:#4a90e2}.toolbar{background-color:var(--color-bg);border-bottom:1px solid var(--color-divider);justify-content:space-between;padding:12px 16px;position:sticky;top:0;z-index:100}.toolbar,.toolbar-sections{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.toolbar-section{align-items:center;display:flex;gap:4px}.toolbar-label{color:var(--color-text);font-size:12px;font-weight:500;margin-right:4px}.toolbar-button{background-color:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:4px;color:var(--color-text);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s;white-space:nowrap}.toolbar-button:hover:not(:disabled){background-color:var(--color-btn-light-bg);border-color:var(--color-divider)}.toolbar-button:active:not(:disabled){background-color:#dee2e6}.toolbar-button.active{background-color:#4a90e2;border-color:#4a90e2;color:#fff}.toolbar-button:disabled{cursor:not-allowed;opacity:.5}.toolbar-divider{background-color:var(--color-divider);height:24px;width:1px}.toolbar-dropdown{position:relative}.toolbar-dropdown-menu{background-color:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);left:0;margin-top:4px;max-height:200px;overflow-y:auto;position:absolute;top:100%;z-index:1000}.color-picker{display:grid;gap:4px;grid-template-columns:repeat(5,1fr);padding:8px;width:180px}.color-option{border:2px solid var(--color-card-border);border-radius:4px;cursor:pointer;height:28px;transition:transform .2s;width:28px}.color-option:hover{border-color:#4a90e2;transform:scale(1.1)}.font-size-picker{min-width:100px;padding:4px}.font-size-option{background:none;border:none;cursor:pointer;display:block;font-size:14px;padding:8px 12px;text-align:left;width:100%}.font-size-option:hover{background-color:#f8f9fa}.toolbar-color-swatch{border:2px solid var(--color-card-border);border-radius:4px;cursor:pointer;height:28px;padding:0;transition:border-color .2s;width:28px}.toolbar-color-swatch:hover:not(:disabled){border-color:#4a90e2}.toolbar-color-swatch:disabled{cursor:not-allowed;opacity:.5}.toolbar-input{border:1px solid #dee2e6;border-radius:4px;font-size:13px;padding:6px 8px;text-align:center;width:56px}.toolbar-input:disabled{cursor:not-allowed;opacity:.5}.align-icon{display:flex;flex-direction:column;gap:2px;height:12px;width:14px}.align-icon:after,.align-icon:before{background:currentColor;border-radius:1px;content:"";height:2px}.align-left:before{width:100%}.align-left:after{width:70%}.align-center:before{margin:0 auto;width:100%}.align-center:after{margin:0 auto;width:70%}.align-right:before{margin-left:auto;width:100%}.align-right:after{margin-left:auto;width:70%}.paragraph-block{word-wrap:break-word;min-height:1.5em;outline:none;white-space:pre-wrap}.paragraph-block:empty:before{color:#999;content:attr(data-placeholder);pointer-events:none}.heading-block{word-wrap:break-word;font-weight:700;outline:none;white-space:pre-wrap}.heading-block:empty:before{color:#999;content:attr(data-placeholder);font-weight:400;pointer-events:none}.list-block{list-style-position:inside}.list-item{margin-bottom:4px}.list-item-content{word-wrap:break-word;display:inline;outline:none}.list-item-content:focus{background-color:#f0f8ff}.list-item-content:empty:before{color:#999;content:"List item...";pointer-events:none}.image-block-wrapper{display:inline-block;max-width:100%;position:relative}.image-block{border-radius:4px;display:block;height:auto;max-width:100%}.image-block-input{background-color:#f5f5f5;border:2px dashed #ccc;border-radius:4px;padding:16px}.image-url-input{border:1px solid #ddd;border-radius:4px;font-size:14px;margin-bottom:8px;padding:8px 12px;width:100%}.image-url-input:focus{border-color:#4a90e2;outline:none}.image-block-actions{display:flex;gap:8px}.image-block-btn{background-color:#4a90e2;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px}.image-block-btn:hover{background-color:#357abd}.image-edit-btn{background-color:rgba(0,0,0,.6);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;opacity:0;padding:4px 8px;position:absolute;right:8px;top:8px;transition:opacity .2s}.image-block-wrapper:hover .image-edit-btn{opacity:1}.image-error{background-color:#fee;border-radius:4px;color:#c00;padding:16px;text-align:center}.youtube-block-wrapper{max-width:100%;position:relative}.youtube-embed{border-radius:4px;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.youtube-embed iframe{height:100%;left:0;position:absolute;top:0;width:100%}.youtube-block-input{background-color:#f5f5f5;border:2px dashed #ccc;border-radius:4px;padding:16px}.youtube-url-input{border:1px solid #ddd;border-radius:4px;font-size:14px;margin-bottom:8px;padding:8px 12px;width:100%}.youtube-url-input:focus{border-color:#4a90e2;outline:none}.youtube-block-actions{display:flex;gap:8px}.youtube-block-btn{background-color:#4a90e2;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px}.youtube-block-btn:hover{background-color:#357abd}.youtube-edit-btn{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;color:#333;cursor:pointer;font-size:12px;margin-top:8px;padding:6px 12px}.youtube-edit-btn:hover{background-color:#e8e8e8}.divider-block-wrapper{cursor:pointer}.divider-block{border:none;border-top:2px solid #ddd;width:100%}.divider-block-wrapper:hover .divider-block{border-top-color:#4a90e2}.evolution-editor{box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);display:flex;flex-direction:column;height:100%;min-height:0}.editor-save-notification{background:#232b36;border-radius:6px;box-shadow:0 2px 16px 0 rgba(41,121,255,.1);color:#90caf9;font-size:.98rem;font-weight:500;opacity:.97;padding:6px 18px;pointer-events:none;position:absolute;right:24px;top:10px;transition:opacity .3s;z-index:10}.editor-branding{align-items:center;background:var(--color-brand-bg,#232b36);border-bottom:1px solid var(--color-divider,#1a2230);display:flex;flex-direction:column;justify-content:center;padding:1px 0 6px;position:relative}.editor-logo{color:var(--color-primary,#90caf9);font-family:Roboto Mono,Fira Mono,Consolas,Menlo,Monaco,monospace;font-size:1.45rem;font-weight:600;letter-spacing:.08em;text-align:center;text-shadow:0 1px 6px rgba(41,121,255,.08);text-transform:uppercase;user-select:none}.editor-subtitle{color:#b0b8c9;font-size:.85rem;margin-bottom:2px;margin-top:0;opacity:.85;text-align:center}.editor-subtitle a{color:var(--color-primary,#4a90e2);text-decoration:none;transition:text-decoration .2s}.editor-subtitle a:hover{text-decoration:underline}.toolbar-color-picker{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;height:28px;padding:2px;transition:border-color .15s;width:28px}.toolbar-color-picker:hover{border-color:#4a90e2}.block-move-btn{align-items:center;background:none;border:none;border-radius:3px;color:#4a90e2;cursor:pointer;display:flex;font-size:18px;height:20px;line-height:1;padding:0 3px;transition:background .2s,color .2s}.block-move-btn:disabled{color:#ccc;cursor:not-allowed}.block-move-btn:hover:not(:disabled){background:#eaf3fb}.block-actions{align-items:center;display:none;gap:4px;position:absolute;right:-65px;top:50%;transform:translateY(-50%);z-index:1}.block-delete-button,.block-edit-button{background:none;border:none;border-radius:3px;color:#666;cursor:pointer;font-size:16px;padding:2px 4px;transition:background .2s,color .2s}.block-edit-button:hover{background:#eaf3fb;color:#4a90e2}.block-delete-button:hover{background:#fdeaea;color:#e24a4a}.block-left-controls{align-items:center;display:none;gap:6px;left:-90px;position:absolute;top:50%;transform:translateY(-50%);z-index:1}.block-actions:hover,.block-left-controls:hover,.editor-block-wrapper:hover .block-actions,.editor-block-wrapper:hover .block-left-controls,.editor-block:hover~.block-left-controls{display:flex}.block-tag-label{color:#999;display:block;font-family:monospace;font-size:11px;left:-50px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);user-select:none;white-space:nowrap}.editor-stepper{align-items:stretch;background-color:var(--color-bg,#eef4fb);border-bottom:1px solid var(--color-divider,#d0dce8);display:flex;flex-direction:row;gap:0;justify-content:space-between;margin-top:12px}.step{align-items:center;display:flex;flex:1 1 0;flex-direction:column;padding:0 8px 10px;position:relative}.step-label{color:var(--color-primary,#4a90e2);font-size:13px;font-weight:600;margin-bottom:2px}.step-desc{color:var(--color-text,#555);font-size:11px;opacity:.85;text-align:center}.instruction-action{color:#4a90e2;font-weight:600;white-space:nowrap}.instruction-desc{color:var(--color-text,#555);white-space:nowrap}.editor-content{box-sizing:border-box;cursor:default;flex:1;margin:0;max-width:100%;overflow-x:auto;overflow-y:auto;padding:24px 80px 24px 120px;position:relative;width:100%}.editor-content:after{content:"";display:block;min-height:30vh}.editor-block-wrapper{box-sizing:border-box;margin-bottom:4px;max-width:100%;position:relative}.editor-block-wrapper:before{left:-100px;width:100px}.editor-block-wrapper:after,.editor-block-wrapper:before{bottom:0;content:"";pointer-events:auto;position:absolute;top:0}.editor-block-wrapper:after{right:-75px;width:75px}.editor-block{border:2px solid rgba(0,0,0,.07);border-radius:4px;cursor:text;padding:4px;transition:all .2s}.editor-block:hover{background-color:#f8f9fa;border-color:#e9ecef}.editor-block.focused{background-color:#f0f8ff;border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.1)}.context-menu{background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:160px;padding:4px 0;position:absolute;z-index:1000}.context-menu-item{background:none;border:none;color:#333;cursor:pointer;display:block;font-size:14px;padding:8px 16px;text-align:left;width:100%}.context-menu-item:hover{background-color:#f0f8ff;color:#4a90e2}.style-modal-overlay{align-items:center;background-color:rgba(0,0,0,.35);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.style-modal{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,.15);max-height:80vh;overflow-y:auto;width:440px}.style-modal-header{align-items:center;background-color:#f8f9fa;border-bottom:1px solid #dee2e6;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;padding:14px 20px}.style-modal-header h3{color:#333;font-size:16px;font-weight:600;margin:0}.style-modal-close{background:none;border:none;border-radius:4px;color:#999;cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;transition:all .15s}.style-modal-close:hover{background-color:rgba(0,0,0,.06);color:#333}.style-modal-body{padding:20px}.style-modal-section{padding:16px 0}.style-modal-section:first-child{padding-top:0}.style-modal-section:last-child{padding-bottom:0}.style-modal-divider{background:#dee2e6;border:none;display:block;height:1px;margin:4px 0;opacity:1;width:100%}.style-modal-section h4{color:#6c757d;font-size:12px;font-weight:600;letter-spacing:.6px;margin:0 0 12px;text-transform:uppercase}.style-modal-row{display:flex;flex-wrap:wrap;gap:10px}.style-modal-field{display:flex;flex:1;flex-direction:column;gap:5px;min-width:70px}.style-modal-field label{color:#888;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}.style-modal-field input[type=number]{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;box-sizing:border-box;font-size:13px;padding:7px 10px;transition:border-color .15s,box-shadow .15s;width:100%}.style-modal-field input[type=number]:focus{border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.12);outline:none}.style-modal-field input[type=color]{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;box-sizing:border-box;cursor:pointer;height:34px;padding:3px;transition:border-color .15s;width:100%}.style-modal-field input[type=color]:hover{border-color:#adb5bd}.style-modal-font-size{display:flex;gap:8px}.style-modal-font-size select{transition:border-color .15s,box-shadow .15s}.style-modal-font-size select:focus{border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.12);outline:none}.style-modal-font-size select{background:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;flex:1;font-size:13px;padding:6px 8px}.style-modal-font-size .style-modal-input-wrapper{flex:1}.style-modal-input-wrapper{align-items:center;display:flex;position:relative}.style-modal-input-wrapper input{padding-right:24px!important}.style-modal-suffix{color:#999;font-size:11px;pointer-events:none;position:absolute;right:8px}.evolution-editor.read-only .editor-content{overflow-x:hidden;padding:24px}.evolution-editor.read-only .editor-content:after{display:none}.evolution-editor.read-only .editor-block{border:none;cursor:default;padding:0}.evolution-editor.read-only .editor-block:hover{background-color:transparent;border-color:transparent}.evolution-editor.read-only .block-tag-label{display:none}
+.margin-option,.padding-option{background:none;border:none;color:#333;cursor:pointer;font-size:14px;padding:6px 12px}.margin-option:hover,.padding-option:hover{background:#eaf3fb;color:#4a90e2}.toolbar{background-color:var(--color-bg);border-bottom:1px solid var(--color-divider);justify-content:space-between;padding:12px 16px;position:sticky;top:0;z-index:100}.toolbar,.toolbar-sections{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.toolbar-section{align-items:center;display:flex;gap:4px}.toolbar-label{color:var(--color-text);font-size:12px;font-weight:500;margin-right:4px}.toolbar-button{background-color:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:4px;color:var(--color-text);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s;white-space:nowrap}.toolbar-button:hover:not(:disabled){background-color:var(--color-btn-light-bg);border-color:var(--color-divider)}.toolbar-button:active:not(:disabled){background-color:#dee2e6}.toolbar-button.active{background-color:#4a90e2;border-color:#4a90e2;color:#fff}.toolbar-button:disabled{cursor:not-allowed;opacity:.5}.toolbar-divider{background-color:var(--color-divider);height:24px;width:1px}.toolbar-dropdown{position:relative}.toolbar-dropdown-menu{background-color:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);left:0;margin-top:4px;max-height:200px;overflow-y:auto;position:absolute;top:100%;z-index:1000}.color-picker{display:grid;gap:4px;grid-template-columns:repeat(5,1fr);padding:8px;width:180px}.color-option{border:2px solid var(--color-card-border);border-radius:4px;cursor:pointer;height:28px;transition:transform .2s;width:28px}.color-option:hover{border-color:#4a90e2;transform:scale(1.1)}.font-size-picker{min-width:100px;padding:4px}.font-size-option{background:none;border:none;cursor:pointer;display:block;font-size:14px;padding:8px 12px;text-align:left;width:100%}.font-size-option:hover{background-color:#f8f9fa}.toolbar-color-swatch{border:2px solid var(--color-card-border);border-radius:4px;cursor:pointer;height:28px;padding:0;transition:border-color .2s;width:28px}.toolbar-color-swatch:hover:not(:disabled){border-color:#4a90e2}.toolbar-color-swatch:disabled{cursor:not-allowed;opacity:.5}.toolbar-input{border:1px solid #dee2e6;border-radius:4px;font-size:13px;padding:6px 8px;text-align:center;width:56px}.toolbar-input:disabled{cursor:not-allowed;opacity:.5}.align-icon{display:flex;flex-direction:column;gap:2px;height:12px;width:14px}.align-icon:after,.align-icon:before{background:currentColor;border-radius:1px;content:"";height:2px}.align-left:before{width:100%}.align-left:after{width:70%}.align-center:before{margin:0 auto;width:100%}.align-center:after{margin:0 auto;width:70%}.align-right:before{margin-left:auto;width:100%}.align-right:after{margin-left:auto;width:70%}.paragraph-block{word-wrap:break-word;min-height:1.5em;outline:none;white-space:pre-wrap}.paragraph-block:empty:before{color:#999;content:attr(data-placeholder);pointer-events:none}.heading-block{word-wrap:break-word;font-weight:700;outline:none;white-space:pre-wrap}.heading-block:empty:before{color:#999;content:attr(data-placeholder);font-weight:400;pointer-events:none}.list-block{list-style-position:inside}.list-item{margin-bottom:4px}.list-item-content{word-wrap:break-word;display:inline;outline:none}.list-item-content:focus{background-color:#f0f8ff}.list-item-content:empty:before{color:#999;content:"List item...";pointer-events:none}.image-block-wrapper{display:inline-block;max-width:100%;position:relative}.image-block{border-radius:4px;display:block;height:auto;max-width:100%}.image-block-input{background-color:#f5f5f5;border:2px dashed #ccc;border-radius:4px;padding:16px}.image-url-input{border:1px solid #ddd;border-radius:4px;font-size:14px;margin-bottom:8px;padding:8px 12px;width:100%}.image-url-input:focus{border-color:#4a90e2;outline:none}.image-block-actions{display:flex;gap:8px}.image-block-btn{background-color:#4a90e2;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px}.image-block-btn:hover{background-color:#357abd}.image-edit-btn{background-color:rgba(0,0,0,.6);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;opacity:0;padding:4px 8px;position:absolute;right:8px;top:8px;transition:opacity .2s}.image-block-wrapper:hover .image-edit-btn{opacity:1}.image-error{background-color:#fee;border-radius:4px;color:#c00;padding:16px;text-align:center}.youtube-block-wrapper{max-width:100%;position:relative}.youtube-embed{border-radius:4px;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.youtube-embed iframe{height:100%;left:0;position:absolute;top:0;width:100%}.youtube-block-input{background-color:#f5f5f5;border:2px dashed #ccc;border-radius:4px;padding:16px}.youtube-url-input{border:1px solid #ddd;border-radius:4px;font-size:14px;margin-bottom:8px;padding:8px 12px;width:100%}.youtube-url-input:focus{border-color:#4a90e2;outline:none}.youtube-block-actions{display:flex;gap:8px}.youtube-block-btn{background-color:#4a90e2;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px}.youtube-block-btn:hover{background-color:#357abd}.youtube-edit-btn{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;color:#333;cursor:pointer;font-size:12px;margin-top:8px;padding:6px 12px}.youtube-edit-btn:hover{background-color:#e8e8e8}.divider-block-wrapper{cursor:pointer}.divider-block{border:none;border-top:2px solid #ddd;width:100%}.divider-block-wrapper:hover .divider-block{border-top-color:#4a90e2}:root{--color-divider:#dee2e6}.evolution-editor{box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);display:flex;flex-direction:column;height:100%;min-height:0}.editor-save-notification{background:#232b36;border-radius:6px;box-shadow:0 2px 16px 0 rgba(41,121,255,.1);color:#90caf9;font-size:.98rem;font-weight:500;opacity:.97;padding:6px 18px;pointer-events:none;position:absolute;right:24px;top:10px;transition:opacity .3s;z-index:10}.editor-branding{align-items:center;background:var(--color-brand-bg,#232b36);border-bottom:1px solid var(--color-divider,#1a2230);display:flex;flex-direction:column;justify-content:center;padding:1px 0 6px;position:relative}.editor-logo{color:var(--color-primary,#90caf9);font-family:Roboto Mono,Fira Mono,Consolas,Menlo,Monaco,monospace;font-size:1.45rem;font-weight:600;letter-spacing:.08em;text-align:center;text-shadow:0 1px 6px rgba(41,121,255,.08);text-transform:uppercase;user-select:none}.editor-subtitle{color:#b0b8c9;font-size:.85rem;margin-bottom:2px;margin-top:0;opacity:.85;text-align:center}.editor-subtitle a{color:var(--color-primary,#4a90e2);text-decoration:none;transition:text-decoration .2s}.editor-subtitle a:hover{text-decoration:underline}.toolbar-color-picker{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;height:28px;padding:2px;transition:border-color .15s;width:28px}.toolbar-color-picker:hover{border-color:#4a90e2}.block-move-btn{align-items:center;background:none;border:none;border-radius:3px;color:#4a90e2;cursor:pointer;display:flex;font-size:18px;height:20px;line-height:1;padding:0 3px;transition:background .2s,color .2s}.block-move-btn:disabled{color:#ccc;cursor:not-allowed}.block-move-btn:hover:not(:disabled){background:#eaf3fb}.block-actions{align-items:center;display:none;gap:4px;position:absolute;right:-65px;top:50%;transform:translateY(-50%);z-index:1}.block-delete-button,.block-edit-button{background:none;border:none;border-radius:3px;color:#666;cursor:pointer;font-size:16px;padding:2px 4px;transition:background .2s,color .2s}.block-edit-button:hover{background:#eaf3fb;color:#4a90e2}.block-delete-button:hover{background:#fdeaea;color:#e24a4a}.block-left-controls{align-items:center;display:none;gap:6px;left:-90px;position:absolute;top:50%;transform:translateY(-50%);z-index:1}.block-actions:hover,.block-left-controls:hover,.editor-block-wrapper:hover .block-actions,.editor-block-wrapper:hover .block-left-controls,.editor-block:hover~.block-left-controls{display:flex}.block-tag-label{color:#999;display:block;font-family:monospace;font-size:11px;left:-50px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);user-select:none;white-space:nowrap}.editor-stepper{align-items:stretch;background-color:var(--color-bg,#eef4fb);border-bottom:1px solid var(--color-divider,#d0dce8);display:flex;flex-direction:row;gap:0;justify-content:space-between;margin-top:12px}.step{align-items:center;display:flex;flex:1 1 0;flex-direction:column;padding:0 8px 10px;position:relative}.step-label{color:var(--color-primary,#4a90e2);font-size:13px;font-weight:600;margin-bottom:2px}.step-desc{color:var(--color-text,#555);font-size:11px;opacity:.85;text-align:center}.instruction-action{color:#4a90e2;font-weight:600;white-space:nowrap}.instruction-desc{color:var(--color-text,#555);white-space:nowrap}.editor-content{box-sizing:border-box;cursor:default;flex:1;margin:0;max-width:100%;overflow-x:auto;overflow-y:auto;padding:24px 80px 24px 120px;position:relative;width:100%}.editor-content:after{content:"";display:block;min-height:30vh}.editor-block-wrapper{box-sizing:border-box;margin-bottom:4px;max-width:100%;position:relative}.editor-block-wrapper:before{left:-100px;width:100px}.editor-block-wrapper:after,.editor-block-wrapper:before{bottom:0;content:"";pointer-events:auto;position:absolute;top:0}.editor-block-wrapper:after{right:-75px;width:75px}.editor-block{border:2px solid rgba(0,0,0,.07);border-radius:4px;cursor:text;padding:4px;transition:all .2s}.editor-block:hover{background-color:#f8f9fa;border-color:#e9ecef}.editor-block.focused{background-color:#f0f8ff;border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.1)}.context-menu{background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:160px;padding:4px 0;position:absolute;z-index:1000}.context-menu-item{background:none;border:none;color:#333;cursor:pointer;display:block;font-size:14px;padding:8px 16px;text-align:left;width:100%}.context-menu-item:hover{background-color:#f0f8ff;color:#4a90e2}.style-modal-overlay{align-items:center;background-color:rgba(0,0,0,.35);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.style-modal{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,.15);max-height:80vh;overflow-y:auto;width:440px}.style-modal-header{align-items:center;background-color:#f8f9fa;border-bottom:1px solid #dee2e6;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;padding:14px 20px}.style-modal-header h3{color:#333;font-size:16px;font-weight:600;margin:0}.style-modal-close{background:none;border:none;border-radius:4px;color:#999;cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;transition:all .15s}.style-modal-close:hover{background-color:rgba(0,0,0,.06);color:#333}.style-modal-body{padding:20px}.style-modal-section{padding:16px 0}.style-modal-section:first-child{padding-top:0}.style-modal-section:last-child{padding-bottom:0}.style-modal-divider{background:#dee2e6;border:none;display:block;height:1px;margin:4px 0;opacity:1;width:100%}.style-modal-section h4{color:#6c757d;font-size:12px;font-weight:600;letter-spacing:.6px;margin:0 0 12px;text-transform:uppercase}.style-modal-row{display:flex;flex-wrap:wrap;gap:10px}.style-modal-field{display:flex;flex:1;flex-direction:column;gap:5px;min-width:70px}.style-modal-field label{color:#888;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}.style-modal-field input[type=number]{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;box-sizing:border-box;font-size:13px;padding:7px 10px;transition:border-color .15s,box-shadow .15s;width:100%}.style-modal-field input[type=number]:focus{border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.12);outline:none}.style-modal-field input[type=color]{background-color:#fff;border:1px solid #dee2e6;border-radius:4px;box-sizing:border-box;cursor:pointer;height:34px;padding:3px;transition:border-color .15s;width:100%}.style-modal-field input[type=color]:hover{border-color:#adb5bd}.style-modal-font-size{display:flex;gap:8px}.style-modal-font-size select{transition:border-color .15s,box-shadow .15s}.style-modal-font-size select:focus{border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.12);outline:none}.style-modal-font-size select{background:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;flex:1;font-size:13px;padding:6px 8px}.style-modal-font-size .style-modal-input-wrapper{flex:1}.style-modal-input-wrapper{align-items:center;display:flex;position:relative}.style-modal-input-wrapper input{padding-right:24px!important}.style-modal-suffix{color:#999;font-size:11px;pointer-events:none;position:absolute;right:8px}.evolution-editor.read-only .editor-content{overflow-x:hidden;padding:24px}.evolution-editor.read-only .editor-content:after{display:none}.evolution-editor.read-only .editor-block{border:none;cursor:default;padding:0}.evolution-editor.read-only .editor-block:hover{background-color:transparent;border-color:transparent}.evolution-editor.read-only .block-tag-label{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolution-james/evolution-editor",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A modular, block-based rich text editor for React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",