feat(editor): add alt text support for images (#2097)

* feat(editor): add alt text support for images
* feat:  extend alt text support to videos and diagrams

---------
Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
This commit is contained in:
Olivier Lambert
2026-05-20 16:45:59 +01:00
committed by GitHub
co-authored by Philipinho
parent 66a754c9eb
commit 1c166c4736
12 changed files with 315 additions and 17 deletions
@@ -27,6 +27,7 @@ export interface VideoOptions {
export interface VideoAttributes {
src?: string;
alt?: string;
align?: string;
attachmentId?: string;
size?: number;
@@ -79,6 +80,13 @@ export const TiptapVideo = Node.create<VideoOptions>({
src: attributes.src,
}),
},
alt: {
default: undefined,
parseHTML: (element) => element.getAttribute("aria-label"),
renderHTML: (attributes: VideoAttributes) => ({
"aria-label": attributes.alt,
}),
},
attachmentId: {
default: undefined,
parseHTML: (element) => element.getAttribute("data-attachment-id"),
@@ -228,6 +236,9 @@ export const TiptapVideo = Node.create<VideoOptions>({
el.src = normalizeFileUrl(node.attrs.src);
el.controls = true;
el.preload = "metadata";
if (node.attrs.alt) {
el.setAttribute("aria-label", node.attrs.alt);
}
el.style.display = "block";
el.style.maxWidth = "100%";
el.style.borderRadius = "8px";
@@ -272,6 +283,14 @@ export const TiptapVideo = Node.create<VideoOptions>({
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
if (updatedNode.attrs.alt !== currentNode.attrs.alt) {
if (updatedNode.attrs.alt) {
el.setAttribute("aria-label", updatedNode.attrs.alt);
} else {
el.removeAttribute("aria-label");
}
}
const w = updatedNode.attrs.width;
const h = updatedNode.attrs.height;
if (w != null) {