feat: editor improvements and architectural grid prototype
Multiple feature additions and improvements across the application: - NextGen Editor: drag handles, smart paste, block actions - Structured views: Kanban and table layouts for notes - Architectural Grid: new brainstorming/agent interface prototype - Flashcards: SM-2 revision algorithm with AI generation - MCP server: robustness improvements - Graph/PDF chat: fix click propagation and copy behavior - Various UI/UX enhancements and bug fixes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Antigravity
225
memento-note/components/block-action-menu.tsx
Normal file
225
memento-note/components/block-action-menu.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useLanguage } from '@/lib/i18n'
|
||||
import type { Editor } from '@tiptap/core'
|
||||
import type { Node as PMNode } from '@tiptap/pm/model'
|
||||
import { copyTextToClipboard } from '@/lib/editor/copy-text-to-clipboard'
|
||||
import { ensureBlockReferenceId } from '@/lib/editor/block-reference-id'
|
||||
import { rememberBlockReference } from '@/lib/editor/parse-block-reference'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Trash2, Copy, Repeat, Link, ChevronRight,
|
||||
Heading1, Heading2, Heading3, List, ListOrdered,
|
||||
CheckSquare, Quote, CodeXml, Database,
|
||||
} from 'lucide-react'
|
||||
import { replaceBlockWithDatabase } from '@/components/tiptap-database-block-extension'
|
||||
|
||||
interface BlockActionMenuProps {
|
||||
editor: Editor
|
||||
onClose: () => void
|
||||
anchorRect: DOMRect
|
||||
blockPos: number
|
||||
blockNode: PMNode | null
|
||||
noteId?: string
|
||||
sourceNoteTitle?: string
|
||||
onBlockReferenceCopied?: (html: string) => void
|
||||
}
|
||||
|
||||
type TurnIntoType =
|
||||
| 'heading1' | 'heading2' | 'heading3'
|
||||
| 'bulletList' | 'orderedList' | 'taskList'
|
||||
| 'blockquote' | 'codeBlock' | 'database'
|
||||
|
||||
interface TurnIntoOption {
|
||||
id: TurnIntoType
|
||||
icon: typeof Heading1
|
||||
command?: (editor: Editor) => void
|
||||
isDatabase?: boolean
|
||||
}
|
||||
|
||||
const TURN_INTO_OPTIONS: TurnIntoOption[] = [
|
||||
{ id: 'heading1', icon: Heading1, command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },
|
||||
{ id: 'heading2', icon: Heading2, command: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },
|
||||
{ id: 'heading3', icon: Heading3, command: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },
|
||||
{ id: 'bulletList', icon: List, command: (e) => e.chain().focus().toggleBulletList().run() },
|
||||
{ id: 'orderedList', icon: ListOrdered, command: (e) => e.chain().focus().toggleOrderedList().run() },
|
||||
{ id: 'taskList', icon: CheckSquare, command: (e) => e.chain().focus().toggleTaskList().run() },
|
||||
{ id: 'blockquote', icon: Quote, command: (e) => e.chain().focus().toggleBlockquote().run() },
|
||||
{ id: 'codeBlock', icon: CodeXml, command: (e) => e.chain().focus().toggleCodeBlock().run() },
|
||||
{ id: 'database', icon: Database, isDatabase: true },
|
||||
]
|
||||
|
||||
function focusBlock(editor: Editor, blockPos: number) {
|
||||
const docSize = editor.state.doc.content.size
|
||||
const cursorPos = Math.min(blockPos + 1, docSize)
|
||||
editor.chain().focus().setTextSelection(cursorPos).run()
|
||||
}
|
||||
|
||||
function getBlockPlainContent(editor: Editor, blockPos: number, blockNode: PMNode | null): string {
|
||||
const node = blockNode ?? (blockPos >= 0 ? editor.state.doc.nodeAt(blockPos) : null)
|
||||
if (!node || blockPos < 0) return ''
|
||||
const from = blockPos + 1
|
||||
const to = blockPos + node.nodeSize - 1
|
||||
if (to > from) {
|
||||
return editor.state.doc.textBetween(from, to, '\n', '\0').trim()
|
||||
}
|
||||
return node.textContent?.trim() ?? ''
|
||||
}
|
||||
|
||||
export function BlockActionMenu({
|
||||
editor,
|
||||
onClose,
|
||||
anchorRect,
|
||||
blockPos,
|
||||
blockNode,
|
||||
noteId,
|
||||
sourceNoteTitle,
|
||||
onBlockReferenceCopied,
|
||||
}: BlockActionMenuProps) {
|
||||
const { t } = useLanguage()
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
const [showTurnInto, setShowTurnInto] = useState(false)
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
if (blockNode && blockPos >= 0) {
|
||||
editor.chain().focus().deleteRange({ from: blockPos, to: blockPos + blockNode.nodeSize }).run()
|
||||
}
|
||||
onClose()
|
||||
}, [editor, blockNode, blockPos, onClose])
|
||||
|
||||
const handleDuplicate = useCallback(() => {
|
||||
if (blockNode && blockPos >= 0) {
|
||||
const insertPos = blockPos + blockNode.nodeSize
|
||||
editor.view.dispatch(
|
||||
editor.state.tr.insert(insertPos, blockNode.copy())
|
||||
)
|
||||
editor.commands.focus()
|
||||
}
|
||||
onClose()
|
||||
}, [editor, blockNode, blockPos, onClose])
|
||||
|
||||
const handleCopyRef = useCallback(async () => {
|
||||
if (!noteId?.trim()) {
|
||||
toast.error(t('blockAction.copyRefNoNote'))
|
||||
onClose()
|
||||
return
|
||||
}
|
||||
|
||||
const blockId = ensureBlockReferenceId(editor, blockPos, blockNode)
|
||||
if (!blockId) {
|
||||
toast.error(t('blockAction.copyRefUnsupported'))
|
||||
onClose()
|
||||
return
|
||||
}
|
||||
|
||||
const html = editor.getHTML()
|
||||
const blockContent = getBlockPlainContent(editor, blockPos, blockNode)
|
||||
onBlockReferenceCopied?.(html)
|
||||
|
||||
const ref = `${window.location.origin}/home?openNote=${encodeURIComponent(noteId)}#block-${encodeURIComponent(blockId)}`
|
||||
const copied = await copyTextToClipboard(ref)
|
||||
if (copied) {
|
||||
rememberBlockReference(ref, { blockContent, sourceNoteTitle })
|
||||
toast.success(t('blockAction.copied'))
|
||||
} else {
|
||||
toast.error(t('blockAction.copyRefFailed'))
|
||||
}
|
||||
onClose()
|
||||
}, [blockNode, blockPos, editor, noteId, onBlockReferenceCopied, onClose, sourceNoteTitle, t])
|
||||
|
||||
const handleTurnInto = useCallback((option: TurnIntoOption) => {
|
||||
if (blockPos >= 0 && blockNode) {
|
||||
if (option.isDatabase) {
|
||||
replaceBlockWithDatabase(editor, blockPos, blockNode)
|
||||
} else if (option.command) {
|
||||
focusBlock(editor, blockPos)
|
||||
option.command(editor)
|
||||
}
|
||||
}
|
||||
setShowTurnInto(false)
|
||||
onClose()
|
||||
}, [editor, blockNode, blockPos, onClose])
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
}, [onClose])
|
||||
|
||||
const menuStyle: React.CSSProperties = {
|
||||
position: 'fixed',
|
||||
left: anchorRect.right + 6,
|
||||
top: anchorRect.top - 4,
|
||||
zIndex: 9999,
|
||||
}
|
||||
|
||||
if (Number(menuStyle.left) > window.innerWidth - 220) {
|
||||
menuStyle.left = anchorRect.left - 210
|
||||
}
|
||||
if (Number(menuStyle.top) + 300 > window.innerHeight) {
|
||||
menuStyle.top = window.innerHeight - 310
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div ref={menuRef} style={menuStyle} className="block-action-menu">
|
||||
<button type="button" className="block-action-item" onClick={handleDelete}>
|
||||
<Trash2 size={16} />
|
||||
<span>{t('blockAction.delete')}</span>
|
||||
</button>
|
||||
<button type="button" className="block-action-item" onClick={handleDuplicate}>
|
||||
<Copy size={16} />
|
||||
<span>{t('blockAction.duplicate')}</span>
|
||||
</button>
|
||||
|
||||
<div className="block-action-separator" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="block-action-item block-action-submenu-trigger"
|
||||
onClick={() => setShowTurnInto(!showTurnInto)}
|
||||
onMouseEnter={() => setShowTurnInto(true)}
|
||||
>
|
||||
<Repeat size={16} />
|
||||
<span>{t('blockAction.turnInto')}</span>
|
||||
<ChevronRight size={14} className="ml-auto" />
|
||||
</button>
|
||||
|
||||
{showTurnInto && (
|
||||
<div className="block-action-submenu">
|
||||
{TURN_INTO_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.id}
|
||||
type="button"
|
||||
className="block-action-item"
|
||||
onClick={() => handleTurnInto(opt)}
|
||||
>
|
||||
<opt.icon size={16} />
|
||||
<span>{t(`blockAction.turnInto_${opt.id}`)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="block-action-separator" />
|
||||
|
||||
<button type="button" className="block-action-item" onClick={() => { void handleCopyRef() }}>
|
||||
<Link size={16} />
|
||||
<span>{t('blockAction.copyRef')}</span>
|
||||
</button>
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user