BLENDER: Add Line Length indicator for cursor

Author: bartvdbraak

templates/repo/editor/commit_form.tmpl

@@ -13,6 +13,58 @@
 		</div>
 		<div class="field">
 			<textarea name="commit_message" placeholder="{{ctx.Locale.Tr "repo.editor.commit_message_desc"}}" rows="5">{{.commit_message}}</textarea>
+			<script>
+				(function () {
+					const textarea = document.querySelector('.commit-form textarea[name="commit_message"]');
+					if (!textarea) return;
+
+					const statusbar = document.createElement('div');
+					statusbar.className = 'editor-statusbar';
+
+					const autosave = document.createElement('span');
+					autosave.className = 'autosave';
+
+					const lines = document.createElement('span');
+					lines.className = 'lines';
+					lines.textContent = '1';
+
+					const words = document.createElement('span');
+					words.className = 'words';
+					words.textContent = '1';
+
+					const cursor = document.createElement('span');
+					cursor.className = 'cursor';
+					cursor.textContent = '1:1';
+
+					statusbar.appendChild(autosave);
+					statusbar.appendChild(lines);
+					statusbar.appendChild(words);
+					statusbar.appendChild(cursor);
+					textarea.parentElement.appendChild(statusbar);
+
+					function updateStatus() {
+						const value = textarea.value;
+						const pos = textarea.selectionStart;
+
+						const linesArray = value.substr(0, pos).split('\n');
+						const line = linesArray.length;
+						const column = linesArray[linesArray.length - 1].length + 1;
+
+						const totalLines = value.split('\n').length;
+						const totalWords = (value.match(/\b\w+\b/g) || []).length;
+
+						lines.textContent = totalLines.toString();
+						words.textContent = totalWords.toString();
+						cursor.textContent = `${line}:${column}`;
+					}
+
+					textarea.addEventListener('input', updateStatus);
+					textarea.addEventListener('click', updateStatus);
+					textarea.addEventListener('keyup', updateStatus);
+					updateStatus();
+				})();
+			</script>
+
 		</div>
 		<div class="inline field">
 			<div class="ui checkbox">

web_src/js/components/PullRequestMergeForm.vue

@@ -26,6 +26,12 @@ const mergeStyleAllowedCount = ref(0);
 const showMergeStyleMenu = ref(false);
 const showActionForm = ref(false);
 
+const mergeMessageTextarea = ref<HTMLTextAreaElement | null>(null);
+const cursorLine = ref(1);
+const cursorColumn = ref(1);
+const wordCount = ref(1);
+const lineCount = ref(1);
+
 const mergeButtonStyleClass = computed(() => {
   if (mergeForm.value.allOverridableChecksOk) return 'primary';
   return autoMergeWhenSucceed.value ? 'primary' : 'red';
@@ -76,6 +82,22 @@ function switchMergeStyle(name: string, autoMerge = false) {
 function clearMergeMessage() {
   mergeMessageFieldValue.value = mergeForm.value.defaultMergeMessage;
 }
+
+function updateCursorPosition() {
+  const textarea = mergeMessageTextarea.value;
+  if (!textarea) return;
+
+  const pos = textarea.selectionStart ?? 0;
+  const value = textarea.value;
+
+  const lines = value.substring(0, pos).split('\n');
+  cursorLine.value = lines.length;
+  cursorColumn.value = lines[lines.length - 1].length + 1;
+
+  lineCount.value = textarea.value.split('\n').length;
+  wordCount.value = textarea.value.trim().split(/\s+/).filter(Boolean).length;
+}
+
 </script>
 
 <template>
@@ -105,7 +127,22 @@ function clearMergeMessage() {
           <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">
         </div>
         <div class="field">
-          <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/>
+          <textarea
+            ref="mergeMessageTextarea"
+            name="merge_message_field"
+            rows="5"
+            :placeholder="mergeForm.mergeMessageFieldPlaceHolder"
+            v-model="mergeMessageFieldValue"
+            @click="updateCursorPosition"
+            @keyup="updateCursorPosition"
+            @input="updateCursorPosition"
+          />
+          <div class="editor-statusbar">
+            <span class="autosave"></span>
+            <span class="lines">{{ lineCount }}</span>
+            <span class="words">{{ wordCount }}</span>
+            <span class="cursor">{{ cursorLine }}:{{ cursorColumn }}</span>
+          </div>
           <template v-if="mergeMessageFieldValue !== mergeForm.defaultMergeMessage">
             <button @click.prevent="clearMergeMessage" class="btn tw-mt-1 tw-p-1 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint">
               {{ mergeForm.textClearMergeMessage }}