{mentionables.length > 0 && (
{mentionables.map((m) => (
@@ -295,59 +249,40 @@ const ChatUserInput = forwardRef(
)}
-
- {/*
- There was two approach to make mentionable node copy and pasteable.
- 1. use RichTextPlugin and reset text format when paste
- - so I implemented NoFormatPlugin to reset text format when paste
- 2. use PlainTextPlugin and override paste command
- - PlainTextPlugin only pastes text, so we need to implement custom paste handler.
- - https://github.com/facebook/lexical/discussions/5112
- */}
-
+ {
+ if (initialSerializedEditorState) {
+ editor.setEditorState(
+ editor.parseEditorState(initialSerializedEditorState),
+ )
}
- ErrorBoundary={LexicalErrorBoundary}
- />
-
- {autoFocus && }
-
- {
- onChange(editorState.toJSON())
- }}
- />
-
- {
- evt.preventDefault()
- evt.stopPropagation()
- handleSubmit(useVaultSearch)
- }}
- />
-
-
-
-
-
+ }}
+ editorRef={editorRef}
+ contentEditableRef={contentEditableRef}
+ onChange={onChange}
+ onEnter={() => handleSubmit({ useVaultSearch: false })}
+ onFocus={onFocus}
+ onMentionNodeMutation={handleMentionNodeMutation}
+ autoFocus={autoFocus}
+ plugins={{
+ onEnter: {
+ onVaultChat: () => {
+ handleSubmit({ useVaultSearch: true })
+ },
+ },
+ templatePopover: {
+ anchorElement: containerRef.current,
+ },
+ }}
+ />
+
handleSubmit()} />
{
- handleSubmit(true)
+ handleSubmit({ useVaultSearch: true })
}}
/>
diff --git a/src/components/chat-view/chat-input/LexicalContentEditable.tsx b/src/components/chat-view/chat-input/LexicalContentEditable.tsx
new file mode 100644
index 0000000..b7947fe
--- /dev/null
+++ b/src/components/chat-view/chat-input/LexicalContentEditable.tsx
@@ -0,0 +1,146 @@
+import {
+ InitialConfigType,
+ InitialEditorStateType,
+ LexicalComposer,
+} from '@lexical/react/LexicalComposer'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { LexicalEditor, SerializedEditorState } from 'lexical'
+import { RefObject, useCallback, useEffect } from 'react'
+
+import { useApp } from '../../../contexts/app-context'
+import { fuzzySearch } from '../../../utils/fuzzy-search'
+
+import AutoLinkMentionPlugin from './plugins/mention/AutoLinkMentionPlugin'
+import { MentionNode } from './plugins/mention/MentionNode'
+import MentionPlugin from './plugins/mention/MentionPlugin'
+import NoFormatPlugin from './plugins/no-format/NoFormatPlugin'
+import OnEnterPlugin from './plugins/on-enter/OnEnterPlugin'
+import OnMutationPlugin, {
+ NodeMutations,
+} from './plugins/on-mutation/OnMutationPlugin'
+import CreateTemplatePopoverPlugin from './plugins/template/CreateTemplatePopoverPlugin'
+import TemplatePlugin from './plugins/template/TemplatePlugin'
+
+export type LexicalContentEditableProps = {
+ editorRef: RefObject
+ contentEditableRef: RefObject
+ onChange?: (content: SerializedEditorState) => void
+ onEnter?: (evt: KeyboardEvent) => void
+ onFocus?: () => void
+ onMentionNodeMutation?: (mutations: NodeMutations) => void
+ initialEditorState?: InitialEditorStateType
+ autoFocus?: boolean
+ plugins?: {
+ onEnter?: {
+ onVaultChat: () => void
+ }
+ templatePopover?: {
+ anchorElement: HTMLElement | null
+ }
+ }
+}
+
+export default function LexicalContentEditable({
+ editorRef,
+ contentEditableRef,
+ onChange,
+ onEnter,
+ onFocus,
+ onMentionNodeMutation,
+ initialEditorState,
+ autoFocus = false,
+ plugins,
+}: LexicalContentEditableProps) {
+ const app = useApp()
+
+ const initialConfig: InitialConfigType = {
+ namespace: 'LexicalContentEditable',
+ theme: {
+ root: 'smtcmp-lexical-content-editable-root',
+ paragraph: 'smtcmp-lexical-content-editable-paragraph',
+ },
+ nodes: [MentionNode],
+ editorState: initialEditorState,
+ onError: (error) => {
+ console.error(error)
+ },
+ }
+
+ const searchResultByQuery = useCallback(
+ (query: string) => fuzzySearch(app, query),
+ [app],
+ )
+
+ /*
+ * Using requestAnimationFrame for autoFocus instead of using editor.focus()
+ * due to known issues with editor.focus() when initialConfig.editorState is set
+ * See: https://github.com/facebook/lexical/issues/4460
+ */
+ useEffect(() => {
+ if (autoFocus) {
+ requestAnimationFrame(() => {
+ contentEditableRef.current?.focus()
+ })
+ }
+ }, [autoFocus, contentEditableRef])
+
+ return (
+
+ {/*
+ There was two approach to make mentionable node copy and pasteable.
+ 1. use RichTextPlugin and reset text format when paste
+ - so I implemented NoFormatPlugin to reset text format when paste
+ 2. use PlainTextPlugin and override paste command
+ - PlainTextPlugin only pastes text, so we need to implement custom paste handler.
+ - https://github.com/facebook/lexical/discussions/5112
+ */}
+
+ }
+ ErrorBoundary={LexicalErrorBoundary}
+ />
+
+
+ {
+ onChange?.(editorState.toJSON())
+ }}
+ />
+ {onEnter && (
+
+ )}
+ {
+ onMentionNodeMutation?.(mutations)
+ }}
+ />
+
+
+
+
+ {plugins?.templatePopover && (
+
+ )}
+
+ )
+}
diff --git a/src/components/chat-view/chat-input/ModelSelect.tsx b/src/components/chat-view/chat-input/ModelSelect.tsx
index 883e334..0c4be54 100644
--- a/src/components/chat-view/chat-input/ModelSelect.tsx
+++ b/src/components/chat-view/chat-input/ModelSelect.tsx
@@ -1,8 +1,9 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { useState } from 'react'
-import { CHAT_MODEL_OPTIONS } from 'src/constants'
-import { useSettings } from 'src/contexts/settings-context'
+
+import { CHAT_MODEL_OPTIONS } from '../../../constants'
+import { useSettings } from '../../../contexts/settings-context'
export function ModelSelect() {
const { settings, setSettings } = useSettings()
diff --git a/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx b/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx
deleted file mode 100644
index 714a990..0000000
--- a/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { useEffect } from 'react'
-
-export type AutoFocusPluginProps = {
- defaultSelection?: 'rootStart' | 'rootEnd'
-}
-
-export default function AutoFocusPlugin({
- defaultSelection,
-}: AutoFocusPluginProps) {
- const [editor] = useLexicalComposerContext()
-
- useEffect(() => {
- editor.focus(
- () => {
- const rootElement = editor.getRootElement()
- if (rootElement) {
- // requestAnimationFrame is required here for unknown reasons, possibly related to the Obsidian plugin environment.
- requestAnimationFrame(() => {
- rootElement.focus()
- })
- }
- },
- { defaultSelection },
- )
- }, [defaultSelection, editor])
-
- return null
-}
diff --git a/src/components/chat-view/chat-input/plugins/mention/MentionPlugin.tsx b/src/components/chat-view/chat-input/plugins/mention/MentionPlugin.tsx
index 603d023..a41693a 100644
--- a/src/components/chat-view/chat-input/plugins/mention/MentionPlugin.tsx
+++ b/src/components/chat-view/chat-input/plugins/mention/MentionPlugin.tsx
@@ -11,11 +11,13 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
import { $createTextNode, COMMAND_PRIORITY_NORMAL, TextNode } from 'lexical'
import { useCallback, useMemo, useState } from 'react'
import { createPortal } from 'react-dom'
-import { serializeMentionable } from 'src/utils/mentionable'
import { Mentionable } from '../../../../../types/mentionable'
import { SearchableMentionable } from '../../../../../utils/fuzzy-search'
-import { getMentionableName } from '../../../../../utils/mentionable'
+import {
+ getMentionableName,
+ serializeMentionable,
+} from '../../../../../utils/mentionable'
import { getMentionableIcon } from '../../utils/get-metionable-icon'
import { MenuOption, MenuTextMatch } from '../shared/LexicalMenu'
import {
diff --git a/src/components/chat-view/chat-input/plugins/on-enter/OnEnterPlugin.tsx b/src/components/chat-view/chat-input/plugins/on-enter/OnEnterPlugin.tsx
index 899fa08..8cfa78d 100644
--- a/src/components/chat-view/chat-input/plugins/on-enter/OnEnterPlugin.tsx
+++ b/src/components/chat-view/chat-input/plugins/on-enter/OnEnterPlugin.tsx
@@ -5,8 +5,10 @@ import { useEffect } from 'react'
export default function OnEnterPlugin({
onEnter,
+ onVaultChat,
}: {
- onEnter: (evt: KeyboardEvent, useVaultSearch?: boolean) => void
+ onEnter: (evt: KeyboardEvent) => void
+ onVaultChat?: () => void
}) {
const [editor] = useLexicalComposerContext()
@@ -14,14 +16,22 @@ export default function OnEnterPlugin({
const removeListener = editor.registerCommand(
KEY_ENTER_COMMAND,
(evt: KeyboardEvent) => {
+ if (
+ onVaultChat &&
+ evt.shiftKey &&
+ (Platform.isMacOS ? evt.metaKey : evt.ctrlKey)
+ ) {
+ evt.preventDefault()
+ evt.stopPropagation()
+ onVaultChat()
+ return true
+ }
if (evt.shiftKey) {
- if (Platform.isMacOS ? evt.metaKey : evt.ctrlKey) {
- onEnter(evt, true)
- return true
- }
return false
}
- onEnter(evt, false)
+ evt.preventDefault()
+ evt.stopPropagation()
+ onEnter(evt)
return true
},
COMMAND_PRIORITY_LOW,
@@ -30,7 +40,7 @@ export default function OnEnterPlugin({
return () => {
removeListener()
}
- }, [editor, onEnter])
+ }, [editor, onEnter, onVaultChat])
return null
}
diff --git a/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx b/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx
new file mode 100644
index 0000000..a36157e
--- /dev/null
+++ b/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx
@@ -0,0 +1,132 @@
+import { $generateJSONFromSelectedNodes } from '@lexical/clipboard'
+import { BaseSerializedNode } from '@lexical/clipboard/clipboard'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+ $getSelection,
+ COMMAND_PRIORITY_LOW,
+ SELECTION_CHANGE_COMMAND,
+} from 'lexical'
+import { CSSProperties, useCallback, useEffect, useRef, useState } from 'react'
+
+import CreateTemplateDialogContent from '../../../CreateTemplateDialog'
+
+export default function CreateTemplatePopoverPlugin({
+ anchorElement,
+ contentEditableElement,
+}: {
+ anchorElement: HTMLElement | null
+ contentEditableElement: HTMLElement | null
+}): JSX.Element | null {
+ const [editor] = useLexicalComposerContext()
+
+ const [popoverStyle, setPopoverStyle] = useState(null)
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+ const [isDialogOpen, setIsDialogOpen] = useState(false)
+ const [selectedSerializedNodes, setSelectedSerializedNodes] = useState<
+ BaseSerializedNode[] | null
+ >(null)
+
+ const popoverRef = useRef(null)
+
+ const getSelectedSerializedNodes = useCallback(():
+ | BaseSerializedNode[]
+ | null => {
+ if (!editor) return null
+ let selectedNodes: BaseSerializedNode[] | null = null
+ editor.update(() => {
+ const selection = $getSelection()
+ if (!selection) return
+ selectedNodes = $generateJSONFromSelectedNodes(editor, selection).nodes
+ if (selectedNodes.length === 0) return null
+ })
+ return selectedNodes
+ }, [editor])
+
+ const updatePopoverPosition = useCallback(() => {
+ if (!anchorElement || !contentEditableElement) return
+ const nativeSelection = document.getSelection()
+ const range = nativeSelection?.getRangeAt(0)
+ if (!range || range.collapsed) {
+ setIsPopoverOpen(false)
+ return
+ }
+ if (!contentEditableElement.contains(range.commonAncestorContainer)) {
+ setIsPopoverOpen(false)
+ return
+ }
+ const rects = Array.from(range.getClientRects())
+ if (rects.length === 0) {
+ setIsPopoverOpen(false)
+ return
+ }
+ const anchorRect = anchorElement.getBoundingClientRect()
+ const idealLeft = rects[rects.length - 1].right - anchorRect.left
+ const paddingX = 8
+ const paddingY = 4
+ const minLeft = (popoverRef.current?.offsetWidth ?? 0) + paddingX
+ const finalLeft = Math.max(minLeft, idealLeft)
+ setPopoverStyle({
+ top: rects[rects.length - 1].bottom - anchorRect.top + paddingY,
+ left: finalLeft,
+ transform: 'translate(-100%, 0)',
+ })
+ setIsPopoverOpen(true)
+ }, [anchorElement, contentEditableElement])
+
+ useEffect(() => {
+ const removeSelectionChangeListener = editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ () => {
+ updatePopoverPosition()
+ return false
+ },
+ COMMAND_PRIORITY_LOW,
+ )
+ return () => {
+ removeSelectionChangeListener()
+ }
+ }, [editor, updatePopoverPosition])
+
+ useEffect(() => {
+ if (!contentEditableElement) return
+ const handleScroll = () => {
+ updatePopoverPosition()
+ }
+ contentEditableElement.addEventListener('scroll', handleScroll)
+ return () => {
+ contentEditableElement.removeEventListener('scroll', handleScroll)
+ }
+ }, [contentEditableElement, updatePopoverPosition])
+
+ return (
+ {
+ if (open) {
+ setSelectedSerializedNodes(getSelectedSerializedNodes())
+ }
+ setIsDialogOpen(open)
+ setIsPopoverOpen(false)
+ }}
+ >
+
+
+
+ setIsDialogOpen(false)}
+ />
+
+ )
+}
diff --git a/src/components/chat-view/chat-input/plugins/template/TemplatePlugin.tsx b/src/components/chat-view/chat-input/plugins/template/TemplatePlugin.tsx
new file mode 100644
index 0000000..1f6eb38
--- /dev/null
+++ b/src/components/chat-view/chat-input/plugins/template/TemplatePlugin.tsx
@@ -0,0 +1,179 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import clsx from 'clsx'
+import {
+ $parseSerializedNode,
+ COMMAND_PRIORITY_NORMAL,
+ TextNode,
+} from 'lexical'
+import { Trash2 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { useDatabase } from '../../../../../contexts/database-context'
+import { SelectTemplate } from '../../../../../database/schema'
+import { MenuOption } from '../shared/LexicalMenu'
+import {
+ LexicalTypeaheadMenuPlugin,
+ useBasicTypeaheadTriggerMatch,
+} from '../typeahead-menu/LexicalTypeaheadMenuPlugin'
+
+class TemplateTypeaheadOption extends MenuOption {
+ name: string
+ template: SelectTemplate
+
+ constructor(name: string, template: SelectTemplate) {
+ super(name)
+ this.name = name
+ this.template = template
+ }
+}
+
+function TemplateMenuItem({
+ index,
+ isSelected,
+ onClick,
+ onDelete,
+ onMouseEnter,
+ option,
+}: {
+ index: number
+ isSelected: boolean
+ onClick: () => void
+ onDelete: () => void
+ onMouseEnter: () => void
+ option: TemplateTypeaheadOption
+}) {
+ return (
+ option.setRefElement(el)}
+ role="option"
+ aria-selected={isSelected}
+ id={`typeahead-item-${index}`}
+ onMouseEnter={onMouseEnter}
+ onClick={onClick}
+ >
+
+
{option.name}
+
{
+ evt.stopPropagation()
+ evt.preventDefault()
+ onDelete()
+ }}
+ className="smtcmp-template-menu-item-delete"
+ >
+
+
+
+
+ {options.map((option, i: number) => (
+ {
+ setHighlightedIndex(i)
+ selectOptionAndCleanUp(option)
+ }}
+ onDelete={() => {
+ handleDelete(option)
+ }}
+ onMouseEnter={() => {
+ setHighlightedIndex(i)
+ }}
+ key={option.key}
+ option={option}
+ />
+ ))}
+
+