Skip to content

Commit

Permalink
fix: fix slash command action not working
Browse files Browse the repository at this point in the history
  • Loading branch information
@malezjaa
malezjaa committed Jan 26, 2024
1 parent 6b4ac61 commit 82839c9
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 114 deletions.
125 changes: 18 additions & 107 deletions apps/docs/src/docs/components/editor.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,112 +22,23 @@ export default function Page() {

- Reference: [EditorProps](/docs/reference/editor-props)

<!-- export type EditorProps = {
/**
* The class name to use for the editor.
*/
className?: string;
/**
* Defines the editor's theme.
*/
theme?: "light" | "dark";
/**
* Show character count.
*/
showCharacterCount?: boolean;
/**
* The limit of characters.
*/
limit?: number;
/**
* Shows menu above the editor.
*/
menu?: boolean;
/**
* Items that will be displayed in bubble menu.
*/
bubbleMenuItems?:
| BubbleMenuItem[]
| {
/**
* Shows default bubble menu items.
*/
includeDefault?: boolean;
items?: BubbleMenuItem[];
};
/**
* Triggered when the editor is ready.
*/
onReady?: (editor: EddiesEditor) => void;
/**
* Triggered on every content change.
*/
onContentChange?: (editor: EddiesEditor) => void;
/**
* Content shown every time the editor is created.
*/
initialValue?: Content;
/**
* Extensions to add to the editor.
*/
extensions: Extensions;
/**
* The placeholder text when the editor is empty.
*/
placeholder?: PlaceholderOptions;
/**
* Disables the editor.
*/
isEditable?: boolean;
/**
* Auto focus settings
* @see https://tiptap.dev/docs/editor/api/editor#autofocus
*/
autofocus?: FocusPosition;
/**
* Custom keyboard shortcuts.
*/
keyboardShortcuts?: Record<string, KeyboardShortcutCommand>;
/**
* Editor props to pass to the editor.
*/
tiptapOptions?: Partial<TiptapEditorOptions>;
}
create table with prop name type and description
-->

## EditorOptions

| Prop | Type | Description |
| --------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------- |
| `className?` | `string` | The class name to use for the editor. |
| `theme?` | `"light" \| "dark"` | Defines the editor's theme. |
| `showCharacterCount?` | `boolean` | Show character count. |
| `limit?` | `number` | The limit of characters. |
| `menu?` | `boolean` | Shows menu above the editor. |
| `bubbleMenuItems?` | `BubbleMenuItem[] \| { includeDefault?: boolean; items?: BubbleMenuItem[]; }` | Items that will be displayed in bubble menu. |
| `onReady?` | `(editor: EddiesEditor) => void` | Triggered when the editor is ready. |
| `onContentChange?` | `(editor: EddiesEditor) => void` | Triggered on every content change. |
| `initialValue?` | `Content` | Content shown every time the editor is created. |
| `extensions` | `Extensions` | Extensions to add to the editor. |
| `placeholder?` | `PlaceholderOptions` | The placeholder text when the editor is empty. |
| `isEditable?` | `boolean` | Disables the editor. |
| `autofocus?` | `FocusPosition` | Auto focus settings |
| `keyboardShortcuts?` | `Record<string, KeyboardShortcutCommand>` | Custom keyboard shortcuts. |
| `tiptapOptions?` | `Partial<TiptapEditorOptions>` | Editor props to pass to the editor. |
| Prop | Type | Description |
| --------------------- | ----------------------------------------- | ----------------------------------------------- |
| `className?` | `string` | The class name to use for the editor. |
| `theme?` | `"light" \| "dark"` | Defines the editor's theme. |
| `showCharacterCount?` | `boolean` | Show character count. |
| `limit?` | `number` | The limit of characters. |
| `menu?` | `boolean` | Shows menu above the editor. |
| `bubbleMenuItems?` | `BubbleMenuItem[]` | Items that will be displayed in bubble menu. |
| `slashMenuCommands?` | `SlashCommandItem[]` | Slash menu commands. |
| `onReady?` | `(editor: EddiesEditor) => void` | Triggered when the editor is ready. |
| `onContentChange?` | `(editor: EddiesEditor) => void` | Triggered on every content change. |
| `initialValue?` | `Content` | Content shown every time the editor is created. |
| `extensions` | `Extensions` | Extensions to add to the editor. |
| `placeholder?` | `PlaceholderOptions` | The placeholder text when the editor is empty. |
| `isEditable?` | `boolean` | Disables the editor. |
| `autofocus?` | `FocusPosition` | Auto focus settings |
| `keyboardShortcuts?` | `Record<string, KeyboardShortcutCommand>` | Custom keyboard shortcuts. |
| `tiptapOptions?` | `Partial<TiptapEditorOptions>` | Editor props to pass to the editor. |
19 changes: 13 additions & 6 deletions packages/eddies/src/components/slash-command/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
ReactNode,
useRef,
useLayoutEffect,
useImperativeHandle,
} from "react";

interface CommandItemProps {
Expand Down Expand Up @@ -54,8 +53,20 @@ export const CommandMenu = React.forwardRef(
[command, editor, items]
);

React.useImperativeHandle(ref, () => ({
onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {
if (event.key === "Enter") {
selectItem(selectedIndex);

return true;
}

return false;
},
}));

useEffect(() => {
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
const navigationKeys = ["ArrowUp", "ArrowDown"];
const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) {
e.preventDefault();
Expand All @@ -67,10 +78,6 @@ export const CommandMenu = React.forwardRef(
setSelectedIndex((selectedIndex + 1) % items.length);
return true;
}
if (e.key === "Enter") {
selectItem(selectedIndex);
return true;
}
return false;
}
};
Expand Down
2 changes: 1 addition & 1 deletion pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 82839c9

Please sign in to comment.