Merge pull request #3282 from nextcloud/fix/image_block

Make images block nodes

js/editor.js.LICENSE.txt

@@ -137,6 +137,28 @@
  *
  */
 
+/*
+ * @copyright Copyright (c) 2022 Jonas <[email protected]>
+ *
+ * @author Jonas <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 /*
  * @copyright Copyright (c) 2022 Max <[email protected]>
  *

package.json

@@ -89,6 +89,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-front-matter": "^0.2.3",
+    "markdown-it-image-figures": "^2.1.0",
     "mitt": "^3.0.0",
     "path-normalize": "^6.0.7",
     "prosemirror-collab": "^1.3.0",

src/components/Editor/MediaHandler.vue

@@ -21,8 +21,8 @@
   -->
 
 <template>
-	<div class="editor editor-midia-handler"
-		data-text-el="editor-midia-handler"
+	<div class="editor editor-media-handler"
+		data-text-el="editor-media-handler"
 		:class="{ draggedOver }"
 		@image-paste="onPaste"
 		@dragover.prevent.stop="setDraggedOver(true)"
@@ -194,7 +194,21 @@ export default {
 				? this.$editor.chain().focus(position)
 				: this.$editor.chain()
 
-			chain.setImage({ src, alt }).insertContent('<br />').focus().run()
+			chain.setImage({ src, alt }).run()
+
+			const selection = this.$editor.view.state.selection
+			if (!selection.empty) {
+				// If inserted image is first element, it is selected and would get overwritten by
+				// subsequent editor inserts (see tiptap#3355). So unselect the image by placing
+				// the cursor at the end of the selection.
+				this.$editor.commands.focus(selection.to)
+			} else {
+				// Place the cursor after the inserted image node
+				this.$editor.commands.focus(selection.to + 2)
+			}
+
+			// Insert a newline to allow placing the cursor in between subsequent images
+			this.$editor.chain().insertContent('<br />').focus().run()
 		},
 	},
 }

src/extensions/RichText.js

@@ -37,6 +37,7 @@ import HardBreak from './HardBreak.js'
 import Heading from '../nodes/Heading/index.js'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Image from './../nodes/Image.js'
+import ImageInline from './../nodes/ImageInline.js'
 import KeepSyntax from './KeepSyntax.js'
 import ListItem from '@tiptap/extension-list-item'
 import Mention from './../extensions/Mention.js'
@@ -82,9 +83,8 @@ export default Extension.create({
 			TaskItem,
 			Callout,
 			Underline,
-			Image.configure({
-				inline: true,
-			}),
+			Image,
+			ImageInline,
 			Dropcursor,
 			KeepSyntax,
 			FrontMatter,

src/markdownit/index.js

@@ -5,6 +5,7 @@ import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
 import keepSyntax from './keepSyntax.js'
+import implicitFigures from 'markdown-it-image-figures'
 
 const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.enable('strikethrough')
@@ -15,6 +16,7 @@ const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.use(callouts)
 	.use(keepSyntax)
 	.use(markdownitMentions)
+	.use(implicitFigures)
 
 // Issue #3370: To preserve softbreaks within md files we preserve all whitespaces, so we must not introduce additional new lines after a <br> element
 markdownit.renderer.rules.hardbreak = (tokens, idx, options) => (options.xhtmlOut ? '<br />' : '<br>')

src/nodes/Image.js

@@ -29,6 +29,16 @@ const Image = TiptapImage.extend({
 
 	selectable: false,
 
+	parseHTML() {
+		return [
+			{
+				tag: this.options.allowBase64
+					? 'figure img[src]'
+					: 'figure img[src]:not([src^="data:"])',
+			},
+		]
+	},
+
 	renderHTML() {
 		// Avoid the prosemirror node creation to trigger image loading as we use a custom node view anyways
 		// Otherwise it would attempt to load the image from the current location before the node view is even initialized
@@ -83,6 +93,12 @@ const Image = TiptapImage.extend({
 		]
 	},
 
+	// Append two newlines after image to make it a block image
+	toMarkdown(state, node) {
+		state.write('![' + state.esc(node.attrs.alt || '') + '](' + node.attrs.src.replace(/[()]/g, '\\$&')
+			+ (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : '') + ')\n\n')
+	},
+
 })
 
 export default Image

src/nodes/ImageInline.js

@@ -0,0 +1,74 @@
+/*
+ * @copyright Copyright (c) 2022 Jonas <[email protected]>
+ *
+ * @author Jonas <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import TiptapImage from '@tiptap/extension-image'
+import ImageView from './ImageView.vue'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
+
+// Inline image extension. Needed if markdown contains inline images.
+// Not supported to be created from our UI (we default to block images).
+const ImageInline = TiptapImage.extend({
+	name: 'image-inline',
+
+	// Lower priority than (block) Image extension
+	priority: 99,
+
+	selectable: false,
+
+	parseHTML() {
+		return [
+			{
+				tag: this.options.allowBase64
+					? 'img[src]'
+					: 'img[src]:not([src^="data:"])',
+			},
+		]
+	},
+
+	addOptions() {
+		return {
+			...this.parent?.(),
+			inline: true,
+		}
+	},
+
+	// Empty commands, we want only those from (block) Image extension
+	addCommands() {
+		return {}
+	},
+
+	// Empty input rules, we want only those from (block) Image extension
+	addInputRules() {
+		return []
+	},
+
+	addNodeView() {
+		return VueNodeViewRenderer(ImageView)
+	},
+
+	toMarkdown(state, node) {
+		state.write('![' + state.esc(node.attrs.alt || '') + '](' + node.attrs.src.replace(/[()]/g, '\\$&')
+			+ (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : '') + ')')
+	},
+})
+
+export default ImageInline