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

unify pulse

Browse Source
This commit is contained in:
Philipinho
2026-03-28 11:33:56 +00:00
parent c6bbb57406
commit bfaef88429
5 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/styles/media.css
+23
View File
@@ -37,5 +37,28 @@
font-size: var(--mantine-font-size-md); font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-md); line-height: var(--mantine-line-height-md);
} }
.media-pulse {
animation: media-pulse 1.2s ease-in-out infinite;
@mixin light {
background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
background-size: 400% 400%;
}
@mixin dark {
background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
background-size: 400% 400%;
}
@keyframes media-pulse {
0% {
background-position: 0% 0%;
}
100% {
background-position: -135% 0%;
}
}
}
} }
packages/editor-ext/src/lib/drawio.ts
+2 -3
View File
@@ -321,12 +321,11 @@ export const Drawio = Node.create<DrawioOptions>({
// Show skeleton background while image loads from server // Show skeleton background while image loads from server
dom.style.pointerEvents = "none"; dom.style.pointerEvents = "none";
dom.style.background = el.classList.add("media-pulse");
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
el.onload = () => { el.onload = () => {
dom.style.pointerEvents = ""; dom.style.pointerEvents = "";
dom.style.background = ""; el.classList.remove("media-pulse");
}; };
return nodeView; return nodeView;
packages/editor-ext/src/lib/excalidraw.ts
+2 -3
View File
@@ -321,12 +321,11 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
// Show skeleton background while image loads from server // Show skeleton background while image loads from server
dom.style.pointerEvents = "none"; dom.style.pointerEvents = "none";
dom.style.background = el.classList.add("media-pulse");
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
el.onload = () => { el.onload = () => {
dom.style.pointerEvents = ""; dom.style.pointerEvents = "";
dom.style.background = ""; el.classList.remove("media-pulse");
}; };
return nodeView; return nodeView;
packages/editor-ext/src/lib/image/image.ts
+2 -3
View File
@@ -362,12 +362,11 @@ export const TiptapImage = Image.extend<ImageOptions>({
// Show skeleton background while image loads from server // Show skeleton background while image loads from server
dom.style.pointerEvents = "none"; dom.style.pointerEvents = "none";
dom.style.background = el.classList.add("media-pulse");
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
el.onload = () => { el.onload = () => {
dom.style.pointerEvents = ""; dom.style.pointerEvents = "";
dom.style.background = ""; el.classList.remove("media-pulse");
}; };
return nodeView; return nodeView;
packages/editor-ext/src/lib/video/video.ts
+2 -3
View File
@@ -329,12 +329,11 @@ export const TiptapVideo = Node.create<VideoOptions>({
// Show skeleton background while video loads from server // Show skeleton background while video loads from server
dom.style.pointerEvents = "none"; dom.style.pointerEvents = "none";
dom.style.background = el.classList.add("media-pulse");
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
el.onloadedmetadata = () => { el.onloadedmetadata = () => {
dom.style.pointerEvents = ""; dom.style.pointerEvents = "";
dom.style.background = ""; el.classList.remove("media-pulse");
}; };
return nodeView; return nodeView;