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

refactor: Replace multi-property forms with popup-based link configuration

Browse Source 
- Remove clunky multi-property editor with separate text + URL inputs
- Implement single rich text editor (contentEditable) for all content
- Add popup-based link configuration: select text → click 🔗 Link → configure
- Filter out link styles from formatting toolbar (links use popup, not buttons)
- Consolidate CSS: remove separate style-aware-editor.css, integrate into insertr.css
- Clean up 200+ lines of unused multi-property form code and styles
- Fix duplicate link style detection (no more 'Fancy Link' + 'Link' buttons)

Result: Much cleaner UX similar to modern editors where formatting uses
toolbar buttons and complex elements (links) use dedicated popups.
This commit is contained in:
Joakim
2025-09-19 20:16:33 +02:00
parent bf2927fec2
commit d317e2e1d9
4 changed files with 481 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
lib/src/styles/insertr.css
View File

@@ -321,88 +321,105 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
}
/* =================================================================
EDIT FORM STYLES
STYLE-AWARE EDITOR STYLES
Modern interface for content editing with style preservation
================================================================= */
.insertr-edit-form {
padding: var(--insertr-spacing-lg);
margin: 0;
font-family: var(--insertr-font-family);
font-size: var(--insertr-font-size-base);
line-height: var(--insertr-line-height);
color: var(--insertr-text-primary);
/* Main editor container */
.insertr-style-aware-editor {
background: var(--insertr-bg-primary);
}
.insertr-form-header {
margin: 0 0 var(--insertr-spacing-lg) 0;
padding: 0 0 var(--insertr-spacing-md) 0;
border-bottom: 1px solid var(--insertr-border-color);
}
.insertr-form-title {
margin: 0 0 var(--insertr-spacing-sm) 0;
padding: 0;
font-size: var(--insertr-font-size-lg);
font-weight: 600;
border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius);
padding: var(--insertr-spacing-lg);
min-width: 400px;
max-width: 600px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: var(--insertr-font-family);
color: var(--insertr-text-primary);
}
.insertr-form-help {
margin: 0;
padding: 0;
/* Style toolbar */
.insertr-style-toolbar {
display: flex;
align-items: center;
gap: var(--insertr-spacing-xs);
padding: var(--insertr-spacing-sm);
background: var(--insertr-bg-secondary);
border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius);
margin-bottom: var(--insertr-spacing-md);
flex-wrap: wrap;
}
.insertr-toolbar-title {
font-size: var(--insertr-font-size-sm);
font-weight: 500;
color: var(--insertr-text-muted);
margin-right: var(--insertr-spacing-xs);
}
.insertr-form-body {
margin: 0 0 var(--insertr-spacing-lg) 0;
padding: 0;
}
.insertr-form-group {
margin: 0 0 var(--insertr-spacing-md) 0;
padding: 0;
}
.insertr-form-label {
display: block;
margin: 0 0 var(--insertr-spacing-xs) 0;
padding: 0;
.insertr-style-btn {
background: var(--insertr-bg-primary);
border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius);
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
font-size: var(--insertr-font-size-sm);
font-weight: 500;
color: var(--insertr-text-primary);
cursor: pointer;
transition: var(--insertr-transition);
}
.insertr-form-input,
.insertr-form-textarea,
.insertr-form-select {
.insertr-style-btn:hover {
background: var(--insertr-bg-secondary);
border-color: var(--insertr-text-muted);
}
.insertr-style-btn:active {
background: var(--insertr-border-color);
transform: translateY(1px);
}
/* Editor components */
.insertr-simple-editor,
.insertr-rich-editor,
.insertr-fallback-textarea {
width: 100%;
padding: var(--insertr-input-padding);
margin: 0;
border: var(--insertr-input-border);
border-radius: var(--insertr-border-radius);
background: var(--insertr-input-bg);
font-family: var(--insertr-font-family);
padding: var(--insertr-input-padding);
font-size: var(--insertr-font-size-base);
line-height: var(--insertr-line-height);
font-family: var(--insertr-font-family);
color: var(--insertr-text-primary);
background: var(--insertr-input-bg);
margin-bottom: var(--insertr-spacing-md);
transition: var(--insertr-transition);
box-sizing: border-box;
}
.insertr-form-input:focus,
.insertr-form-textarea:focus,
.insertr-form-select:focus {
.insertr-simple-editor:focus,
.insertr-rich-editor:focus,
.insertr-fallback-textarea:focus {
outline: none;
border: var(--insertr-input-border-focus);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.insertr-form-textarea {
min-height: 120px;
.insertr-simple-editor,
.insertr-fallback-textarea {
resize: vertical;
min-height: 120px;
}
.insertr-rich-editor {
min-height: 100px;
overflow-y: auto;
}
/* Form actions */
.insertr-form-actions {
display: flex;
gap: var(--insertr-spacing-sm);
@@ -466,6 +483,19 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
outline-offset: 2px;
}
/* Fallback editor */
.insertr-fallback-editor {
background: var(--insertr-bg-primary);
border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius);
padding: var(--insertr-spacing-lg);
min-width: 400px;
max-width: 500px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: var(--insertr-font-family);
color: var(--insertr-text-primary);
}
/* =================================================================
VERSION HISTORY MODAL
================================================================= */
@@ -694,318 +724,35 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
top: -25px;
}
/* StyleAware Editor responsive adjustments */
.insertr-style-aware-editor,
.insertr-fallback-editor {
min-width: 300px;
max-width: calc(100vw - 2rem);
padding: var(--insertr-spacing-md);
}
.insertr-style-toolbar {
padding: var(--insertr-spacing-xs);
gap: var(--insertr-spacing-xs);
}
.insertr-style-btn {
padding: var(--insertr-spacing-xs);
font-size: var(--insertr-font-size-sm);
}
.insertr-form-actions {
flex-direction: column;
}
.insertr-btn-save,
.insertr-btn-cancel {
width: 100%;
}
.insertr-btn-history {
margin-right: 0;
order: -1;
}
}/**
* Styles for StyleAwareEditor
* Clean, modern interface that integrates with existing Insertr styling
*/
/* Main editor container */
.insertr-style-aware-editor {
background: white;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 1rem;
min-width: 400px;
max-width: 600px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Style toolbar */
.insertr-style-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.insertr-toolbar-title {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
margin-right: 0.5rem;
}
.insertr-style-btn {
background: white;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}
.insertr-style-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.insertr-style-btn:active {
background: #e5e7eb;
transform: translateY(1px);
}
/* Simple text editor */
.insertr-simple-editor {
width: 100%;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
resize: vertical;
font-family: inherit;
margin-bottom: 1rem;
}
.insertr-simple-editor:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Rich text editor */
.insertr-rich-editor {
width: 100%;
min-height: 100px;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1rem;
overflow-y: auto;
}
.insertr-rich-editor:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Multi-property editor */
.insertr-multi-property-editor {
margin-bottom: 1rem;
}
.insertr-styled-element-form {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 1rem;
margin-bottom: 1rem;
}
.insertr-styled-element-form:last-child {
margin-bottom: 0;
}
.insertr-form-header {
margin: 0 0 0.75rem 0;
font-size: 1rem;
font-weight: 600;
color: #374151;
}
/* Property inputs */
.insertr-property-input,
.insertr-text-input {
margin-bottom: 0.75rem;
}
.insertr-property-input:last-child,
.insertr-text-input:last-child {
margin-bottom: 0;
}
.insertr-property-label,
.insertr-input-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.25rem;
}
.insertr-property-field,
.insertr-text-field {
width: 100%;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 0.5rem;
font-size: 0.875rem;
line-height: 1.4;
font-family: inherit;
transition: border-color 0.2s ease;
}
.insertr-property-field:focus,
.insertr-text-field:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* URL inputs */
.insertr-property-field[type="url"] {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.8125rem;
}
/* Form actions */
.insertr-form-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
.insertr-btn-save,
.insertr-btn-cancel {
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid;
}
.insertr-btn-save {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.insertr-btn-save:hover {
background: #2563eb;
border-color: #2563eb;
}
.insertr-btn-cancel {
background: white;
border-color: #d1d5db;
color: #374151;
}
.insertr-btn-cancel:hover {
background: #f9fafb;
border-color: #9ca3af;
}
/* Fallback editor */
.insertr-fallback-editor {
background: white;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 1rem;
min-width: 400px;
max-width: 500px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.insertr-fallback-textarea {
width: 100%;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
resize: vertical;
font-family: inherit;
margin-bottom: 1rem;
}
.insertr-fallback-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Responsive adjustments */
@media (max-width: 640px) {
.insertr-style-aware-editor,
.insertr-fallback-editor {
min-width: 300px;
max-width: calc(100vw - 2rem);
margin: 1rem;
}
.insertr-style-toolbar {
padding: 0.5rem;
gap: 0.375rem;
}
.insertr-style-btn {
padding: 0.25rem 0.5rem;
font-size: 0.8125rem;
}
.insertr-form-actions {
flex-direction: column;
}
.insertr-btn-save,
.insertr-btn-cancel {
width: 100%;
}
}
/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
.insertr-style-aware-editor,
.insertr-fallback-editor {
background: #1f2937;
border-color: #374151;
color: #f9fafb;
}
.insertr-style-toolbar,
.insertr-styled-element-form {
background: #111827;
border-color: #374151;
}
.insertr-style-btn {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}
.insertr-style-btn:hover {
background: #4b5563;
border-color: #6b7280;
}
.insertr-property-field,
.insertr-text-field,
.insertr-simple-editor,
.insertr-fallback-textarea {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}
.insertr-rich-editor {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}
}