avocode / avocode-email-tagsinput Goto Github PK

When I was creating this library, I didn't know a lot about monorepos. I still don't know how it should be done correctly as everyone seems to be doing it a bit different. However according to this answer on SO I should

• specify the dependencies that the package needs in its own package.json instead of moving the common ones to root package.json
• be able to run those scripts from within package directories

The only thing I don't know how to do is how to share config files, such as webpack configs, jest, eslint. Might have to do more research.

It's not really user friendly to use Tags type. Let's just use Array<Type> instead so it's more obvious what it really is.

Spec should update count when tags are added and input is on multiple lines is not passing. Need to pull docker image and see what is wrong.

A lot of time I spend on finnicky CSS work involving adjusting the spacing between tag nodes. This also changes how the input behaves (in collapsed / regular mode). Maybe it'd be a good idea to have some set of constants that'd translate into CSS (perhaps by using preprocessor) so a developer could only specify:

• gutter width between tag nodes
• padding between tag nodes and input

And default styles would be recalculated accordingly. This of course adjusts only the default styles but at least when somebody would be implementing their own stuff in their own custom stylesheet, they could look into source code and figure it out more easily.

If you type into the input, the block that the cursor is not its own inline block. Due to time constraints I did not wrap it in its own block even though it probably should be.

For now, this makes it kinda hard to style that part of the input (since we have to target some kind of span inside the editor container like this .tagsinput > div > div > span:last-child) and I had to resort to some ugly hacks (see #8 ).

Currently the UpdateValue plugin deals with updating the value. The problem is when you remove / add a tag somewhere in the beginning of the input, it treats all the other tags as changed. So the operation takes some time.

This is noticeable for inputs with 50+ tags in them, you can use Performance page in playground app to see this in action. Preferrably I should do a research on some efficient algorithm on how to deal with this. We could perhaps sacrifice accuracy for performance but I'm not sure if this is the right step.

For some reason, Firefox adds space to created tag nodes by adding line-height: 11 property to tag node, it adds it to parent span element (that is contenteditable=false). Not sure if this is bug with slate or by some other CSS added the editor itself.

The input is missing example for input when used with placeholder prop (which is a prop used by SlateJS that's why it's not mentioned in docs).
It'd be nice to have it, useful for testing if everything is styled properly.

When pressing LEFT key, it skips tags. Using RIGHT works OK. This problem happens only in Firefox.
This logic is implemented in KeyboardNavigationPlugin.

EDIT: It seems to be something in Slate I think. The key properties are same for all browsers but for some reason the methods editor.moveFocusTo and editor.moveAnchorTo are different in Firefox.

I cannot find any e2e tests that check the email-tagsinput package.

@comatory if you want to have specific e2e tests for that package assign @Talank to this issue and he can take care of it

Sometime when using collapsible option, the input is scrolled to position of cursor instead of last tag.

Get rid of callback in TagsInput#componentDidMount onInitialLoad

When holding SHIFT key + arrows, it should be possible to expand selection to tag nodes.
Also figure out how to move to beginning + end of input by using keys.

The skipped spec in packages/better-react-tagsinput/test/e2e/collapsible-tagsinput.spec.js fails.

It's spec named should update count when tags are added. This one occurs randomly, sometimes it passes in CI and sometimes not. It's possible it's some kind of timing issue.