From 2bcc7cb7838d5acf6b3e1ce1fe3cc30ba55436c2 Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Tue, 15 Aug 2023 18:17:41 -0500
Subject: [PATCH] Autofocus the comment editor, submit comment on
 ctrl/cmd+enter

---
 src/lib/MarkdownEditor.svelte         |  3 +++
 src/lib/comments/Comment.svelte       | 14 +++++++++++---
 src/lib/comments/CommentEditor.svelte |  3 ++-
 src/lib/utils.ts                      | 28 +++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/lib/MarkdownEditor.svelte b/src/lib/MarkdownEditor.svelte
index 5fe1de6..3d42871 100644
--- a/src/lib/MarkdownEditor.svelte
+++ b/src/lib/MarkdownEditor.svelte
@@ -17,6 +17,7 @@
 	<Stack dir="c">
 		<Stack dir="c">
 			<label for={textareaId} class="fw-bold p-2">{label}</label>
+			<!-- svelte-ignore a11y-autofocus -->
 			<textarea
 				id={textareaId}
 				rows="6"
@@ -26,6 +27,7 @@
 				bind:this={textarea}
 				{required}
 				on:keydown={keydown}
+				{autofocus}
 			/>
 			<Stack dir="r" gap={1}>
 				<IconButton icon="bold" text="Bold" type="button" on:click={format.bold} />
@@ -76,6 +78,7 @@
 	export let name: string;
 	export let disabled = false;
 	export let required = true;
+	export let autofocus = false;
 
 	let busy = false;
 
diff --git a/src/lib/comments/Comment.svelte b/src/lib/comments/Comment.svelte
index f08d725..f3f6f42 100644
--- a/src/lib/comments/Comment.svelte
+++ b/src/lib/comments/Comment.svelte
@@ -174,7 +174,7 @@
 			</Stack>
 		{/if}
 		{#if $buffer[bk.showEditComposer] && !postLocked}
-			<form bind:this={editForm} class="reply-editor">
+			<form bind:this={editForm} class="reply-editor" use:submitOnHardEnter>
 				<input type="hidden" name="commentId" value={comment.id} />
 				<CommentEditor
 					bind:value={$buffer[bk.editText]}
@@ -184,11 +184,12 @@
 					on:cancel={() => ($buffer[bk.showEditComposer] = false)}
 					submitting={$editState.busy}
 					community={contentView.view.community}
+					autofocus
 				/>
 			</form>
 		{/if}
 		{#if $buffer[bk.showReplyComposer] && $profile.loggedIn && !postLocked}
-			<form bind:this={replyForm} class="reply-editor">
+			<form bind:this={replyForm} class="reply-editor" use:submitOnHardEnter>
 				<input type="hidden" name="parentId" value={comment.id} />
 				<CommentEditor
 					cancellable
@@ -196,6 +197,7 @@
 					on:cancel={() => ($buffer[bk.showReplyComposer] = false)}
 					submitting={$replyState.busy}
 					community={contentView.view.community}
+					autofocus
 				/>
 			</form>
 		{/if}
@@ -228,7 +230,13 @@
 	import CommunityLink from '../CommunityLink.svelte';
 	import EllipsisText from '$lib/EllipsisText.svelte';
 	import { getCommentContextId, nameAtInstance } from '../nav-utils';
-	import { createStatefulForm, type ActionFn, createStatefulAction, type ExtraAction } from '../utils';
+	import {
+		createStatefulForm,
+		type ActionFn,
+		createStatefulAction,
+		type ExtraAction,
+		submitOnHardEnter
+	} from '../utils';
 	import { getVirtualFeedBuffer } from '../virtual-feed';
 	import {
 		commentViewToContentView,
diff --git a/src/lib/comments/CommentEditor.svelte b/src/lib/comments/CommentEditor.svelte
index b508852..269fca4 100644
--- a/src/lib/comments/CommentEditor.svelte
+++ b/src/lib/comments/CommentEditor.svelte
@@ -8,7 +8,7 @@
 <div class:submitting>
 	<Stack dir="c" gap={2}>
 		<Stack dir="c">
-			<MarkdownEditor name="content" {label} bind:value />
+			<MarkdownEditor name="content" {label} bind:value {autofocus} />
 		</Stack>
 
 		<Stack dir="r" justify="between" align="center">
@@ -54,6 +54,7 @@
 	export let showSubmit = true;
 	export let useLanguage = true;
 	export let community: Community | undefined = undefined;
+	export let autofocus = false;
 	const initialValue = value;
 
 	const communityContext = getCommunityContext();
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f929deb..1d4ec0a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,6 @@
 import { goto } from '$app/navigation';
 import { readable, writable } from 'svelte/store';
+import { getCtrlBasedHotkeys } from './app-context';
 
 // a wrapper for things in a MenuButton, used by ExtraActions.svelte
 export interface ExtraAction {
@@ -263,3 +264,30 @@ export function isElementEditable(el: HTMLElement) {
 
 	return ['input', 'textarea', 'select'].includes(nodeName);
 }
+
+export function submitOnHardEnter(formEl: HTMLFormElement) {
+	// make a button that can trigger a proper form submit.
+	// we need a button that would trigger submitting a form if
+	// clicked, so formEl.requestSubmit works. and
+	// formEL.submit() is unusable because it doesn't run handlers
+	// and does an unwanted full page navigation
+	const submitEl = document.createElement('button');
+	submitEl.style.display = 'none';
+	submitEl.classList.add('hard-enter-submit-button');
+
+	formEl.appendChild(submitEl);
+	function onKeydown(e: KeyboardEvent) {
+		const ctrl = getCtrlBasedHotkeys() ? e.ctrlKey : e.metaKey;
+
+		if (e.key === 'Enter' && ctrl) {
+			formEl.requestSubmit(submitEl);
+		}
+	}
+
+	formEl.addEventListener('keydown', onKeydown);
+	return {
+		destroy: () => {
+			formEl.addEventListener('keydown', onKeydown);
+		}
+	};
+}