* add alt text to sidebar images
* add alt text to emoji heart
* add alt text to sponsor logos
* add aria-label to search bar
* update snapshot for Search
* 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.
* Renamed pack file from chat.jsx to Chat.jsx.
* refactor
* Missed a js pack where chat.js -> Chat.jsx
* 👷Refactor
* 👷Refactor
* 👷Refactor
* 👷Refactor
* ✅Tests
* Fixed some wording in a test description.
* Create alternate editor
* Install linkstate (?)
Not sure how it disappear in the first place
* Run yarn install
* Modulize ArticleForm component
* Refactor
* Isolating css WIP
* Implement simplified frontmatter-less editor
* Modulize individual form element
* Ajust props names
* Transform json params to snakecase
* Remove codes
* Update /new, almost there for release
* Fix editor resize issues
* Change defaultvalue to value in article form tag element
* Modify html buttons in article form
* Works, but lots of cleanup/questions.
* Fixed comment.
* Only want the search script to load once with InstantClick active.
* Removed unnecessary DOMContentLoaded from copy paste.
* 🔧 Enabled (P)React Devtools.
* Updated comment about reactToEvent.
* Removed unnecessary server-side generated JS for search.
* <Search /> component now has component state.
* Search functions are in there own module now.
* 👷Refactor
* Render propped it up.
* Fixed issue with encoding of search term.
* Removed data-no-instant attr from script.
* 👷Refactor
* Now flash of search loading is avoided..
* Moved search under components folder.
* ✅Tests
* fixedEncodeURIComponent does not need to be exported.
* ✅Tests
* Folders to ignore from the VS Code Local History extension.
* ✅Tests
* Snapshot test for <Search /> component.
* ✅Tests
* Now the <SearchContainer /> handles the '/' key shortcut.
* Made the search box ID a prop defaulting to 'nav-search'
* Excluded barrel files from code coverage.
* Componentized search CSS.
* Storybook stories for <Search /> component.
* Removed extension folders to ignore.
* Fixed logic for "/" key triggering search.
* updated jest snapshot for <Search /> component.
* updated package.json lock file.
* Disabled the import/prefer-default-export rule.
* Now search term clears if not on a non-search results page.
* removed comment that is no longer valid.
* No longer using render prop for Search. Doesn't make sense as it's not stuff that is reused.
* Added preact-render-spy do dev deps.
* Remove beta label on /connect and other small changes
* Add better placeholder for narrow screens
* Adjust comma/bracket placement
* Add description to chat channels
