- Ask & search about anything, or be creative! -
- ); + return "Ask & search about anything, or be creative!"; } return ""; }; diff --git a/apps/desktop/src/daily/note-editor.tsx b/apps/desktop/src/daily/note-editor.tsx index 93267d2464..e1017d7cf3 100644 --- a/apps/desktop/src/daily/note-editor.tsx +++ b/apps/desktop/src/daily/note-editor.tsx @@ -1,9 +1,8 @@ import { useMemo } from "react"; -import { type JSONContent } from "@hypr/tiptap/editor"; -import NoteEditor from "@hypr/tiptap/editor"; import { parseJsonContent } from "@hypr/tiptap/shared"; +import { type JSONContent, NoteEditor } from "~/editor/session"; import * as main from "~/store/tinybase/store/main"; export function DailyNoteEditor({ date }: { date: string }) { diff --git a/apps/desktop/src/editor/chat/index.tsx b/apps/desktop/src/editor/chat/index.tsx new file mode 100644 index 0000000000..2ddd0b623a --- /dev/null +++ b/apps/desktop/src/editor/chat/index.tsx @@ -0,0 +1,283 @@ +import "prosemirror-view/style/prosemirror.css"; + +import { + ProseMirror, + ProseMirrorDoc, + reactKeys, + useEditorEffect, +} from "@handlewithcare/react-prosemirror"; +import { + chainCommands, + createParagraphNear, + deleteSelection, + exitCode, + joinBackward, + joinForward, + liftEmptyBlock, + selectAll, + selectNodeBackward, + selectNodeForward, + splitBlock, +} from "prosemirror-commands"; +import { history, redo, undo } from "prosemirror-history"; +import { keymap } from "prosemirror-keymap"; +import { Node as PMNode } from "prosemirror-model"; +import { EditorState, Plugin, PluginKey } from "prosemirror-state"; +import type { EditorView } from "prosemirror-view"; +import { forwardRef, useImperativeHandle, useMemo, useRef } from "react"; + +import "@hypr/tiptap/styles.css"; +import { cn } from "@hypr/utils"; + +import { AttachmentChipView, MentionNodeView } from "../node-views"; +import { type PlaceholderFunction, placeholderPlugin } from "../plugins"; +import { + type MentionConfig, + MentionSuggestion, + findMention, + mentionSkipPlugin, +} from "../widgets"; +import { chatSchema } from "./schema"; + +export { chatSchema }; +export type { MentionConfig }; + +export interface JSONContent { + type?: string; + attrs?: Record
+
+ );
+});
diff --git a/apps/desktop/src/editor/node-views/index.ts b/apps/desktop/src/editor/node-views/index.ts
new file mode 100644
index 0000000000..e1f06983bd
--- /dev/null
+++ b/apps/desktop/src/editor/node-views/index.ts
@@ -0,0 +1,8 @@
+export { attachmentNodeSpec, AttachmentChipView } from "./attachment-view";
+export { imageNodeSpec, ResizableImageView } from "./image-view";
+export { mentionNodeSpec, MentionNodeView } from "./mention-view";
+export {
+ taskItemNodeSpec,
+ taskListNodeSpec,
+ TaskItemView,
+} from "./task-item-view";
diff --git a/apps/desktop/src/editor/node-views/mention-view.tsx b/apps/desktop/src/editor/node-views/mention-view.tsx
new file mode 100644
index 0000000000..71a4e6cec4
--- /dev/null
+++ b/apps/desktop/src/editor/node-views/mention-view.tsx
@@ -0,0 +1,157 @@
+import { type NodeViewComponentProps } from "@handlewithcare/react-prosemirror";
+import { Facehash, stringHash } from "facehash";
+import {
+ Building2Icon,
+ MessageSquareIcon,
+ StickyNoteIcon,
+ UserIcon,
+} from "lucide-react";
+import type { NodeSpec } from "prosemirror-model";
+import { forwardRef, useCallback } from "react";
+
+import { cn } from "@hypr/utils";
+
+export const mentionNodeSpec: NodeSpec = {
+ group: "inline",
+ inline: true,
+ atom: true,
+ selectable: true,
+ attrs: {
+ id: { default: null },
+ type: { default: null },
+ label: { default: null },
+ },
+ parseDOM: [
+ {
+ tag: 'span.mention[data-mention="true"]',
+ getAttrs(dom) {
+ const el = dom as HTMLElement;
+ return {
+ id: el.getAttribute("data-id"),
+ type: el.getAttribute("data-type"),
+ label: el.getAttribute("data-label"),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ "span",
+ {
+ class: "mention",
+ "data-mention": "true",
+ "data-id": node.attrs.id,
+ "data-type": node.attrs.type,
+ "data-label": node.attrs.label,
+ },
+ node.attrs.label || "",
+ ];
+ },
+};
+
+const GLOBAL_NAVIGATE_FUNCTION = "__HYPR_NAVIGATE__";
+
+const FACEHASH_BG_CLASSES = [
+ "bg-amber-50",
+ "bg-rose-50",
+ "bg-violet-50",
+ "bg-blue-50",
+ "bg-teal-50",
+ "bg-green-50",
+ "bg-cyan-50",
+ "bg-fuchsia-50",
+ "bg-indigo-50",
+ "bg-yellow-50",
+];
+
+function getMentionFacehashBgClass(name: string) {
+ const hash = stringHash(name);
+ return FACEHASH_BG_CLASSES[hash % FACEHASH_BG_CLASSES.length];
+}
+
+function MentionAvatar({
+ id,
+ type,
+ label,
+}: {
+ id: string;
+ type: string;
+ label: string;
+}) {
+ if (type === "human") {
+ const facehashName = label || id || "?";
+ const bgClass = getMentionFacehashBgClass(facehashName);
+ return (
+
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ 
+ {showControls && (
+ <>
+
+
+
+
+
+ )}
+
+ {children}
+
+ {items.map((item, index) => (
+
+ ))}
+
,
+ document.body,
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Mention keyboard skip plugin
+// ---------------------------------------------------------------------------
+export function mentionSkipPlugin() {
+ const mentionName = "mention-@";
+
+ return new Plugin({
+ key: new PluginKey("mentionSkip"),
+ props: {
+ handleKeyDown(view, event) {
+ if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+ return false;
+ }
+
+ const { state } = view;
+ const { selection } = state;
+ const direction = event.key === "ArrowLeft" ? "left" : "right";
+
+ if (
+ selection instanceof NodeSelection &&
+ selection.node.type.name === mentionName
+ ) {
+ const pos = direction === "left" ? selection.from : selection.to;
+ view.dispatch(
+ state.tr.setSelection(TextSelection.create(state.doc, pos)),
+ );
+ return true;
+ }
+
+ if (!selection.empty) return false;
+
+ const $pos = selection.$head;
+ const node = direction === "left" ? $pos.nodeBefore : $pos.nodeAfter;
+
+ if (node && node.type.name === mentionName) {
+ const newPos =
+ direction === "left"
+ ? $pos.pos - node.nodeSize
+ : $pos.pos + node.nodeSize;
+ view.dispatch(
+ state.tr.setSelection(TextSelection.create(state.doc, newPos)),
+ );
+ return true;
+ }
+
+ return false;
+ },
+ },
+ });
+}
diff --git a/apps/desktop/src/editor/widgets/slash-command.tsx b/apps/desktop/src/editor/widgets/slash-command.tsx
new file mode 100644
index 0000000000..cdf5619de0
--- /dev/null
+++ b/apps/desktop/src/editor/widgets/slash-command.tsx
@@ -0,0 +1,393 @@
+import {
+ autoUpdate,
+ computePosition,
+ flip,
+ limitShift,
+ offset,
+ shift,
+ type VirtualElement,
+} from "@floating-ui/dom";
+import {
+ useEditorEffect,
+ useEditorEventCallback,
+ useEditorEventListener,
+ useEditorState,
+} from "@handlewithcare/react-prosemirror";
+import {
+ CodeIcon,
+ Heading1Icon,
+ Heading2Icon,
+ Heading3Icon,
+ ListIcon,
+ ListOrderedIcon,
+ ListTodoIcon,
+ MinusIcon,
+ QuoteIcon,
+ TextIcon,
+} from "lucide-react";
+import { setBlockType } from "prosemirror-commands";
+import { wrapInList } from "prosemirror-schema-list";
+import type { EditorState, Transaction } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "@hypr/utils";
+
+import { schema } from "../session/schema";
+
+// ---------------------------------------------------------------------------
+// Slash command items
+// ---------------------------------------------------------------------------
+export interface SlashCommandItem {
+ id: string;
+ label: string;
+ description: string;
+ icon: React.ComponentType<{ className?: string }>;
+ keywords: string[];
+ action: (view: EditorView, from: number, to: number) => void;
+}
+
+function clearSlashAndRun(
+ view: EditorView,
+ from: number,
+ to: number,
+ command: (
+ state: EditorState,
+ dispatch?: (tr: Transaction) => void,
+ ) => boolean,
+) {
+ const tr = view.state.tr.delete(from, to);
+ view.dispatch(tr);
+ command(view.state, (tr) => view.dispatch(tr));
+}
+
+const SLASH_COMMANDS: SlashCommandItem[] = [
+ {
+ id: "paragraph",
+ label: "Text",
+ description: "Plain text",
+ icon: TextIcon,
+ keywords: ["text", "paragraph", "plain"],
+ action(view, from, to) {
+ clearSlashAndRun(view, from, to, setBlockType(schema.nodes.paragraph));
+ },
+ },
+ {
+ id: "heading1",
+ label: "Heading 1",
+ description: "Large heading",
+ icon: Heading1Icon,
+ keywords: ["heading", "h1", "title", "large"],
+ action(view, from, to) {
+ clearSlashAndRun(
+ view,
+ from,
+ to,
+ setBlockType(schema.nodes.heading, { level: 1 }),
+ );
+ },
+ },
+ {
+ id: "heading2",
+ label: "Heading 2",
+ description: "Medium heading",
+ icon: Heading2Icon,
+ keywords: ["heading", "h2", "subtitle", "medium"],
+ action(view, from, to) {
+ clearSlashAndRun(
+ view,
+ from,
+ to,
+ setBlockType(schema.nodes.heading, { level: 2 }),
+ );
+ },
+ },
+ {
+ id: "heading3",
+ label: "Heading 3",
+ description: "Small heading",
+ icon: Heading3Icon,
+ keywords: ["heading", "h3", "small"],
+ action(view, from, to) {
+ clearSlashAndRun(
+ view,
+ from,
+ to,
+ setBlockType(schema.nodes.heading, { level: 3 }),
+ );
+ },
+ },
+ {
+ id: "bulletList",
+ label: "Bullet List",
+ description: "Unordered list",
+ icon: ListIcon,
+ keywords: ["bullet", "list", "unordered", "ul"],
+ action(view, from, to) {
+ clearSlashAndRun(view, from, to, wrapInList(schema.nodes.bulletList));
+ },
+ },
+ {
+ id: "orderedList",
+ label: "Numbered List",
+ description: "Ordered list",
+ icon: ListOrderedIcon,
+ keywords: ["numbered", "list", "ordered", "ol"],
+ action(view, from, to) {
+ clearSlashAndRun(view, from, to, wrapInList(schema.nodes.orderedList));
+ },
+ },
+ {
+ id: "taskList",
+ label: "Task List",
+ description: "List with checkboxes",
+ icon: ListTodoIcon,
+ keywords: ["task", "todo", "checkbox", "check"],
+ action(view, from, to) {
+ const tr = view.state.tr.delete(from, to);
+ view.dispatch(tr);
+ const taskItem = schema.nodes.taskItem.create(
+ { checked: false },
+ schema.nodes.paragraph.create(),
+ );
+ const taskList = schema.nodes.taskList.create(null, taskItem);
+ const { $from } = view.state.selection;
+ const blockStart = $from.start($from.depth) - 1;
+ const blockEnd = $from.end($from.depth) + 1;
+ view.dispatch(view.state.tr.replaceWith(blockStart, blockEnd, taskList));
+ },
+ },
+ {
+ id: "blockquote",
+ label: "Quote",
+ description: "Block quote",
+ icon: QuoteIcon,
+ keywords: ["quote", "blockquote", "callout"],
+ action(view, from, to) {
+ clearSlashAndRun(view, from, to, (state, dispatch) => {
+ const { $from, $to } = state.selection;
+ const range = $from.blockRange($to);
+ if (!range) return false;
+ if (dispatch) {
+ const tr = state.tr.wrap(range, [{ type: schema.nodes.blockquote }]);
+ dispatch(tr);
+ }
+ return true;
+ });
+ },
+ },
+ {
+ id: "codeBlock",
+ label: "Code Block",
+ description: "Code with syntax highlighting",
+ icon: CodeIcon,
+ keywords: ["code", "pre", "block", "snippet"],
+ action(view, from, to) {
+ clearSlashAndRun(view, from, to, setBlockType(schema.nodes.codeBlock));
+ },
+ },
+ {
+ id: "horizontalRule",
+ label: "Divider",
+ description: "Horizontal rule",
+ icon: MinusIcon,
+ keywords: ["divider", "horizontal", "rule", "line", "hr"],
+ action(view, from, to) {
+ const tr = view.state.tr.delete(from, to);
+ view.dispatch(tr);
+ const hr = schema.nodes.horizontalRule.create();
+ const paragraph = schema.nodes.paragraph.create();
+ const { $from } = view.state.selection;
+ const blockStart = $from.start($from.depth) - 1;
+ const blockEnd = $from.end($from.depth) + 1;
+ view.dispatch(
+ view.state.tr.replaceWith(blockStart, blockEnd, [hr, paragraph]),
+ );
+ },
+ },
+];
+
+// ---------------------------------------------------------------------------
+// Derive slash command state from EditorState (no plugin needed)
+// ---------------------------------------------------------------------------
+interface SlashCommandState {
+ query: string;
+ from: number;
+ to: number;
+}
+
+function findSlashCommand(state: EditorState): SlashCommandState | null {
+ const { $from } = state.selection;
+ if (!state.selection.empty) return null;
+
+ const textBefore = $from.parent.textBetween(
+ 0,
+ $from.parentOffset,
+ undefined,
+ "\ufffc",
+ );
+
+ const slashIndex = textBefore.lastIndexOf("/");
+ if (slashIndex === -1) return null;
+ if (slashIndex > 0 && !/\s/.test(textBefore[slashIndex - 1])) return null;
+
+ const query = textBefore.slice(slashIndex + 1);
+ if (/\s/.test(query)) return null;
+
+ const from = $from.start() + slashIndex;
+ const to = $from.pos;
+
+ return { query, from, to };
+}
+
+function filterCommands(query: string): SlashCommandItem[] {
+ if (!query) return SLASH_COMMANDS;
+ const q = query.toLowerCase();
+ return SLASH_COMMANDS.filter(
+ (cmd) =>
+ cmd.label.toLowerCase().includes(q) ||
+ cmd.keywords.some((kw) => kw.includes(q)),
+ );
+}
+
+// ---------------------------------------------------------------------------
+// React component
+// ---------------------------------------------------------------------------
+export function SlashCommandMenu() {
+ const popupRef = useRef
+
,
+ document.body,
+ );
+}
diff --git a/apps/desktop/src/session/components/caret-position-context.tsx b/apps/desktop/src/session/components/caret-position-context.tsx
index c2c8d68c33..ddc036c743 100644
--- a/apps/desktop/src/session/components/caret-position-context.tsx
+++ b/apps/desktop/src/session/components/caret-position-context.tsx
@@ -1,3 +1,4 @@
+import type { EditorView } from "prosemirror-view";
import {
createContext,
type ReactNode,
@@ -8,8 +9,6 @@ import {
useState,
} from "react";
-import type { TiptapEditor } from "@hypr/tiptap/editor";
-
interface CaretPositionContextValue {
isCaretNearBottom: boolean;
setCaretNearBottom: (value: boolean) => void;
@@ -45,11 +44,11 @@ export function useCaretPosition() {
const BOTTOM_THRESHOLD = 70;
export function useCaretNearBottom({
- editor,
+ view,
container,
enabled,
}: {
- editor: TiptapEditor | null;
+ view: EditorView | null;
container: HTMLDivElement | null;
enabled: boolean;
}) {
@@ -60,17 +59,16 @@ export function useCaretNearBottom({
return;
}
- if (!editor || !container || !enabled) {
+ if (!view || !container || !enabled) {
setCaretNearBottom(false);
return;
}
const checkCaretPosition = () => {
- if (!container || !editor.isFocused) {
+ if (!container || !view.hasFocus()) {
return;
}
- const { view } = editor;
const { from } = view.state.selection;
const coords = view.coordsAtPos(from);
@@ -81,20 +79,23 @@ export function useCaretNearBottom({
const handleBlur = () => setCaretNearBottom(false);
- editor.on("selectionUpdate", checkCaretPosition);
- editor.on("focus", checkCaretPosition);
- editor.on("blur", handleBlur);
+ const dom = view.dom;
+ dom.addEventListener("focus", checkCaretPosition);
+ dom.addEventListener("blur", handleBlur);
+ dom.addEventListener("keyup", checkCaretPosition);
+ dom.addEventListener("mouseup", checkCaretPosition);
container.addEventListener("scroll", checkCaretPosition);
window.addEventListener("resize", checkCaretPosition);
checkCaretPosition();
return () => {
- editor.off("selectionUpdate", checkCaretPosition);
- editor.off("focus", checkCaretPosition);
- editor.off("blur", handleBlur);
+ dom.removeEventListener("focus", checkCaretPosition);
+ dom.removeEventListener("blur", handleBlur);
+ dom.removeEventListener("keyup", checkCaretPosition);
+ dom.removeEventListener("mouseup", checkCaretPosition);
container.removeEventListener("scroll", checkCaretPosition);
window.removeEventListener("resize", checkCaretPosition);
};
- }, [editor, setCaretNearBottom, container, enabled]);
+ }, [view, setCaretNearBottom, container, enabled]);
}
diff --git a/apps/desktop/src/session/components/note-input/enhanced/editor.tsx b/apps/desktop/src/session/components/note-input/enhanced/editor.tsx
index 1569966c3d..8339e9fc29 100644
--- a/apps/desktop/src/session/components/note-input/enhanced/editor.tsx
+++ b/apps/desktop/src/session/components/note-input/enhanced/editor.tsx
@@ -1,17 +1,23 @@
import { forwardRef, useMemo } from "react";
-import { commands as openerCommands } from "@hypr/plugin-opener2";
-import { type JSONContent, TiptapEditor } from "@hypr/tiptap/editor";
-import NoteEditor from "@hypr/tiptap/editor";
import { parseJsonContent } from "@hypr/tiptap/shared";
+import {
+ NoteEditor,
+ type JSONContent,
+ type NoteEditorRef,
+} from "~/editor/session";
import { useSearchEngine } from "~/search/contexts/engine";
import { useImageUpload } from "~/shared/hooks/useImageUpload";
import * as main from "~/store/tinybase/store/main";
export const EnhancedEditor = forwardRef<
- { editor: TiptapEditor | null },
- { sessionId: string; enhancedNoteId: string; onNavigateToTitle?: () => void }
+ NoteEditorRef,
+ {
+ sessionId: string;
+ enhancedNoteId: string;
+ onNavigateToTitle?: (pixelWidth?: number) => void;
+ }
>(({ sessionId, enhancedNoteId, onNavigateToTitle }, ref) => {
const onImageUpload = useImageUpload(sessionId);
const content = main.UI.useCell(
@@ -88,15 +94,6 @@ export const EnhancedEditor = forwardRef<
const fileHandlerConfig = useMemo(() => ({ onImageUpload }), [onImageUpload]);
- const extensionOptions = useMemo(
- () => ({
- onLinkOpen: (url: string) => {
- void openerCommands.openUrl(url, null);
- },
- }),
- [],
- );
-
return (
+ Commands
+
+ {items.map((item, index) => (
+
+ ))}
+
-
)}
@@ -297,9 +223,9 @@ function useTabShortcuts({
currentTab,
handleTabChange,
}: {
- editorTabs: EditorView[];
- currentTab: EditorView;
- handleTabChange: (view: EditorView) => void;
+ editorTabs: TabEditorView[];
+ currentTab: TabEditorView;
+ handleTabChange: (view: TabEditorView) => void;
}) {
useHotkeys(
"alt+s",
diff --git a/apps/desktop/src/session/components/note-input/raw.tsx b/apps/desktop/src/session/components/note-input/raw.tsx
index 3b72a6dcee..70f9c22c51 100644
--- a/apps/desktop/src/session/components/note-input/raw.tsx
+++ b/apps/desktop/src/session/components/note-input/raw.tsx
@@ -1,23 +1,24 @@
import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
import { commands as analyticsCommands } from "@hypr/plugin-analytics";
-import { commands as openerCommands } from "@hypr/plugin-opener2";
-import NoteEditor, {
- type JSONContent,
- type TiptapEditor,
-} from "@hypr/tiptap/editor";
+import { parseJsonContent } from "@hypr/tiptap/shared";
+
import {
- parseJsonContent,
+ NoteEditor,
+ type JSONContent,
+ type NoteEditorRef,
type PlaceholderFunction,
-} from "@hypr/tiptap/shared";
-
+} from "~/editor/session";
import { useSearchEngine } from "~/search/contexts/engine";
import { useImageUpload } from "~/shared/hooks/useImageUpload";
import * as main from "~/store/tinybase/store/main";
export const RawEditor = forwardRef<
- { editor: TiptapEditor | null },
- { sessionId: string; onNavigateToTitle?: () => void }
+ NoteEditorRef,
+ {
+ sessionId: string;
+ onNavigateToTitle?: (pixelWidth?: number) => void;
+ }
>(({ sessionId, onNavigateToTitle }, ref) => {
const rawMd = main.UI.useCell("sessions", sessionId, "raw_md", main.STORE_ID);
const onImageUpload = useImageUpload(sessionId);
@@ -120,15 +121,6 @@ export const RawEditor = forwardRef<
const fileHandlerConfig = useMemo(() => ({ onImageUpload }), [onImageUpload]);
- const extensionOptions = useMemo(
- () => ({
- onLinkOpen: (url: string) => {
- void openerCommands.openUrl(url, null);
- },
- }),
- [],
- );
-
return (
- Take notes to guide Char's meeting notes.{" "} - - Press / for commands. - -
- ); + return "Take notes to guide Char's meeting notes. Press / for commands."; } return "Press / for commands."; diff --git a/apps/desktop/src/session/components/note-input/search-replace.ts b/apps/desktop/src/session/components/note-input/search-replace.ts deleted file mode 100644 index 7b0adfeb12..0000000000 --- a/apps/desktop/src/session/components/note-input/search-replace.ts +++ /dev/null @@ -1,312 +0,0 @@ -import type { TiptapEditor } from "@hypr/tiptap/editor"; - -import type { SearchReplaceDetail } from "./transcript/search/context"; - -import * as main from "~/store/tinybase/store/main"; -import { parseTranscriptWords, updateTranscriptWords } from "~/stt/utils"; - -type Store = NonNullable
void;
toggleReplace: () => void;
setReplaceQuery: (query: string) => void;
- replaceCurrent: () => void;
- replaceAll: () => void;
}
const SearchContext = createContext(null);
-export function useTranscriptSearch() {
+export function useSearch() {
return useContext(SearchContext);
}
-export interface SearchReplaceDetail {
- query: string;
- replacement: string;
- caseSensitive: boolean;
- wholeWord: boolean;
- all: boolean;
- matchIndex: number;
-}
-
interface SearchState {
isVisible: boolean;
query: string;
@@ -252,47 +241,6 @@ export function SearchProvider({ children }: { children: React.ReactNode }) {
});
}, [state.currentMatchIndex]);
- const replaceCurrent = useCallback(() => {
- if (!state.query || matchesRef.current.length === 0) return;
- const detail: SearchReplaceDetail = {
- query: state.query,
- replacement: state.replaceQuery,
- caseSensitive: state.caseSensitive,
- wholeWord: state.wholeWord,
- all: false,
- matchIndex: state.currentMatchIndex,
- };
- window.dispatchEvent(new CustomEvent("search-replace", { detail }));
- setTimeout(runSearch, 50);
- }, [
- state.query,
- state.replaceQuery,
- state.caseSensitive,
- state.wholeWord,
- state.currentMatchIndex,
- runSearch,
- ]);
-
- const replaceAllFn = useCallback(() => {
- if (!state.query) return;
- const detail: SearchReplaceDetail = {
- query: state.query,
- replacement: state.replaceQuery,
- caseSensitive: state.caseSensitive,
- wholeWord: state.wholeWord,
- all: true,
- matchIndex: 0,
- };
- window.dispatchEvent(new CustomEvent("search-replace", { detail }));
- setTimeout(runSearch, 50);
- }, [
- state.query,
- state.replaceQuery,
- state.caseSensitive,
- state.wholeWord,
- runSearch,
- ]);
-
useEffect(() => {
if (!state.isVisible || !state.activeMatchId) return;
@@ -328,10 +276,8 @@ export function SearchProvider({ children }: { children: React.ReactNode }) {
toggleReplace: () => dispatch({ type: "toggle_replace" }),
setReplaceQuery: (query: string) =>
dispatch({ type: "set_replace_query", query }),
- replaceCurrent,
- replaceAll: replaceAllFn,
}),
- [state, onNext, onPrev, replaceCurrent, replaceAllFn],
+ [state, onNext, onPrev],
);
return (
diff --git a/apps/desktop/src/session/components/note-input/transcript/search/matching.ts b/apps/desktop/src/session/components/note-input/search/matching.ts
similarity index 97%
rename from apps/desktop/src/session/components/note-input/transcript/search/matching.ts
rename to apps/desktop/src/session/components/note-input/search/matching.ts
index 9e1c7b6fc8..c16ab9c616 100644
--- a/apps/desktop/src/session/components/note-input/transcript/search/matching.ts
+++ b/apps/desktop/src/session/components/note-input/search/matching.ts
@@ -1,4 +1,7 @@
-import { isWordBoundary } from "../../search-replace";
+function isWordBoundary(text: string, index: number): boolean {
+ if (index < 0 || index >= text.length) return true;
+ return !/\w/.test(text[index]);
+}
export interface SearchOptions {
caseSensitive: boolean;
diff --git a/apps/desktop/src/session/components/note-input/transcript/renderer/word-span.tsx b/apps/desktop/src/session/components/note-input/transcript/renderer/word-span.tsx
index 076fd8de9b..7e2491b433 100644
--- a/apps/desktop/src/session/components/note-input/transcript/renderer/word-span.tsx
+++ b/apps/desktop/src/session/components/note-input/transcript/renderer/word-span.tsx
@@ -4,8 +4,8 @@ import { cn } from "@hypr/utils";
import type { HighlightSegment } from "./utils";
-import { useTranscriptSearch } from "~/session/components/note-input/transcript/search/context";
-import { createHighlightSegments } from "~/session/components/note-input/transcript/search/matching";
+import { useSearch } from "~/session/components/note-input/search/context";
+import { createHighlightSegments } from "~/session/components/note-input/search/matching";
import type { SegmentWord } from "~/stt/live-segment";
interface WordSpanProps {
@@ -50,7 +50,7 @@ export function WordSpan(props: WordSpanProps) {
}
function useTranscriptSearchHighlights(word: SegmentWord, displayText: string) {
- const search = useTranscriptSearch();
+ const search = useSearch();
const query = search?.query?.trim() ?? "";
const isVisible = Boolean(search?.isVisible);
const activeMatchId = search?.activeMatchId ?? null;
diff --git a/apps/desktop/src/session/components/note-input/use-search-sync.ts b/apps/desktop/src/session/components/note-input/use-search-sync.ts
deleted file mode 100644
index b69c4938d2..0000000000
--- a/apps/desktop/src/session/components/note-input/use-search-sync.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { type MutableRefObject, useEffect } from "react";
-
-import type { TiptapEditor } from "@hypr/tiptap/editor";
-
-import { handleEditorReplace, handleTranscriptReplace } from "./search-replace";
-import {
- type SearchReplaceDetail,
- useTranscriptSearch,
-} from "./transcript/search/context";
-
-import * as main from "~/store/tinybase/store/main";
-import { type EditorView } from "~/store/zustand/tabs/schema";
-
-export function useSearchSync({
- editor,
- currentTab,
- sessionId,
- editorRef,
-}: {
- editor: TiptapEditor | null;
- currentTab: EditorView;
- sessionId: string;
- editorRef: MutableRefObject<{ editor: TiptapEditor | null } | null>;
-}) {
- const search = useTranscriptSearch();
- const showSearchBar = search?.isVisible ?? false;
-
- useEffect(() => {
- search?.close();
- }, [currentTab]);
-
- useEffect(() => {
- if (!editor?.storage?.searchAndReplace) return;
-
- const isEditorTab =
- currentTab.type !== "transcript" && currentTab.type !== "attachments";
- const query = isEditorTab && search?.isVisible ? (search.query ?? "") : "";
-
- editor.storage.searchAndReplace.searchTerm = query;
- editor.storage.searchAndReplace.caseSensitive =
- search?.caseSensitive ?? false;
- editor.storage.searchAndReplace.resultIndex =
- search?.currentMatchIndex ?? 0;
-
- try {
- editor.view.dispatch(editor.state.tr);
- } catch {
- return;
- }
-
- if (query) {
- requestAnimationFrame(() => {
- const el = editor.view.dom.querySelector(".search-result-current");
- el?.scrollIntoView({ behavior: "smooth", block: "center" });
- });
- }
- }, [
- editor,
- currentTab.type,
- search?.isVisible,
- search?.query,
- search?.caseSensitive,
- search?.currentMatchIndex,
- ]);
-
- const store = main.UI.useStore(main.STORE_ID);
- const indexes = main.UI.useIndexes(main.STORE_ID);
- const checkpoints = main.UI.useCheckpoints(main.STORE_ID);
-
- useEffect(() => {
- const handler = (e: Event) => {
- const detail = (e as CustomEvent).detail;
- if (currentTab.type === "transcript") {
- handleTranscriptReplace(detail, store, indexes, checkpoints, sessionId);
- } else {
- handleEditorReplace(detail, editorRef.current?.editor ?? null);
- }
- };
- window.addEventListener("search-replace", handler);
- return () => window.removeEventListener("search-replace", handler);
- }, [currentTab, store, indexes, checkpoints, sessionId, editorRef]);
-
- return { showSearchBar };
-}
diff --git a/apps/desktop/src/session/components/session-preview-card.tsx b/apps/desktop/src/session/components/session-preview-card.tsx
index ef6b4051bb..7306dc849c 100644
--- a/apps/desktop/src/session/components/session-preview-card.tsx
+++ b/apps/desktop/src/session/components/session-preview-card.tsx
@@ -2,12 +2,7 @@ import { useMotionValue, useSpring, useTransform } from "motion/react";
import { useCallback, useMemo, useRef, useState } from "react";
import { defaultRehypePlugins, Streamdown } from "streamdown";
-import {
- isValidTiptapContent,
- json2md,
- parseImageTitleMetadata,
- streamdownComponents,
-} from "@hypr/tiptap/shared";
+import { isValidTiptapContent, json2md } from "@hypr/tiptap/shared";
import {
HoverCard,
HoverCardContent,
@@ -15,7 +10,9 @@ import {
} from "@hypr/ui/components/ui/hover-card";
import { cn, format, safeParseDate } from "@hypr/utils";
+import { parseImageMetadata } from "~/editor/node-views/image-view";
import { extractPlainText } from "~/search/contexts/engine/utils";
+import { streamdownComponents } from "~/session/components/streamdown";
import {
useEnhancedNote,
useEnhancedNotes,
@@ -45,12 +42,12 @@ const previewCardComponents: typeof streamdownComponents = {
),
img: (props) => {
- const { editorWidth, title } = parseImageTitleMetadata(props.title);
+ const { editorWidth, title } = parseImageMetadata(props.title);
return (
![]( "{title")
) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ {props.children as React.ReactNode}
+ ),
+ p: (props: React.HTMLAttributes) => (
+ ) => {
+ const { editorWidth, title } = parseImageMetadata(props.title);
+
+ return (
+ ![]( "{title}")
+ );
+ },
+} as const;
diff --git a/apps/desktop/src/session/components/title-input.tsx b/apps/desktop/src/session/components/title-input.tsx
index d1be19c8ca..c447e78d85 100644
--- a/apps/desktop/src/session/components/title-input.tsx
+++ b/apps/desktop/src/session/components/title-input.tsx
@@ -22,87 +22,110 @@ import * as main from "~/store/tinybase/store/main";
import { useLiveTitle } from "~/store/zustand/live-title";
import { type Tab } from "~/store/zustand/tabs";
+export interface TitleInputHandle {
+ focus: () => void;
+ focusAtEnd: () => void;
+ focusAtPixelWidth: (pixelWidth: number) => void;
+}
+
export const TitleInput = forwardRef<
- HTMLInputElement,
+ TitleInputHandle,
{
tab: Extract;
- onNavigateToEditor?: () => void;
+ onTransferContentToEditor?: (content: string) => void;
+ onFocusEditorAtStart?: () => void;
+ onFocusEditorAtPixelWidth?: (pixelWidth: number) => void;
onGenerateTitle?: () => void;
}
->(({ tab, onNavigateToEditor, onGenerateTitle }, ref) => {
- const {
- id: sessionId,
- state: { view },
- } = tab;
- const store = main.UI.useStore(main.STORE_ID);
- const isGenerating = useTitleGenerating(sessionId);
- const wasGenerating = usePrevious(isGenerating);
- const [showRevealAnimation, setShowRevealAnimation] = useState(false);
- const [generatedTitle, setGeneratedTitle] = useState(null);
-
- const editorId = view ? "active" : "inactive";
- const inputRef = useRef(null);
-
- useImperativeHandle(ref, () => inputRef.current!, []);
-
- useEffect(() => {
- if (wasGenerating && !isGenerating) {
- const title = store?.getCell("sessions", sessionId, "title") as
- | string
- | undefined;
- setGeneratedTitle(title ?? null);
- setShowRevealAnimation(true);
- const timer = setTimeout(() => {
- setShowRevealAnimation(false);
- }, 1000);
- return () => clearTimeout(timer);
+>(
+ (
+ {
+ tab,
+ onTransferContentToEditor,
+ onFocusEditorAtStart,
+ onFocusEditorAtPixelWidth,
+ onGenerateTitle,
+ },
+ ref,
+ ) => {
+ const {
+ id: sessionId,
+ state: { view },
+ } = tab;
+ const store = main.UI.useStore(main.STORE_ID);
+ const isGenerating = useTitleGenerating(sessionId);
+ const wasGenerating = usePrevious(isGenerating);
+ const [showRevealAnimation, setShowRevealAnimation] = useState(false);
+ const [generatedTitle, setGeneratedTitle] = useState(null);
+
+ const editorId = view ? "active" : "inactive";
+ const inputRef = useRef(null);
+
+ useImperativeHandle(ref, () => inputRef.current!, []);
+
+ useEffect(() => {
+ if (wasGenerating && !isGenerating) {
+ const title = store?.getCell("sessions", sessionId, "title") as
+ | string
+ | undefined;
+ setGeneratedTitle(title ?? null);
+ setShowRevealAnimation(true);
+ const timer = setTimeout(() => {
+ setShowRevealAnimation(false);
+ }, 1000);
+ return () => clearTimeout(timer);
+ }
+ }, [wasGenerating, isGenerating, store, sessionId]);
+
+ const getInitialTitle = useCallback(() => {
+ return (store?.getCell("sessions", sessionId, "title") as string) ?? "";
+ }, [store, sessionId]);
+
+ if (isGenerating) {
+ return (
+ ) => {
if (e.key === "ArrowUp") {
e.preventDefault();
@@ -210,31 +231,29 @@ const TitleInputInner = memo(
const beforeCursor = input.value.slice(0, cursorPos);
const afterCursor = input.value.slice(cursorPos);
+ setLocalTitle(beforeCursor);
setStoreTitle(beforeCursor);
clearLiveTitle(sessionId);
if (afterCursor) {
- setTimeout(() => {
- const event = new CustomEvent("title-content-transfer", {
- detail: { content: afterCursor },
- });
- window.dispatchEvent(event);
- }, 0);
+ setTimeout(() => onTransferContentToEditor?.(afterCursor), 0);
} else {
- setTimeout(() => {
- const event = new CustomEvent("title-move-to-editor-start");
- window.dispatchEvent(event);
- }, 0);
+ setTimeout(() => onFocusEditorAtStart?.(), 0);
}
-
- onNavigateToEditor?.();
} else if (e.key === "Tab") {
e.preventDefault();
- setTimeout(() => {
- const event = new CustomEvent("title-move-to-editor-start");
- window.dispatchEvent(event);
- }, 0);
- onNavigateToEditor?.();
+ setTimeout(() => onFocusEditorAtStart?.(), 0);
+ } else if (e.key === "ArrowRight") {
+ const input = internalRef.current;
+ if (!input) return;
+ const cursorPos = input.selectionStart ?? 0;
+ if (
+ cursorPos === input.value.length &&
+ input.selectionEnd === cursorPos
+ ) {
+ e.preventDefault();
+ setTimeout(() => onFocusEditorAtStart?.(), 0);
+ }
} else if (e.key === "ArrowDown") {
e.preventDefault();
const input = internalRef.current;
@@ -249,16 +268,8 @@ const TitleInputInner = memo(
const titleStyle = window.getComputedStyle(input);
ctx.font = `${titleStyle.fontWeight} ${titleStyle.fontSize} ${titleStyle.fontFamily}`;
const titleWidth = ctx.measureText(textBeforeCursor).width;
-
- setTimeout(() => {
- const event = new CustomEvent("title-move-to-editor-position", {
- detail: { pixelWidth: titleWidth },
- });
- window.dispatchEvent(event);
- }, 0);
+ setTimeout(() => onFocusEditorAtPixelWidth?.(titleWidth), 0);
}
-
- onNavigateToEditor?.();
}
};
diff --git a/apps/desktop/src/session/index.tsx b/apps/desktop/src/session/index.tsx
index b3980583be..02de67080d 100644
--- a/apps/desktop/src/session/index.tsx
+++ b/apps/desktop/src/session/index.tsx
@@ -10,12 +10,12 @@ import { cn } from "@hypr/utils";
import { CaretPositionProvider } from "./components/caret-position-context";
import { FloatingActionButton } from "./components/floating";
-import { NoteInput } from "./components/note-input";
-import { SearchProvider } from "./components/note-input/transcript/search/context";
+import { NoteInput, type NoteInputHandle } from "./components/note-input";
+import { SearchProvider } from "./components/note-input/search/context";
import { OuterHeader } from "./components/outer-header";
import { SessionPreviewCard } from "./components/session-preview-card";
import { useCurrentNoteTab, useHasTranscript } from "./components/shared";
-import { TitleInput } from "./components/title-input";
+import { TitleInput, type TitleInputHandle } from "./components/title-input";
import { useAutoEnhance } from "./hooks/useAutoEnhance";
import { useIsSessionEnhancing } from "./hooks/useEnhancedNotes";
import { getSessionTabStatus } from "./tab-visual-state";
@@ -199,10 +199,8 @@ function TabContentNoteInner({
tab: Extract;
showTimeline: boolean;
}) {
- const titleInputRef = React.useRef(null);
- const noteInputRef = React.useRef<{
- editor: import("@hypr/tiptap/editor").TiptapEditor | null;
- }>(null);
+ const titleInputRef = React.useRef(null);
+ const noteInputRef = React.useRef(null);
const currentView = useCurrentNoteTab(tab);
const { generateTitle } = useTitleGeneration(tab);
@@ -244,14 +242,29 @@ function TabContentNoteInner({
return () => clearTimeout(timer);
}, [showConsentBanner]);
- const focusTitle = React.useCallback(() => {
- titleInputRef.current?.focus();
+ const handleNavigateToTitle = React.useCallback((pixelWidth?: number) => {
+ if (pixelWidth !== undefined) {
+ titleInputRef.current?.focusAtPixelWidth(pixelWidth);
+ } else {
+ titleInputRef.current?.focusAtEnd();
+ }
+ }, []);
+
+ const handleTransferContentToEditor = React.useCallback((content: string) => {
+ noteInputRef.current?.insertAtStartAndFocus(content);
}, []);
- const focusEditor = React.useCallback(() => {
- noteInputRef.current?.editor?.commands.focus();
+ const handleFocusEditorAtStart = React.useCallback(() => {
+ noteInputRef.current?.focusAtStart();
}, []);
+ const handleFocusEditorAtPixelWidth = React.useCallback(
+ (pixelWidth: number) => {
+ noteInputRef.current?.focusAtPixelWidth(pixelWidth);
+ },
+ [],
+ );
+
return (
<>
@@ -275,7 +290,7 @@ function TabContentNoteInner({
+ {props.children as React.ReactNode} +
+ ), + h2: (props: React.HTMLAttributes+ {props.children as React.ReactNode} +
+ ), + h3: (props: React.HTMLAttributes+ {props.children as React.ReactNode} +
+ ), + h4: (props: React.HTMLAttributes+ {props.children as React.ReactNode} +
+ ), + h5: (props: React.HTMLAttributes+ {props.children as React.ReactNode} +
+ ), + h6: (props: React.HTMLAttributes+ {props.children as React.ReactNode} +
+ ), + ul: (props: React.HTMLAttributes-
+ {props.children as React.ReactNode}
+
-
+ {props.children as React.ReactNode}
+
{props.children as React.ReactNode}
+ ), + img: (props: React.ImgHTMLAttributes
+
+ Generating title...
+
+
+ );
}
- }, [wasGenerating, isGenerating, store, sessionId]);
-
- const getInitialTitle = useCallback(() => {
- return (store?.getCell("sessions", sessionId, "title") as string) ?? "";
- }, [store, sessionId]);
- if (isGenerating) {
- return (
-
-
- Generating title...
-
-
- );
- }
+ if (showRevealAnimation && generatedTitle) {
+ return (
+
+
+ {generatedTitle}
+
+
+ );
+ }
- if (showRevealAnimation && generatedTitle) {
return (
-
-
- {generatedTitle}
-
-
+