Merge branch 'master' into notification-digests

2026-08-08 11:28:12 +08:00 · 2018-03-07 12:03:44 +01:00
parent 9cc9969320 a4a22c0758
commit 033c6464e9
90 changed files with 922 additions and 223 deletions
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -49,6 +49,6 @@ export default class CheckSpamHook extends React.Component {

 CheckSpamHook.propTypes = {
  notify: PropTypes.func.isRequired,
-  registerHook: PropTypes.func.isRequired,
-  unregisterHook: PropTypes.func.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Linkify from 'react-linkify';

 const name = 'talk-plugin-comment-content';
@@ -21,4 +22,8 @@ const CommentContent = ({ comment }) => {
  );
 };

+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
+};
+
 export default CommentContent;
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -3,7 +3,12 @@ import Comment from '../components/Comment';
 import { withFragments } from 'plugin-api/beta/client/hocs';
 import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';

-const slots = ['commentReactions', 'commentAuthorName', 'commentTimestamp'];
+const slots = [
+  'commentReactions',
+  'commentAuthorName',
+  'commentTimestamp',
+  'commentContent',
+];

 export default withFragments({
  root: gql`
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,5 +1,6 @@
 .offTopic {
  height: 100%;
+  margin-top: 10px;
 }

 .offTopicLabel {
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -0,0 +1,20 @@
+# Talk Plugin Rich Text - Pell
+Enables rich text support client-side by using [Pell](https://github.com/jaredreich/pell).
+
+## Installation
+Add `talk-plugin-rich-text-pell` 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`. 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 contains the rich text editor. For this particular plugin we chose [Pell](https://github.com/jaredreich/pell). Pell is the simplest and smallest WYSIWYG text editor with no dependencies that we could find.
+
+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. 
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pluginName } from '../../package.json';
+
+class CommentContent extends React.Component {
+  render() {
+    const { comment } = this.props;
+    return comment.richTextBody ? (
+      <div
+        className={`${pluginName}-text`}
+        dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
+      />
+    ) : (
+      <div className={`${pluginName}-text`}>{comment.body}</div>
+    );
+  }
+}
+
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
+};
+
+export default CommentContent;
@@ -0,0 +1,41 @@
+.content {
+  background: #fff;
+  border: solid 1px #bbb;
+  min-height: 120px;
+  box-sizing: border-box;
+  outline: 0;
+  overflow-y: auto;
+  width: 100%;
+  padding: 10px;
+  font-style: unset;
+}
+
+.button > i {
+  vertical-align: middle;
+}
+
+.button {
+  background-color: transparent;
+  padding: 3px;
+  border: none;
+  color: #4e4e4e;
+  margin-right: 3px;
+}
+
+.button:hover{
+  cursor: pointer;
+  border-radius: 3px;
+  background-color: #eae8e8;
+}
+
+.actionBar {
+  user-select: none;
+  padding: 5px 10px;
+  border-top: 1px solid #bbb;
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+}
+
+.container {
+  box-sizing: border-box;
+}
@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { init } from 'pell';
+import styles from './Editor.css';
+import cn from 'classnames';
+import { pluginName } from '../../package.json';
+import { htmlNormalizer } from '../utils';
+
+class Editor extends React.Component {
+  ref = null;
+
+  handleRef = ref => (this.ref = ref);
+
+  componentDidMount() {
+    const { onChange, actions, classNames, isReply } = this.props;
+
+    init({
+      element: this.ref,
+      onChange: richTextBody => {
+        // We want to save the original comment body
+        const originalBody = this.ref.childNodes[1].innerText;
+        onChange(originalBody, { richTextBody: htmlNormalizer(richTextBody) });
+      },
+      actions,
+      classes: {
+        actionbar: cn(
+          styles.actionBar,
+          classNames.actionbar,
+          `${pluginName}-action-bar`
+        ),
+        content: cn(
+          styles.content,
+          classNames.content,
+          `${pluginName}-content`
+        ),
+        button: cn(styles.button, classNames.button, `${pluginName}-button`),
+      },
+    });
+
+    // To edit comments and have the previous html comment
+    if (this.props.comment && this.props.comment.richTextBody && !isReply) {
+      this.ref.content.innerHTML = this.props.comment.richTextBody;
+    }
+
+    if (this.props.registerHook) {
+      this.clearInputHook = this.props.registerHook(
+        'postSubmit',
+        (res, handleBodyChange) => {
+          this.ref.content.innerHTML = '';
+          handleBodyChange('', { richTextBody: '' });
+        }
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearInputHook);
+  }
+
+  render() {
+    const { id, classNames } = this.props;
+
+    return (
+      <div
+        id={id}
+        ref={this.handleRef}
+        className={cn(
+          styles.container,
+          classNames.container,
+          `${pluginName}-container`
+        )}
+      />
+    );
+  }
+}
+
+Editor.defaultProps = {
+  defaultContent: '',
+  styleWithCSS: false,
+  actions: [
+    { name: 'bold', icon: '<i class="material-icons">format_bold</i>' },
+    { name: 'italic', icon: '<i class="material-icons">format_italic</i>' },
+    { name: 'quote', icon: '<i class="material-icons">format_quote</i>' },
+  ],
+  classNames: {
+    button: '',
+    content: '',
+    actionbar: '',
+    container: '',
+  },
+};
+
+Editor.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  rows: PropTypes.number,
+  comment: PropTypes.object,
+  classNames: PropTypes.object,
+  actions: PropTypes.array,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
+};
+
+export default Editor;
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import CommentContent from '../components/CommentContent';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRTE_CommentContent_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(CommentContent);
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import Editor from '../components/Editor';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRTE_Editor_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(Editor);
@@ -0,0 +1,70 @@
+import Editor from './containers/Editor';
+import CommentContent from './containers/CommentContent';
+import { gql } from 'react-apollo';
+
+export default {
+  slots: {
+    draftArea: [Editor],
+    commentContent: [CommentContent],
+    adminCommentContent: [CommentContent],
+    userDetailCommentContent: [CommentContent],
+  },
+  fragments: {
+    CreateCommentResponse: gql`
+      fragment TalkRTE_CreateCommentResponse on CreateCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+    EditCommentResponse: gql`
+      fragment TalkRTE_EditCommentResponse on EditCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+  },
+  mutations: {
+    PostComment: ({ variables: { input } }) => {
+      return {
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              richTextBody: input.richTextBody,
+            },
+          },
+        },
+      };
+    },
+    EditComment: ({ variables: { id, edit } }) => {
+      return {
+        optimisticResponse: {
+          editComment: {
+            comment: {
+              richTextBody: edit.richTextBody,
+            },
+          },
+        },
+        update: proxy => {
+          const editCommentFragment = gql`
+            fragment Talk_EditComment on Comment {
+              richTextBody
+            }
+          `;
+
+          const fragmentId = `Comment_${id}`;
+
+          proxy.writeFragment({
+            fragment: editCommentFragment,
+            id: fragmentId,
+            data: {
+              __typename: 'Comment',
+              richTextBody: edit.richTextBody,
+            },
+          });
+        },
+      };
+    },
+  },
+};
@@ -0,0 +1,20 @@
+export function htmlNormalizer(htmlInput) {
+  let str = htmlInput;
+  // We are normalizing the input from contenteditable of each browser, also removing unnecesary html tags
+  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation
+
+  // Old browsers uses `p` normalize to `div` instead.
+  str = str
+    .replace(/<p>/g, '<div>') // IE and old browsers outputs <p> instead of <div>s
+    .replace(/<\/p>/g, '</div>'); // IE and old browsers outputs <p> instead of <div>s
+
+  // Remove first opening tag, otherwise
+  // with the following transformation below
+  // we might add an unintended first empty line.
+  if (str.startsWith('<div>')) {
+    str = str.replace('<div>', '');
+  }
+
+  // Normalize <div>s to <br>.
+  return str.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
+}
@@ -0,0 +1 @@
+module.exports = {};
@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-rich-text-pell",
+  "pluginName": "talk-plugin-rich-text-pell",
+  "version": "0.0.1",
+  "description": "Pell's Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "pell": "^0.7.0"
+  }
+}
@@ -0,0 +1,24 @@
+# Talk Plugin Rich Text 
+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`.
+
+## 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. 
@@ -0,0 +1,13 @@
+const { readFileSync } = require('fs');
+const path = require('path');
+const hooks = require('./server/hooks');
+const resolvers = require('./server/resolvers');
+
+module.exports = {
+  typeDefs: readFileSync(
+    path.join(__dirname, 'server/typeDefs.graphql'),
+    'utf8'
+  ),
+  hooks,
+  resolvers,
+};
@@ -0,0 +1,14 @@
+{
+  "name": "@coralproject/talk-plugin-rich-text",
+  "pluginName": "talk-plugin-rich-text",
+  "version": "0.0.1",
+  "description": "Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "dompurify": "^1.0.3",
+    "jsdom": "^11.6.2",
+    "linkifyjs": "^2.1.5"
+  }
+}
@@ -0,0 +1,12 @@
+const createDOMPurify = require('dompurify');
+const { JSDOM } = require('jsdom');
+const config = require('./config');
+
+// Initializing JSDOM and DOMPurify
+const window = new JSDOM('', config.jsdom).window;
+const DOMPurify = createDOMPurify(window);
+
+// Setting our secure config
+DOMPurify.setConfig(config.dompurify);
+
+module.exports = DOMPurify;
@@ -0,0 +1,27 @@
+const config = {
+  // Highlight Links
+  highlightLinks: true,
+
+  // Linkify Settings
+  linkify: {
+    className: 'talk-plugin-rich-text-link',
+    tagName: 'a',
+    target: {
+      url: '_blank',
+    },
+  },
+
+  // TODO: move to admin eventually
+  // Super strict rules to make sure users only submit the tags they are allowed
+  dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote', 'br'] },
+
+  // Secure config for jsdom even when DOMPurify creates a document without a browsing context
+  jsdom: {
+    features: {
+      FetchExternalResources: false, // disables resource loading over HTTP / filesystem
+      ProcessExternalResources: false, // do not execute JS within script blocks
+    },
+  },
+};
+
+module.exports = config;
@@ -0,0 +1,37 @@
+const { merge, get } = require('lodash');
+const DOMPurify = require('./DOMPurify');
+const linkify = require('linkifyjs/html');
+const config = require('./config');
+
+const inputCleanup = ({ richTextBody }) => {
+  // Let's sanitize the body
+  let cleanInput = DOMPurify.sanitize(richTextBody);
+
+  // Highlighting links
+  if (config.highlightLinks) {
+    cleanInput = linkify(cleanInput, config.linkify);
+  }
+
+  return cleanInput;
+};
+
+module.exports = {
+  RootMutation: {
+    createComment: {
+      async pre(_, { input }) {
+        // Adding the clean body to the comment.metadata field
+        input.metadata = merge(get(input, 'metadata', {}), {
+          richTextBody: inputCleanup(input),
+        });
+      },
+    },
+    editComment: {
+      async pre(_, { edit }) {
+        // Adding the clean body to the comment.metadata field
+        edit.metadata = merge(get(edit, 'metadata', {}), {
+          richTextBody: inputCleanup(edit),
+        });
+      },
+    },
+  },
+};
@@ -0,0 +1,8 @@
+const { get } = require('lodash');
+
+module.exports = {
+  Comment: {
+    // Get the richTextBody, or send null.
+    richTextBody: comment => get(comment, 'metadata.richTextBody', null),
+  },
+};
@@ -0,0 +1,11 @@
+input CreateCommentInput {
+  richTextBody: String!
+}
+
+input EditCommentInput {
+  richTextBody: String!
+}
+
+type Comment {
+  richTextBody: String
+}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -10,7 +10,7 @@ if (process.env.NODE_ENV === 'test') {
 module.exports = {
  RootMutation: {
    createComment: {
-      async post(root, args, context, info, result) {
+      async post(_, _, context, info, result) {
        debug(`Posting notification to Slack webhook: ${SLACK_WEBHOOK_URL}`);
        const { comment: { body: text, created_at: createdAt } } = result;
        const username = context.user.username;
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -1,4 +0,0 @@
-{
-    "extends": "@coralproject/eslint-config-talk"
-  }
-  
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
@@ -49,6 +49,6 @@ export default class CheckToxicityHook extends React.Component {

 CheckToxicityHook.propTypes = {
  notify: PropTypes.func.isRequired,
-  registerHook: PropTypes.func.isRequired,
-  unregisterHook: PropTypes.func.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}