Merge pull request #5799 from nextcloud/feat/outline_shortcut

nextcloud · May 15, 2024 · 109c376 · 109c376
2 parents 1fa2e4e + ecff74d
commit 109c376
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
@@ -36,7 +36,7 @@ export default {
 	mounted() {
 		this.$resizeObserver = new ResizeObserver(this.onResize)
 		this.$resizeObserver.observe(this.$el.parentElement)
-		this.onResize()
+		this.onResize([this.$el.parentElement])
 	},
 	beforeDestroy() {
 		this.$resizeObserver.unobserve(this.$el.parentElement)

diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue
@@ -127,12 +127,22 @@ export default {
 				Object.assign(this.outline, { enable })
 			},
 		)
+
+		document.addEventListener('keydown', this.handleKeyDown)
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.handleKeyDown)
 	},
 	methods: {
 		outlineToggle() {
 			this.outline.visible = !this.outline.visible
 			this.$emit('outline-toggled', this.outline.visible)
 		},
+		handleKeyDown(event) {
+			if (event.ctrlKey && event.altKey && event.key === 'h') {
+				this.outlineToggle()
+			}
+		},
 	},
 
 }

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
@@ -1,10 +1,10 @@
 <template>
 	<NcDialog size="normal"
 		data-text-el="formatting-help"
-		:name="t('text', 'Formatting help')"
+		:name="t('text', 'Formatting and shortcuts')"
 		:close-on-click-outside="true"
 		@closing="$emit('close')">
-		<h2>{{ t('text', 'Formatting help') }}</h2>
+		<h2>{{ t('text', 'Formatting and shortcuts') }}</h2>
 		<p>{{ t('text', 'Speed up your writing with simple shortcuts.') }}</p>
 		<p v-if="!isMobileCached">
 			{{ t('text', 'Just type the Markdown syntax or use keyboard shortcuts from below.') }}
@@ -174,6 +174,64 @@
 					</td>
 					<td v-if="!isMobileCached" />
 				</tr>
+				<tr>
+					<td>{{ t('text', 'Insert emoji') }}</td>
+					<td>
+						<code>:{{ t('text', 'emoji') }}</code>
+					</td>
+					<td v-if="!isMobileCached" />
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Mention someone') }}</td>
+					<td>
+						<code>@{{ t('text', 'name') }}</code>
+					</td>
+					<td v-if="!isMobileCached" />
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Smart picker') }}</td>
+					<td>
+						<code>/{{ t('text', 'something') }}</code>
+					</td>
+					<td v-if="!isMobileCached" />
+				</tr>
+			</tbody>
+		</table>
+
+		<table vif="!isMobileCached">
+			<thead>
+				<tr>
+					<th>{{ t('text', 'Action') }}</th>
+					<th>{{ t('text', 'Keyboard shortcuts') }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>{{ t('text', 'Undo') }}</td>
+					<td>
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>Z</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Redo') }}</td>
+					<td>
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>Y</kbd>
+					</td>
+				</tr>
+				<tr>
+					<td>{{ t('text', 'Toggle outline') }}</td>
+					<td>
+						<kbd>{{ t('text', 'Ctrl') }}</kbd>
+						+
+						<kbd>{{ t('text', 'Alt') }}</kbd>
+						+
+						<kbd>H</kbd>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	</NcDialog>