Add formatting help modal (Fixes #1941)

src/components/EditorWrapper.vue

@@ -41,7 +41,8 @@
 					:file-path="relativePath"
 					:is-rich-editor="isRichEditor"
 					:is-public="isPublic"
-					:autohide="autohide">
+					:autohide="autohide"
+					@show-help="showHelp">
 					<div v-if="currentSession && active" id="editor-session-list">
 						<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
 							{{ lastSavedStatus }}
@@ -67,6 +68,7 @@
 		</div>
 
 		<CollisionResolveDialog v-if="hasSyncCollission && !readOnly" @resolve-use-this-version="resolveUseThisVersion" @resolve-use-server-version="resolveUseServerVersion" />
+		<HelpModal v-if="displayHelp" @close="hideHelp" />
 	</div>
 </template>
 
@@ -101,6 +103,7 @@ export default {
 		CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog'),
 		GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog'),
 		SessionList: () => import(/* webpackChunkName: "editor-collab" */'./SessionList'),
+		HelpModal: () => import(/* webpackChunkName: "editor-collab" */'./HelpModal'),
 	},
 	directives: {
 		Tooltip,
@@ -171,6 +174,7 @@ export default {
 			forceRecreate: false,
 
 			saveStatusPolling: null,
+			displayHelp: false,
 		}
 	},
 	computed: {
@@ -511,6 +515,14 @@ export default {
 				}
 			}
 		},
+
+		showHelp() {
+			this.displayHelp = true
+		},
+
+		hideHelp() {
+			this.displayHelp = false
+		},
 	},
 }
 </script>
@@ -663,7 +675,6 @@ export default {
 			padding-top: 50px;
 		}
 	}
-
 </style>
 <style lang="scss">
 	@import './../../css/style';

src/components/HelpModal.vue

@@ -0,0 +1,291 @@
+<template>
+	<Modal
+		size="large"
+		:title="t('text', 'Formatting help')"
+		@close="$emit('close')">
+		<h2>{{ t('text', 'Formatting help') }}</h2>
+		<p>{{ t('text', 'Speed up your writing with simple shortcuts.') }}</p>
+		<p v-if="!isMobile">
+			{{ t('text', 'Just type the markdown syntax or use keyboard shortcuts from below.') }}
+		</p>
+		<p v-else>
+			{{ t('text', 'Just type the markdown syntax from below.') }}
+		</p>
+
+		<table>
+			<thead>
+				<tr>
+					<th>{{ t('text', 'Style') }}</th>
+					<th>{{ t('text', 'Syntax') }}</th>
+					<th v-if="!isMobile">
+						{{ t('text', 'Keyboard shortcuts') }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>{{ t('text', 'Bold') }}</td>
+					<td><code>**{{ t('text', 'Bold text') }}**</code></td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>B</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Italic') }}</td>
+					<td><code>*{{ t('text', 'Italicized text') }}*</code></td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>I</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Strikethrough') }}</td>
+					<td><code>~~{{ t('text', 'Mistaken text') }}~~</code></td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>D</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td class="ellipsis_top">
+						{{ t('text', 'Heading 1') }}
+					</td>
+					<td class="ellipsis_top">
+						<code># {{ t('text', 'Heading level 1') }}</code>
+					</td>
+					<td v-if="!isMobile" class="ellipsis_top">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>{{ t('text', 'Shift') }}</kbd>
+						+
+						<kbd>1</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td class="noborder ellipsis">
+						…
+					</td>
+					<td class="noborder ellipsis">
+						…
+					</td>
+					<td v-if="!isMobile" class="ellipsis noborder">
+						…
+					</td>
+				</tr>
+				<tr>
+					<td class="noborder ellipsis_bottom">
+						{{ t('text', 'Heading 6') }}
+					</td>
+					<td class="noborder ellipsis_bottom">
+						<code>###### {{ t('text', 'Heading level 6') }}</code>
+					</td>
+					<td v-if="!isMobile" class="noborder ellipsis_bottom">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>{{ t('text', 'Shift') }}</kbd>
+						+
+						<kbd>6</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Unordered list') }}</td>
+					<td>
+						<code>* {{ t('text', 'An item') }}</code>
+					</td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>{{ t('text', 'Shift') }}</kbd>
+						+
+						<kbd>8</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Ordered list') }}</td>
+					<td>
+						<code>1. {{ t('text', 'First item') }}</code>
+					</td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>{{ t('text', 'Shift') }}</kbd>
+						+
+						<kbd>9</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Checklist') }}</td>
+					<td>
+						<code>* [] {{ t('text', 'Todo item') }}</code>
+					</td>
+					<td v-if="!isMobile" />
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Blockquote') }}</td>
+					<td>
+						<code>> {{ t('text', 'Quoted text') }}</code>
+					</td>
+					<td v-if="!isMobile">
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>></kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Code block') }}</td>
+					<td>
+						<code>``` {{ t('text', 'Some code') }}</code>
+					</td>
+					<td v-if="!isMobile" />
+				</tr>
+			</tbody>
+		</table>
+	</Modal>
+</template>
+
+<script>
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import isMobile from './../mixins/isMobile'
+
+export default {
+	name: 'HelpModal',
+	components: {
+		Modal,
+	},
+	directives: {
+		Tooltip,
+	},
+	mixins: [
+		isMobile,
+	],
+	data() {
+		return {
+			formatted: {
+				bold: true,
+				italic: true,
+				strikethrough: true,
+				heading1: true,
+				heading6: true,
+				unorderdList: true,
+				orderedList: true,
+				checkList: true,
+				blockQuote: true,
+				codeBlock: true,
+			},
+		}
+	},
+	computed: {
+		isFormatted() {
+			return (style) => this.formatted[style]
+		},
+	},
+	methods: {
+		toggleFormatted(style) {
+			this.formatted[style] = !this.formatted[style]
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .modal-wrapper {
+		// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
+		.prev, .next {
+			display: none !important;
+		}
+
+		.modal-container {
+			// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
+			overflow: auto;
+			// Diverge from upstream modal styling
+			padding: 30px 40px 20px;
+			user-select: text;
+		}
+
+		// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
+		// Make modal full screen on mobile
+		@media only screen and (max-width: 512px) {
+			.modal-container {
+				position: absolute;
+				top: var(--header-height);
+				height: calc(100% - var(--header-height));
+			}
+		}
+	}
+
+	table {
+		margin-top: 24px;
+		border-collapse: collapse;
+
+		tbody tr {
+			&:hover, &:focus, &:active {
+				background-color: transparent !important;
+			}
+		}
+
+		thead tr {
+			border: none;
+		}
+
+		th {
+			font-weight: bold;
+			padding: .75rem 1rem .75rem 0;
+			border-bottom: 2px solid var(--color-background-darker);
+		}
+
+		td {
+			padding: .75rem 1rem .75rem 0;
+			border-top: 1px solid var(--color-background-dark);
+			border-bottom: unset;
+
+			&.noborder {
+				border-top: unset;
+			}
+
+			&.ellipsis_top {
+				padding-bottom: 0;
+			}
+
+			&.ellipsis {
+				padding-top: 0;
+				padding-bottom: 0;
+			}
+
+			&.ellipsis_bottom {
+				padding-top: 0;
+			}
+		}
+
+		kbd {
+			font-size: smaller;
+		}
+
+		code {
+			padding: .2em .4em;
+			font-size: 90%;
+			background-color: var(--color-background-dark);
+			border-radius: 6px;
+		}
+	}
+
+	@import '../../css/prosemirror.scss';
+
+	div.ProseMirror {
+		display: inline;
+		margin-top: unset;
+		position: unset;
+		padding: unset;
+		line-height: unset;
+
+		h1, h6 {
+			display: inline;
+			padding: 0;
+			margin: 0;
+		}
+	}
+</style>

src/components/MenuBar.vue

@@ -174,16 +174,26 @@ export default {
 			}
 		},
 		allIcons() {
-			if (this.isPublic) {
-				return this.icons
+			let icons = this.icons
+			if (!this.isPublic) {
+				icons = [...icons, {
+					label: t('text', 'Insert image'),
+					class: 'icon-image',
+					isActive: () => {
+					},
+					action: (commands) => {
+						this.showImagePrompt(commands.image)
+					},
+				}]
 			}
-			return [...this.icons, {
-				label: t('text', 'Insert image'),
-				class: 'icon-image',
+
+			return [...icons, {
+				label: t('text', 'Formatting help'),
+				class: 'icon-info',
 				isActive: () => {
 				},
 				action: (commands) => {
-					this.showImagePrompt(commands.image)
+					this.$emit('show-help')
 				},
 			}]
 		},