wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-06 05:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into notification-digests

Browse Source
This commit is contained in:
Kiwi
2018-03-07 12:03:44 +01:00
committed by GitHub
parent 9cc9969320 a4a22c0758
commit 033c6464e9
90 changed files with 922 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -3,3 +3,4 @@ dist
docs
node_modules
public
.gitignore
+2
View File
@@ -60,6 +60,8 @@ plugins/*
!plugins/talk-plugin-subscriber
!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
Dockerfile
+4
View File
@@ -15,6 +15,10 @@ COPY . /usr/src/app
# Ensure the runtime of the container is in production mode.
ENV NODE_ENV production
# Store the current git revision.
ARG REVISION_HASH
ENV REVISION_HASH=${REVISION_HASH}
# Install app dependencies and build static assets.
RUN yarn global add node-gyp && \
yarn install --frozen-lockfile && \
client/coral-admin/src/components/UserDetailComment.css
+6
View File
@@ -78,6 +78,12 @@
font-weight: 300;
font-size: 16px;
max-width: 360px;
blockquote {
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
}
.sideActions {
client/coral-admin/src/components/UserDetailComment.js
+21 -7
View File
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Slot from 'coral-framework/components/Slot';
import { Link } from 'react-router';
import { Icon } from 'coral-ui';
import CommentDetails from './CommentDetails';
import styles from './UserDetailComment.css';
@@ -33,9 +33,17 @@ class UserDetailComment extends React.Component {
toggleSelect,
className,
data,
root: { settings: { wordlist: { banned, suspect } } },
root: { settings },
} = this.props;
const queryData = { root, comment };
const formatterSettings = {
suspectWords: settings.wordlist.suspect,
bannedWords: settings.wordlist.banned,
body: comment.body,
};
return (
<li
tabIndex={0}
@@ -78,11 +86,17 @@ class UserDetailComment extends React.Component {
<CommentAnimatedEdit body={comment.body}>
<div className={styles.bodyContainer}>
<div className={styles.body}>
<CommentFormatter
suspectWords={suspect}
bannedWords={banned}
body={comment.body}
className="talk-admin-user-detail-comment"
<Slot
fill="userDetailCommentContent"
data={data}
className={cn(
styles.commentContent,
'talk-admin-user-detail-comment'
)}
queryData={queryData}
slotSize={1}
defaultComponent={CommentFormatter}
{...formatterSettings}
/>
<a
className={styles.external}
client/coral-admin/src/containers/UserDetailComment.js
+5
View File
@@ -4,6 +4,9 @@ import withFragments from 'coral-framework/hocs/withFragments';
import { getDefinitionName } from 'coral-framework/utils';
import CommentLabels from './CommentLabels';
import CommentDetails from './CommentDetails';
import { getSlotFragmentSpreads } from 'coral-framework/utils';
const slots = ['userDetailCommentContent'];
export default withFragments({
root: gql`
@@ -14,6 +17,7 @@ export default withFragments({
suspect
}
}
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(CommentLabels.fragments.root)}
...${getDefinitionName(CommentDetails.fragments.root)}
}
@@ -38,6 +42,7 @@ export default withFragments({
status_history {
type
}
${getSlotFragmentSpreads(slots, 'comment')}
...${getDefinitionName(CommentLabels.fragments.comment)}
...${getDefinitionName(CommentDetails.fragments.comment)}
}
client/coral-admin/src/routes/Moderation/components/Comment.css
+15 -2
View File
@@ -72,9 +72,9 @@
flex: 1;
color: black;
max-width: 500px;
word-wrap: break-word;
font-weight: 300;
font-size: 16px;
word-break: break-all;
}
.created {
@@ -133,7 +133,6 @@
color: #063b9a;
cursor: pointer;
font-weight: normal;
margin-left: 10px;
white-space: nowrap;
&:hover {
@@ -184,3 +183,17 @@
}
}
}
.commentContent {
display: flex;
blockquote {
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
}
.commentContentFooter {
flex: 1;
}
client/coral-admin/src/routes/Moderation/components/Comment.js
+25 -18
View File
@@ -64,6 +64,12 @@ class Comment extends React.Component {
const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
const queryData = { root, comment, asset: comment.asset };
const formatterSettings = {
suspectWords: settings.wordlist.suspect,
bannedWords: settings.wordlist.banned,
body: comment.body,
};
return (
<li
tabIndex={0}
@@ -126,26 +132,27 @@ class Comment extends React.Component {
<CommentAnimatedEdit body={comment.body}>
<div className={styles.itemBody}>
<div className={styles.body}>
<CommentFormatter
suspectWords={settings.wordlist.suspect}
bannedWords={settings.wordlist.banned}
className="talk-admin-comment"
body={comment.body}
<Slot
fill="adminCommentContent"
data={data}
className={cn(styles.commentContent, 'talk-admin-comment')}
clearHeightCache={clearHeightCache}
queryData={queryData}
slotSize={1}
defaultComponent={CommentFormatter}
{...formatterSettings}
/>
<a
className={styles.external}
href={`${comment.asset.url}?commentId=${comment.id}`}
target="_blank"
>
<Icon name="open_in_new" /> {t('comment.view_context')}
</a>
<div className={styles.commentContentFooter}>
<a
className={styles.external}
href={`${comment.asset.url}?commentId=${comment.id}`}
target="_blank"
>
<Icon name="open_in_new" /> {t('comment.view_context')}
</a>
</div>
</div>
<Slot
fill="adminCommentContent"
data={data}
clearHeightCache={clearHeightCache}
queryData={queryData}
/>
<div className={styles.sideActions}>
<IfHasLink text={comment.body}>
<span className={styles.hasLinks}>
client/coral-embed-stream/src/tabs/stream/components/Comment.js
+6 -2
View File
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import TagLabel from './TagLabel';
import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
import ReplyButton from './ReplyButton';
import ReplyBox from './ReplyBox';
import ReplyBox from '../containers/ReplyBox';
import FlagComment from './FlagComment';
import { can } from 'coral-framework/services/perms';
import { TransitionGroup } from 'react-transition-group';
@@ -22,7 +22,7 @@ import CommentContent from 'coral-framework/components/CommentContent';
import Slot from 'coral-framework/components/Slot';
import CommentTombstone from './CommentTombstone';
import InactiveCommentLabel from './InactiveCommentLabel';
import { EditableCommentContent } from './EditableCommentContent';
import EditableCommentContent from '../containers/EditableCommentContent';
import {
getActionSummary,
iPerformedThisAction,
@@ -372,9 +372,12 @@ export default class Comment extends React.Component {
maxCharCount,
notify,
charCountEnable,
root,
} = this.props;
return (
<ReplyBox
root={root}
comment={comment}
commentPostedHandler={this.commentPostedHandler}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
@@ -648,6 +651,7 @@ export default class Comment extends React.Component {
<EditableCommentContent
editComment={this.editComment}
notify={notify}
root={root}
comment={comment}
currentUser={currentUser}
charCountEnable={charCountEnable}
client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
+15
View File
@@ -1,3 +1,18 @@
.buttonContainer {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.button {
float: right;
padding: 5px 10px;
background: rgb(105, 105, 105);
color: #FFF;
border: none;
border-radius: 2px;
}
/**
* Example loading state animations on the button.
*/
client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+17 -2
View File
@@ -13,7 +13,7 @@ import DraftArea from '../containers/DraftArea';
/**
* Common UI for Creating or Editing a Comment
*/
export class CommentForm extends React.Component {
class CommentForm extends React.Component {
static propTypes = {
charCountEnable: PropTypes.bool.isRequired,
maxCharCount: PropTypes.number,
@@ -50,6 +50,11 @@ export class CommentForm extends React.Component {
onCancel: PropTypes.func,
state: PropTypes.string,
loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
registerHook: PropTypes.func,
unregisterHook: PropTypes.func,
isReply: PropTypes.bool,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
};
static get defaultProps() {
return {
@@ -87,6 +92,8 @@ export class CommentForm extends React.Component {
charCountEnable,
body,
loadingState,
comment,
root,
} = this.props;
const length = body.length;
@@ -104,6 +111,8 @@ export class CommentForm extends React.Component {
return (
<div>
<DraftArea
root={root}
comment={comment}
id={this.props.bodyInputId}
label={this.props.bodyLabel}
value={body}
@@ -112,8 +121,11 @@ export class CommentForm extends React.Component {
disabled={disableTextArea}
charCountEnable={this.props.charCountEnable}
maxCharCount={this.props.maxCharCount}
registerHook={this.props.registerHook}
unregisterHook={this.props.unregisterHook}
isReply={this.props.isReply}
/>
<div className={`${name}-button-container`}>
<div className={cn(styles.buttonContainer, `${name}-button-container`)}>
{this.props.buttonContainerStart}
{typeof this.props.onCancel === 'function' && (
<Button
@@ -130,6 +142,7 @@ export class CommentForm extends React.Component {
disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle
}
className={cn(
styles.button,
`${name}-button`,
submitButtonClassName,
this.getButtonClassName()
@@ -144,3 +157,5 @@ export class CommentForm extends React.Component {
);
}
}
export default CommentForm;
client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
+12
View File
@@ -0,0 +1,12 @@
.textArea {
width: 100%;
}
.charCount {
color: #ccc;
text-align: right;
}
.charMax {
color: #d50000;
}
client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+38 -12
View File
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import cn from 'classnames';
import t from 'coral-framework/services/i18n';
import Slot from 'coral-framework/components/Slot';
import DraftAreaContent from './DraftAreaContent';
import styles from './DraftArea.css';
// TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
@@ -12,9 +14,15 @@ import Slot from 'coral-framework/components/Slot';
export default class DraftArea extends React.Component {
renderCharCount() {
const { value, maxCharCount } = this.props;
const className = cn('talk-plugin-commentbox-char-count', {
['talk-plugin-commentbox-char-max']: value.length > maxCharCount,
});
const className = cn(
styles.charCount,
'talk-plugin-commentbox-char-count',
{
[`${styles.charMax} talk-plugin-commentbox-char-max`]:
value.length > maxCharCount,
}
);
const remaining = maxCharCount - value.length;
return (
@@ -35,22 +43,36 @@ export default class DraftArea extends React.Component {
charCountEnable,
maxCharCount,
onChange,
queryData,
isReply,
} = this.props;
const tASettings = {
value,
placeholder,
id,
onChange,
rows,
disabled,
isReply,
};
return (
<div>
<div className={'talk-plugin-commentbox-container'}>
<div
className={cn(styles.container, 'talk-plugin-commentbox-container')}
>
<label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
{label}
</label>
<textarea
className={'talk-plugin-commentbox-textarea'}
value={value}
placeholder={placeholder}
id={id}
onChange={onChange}
rows={rows}
disabled={disabled}
<Slot
fill="draftArea"
defaultComponent={DraftAreaContent}
className={styles.content}
queryData={queryData}
registerHook={this.props.registerHook}
unregisterHook={this.props.unregisterHook}
{...tASettings}
/>
<Slot fill="commentInputArea" />
</div>
@@ -74,4 +96,8 @@ DraftArea.propTypes = {
onChange: PropTypes.func,
disabled: PropTypes.bool,
rows: PropTypes.number,
queryData: PropTypes.object.isRequired,
registerHook: PropTypes.func,
unregisterHook: PropTypes.func,
isReply: PropTypes.bool,
};
client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
+12
View File
@@ -0,0 +1,12 @@
.content {
color: #262626;
flex: 1;
padding: 1em;
min-height: 100px;
margin-top: 10px;
font-size: 16px;
border: 1px solid #9E9E9E;
width: 100%;
box-sizing: border-box;
height: 100%;
}
client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+38
View File
@@ -0,0 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './DraftAreaContent.css';
const DraftAreaContent = ({
value,
placeholder,
id,
onChange,
rows,
disabled,
}) => (
<textarea
className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
value={value}
placeholder={placeholder}
id={id}
onChange={e => onChange(e.target.value)}
rows={rows}
disabled={disabled}
/>
);
DraftAreaContent.defaultProps = {
rows: 3,
};
DraftAreaContent.propTypes = {
id: PropTypes.string,
value: PropTypes.string,
placeholder: PropTypes.string,
onChange: PropTypes.func,
disabled: PropTypes.bool,
rows: PropTypes.number,
};
export default DraftAreaContent;
client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+25 -6
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { notifyForNewCommentStatus } from '../helpers';
import { CommentForm } from './CommentForm';
import CommentForm from '../containers/CommentForm';
import styles from './Comment.css';
import { CountdownSeconds } from './CountdownSeconds';
import { getEditableUntilDate } from './util';
@@ -14,11 +14,11 @@ import t from 'coral-framework/services/i18n';
/**
* Renders a Comment's body in such a way that the end-user can edit it and save changes
*/
export class EditableCommentContent extends React.Component {
class EditableCommentContent extends React.Component {
static propTypes = {
// show notification to the user (e.g. for errors)
notify: PropTypes.func.isRequired,
root: PropTypes.object.isRequired,
// comment that is being edited
comment: PropTypes.shape({
id: PropTypes.string,
@@ -53,6 +53,8 @@ export class EditableCommentContent extends React.Component {
this.state = {
body: props.comment.body,
loadingState: '',
// data: {@object} contains data that might be useful for plugins, metadata, etc
data: {},
};
}
componentDidMount() {
@@ -72,8 +74,14 @@ export class EditableCommentContent extends React.Component {
}
}
handleBodyChange = body => {
this.setState({ body });
handleBodyChange = (body, data) => {
this.setState(state => ({
body,
data: {
...state.data,
...data,
},
}));
};
handleSubmit = async () => {
@@ -88,9 +96,16 @@ export class EditableCommentContent extends React.Component {
if (typeof editComment !== 'function') {
return;
}
let input = {
body: this.state.body,
...this.state.data,
};
let response;
try {
response = await editComment({ body: this.state.body });
response = await editComment(input);
if (!this.unmounted) {
this.setState({ loadingState: 'success' });
}
@@ -125,6 +140,8 @@ export class EditableCommentContent extends React.Component {
return (
<div className={styles.editCommentForm}>
<CommentForm
root={this.props.root}
comment={this.props.comment}
defaultValue={this.props.comment.body}
bodyInputId={id}
charCountEnable={this.props.charCountEnable}
@@ -180,3 +197,5 @@ export class EditableCommentContent extends React.Component {
);
}
}
export default EditableCommentContent;
client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css
+3
View File
@@ -0,0 +1,3 @@
.container {
margin-top: 10px;
}
client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
+11 -4
View File
@@ -1,11 +1,13 @@
import React, { Component } from 'react';
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import CommentBox from '../containers/CommentBox';
import styles from './ReplyBox.css';
// TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
const name = 'talk-plugin-replies';
class ReplyBox extends Component {
class ReplyBox extends React.Component {
componentDidMount() {
// TODO: (kiwi) This does not follow best practices, better to move this logic into the component.
document.getElementById(`comment-draft_${this.props.parentId}`).focus();
@@ -17,7 +19,6 @@ class ReplyBox extends Component {
render() {
const {
styles,
postComment,
assetId,
currentUser,
@@ -26,10 +27,14 @@ class ReplyBox extends Component {
commentPostedHandler,
maxCharCount,
charCountEnable,
comment,
root,
} = this.props;
return (
<div className={`${name}-textarea`} style={styles && styles.container}>
<div className={cn(styles.container, `${name}-textarea`)}>
<CommentBox
root={root}
comment={comment}
maxCharCount={maxCharCount}
charCountEnable={charCountEnable}
commentPostedHandler={commentPostedHandler}
@@ -57,6 +62,8 @@ ReplyBox.propTypes = {
assetId: PropTypes.string.isRequired,
currentUser: PropTypes.object,
styles: PropTypes.object,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
};
export default ReplyBox;
client/coral-embed-stream/src/tabs/stream/components/Stream.js
+1
View File
@@ -286,6 +286,7 @@ class Stream extends React.Component {
{banned && <BannedAccount />}
{showCommentBox && (
<CommentBox
root={root}
notify={notify}
postComment={postComment}
appendItemArray={appendItemArray}
client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+12 -1
View File
@@ -4,6 +4,9 @@ import Comment from '../components/Comment';
import { withFragments } from 'coral-framework/hocs';
import { getSlotFragmentSpreads } from 'coral-framework/utils';
import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
import { getDefinitionName } from 'coral-framework/utils';
import CommentBox from './CommentBox';
import ReplyBox from './ReplyBox';
import {
THREADING_LEVEL,
REPLY_COMMENTS_LOAD_DEPTH,
@@ -17,12 +20,12 @@ const slots = [
'commentInputDetailArea',
'commentInfoBar',
'commentActions',
'commentContent',
'commentReactions',
'commentAvatar',
'commentAuthorName',
'commentAuthorTags',
'commentTimestamp',
'commentContent',
];
/**
@@ -95,7 +98,11 @@ export const singleCommentFragment = gql`
editableUntil
}
${getSlotFragmentSpreads(slots, 'comment')}
...${getDefinitionName(CommentBox.fragments.comment)}
...${getDefinitionName(ReplyBox.fragments.comment)}
}
${CommentBox.fragments.comment}
${ReplyBox.fragments.comment}
`;
const withCommentFragments = withFragments({
@@ -107,7 +114,11 @@ const withCommentFragments = withFragments({
}
}
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(CommentBox.fragments.root)}
...${getDefinitionName(ReplyBox.fragments.root)}
}
${CommentBox.fragments.root}
${ReplyBox.fragments.root}
`,
asset: gql`
fragment CoralEmbedStream_Comment_asset on Asset {
client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+35 -9
View File
@@ -1,13 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import t, { timeago } from 'coral-framework/services/i18n';
import { can } from 'coral-framework/services/perms';
import { isSuspended } from 'coral-framework/utils/user';
import Slot from 'coral-framework/components/Slot';
import { connect } from 'react-redux';
import { CommentForm } from '../components/CommentForm';
import CommentForm from '../containers/CommentForm';
import { notifyForNewCommentStatus } from '../helpers';
// TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
@@ -23,7 +21,8 @@ class CommentBox extends React.Component {
this.state = {
body: '',
loadingState: '',
// data: {@object} contains data that might be useful for plugins
data: {},
hooks: {
preSubmit: [],
postSubmit: [],
@@ -62,10 +61,13 @@ class CommentBox extends React.Component {
parent_id: parentId,
body: this.state.body,
tags: this.props.tags,
...this.state.data,
};
// Execute preSubmit Hooks
this.state.hooks.preSubmit.forEach(hook => hook(input));
this.state.hooks.preSubmit.forEach(hook =>
hook(input, this.handleBodyChange)
);
this.setState({ loadingState: 'loading' });
postComment(input, 'comments')
@@ -75,7 +77,9 @@ class CommentBox extends React.Component {
const actions = data.createComment.actions;
// Execute postSubmit Hooks
this.state.hooks.postSubmit.forEach(hook => hook(data));
this.state.hooks.postSubmit.forEach(hook =>
hook(data, this.handleBodyChange)
);
notifyForNewCommentStatus(notify, postedComment.status, actions);
@@ -88,8 +92,14 @@ class CommentBox extends React.Component {
});
};
handleBodyChange = body => {
this.setState({ body });
handleBodyChange = (body, data) => {
this.setState(state => ({
body,
data: {
...state.data,
...data,
},
}));
};
registerHook = (hookType = '', hook = () => {}) => {
@@ -140,7 +150,14 @@ class CommentBox extends React.Component {
};
render() {
const { isReply, maxCharCount, assetId, parentId } = this.props;
const {
isReply,
maxCharCount,
assetId,
parentId,
comment,
root,
} = this.props;
let { onCancel } = this.props;
if (isReply && typeof onCancel !== 'function') {
@@ -158,6 +175,8 @@ class CommentBox extends React.Component {
return (
<div>
<CommentForm
root={root}
comment={comment}
defaultValue={this.props.defaultValue}
bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
maxCharCount={maxCharCount}
@@ -165,6 +184,9 @@ class CommentBox extends React.Component {
bodyPlaceholder={t('comment.comment')}
bodyInputId={id}
body={this.state.body}
registerHook={this.registerHook}
unregisterHook={this.unregisterHook}
isReply={isReply}
buttonContainerStart={
<Slot
fill="commentInputDetailArea"
@@ -199,8 +221,12 @@ CommentBox.propTypes = {
canPost: PropTypes.bool,
notify: PropTypes.func.isRequired,
tags: PropTypes.array,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
};
CommentBox.fragments = CommentForm.fragments;
const mapStateToProps = state => ({
tags: state.stream.commentBoxTags,
});
client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
import CommentForm from '../components/CommentForm';
import DraftArea from './DraftArea';
const CommentFormContainer = props => <CommentForm {...props} />;
CommentFormContainer.fragments = DraftArea.fragments;
export default CommentFormContainer;
client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+34 -3
View File
@@ -1,13 +1,16 @@
import React from 'react';
import { gql } from 'react-apollo';
import { getSlotFragmentSpreads } from 'coral-framework/utils';
import PropTypes from 'prop-types';
import DraftArea from '../components/DraftArea';
import withFragments from 'coral-framework/hocs/withFragments';
const STORAGE_PATH = 'DraftArea';
/**
* An enhanced textarea to make comment drafts.
*/
export default class DraftAreaContainer extends React.Component {
class DraftAreaContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.initValue();
@@ -24,8 +27,8 @@ export default class DraftAreaContainer extends React.Component {
return `${STORAGE_PATH}_${this.props.id}`;
};
onChange = e => {
this.props.onChange && this.props.onChange(e.target.value);
onChange = (body, data) => {
this.props.onChange && this.props.onChange(body, data);
};
componentWillReceiveProps(nextProps) {
@@ -39,8 +42,11 @@ export default class DraftAreaContainer extends React.Component {
}
render() {
const queryData = { comment: this.props.comment, root: this.props.root };
return (
<DraftArea
queryData={queryData}
value={this.props.value}
placeholder={this.props.placeholder}
id={this.props.id}
@@ -50,6 +56,9 @@ export default class DraftAreaContainer extends React.Component {
charCountEnable={this.props.charCountEnable}
maxCharCount={this.props.maxCharCount}
label={this.props.label}
registerHook={this.props.registerHook}
unregisterHook={this.props.unregisterHook}
isReply={this.props.isReply}
/>
);
}
@@ -71,4 +80,26 @@ DraftAreaContainer.propTypes = {
disabled: PropTypes.bool,
rows: PropTypes.number,
label: PropTypes.string.isRequired,
registerHook: PropTypes.func,
unregisterHook: PropTypes.func,
isReply: PropTypes.bool,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
};
const slots = ['draftArea'];
export default withFragments({
root: gql`
fragment TalkEmbedStream_DraftArea_root on RootQuery {
__typename
${getSlotFragmentSpreads(slots, 'root')}
}
`,
comment: gql`
fragment TalkEmbedStream_DraftArea_comment on Comment {
__typename
${getSlotFragmentSpreads(slots, 'comment')}
}
`,
})(DraftAreaContainer);
client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
+11
View File
@@ -0,0 +1,11 @@
import React from 'react';
import EditableCommentContent from '../components/EditableCommentContent';
import CommentForm from './CommentForm';
const EditableCommentContentContainer = props => (
<EditableCommentContent {...props} />
);
EditableCommentContentContainer.fragments = CommentForm.fragments;
export default EditableCommentContentContainer;
client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
import ReplyBox from '../components/ReplyBox';
import CommentBox from './CommentBox';
const ReplyBoxContainer = props => <ReplyBox {...props} />;
ReplyBoxContainer.fragments = CommentBox.fragments;
export default ReplyBoxContainer;
client/coral-embed-stream/style/default.css
-48
View File
@@ -5,7 +5,6 @@
* {
font-family: inherit;
font-style: inherit;
}
html, body {
@@ -113,53 +112,6 @@ body {
position: relative;
}
/* Comment Box Styles */
.talk-plugin-commentbox-container {
display: flex;
width: 100%;
}
.talk-plugin-commentbox-textarea {
color: #262626;
flex: 1;
padding: 1em;
min-height: 100px;
margin-top: 10px;
font-size: 16px;
border: 1px solid #9E9E9E;
}
.talk-plugin-commentbox-button-container {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.talk-plugin-commentbox-button {
float: right;
margin-top: 10px;
padding: 5px 10px;
background: rgb(105, 105, 105);
color: #FFF;
border: none;
border-radius: 2px;
}
.talk-plugin-commentbox-username {
width: 50%;
padding-left: 5px;
margin-bottom: 5px;
}
.talk-plugin-commentbox-char-count {
color: #ccc;
text-align: right;
}
.talk-plugin-commentbox-char-max {
color: #d50000;
}
/* Comment styles */
.comment {
margin-bottom: 10px;
client/coral-framework/services/client.js
+2 -1
View File
@@ -59,7 +59,8 @@ export function createClient(options = {}) {
if (authToken) {
req.options.headers['authorization'] = `Bearer ${authToken}`;
}
// To debug queries add print(req.request.query) and import it from graphql/language/printer
// console.log(print(req.request.query));
next();
},
},
config.js
+4
View File
@@ -55,6 +55,10 @@ const CONFIG = {
? process.env.TALK_LOGGING_LEVEL
: 'info',
// REVISION_HASH when using the docker build will contain the build hash that
// it was built at.
REVISION_HASH: process.env.REVISION_HASH,
//------------------------------------------------------------------------------
// JWT based configuration
//------------------------------------------------------------------------------
graph/mutators/asset.js
+14
View File
@@ -56,12 +56,25 @@ const closeNow = async (ctx, id) =>
}
);
/**
* scrapeAsset will force scrape an asset.
*
* @param {Object} ctx graphql context
* @param {String} id the asset's id to scrape
*/
const scrapeAsset = async (ctx, id) => {
const { services: { Scraper } } = ctx;
return Scraper.create({ id });
};
module.exports = ctx => {
let mutators = {
Asset: {
updateSettings: () => Promise.reject(errors.ErrNotAuthorized),
updateStatus: () => Promise.reject(errors.ErrNotAuthorized),
closeNow: () => Promise.reject(errors.ErrNotAuthorized),
scrape: () => Promise.reject(errors.ErrNotAuthorized),
},
};
@@ -75,6 +88,7 @@ module.exports = ctx => {
mutators.Asset.updateStatus = (id, status) =>
updateStatus(ctx, id, status);
mutators.Asset.closeNow = id => closeNow(ctx, id);
mutators.Asset.scrape = id => scrapeAsset(ctx, id);
}
}
graph/mutators/comment.js
+6 -2
View File
@@ -277,7 +277,10 @@ const setStatus = async (ctx, { id, status }) => {
* @param {Object} edit describes how to edit the comment
* @param {String} edit.body the new Comment body
*/
const edit = async (ctx, { id, asset_id, edit: { body } }) => {
const editComment = async (
ctx,
{ id, asset_id, edit: { body, metadata = {} } }
) => {
const { connectors: { services: { Moderation } } } = ctx;
// Build up the new comment we're setting. We need to check this with
@@ -293,6 +296,7 @@ const edit = async (ctx, { id, asset_id, edit: { body } }) => {
author_id: ctx.user.id,
body,
status,
metadata,
});
// Create all the actions that were determined during the moderation check
@@ -323,7 +327,7 @@ module.exports = ctx => {
}
if (ctx.user && ctx.user.can(EDIT_COMMENT)) {
mutators.Comment.edit = action => edit(ctx, action);
mutators.Comment.edit = action => editComment(ctx, action);
}
return mutators;
graph/resolvers/root_mutation.js
+5 -2
View File
@@ -13,10 +13,10 @@ const RootMutation = {
},
editComment: async (
_,
{ id, asset_id, edit: { body } },
{ id, asset_id, edit },
{ mutators: { Comment } }
) => ({
comment: await Comment.edit({ id, asset_id, edit: { body } }),
comment: await Comment.edit({ id, asset_id, edit }),
}),
createFlag: async (
_,
@@ -133,6 +133,9 @@ const RootMutation = {
revokeToken: async (_, { input }, { mutators: { Token } }) => {
await Token.revoke(input);
},
forceScrapeAsset: async (_, { id }, { mutators: { Asset } }) => {
await Asset.scrape(id);
},
};
module.exports = RootMutation;
graph/typeDefs.graphql
+9
View File
@@ -1420,6 +1420,12 @@ type SetUserRoleResponse implements Response {
errors: [UserError!]
}
type ForceScrapeAssetResponse implements Response {
# An array of errors relating to the mutation that occurred.
errors: [UserError!]
}
# All mutations for the application are defined on this object.
type RootMutation {
@@ -1514,6 +1520,9 @@ type RootMutation {
# Stop Ignoring comments by another user.
stopIgnoringUser(id: ID!): StopIgnoringUserResponse
# forceScrapeAsset will force scrape the Asset with the given ID.
forceScrapeAsset(id: ID!): ForceScrapeAssetResponse
}
type UsernameChangedPayload {
plugins/talk-plugin-akismet/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
+2 -2
View File
@@ -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,
};
plugins/talk-plugin-auth/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-author-menu/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-comment-content/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-comment-content/client/components/CommentContent.js
+5
View File
@@ -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;
plugins/talk-plugin-deep-reply-count/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-facebook-auth/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-featured-comments/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-featured-comments/client/containers/Comment.js
+6 -1
View File
@@ -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`
plugins/talk-plugin-flag-details/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-google-auth/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-ignore-user/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-like/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-love/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-member-since/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-moderation-actions/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-offtopic/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
+1
View File
@@ -1,5 +1,6 @@
.offTopic {
height: 100%;
margin-top: 10px;
}
.offTopicLabel {
plugins/talk-plugin-permalink/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-profile-settings/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-remember-sort/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-respect/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-rich-text-pell/README.md
+20
View File
@@ -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.
plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "@coralproject/eslint-config-talk/client"
}
plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
+23
View File
@@ -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;
plugins/talk-plugin-rich-text-pell/client/components/Editor.css
+41
View File
@@ -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;
}
plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+108
View File
@@ -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;
plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
+12
View File
@@ -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);
plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
+12
View File
@@ -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);
plugins/talk-plugin-rich-text-pell/client/index.js
+70
View File
@@ -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,
},
});
},
};
},
},
};
plugins/talk-plugin-rich-text-pell/client/utils.js
+20
View File
@@ -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, '');
}
plugins/talk-plugin-rich-text-pell/index.js
+1
View File
@@ -0,0 +1 @@
module.exports = {};
plugins/talk-plugin-rich-text-pell/package.json
+12
View File
@@ -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"
}
}
plugins/talk-plugin-rich-text/README.md
+24
View File
@@ -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.
plugins/talk-plugin-rich-text/index.js
+13
View File
@@ -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,
};
plugins/talk-plugin-rich-text/package.json
+14
View File
@@ -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"
}
}
plugins/talk-plugin-rich-text/server/DOMPurify.js
+12
View File
@@ -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;
plugins/talk-plugin-rich-text/server/config.js
+27
View File
@@ -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;
plugins/talk-plugin-rich-text/server/hooks.js
+37
View File
@@ -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),
});
},
},
},
};
plugins/talk-plugin-rich-text/server/resolvers.js
+8
View File
@@ -0,0 +1,8 @@
const { get } = require('lodash');
module.exports = {
Comment: {
// Get the richTextBody, or send null.
richTextBody: comment => get(comment, 'metadata.richTextBody', null),
},
};
plugins/talk-plugin-rich-text/server/typeDefs.graphql
+11
View File
@@ -0,0 +1,11 @@
input CreateCommentInput {
richTextBody: String!
}
input EditCommentInput {
richTextBody: String!
}
type Comment {
richTextBody: String
}
plugins/talk-plugin-slack-notifications/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-slack-notifications/server/hooks.js
+1 -1
View File
@@ -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;
plugins/talk-plugin-sort-most-liked/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-sort-most-loved/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-sort-most-replied/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-sort-most-respected/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-sort-newest/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-sort-oldest/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-subscriber/.eslintrc.json
-4
View File
@@ -1,4 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-toxic-comments/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
+2 -2
View File
@@ -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,
};
plugins/talk-plugin-viewing-options/.eslintrc.json
-3
View File
@@ -1,3 +0,0 @@
{
"extends": "@coralproject/eslint-config-talk"
}
routes/api/v1/index.js
+3 -2
View File
@@ -1,10 +1,11 @@
const express = require('express');
const pkg = require('../../../package.json');
const { version } = require('../../../package.json');
const { REVISION_HASH } = require('../../../config');
const router = express.Router();
// Return the current version.
router.get('/', (req, res) => {
res.json({ version: pkg.version });
res.json({ version, revision: REVISION_HASH });
});
router.use('/account', require('./account'));
scripts/docker.sh
+10 -3
View File
@@ -54,9 +54,16 @@ deploy_branch() {
docker push coralproject/talk:$CIRCLE_BRANCH-onbuild
}
ARGS=""
if [[ -n "$CIRCLE_SHA1" ]]
then
ARGS="--build-arg REVISION_HASH=${CIRCLE_SHA1}"
fi
# build the repo, including the onbuild tagged versions.
docker build -t coralproject/talk:latest -f Dockerfile .
docker build -t coralproject/talk:latest-onbuild -f Dockerfile.onbuild .
docker build -t coralproject/talk:latest ${ARGS} -f Dockerfile .
docker build -t coralproject/talk:latest-onbuild ${ARGS} -f Dockerfile.onbuild .
if [ "$1" = "deploy" ]
then
@@ -80,4 +87,4 @@ then
deploy_branch
fi
fi
fi
fi
services/comments.js
+8 -4
View File
@@ -1,5 +1,5 @@
const CommentModel = require('../models/comment');
const { dotize } = require('./utils');
const debug = require('debug')('talk:services:comments');
const SettingsService = require('./settings');
@@ -81,7 +81,7 @@ module.exports = {
* @param {String} body the new Comment body
* @param {String} status the new Comment status
*/
edit: async ({ id, author_id, body, status }) => {
edit: async ({ id, author_id, body, status, metadata = {} }) => {
const EDITABLE_STATUSES = ['NONE', 'PREMOD', 'ACCEPTED'];
const created_at = new Date();
@@ -104,10 +104,11 @@ module.exports = {
};
const originalComment = await CommentModel.findOneAndUpdate(query, {
$set: {
$set: dotize({
body,
status,
},
metadata,
}),
$push: {
body_history: {
body,
@@ -161,11 +162,14 @@ module.exports = {
body,
created_at,
});
editedComment.status_history.push({
type: status,
created_at,
});
editedComment.metadata = merge(editedComment.metadata, metadata);
return editedComment;
},
yarn.lock
+9 -1
View File
@@ -2800,6 +2800,10 @@ domhandler@^2.3.0:
dependencies:
domelementtype "1"
dompurify@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-1.0.3.tgz#3f2f6ecb6ecd27599a506b410ff47d6eb90fd05d"
domutils@1.5, domutils@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -5657,7 +5661,7 @@ jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
jsdom@^11.5.1:
jsdom@^11.5.1, jsdom@^11.6.2:
version "11.6.2"
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
dependencies:
@@ -7744,6 +7748,10 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
pell@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"
pend@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"