Allow creating hard line breaks on mobile devices + documentationfeat/mobile_linebreaks

This allows to create hard line breaks on mobile, currently a hard
line break could only created using `shift + enter`, but most mobile
keyboards do not support the `shift` modifier.
So on mobile devices pressing the enter key will trigger a hard line break
and pressing it again will convert it to a new paragraph.

On desktop devices the behavior is unchanged, but documentation on how to
add hard line breaks is added.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

4 files changed, 77 insertions, 1 deletions

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index af3fa00ad..f7f7aa4af 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -24,6 +24,33 @@
 			</thead>
 			<tbody>
 				<tr>
+					<td>{{ t('text', 'New paragraph') }}</td>
+					<template v-if="!isMobile">
+						<td />
+						<td>
+							<kbd>{{ t('text', 'Enter') }}</kbd>
+						</td>
+					</template>
+					<td v-else>
+						2x
+						<kbd>{{ t('text', 'Enter') }}</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Hard line break') }}</td>
+					<template v-if="!isMobile">
+						<td />
+						<td>
+							<kbd>{{ t('text', 'Shift') }}</kbd>
+							+
+							<kbd>{{ t('text', 'Enter') }}</kbd>
+						</td>
+					</template>
+					<td v-else>
+						<kbd>{{ t('text', 'Enter') }}</kbd>
+					</td>
+				</tr>
+				<tr>
 					<td>{{ t('text', 'Bold') }}</td>
 					<td><code>**{{ t('text', 'Bold text') }}**</code></td>
 					<td v-if="!isMobile">
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index 82b34d9a6..e4f032628 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -32,7 +32,6 @@ import CodeBlock from '@tiptap/extension-code-block'
 import Document from '@tiptap/extension-document'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import FrontMatter from './../nodes/FrontMatter.js'
-import Paragraph from './../nodes/Paragraph.js'
 import HardBreak from './HardBreak.js'
 import Heading from '../nodes/Heading/index.js'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
@@ -41,6 +40,7 @@ import KeepSyntax from './KeepSyntax.js'
 import ListItem from '@tiptap/extension-list-item'
 import Mention from './../extensions/Mention.js'
 import OrderedList from '@tiptap/extension-ordered-list'
+import Paragraph from './../nodes/Paragraph.js'
 import Table from './../nodes/Table.js'
 import TaskItem from './../nodes/TaskItem.js'
 import TaskList from './../nodes/TaskList.js'
diff --git a/src/helpers/platform.js b/src/helpers/platform.js
new file mode 100644
index 000000000..aa27c23f9
--- /dev/null
+++ b/src/helpers/platform.js
@@ -0,0 +1,23 @@
+const isMobile = () => {
+	// Use client hints if already available
+	if (navigator?.userAgentData?.mobile !== undefined) return navigator.userAgentData.mobile
+
+	// use regex to match userAgent (required for Safari and Firefox in 2022)
+	const mobileDevices = [
+		/Android/i,
+		/webOS/i,
+		/iPhone/i,
+		/iPad/i,
+		/iPod/i,
+		/playbook/i,
+		/silk/i,
+		/BlackBerry/i,
+		/Windows Phone/i,
+	]
+
+	return mobileDevices.some(regex => navigator.userAgent.match(regex))
+}
+
+export {
+	isMobile,
+}
diff --git a/src/nodes/Paragraph.js b/src/nodes/Paragraph.js
index 6ebec98f3..ef98ff702 100644
--- a/src/nodes/Paragraph.js
+++ b/src/nodes/Paragraph.js
@@ -1,5 +1,6 @@
 import TiptapParagraph from '@tiptap/extension-paragraph'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { isMobile } from '../helpers/platform.js'
 import ParagraphView from './ParagraphView.vue'
 
 const Paragraph = TiptapParagraph.extend({
@@ -12,6 +13,31 @@ const Paragraph = TiptapParagraph.extend({
 		return this.parent().map(rule => Object.assign(rule, { preserveWhitespace: 'full' }))
 	},
 
+	// Allow hard breaks to be inserted on mobile devices
+	addKeyboardShortcuts() {
+		return {
+			...this.parent?.(),
+			Enter: ({ editor }) => {
+				if (!isMobile()) return false
+
+				const { selection } = editor.state
+				const atBeginning = selection.$from.parentOffset === 0
+				if (selection.$from.parent.type !== this.type || atBeginning) return false
+
+				if (selection.$from.nodeBefore.type.name === 'hardBreak') {
+					// Remove previous hard break and split paragraph
+					editor.chain()
+						.setTextSelection(selection.from - 1)
+						.deleteNode()
+						.splitBlock({ keepMarks: true })
+						.run()
+				} else {
+					editor.commands.setHardBreak()
+				}
+				return true
+			},
+		}
+	},
 })
 
 export default Paragraph