Combine readme

plugins/talk-plugin-rich-text/README.client.md

@@ -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.

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.

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';

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
     }

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
     }

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
             }
           `;