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
+18 -2
View File
@@ -28,6 +28,7 @@ export interface ExcalidrawOptions {
export interface ExcalidrawAttributes {
src?: string;
title?: string;
alt?: string;
size?: number;
width?: number | string;
height?: number;
@@ -79,6 +80,13 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
"data-title": attributes.title,
}),
},
alt: {
default: undefined,
parseHTML: (element) => element.getAttribute("data-alt"),
renderHTML: (attributes: ExcalidrawAttributes) => ({
"data-alt": attributes.alt,
}),
},
width: {
default: null,
parseHTML: (element) => {
@@ -155,7 +163,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
"img",
{
src: HTMLAttributes["data-src"],
alt: HTMLAttributes["data-title"],
alt: HTMLAttributes["data-alt"] || HTMLAttributes["data-title"],
width: HTMLAttributes["data-width"],
},
],
@@ -226,7 +234,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
const el = document.createElement("img");
el.src = normalizeFileUrl(node.attrs.src);
el.alt = node.attrs.title || "";
el.alt = node.attrs.alt || node.attrs.title || "";
el.style.display = "block";
el.style.maxWidth = "100%";
el.style.borderRadius = "8px";
@@ -264,6 +272,14 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
if (
updatedNode.attrs.alt !== currentNode.attrs.alt ||
updatedNode.attrs.title !== currentNode.attrs.title
) {
el.alt =
updatedNode.attrs.alt || updatedNode.attrs.title || "";
}
const w = updatedNode.attrs.width;
const h = updatedNode.attrs.height;
if (w != null) {