Rename dragdrop.js to editorToolbar.js (Outreachy)

[noi5e]

Part of an OOP refactoring of editor.js (See #9004 for more details)

The big change here is that I renamed dragdrop.js to editorToolbar.js.

I did this because this eventListener for .rich-text-buttons currently lives in editor.js:

plots2/app/assets/javascripts/editor.js

Lines 1 to 14 in f82a11c

	// jQuery (document).ready function:
	$(function() {
	// this click eventHandler assigns $D.selected to the appropriate comment form
	// on pages with multiple comments, $D.selected needs to be accurate so that rich-text changes (bold, italic, etc.) go into the right comment form
	// however, the editor is also used on pages with JUST ONE form, and no other comments, eg. /wiki/new & /wiki/edit, so this code needs to be reusable for that context
	$('.rich-text-button').on('click', function(e) {
	const { textArea, preview, dSelected } = getEditorParams(e.target); // defined in editorHelper.js
	// assign dSelected
	if (dSelected) { $D.selected = dSelected; }
	$E.setState(textArea, preview);
	const action = e.currentTarget.dataset.action // 'bold', 'italic', etc.
	$E[action](); // call the appropriate editor function
	});
	});

This is confusing, especially since if I'm going to refactor editor.js for OOP, I want that script to be a class definition for new Editor objects. It makes more sense for a document.ready eventListener like the one above to be grouped with similar eventListeners (for .dropzones) in dragdrop.js.

But if it's combined with dragdrop.js, then that script no longer is dealing just with drag & drop listeners, hence the rename to editorToolbar.js—this script is basically going to be required everywhere that editor/toolbar is present.

A plus benefit is that I can move this function to dragdrop.js/editorToolbar.js and delete editorHelper.js:

plots2/app/assets/javascripts/editorHelper.js

Lines 2 to 20 in f82a11c

	const getEditorParams = (targetDiv) => {
	const closestCommentFormWrapper = targetDiv.closest('div.comment-form-wrapper'); // this returns null if there is no match
	let params = {};
	// there are no .comment-form-wrappers on /wiki/edit or /wiki/new
	// these pages just have a single text-input form.
	if (closestCommentFormWrapper) {
	params['dSelected'] = $(closestCommentFormWrapper);
	// assign the ID of the textarea within the closest comment-form-wrapper
	params['textarea'] = closestCommentFormWrapper.querySelector('textarea').id;
	params['preview'] = closestCommentFormWrapper.querySelector('.comment-preview').id;
	} else {
	// default to #text-input
	// #text-input ID should be unique, and the only comment form on /wiki/new & /wiki/edit
	params['textarea'] = 'text-input';
	// #preview-main should be unique as well
	params['preview'] = 'preview-main';
	}
	return params;
	};

NOTE: There are a bunch of places which historically depend on dragdrop.js/editorToolbar.js for the drag & drop functionality, and I've listed them in this comment.

---

(This issue is part of the larger Comment Editor Overhaul Project with Outreachy. Refer to Planning Issue #9069 for more context)

[gitpod-io]

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (main@59562b0). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #9044   +/-   ##
=======================================
  Coverage        ?   82.05%           
=======================================
  Files           ?      100           
  Lines           ?     5939           
  Branches        ?        0           
=======================================
  Hits            ?     4873           
  Misses          ?     1066           
  Partials        ?        0           

[noi5e]

@jywarren Tests passing, please take a look! Feedback welcome, and this is ready to merge.

[jywarren]

I saw CodeCov was showing No coverage uploaded for pull request base and realized it was still configured for a master branch; fixed this and restarting tests to get a better coverage report!

[gitpod-io]

[jywarren]

This looks great -- excellent work! To what degree are all these changes covered by tests, do you think? Have you looked into CodeCov to see what the code coverage is for the /app/assets/javascripts/FOO.js files touched here is?

Thanks!!!

[codeclimate]

Code Climate has analyzed commit aec346c and detected 0 issues on this pull request.

View more on Code Climate.

[noi5e]

@jywarren Just fixed the merge conflict, so this one's ready-to-merge again.

I took a look at CodeCov, but it looks like it's currently still saying No coverage uploaded for pull request base.

I still haven't learned how to read the CodeCov output. Looking in the app folder here, but it looks like assets doesn't appear for some reason? Any thoughts?

[noi5e]

Oh yeah, just to answer your other question:

To what degree are all these changes covered by tests, do you think?

Linking the comment I left about dragdrop.js coverage again.

For this particular PR, I don't think there will be any significant problems because I'm just renaming the script and not changing the contents significantly. For this PR, what matters is that I make sure that every instance of javascript_include_tag: 'dragdrop' is changed to editorToolbar.

As long as that's done, the places I've listed will still have eventListeners for .dropzone or #side-dropzone which is what matters.

I think it is important to have system tests in place for the legacy editor (which we're conversing about in #8858), in case the contents of this script change in the future.

[jywarren]

OK, great, and thanks for your answers! Merging this now!!! 🎉 🎉 🎉