Merge pull request #661 from writer/feat-panel-keyboard-shortcuts

feat: Panel keyboard shortcuts

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.0rc8"
+version = "0.8.0"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"

src/ui/src/builder/panels/BuilderCodePanel.vue

@@ -5,6 +5,7 @@
 		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
 		:scrollable="false"
+		keyboard-shortcut-key="J"
 		class="BuilderCodePanel"
 	>
 		<BuilderEmbeddedCodeEditor

src/ui/src/builder/panels/BuilderLogPanel.vue

@@ -5,6 +5,7 @@
 		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
 		:scrollable="true"
+		keyboard-shortcut-key="K"
 		class="BuilderLogPanel"
 	>
 		<template #titleCompanion>

src/ui/src/builder/panels/BuilderPanel.vue

@@ -1,11 +1,12 @@
 <template>
-	<div class="BuilderPanel" :class="{ collapsed }" @keydown="handleKeydown">
+	<div class="BuilderPanel" :class="{ collapsed }">
 		<div class="collapser">
 			<WdsButton
 				variant="neutral"
 				size="smallIcon"
 				data-automation-action="toggle-panel"
 				:data-automation-key="panelId"
+				:data-writer-tooltip="`Toggle ${name} (${getModifierKeyName()}${keyboardShortcutKey})`"
 				@click="togglePanel(panelId)"
 			>
 				<i class="material-symbols-outlined">{{
@@ -69,7 +70,7 @@ export type BuilderPanelAction = {
 import { getModifierKeyName, isModifierKeyActive } from "@/core/detectPlatform";
 import injectionKeys from "@/injectionKeys";
 import WdsButton from "@/wds/WdsButton.vue";
-import { computed, inject } from "vue";
+import { computed, inject, onMounted, onUnmounted } from "vue";
 
 const wfbm = inject(injectionKeys.builderManager);
 
@@ -81,6 +82,7 @@ const props = defineProps<{
 	actions: BuilderPanelAction[];
 	contentsTeleportEl: HTMLElement;
 	scrollable: boolean;
+	keyboardShortcutKey: string;
 }>();
 
 const collapsed = computed(() => !wfbm.openPanels.value.has(props.panelId));
@@ -97,6 +99,11 @@ function togglePanel(panelId: typeof props.panelId) {
 function handleKeydown(ev: KeyboardEvent) {
 	const isMod = isModifierKeyActive(ev);
 
+	if (isMod && ev.key == props.keyboardShortcutKey.toLowerCase()) {
+		togglePanel(props.panelId);
+		return;
+	}
+
 	props.actions.forEach((action) => {
 		if (!action.keyboardShortcut) return;
 		const { key, modifierKey } = action.keyboardShortcut;
@@ -119,6 +126,14 @@ function getKeyboardShortcutDescription(
 	s += ")";
 	return s;
 }
+
+onMounted(async () => {
+	document.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+	document.removeEventListener("keydown", handleKeydown);
+});
 </script>
 
 <style scoped>