style: styled from template

CHANGELOG.md

@@ -1,3 +0,0 @@
-## 0.1.0 - First Release
-* Every feature added
-* Every bug fixed

keymaps/wordcount.json

@@ -1,5 +1,5 @@
 {
   "body": {
-    "ctrl-alt-o": "wordcount:toggle"
+    "ctrl-shift-,": "commandpalette:toggle"
   }
 }

lib/commandpalette.js

@@ -0,0 +1,15 @@
+"use babel";
+
+import CommandPalette from "./components/palette";
+
+module.exports = {
+  activate() {
+    inkdrop.components.registerClass(CommandPalette);
+    inkdrop.layouts.addComponentToLayout("modal", "CommandPalette");
+  },
+
+  deactivate() {
+    inkdrop.layouts.removeComponentFromLayout("modal", "CommandPalette");
+    inkdrop.components.deleteClass(CommandPalette);
+  },
+};

lib/components/palette.js

@@ -0,0 +1,63 @@
+"use babel";
+
+import React, { useEffect, useCallback, useRef, useLayoutEffect } from "react";
+import { logger, useModal } from "inkdrop";
+
+const CommandPalette = (props) => {
+  const modal = useModal();
+  const { Dialog } = inkdrop.components.classes;
+
+  const searchRef = useRef(null);
+
+  const toggle = useCallback(() => {
+    modal.show();
+    logger.debug("Dialog was toggled!");
+  }, []);
+
+  useEffect(() => {
+    const sub = inkdrop.commands.add(document.body, {
+      "commandpalette:toggle": toggle,
+    });
+    return () => sub.dispose();
+  }, [toggle]);
+
+  useLayoutEffect(() => {
+    document
+      .getElementById("cpInput")
+      .addEventListener("visibilitychange", onVisibilityChange);
+
+    return () =>
+      document
+        .getElementById("cpInput")
+        .removeEventListener("visibilitychange", onVisibilityChange);
+  });
+
+  const onVisibilityChange = () => {
+    if (element.classList.contains("visible")) {
+      document.getElementById("cpInput").focus();
+    }
+  };
+
+  return (
+    <Dialog {...modal.state} onBackdropClick={modal.close}>
+      <Dialog.Content className="commandpalette">
+        <div role="dialog" aria-modal="true">
+          <div>
+            <div className="ui small input">
+              <input
+                type="text"
+                placeholder="Search files by name (append > for actions or ! for formatting)"
+                spellCheck="false"
+                className="cpInput"
+                id="cpInput"
+                ref={searchRef}
+              />
+            </div>
+          </div>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export default CommandPalette;

lib/wordcount-message-dialog.js

@@ -1,35 +0,0 @@
-'use babel';
-
-import React, { useEffect, useCallback } from 'react'
-import { logger, useModal } from 'inkdrop'
-
-const WordcountMessageDialog = (props) => {
-  const modal = useModal()
-  const { Dialog } = inkdrop.components.classes
-
-  const toggle = useCallback(() => {
-    modal.show()
-    logger.debug('Wordcount was toggled!')
-  }, [])
-
-  useEffect(() => {
-    const sub = inkdrop.commands.add(document.body, {
-      'wordcount:toggle': toggle
-    })
-    return () => sub.dispose()
-  }, [toggle])
-
-  return (
-    <Dialog {...modal.state} onBackdropClick={modal.close}>
-      <Dialog.Title>Wordcount</Dialog.Title>
-      <Dialog.Content>Wordcount was toggled!</Dialog.Content>
-      <Dialog.Actions>
-        <button className="ui button" onClick={modal.close}>
-          Close
-        </button>
-      </Dialog.Actions>
-    </Dialog>
-  )
-}
-
-export default WordcountMessageDialog

lib/wordcount.js

@@ -1,23 +0,0 @@
-'use babel';
-
-import WordcountMessageDialog from './wordcount-message-dialog';
-
-module.exports = {
-
-  activate() {
-    inkdrop.components.registerClass(WordcountMessageDialog);
-    inkdrop.layouts.addComponentToLayout(
-      'modal',
-      'WordcountMessageDialog'
-    )
-  },
-
-  deactivate() {
-    inkdrop.layouts.removeComponentFromLayout(
-      'modal',
-      'WordcountMessageDialog'
-    )
-    inkdrop.components.deleteClass(WordcountMessageDialog);
-  }
-
-};

menus/commandpalette.json

@@ -0,0 +1,18 @@
+{
+  "menu": [
+    {
+      "label": "Plugins",
+      "submenu": [
+        {
+          "label": "Command Palette",
+          "submenu": [
+            {
+              "label": "Show/Hide Command Palette",
+              "command": "commandpalette:toggle"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

menus/wordcount.json

@@ -1,26 +0,0 @@
-{
-  "context-menu": {
-    ".CodeMirror": [
-      {
-        "label": "Toggle wordcount",
-        "command": "wordcount:toggle"
-      }
-    ]
-  },
-  "menu": [
-    {
-      "label": "Plugins",
-      "submenu": [
-        {
-          "label": "wordcount",
-          "submenu": [
-            {
-              "label": "Toggle",
-              "command": "wordcount:toggle"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "command-palette",
-  "main": "./lib/wordcount",
+  "main": "./lib/commandpalette",
   "version": "0.0.1",
   "description": "A command palette for inkdrop",
   "keywords": [],

styles/palettemodal.less

@@ -0,0 +1,9 @@
+.commandpalette {
+  padding: 0rem !important ;
+  background-color: red;
+}
+
+.cpInput {
+  width: 400px;
+  background-color: var(--page-background) !important ;
+}

styles/wordcount.less

@@ -1,2 +0,0 @@
-.wordcount {
-}

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+