{
- if (event.key === "Enter" && selectedItemIndex !== -1) {
- const item = items[selectedItemIndex];
- handleItem(item);
+ if (event.key === "Enter" && selectedIndex !== -1) {
+ const { command } = filteredCommands[selectedIndex];
+ onCommandToExecute(command);
return;
}
@@ -140,10 +81,10 @@ const CommandPalette = ({
}
event.preventDefault();
- const activeIndexCandidate = ((selectedItemIndex + direction) % items.length);
- setSelectedItemIndex(
+ const activeIndexCandidate = ((selectedIndex + direction) % filteredCommands.length);
+ setSelectedIndex(
activeIndexCandidate < 0 && direction === -1
- ? items.length - 1
+ ? filteredCommands.length - 1
: activeIndexCandidate,
);
}}
@@ -155,34 +96,29 @@ const CommandPalette = ({
ref={inputRef}
onBlur={() => inputRef.current?.focus()}
onInput={(event) => {
- const newFilter = prepareFilter((event.target as HTMLInputElement).value);
- setFilter(newFilter);
+ setFilter((event.target as HTMLInputElement).value);
}}
autoComplete="off"
/>
- {items.length > 0 && (
+ {filteredCommands.length > 0 && (
- {items.map((name, index) => (
+ {filteredCommands.map((item, index) => (
handleItem(name)}
- onMouseEnter={() => setSelectedItemIndex(index)}
+ className={clsx("command-palette-list-item", index === selectedIndex && "active")}
+ onClick={() => onCommandToExecute(item.command)}
+ onMouseEnter={() => setSelectedIndex(index)}
>
- {(filter?.type === FilterType.CommandsByName)
- ? commands.find((command) => command.name === name)?.translation
- : name}
+ {item.title}
))}
)}
- {items.length === 0 && filter && (
+ {filteredCommands.length === 0 && (
- {filter.type === FilterType.CommandsByName && t("(No matching commands)")}
- {filter.type === FilterType.NotesByContent && t("(No matching notes)")}
- {filter.type === FilterType.NotesByName && t("(No matching notes)")}
+ {t("(No matching commands)")}
)}
diff --git a/src/notes/components/__tests__/CommandPalette.test.tsx b/src/notes/components/__tests__/CommandPalette.test.tsx
deleted file mode 100644
index 88a77583..00000000
--- a/src/notes/components/__tests__/CommandPalette.test.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { SidebarNote } from "notes/adapters";
-import {
- Filter, FilterType, prepareFilter, prepareItems,
-} from "../CommandPalette";
-
-describe("prepareFilter", () => {
- it("detects CommandsByName filter", () => {
- expect(prepareFilter(" > time ")).toEqual
({
- type: FilterType.CommandsByName,
- input: "time",
- });
-
- expect(prepareFilter(" > current time ")).toEqual({
- type: FilterType.CommandsByName,
- input: "current time",
- });
- });
-
- it("detects NotesByContent filter", () => {
- expect(prepareFilter(" ? muffins ")).toEqual({
- type: FilterType.NotesByContent,
- input: "muffins",
- });
-
- expect(prepareFilter(" ? best ever muffins ")).toEqual({
- type: FilterType.NotesByContent,
- input: "best ever muffins",
- });
- });
-
- it("detects NotesByName filter", () => {
- expect(prepareFilter(" TODO ")).toEqual({
- type: FilterType.NotesByName,
- input: "todo",
- });
- });
-});
-
-describe("prepareItems", () => {
- const createdTime = "CT"; // not relevant for the test
- const modifiedTime = "MT"; // not relevant for the test
-
- const notes: SidebarNote[] = [
- {
- name: "Clipboard",
- content: "",
- createdTime,
- modifiedTime,
- },
- {
- name: "Article",
- content: "This is an interesting article",
- createdTime,
- modifiedTime,
- },
- {
- name: "TODO",
- content: "buy milk, buy coffee",
- createdTime,
- modifiedTime,
- },
- ];
-
- const commands = [
- "Insert current Date",
- "Insert current Time",
- "Insert current Date and Time",
- ];
-
- it("returns notes by default", () => {
- const items = prepareItems(notes, commands, undefined);
- expect(items).toEqual([
- "Clipboard",
- "Article",
- "TODO",
- ]);
- });
-
- describe("CommandsByName filter", () => {
- it("returns commands that include input in their name", () => {
- const filter: Filter = { type: FilterType.CommandsByName, input: "date" };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual([
- "Insert current Date",
- "Insert current Date and Time",
- ]);
- });
-
- it("returns all commands when no input is provided", () => {
- const filter: Filter = { type: FilterType.CommandsByName, input: " " };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual(commands);
- });
- });
-
- describe("NotesByContent filter", () => {
- it("returns notes that include input in their content", () => {
- const filter: Filter = { type: FilterType.NotesByContent, input: "interesting" };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual([
- "Article",
- ]);
- });
-
- it("returns all notes when no input is provided", () => {
- const filter: Filter = { type: FilterType.NotesByContent, input: " " };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual([
- "Clipboard",
- "Article",
- "TODO",
- ]);
- });
- });
-
- describe("NotesByName filter", () => {
- it("returns notes that include input in their name", () => {
- const filter: Filter = { type: FilterType.NotesByName, input: "ar" };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual([
- "Clipboard",
- "Article",
- ]);
- });
-
- it("returns all notes when no input is provided", () => {
- const filter: Filter = { type: FilterType.NotesByName, input: " " };
- const items = prepareItems(notes, commands, filter);
- expect(items).toEqual([
- "Clipboard",
- "Article",
- "TODO",
- ]);
- });
- });
-});
diff --git a/src/options/KeyboardShortcuts.tsx b/src/options/KeyboardShortcuts.tsx
index c24407d1..b07bcaf2 100644
--- a/src/options/KeyboardShortcuts.tsx
+++ b/src/options/KeyboardShortcuts.tsx
@@ -40,14 +40,6 @@ const KeyboardShortcuts = ({ os }: KeyboardShortcutsProps): h.JSX.Element => (
{t("Shortcuts other.if enabled")}
)}
-
- {shortcut.description === "Command palette" && (
-
-
{t("Shortcuts descriptions.Command palette detail.line1")}
-
{t("Shortcuts descriptions.Command palette detail.line2", { symbol: ">" })}
-
{t("Shortcuts descriptions.Command palette detail.line3", { symbol: "?" })}
-
- )}
))}