slash command adjustments including renaming to checklist

This commit is contained in:
2026-02-20 15:52:48 -06:00
parent e0cf9aa122
commit 98ff4d0a4f
4 changed files with 49 additions and 6 deletions
+40 -4
View File
@@ -3,7 +3,8 @@ import {
Heading1, Heading2, Heading3,
List, ListTodo, Type,
Code, Quote,
Image as ImageIcon, Minus
Image as ImageIcon, Minus,
Bold, Italic, Underline
} from "lucide-solid";
import { cn, convertImageToWebpFile } from "@/lib/utils";
import { activeTaskId, uploadTaskAttachment } from "@/store";
@@ -12,6 +13,7 @@ import { toast } from "solid-sonner";
export interface CommandItem {
title: string;
description: string;
aliases?: string[];
icon: any;
command: (props: { editor: any; range: any }) => void;
}
@@ -26,9 +28,37 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
editor.chain().focus().deleteRange(range).setNode("paragraph").run();
},
},
{
title: "Bold",
description: "Strong text. (**text**)",
aliases: ["b", "strong"],
icon: Bold,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).toggleBold().run();
},
},
{
title: "Italic",
description: "Emphasized text. (*text*)",
aliases: ["i", "emphasis"],
icon: Italic,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).toggleItalic().run();
},
},
{
title: "Underline",
description: "Underlined text.",
aliases: ["u"],
icon: Underline,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).toggleUnderline().run();
},
},
{
title: "Heading 1",
description: "Big section heading.",
aliases: ["h1"],
icon: Heading1,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
@@ -37,6 +67,7 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
{
title: "Heading 2",
description: "Medium section heading.",
aliases: ["h2"],
icon: Heading2,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
@@ -45,6 +76,7 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
{
title: "Heading 3",
description: "Small section heading.",
aliases: ["h3"],
icon: Heading3,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
@@ -59,8 +91,8 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
},
},
{
title: "Task List",
description: "Track tasks with a checklist.",
title: "Checklist",
description: "Insert a checklist.",
icon: ListTodo,
command: ({ editor, range }: { editor: any, range: any }) => {
editor.chain().focus().deleteRange(range).toggleTaskList().run();
@@ -138,7 +170,11 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
},
},
].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()));
].filter(item => {
const lowerQuery = query.toLowerCase();
return item.title.toLowerCase().startsWith(lowerQuery) ||
item.aliases?.some(alias => alias.toLowerCase().startsWith(lowerQuery));
});
};
export const SlashMenu: Component<{
+4 -1
View File
@@ -5,6 +5,7 @@ import Placeholder from "@tiptap/extension-placeholder";
import TaskList from "@tiptap/extension-task-list";
import TaskItem from "@tiptap/extension-task-item";
import Image from "@tiptap/extension-image";
import Underline from "@tiptap/extension-underline";
import { X } from "lucide-solid";
import { cn } from "@/lib/utils";
@@ -70,6 +71,7 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
class: "rounded-lg border border-border max-w-full h-auto",
},
}),
Underline,
MobileIndent,
],
// Use untrack so the editor doesn't re-initialize when props.content changes
@@ -89,7 +91,8 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
// Custom Task List Styling
"[&_ul[data-type='taskList']]:list-none [&_ul[data-type='taskList']]:p-0",
"[&_li[data-type='taskItem']]:flex [&_li[data-type='taskItem']]:items-start",
"[&_li[data-type='taskItem']>label]:mr-2 [&_li[data-type='taskItem']>label]:mt-0.5 [&_li[data-type='taskItem']>label]:select-none",
"[&_li[data-type='taskItem']>label]:mr-3 [&_li[data-type='taskItem']>label]:mt-1 [&_li[data-type='taskItem']>label]:select-none",
"[&_li[data-type='taskItem']>label>input]:w-5 [&_li[data-type='taskItem']>label>input]:h-5 [&_li[data-type='taskItem']>label>input]:cursor-pointer",
"[&_li[data-type='taskItem']>div]:flex-1 [&_li[data-type='taskItem']>div]:min-h-[1.5rem]",
props.class
),