Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markdown in chat #1558

Closed
taoeffect opened this issue Apr 26, 2023 · 5 comments
Closed

Markdown in chat #1558

taoeffect opened this issue Apr 26, 2023 · 5 comments
Assignees
@SebinSong
Labels
App:Frontend Kind:Enhancement Improvements, new features, performance upgrades, etc. Note:UI/UX Priority:High

Comments

@taoeffect
Copy link
Member

taoeffect commented Apr 26, 2023 •
edited
Loading

Problem

We have no way of styling chat.

Solution

Support basic markdown rendering.

This will obviously need a new dependency. The usual rules for adding new dependencies apply:

  • Find the dependency that accomplishes what we need to do with the absolute minimum amount of additional code
  • Find the dependency that is extremely well written and self-contained
  • Make sure to pick a dependency that has few bugs
  • Make sure it has few if any other dependencies
@taoeffect taoeffect added Kind:Enhancement Improvements, new features, performance upgrades, etc. Note:Up-for-grabs App:Frontend Priority:High Note:UI/UX labels Apr 26, 2023
@Silver-IT Silver-IT self-assigned this Apr 28, 2023
@Silver-IT
Copy link
Member

I think markdown-it library seems good. https://www.npmjs.com/package/markdown-it
It has only 5 dependencies and only a few issues remaining.

@taoeffect taoeffect assigned SebinSong and unassigned Silver-IT Sep 11, 2023
@SebinSong
Copy link
Collaborator

It's implementing all the text styling in blue boxes in below screenshot

@ishan-marikar ishan-marikar mentioned this issue Nov 27, 2023
Open
@SebinSong
Copy link
Collaborator

@taoeffect If you would like to track the commit history for my weekly Todos, the feature branch is:
sebin/task/##1558-markdown-in-chat

@SebinSong
Copy link
Collaborator

[ DEV MEMO ]
Possibly helpful resources:

@SebinSong SebinSong mentioned this issue Jan 18, 2024
Merged
taoeffect pushed a commit that referenced this issue Jan 23, 2024
@SebinSong
#1558 - markdown in chat (#1815)
c0a0638 
* add markdown-it pkg to the project and make sure it works

* try slack-style markdown plugin

* optimise the convertToMarkdown() function

* switch from markdown-it to marked (zero-dependency pkg)

* define a custom renderer function that converts *string* to <strong>string</strong>

* style the <code> and <pre><code></code></pre> in the generated markdown outcome

* add more style declarations for markdown elements

* enable <del> tag / specify target='_blank' to <a> tag output

* add various call-to-action btns for transforming to markdown in SendArea.vue

* add a couple of more cta btns

* implement transformTextSelectionToMarkdown() method

* create injectOrStripSpecialChar() func for logic that injects special characters

* implment inject link element to the target string

* move the link cta to the last in the line

* move the primary call-to-actions next to the send btn / add style ctas to the edit mode too

* fix issue with the nested markdown styles / switch gfm on

* work on more feedback items

* delete the test file

* work on more change requests
@taoeffect
Copy link
Member Author

Closed by @SebinSong in #1815!

@ishan-marikar ishan-marikar mentioned this issue Mar 22, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SebinSong SebinSong

Labels
App:Frontend Kind:Enhancement Improvements, new features, performance upgrades, etc. Note:UI/UX Priority:High
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@taoeffect @SebinSong @Silver-IT