* Add name to tags component
* Remove old form field
* Update Jest snapshots
* Put form field back in
* Remove explicit name from form field
* Add comment explaining keeping tag_list form field
* Typo - faciliate --> facilitate
Previewing a main image on an article was broken in v2 of the editor :(
We had some tests for this (which I wrote), but the setup for the tests weren't quite right!
This commit fixes the bug, and also refactors and cleans up our tests quite a bit.
Also adds some snapshots for both v1 and v2 editors in a "no image" preview state.
* fix eslint issues in article-form's jsx files
* Use e.key instead of deprecated e.keyCode
* Put back whitespace but in html format
* use re-usable SetupImageButton comp, use window.confirm, put back console.log temporarily
* import deep
* fix CoverImage className prop issue
* update jest snap files
* remove no-restricted-globals from eslint-disable-next-line
* Add tag rules to article v2 editor
* Add bottom phrase to tag dropdown
* Remove console logs
* Remove empty space in css
* Remove commented code and clean up css
* Add type='button' for a11y
* Add myself to core contributors
* add myself to the core contributors
* fix to issue 1574 with the V2 editor
* fix tag bug in v2 editor
* fix v2 editor bug
* remove unused code
* Run prettier on articleForm.jsx and tags.jsx
The only thing this commit does is run prettier on files
we'll be modifying to update the <Tags /> component.
* Add basic snapshot test for ArticleForm
I had to move algoliasearch setup to the constructor.
Otherwise, the setup happens when you import ArticleForm.
Feel free to let me know if there's a better way.
* Add a snapshot test to exercise algoliasearch
This test adds a mock for algoliasearch. We trigger handleTagKeyUp
to test that tagList and tagOptions are updated once the mock
search returns.
* Add test for selecting tags
There are two tests so far.
1. You can click on a tag to add it to the list.
2. You can type a comma which will also add the tag to the list.
* Add constants for key codes
* Change onKeyUp to onInput when typing tags
I believe <Tags> is meant to be a controlled component. Using onKeyUp
sort've acts as both uncontrolled and controlled. The value of the
textarea has already been changed in the DOM, then we try to change
it again using setState. This leads to some weird issues where what
you type gets mangled. For example, you may type "javascript", but end
up with something like "jvascrit".
Switching this to onInput lets us control everything and gets rid of
the weird issue of missing characters as you type.
* Refactor the way we add tags to the input
We add tags when you click on a search result or hit enter on
a search result. I'm doing this because I think it will help insert
tags at any location in the textarea. Currently, it only supports
adding tags to the end of the list.
* Allow editing of tag based on cursor position
If you use the arrow keys or the mouse to go back to edit a tag
you've typed, it'd be nice if the search results could replace
that tag. Before this, if you click or hit enter on a search result,
the tag gets added to the end of the list.
This commit will replace the tag you're editing.
* Move __mocks__ outside of __tests__
This was causing anything inside __mocks__ to be considered as a test.
* Add 2 tests around editing tags
1. That we query for the correct tags based on what we're editing
2. That we replace the correct tag when we choose a new one
* Enforce max tags limit
* Refactor article form tests
Extracts building of <ArticleForm /> component since we're using
it in a number of places for test setup.
* Add a space after inserting a tag
There appears to be an issue with the input losing the cursor position
when it rerenders. I'm not sure if this is an issue with the code
or an issue with preact. I'm leaning toward an issue with the code,
but I'm not really sure.
* Refactor <Tags /> to class
This is to prep for moving any tags related behavior from
<ArticleForm /> to <Tags />.
* Move tags behavior to <Tags /> component
The <Tags /> component seems like the right place to perform
searching and managing of selected tags. We can pass a function
to <Tags /> so the tag list can be updated when needed.
* Move <Tags /> selected state to a getter
We already have `props.defaultValue` which is already a kind of "state"
for selected tags. Keeping track of an array of selected tags
seems like overkill here. We can transform the defaultValue string
to a list of selected tags when needed.
* Use linkState to manage tagList
We're already using linkState elsewhere so I think it makes sense
to use it here as well.
* Extract key handling behavior to methods
We were performing quite a bit of logic when handling key down events.
This commit extracts this logic to small methods.
For example, we need to check if we're at the top or bottom of the
search results. We also need to clear search results and reset the
selected search result. My hope is to make this logic a little bit
clearer with methods named by what they do.
* Move clearing of search results into search method
If the query is blank, it seems to make sense that we'd clear
search results inside the search method. That's an empty query
and the search method is simply returning no search results in
that case.
However, if we don't wrap the resetting of search results with a
Promise, we end up with a double render where the cursor moves to the
end of the textarea. The Promise feels a little hacky to me, but
I couldn't come up with something better.
* Refactor naming of logic to insert a space following a comma
This would've been hard to understand in the future. I named
the conditionals a little bit better and extracted logic to
insert a space at a given position.
* Fix issue with duplicates appearing in search results
This now uses the getter for selected tags as a filter.
