Merge pull request #185 from accordproject/dl-fix-toggle-style

fix(*): fix toggling of bold and italics

examples/src/index.js

@@ -12,10 +12,7 @@ import SlateAsInputEditor from '../../src/SlateAsInputEditor';
 
 import * as serviceWorker from './serviceWorker';
 import 'semantic-ui-css/semantic.min.css';
-import NoEdit from '../../src/plugins/noedit';
-import List from '../../src/plugins/list';
 
-const plugins = [NoEdit(), List()];
 const slateTransformer = new SlateTransformer();
 
 const defaultMarkdown = `# My Heading
@@ -95,7 +92,6 @@ function Demo() {
           <Grid.Column>
             <MarkdownAsInputEditor
               readOnly={true}
-              plugins={plugins}
               markdown={markdown}
               onChange={onMarkdownChange}
             />
@@ -105,7 +101,6 @@ function Demo() {
             <SlateAsInputEditor
               readOnly={false}
               lockText={true}
-              plugins={plugins}
               value={slateValue}
               onChange={onSlateValueChange}
               editorProps={propsObj}

package.json

@@ -112,4 +112,4 @@
     "slate-plain-serializer": "^0.7.10",
     "style-loader": "^0.23.1"
   }
-}
+}

src/PluginManager.js

@@ -61,6 +61,9 @@ export default class PluginManager {
    * @param {string} code the type of edit requested
    */
   isEditable(value, code) {
+    // if no plugins have an `isEditable` method, return true
+    if (!this.plugins.filter(plugin => plugin.isEditable).length) return true;
+
     for (let n = 0; n < this.plugins.length; n += 1) {
       const plugin = this.plugins[n];
       if (plugin.isEditable && plugin.isEditable(value, code)) {

src/SlateAsInputEditor/index.js

@@ -27,7 +27,6 @@ import baseSchema from '../schema';
 import PluginManager from '../PluginManager';
 import { FromHTML } from '../html/fromHTML';
 import FormatToolbar from '../FormattingToolbar';
-import NoEditPlugin from '../plugins/noedit';
 import ListPlugin from '../plugins/list';
 
 import '../styles.css';
@@ -114,11 +113,17 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
    * Destructure props for efficiency
    */
   const {
-    onChange, plugins, value, lockText
+    onChange, value, lockText
   } = props;
 
   const editorProps = props.editorProps || Object.create(null);
 
+  const plugins = React.useMemo(() => (props.plugins
+    ? props.plugins.concat(
+      [ListPlugin()]
+    )
+    : [ListPlugin()]), [props.plugins]);
+
   /**
    * A reference to the Slate Editor.
    */
@@ -284,12 +289,12 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
   const isEditable = useCallback((editor, code) => {
     if (isEditorLockText(editor)) {
       const { value } = editor;
-      const pluginManager = new PluginManager(props.plugins);
+      const pluginManager = new PluginManager(plugins);
       return pluginManager.isEditable(value, code);
     }
 
     return true;
-  }, [isEditorLockText, props.plugins]);
+  }, [isEditorLockText, plugins]);
 
   /**
   * On backspace, if at the start of a non-paragraph, convert it back into a
@@ -395,7 +400,7 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
     if (isEditable(editor, 'paste')) {
       const transfer = getEventTransfer(event);
       if (transfer.type === 'html') {
-        const pluginManager = new PluginManager(props.plugins);
+        const pluginManager = new PluginManager(plugins);
         const fromHtml = new FromHTML(pluginManager);
         // @ts-ignore
         const { document } = fromHtml.convert(editor, transfer.html);
@@ -426,7 +431,7 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
    */
   const renderEditor = useCallback((props, editor, next) => {
     const children = next();
-    const pluginManager = new PluginManager(props.plugins);
+    const pluginManager = new PluginManager(plugins);
 
     return (
       <div>
@@ -439,7 +444,7 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
         {children}
       </div>
     );
-  }, [editorProps]);
+  }, [editorProps, plugins]);
 
   const onChangeHandler = ({ value }) => {
     onChange(value);
@@ -450,12 +455,6 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
     setTimeout(editor.focus, 0);
   };
 
-  const allPlugins = React.useMemo(() => (props.plugins
-    ? props.plugins.concat(
-      [ListPlugin(), NoEditPlugin()]
-    )
-    : [ListPlugin(), NoEditPlugin()]), [props.plugins]);
-
   return (
     <div>
       <ToolbarWrapper {...editorProps} id="slate-toolbar-wrapper-id" />
@@ -469,7 +468,7 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
           onChange={onChangeHandler}
           onFocus={onFocusHandler}
           schema={slateSchema}
-          plugins={allPlugins}
+          plugins={plugins}
           onBeforeInput={onBeforeInput}
           onKeyDown={onKeyDown}
           onPaste={onPaste}

src/SlateAsInputEditor/index.test.js

@@ -4,10 +4,9 @@ import Adapter from 'enzyme-adapter-react-16';
 import { SlateTransformer } from '@accordproject/markdown-slate';
 import SlateAsInputEditor from './index';
 
-import NoEdit from '../plugins/noedit';
 import List from '../plugins/list';
 
-const plugins = [NoEdit(), List()];
+const plugins = [List()];
 
 Enzyme.configure({ adapter: new Adapter() });