mirror of
https://github.com/wassname/talk.git
synced 2026-07-06 05:17:19 +08:00
Mendel Konikov
80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
---
|
||
title: talk-plugin-rich-text
|
||
permalink: /plugin/talk-plugin-rich-text/
|
||
layout: plugin
|
||
plugin:
|
||
name: talk-plugin-rich-text
|
||
provides:
|
||
- Client
|
||
- Server
|
||
---
|
||
|
||
Enables secure rich text support server-side.
|
||
|
||
## Installation
|
||
|
||
Add `"talk-plugin-rich-text"` to the `plugins.json` in your Talk installation.
|
||
This plugin provides a server and a client side implementation.
|
||
|
||
###### Note: Possible plugin conflict
|
||
The plugin `talk-plugin-comment-content` will prevent this plugin from rendering comments with rich text styling and is not needed if this plugin is enabled.
|
||
|
||
## Server implementation
|
||
|
||
### How does this work?
|
||
|
||
This plugin uses the `comment.metadata` field to store the `richTextBody`. By
|
||
adding `richTextBody` to the schema we can later on resolve it as part of the
|
||
comment. The original `comment.body` is never touched. Using the `metadata`
|
||
field allow us to build plugins that are not invasive to the core and also test
|
||
the capabilities of our plugin framework. We encourage you to see the files and
|
||
check how easy is to build plugins! If you have any feedback, please let us
|
||
know.
|
||
|
||
### Configuration
|
||
|
||
There is a `config.js` in the root folder. This file contains the recommended
|
||
settings.
|
||
|
||
#### `highlightLinks`
|
||
|
||
A `boolean` to highlight links. Set it to `false` to turn it off.
|
||
|
||
#### `linkify`
|
||
|
||
Settings for highlighting links. These will only apply if `higlightLinks` is set to `true`.
|
||
|
||
#### `dompurify`
|
||
|
||
Rules to sanitize html input. We use [DOMPurify](https://github.com/cure53/DOMPurify) to prevent web attacks and XSS. Here is the complete list of [settings](https://github.com/cure53/DOMPurify)
|
||
|
||
#### `jsdom`
|
||
|
||
In order to run html in the server we need [jsdom](https://github.com/jsdom/jsdom). Usually you wouldn’t need to modify this settings.
|
||
|
||
## Client implementation
|
||
|
||
### 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 utilizes the [contentEditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) and execCommand API.
|
||
|
||
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.
|