sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-28 01:07:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: make ALT more visible

Browse Source
This commit is contained in:
Philipinho
2026-08-26 02:21:48 +01:00
parent b61a1667b7
commit c92bcd064a
5 changed files with 90 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor-ext/src/lib/drawio.ts
+5 -1
View File
@@ -2,7 +2,7 @@ import { Node, mergeAttributes } from "@tiptap/core";
import { ResizableNodeView } from "./resizable-nodeview";
import type { ResizableNodeViewDirection } from "./resizable-nodeview";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { normalizeFileUrl } from "./media-utils";
import { normalizeFileUrl, syncAltBadge } from "./media-utils";
export type DrawioResizeOptions = {
enabled: boolean;
@@ -293,6 +293,8 @@ export const Drawio = Node.create<DrawioOptions>({
const container = nodeView.dom as HTMLElement;
applyAlignment(container, align);
syncAltBadge(nodeView.wrapper, updatedNode.attrs.alt);
currentNode = updatedNode;
return true;
},
@@ -310,6 +312,8 @@ export const Drawio = Node.create<DrawioOptions>({
const dom = nodeView.dom as HTMLElement;
syncAltBadge(nodeView.wrapper, node.attrs.alt);
applyAlignment(dom, node.attrs.align || "center");
// Handle percentage width backward compat
packages/editor-ext/src/lib/excalidraw.ts
+5 -1
View File
@@ -2,7 +2,7 @@ import { Node, mergeAttributes } from "@tiptap/core";
import { ResizableNodeView } from "./resizable-nodeview";
import type { ResizableNodeViewDirection } from "./resizable-nodeview";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { normalizeFileUrl } from "./media-utils";
import { normalizeFileUrl, syncAltBadge } from "./media-utils";
export type ExcalidrawResizeOptions = {
enabled: boolean;
@@ -293,6 +293,8 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
const container = nodeView.dom as HTMLElement;
applyAlignment(container, align);
syncAltBadge(nodeView.wrapper, updatedNode.attrs.alt);
currentNode = updatedNode;
return true;
},
@@ -310,6 +312,8 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
const dom = nodeView.dom as HTMLElement;
syncAltBadge(nodeView.wrapper, node.attrs.alt);
applyAlignment(dom, node.attrs.align || "center");
// Handle percentage width backward compat
packages/editor-ext/src/lib/image/image.ts
+5 -1
View File
@@ -7,7 +7,7 @@ import {
} from "@tiptap/core";
import { ResizableNodeView } from "../resizable-nodeview";
import type { ResizableNodeViewDirection } from "../resizable-nodeview";
import { normalizeFileUrl } from "../media-utils";
import { normalizeFileUrl, syncAltBadge } from "../media-utils";
export type ImageResizeOptions = {
enabled: boolean;
@@ -316,6 +316,8 @@ export const TiptapImage = Image.extend<ImageOptions>({
const container = nodeView.dom as HTMLElement;
applyAlignment(container, align);
syncAltBadge(nodeView.wrapper, updatedNode.attrs.alt);
currentNode = updatedNode;
return true;
},
@@ -333,6 +335,8 @@ export const TiptapImage = Image.extend<ImageOptions>({
const dom = nodeView.dom as HTMLElement;
syncAltBadge(nodeView.wrapper, node.attrs.alt);
// Apply initial alignment
applyAlignment(dom, node.attrs.align || "center");
packages/editor-ext/src/lib/media-utils.ts
+21
View File
@@ -7,6 +7,27 @@ export function normalizeFileUrl(src: string): string {
return src || "";
}
export function syncAltBadge(wrapper: HTMLElement, alt: unknown): void {
const existing = wrapper.querySelector<HTMLElement>(
":scope > .media-alt-badge",
);
if (typeof alt !== "string" || !alt.trim()) {
existing?.remove();
return;
}
const badge = existing ?? document.createElement("span");
badge.dataset.alt = alt;
if (!existing) {
badge.className = "media-alt-badge";
badge.textContent = "ALT";
badge.setAttribute("aria-hidden", "true");
wrapper.appendChild(badge);
}
}
export type UploadFn = (
file: File,
editor: Editor,