diff --git a/.gitignore b/.gitignore index 7c0007dc9..6f3ac70b8 100644 --- a/.gitignore +++ b/.gitignore @@ -62,7 +62,6 @@ plugins/* !plugins/talk-plugin-toxic-comments !plugins/talk-plugin-viewing-options !plugins/talk-plugin-rich-text -!plugins/talk-plugin-rich-text-pell **/node_modules/* yarn-error.log diff --git a/README.md b/README.md index 31e285607..6bdb7fda0 100644 --- a/README.md +++ b/README.md @@ -16,15 +16,19 @@ From getting up and running, to advanced configuration, to how to scale Talk, ou ## Product Guide -Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https:/docs.coralproject.net/talk/how-talk-works). +Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://docs.coralproject.net/talk/how-talk-works). -## Relevant Links +## Pre-Launch Guide +You’ve installed Talk on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Talk Community Guide](https://blog.coralproject.net/youve-installed-talk-now-what/). + +## More Resources + +- [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625) - [Our Blog](https://blog.coralproject.net/) - [Community Forums](https://community.coralproject.net/) - [Community Guides for Journalism](https://guides.coralproject.net/) - [More About Us](https://coralproject.net/) -- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625) ## End-to-End Testing diff --git a/plugins/talk-plugin-rich-text-pell/README.md b/plugins/talk-plugin-rich-text-pell/README.md deleted file mode 100644 index da70d48d0..000000000 --- a/plugins/talk-plugin-rich-text-pell/README.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: talk-plugin-rich-text-pell -permalink: /plugin/talk-plugin-rich-text-pell/ -layout: plugin -plugin: - name: talk-plugin-rich-text-pell - depends: - - name: talk-plugin-rich-text - provides: - - Client ---- - -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](/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 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. diff --git a/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json b/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json deleted file mode 100644 index c8a6db18a..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "@coralproject/eslint-config-talk/client" -} diff --git a/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js deleted file mode 100644 index 7e4a202bc..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js +++ /dev/null @@ -1,23 +0,0 @@ -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 ? ( -
- ) : ( -
{comment.body}
- ); - } -} - -CommentContent.propTypes = { - comment: PropTypes.object.isRequired, -}; - -export default CommentContent; diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css deleted file mode 100644 index 4561e7c6b..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css +++ /dev/null @@ -1,41 +0,0 @@ -.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; -} \ No newline at end of file diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js deleted file mode 100644 index c129e146d..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js +++ /dev/null @@ -1,108 +0,0 @@ -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 ( -
- ); - } -} - -Editor.defaultProps = { - defaultContent: '', - styleWithCSS: false, - actions: [ - { name: 'bold', icon: 'format_bold' }, - { name: 'italic', icon: 'format_italic' }, - { name: 'quote', icon: 'format_quote' }, - ], - 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; diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js deleted file mode 100644 index 8bd36da23..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js +++ /dev/null @@ -1,12 +0,0 @@ -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); diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js b/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js deleted file mode 100644 index 2bdc3490f..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js +++ /dev/null @@ -1,12 +0,0 @@ -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); diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js deleted file mode 100644 index cf9eb11cd..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/index.js +++ /dev/null @@ -1,70 +0,0 @@ -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, - }, - }); - }, - }; - }, - }, -}; diff --git a/plugins/talk-plugin-rich-text-pell/client/utils.js b/plugins/talk-plugin-rich-text-pell/client/utils.js deleted file mode 100644 index 6155fbfb2..000000000 --- a/plugins/talk-plugin-rich-text-pell/client/utils.js +++ /dev/null @@ -1,20 +0,0 @@ -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(/

/g, '

') // IE and old browsers outputs

instead of

s - .replace(/<\/p>/g, '
'); // IE and old browsers outputs

instead of

s - - // Remove first opening tag, otherwise - // with the following transformation below - // we might add an unintended first empty line. - if (str.startsWith('
')) { - str = str.replace('
', ''); - } - - // Normalize
s to
. - return str.replace(/
/g, '
').replace(/<\/div>/g, ''); -} diff --git a/plugins/talk-plugin-rich-text-pell/index.js b/plugins/talk-plugin-rich-text-pell/index.js deleted file mode 100644 index f053ebf79..000000000 --- a/plugins/talk-plugin-rich-text-pell/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {}; diff --git a/plugins/talk-plugin-rich-text-pell/package.json b/plugins/talk-plugin-rich-text-pell/package.json deleted file mode 100644 index 65543a89a..000000000 --- a/plugins/talk-plugin-rich-text-pell/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "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 ", - "license": "Apache-2.0", - "dependencies": { - "pell": "^1.0.1" - } -}