From 3c424b8c31f0d7bba688f239092fea3eea50055a Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Wed, 7 Aug 2024 20:21:40 +0700 Subject: [PATCH] UBERF-7829 Fix embedded image preview (#6279) --- .../src/components/FilePreviewPopup.svelte | 3 +-- packages/text/src/nodes/file.ts | 12 ------------ packages/text/src/nodes/image.ts | 9 +++++++-- packages/text/src/nodes/utils.ts | 5 ++--- .../src/components/extension/fileExt.ts | 9 --------- .../src/components/extension/imageExt.ts | 4 ++-- .../src/components/extension/imageUploadExt.ts | 3 +++ .../src/markdown/__tests__/textmodel.test.ts | 3 ++- 8 files changed, 17 insertions(+), 31 deletions(-) diff --git a/packages/presentation/src/components/FilePreviewPopup.svelte b/packages/presentation/src/components/FilePreviewPopup.svelte index 5952686a1f..c3dd8fa11e 100644 --- a/packages/presentation/src/components/FilePreviewPopup.svelte +++ b/packages/presentation/src/components/FilePreviewPopup.svelte @@ -21,7 +21,7 @@ import presentation from '../plugin' import { BlobMetadata } from '../types' - import { getClient, getFileUrl } from '../utils' + import { getFileUrl } from '../utils' import ActionContext from './ActionContext.svelte' import FilePreview from './FilePreview.svelte' @@ -36,7 +36,6 @@ export let fullSize = false export let showIcon = true - const client = getClient() const dispatch = createEventDispatcher() let download: HTMLAnchorElement diff --git a/packages/text/src/nodes/file.ts b/packages/text/src/nodes/file.ts index 4e4f243fc6..8f88dd3305 100644 --- a/packages/text/src/nodes/file.ts +++ b/packages/text/src/nodes/file.ts @@ -71,18 +71,6 @@ export const FileNode = Node.create({ return [ { tag: `div[data-type="${this.name}"]` - }, - { - tag: 'div[data-file-name]' - }, - { - tag: 'div[data-file-size]' - }, - { - tag: 'div[data-file-type]' - }, - { - tag: 'div[data-file-href]' } ] }, diff --git a/packages/text/src/nodes/image.ts b/packages/text/src/nodes/image.ts index ee616d6a47..83ad9f4164 100644 --- a/packages/text/src/nodes/image.ts +++ b/packages/text/src/nodes/image.ts @@ -73,7 +73,10 @@ export const ImageNode = Node.create({ title: { default: null }, - align: getDataAttribute('align') + align: getDataAttribute('align'), + 'data-file-type': { + default: null + } } }, @@ -120,7 +123,9 @@ export const ImageNode = Node.create({ } for (const [k, v] of Object.entries(divAttributes)) { - container.setAttribute(k, v) + if (v !== null) { + container.setAttribute(k, v) + } } const imgAttributes = mergeAttributes( diff --git a/packages/text/src/nodes/utils.ts b/packages/text/src/nodes/utils.ts index 5a82cfd7ef..c87c33a9a4 100644 --- a/packages/text/src/nodes/utils.ts +++ b/packages/text/src/nodes/utils.ts @@ -28,9 +28,8 @@ export function getDataAttribute ( default: null, parseHTML: (element) => element.getAttribute(dataName), renderHTML: (attributes) => { - // eslint-disable-next-line - if (!attributes[name]) { - return {} + if (attributes[name] == null) { + return null } return { diff --git a/plugins/text-editor-resources/src/components/extension/fileExt.ts b/plugins/text-editor-resources/src/components/extension/fileExt.ts index 7ab3900fa0..2d745b7bcf 100644 --- a/plugins/text-editor-resources/src/components/extension/fileExt.ts +++ b/plugins/text-editor-resources/src/components/extension/fileExt.ts @@ -53,15 +53,6 @@ export const FileExtension = FileNode.extend({ return [ { tag: `div[data-type="${this.name}"]` - }, - { - tag: 'div[data-file-name]' - }, - { - tag: 'div[data-file-size]' - }, - { - tag: 'div[data-file-type]' } ] }, diff --git a/plugins/text-editor-resources/src/components/extension/imageExt.ts b/plugins/text-editor-resources/src/components/extension/imageExt.ts index 262c3cefd3..8c8afe7de4 100644 --- a/plugins/text-editor-resources/src/components/extension/imageExt.ts +++ b/plugins/text-editor-resources/src/components/extension/imageExt.ts @@ -151,7 +151,7 @@ export const ImageExtension = ImageNode.extend({ const fileId = node.attrs['file-id'] ?? node.attrs.src const fileName = node.attrs.alt ?? '' - const fileType = node.attrs['data-file-type'] ?? '' + const fileType = node.attrs['data-file-type'] ?? 'image/*' showPopup( FilePreviewPopup, @@ -211,7 +211,7 @@ export async function openImage (editor: Editor): Promise { const attributes = editor.getAttributes('image') const fileId = attributes['file-id'] ?? attributes.src const fileName = attributes.alt ?? '' - const fileType = attributes['data-file-type'] ?? '' + const fileType = attributes['data-file-type'] ?? 'image/*' await new Promise((resolve) => { showPopup( FilePreviewPopup, diff --git a/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts b/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts index 0f791b8856..5e35f5c5f8 100644 --- a/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts +++ b/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts @@ -153,7 +153,10 @@ async function handleImageUpload ( const size = await getImageSize(file) const node = view.state.schema.nodes.image.create({ 'file-id': attached.file, + 'data-file-type': file.type, src: url, + alt: file.name, + title: file.name, width: Math.round(size.width / size.pixelRatio) }) diff --git a/services/github/pod-github/src/markdown/__tests__/textmodel.test.ts b/services/github/pod-github/src/markdown/__tests__/textmodel.test.ts index 070bff0683..f6499c44fe 100644 --- a/services/github/pod-github/src/markdown/__tests__/textmodel.test.ts +++ b/services/github/pod-github/src/markdown/__tests__/textmodel.test.ts @@ -755,7 +755,8 @@ A list of closed updated issues` align: null, height: null, title: null, - 'file-id': null + 'file-id': null, + 'data-file-type': null } } ]