Prune Editor State Management #9108

noi5e · 2021-02-01T06:01:27Z

Related to #9004, OOP refactor of editor.js.

Merge these PRs before this one (in order):

I think the refactoring is going well enough that we can delete some of the old state management techniques that were very confusing:

$D.selected
calling $E.refresh in $E.wrap.

I feel confident we can do this because we now have:

the newish $E.setState() method, called at appropriate times
unique IDs for most comment form elements

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

gitpod-io · 2021-02-01T06:01:31Z

codecov · 2021-02-01T06:07:25Z

Codecov Report

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

@@           Coverage Diff           @@
##             main    #9108   +/-   ##
=======================================
  Coverage        ?   82.12%           
=======================================
  Files           ?      100           
  Lines           ?     5931           
  Branches        ?        0           
=======================================
  Hits            ?     4871           
  Misses          ?     1060           
  Partials        ?        0

noi5e · 2021-02-01T08:29:43Z

app/assets/javascripts/editorToolbar.js

  $('.rich-text-button').on('click', function(e) {
-    const { textArea, preview, dSelected } = getEditorParams(e.target);


completely removed this getEditorParams helper function and everywhere it's called!

noi5e · 2021-02-01T08:29:59Z

app/assets/javascripts/editorToolbar.js

      e.preventDefault();
-      if (dSelected) { $D.selected = dSelected; }


$D.selected is now gone too!

noi5e · 2021-02-01T08:37:27Z

This is ready to merge! It's a little difficult to sift through the code review to highlight things, but once the other two PRs are merged, I think it will be easier.

Sagarpreet · 2021-02-02T15:53:04Z

app/assets/javascripts/editorToolbar.js

-//   the legacy editor: /app/views/editor/_editor.html.erb (if it's still in use live?)
-
-const getEditorParams = (targetDiv) => {
-  const closestCommentFormWrapper = targetDiv.closest('div.comment-form-wrapper'); // this returns null if there is no match


This legacy code is not at all good, using ids everywhere is so awesome 💯

I know right!!!

Sagarpreet · 2021-02-02T15:53:37Z

app/assets/javascripts/editorToolbar.js

-          elem.find('.progress-bar-container').eq(0).show();
-          elem.find('.uploading-text').eq(0).show();
-          elem.find('.choose-one-prompt-text').eq(0).hide();
+          console.log($("#image-upload-progress-container-" + $E.commentFormID));


Remove console.log

Thank you, yeah, I didn't catch this one! I think I remove this in a later PR, but just in case, adding it to my list.

Sagarpreet · 2021-02-02T15:55:17Z

app/views/editor/_editor.html.erb

@@ -2,7 +2,7 @@
 <%= render :partial => "editor/toolbar", :locals => { :location => :main } %>

 <div class="form-group dropzone">
-  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
+  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>


Should we change id in below line to class like you did in above files to keep it consistent?

Oh I think it will be okay. This particular instance is in the editor/editor partial, which is the legacy editor that is used in /wiki/new and /wiki/edit... On those pages, there is only one form, so this should be the only id='text-input-main' that's on that page.

On pages with multiple forms for each comment (questions, wikis, & research notes), there should still only be one id='text-input-main' for the comment form at the bottom of the page.

…#9110 publiclab#9118

codeclimate · 2021-02-04T00:21:11Z

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

View more on Code Climate.

* merge branches #9104 #9107 #9108 #9110 #9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

* merge branches #9104 #9107 #9108 #9110 #9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea #9004 #9131 * add data-form-id to save & recover buttons #9004 #9131 * E.setState when clicking save, recover, & .text-input #9004 #9131 * refactor save & recover #9004 #9131 * add icon to recover button #9004 #9131 * restore edit button tooltip #9004 #9131 * save with window.location.pathname, not href #9004 #9131 * new system test for save & recover #9004 #9131 * update test selector #9004 #9131

* merge editor refactor branches publiclab#9004 * delete refresh & isSingleFormPage methods publiclab#9004 * delete some D.selected assignments publiclab#9004 * add dropzone class to choose one input elements * E.setState on image select upload publiclab#9004 * remove D.selected from progress bar handlers publiclab#9004 * add unique IDs to image upload progress bars publiclab#9004 * updated image upload progress bar selectors publiclab#9004 * update progress bar selector publiclab#9004 * update selectors for image upload text publiclab#9004

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea publiclab#9004 publiclab#9131 * add data-form-id to save & recover buttons publiclab#9004 publiclab#9131 * E.setState when clicking save, recover, & .text-input publiclab#9004 publiclab#9131 * refactor save & recover publiclab#9004 publiclab#9131 * add icon to recover button publiclab#9004 publiclab#9131 * restore edit button tooltip publiclab#9004 publiclab#9131 * save with window.location.pathname, not href publiclab#9004 publiclab#9131 * new system test for save & recover publiclab#9004 publiclab#9131 * update test selector publiclab#9004 publiclab#9131

* merge editor refactor branches publiclab#9004 * delete refresh & isSingleFormPage methods publiclab#9004 * delete some D.selected assignments publiclab#9004 * add dropzone class to choose one input elements * E.setState on image select upload publiclab#9004 * remove D.selected from progress bar handlers publiclab#9004 * add unique IDs to image upload progress bars publiclab#9004 * updated image upload progress bar selectors publiclab#9004 * update progress bar selector publiclab#9004 * update selectors for image upload text publiclab#9004

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea publiclab#9004 publiclab#9131 * add data-form-id to save & recover buttons publiclab#9004 publiclab#9131 * E.setState when clicking save, recover, & .text-input publiclab#9004 publiclab#9131 * refactor save & recover publiclab#9004 publiclab#9131 * add icon to recover button publiclab#9004 publiclab#9131 * restore edit button tooltip publiclab#9004 publiclab#9131 * save with window.location.pathname, not href publiclab#9004 publiclab#9131 * new system test for save & recover publiclab#9004 publiclab#9131 * update test selector publiclab#9004 publiclab#9131

* merge editor refactor branches publiclab#9004 * delete refresh & isSingleFormPage methods publiclab#9004 * delete some D.selected assignments publiclab#9004 * add dropzone class to choose one input elements * E.setState on image select upload publiclab#9004 * remove D.selected from progress bar handlers publiclab#9004 * add unique IDs to image upload progress bars publiclab#9004 * updated image upload progress bar selectors publiclab#9004 * update progress bar selector publiclab#9004 * update selectors for image upload text publiclab#9004

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea publiclab#9004 publiclab#9131 * add data-form-id to save & recover buttons publiclab#9004 publiclab#9131 * E.setState when clicking save, recover, & .text-input publiclab#9004 publiclab#9131 * refactor save & recover publiclab#9004 publiclab#9131 * add icon to recover button publiclab#9004 publiclab#9131 * restore edit button tooltip publiclab#9004 publiclab#9131 * save with window.location.pathname, not href publiclab#9004 publiclab#9131 * new system test for save & recover publiclab#9004 publiclab#9131 * update test selector publiclab#9004 publiclab#9131

* merge editor refactor branches publiclab#9004 * delete refresh & isSingleFormPage methods publiclab#9004 * delete some D.selected assignments publiclab#9004 * add dropzone class to choose one input elements * E.setState on image select upload publiclab#9004 * remove D.selected from progress bar handlers publiclab#9004 * add unique IDs to image upload progress bars publiclab#9004 * updated image upload progress bar selectors publiclab#9004 * update progress bar selector publiclab#9004 * update selectors for image upload text publiclab#9004

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

* merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab#9110 publiclab#9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea publiclab#9004 publiclab#9131 * add data-form-id to save & recover buttons publiclab#9004 publiclab#9131 * E.setState when clicking save, recover, & .text-input publiclab#9004 publiclab#9131 * refactor save & recover publiclab#9004 publiclab#9131 * add icon to recover button publiclab#9004 publiclab#9131 * restore edit button tooltip publiclab#9004 publiclab#9131 * save with window.location.pathname, not href publiclab#9004 publiclab#9131 * new system test for save & recover publiclab#9004 publiclab#9131 * update test selector publiclab#9004 publiclab#9131

noi5e added 3 commits January 31, 2021 21:45

merge editor refactor branches publiclab#9004

db68524

delete refresh & isSingleFormPage methods publiclab#9004

5419373

delete some D.selected assignments publiclab#9004

71c933c

noi5e requested review from a team as code owners February 1, 2021 06:01

noi5e added 7 commits January 31, 2021 22:35

add dropzone class to choose one input elements

c91a92d

E.setState on image select upload publiclab#9004

afb8328

remove D.selected from progress bar handlers publiclab#9004

9269c12

add unique IDs to image upload progress bars publiclab#9004

daa4db5

updated image upload progress bar selectors publiclab#9004

f9bee00

update progress bar selector publiclab#9004

810646c

update selectors for image upload text publiclab#9004

601240c

noi5e added this to the [Outreachy] Comment Editor Winter 2020 milestone Feb 1, 2021

noi5e added feature explains that the issue is to add a new feature JavaScript outreachy readytomerge labels Feb 1, 2021

noi5e requested review from cesswairimu, jywarren and sagarpreet-chadha February 1, 2021 08:28

noi5e commented Feb 1, 2021

View reviewed changes

noi5e mentioned this pull request Feb 1, 2021

Comment Editor Overhaul Project [Outreachy] #9069

Open

This was referenced Feb 1, 2021

[Discussion] Refactor Comment Editor Using OOP #9004

Closed

Refactor Editor Constructor and Methods, Write Editor Getters #9110

Merged

Sagarpreet reviewed Feb 2, 2021

View reviewed changes

noi5e mentioned this pull request Feb 3, 2021

Disable Drag & Drop Upload on the Image Toolbar Button #9118

Merged

noi5e added a commit to noi5e/plots2 that referenced this pull request Feb 3, 2021

merge branches publiclab#9104 publiclab#9107 publiclab#9108 publiclab…

854e88c

…#9110 publiclab#9118

noi5e added 2 commits February 3, 2021 16:04

Merge branch 'main' into prune-editor-state-management

460cf12

Merge branch 'main' into prune-editor-state-management

919208e

jywarren approved these changes Feb 4, 2021

View reviewed changes

jywarren merged commit 2b8db65 into publiclab:main Feb 4, 2021

noi5e deleted the prune-editor-state-management branch February 4, 2021 00:40

jywarren pushed a commit that referenced this pull request Feb 4, 2021

Change #dropzone-large ID to #comment-form-body (#9123)

2188e0a

* merge branches #9104 #9107 #9108 #9110 #9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prune Editor State Management #9108

Prune Editor State Management #9108

noi5e commented Feb 1, 2021 •

edited

Loading

gitpod-io bot commented Feb 1, 2021 •

edited

Loading

codecov bot commented Feb 1, 2021 •

edited

Loading

noi5e Feb 1, 2021

noi5e Feb 1, 2021

noi5e commented Feb 1, 2021

Sagarpreet Feb 2, 2021

noi5e Feb 2, 2021

Sagarpreet Feb 2, 2021

noi5e Feb 4, 2021

Sagarpreet Feb 2, 2021

noi5e Feb 2, 2021

codeclimate bot commented Feb 4, 2021

		$('.rich-text-button').on('click', function(e) {
		const { textArea, preview, dSelected } = getEditorParams(e.target);

		e.preventDefault();
		if (dSelected) { $D.selected = dSelected; }

Prune Editor State Management #9108

Prune Editor State Management #9108

Conversation

noi5e commented Feb 1, 2021 • edited Loading

gitpod-io bot commented Feb 1, 2021 • edited Loading

codecov bot commented Feb 1, 2021 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noi5e commented Feb 1, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codeclimate bot commented Feb 4, 2021

noi5e commented Feb 1, 2021 •

edited

Loading

gitpod-io bot commented Feb 1, 2021 •

edited

Loading

codecov bot commented Feb 1, 2021 •

edited

Loading