Enable tag search in editor after typing #

[guoliu]

Is your feature request related to a problem? Please describe.
Currently an user can type @ in editor and enable user search and selection. As tag become more important, an user should also be able to type # in editor and enable tag search and selection

Describe the solution you'd like
When an user type # and some content in editor, a dropdown of tags should appear according to the content the user typed, allowing the user to select which tag s/he would like to mention. This should be similar with typing @ for an user.

Additional context
Currently the editor API only support mentioning user, see example here. We need to either add mention tag to the API, or generalize to any type of mentioning.

[guoliu]

This should mostly be editor changes, moving to editor repo now.

@MMMayC do you have an editor API design in mind? Examples of current usage can be found here and here. The API was really a PoC and is quite out dated, if you have a new API design in mind we can work together 😄

[mayyyc]

@guoliu I'm thinking something like this

<MattersArticleEditor
          editorContent={content || ''}
          editorContentId={id}
          editorUpdate={update}
          editorUpload={upload}
          eventName={ADD_TOAST}
          language={lang.toUpperCase()}
          mentionLoading={loading}
          mentionKeywordChange={mentionKeywordChange}
          mentionUsers={mentionUsers}
          mentionListComponent={MentionUserList}
          **mentionTags={mentionTags}
          mentionTagListComponent={MentionTagList}
          mentionTagLoading={tagLoading}
          mentionTagKeywordChange={mentionTagKeywordChange}**
          readOnly={readyOnly}
          siteDomain="matters.news"
          theme="bubble"
          titleDefaultValue={title || ''}
          uploadAssetDomain={process.env.NEXT_PUBLIC_ASSET_DOMAIN || ''}
        />

on the editor side, I'm looking at src/modules/mention.ts and thinking extend it to make it work for tags as well.

Let me know if you have any suggestions on the API or if I'm on the right path.

I've been struggling a little bit understanding Quill last weekend, but I've set aside my today for this issue so hopefully i can figure something out. I'm really keen on this =)

[robertu7]

Hi @mayyyc, Thanks for diving into this repo!

I'm refactoring this repo and plan to remove mention* props. Here are some backgrounds:

In this PR, we added a new component called <SearchSelectDialoag>, to search & select nodes, which can be used by # (add a tag) and @ (mention a user).

While typing @ or #, instead of showing the mentionListComponent inside the <Mention> of matters-editor, we will popup the <SearchSelectDialoag> outside of it. I expect this move will make the API cleaner.

Feel free to comment if you have any ideas!

[mayyyc]

@robertu7 so all the mentionLoading/mentionUsers/mentionListComponent will be handled outside the editor? and we only listen to @ or # in the editor and show <SearchSelectDialog>?

That sounds like a nice and clean solution, I like it. I'll look into the implementation of mention module a little more and keep this in mind.

Thanks for the update.

[robertu7]

@mayyyc Yes! that's what I thought.

Since what I am working on could block the development of #, let's figure out how the workflow would be:

For mention user (@) refactoring, I have pushed a commit as the first step, next will be working on src/modules/mention, to handle the typing, showing, inserting logics. (@robertu7 working in progress)

For tag adding (#) feature of this issue, we can make a blot first, then the module. (@mayyyc feel free to pick if you like :D)

[mayyyc]

@robertu7 how is your progress on modules/mention? I'm thinking it will handle tag as well, is that right?

If you haven't started, i might give it a go.

[robertu7]

@mayyyc We are working on other features, so #195 may not have any commit during the next few weeks. Please feel free to take it, thanks a lot!

BTW, thematters/matters-web#1440 has already been deployed to production, currently used by 「添加精選作品」and「添加我的作品」in tag detail page, you might have a try.