- fix global css classes;

- fix console state title;
- remove custom svg components;
- add prettier;

example/package.json

@@ -19,15 +19,7 @@
     "eject": "react-scripts eject"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
 }

example/src/App.tsx

@@ -28,7 +28,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/[email protected].0</code>
+              <code>@zarv1k/[email protected].1</code>
             </pre>
           </a>
           <Editor

example/src/serviceWorker.ts

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
 type Config = {
@@ -29,7 +27,7 @@ export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(
-      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
+      (process as {env: {[key: string]: string}}).env.PUBLIC_URL,
       window.location.href
     );
     if (publicUrl.origin !== window.location.origin) {
@@ -128,9 +126,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zarv1k/slate-dev-tools",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "DevTools for SlateJS",
   "author": "zarv1k",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "prepare": "yarn run build",
     "predeploy": "cd example && yarn install && yarn run build",
     "deploy": "gh-pages -d example/build",
-    "clean": "rm -rf ./dist ./example/build"
+    "clean": "rm -rf ./dist ./example/build",
+    "prettify": "prettier 'src/**/*.{ts,tsx,scss,json}' 'example/src/**/*.{ts,tsx,scss,json}'"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
@@ -51,7 +52,9 @@
     "classnames": "^2.2.6",
     "cross-env": "^5.2.0",
     "gh-pages": "^2.0.1",
+    "husky": "^2.2.0",
     "immutable": "3.8.2",
+    "lint-staged": "^8.1.6",
     "prettier": "^1.17.0",
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
@@ -73,15 +76,14 @@
     "slate-react": "0.21.24",
     "typescript": "3.3.3"
   },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "slate",
-    "slate-react",
-    "dev-tools",
-    "hyperscript",
-    "hyperprint",
-    "slate-dev-tools"
-  ]
+  "files": ["dist"],
+  "keywords": ["slate", "slate-react", "dev-tools", "hyperscript", "hyperprint", "slate-dev-tools"],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,scss,json}": ["prettier --write", "git add"]
+  }
 }

src/DevTools/DevToolsPlugin.tsx

@@ -61,7 +61,12 @@ const DevToolsPlugin: DevToolsPluginCreator = (options: DevToolsPluginOptions =
       return (
         <div style={{position: 'relative'}}>
           {next()}
-          <SlateDebugger ref={debuggerRef} editor={editor} debugId={debugId} shouldRenderId={shouldRenderId} />
+          <SlateDebugger
+            ref={debuggerRef}
+            editor={editor}
+            debugId={debugId}
+            shouldRenderId={shouldRenderId}
+          />
         </div>
       );
     }

src/DevTools/PrismTheme.scss

@@ -0,0 +1,124 @@
+/**
+ * SlateDevTools theme for JavaScript, CSS and HTML
+ * Loosely based on okaidia theme by http://www.monokai.nl/
+ * @author zarv1k
+ */
+
+.slate-dev-tools {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: #e0e0e0;
+    background: none;
+    /*text-shadow: 0 1px rgba(0, 0, 0, 1);*/
+    font-family: monaco, Consolas, 'Lucida Console', monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+  }
+
+  :not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: #2a2f3a;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #969896;
+  }
+
+  .token.punctuation {
+    color: #f8f8f2;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #6fb3d2;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #b294bb;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a1c668;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #f8f8f2;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
+    color: #f0c674;
+  }
+
+  .token.keyword {
+    color: #66d9ef;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #fc6d24;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}

src/DevTools/Provider.tsx

@@ -60,7 +60,7 @@ class Provider extends React.Component<Props, SlateDevToolsContextValue> {
     const {...hyperprintOptions} = this.state.hyperprintOptions;
     delete editors[editorId];
     delete hyperprintOptions[editorId];
-    this.setState({activeId, editors, hyperprintOptions})
+    this.setState({activeId, editors, hyperprintOptions});
   };
 
   private changeInspect = (inspect: SlateDevToolsInspect) => {