Ctrl + Enter to submit posts & comments

[dredshep]

I already made one solution for this that I use as a userscript, but I hope that a solution will be found for the frontend itself. I can try later to modify the UI itself for it and make a PR.

Here's the userscript:

// ==UserScript==
// @name         Lemmy Form Submit with Ctrl+Enter
// @match        https://*/post/*
// @match        https://*/comment/*
// @icon         https://join-lemmy.org/static/assets/icons/favicon.svg
// ==/UserScript==

var isLemmy =
  document.head.querySelector("[name~=Description][content]").content ===
  "Lemmy";

if (isLemmy) {
  // Define a global variable to keep track of the currently focused textarea.
  var currentFocusedTextarea = null;

  // Function to attach focus and blur event handlers to all textareas.
  function attachEventHandlers() {
    document.querySelectorAll("textarea").forEach((textarea) => {
      if (!textarea.dataset.ctrlEnterHandled) {
        textarea.dataset.ctrlEnterHandled = true;

        // Check if this textarea is currently focused
        const wasFocused = document.activeElement === textarea;

        textarea.addEventListener("focus", function () {
          currentFocusedTextarea = this;
        });

        textarea.addEventListener("blur", function () {
          currentFocusedTextarea = null;
        });

        // If this textarea was focused, blur and re-focus it to ensure event handlers get triggered
        if (wasFocused) {
          textarea.blur();
          textarea.focus();
        }
      }
    });
  }

  // Attach a keydown event handler to the entire document.
  document.addEventListener("keydown", function (event) {
    // If Ctrl + Enter is pressed
    if (event.ctrlKey && event.key === "Enter") {
      // If a textarea is focused and contains text
      if (
        currentFocusedTextarea &&
        currentFocusedTextarea.value.trim() !== ""
      ) {
        // Your submit logic here
        handleSubmit(currentFocusedTextarea);
      }
    }
  });

  function handleSubmit(textarea) {
    // find the closest type="submit" button and press it.
    textarea.closest("form").querySelector('[type="submit"]').click();
  }

  // Call the function initially to cover textareas that exist when the page is first loaded.
  attachEventHandlers();

  // Observe the document for changes and reattach event handlers when new textareas are added.
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach((mutation) => {
      if (mutation.type === "childList") {
        attachEventHandlers();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

[fheft]

Thanks for providing the userscript, it could be useful until the changes are released and deployed to the instances!

But there already seems to be an issue (#1160) and a PR that address this issue. Maybe you can test it and provide feedback if necessary? :)

[dredshep]

Seems I'd need to run a lemmy instance to test the UI? Seems like quite a hassle. I'll try.

edit: 3 hours later, still trying and failing to run the server D: so hard

[fheft]

Oh no, didn't mean to send you into this mess...

The current nightly state of the backend/frontend is a bit broken because of larger technical changes. The code state that works best is the last official relese v0.17: lemmi-u@c5006cc8 and 6efb8abb@lemmy-backend.

But don't worry too much, I can test it as well.

[krestenlaust]

I believe this issue is solved with #1163