diff --git a/src/components/editor/ContentTemplateLibrary.tsx b/src/components/editor/ContentTemplateLibrary.tsx index 33180bbb..9be886ed 100644 --- a/src/components/editor/ContentTemplateLibrary.tsx +++ b/src/components/editor/ContentTemplateLibrary.tsx @@ -36,7 +36,7 @@ export const ContentTemplateLibrary: React.FC = ({ id={headingId} className="font-semibold text-sm text-gray-500 uppercase mb-4 tracking-wider" > - Templates + Content Templates
{TEMPLATES.map((template) => ( diff --git a/src/components/editor/MaterialEditorWrapper.tsx b/src/components/editor/MaterialEditorWrapper.tsx index e57fe822..54cd3797 100644 --- a/src/components/editor/MaterialEditorWrapper.tsx +++ b/src/components/editor/MaterialEditorWrapper.tsx @@ -100,6 +100,7 @@ export const MaterialEditorWrapper = forwardRef @@ -121,6 +122,9 @@ export const MaterialEditorWrapper = forwardRef ) : null} +

+ {submitting ? `${submitLabel}, please wait…` : ''} +

); }, diff --git a/src/components/editor/MediaEmbedder.tsx b/src/components/editor/MediaEmbedder.tsx index da285b52..5095b4f5 100644 --- a/src/components/editor/MediaEmbedder.tsx +++ b/src/components/editor/MediaEmbedder.tsx @@ -4,24 +4,30 @@ import { sanitizeUrl } from '@/utils/sanitize'; import { useFocusTrap } from '@/hooks/useFocusTrap'; interface MediaEmbedderProps { - onAddImage: (url: string) => void; + onAddImage: (url: string, alt?: string) => void; onAddYoutube: (url: string) => void; } export const MediaEmbedder: React.FC = ({ onAddImage, onAddYoutube }) => { const [isOpen, setIsOpen] = useState(false); const [url, setUrl] = useState(''); + const [altText, setAltText] = useState(''); const [type, setType] = useState<'image' | 'youtube'>('image'); const [urlError, setUrlError] = useState(''); const id = useId(); const dialogTitleId = `${id}-title`; const errorId = `${id}-error`; const inputId = `${id}-url`; + const altInputId = `${id}-alt`; const urlInputRef = useRef(null); const dialogRef = useFocusTrap(isOpen, { initialFocusRef: urlInputRef }); const closeDialog = () => setIsOpen(false); + useEffect(() => { + if (!isOpen) setAltText(''); + }, [isOpen]); + useEffect(() => { if (!isOpen) return; const handleEscape = (event: KeyboardEvent) => { @@ -40,11 +46,12 @@ export const MediaEmbedder: React.FC = ({ onAddImage, onAddY } setUrlError(''); if (type === 'image') { - onAddImage(safeUrl); + onAddImage(safeUrl, altText); } else { onAddYoutube(safeUrl); } setUrl(''); + setAltText(''); closeDialog(); }; @@ -114,6 +121,21 @@ export const MediaEmbedder: React.FC = ({ onAddImage, onAddY > {urlError}

+ {type === 'image' ? ( + <> + + setAltText(e.target.value)} + placeholder="Describe the image..." + className="w-full p-2 border rounded mb-3 dark:bg-gray-700 dark:border-gray-600" + /> + + ) : null}