diff --git a/plugins/talk-plugin-rich-text/README.client.md b/plugins/talk-plugin-rich-text/README.client.md deleted file mode 100644 index f953a65cd..000000000 --- a/plugins/talk-plugin-rich-text/README.client.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -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. diff --git a/plugins/talk-plugin-rich-text/README.md b/plugins/talk-plugin-rich-text/README.md index 109759274..7fd90cff6 100644 --- a/plugins/talk-plugin-rich-text/README.md +++ b/plugins/talk-plugin-rich-text/README.md @@ -6,6 +6,7 @@ plugin: name: talk-plugin-rich-text provides: - Client + - Server --- Enables secure rich text support server-side. @@ -13,11 +14,11 @@ Enables secure rich text support server-side. ## Installation Add `"talk-plugin-rich-text"` to the `plugins.json` in your Talk installation. -Remember to add this in the `server` property since this plugin only covers the -server side. To add frontend support consider using -[talk-plugin-rich-text-pell](/talk/plugin/talk-plugin-rich-text-pell). +This plugin provides a server and a client side implementation. -## How does this work? +## 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 @@ -27,23 +28,49 @@ 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 +### Configuration There is a `config.js` in the root folder. This file contains the recommended settings. -### `highlightLinks` +#### `highlightLinks` A `boolean` to highlight links. Set it to `false` to turn it off. -### `linkify` +#### `linkify` Settings for highlighting links. These will only apply if `higlightLinks` is set to `true`. -### `dompurify` +#### `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` +#### `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 commandExec 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. diff --git a/plugins/talk-plugin-rich-text/client/constants.js b/plugins/talk-plugin-rich-text/client/constants.js index 40ea81053..25725cacf 100644 --- a/plugins/talk-plugin-rich-text/client/constants.js +++ b/plugins/talk-plugin-rich-text/client/constants.js @@ -1 +1 @@ -export const PLUGIN_NAME = 'talk-plugin-rich-text-coral'; +export const PLUGIN_NAME = 'talk-plugin-rich-text'; diff --git a/plugins/talk-plugin-rich-text/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js index 99b65c22c..b1b320a99 100644 --- a/plugins/talk-plugin-rich-text/client/containers/CommentContent.js +++ b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js @@ -4,7 +4,7 @@ import CommentContent from '../components/CommentContent'; export default withFragments({ comment: gql` - fragment TalkPluginRichTextCoral_CommentContent_comment on Comment { + fragment TalkPluginRichText_CommentContent_comment on Comment { body richTextBody } diff --git a/plugins/talk-plugin-rich-text/client/containers/Editor.js b/plugins/talk-plugin-rich-text/client/containers/Editor.js index f748e7344..7283fec37 100644 --- a/plugins/talk-plugin-rich-text/client/containers/Editor.js +++ b/plugins/talk-plugin-rich-text/client/containers/Editor.js @@ -4,7 +4,7 @@ import Editor from '../components/Editor'; export default withFragments({ comment: gql` - fragment TalkPluginRichTextCoral_Editor_comment on Comment { + fragment TalkPluginRichText_Editor_comment on Comment { body richTextBody } diff --git a/plugins/talk-plugin-rich-text/client/index.js b/plugins/talk-plugin-rich-text/client/index.js index 8cab68f8d..6eb7a8c95 100644 --- a/plugins/talk-plugin-rich-text/client/index.js +++ b/plugins/talk-plugin-rich-text/client/index.js @@ -11,14 +11,14 @@ export default { }, fragments: { CreateCommentResponse: gql` - fragment TalkRichTextCoral_CreateCommentResponse on CreateCommentResponse { + fragment TalkRichText_CreateCommentResponse on CreateCommentResponse { comment { richTextBody } } `, EditCommentResponse: gql` - fragment TalkRichTextCoral_EditCommentResponse on EditCommentResponse { + fragment TalkRichText_EditCommentResponse on EditCommentResponse { comment { richTextBody } @@ -48,7 +48,7 @@ export default { }, update: proxy => { const editCommentFragment = gql` - fragment TalkRichTextCoral_EditComment on Comment { + fragment TalkRichText_EditComment on Comment { richTextBody } `;