add proper functioning around / command

apps/web/components/quick-note-card.tsx

@@ -188,15 +188,7 @@ export function QuickNoteCard({
 						className="w-full h-[120px] cursor-text text-left disabled:cursor-not-allowed disabled:opacity-50"
 						aria-label="Expand quick note"
 					>
-						<span className="flex h-full flex-col gap-3 pr-5">
-							<span
-								className={cn(
-									dmSansClassName(),
-									"text-[10px] font-semibold uppercase tracking-[0.18em] text-[#FF5B2E]",
-								)}
-							>
-								New quick note
-							</span>
+						<span className="flex h-full flex-col pr-5">
 							<span
 								className={cn(
 									dmSansClassName(),
@@ -204,7 +196,7 @@ export function QuickNoteCard({
 									!previewText && "text-[#737373]",
 								)}
 							>
-								{previewText ?? "Type / for shortcuts"}
+								{previewText ?? "Start writing..."}
 							</span>
 						</span>
 					</button>
@@ -318,16 +310,7 @@ export function QuickNoteCard({
 												"inset 1.421px 1.421px 4.263px 0 rgba(11, 15, 21, 0.4)",
 										}}
 									>
-										<header className="flex shrink-0 items-center justify-between gap-3 border-b border-[#202A36]/70 px-5 py-4 md:px-7">
-											<p
-												className={cn(
-													dmSansClassName(),
-													"text-[11px] font-semibold uppercase tracking-[0.2em] text-[#FF5B2E]",
-												)}
-											>
-												New quick note
-											</p>
-
+										<header className="flex shrink-0 justify-end border-b border-[#202A36]/70 px-5 py-4 md:px-7">
 											<div className="flex items-center gap-2">
 												<button
 													type="button"
@@ -355,6 +338,7 @@ export function QuickNoteCard({
 												onSubmit={handleSaveClick}
 												debounceMs={0}
 												autoFocus
+												placeholder="Start writing..."
 											/>
 										</div>
 

apps/web/components/text-editor/extensions.tsx

@@ -6,9 +6,13 @@ import TaskList from "@tiptap/extension-task-list"
 import TaskItem from "@tiptap/extension-task-item"
 import { cx } from "class-variance-authority"
 
-const placeholder = Placeholder.configure({
-	placeholder: 'Write, paste anything or type "/" for commands...',
-})
+const DEFAULT_PLACEHOLDER = 'Write, paste anything or type "/" for commands...'
+
+function createPlaceholder(placeholderText = DEFAULT_PLACEHOLDER) {
+	return Placeholder.configure({
+		placeholder: placeholderText,
+	})
+}
 
 const taskList = TaskList.configure({
 	HTMLAttributes: {
@@ -82,11 +86,15 @@ const starterKit = StarterKit.configure({
 	gapcursor: false,
 })
 
-export const defaultExtensions = [
-	starterKit,
-	placeholder,
-	link,
-	image,
-	taskList,
-	taskItem,
-]
+export function createDefaultExtensions(placeholderText?: string) {
+	return [
+		starterKit,
+		createPlaceholder(placeholderText),
+		link,
+		image,
+		taskList,
+		taskItem,
+	]
+}
+
+export const defaultExtensions = createDefaultExtensions()

apps/web/components/text-editor/index.tsx

@@ -4,32 +4,36 @@ import { useEditor, EditorContent } from "@tiptap/react"
 import { BubbleMenu } from "@tiptap/react/menus"
 import type { Editor } from "@tiptap/core"
 import { Markdown } from "@tiptap/markdown"
-import { useRef, useEffect, useCallback } from "react"
-import { defaultExtensions } from "./extensions"
+import { useRef, useEffect, useCallback, useMemo } from "react"
+import { createDefaultExtensions } from "./extensions"
 import { slashCommand } from "./suggestions"
 import { Bold, Italic, Code } from "lucide-react"
 import { useDebouncedCallback } from "use-debounce"
 import { cn } from "@lib/utils"
 
-const extensions = [...defaultExtensions, slashCommand, Markdown]
-
 export function TextEditor({
 	content: initialContent,
 	onContentChange,
 	onSubmit,
 	debounceMs = 500,
 	autoFocus = false,
+	placeholder,
 }: {
 	content: string | undefined
 	onContentChange: (content: string) => void
 	onSubmit: () => void
 	debounceMs?: number
 	autoFocus?: boolean
+	placeholder?: string
 }) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const editorRef = useRef<Editor | null>(null)
 	const onSubmitRef = useRef(onSubmit)
 	const hasUserEditedRef = useRef(false)
+	const extensions = useMemo(
+		() => [...createDefaultExtensions(placeholder), slashCommand, Markdown],
+		[placeholder],
+	)
 
 	useEffect(() => {
 		onSubmitRef.current = onSubmit

apps/web/components/text-editor/slash-command.tsx

@@ -111,7 +111,7 @@ function CommandMenu({
 	if (!mounted) return null
 
 	return createPortal(
-		<div ref={refs.setFloating} style={floatingStyles} className="z-50">
+		<div ref={refs.setFloating} style={floatingStyles} className="z-[120]">
 			<CommandList
 				items={items}
 				command={command}