fix(editorApi): allow to disable image lazy-loading

Required in Collectives to load all images straight away in print view.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/EditorFactory.js

@@ -44,6 +44,7 @@ const createRichEditor = ({
 	isEmbedded = false,
 	mentionSearch = undefined,
 	openLink = undefined,
+	noLazyImages = false,
 } = {}) => {
 	return new Editor({
 		editorProps,
@@ -54,6 +55,7 @@ const createRichEditor = ({
 				isEmbedded,
 				mentionSearch,
 				openLink,
+				noLazyImages,
 			}),
 			FocusTrap,
 			...extensions,

src/components/Editor.vue

@@ -219,6 +219,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		noLazyImages: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(props) {
@@ -255,6 +259,7 @@ export default defineComponent({
 					isEmbedded: props.isEmbedded,
 					mentionSearch,
 					openLink: openLinkHandler.openLink,
+					noLazyImages: props.noLazyImages,
 				})
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)

src/components/Editor/MarkdownContentEditor.vue

@@ -79,6 +79,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		noLazyImages: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:content'],
 
@@ -88,6 +92,7 @@ export default {
 			RichText.configure({
 				extensions: [UndoRedo],
 				openLink: openLinkHandler.openLink,
+				noLazyImages: props.noLazyImages,
 			}),
 			FocusTrap,
 		]

src/editor.js

@@ -251,6 +251,7 @@ window.OCA.Text.createEditor = async function ({
 		props: null,
 	},
 	menubarLinkCustomAction = undefined,
+	noLazyImages = false,
 
 	onCreate = ({ markdown }) => {},
 	onLoaded = () => {},
@@ -324,6 +325,7 @@ window.OCA.Text.createEditor = async function ({
 							mime: 'text/markdown',
 							active: true,
 							autofocus,
+							noLazyImages,
 						},
 						scopedSlots,
 					})
@@ -334,6 +336,7 @@ window.OCA.Text.createEditor = async function ({
 							relativePath: filePath,
 							shareToken,
 							readOnly: data.readOnly,
+							noLazyImages,
 						},
 						scopedSlots,
 					})

src/extensions/RichText.js

@@ -62,6 +62,7 @@ export default Extension.create({
 			isEmbedded: false,
 			mentionSearch: undefined,
 			openLink: undefined,
+			noLazyImages: false,
 		}
 	},
 
@@ -96,8 +97,8 @@ export default Extension.create({
 				isEmbedded: this.options.isEmbedded,
 			}),
 			Underline,
-			Image,
-			ImageInline,
+			Image.configure({ noLazyImages: this.options.noLazyImages }),
+			ImageInline.configure({ noLazyImages: this.options.noLazyImages }),
 			Dropcursor.configure({
 				color: 'var(--color-primary-element)',
 				width: 2,

src/nodes/Image.js

@@ -49,6 +49,7 @@ const Image = TiptapImage.extend({
 	addOptions() {
 		return {
 			...this.parent?.(),
+			noLazyImages: false,
 		}
 	},
 

src/nodes/ImageInline.js

@@ -44,6 +44,7 @@ const ImageInline = TiptapImage.extend({
 	addOptions() {
 		return {
 			...this.parent?.(),
+			noLazyImages: false,
 			inline: true,
 		}
 	},

src/nodes/ImageView.vue

@@ -273,6 +273,12 @@ export default {
 		this.loadAttachmentMetadata()
 		this.setupResizeObserver()
 
+		// Load image directly if lazy loading is disabled
+		if (this.extension?.options?.noLazyImages === true) {
+			this.loadPreview().catch(this.onImageLoadFailure)
+			return
+		}
+
 		this.$nextTick(() => {
 			// nextTick is necessary, intersection detection is slightly unreliable without it
 			const options = {