diff --git a/src/features/editor/components/Editor/extensions/Image.ext.ts b/src/features/editor/components/Editor/extensions/Image.ext.ts index e45c27a..b253355 100644 --- a/src/features/editor/components/Editor/extensions/Image.ext.ts +++ b/src/features/editor/components/Editor/extensions/Image.ext.ts @@ -1,6 +1,36 @@ import Image from '@tiptap/extension-image' -export const ImageExt = Image.configure({ +export const ImageExt = Image.extend({ + addAttributes() { + return { + ...this.parent?.(), + width: { + default: null, + parseHTML: (element) => element.getAttribute('width'), + renderHTML: (attributes) => { + if (!attributes.width) { + return {} + } + return { + width: attributes.width, + } + }, + }, + height: { + default: null, + parseHTML: (element) => element.getAttribute('height'), + renderHTML: (attributes) => { + if (!attributes.height) { + return {} + } + return { + height: attributes.height, + } + }, + }, + } + }, +}).configure({ resize: { enabled: true, alwaysPreserveAspectRatio: true, diff --git a/src/features/editor/hooks/useAppControls.tsx b/src/features/editor/hooks/useAppControls.tsx index dd89701..7ee7521 100644 --- a/src/features/editor/hooks/useAppControls.tsx +++ b/src/features/editor/hooks/useAppControls.tsx @@ -1,5 +1,4 @@ import { usePrimaryCta, useSecondaryCta } from '@app-bridge/hooks' -import { useEditorStore } from '@editor/stores/editorStore' import { useSettingsMutation } from '@settings/hooks/useSettingsMutation' import type { SettingsUpdateDto } from '@settings/lib/settings-actions.dto' import { useSettingsStore } from '@settings/providers/settings.provider' diff --git a/src/features/editor/hooks/useFileHandlers.tsx b/src/features/editor/hooks/useFileHandlers.tsx index b3476d2..26cc197 100644 --- a/src/features/editor/hooks/useFileHandlers.tsx +++ b/src/features/editor/hooks/useFileHandlers.tsx @@ -38,7 +38,19 @@ export const useFileHandlers = () => { } const signedUrl = await uploadFileToSupabase(file, token) - setContent(currentEditor.getHTML().replaceAll(fileReader.result as string, signedUrl)) + const { doc } = currentEditor.state + let imagePos: number | null = null + doc.descendants((node, pos) => { + if (node.type.name === 'image' && node.attrs.title === randId) { + imagePos = pos + return false //short circuit the search for image position. + } + }) + + if (imagePos !== null) { + currentEditor.chain().focus().setNodeSelection(imagePos).updateAttributes('image', { src: signedUrl }).run() + setContent(currentEditor.getHTML()) + } } }) }