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

153
internal/content/assets/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,10 +724,33 @@ 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;