enable/disable plugin and provider

README.md

@@ -81,38 +81,38 @@ npm install --save-dev @zarv1k/slate-dev-tools
 
 If you don't want to use `withDevTools()` HOC for `Editor` component, you can use `DevToolsPlugin()` slate plugin:
 
-```tsx
-import React from 'react';
-
-import {Value, ValueJSON} from 'slate';
-import {Editor} from 'slate-react';
-
-import {Provider, DevToolsPlugin} from '@zarv1k/slate-dev-tools';
-import '@zarv1k/slate-dev-tools/dist/SlateDevTools.css';
-
-
-const plugins = [DevToolsPlugin()];
-
-const App: React.FC = () => {
-  const [value, setValue] = React.useState(Value.fromJSON(valueJSON));
-  return (
-    <Provider>
-      <Editor
-        value={value}
-        placeholder="Slate is awesome"
-        onChange={({value}) => setValue(value)}
-        plugins={plugins}
-      />
-    </Provider>
-  );
-};
-
-export default App;
-``` 
+    ```tsx
+    import React from 'react';
+    
+    import {Value, ValueJSON} from 'slate';
+    import {Editor} from 'slate-react';
+    
+    import {Provider, DevToolsPlugin} from '@zarv1k/slate-dev-tools';
+    import '@zarv1k/slate-dev-tools/dist/SlateDevTools.css';
+    
+    
+    const plugins = [DevToolsPlugin()];
+    
+    const App: React.FC = () => {
+      const [value, setValue] = React.useState(Value.fromJSON(valueJSON));
+      return (
+        <Provider>
+          <Editor
+            value={value}
+            placeholder="Slate is awesome"
+            onChange={({value}) => setValue(value)}
+            plugins={plugins}
+          />
+        </Provider>
+      );
+    };
+    
+    export default App;
+    ``` 
 
 ## TODO:
  - [ ] document all available options;
- - [ ] add `enabled` option, disable by default for `NODE_ENV === 'production'`;
+ - [x] add `enabled` option, disable by default for `NODE_ENV === 'production'`;
  - [ ] add `prop-types` for vanilla JS users;
  - [ ] add all options available in `Value.toJSON(options)` as `DevToolsPluginOptions.valueToJSONOptions`;
  - [ ] move entire codebase of [`slate-hyperprint`](https://github.com/zarv1k/slate-hyperprint/tree/0.46.1-dev) dependency into slate core package `slate-hypescript` as a [printer](https://github.com/ianstormtaylor/slate/pull/1902#issuecomment-434852988);

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zarv1k/slate-dev-tools-example",
   "homepage": "https://zarv1k.github.io/slate-dev-tools",
-  "version": "0.0.0",
+  "version": "0.1.2",
   "license": "MIT",
   "private": true,
   "dependencies": {

example/src/App.css

@@ -20,6 +20,11 @@
 .App-link {
   color: #61dafb;
 }
+.App-version {
+  color: #61dafb;
+  font-size: small;
+  margin-bottom: 20px;
+}
 
 .App-editor {
   padding: 10px;

example/src/App.tsx

@@ -5,10 +5,12 @@ import {Editor as SlateReactEditor} from 'slate-react';
 import {Provider, withDevTools} from '@zarv1k/slate-dev-tools';
 import '@zarv1k/slate-dev-tools/dist/SlateDevTools.css';
 
-import doc from './default.json';
+import {version} from '../package.json';
 import logo from './logo.svg';
 import './App.css';
 
+import doc from './default.json';
+
 const defaultValue = (index: number, useLocalStorage = true): Value => {
   const value = localStorage.getItem(`@zarv1k/slate-dev-tools:editor${index}`);
   return Value.fromJSON(useLocalStorage && value ? JSON.parse(value) : doc);
@@ -28,7 +30,7 @@ const App: React.FC = () => {
           <img src={logo} className="App-logo" alt="logo" />
           <a className="App-link" href="https://github.com/zarv1k/slate-dev-tools">
             <pre>
-              <code>@zarv1k/slate-dev-tools@0.1.1</code>
+              <code>@zarv1k/slate-dev-tools</code>
             </pre>
           </a>
           <Editor
@@ -100,6 +102,9 @@ const App: React.FC = () => {
               Reset
             </button>
           </p>
+          <a className="App-version" href="https://www.npmjs.com/package/@zarv1k/slate-dev-tools">
+            v{version}
+          </a>
         </header>
       </div>
     </Provider>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zarv1k/slate-dev-tools",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "DevTools for SlateJS",
   "author": "zarv1k",
   "license": "MIT",

src/DevTools/DevToolsPlugin.tsx

@@ -1,21 +1,22 @@
 import {DevToolsPluginCreator, DevToolsPluginOptions} from './interface';
-import {Editor as SlateReactEditor} from 'slate-react';
+import {Editor as SlateReactEditor, EditorProps} from 'slate-react';
 import {Command, Editor} from 'slate';
-import {genKey} from './utils';
 import {QUERY_GET_EDITOR_ID, QUERY_GET_HYPERPRINT_OPTIONS} from './constants';
-import {EditorProps} from 'slate-react';
 import React from 'react';
 import SlateDebugger from './SlateDebugger';
+import defaults from './defaults';
 
-const DevToolsPlugin: DevToolsPluginCreator = (options: DevToolsPluginOptions = {}) => {
-  const {
-    generateId = genKey,
-    getIdCommand = QUERY_GET_EDITOR_ID,
-    hyperprintOptions = {},
-    shouldRenderId = true
-  } = options;
+const DevToolsPlugin: DevToolsPluginCreator = (options: DevToolsPluginOptions = defaults) => {
+  const {generateId, getIdCommand, hyperprintOptions, shouldRenderId, enabled} = {
+    ...defaults,
+    ...options
+  };
+
+  if (!enabled) {
+    return {};
+  }
 
-  const editorId = generateId();
+  const editorId = generateId!();
   const debuggerRef = React.createRef<SlateDebugger>();
 
   return {
@@ -54,9 +55,6 @@ const DevToolsPlugin: DevToolsPluginCreator = (options: DevToolsPluginOptions =
       return change;
     },
     renderEditor: (props: EditorProps, editor: Editor, next: () => any) => {
-      // if (!this.enabled) {
-      //   return props.children;
-      // }
       const debugId = editor.query(QUERY_GET_EDITOR_ID);
       return (
         <div style={{position: 'relative'}}>

src/DevTools/Provider.tsx

@@ -6,11 +6,14 @@ import SlateDevTools from './SlateDevTools';
 import {QUERY_GET_HYPERPRINT_OPTIONS, SlateDevToolsInspect} from './constants';
 
 interface Props {
+  enabled: boolean;
   localStorageKey: string | null;
 }
 
 class Provider extends React.Component<Props, SlateDevToolsContextValue> {
+  public static displayName = 'SlateDevToolsProvider';
   public static defaultProps: Partial<Props> = {
+    enabled: process.env.NODE_ENV === 'development',
     localStorageKey: '@zarv1k/slate-dev-tools'
   };
   constructor(props: Props) {
@@ -27,9 +30,13 @@ class Provider extends React.Component<Props, SlateDevToolsContextValue> {
     };
   }
   render() {
+    const {enabled, children} = this.props;
+    if (!enabled) {
+      return children;
+    }
     return (
       <SlateDevToolsContext.Provider value={this.state}>
-        {this.props.children}
+        {children}
         <SlateDevTools />
       </SlateDevToolsContext.Provider>
     );

src/DevTools/defaults.ts

@@ -0,0 +1,13 @@
+import {DevToolsPluginOptions} from './interface';
+import {genKey} from './utils';
+import {QUERY_GET_EDITOR_ID} from './constants';
+
+const defaults: Required<DevToolsPluginOptions> = {
+  enabled: process.env.NODE_ENV === 'development',
+  generateId: genKey,
+  getIdCommand: QUERY_GET_EDITOR_ID,
+  hyperprintOptions: {},
+  shouldRenderId: true
+};
+
+export default defaults;

src/DevTools/interface.ts

@@ -9,6 +9,7 @@ export interface DevToolsPluginCreator {
 }
 
 export interface DevToolsPluginOptions {
+  enabled?: boolean;
   getIdCommand?: string;
   generateId?: () => string;
   shouldRenderId?: boolean;
@@ -27,6 +28,5 @@ export interface SlateDevToolsContextValue {
   toggleRaw: () => void;
   hyperprintOptions: {[editorId: string]: HyperprintOptions};
   // TODO: implement following options
-  // enabled?: boolean;
   // toJSONOptions?: ValueToJSONOptions;
 }

src/DevTools/withDevTools.tsx

@@ -2,10 +2,17 @@ import {Editor as SlateReactEditor, EditorProps, Plugin} from 'slate-react';
 import * as React from 'react';
 import {DevToolsPluginOptions} from './interface';
 import DevToolsPlugin from './DevToolsPlugin';
+import defaults from './defaults';
 
-const withDevTools = (options: DevToolsPluginOptions = {}) => (
+const withDevTools = (options: DevToolsPluginOptions = defaults) => (
   editor: React.ComponentClass<EditorProps>
 ): React.ComponentClass<EditorProps> => {
+  const {enabled} = options;
+
+  if (!enabled) {
+    return editor;
+  }
+
   class Editor extends React.Component<EditorProps> {
     static displayName = `withDevTools(${editor.name})`;
     private readonly plugins: Plugin[];