Find-and-Replace-Browser-Extension icon indicating copy to clipboard operation
Find-and-Replace-Browser-Extension copied to clipboard

Does not work for CodeMirror and Jupyter Notebook

Open Dalimil opened this issue 7 years ago • 2 comments

The extension doesn't work for CodeMirror. The CodeMirror plugin uses a textarea only for user input, but then they reflect the text changes in a nicely formatted DOM widget. We should look at the specifics of the CodeMirror implementation to find out which parts needs to be updated to make our search & replace work.

Dalimil avatar Dec 19 '17 00:12 Dalimil

Fixing this would mean implementing find & replace for any HTML.
This is currently out of scope. See https://github.com/Dalimil/Find-and-Replace-Browser-Extension/commit/798b432ad229ad134503e78aab3eee68ebf105d8

Dalimil avatar Jan 13 '18 18:01 Dalimil

CodeMirror is using hidden textareas for input from the user and then they are shadowing this in a formatted DOM that is displayed to the user. This is how CodeMirror 2 is implemented, the previous version was using contenteditable and Document design mode to display formatted text, but this turned out to be very inconsistent across browsers, and buggy in general (See http://codemirror.net/1/story.html and http://codemirror.net/doc/internals.html).

If we had a single mirrored textarea, our extension would work just fine. However, CodeMirror has been around for several years and the current 5th version implements things differently (http://codemirror.net). After the plugin is initialized it waits for the user to click somewhere in the editable area, which is in fact non-editable DOM, that adds a virtual cursor animation to appear as one. It then spawns an empty textarea in that section of a line and waits for the user's keyboard input. This small textarea is immediately cleared and reset when the plugin area loses focus or when the user selects a different line (or in fact any mouse click), with the typed content being commited into the non-editable DOM to visually reflect changes.

This behaviour prevents our extension from working because there is no content in the spawned textarea, and it doesn't have access to the non-editable DOM that is displayed (because we limit our extension to editable text areas, rather than consider any HTML). Therefore fixing CodeMirror (and thus all sites using it, including Jupyter Notebook) would mean implementing find & replace for any HTML - something that we decided not to do in the initial software specification.

Dalimil avatar Jan 26 '18 17:01 Dalimil