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

@@ -42,11 +42,17 @@ const createRichEditor = ({
 	connection,
 	relativePath,
 	isEmbedded = false,
+	noLazyImages = false,
 } = {}) => {
 	return new Editor({
 		editorProps,
 		extensions: [
-			RichText.configure({ connection, relativePath, isEmbedded }),
+			RichText.configure({
+				connection,
+				relativePath,
+				isEmbedded,
+				noLazyImages,
+			}),
 			FocusTrap,
 			...extensions,
 		],

src/components/Editor.vue

@@ -218,6 +218,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		noLazyImages: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(props) {
@@ -249,6 +253,7 @@ export default defineComponent({
 					relativePath: props.relativePath,
 					extensions,
 					isEmbedded: props.isEmbedded,
+					noLazyImages: props.noLazyImages,
 				})
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)

src/components/Editor/MarkdownContentEditor.vue

@@ -83,13 +83,18 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		noLazyImages: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:content'],
 
 	setup(props) {
 		const extensions = [
 			RichText.configure({
 				extensions: [History],
+				noLazyImages: props.noLazyImages,
 			}),
 			FocusTrap,
 		]

src/editor.js

@@ -248,6 +248,7 @@ window.OCA.Text.createEditor = async function ({
 		props: null,
 	},
 	menubarLinkCustomAction = undefined,
+	noLazyImages = false,
 
 	onCreate = ({ markdown }) => {},
 	onLoaded = () => {},

src/extensions/RichText.js

@@ -98,8 +98,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

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

src/nodes/ImageInline.js

@@ -31,6 +31,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 = {