Merge pull request #68 from accordproject/ds-plugins-block-input

(feat) allow plugins to block input, backspace and enter

examples/src/index.js

@@ -14,8 +14,9 @@ import * as serviceWorker from './serviceWorker';
 import 'semantic-ui-css/semantic.min.css';
 import List from '../../src/plugins/list';
 import Video from '../../src/plugins/video';
+import NoEdit from '../../src/plugins/noedit';
 
-const plugins = [List(), Video()];
+const plugins = [List(), Video(), NoEdit()];
 const pluginManager = new PluginManager(plugins);
 const fromMarkdown = new FromMarkdown(pluginManager);
 
@@ -24,13 +25,6 @@ This is text. This is *italic* text. This is **bold** text. This is a [link](htt
 
 This is ***bold and italic*** text
 
-<variable src="baz">
-this is some content
-</variable>
-
-This is a <variable src="foo"/> sentence that ***contains*** <variable src="bar">a variable</variable> within it. And here is {{another}} with some text after.
-And here is more {{variables}}% with newlines and {{punctuation}} and text.
-
 > This is a quote.
 ## Heading Two
 This is more text.
@@ -77,23 +71,25 @@ function Demo() {
    */
   const onMarkdownChange = useCallback((slateValue, markdown) => {
     localStorage.setItem('markdown-editor', markdown);
-    setSlateValue(slateValue);
-    setMarkdown(markdown);
+    // setSlateValue(slateValue);
+    // setMarkdown(markdown);
   }, []);
 
   /**
    * Called when the Slate Value changes
    */
   const onSlateValueChange = useCallback((slateValue, markdown) => {
     localStorage.setItem('slate-editor-value', slateValue.toJSON());
+    setSlateValue(slateValue);
+    setMarkdown(markdown);
   }, []);
 
   return (
     <div>
       <Segment>
     <Grid columns={2}>
       <Grid.Column>
-        <MarkdownAsInputEditor plugins={plugins} markdown={markdown} onChange={onMarkdownChange}/>
+        <MarkdownAsInputEditor readOnly={true} plugins={plugins} markdown={markdown} onChange={onMarkdownChange}/>
       </Grid.Column>
 
       <Grid.Column>

package.json

@@ -99,4 +99,4 @@
     "style-loader": "^0.23.1",
     "styled-components": "^4.3.2"
   }
-}
+}

src/MarkdownAsInputEditor/index.js

@@ -94,17 +94,17 @@ MarkdownAsInputEditor.propTypes = {
     onEnter: PropTypes.func,
     onKeyDown: PropTypes.func,
     onBeforeInput: PropTypes.func,
-    toMarkdown: PropTypes.func.isRequired,
-    fromMarkdown: PropTypes.func.isRequired,
-    fromHTML: PropTypes.func.isRequired,
+    toMarkdown: PropTypes.func,
+    fromMarkdown: PropTypes.func,
+    fromHTML: PropTypes.func,
     name: PropTypes.string.isRequired,
     tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   })),
 
   /**
    * Boolean to make editor read-only (uneditable) or not (editable)
    */
-  readOnly: PropTypes.boolean,
+  readOnly: PropTypes.bool,
 };
 
 /**

src/PluginManager.js

@@ -53,6 +53,24 @@ export default class PluginManager {
     return null;
   }
 
+  /**
+   * All plugins must return true for the plugin manager
+   * to be editable.
+   *
+   * @param {Value} value the Slate value
+   * @param {string} code the type of edit requested
+   */
+  isEditable(value, code) {
+    for (let n = 0; n < this.plugins.length; n += 1) {
+      const plugin = this.plugins[n];
+      if (plugin.isEditable && !plugin.isEditable(value, code)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
   /**
    * Render the toolbar buttons for all plugins
    *