mirror of
https://github.com/wassname/talk.git
synced 2026-07-04 08:29:10 +08:00
Merge branch 'master' into docs-plug
This commit is contained in:
Belén Curcio
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ const initialState = {
|
||||
errors: {},
|
||||
};
|
||||
|
||||
export default function config(state = initialState, action) {
|
||||
export default function configure(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case actions.UPDATE_PENDING: {
|
||||
let next = state;
|
||||
|
||||
@@ -465,7 +465,6 @@ const mapStateToProps = state => ({
|
||||
activeStreamTab: state.stream.activeTab,
|
||||
previousStreamTab: state.stream.previousTab,
|
||||
commentClassNames: state.stream.commentClassNames,
|
||||
pluginConfig: state.config.plugin_config,
|
||||
sortOrder: state.stream.sortOrder,
|
||||
sortBy: state.stream.sortBy,
|
||||
});
|
||||
|
||||
@@ -161,6 +161,14 @@ export default class Stream {
|
||||
);
|
||||
}
|
||||
|
||||
enablePluginsDebug() {
|
||||
this.pym.sendMessage('enablePluginsDebug');
|
||||
}
|
||||
|
||||
disablePluginsDebug() {
|
||||
this.pym.sendMessage('disablePluginsDebug');
|
||||
}
|
||||
|
||||
login(token) {
|
||||
this.pym.sendMessage('login', token);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,10 @@ export default class StreamInterface {
|
||||
return this._stream.emitter.on(eventName, callback);
|
||||
}
|
||||
|
||||
off(eventName, callback) {
|
||||
return this._stream.emitter.off(eventName, callback);
|
||||
}
|
||||
|
||||
login(token) {
|
||||
return this._stream.login(token);
|
||||
}
|
||||
@@ -18,4 +22,12 @@ export default class StreamInterface {
|
||||
remove() {
|
||||
return this._stream.remove();
|
||||
}
|
||||
|
||||
enablePluginsDebug() {
|
||||
return this._stream.enablePluginsDebug();
|
||||
}
|
||||
|
||||
disablePluginsDebug() {
|
||||
return this._stream.disablePluginsDebug();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
import { MERGE_CONFIG } from '../constants/config';
|
||||
import {
|
||||
MERGE_CONFIG,
|
||||
ENABLE_PLUGINS_DEBUG,
|
||||
DISABLE_PLUGINS_DEBUG,
|
||||
} from '../constants/config';
|
||||
|
||||
export const mergeConfig = config => ({
|
||||
type: MERGE_CONFIG,
|
||||
config,
|
||||
});
|
||||
|
||||
export const enablePluginsDebug = () => ({
|
||||
type: ENABLE_PLUGINS_DEBUG,
|
||||
});
|
||||
|
||||
export const disablePluginsDebug = () => ({
|
||||
type: DISABLE_PLUGINS_DEBUG,
|
||||
});
|
||||
|
||||
@@ -3,5 +3,36 @@
|
||||
}
|
||||
|
||||
.debug {
|
||||
background-color: coral;
|
||||
background-color: #e2e2e2;
|
||||
border-style: dotted solid;
|
||||
border-width: 2px;
|
||||
border: dotted 2px coral;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.debug::before {
|
||||
content: attr(data-slot-name);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 999!important;
|
||||
white-space: pre-wrap;
|
||||
min-height: 16px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.debug:hover::before {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
}
|
||||
@@ -30,6 +30,7 @@ class Slot extends React.Component {
|
||||
className,
|
||||
`talk-slot-${kebabCase(fill)}`
|
||||
)}
|
||||
data-slot-name={fill}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
const prefix = `TALK_FRAMEWORK`;
|
||||
|
||||
export const MERGE_CONFIG = `${prefix}_MERGE_CONFIG`;
|
||||
export const ENABLE_PLUGINS_DEBUG = `${prefix}_ENABLE_PLUGINS_DEBUG`;
|
||||
export const DISABLE_PLUGINS_DEBUG = `${prefix}_DISABLE_PLUGINS_DEBUG`;
|
||||
|
||||
@@ -83,6 +83,13 @@ const createHOC = ({
|
||||
}
|
||||
|
||||
if (changes.length === 1 && changes[0] === 'reduxState') {
|
||||
// If config changed, we'll have to rerender everything.
|
||||
// Should only happen during development as this is
|
||||
// usually static.
|
||||
if (this.props.reduxState.config !== next.reduxState.config) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const prevChildrenKeys = this.getSlotElements(this.props).map(
|
||||
child => child.key
|
||||
);
|
||||
|
||||
@@ -1,10 +1,30 @@
|
||||
import { MERGE_CONFIG } from '../constants/config';
|
||||
import {
|
||||
MERGE_CONFIG,
|
||||
ENABLE_PLUGINS_DEBUG,
|
||||
DISABLE_PLUGINS_DEBUG,
|
||||
} from '../constants/config';
|
||||
import { LOGOUT } from '../constants/auth';
|
||||
|
||||
const initialState = {};
|
||||
|
||||
export default function config(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case ENABLE_PLUGINS_DEBUG:
|
||||
return {
|
||||
...state,
|
||||
plugins_config: {
|
||||
...state.plugins_config,
|
||||
debug: true,
|
||||
},
|
||||
};
|
||||
case DISABLE_PLUGINS_DEBUG:
|
||||
return {
|
||||
...state,
|
||||
plugins_config: {
|
||||
...state.plugins_config,
|
||||
debug: false,
|
||||
},
|
||||
};
|
||||
case LOGOUT:
|
||||
return {
|
||||
...state,
|
||||
|
||||
+26
-3
@@ -25,7 +25,11 @@ import { createIntrospection } from 'coral-framework/services/introspection';
|
||||
import introspectionData from 'coral-framework/graphql/introspection.json';
|
||||
import coreReducers from '../reducers';
|
||||
import { checkLogin as checkLoginAction } from '../actions/auth';
|
||||
import { mergeConfig } from '../actions/config';
|
||||
import {
|
||||
mergeConfig,
|
||||
enablePluginsDebug,
|
||||
disablePluginsDebug,
|
||||
} from '../actions/config';
|
||||
import { setAuthToken, logout } from '../actions/auth';
|
||||
|
||||
/**
|
||||
@@ -62,8 +66,19 @@ function initExternalConfig({ store, pym, inIframe }) {
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
pym.sendMessage('getConfig');
|
||||
pym.onMessage('config', config => {
|
||||
store.dispatch(mergeConfig(JSON.parse(config)));
|
||||
pym.onMessage('config', rawConfig => {
|
||||
const config = JSON.parse(rawConfig);
|
||||
if (config.plugin_config) {
|
||||
// @Deprecated
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.warn(
|
||||
'Deprecation Warning: `config.plugin_config` will be phased out soon, please replace `config.plugin_config with `config.plugins_config`'
|
||||
);
|
||||
}
|
||||
config.plugins_config = config.plugin_config;
|
||||
delete config.plugin_config;
|
||||
}
|
||||
store.dispatch(mergeConfig(config));
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
@@ -215,6 +230,14 @@ export async function createContext({
|
||||
pym.onMessage('logout', () => {
|
||||
store.dispatch(logout());
|
||||
});
|
||||
|
||||
pym.onMessage('enablePluginsDebug', () => {
|
||||
store.dispatch(enablePluginsDebug());
|
||||
});
|
||||
|
||||
pym.onMessage('disablePluginsDebug', () => {
|
||||
store.dispatch(disablePluginsDebug());
|
||||
});
|
||||
}
|
||||
|
||||
const preInitList = [];
|
||||
|
||||
@@ -11,7 +11,7 @@ import values from 'lodash/values';
|
||||
import { getDisplayName } from 'coral-framework/helpers/hoc';
|
||||
import camelize from '../helpers/camelize';
|
||||
|
||||
// This is returned for pluginConfig when it is empty.
|
||||
// This is returned for pluginsConfig when it is empty.
|
||||
const emptyConfig = {};
|
||||
|
||||
// Memoize the warnings so we only show them once.
|
||||
@@ -73,10 +73,10 @@ function addMetaDataToSlotComponents(plugins) {
|
||||
* query datas are only passed to the component if it is defined in `component.fragments`.
|
||||
*/
|
||||
function getSlotComponentProps(component, reduxState, props, queryData) {
|
||||
const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig;
|
||||
const pluginsConfig = get(reduxState, 'config.plugins_config') || emptyConfig;
|
||||
return {
|
||||
...props,
|
||||
config: pluginConfig,
|
||||
config: pluginsConfig,
|
||||
...(component.fragments
|
||||
? pick(queryData, Object.keys(component.fragments))
|
||||
: withWarnings(component, queryData)),
|
||||
@@ -125,15 +125,16 @@ class PluginsService {
|
||||
* Returns React Elements for given slot.
|
||||
*/
|
||||
getSlotElements(slot, reduxState, props = {}, options = {}) {
|
||||
const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig;
|
||||
const pluginsConfig =
|
||||
get(reduxState, 'config.plugins_config') || emptyConfig;
|
||||
const { size = 0 } = options;
|
||||
const { queryData, rest } = splitProps(props);
|
||||
|
||||
const isDisabled = component => {
|
||||
if (
|
||||
pluginConfig &&
|
||||
pluginConfig[component.talkPluginName] &&
|
||||
pluginConfig[component.talkPluginName].disable_components
|
||||
pluginsConfig &&
|
||||
pluginsConfig[component.talkPluginName] &&
|
||||
pluginsConfig[component.talkPluginName].disable_components
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -136,6 +136,8 @@ sidebar:
|
||||
url: /plugins-directory/
|
||||
- title: Plugin Recipes
|
||||
url: /plugin-recipes/
|
||||
- title: Slots and Plugins
|
||||
url: /slots-and-plugins/
|
||||
- title: Tutorials
|
||||
children:
|
||||
- title: Creating a Basic Plugin
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
---
|
||||
title: Slots and Plugins
|
||||
permalink: /slots-and-plugins/
|
||||
---
|
||||
|
||||
Plugins make use of **"slots"** in order to change Talk's interface.
|
||||
|
||||
By default, Talk has various plugins provided by default. We can see this in `plugins.default.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"server": [
|
||||
"talk-plugin-auth",
|
||||
"talk-plugin-featured-comments",
|
||||
"talk-plugin-offtopic",
|
||||
"talk-plugin-respect"
|
||||
],
|
||||
"client": [
|
||||
"talk-plugin-auth",
|
||||
"talk-plugin-author-menu",
|
||||
"talk-plugin-comment-content",
|
||||
"talk-plugin-featured-comments",
|
||||
"talk-plugin-flag-details",
|
||||
"talk-plugin-ignore-user",
|
||||
"talk-plugin-member-since",
|
||||
"talk-plugin-moderation-actions",
|
||||
"talk-plugin-offtopic",
|
||||
"talk-plugin-permalink",
|
||||
"talk-plugin-respect",
|
||||
"talk-plugin-sort-most-replied",
|
||||
"talk-plugin-sort-most-respected",
|
||||
"talk-plugin-sort-newest",
|
||||
"talk-plugin-sort-oldest",
|
||||
"talk-plugin-viewing-options",
|
||||
"talk-plugin-profile-settings"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Let's only focus on the plugins which are listed under `client` - these are the plugins that use *slots* to inject certain functionality into the Talk UI.
|
||||
|
||||
For example, if we look at the Respect plugin (`talk-plugin-respect`), we can see its `client/index.js` looks like this:
|
||||
|
||||
|
||||
```js
|
||||
import RespectButton from './RespectButton';
|
||||
import translations from './translations.yml';
|
||||
|
||||
export default {
|
||||
translations,
|
||||
slots: {
|
||||
commentReactions: [RespectButton],
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
Inside the `slots` property, we specify which **slots** the plugin will use. Above we are saying that the `RespectButton` component is being injected into the slot `commentReactions`.
|
||||
|
||||
Slots can receive an Array of components, so we can use one plugin or many for one slot.
|
||||
|
||||
### Anatomy of the Slot Component
|
||||
|
||||
In Talk core, we have 32 slots available for us to use. The component `Slot` has a `fill` property where we establish the name of the slot. It looks like this:
|
||||
|
||||
|
||||
```js
|
||||
<Slot
|
||||
fill="commentReactions"
|
||||
{...props}
|
||||
/>
|
||||
```
|
||||
|
||||
You won't have to use this to build plugins, but it's helpful to find where to embed your plugin.
|
||||
|
||||
### Slot List
|
||||
|
||||
* `adminCommentDetailArea`
|
||||
* `adminCommentMoreDetails`
|
||||
* `adminCommentLabels`
|
||||
* `adminModerationSettings`
|
||||
* `adminStreamSettings`
|
||||
* `adminTechSettings`
|
||||
* `adminCommentInfoBar`
|
||||
* `adminCommentContent`
|
||||
* `adminSideActions`
|
||||
* `adminModeration`
|
||||
* `adminModerationIndicator`
|
||||
|
||||
* `commentInputDetailArea`
|
||||
* `commentAvatar`
|
||||
* `commentAuthorName`
|
||||
* `commentAuthorTags`
|
||||
* `commentTimestamp`
|
||||
* `commentInfoBar`
|
||||
* `commentContent`
|
||||
* `commentReactions`
|
||||
* `commentActions`
|
||||
* `commentInputArea`
|
||||
|
||||
* `draftArea`
|
||||
* `streamSettings`
|
||||
* `historyCommentTimestamp`
|
||||
* `profileSections`
|
||||
* `embed`
|
||||
* `stream`
|
||||
* `streamFilter`
|
||||
* `streamQuestionArea`
|
||||
* `login`
|
||||
* `userProfile`
|
||||
* `userDetailCommentContent`
|
||||
|
||||
### Where should I insert my plugin?
|
||||
|
||||
The first thing we should consider is what components will be affected by our plugin's functionality. For example, if we want to add functionality to all the comments that are rendered in a total list of comments, we would use the component `Comment`.
|
||||
|
||||
The slots that are able to add functionality to comments start with `comment`, like `commentContent`, or `commentReactions`, as you can see above.
|
||||
|
||||
### Disabling plugins via `plugins_config`
|
||||
|
||||
Typically, you will manage plugins via your `plugins.json` file. If you want to remove a plugin, you would simply delete it there. However, we can also do this directly with the `plugins_config`.
|
||||
|
||||
Let's look at our example article, `views/article.ejs`. Here we see we have the Talk embed, and within the embed, we can also send a configuration object. To disable a plugin visually, we can pass `true` to the property `disable_components`. Like so:
|
||||
|
||||
|
||||
```js
|
||||
plugins_config: {
|
||||
'talk-plugin-love': {
|
||||
disable_components: true,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Sending information to slots and plugins
|
||||
|
||||
|
||||
Inside our `plugins_config`, we can also send properities and our plugins will receive them. For example, if we send this:
|
||||
|
||||
```js
|
||||
plugins_config: {
|
||||
test: 'data'
|
||||
}
|
||||
```
|
||||
|
||||
The plugin will receive a config object with the properties we've passed. If we do a `console.log` with `this.props`, we would see:
|
||||
|
||||
```js
|
||||
config: {test: 'data'}
|
||||
```
|
||||
|
||||
### Debugging slots and plugins
|
||||
|
||||
|
||||
You can debug slots and plugins simply by passing the `debug` property with value `true`:
|
||||
|
||||
|
||||
```js
|
||||
plugins_config: {
|
||||
debug: true
|
||||
}
|
||||
```
|
||||
|
||||
This will turn on a visual aid to show you all of Talk's available slots and their names. Just move your mouse around!
|
||||
|
||||
### Slot ClassNames
|
||||
|
||||
Slots autogenerate their classes with the prefix `talk-slot`, followed by the name of the slot in kebab case.
|
||||
|
||||
For example, the class autogenerated for the slot `commentContent` is `talk-slot-comment-content`.
|
||||
+32
-4
@@ -42,6 +42,32 @@ const decorateContextPlugins = (context, contextPlugins) => {
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Some pieces of the Context are quite complex to setup, using multiple merges
|
||||
* and other lodash functions. This proxies that access such that it is only
|
||||
* loaded if it is used. Helpful for a query that only uses a loader, and not a
|
||||
* mutator.
|
||||
*
|
||||
* @param {Object} ctx the graph proxy
|
||||
* @param {Function} loader the loadable component that should be proxied
|
||||
*/
|
||||
const createLazyContextLoader = (ctx, loader) =>
|
||||
new Proxy(
|
||||
{ loaded: false, data: null },
|
||||
{
|
||||
get: (obj, prop) => {
|
||||
if (obj.loaded) {
|
||||
return obj.data[prop];
|
||||
}
|
||||
|
||||
obj.data = loader(ctx);
|
||||
obj.loaded = true;
|
||||
|
||||
return obj.data[prop];
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Stores the request context.
|
||||
*/
|
||||
@@ -61,16 +87,18 @@ class Context {
|
||||
this.connectors = connectors;
|
||||
|
||||
// Create the loaders.
|
||||
this.loaders = loaders(this);
|
||||
this.loaders = createLazyContextLoader(this, loaders);
|
||||
|
||||
// Create the mutators.
|
||||
this.mutators = mutators(this);
|
||||
this.mutators = createLazyContextLoader(this, mutators);
|
||||
|
||||
// Decorate the plugin context.
|
||||
this.plugins = decorateContextPlugins(this, contextPlugins);
|
||||
this.plugins = createLazyContextLoader(this, () =>
|
||||
decorateContextPlugins(this, contextPlugins)
|
||||
);
|
||||
|
||||
// Bind the publish/subscribe to the context.
|
||||
this.pubsub = getBroker();
|
||||
this.pubsub = createLazyContextLoader(this, () => getBroker());
|
||||
|
||||
// Bind the parent context.
|
||||
this.parent = ctx;
|
||||
|
||||
@@ -13,6 +13,25 @@ const {
|
||||
|
||||
const { RECAPTCHA_PUBLIC, WEBSOCKET_LIVE_URI } = require('../config');
|
||||
|
||||
// Grab TALK_CLIENT_* environment variables.
|
||||
const TALK_CLIENT = /^TALK_CLIENT_/i;
|
||||
|
||||
// TALK_CLIENT_ENV is all the environment keys that are loaded at runtime.
|
||||
const TALK_CLIENT_ENV = Object.keys(process.env)
|
||||
.filter(key => TALK_CLIENT.test(key))
|
||||
.reduce(
|
||||
(env, key) => {
|
||||
env[key] = process.env[key];
|
||||
return env;
|
||||
},
|
||||
{
|
||||
TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
|
||||
LIVE_URI: WEBSOCKET_LIVE_URI,
|
||||
STATIC_URL,
|
||||
STATIC_ORIGIN,
|
||||
}
|
||||
);
|
||||
|
||||
// TEMPLATE_LOCALS stores the static data that is provided as a `text/json` on
|
||||
// to the client from the template.
|
||||
const TEMPLATE_LOCALS = {
|
||||
@@ -20,12 +39,8 @@ const TEMPLATE_LOCALS = {
|
||||
BASE_PATH,
|
||||
MOUNT_PATH,
|
||||
STATIC_URL,
|
||||
data: {
|
||||
TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
|
||||
LIVE_URI: WEBSOCKET_LIVE_URI,
|
||||
STATIC_URL,
|
||||
STATIC_ORIGIN,
|
||||
},
|
||||
TALK_CLIENT_ENV,
|
||||
data: TALK_CLIENT_ENV,
|
||||
};
|
||||
|
||||
// attachStaticLocals will attach the locals to the response only.
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export const pluginConfigSelector = state => state.config.pluginConfig;
|
||||
export const pluginsConfigSelector = state => state.config.plugins_config;
|
||||
export const staticConfigSelector = state => state.config.static;
|
||||
|
||||
@@ -11,7 +11,7 @@ plugin:
|
||||
- Client
|
||||
---
|
||||
|
||||
Enables sign-in via Facebook via the server side passport middleware.
|
||||
Enables sign-in via Google+ via the server side passport middleware.
|
||||
|
||||
You will need to enable the Google+ API in the dashboard and create credentials
|
||||
for a new OAuth client ID web application. The authorized JavaScript origin
|
||||
@@ -26,4 +26,4 @@ Configuration:
|
||||
the [Google API Console](https://console.developers.google.com/apis/).
|
||||
- `TALK_GOOGLE_CLIENT_SECRET` (**required**) - The Google OAuth2 client ID for
|
||||
your Google login web app. You can learn more about getting a Google Client
|
||||
ID at the [Google API Console](https://console.developers.google.com/apis/).
|
||||
ID at the [Google API Console](https://console.developers.google.com/apis/).
|
||||
|
||||
@@ -16,6 +16,7 @@ anything. You need to enable one of the `talk-plugin-notifications-category-*` p
|
||||
Configuration:
|
||||
|
||||
- `DISABLE_REQUIRE_EMAIL_VERIFICATIONS` - When `TRUE`, it will disable the verification email check before sending notifications for those emails. **Note that organizations implementing a custom authentication system _must_ disable this feature, as they don't use our integrated auth**. (Default `FALSE`).
|
||||
- `TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS` - When `TRUE`, the settings pane for notifications will show always, even if the user does not have a `local` profile. (Default `FALSE`).
|
||||
|
||||
You can enable other notification options by adding more
|
||||
`talk-plugin-notification-*` plugins!
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
} from 'plugin-api/beta/client/hocs';
|
||||
import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
|
||||
import { withUpdateNotificationSettings } from '../mutations';
|
||||
import { connect } from 'plugin-api/beta/client/hocs';
|
||||
import { staticConfigSelector } from 'plugin-api/beta/client/selectors';
|
||||
|
||||
const slots = ['notificationSettings'];
|
||||
|
||||
@@ -42,8 +44,11 @@ class SettingsContainer extends React.Component {
|
||||
};
|
||||
|
||||
getNeedEmailVerification() {
|
||||
return !this.props.root.me.profiles.some(
|
||||
profile => profile.provider === 'local' && profile.confirmedAt
|
||||
return (
|
||||
this.props.root.settings.notificationsRequireConfirmation &&
|
||||
!this.props.root.me.profiles.some(
|
||||
profile => profile.provider === 'local' && profile.confirmedAt
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -94,11 +99,22 @@ const enhance = compose(
|
||||
}
|
||||
}
|
||||
}
|
||||
settings {
|
||||
notificationsRequireConfirmation
|
||||
}
|
||||
}
|
||||
`,
|
||||
}),
|
||||
// Grab the static configuration from the redux store.
|
||||
connect(state => ({
|
||||
static: staticConfigSelector(state),
|
||||
})),
|
||||
excludeIf(
|
||||
props =>
|
||||
// If the environment variable for TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS
|
||||
// is `TRUE`, then always show it.
|
||||
props.static.TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS !== 'TRUE' &&
|
||||
// Only show the settings pane if we have a local profile otherwise.
|
||||
!props.root.me.profiles.some(profile => profile.provider === 'local')
|
||||
),
|
||||
withUpdateNotificationSettings,
|
||||
|
||||
@@ -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.
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "@coralproject/eslint-config-talk/client"
|
||||
}
|
||||
@@ -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 ? (
|
||||
<div
|
||||
className={`${pluginName}-text`}
|
||||
dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
|
||||
/>
|
||||
) : (
|
||||
<div className={`${pluginName}-text`}>{comment.body}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CommentContent.propTypes = {
|
||||
comment: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default CommentContent;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<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;
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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(/<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, '');
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
module.exports = {};
|
||||
@@ -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 <coral@mozillafoundation.org>",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"pell": "^1.0.1"
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@ router.post('/password/reset', async (req, res, next) => {
|
||||
token,
|
||||
},
|
||||
subject: 'Password Reset',
|
||||
to: email,
|
||||
email,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
+10
-10
@@ -1,18 +1,18 @@
|
||||
const { version } = require('../package.json');
|
||||
const Logger = require('bunyan');
|
||||
const { LOGGING_LEVEL, REVISION_HASH } = require('../config');
|
||||
const logger = new Logger({
|
||||
src: true,
|
||||
name: 'talk',
|
||||
version,
|
||||
revision: REVISION_HASH,
|
||||
level: LOGGING_LEVEL,
|
||||
serializers: Logger.stdSerializers,
|
||||
});
|
||||
|
||||
// Create the logging instance that all logger's are branched from.
|
||||
function createLogger(name, traceID) {
|
||||
return new Logger({
|
||||
src: true,
|
||||
name,
|
||||
traceID,
|
||||
version,
|
||||
revision: REVISION_HASH,
|
||||
level: LOGGING_LEVEL,
|
||||
serializers: Logger.stdSerializers,
|
||||
});
|
||||
return logger.child({ origin: name, traceID });
|
||||
}
|
||||
|
||||
module.exports = { createLogger };
|
||||
module.exports = { logger, createLogger };
|
||||
|
||||
+1
-1
@@ -42,7 +42,7 @@
|
||||
* });
|
||||
* },
|
||||
*/
|
||||
plugin_config: {
|
||||
plugins_config: {
|
||||
/**
|
||||
* You can disable rendering slot components of a plugin by doing:
|
||||
*
|
||||
|
||||
@@ -8239,10 +8239,6 @@ pbkdf2@^3.0.3:
|
||||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
pell@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/pell/-/pell-1.0.1.tgz#8f1e97165001024e5f371e0ce0b329457c847b5d"
|
||||
|
||||
pend@~1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
|
||||
|
||||
Reference in New Issue
Block a user