Leopoldadmin
117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
/**
|
||
* InlineTextEditor – Floating input overlay for non-blocking text editing.
|
||
* Replaces window.prompt() for text element editing.
|
||
*/
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
|
||
export interface InlineTextEditorProps {
|
||
initialText: string;
|
||
onSubmit: (text: string) => void;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
const InlineTextEditor: React.FC<InlineTextEditorProps> = ({ initialText, onSubmit, onCancel }) => {
|
||
const [text, setText] = useState(initialText);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useEffect(() => {
|
||
inputRef.current?.focus();
|
||
inputRef.current?.select();
|
||
}, []);
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
onSubmit(text);
|
||
} else if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
onCancel();
|
||
}
|
||
};
|
||
|
||
const handleBlur = () => {
|
||
onSubmit(text);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
zIndex: 10000,
|
||
background: 'var(--color-bg-secondary, #2a2a2a)',
|
||
border: '1px solid var(--color-border, #444)',
|
||
borderRadius: '8px',
|
||
padding: '12px 16px',
|
||
boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
minWidth: '320px',
|
||
}}
|
||
>
|
||
<label
|
||
style={{
|
||
fontSize: '12px',
|
||
color: 'var(--color-text-secondary, #aaa)',
|
||
fontFamily: 'sans-serif',
|
||
}}
|
||
>
|
||
Text eingeben
|
||
</label>
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={text}
|
||
onChange={(e) => setText(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
onBlur={handleBlur}
|
||
style={{
|
||
width: '100%',
|
||
padding: '8px 10px',
|
||
fontSize: '14px',
|
||
background: 'var(--color-bg-primary, #1a1a1a)',
|
||
color: 'var(--color-text-primary, #fff)',
|
||
border: '1px solid var(--color-border, #555)',
|
||
borderRadius: '4px',
|
||
outline: 'none',
|
||
}}
|
||
/>
|
||
<div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
|
||
<button
|
||
onClick={onCancel}
|
||
style={{
|
||
padding: '6px 14px',
|
||
fontSize: '13px',
|
||
background: 'transparent',
|
||
color: 'var(--color-text-secondary, #aaa)',
|
||
border: '1px solid var(--color-border, #555)',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
Abbrechen (Esc)
|
||
</button>
|
||
<button
|
||
onClick={() => onSubmit(text)}
|
||
style={{
|
||
padding: '6px 14px',
|
||
fontSize: '13px',
|
||
background: 'var(--color-accent, #3498db)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
Bestätigen (Enter)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default InlineTextEditor;
|