plugins/slate: Fix list plugin (#570)

Signed-off-by: Peter Kottas <petokottas@gmail.com>
react-page · Aug 22, 2018 · cc6ba2b · cc6ba2b
1 parent 2333125
commit cc6ba2b
Show file tree

Hide file tree

Showing 12 changed files with 373 additions and 142 deletions.
diff --git a/packages/core/src/service/plugin/classes.js b/packages/core/src/service/plugin/classes.js
@@ -23,7 +23,7 @@
 // @flow
 /* eslint-disable no-empty-function, no-unused-vars */
 import React, { Component, Element } from 'react'
-import semver from 'semver'
+import semver from 'semver';
 
 export type ContentPluginProps<T> = {
   /**

diff --git a/packages/core/src/service/plugin/index.js b/packages/core/src/service/plugin/index.js
@@ -120,10 +120,10 @@ export default class PluginService {
   setContentPlugins = (plugins: Array<any> = []) => {
     this.plugins.content = []
 
-    // semicolon is required to avoid syntax error
-    ;[defaultPlugin, ...plugins].forEach((plugin: any) =>
-      this.addContentPlugin(plugin)
-    )
+      // semicolon is required to avoid syntax error
+      ;[defaultPlugin, ...plugins].forEach((plugin: any) =>
+        this.addContentPlugin(plugin)
+      )
   }
 
   addContentPlugin = (config: any) => {

diff --git a/packages/plugins/content/slate/src/Component/index.js b/packages/plugins/content/slate/src/Component/index.js
@@ -57,6 +57,7 @@ class Slate extends Component {
     this.props.onChange({ editorState: value })
   }
 
+
   handleOpen = portal => {
     // this.toolbar = portal.firstChild
   }

diff --git a/packages/plugins/content/slate/src/helpers.js b/packages/plugins/content/slate/src/helpers.js
@@ -29,10 +29,10 @@ export const makeTagNode = Tag => {
     children,
     node
   }: {
-    attributes: Object,
-    children: any,
-    node: any
-  }) => {
+      attributes: Object,
+      children: any,
+      node: any
+    }) => {
     const align = node.data.get('align')
     return (
       <Tag {...attributes} style={{ textAlign: align }}>
@@ -59,16 +59,19 @@ export const makeTagMark = Tag => {
 export const ToolbarButton = ({
   icon,
   isActive,
-  onClick
+  onClick,
+  disabled = false
 }: {
-  icon: string,
-  isActive: string,
-  onClick(): void
-}) => (
-  <IconButton
-    onClick={onClick}
-    style={isActive ? { color: 'rgb(0, 188, 212)' } : { color: 'white' }}
-  >
-    {icon}
-  </IconButton>
-)
+    icon: string,
+    isActive: string,
+    onClick(): void,
+    disabled?: boolean
+  }) => (
+    <IconButton
+      onClick={onClick}
+      style={isActive ? { color: 'rgb(0, 188, 212)' } : disabled ? { color: 'gray' } : { color: 'white' }}
+      disabled={disabled}
+    >
+      {icon}
+    </IconButton>
+  )
diff --git a/packages/plugins/content/slate/src/hooks.js b/packages/plugins/content/slate/src/hooks.js
@@ -124,10 +124,10 @@ export const unserialize = ({
   serialized,
   editorState
 }: {
-  importFromHtml: string,
-  serialized: Object,
-  editorState: Object
-}): { editorState: Object } => {
+    importFromHtml: string,
+    serialized: Object,
+    editorState: Object
+  }): { editorState: Object } => {
   if (serialized) {
     return { editorState: Value.fromJSON(serialized, options) }
   } else if (importFromHtml) {

diff --git a/packages/plugins/content/slate/src/index.js b/packages/plugins/content/slate/src/index.js
@@ -25,7 +25,7 @@
 /* eslint no-duplicate-imports: ["off"] */
 /* eslint prefer-reflect: ["off"] */
 import Subject from '@material-ui/icons/Subject'
-import { pathOr } from 'ramda'
+import { compose, flatten, map, prop, pathOr } from 'ramda'
 import Html from 'slate-html-serializer'
 import React from 'react'
 import { ActionTypes } from 'redux-undo'
@@ -37,6 +37,8 @@ import * as hooks from './hooks'
 import parse5 from 'parse5'
 import v002 from './migrations/v002'
 
+const createPlugins = compose(flatten, map(prop('plugins')))
+
 export const createInitialState = hooks.createInitialState
 
 export const html = new Html({
@@ -48,7 +50,7 @@ export const defaultPlugins = hooks.defaultPlugins
 
 export default (plugins: Plugin[] = hooks.defaultPlugins) => {
   const props = {}
-  props.plugins = plugins
+  props.plugins = (plugins ? plugins : []).concat(createPlugins(plugins))
   props.onKeyDown = (
     e: Event,
     data: { key: string, isMod: boolean, isShift: boolean },
@@ -60,7 +62,10 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => {
     }
 
     if (data.isShift && data.key === 'enter') {
-      return state.change().insertText('\n').value
+      return state
+        .change()
+        .insertText('\n')
+        .value
     }
 
     for (let i = 0; i < plugins.length; i++) {
@@ -134,7 +139,9 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => {
       }
 
       setTimeout(() => {
-        props.state.editorState.change().focus()
+        props.state.editorState
+          .change()
+          .focus()
       }, 0)
     },
 
@@ -144,7 +151,9 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => {
       }
 
       props.onChange({
-        editorState: props.state.editorState.change().blur().value
+        editorState: props.state.editorState
+          .change()
+          .blur().value
       })
     },
 

diff --git a/packages/plugins/content/slate/src/plugins/blockquote.js b/packages/plugins/content/slate/src/plugins/blockquote.js
@@ -89,6 +89,7 @@ export default class BlockquotePlugin extends Plugin {
     }
   }
 
+
   plugins = [
     createBlockquotePlugin({
       type: BLOCKQUOTE,

diff --git a/packages/plugins/content/slate/src/plugins/code/index.js b/packages/plugins/content/slate/src/plugins/code/index.js
@@ -46,7 +46,10 @@ export default class CodePlugin extends Plugin {
         e.preventDefault()
 
         onChange({
-          value: editorState.change().toggleMark(type).value
+          value: editorState
+            .change()
+            .toggleMark(type)
+            .value
         })
       }
 
@@ -69,7 +72,8 @@ export default class CodePlugin extends Plugin {
         onChange({
           value: editorState
             .change()
-            .setBlocks(isActive ? this.DEFAULT_NODE : type).value
+            .setBlocks(isActive ? this.DEFAULT_NODE : type)
+            .value
         })
       }
 
@@ -115,9 +119,7 @@ export default class CodePlugin extends Plugin {
     if (object.object === 'mark') {
       switch (object.type) {
         case CODE:
-          return (
-            <code className="ory-plugins-content-slate-code">{children}</code>
-          )
+          return <code className="ory-plugins-content-slate-code">{children}</code>
       }
     } else if (object.object === 'block') {
       switch (object.type) {
@@ -136,11 +138,7 @@ export default class CodePlugin extends Plugin {
 
     switch (mark.type) {
       case CODE:
-        return (
-          <code {...attributes} className="ory-plugins-content-slate-code">
-            {children}
-          </code>
-        )
+        return <code {...attributes} className="ory-plugins-content-slate-code">{children}</code>
     }
   }
 
@@ -149,7 +147,7 @@ export default class CodePlugin extends Plugin {
 
     switch (node.type) {
       case CODE:
-        return <Code {...props} />
+        return <Code {...props}/>
     }
   }
 }
diff --git a/packages/plugins/content/slate/src/plugins/link/index.js b/packages/plugins/content/slate/src/plugins/link/index.js
@@ -70,7 +70,10 @@ class LinkButton extends Component {
     )
 
     if (hasLinks) {
-      const newState = editorState.change().unwrapInline(A).value
+      const newState = editorState
+        .change()
+        .unwrapInline(A)
+        .value
       onChange({ value: newState })
     } else if (editorState.selection.isExpanded) {
       this.setState({
@@ -94,7 +97,10 @@ class LinkButton extends Component {
   handleClose = () => {
     this.setState({ open: false })
 
-    const newState = this.props.editorState.change().focus().value
+    const newState = this.props.editorState
+      .change()
+      .focus()
+      .value
     window.setTimeout(() => this.props.onChange({ value: newState }), 1)
   }
 
@@ -114,7 +120,8 @@ class LinkButton extends Component {
           type: A,
           data: { href: this.state.href }
         })
-        .collapseToEnd().value
+        .collapseToEnd()
+        .value
 
       window.setTimeout(() => this.props.onChange({ value: newState }), 1)
       window.setTimeout(() => this.props.focus(), 100)
@@ -135,7 +142,8 @@ class LinkButton extends Component {
         data: { href: this.state.href }
       })
       .collapseToEnd()
-      .focus().value
+      .focus()
+      .value
 
     this.props.onChange({ value: newState })
     window.setTimeout(() => this.props.focus(), 100)
@@ -150,26 +158,24 @@ class LinkButton extends Component {
   }
 
   render() {
-    const actions = (
-      <React.Fragment>
-        <Button
-          variant="flat"
-          label="Cancel"
-          color="primary"
-          onClick={this.handleClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="flat"
-          label="Ok"
-          color="primary"
-          onClick={this.handleSubmit}
-        >
-          Ok
-        </Button>
-      </React.Fragment>
-    )
+    const actions = <React.Fragment>
+      <Button
+        variant='flat'
+        label="Cancel"
+        color="primary"
+        onClick={this.handleClose}
+      >
+        Cancel
+      </Button>
+      <Button
+        variant='flat'
+        label="Ok"
+        color="primary"
+        onClick={this.handleSubmit}
+      >
+        Ok
+      </Button>
+    </React.Fragment>
     const { editorState } = this.props
 
     const hasLinks = editorState.inlines.some(
@@ -265,7 +271,9 @@ export default class LinkPlugin extends Plugin {
   renderNode = props => {
     switch (props.node.type) {
       case A: {
-        return <Link {...props} />
+        return (
+          <Link {...props} />
+        )
       }
     }
   }