PgUp/Down and Home/End keys don't work when on an editable <div>

[whirm]

Describe the bug When editing areas which use contenteditable="true" (as opposed to using a ), PgUp/Down and Home/End keys don't do anything.</p> <p><strong>Precise recipe to reproduce the issue</strong></p> <ul> <li>Visit a site like that uses this attribute like <a rel="noreferrer nofollow" target="_blank" href="https://onlinenotepad.org/notepad">https://onlinenotepad.org/notepad</a></li> <li>Type in a few lines</li> <li>Try using these keys to move the caret around.</li> </ul> <p>For website-specific issues:</p> <p>Can you reproduce this issue with Epiphany / GNOME Web (<a rel="noreferrer nofollow" target="_blank" href="https://wiki.gnome.org/Apps/Web">https://wiki.gnome.org/Apps/Web</a>)?</p> <p>Nope, it works fine there.</p> <p><strong>Information</strong></p> <ul> <li> <p>OS name+version: Debian SID</p> </li> <li> <p>Graphics card and driver: i915</p> </li> <li> <p>Desktop environment / Window manager name+version: Sway (Wayland)</p> </li> <li> <p>How you installed Nyxt (Guix pack, package manager, build from source): Git (rev. 33212652f596bf58d77fd798f661afebd528faa7)</p> </li> <li> <p>Information from <code>show-system-information</code>: </p> <pre><code> Nyxt version: 2.1.1-391-g33212652 Renderer version: GI-GTK Operating system kernel: Linux 5.10.0-8-amd64 Lisp implementation: SBCL 2.1.1.debian (Dynamic space size: 1073741824) Features: (:WEBKIT2 :WEBKIT2-2.33 :WEBKIT2-PASTE-PLAINTEXT :WEBKIT2-TRACKING :WEBKIT2-MUTE :WEBKIT2-EMOJI :WEBKIT2-MEDIA :WEBKIT2-SANDBOXING :GTK-3-22 :GTK-3-20 :GTK-3-18 :GTK-3-16 :GTK-3-14 :GTK-3-12 :GTK-3-10 :GTK-3-8 :GTK-3-6 :GTK-3-4 :GTK :GDK-3-22 :GDK-3-20 :GDK-3-18 :GDK-3-16 :GDK-3-14 :GDK-3-12 :GDK-3-10 :GDK-3-8 :GDK-3-6 :GDK-3-4 :CAIRO-1-10 :CAIRO-1-12 :GDK-PIXBUF :GLIB-2-30 :GLIB-2-32 :GLIB-2-34 :GLIB-2-36 :GLIB-2-38 :GLIB-2-40 :GLIB-2-42 :GLIB-2-44 :GLIB-2-46 :GLIB-2-48 :GLIB-2-50 :GLIB-2-52 :GLIB-2-54 :GLIB-2-56 :GLIB-2-58 :GLIB :NYXT-2 :FSET-EXT-STRINGS :CUSTOM-HASH-TABLE-NATIVE :SWANK :21BIT-CHARS :CHUNGA :FLEXI-STREAMS :CL-PPCRE-UNICODE :CL-UNICODE :CL-JSON-DOUBLE-FLOAT-IS-SUBSUMED :CL-JSON-SINGLE-FLOAT-IS-SUBSUMED :BORDEAUX-THREADS :DECLARE-TYPES :CLOSER-MOP :GLOBAL-VARS :PARENSCRIPT :SBCL+SAFE-STANDARD-READTABLE :NAMED-READTABLES :CL-PPCRE :PLUMP-UTF-32 :SPLIT-SEQUENCE CHIPZ-SYSTEM:GRAY-STREAMS :FAST-IO-SV :FAST-IO :SBCL-USES-SB-ROTATE-BYTE :ASDF-SYSTEM-CONNECTIONS :CL-JSON-CLOS :CL-JSON :THREAD-SUPPORT CFFI-FEATURES:FLAT-NAMESPACE CFFI-FEATURES:X86-64 CFFI-FEATURES:UNIX :CFFI CFFI-SYS::FLAT-NAMESPACE ALEXANDRIA::SEQUENCE-EMPTYP :QUICKLISP :ASDF3.3 :ASDF3.2 :ASDF3.1 :ASDF3 :ASDF2 :ASDF :OS-UNIX :NON-BASE-CHARS-EXIST-P :ASDF-UNICODE :X86-64 :GENCGC :64-BIT :ANSI-CL :COMMON-LISP :ELF :IEEE-FLOATING-POINT :LINUX :LITTLE-ENDIAN :PACKAGE-LOCAL-NICKNAMES :SB-CORE-COMPRESSION :SB-LDB :SB-PACKAGE-LOCKS :SB-THREAD :SB-UNICODE :SBCL :UNIX)</code></pre> </li> </ul> <p>ASDF version: 3.3.1 Critical dependencies: (/var/data/src/nyxt/nyxt/_build/submodules/cl-cffi-gtk/gtk/cl-cffi-gtk.asd /var/data/src/nyxt/nyxt/_build/quicklisp-client/dists/quicklisp/software/cl-gobject-introspection-20210124-git/cl-gobject-introspection.asd /var/data/src/nyxt/nyxt/_build/submodules/cl-webkit/webkit2/cl-webkit2.asd)</p> <p>Quicklisp dist version: 2021-06-30 Quicklisp client version: 2020-01-04 Local project directories: (/var/data/src/nyxt/nyxt/_build/submodules/ /var/data/src/nyxt/nyxt/_build/quicklisp-client/local-projects/) Critical dependencies(#<SYSTEM cl-cffi-gtk / cl-cffi-gtk-20201220-git / quicklisp 2021-06-30></p> <h1><SYSTEM cl-gobject-introspection / cl-gobject-introspection-20210124-git / quicklisp 2021-06-30></h1> <h1><SYSTEM cl-webkit2 / cl-webkit-20210630-git / quicklisp 2021-06-30>)</h1> <pre><code> Thanks a lot for this project, you guys rock!</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jmercouris"><img src="https://avatars.githubusercontent.com/u/1691662?v=4" />jmercouris</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Thank you for the kind words! I'm not sure why this isn't working! The command bound to page up invokes the following js:</p> <pre><code>"window.scrollBy(0, 0.9 * -window.innerHeight);"</code></pre> <p>could you try to see why that isn't working on those kinds of pages?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/whirm"><img src="https://avatars.githubusercontent.com/u/529494?v=4" />whirm</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Actually, when in insert mode, I would expect the caret/text cursor to jump to the beginning/end of the editable area/line (not the window to scroll) like it does in other browsers like Epiphany, Firefox, Brave.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/whirm"><img src="https://avatars.githubusercontent.com/u/529494?v=4" />whirm</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I just realized I didn't mention I'm using vi keybindings on the bug description. I just tried switching back to the default bindings and I can still reproduce it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Ambrevar"><img src="https://avatars.githubusercontent.com/u/1489143?v=4" />Ambrevar</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>If you enter <code>application-mode</code>, it will work. This is because the website captures these keybindings to do something special.</p> <p>When in CUA or vi-insert-mode, <code>pageup</code> and <code>pagedown</code> are bound and Nyxt does not forward them to the webview. So instead of page-up-ing in the editable area, it page-ups the whole page.</p> <p>This is by design. On master, we've added an option to vi-insert-mode to automatically enable <code>application-mode</code>.</p> <p>That said, we would not have this problem at all if we didn't bind <code>pageup</code> and <code>pagedown</code> in the first place. Looks like forwarding them to the webview "does the right thing".</p> <p>Shall we unbind them then?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/whirm"><img src="https://avatars.githubusercontent.com/u/529494?v=4" />whirm</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Shall we unbind them then?</p> </blockquote> <p>+1 </p> <p>I think it would be the least surprising behavior. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jmercouris"><img src="https://avatars.githubusercontent.com/u/1691662?v=4" />jmercouris</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Done with commit: cb9c2e35</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/whirm"><img src="https://avatars.githubusercontent.com/u/529494?v=4" />whirm</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>This fixed <code>pageup</code> and <code>pagedown</code> but <code>Home</code> and <code>End</code> still don't work for me.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Ambrevar"><img src="https://avatars.githubusercontent.com/u/1489143?v=4" />Ambrevar</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Thinking more about it, we should check if the active element is editable, e.g. with</p> <pre><code class="language-js">document.activeElement.contentEditable;</code></pre> <p>in <code>%clicked-in-input?</code>. I tried with <code>(ps:@ document active-element content-editable)</code> but for some reason it always returns <code>"inherit"</code> on me. Am I missing something?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>