[$600] Initial editor plugin

[jmgasper]

This ticket will track standing up a new editor plugin, as initially discussed here: #298

Initial requirements will be:

1. Use SimpleMDE for the editor
2. Save to the DB in MD format
3. Show some integration with Topcoder by allowing us to tag members with @ and have their names displayed in the correct rank colour.

We have a new repo for the plugin here: https://github.com/topcoder-platform/forums-topcoder-editor-plugin

[jmgasper]

Contest https://www.topcoder.com/challenges/30158989 has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Contest https://www.topcoder.com/challenges/30158989 has been updated - it has been assigned to obog.

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper Please read my https://github.com/topcoder-platform/forums/issues/298#issuecomment-748047639 about mobile issues in SimpleMDE. Let's use EasyMDE.

[atelomycterus]

@jmgasper What about css styles? Should we use the topcoder theme style in preview/edit modes? Or put it off for now and let's do saving in DB + showing some integration with Topcoder?

https://github.com/topcoder-platform/admin-app/blob/dev/README.md is used.

Edit vs View

Preview vs View

[jmgasper]

1. EasyMDE is alright
2. If we can handle the CSS easily, then let's do that, but if it's going to be annoying, we can put it off.

[atelomycterus]

@jmgasper Plan to push code tomorrow.

Searching by Topcoder handles

I'm using '/members/autocomplete' (Members API v5, https://github.com/topcoder-platform/member-api/blob/develop/docs/swagger.yaml). This services is best used for autocomplete features, where response payload is light and fast in searching through members.

Is it deployed in PROD?

I've tried to use https://api.topcoder-dev.com/v5/members?handle=obogtop. This method is not suitable because it doesn't return all records, full match is required. I was trying to find obogtop. I searched using ob => 1 record, but missing obogtop The results: obogt => no records obogto => no records obogtop => 1 record

Mentions '@'

User can search by Topcoder handles different ways: a. Enter '@' and 1-2 chars => You should see a list of Topcoder handles. Select one by clicking on it, it will be rendered as @TopcoderHanlde. b. Place the cursor on a word and click on 'user' icon in the editor toolbar. The list of Topcoder users should be displayed. c. Use 'Ctrl-C' (Cmd-C for Mac users.) and enter several chars. The list of Topcoder users should be displayed. d. Place the cursor on a word and 'Ctrl-C' => The list of Topcoder users should be displayed.

So I'm trying to add style to '@TopcoderHandle'. So need to fix Vanilla Markdown formatter and parser.

[jmgasper]

@rootelement - Any idea on the autocomplete in prod? ☝️

@atelomycterus - This all looks good, thanks!

[atelomycterus]

@jmgasper I've updated config.php. Rich Editor will be disabled after deploying. Topcoder Editor will be the main editor. Let me know your feedback. The toolbar can be customized, if you need to remove or add any buttons, no problems with that.

PRs: https://github.com/topcoder-platform/forums-topcoder-editor-plugin/pull/1 https://github.com/topcoder-platform/forums-plugins/pull/56 https://github.com/topcoder-platform/forums/pull/306

Thanks!

Testing mentions

Discussion/Comment

On Mobile

AutoSaving

There were no changes, it works as before.

Missing features and testing

After disabling Rich Editor the next features are not working as expected because they depend on Rich Editor. It is necessary to test/re-test UI/features.

Quotes

Redirect to a new page. It'd better to stay at the same page.

Clicking on Quotes copies a discussion body. I think it'd better create a discussion link. Otherwise, we'll have the same issue -https://github.com/topcoder-platform/forums/issues/146

After fixing Quotes, test Quotes+ReplyTo.

Image vs FileUpload

Click on 'Image' in a toolbar in EasyMDE => ![](https://) will be added. Sometimes Users want to show an image/video in the forum, but they don't have permission to upload files. I think we can leave it. What do you think? User can use it to add image without uploading an image to Filestack. User can add a file link using [](https://) - without uploading a file to Filestack. There is no File button in the toolbar by default in EasyMDE.

We need FileUpload feature => Upload an image/file using Filestack and render a link ![original-image-name][https://uploaded-filestack-url] or [original-file-name][https://uploaded-filestack-url]. FileUpload will require Vanilla permissions. It should be integrated with Filestack.

Emoji

No Emoji in toolbar but Vanilla formatter supports it. If you need a button in toolbar let me know.

Styles

Create discussions/comments and check how it's displayed on desktop/mobile + emails. It is necessary to test it. For testing use readme.md from different topcoder projects. There are some issues with rendering tables.

Existing Discussion/Comment previously created in Rich Editor

Rich Editor is disabled. In Edit mode it's converted from Rich to Markdown automatically. User should see the notification at the left bottom. It is necessary to test whether the data is displayed correctly.

[jmgasper]

@atelomycterus - Deployed in dev, but it's not saving comments. Maybe I'm missing a config step somewhere?

[sdgun]

@atelomycterus Some feedback:

- '@' is not displayed when pressing it from the keyboard so users cannot use '@' in the text

- Huge white spaces in the notification email

- Emojis are displayed in a new line in the email

- Error when posting some comments Uploaded file.txt

- Link color is green

- The links in the discussions/comments are opened in the same tab(Ref to old issue:https://github.com/topcoder-platform/forums/issues/207)

- No option to attach files for Copilot/Admin

- Posting Discussions is very slow still Screencast 2020-12-20.zip

- When editing old posts, the post is not displayed properly. No notification is displayed as mentioned in the comment above(Open link https://vanilla.topcoder-dev.com/discussion/2194/test OR https://vanilla.topcoder-dev.com/discussion/1633/review-time-extends, click Edit)

- Quotes are not working on old posts/comments

- Cancel reply is not clearing the entered text from the editor

- Clean block, is this similar to clear formatting behavior? But it doesn't clear the formatting such as bold,italic

@jmgasper pls let me know if we need to report separate issues on these, I am still half way through testing, I will do some more testing on the editor and the related featured tomorrow

[atelomycterus]

@jmgasper

@atelomycterus - Deployed in dev, but it's not saving comments. Maybe I'm missing a config step somewhere?

The message that mentions quill operations is specific to RichEditor. Please clear you browser cache.

I've tested it in DEV. I can create discussions/comments in DEV. Got feedback from @sdgun (see ☝️ ). I'm going to work on these issues today.

[jmgasper]

@atelomycterus / @sdgun - Latest is deployed.

[jmgasper]

@atelomycterus - I'm still seeing issues with posting. I'm logged in as TonyJ, and I've tried incognito windows to avoid caching problems, in both Safari and Chrome.

[jmgasper]

Could it be because the thread is long and has posts made with the previous editor? I'm testing the Welcome to Awesome discussion in dev.

[atelomycterus]

@jmgasper @sdgun PR- https://github.com/topcoder-platform/forums-topcoder-editor-plugin/pull/2.

Changes

• '@' is not displayed when pressing it from the keyboard so users cannot use '@' in the text

Fixed.

• Clean block, is this similar to clear formatting behavior? But it doesn't clear the formatting such as bold,italic

From source code of EasyMDE:

[atelomycterus]

@jmgasper yes, your comment has a draft. The comment format is Rich. Vanilla 'Garden.ForceInputFormatter' param is false. It means the initial format of comment/discussion can't be changed.

Could you try to create a new discussion/comment? I created a comment:

The most of issues (https://github.com/topcoder-platform/forums/issues/303#issuecomment-749336234) haven't been fixed yet. I am trying to manage Markdown and Rich formats. Rich content is not displayed properly if it is converted from rich to html and from html to markdown. Rich content is stored in Quill format. So Quill can be converted to Markdown but it's necessary to implement a formatter. Only plain text formatter and html formatter are implemented in Vanilla. The solution would be enabling Rich Editor to support existing discussion/comment created previously. Topocder editor should be used for new comments/discussions. But there are issues when both editors are enabled. I am trying to fix it now.

[jmgasper]

@atelomycterus - Thanks, this looks good. I'll log a separate ticket for future bugs / features.

[jmgasper]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30158989

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper Thanks! Before deploying the new editor to PROD, get confirmation that '/members/autocomplete' (Member API v5) is already deployed in PROD.