mirror of
https://github.com/wassname/talk.git
synced 2026-08-07 11:29:44 +08:00
48 lines
1.7 KiB
Markdown
48 lines
1.7 KiB
Markdown
---
|
|
title: talk-plugin-rich-text-coral
|
|
permalink: /plugin/talk-plugin-rich-text-coral/
|
|
layout: plugin
|
|
plugin:
|
|
name: talk-plugin-rich-text-coral
|
|
depends:
|
|
- name: talk-plugin-rich-text
|
|
provides:
|
|
- Client
|
|
---
|
|
|
|
Enables rich text support client-side by using a simple RTE.
|
|
|
|
## Installation
|
|
|
|
Add `"talk-plugin-rich-text-coral"` to the `plugins.json` in your Talk
|
|
installation. Remember to add this in the `client` property since this plugin
|
|
only covers the client side. To add server support, please use
|
|
[talk-plugin-rich-text](/talk/plugin/talk-plugin-rich-text).
|
|
|
|
_Note: Ensure that you don't have any other plugins utilizing the
|
|
`commentContent` slot, as it would result in duplicate comments._
|
|
|
|
## How does this work?
|
|
|
|
This plugin contains 2 important components:
|
|
|
|
- The Editor (`./components/Editor.js`)
|
|
- The Comment Content Renderer (`./components/CommentContent.js`)
|
|
|
|
The editor component uses [contentEditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content).
|
|
|
|
If you check our `index.js` you will notice that we inject this editor in the
|
|
`commentBox` slot. We do this to replace the core comment box with this one.
|
|
|
|
Now, in order to render the new styled comments we need a comment renderer. For
|
|
this task we will have to replace our core comment renderer by using the
|
|
`commentContent` slot.
|
|
|
|
If you are not familiar with GraphQL `client/index.js` will look complicated,
|
|
but fear not! With those functions we specify what to expect from the server
|
|
schema, how to perform optimistic updates and how keep the client store updated
|
|
with the latest changes.
|
|
|
|
We encourage you to see the files and check how easy is to build plugins! If you
|
|
have any feedback, please let us know.
|