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

fix: image fallback regression (#1989)

Browse Source 
* fix: image fallback regression

* fix image preview on upload

* fix image loading
This commit is contained in:
Philip Okugbe
2026-03-04 11:51:43 +00:00
committed by GitHub
parent 37355452e1
commit bea1637519
6 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor-ext/src/lib/drawio.ts
+3 -2
View File
@@ -1,6 +1,7 @@
import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
import type { ResizableNodeViewDirection } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { normalizeFileUrl } from "./media-utils";
export type DrawioResizeOptions = {
enabled: boolean;
@@ -223,7 +224,7 @@ export const Drawio = Node.create<DrawioOptions>({
}
const el = document.createElement("img");
el.src = node.attrs.src;
el.src = normalizeFileUrl(node.attrs.src);
el.alt = node.attrs.title || "";
el.style.display = "block";
el.style.maxWidth = "100%";
@@ -259,7 +260,7 @@ export const Drawio = Node.create<DrawioOptions>({
}
if (updatedNode.attrs.src !== currentNode.attrs.src) {
el.src = updatedNode.attrs.src || "";
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
const w = updatedNode.attrs.width;
packages/editor-ext/src/lib/excalidraw.ts
+3 -2
View File
@@ -1,6 +1,7 @@
import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
import type { ResizableNodeViewDirection } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { normalizeFileUrl } from "./media-utils";
export type ExcalidrawResizeOptions = {
enabled: boolean;
@@ -223,7 +224,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
}
const el = document.createElement("img");
el.src = node.attrs.src;
el.src = normalizeFileUrl(node.attrs.src);
el.alt = node.attrs.title || "";
el.style.display = "block";
el.style.maxWidth = "100%";
@@ -259,7 +260,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
}
if (updatedNode.attrs.src !== currentNode.attrs.src) {
el.src = updatedNode.attrs.src || "";
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
const w = updatedNode.attrs.width;
packages/editor-ext/src/lib/image/image.ts
+17 -5
View File
@@ -6,6 +6,7 @@ import {
Range,
ResizableNodeView,
} from "@tiptap/core";
import { normalizeFileUrl } from "../media-utils";
import type { ResizableNodeViewDirection } from "@tiptap/core";
export type ImageResizeOptions = {
@@ -252,11 +253,18 @@ export const TiptapImage = Image.extend<ImageOptions>({
}
});
el.src = HTMLAttributes.src;
el.src = normalizeFileUrl(HTMLAttributes.src);
el.style.display = "block";
el.style.maxWidth = "100%";
el.style.borderRadius = "8px";
if (typeof node.attrs.width === "number" && node.attrs.width > 0) {
el.style.width = `${node.attrs.width}px`;
if (typeof node.attrs.height === "number" && node.attrs.height > 0) {
el.style.height = `${node.attrs.height}px`;
}
}
let currentNode = node;
const nodeView = new ResizableNodeView({
@@ -287,7 +295,7 @@ export const TiptapImage = Image.extend<ImageOptions>({
}
if (updatedNode.attrs.src !== currentNode.attrs.src) {
el.src = updatedNode.attrs.src || "";
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
if (updatedNode.attrs.alt !== currentNode.attrs.alt) {
@@ -352,12 +360,16 @@ export const TiptapImage = Image.extend<ImageOptions>({
});
}
// Hide until image loads (official TipTap pattern)
dom.style.visibility = "hidden";
// Show skeleton background while image loads from server
dom.style.pointerEvents = "none";
dom.style.overflow = "hidden";
dom.style.borderRadius = "8px";
dom.style.background =
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
el.onload = () => {
dom.style.visibility = "";
dom.style.pointerEvents = "";
dom.style.background = "";
};
return nodeView;
packages/editor-ext/src/lib/media-utils.ts
+7
View File
@@ -1,5 +1,12 @@
import { Editor } from "@tiptap/core";
export function normalizeFileUrl(src: string): string {
if (src && src.startsWith("/files/")) {
return "/api" + src;
}
return src || "";
}
export type UploadFn = (
file: File,
editor: Editor,
packages/editor-ext/src/lib/video/video.ts
+3 -2
View File
@@ -1,5 +1,6 @@
import { ReactNodeViewRenderer } from "@tiptap/react";
import { Range, Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
import { normalizeFileUrl } from "../media-utils";
import type { ResizableNodeViewDirection } from "@tiptap/core";
export type VideoResizeOptions = {
@@ -223,7 +224,7 @@ export const TiptapVideo = Node.create<VideoOptions>({
}
const el = document.createElement("video");
el.src = node.attrs.src;
el.src = normalizeFileUrl(node.attrs.src);
el.controls = true;
el.preload = "metadata";
el.style.display = "block";
@@ -260,7 +261,7 @@ export const TiptapVideo = Node.create<VideoOptions>({
}
if (updatedNode.attrs.src !== currentNode.attrs.src) {
el.src = updatedNode.attrs.src || "";
el.src = normalizeFileUrl(updatedNode.attrs.src);
}
const w = updatedNode.attrs.width;