feat(admin): add wysiwyg editor for order wizard

shop/app/admin/wysiwyg/components/inline-input.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+
+interface InlineInputProps {
+  value: string
+  onSave: (val: string) => Promise<void>
+  className?: string
+  type?: 'text' | 'number'
+}
+
+export function InlineInput({ value, onSave, className, type = 'text' }: InlineInputProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [currentValue, setCurrentValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    setCurrentValue(value)
+  }, [value])
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
+  const handleBlur = async () => {
+    setIsEditing(false)
+    if (currentValue !== value) {
+      await onSave(currentValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleBlur()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type={type}
+        step={type === 'number' ? '0.01' : undefined}
+        value={currentValue}
+        onChange={(e) => setCurrentValue(e.target.value)}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        className={`bg-white/10 text-white border border-primary px-1 rounded outline-none w-full ${className}`}
+      />
+    )
+  }
+
+  return (
+    <span
+      onClick={() => setIsEditing(true)}
+      className={`cursor-pointer hover:bg-white/5 rounded px-1 transition ${className}`}
+    >
+      {value || <span className="italic text-slate-500">Klicken zum Bearbeiten</span>}
+    </span>
+  )
+}