dishui 0.0.71 → 0.0.73

package/dist/components/pro/RichTextEditor/SlashMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlashMenu.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/SlashMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport type { Editor } from '@tiptap/react';\n\ninterface SlashMenuItem {\n  label: string;\n  icon: string;\n  description: string;\n  action: (editor: Editor) => void;\n  keywords?: string[];\n}\n\nconst SLASH_ITEMS: SlashMenuItem[] = [\n  { label: 'Text', icon: 'Aa', description: 'Plain text', keywords: ['paragraph', 'text', 'plain'],\n    action: (e) => e.chain().focus().setParagraph().run() },\n  { label: 'Heading 1', icon: 'H1', description: 'Large heading', keywords: ['h1', 'title'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },\n  { label: 'Heading 2', icon: 'H2', description: 'Medium heading', keywords: ['h2', 'subtitle'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },\n  { label: 'Heading 3', icon: 'H3', description: 'Small heading', keywords: ['h3'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },\n  { label: 'Bullet List', icon: '•', description: 'Unordered list', keywords: ['ul', 'bullet', 'unordered'],\n    action: (e) => e.chain().focus().toggleBulletList().run() },\n  { label: 'Numbered List', icon: '1.', description: 'Ordered list', keywords: ['ol', 'ordered', 'number'],\n    action: (e) => e.chain().focus().toggleOrderedList().run() },\n  { label: 'Task List', icon: '☑', description: 'To-do list', keywords: ['todo', 'checkbox', 'task'],\n    action: (e) => e.chain().focus().toggleTaskList().run() },\n  { label: 'Blockquote', icon: '\"', description: 'Quote block', keywords: ['quote', 'blockquote'],\n    action: (e) => e.chain().focus().toggleBlockquote().run() },\n  { label: 'Code Block', icon: '</>', description: 'Code snippet', keywords: ['code', 'pre', 'snippet'],\n    action: (e) => e.chain().focus().toggleNode('codeBlock', 'paragraph').run() },\n  { label: 'Divider', icon: '—', description: 'Horizontal rule', keywords: ['hr', 'divider', 'separator', 'line'],\n    action: (e) => e.chain().focus().setHorizontalRule().run() },\n  { label: 'Table', icon: '⊞', description: 'Insert 3×3 table', keywords: ['table', 'grid'],\n    action: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },\n  { label: 'Image', icon: '🖼', description: 'Insert image by URL', keywords: ['image', 'picture', 'photo'],\n    action: (e) => {\n      const url = window.prompt('Image URL:');\n      if (url) e.chain().focus().setImage({ src: url }).run();\n    }},\n];\n\ninterface SlashMenuProps {\n  editor: Editor;\n}\n\nconst SlashMenu: React.FC<SlashMenuProps> = ({ editor }) => {\n  const [visible, setVisible] = useState(false);\n  const [query, setQuery] = useState('');\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const [selected, setSelected] = useState(0);\n  const [slashPos, setSlashPos] = useState<number | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const filtered = query\n    ? SLASH_ITEMS.filter((item) => {\n        const q = query.toLowerCase();\n        return item.label.toLowerCase().includes(q)\n          || item.description.toLowerCase().includes(q)\n          || item.keywords?.some((k) => k.includes(q));\n      })\n    : SLASH_ITEMS;\n\n  const close = useCallback(() => {\n    setVisible(false);\n    setQuery('');\n    setSlashPos(null);\n    setSelected(0);\n  }, []);\n\n  const executeItem = useCallback((item: SlashMenuItem) => {\n    if (slashPos !== null) {\n      const { from } = editor.state.selection;\n      editor.chain().focus().deleteRange({ from: slashPos, to: from }).run();\n    }\n    item.action(editor);\n    close();\n  }, [editor, slashPos, close]);\n\n  useEffect(() => {\n    const handleUpdate = () => {\n      const { $from } = editor.state.selection;\n      const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);\n      const slashMatch = /\\/([a-zA-Z0-9]*)$/.exec(textBefore);\n\n      if (slashMatch) {\n        const start = $from.start() + slashMatch.index;\n        setSlashPos(start);\n        setQuery(slashMatch[1]);\n        setSelected(0);\n\n        const coords = editor.view.coordsAtPos($from.pos);\n        const editorRect = editor.view.dom.closest('.rte-editor-wrapper')?.getBoundingClientRect();\n        if (editorRect) {\n          setPos({\n            x: coords.left - editorRect.left,\n            y: coords.bottom - editorRect.top + 4,\n          });\n        }\n        setVisible(true);\n      } else {\n        if (visible) close();\n      }\n    };\n\n    editor.on('selectionUpdate', handleUpdate);\n    editor.on('update', handleUpdate);\n    return () => {\n      editor.off('selectionUpdate', handleUpdate);\n      editor.off('update', handleUpdate);\n    };\n  }, [editor, visible, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setSelected((s) => (s + 1) % filtered.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setSelected((s) => (s - 1 + filtered.length) % filtered.length);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        if (filtered[selected]) executeItem(filtered[selected]);\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [visible, filtered, selected, executeItem, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handler = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) close();\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [visible, close]);\n\n  if (!visible || filtered.length === 0) return null;\n\n  return (\n    <div ref={menuRef} className=\"rte-slash-menu\" style={{ left: pos.x, top: pos.y }}>\n      {filtered.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={`rte-slash-menu__item ${i === selected ? 'rte-slash-menu__item--active' : ''}`}\n          onClick={() => executeItem(item)}\n          onMouseEnter={() => setSelected(i)}\n        >\n          <span className=\"rte-slash-menu__icon\">{item.icon}</span>\n          <div className=\"rte-slash-menu__text\">\n            <span className=\"rte-slash-menu__label\">{item.label}</span>\n            <span className=\"rte-slash-menu__desc\">{item.description}</span>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default SlashMenu;\n"],"mappings":"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"}
+{"version":3,"file":"SlashMenu.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/SlashMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';\nimport type { Editor } from '@tiptap/react';\nimport type { ChainedCommands } from '@tiptap/core';\nimport { TextSelection } from '@tiptap/pm/state';\n\ninterface SlashMenuItem {\n  label: string;\n  icon: string;\n  description: string;\n  action: (chain: ChainedCommands) => ChainedCommands;\n  keywords?: string[];\n}\n\nconst SLASH_ITEMS: SlashMenuItem[] = [\n  { label: 'Text', icon: 'Aa', description: 'Plain text', keywords: ['paragraph', 'text', 'plain'],\n    action: (e) => e.setParagraph() },\n  { label: 'Heading 1', icon: 'H1', description: 'Large heading', keywords: ['h1', 'title'],\n    action: (e) => e.setHeading({ level: 1 }) },\n  { label: 'Heading 2', icon: 'H2', description: 'Medium heading', keywords: ['h2', 'subtitle'],\n    action: (e) => e.setHeading({ level: 2 }) },\n  { label: 'Heading 3', icon: 'H3', description: 'Small heading', keywords: ['h3'],\n    action: (e) => e.setHeading({ level: 3 }) },\n  { label: 'Bullet List', icon: '•', description: 'Unordered list', keywords: ['ul', 'bullet', 'unordered'],\n    action: (e) => e.toggleBulletList() },\n  { label: 'Numbered List', icon: '1.', description: 'Ordered list', keywords: ['ol', 'ordered', 'number'],\n    action: (e) => e.toggleOrderedList() },\n  { label: 'Task List', icon: '☑', description: 'To-do list', keywords: ['todo', 'checkbox', 'task'],\n    action: (e) => e.toggleTaskList() },\n  { label: 'Blockquote', icon: '\"', description: 'Quote block', keywords: ['quote', 'blockquote'],\n    action: (e) => e.toggleBlockquote() },\n  { label: 'Code Block', icon: '</>', description: 'Code snippet', keywords: ['code', 'pre', 'snippet'],\n    action: (e) => e.setNode('codeBlock') },\n  { label: 'Divider', icon: '—', description: 'Horizontal rule', keywords: ['hr', 'divider', 'separator', 'line'],\n    action: (e) => e.setHorizontalRule() },\n  { label: 'Table', icon: '⊞', description: 'Insert 3×3 table', keywords: ['table', 'grid'],\n    action: (e) => e.insertTable({ rows: 3, cols: 3, withHeaderRow: true }) },\n  { label: 'Image', icon: '🖼', description: 'Insert image by URL', keywords: ['image', 'picture', 'photo'],\n    action: (e) => e},\n];\n\ninterface SlashMenuProps {\n  editor: Editor;\n}\n\nconst SlashMenu: React.FC<SlashMenuProps> = ({ editor }) => {\n  const [visible, setVisible] = useState(false);\n  const [query, setQuery] = useState('');\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const [selected, setSelected] = useState(0);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const activeRange = useRef<{ from: number; to: number; query: string } | null>(null);\n  const dismissed = useRef<string | null>(null);\n  const composing = useRef(false);\n\n  const getRange = useCallback(() => {\n    if (editor.isDestroyed || !editor.isEditable || editor.view.composing || composing.current) return null;\n    const selection = editor.state.selection;\n    if (!(selection instanceof TextSelection) || !selection.empty || selection.$from.parent.type.spec.code || selection.$from.marks().some((mark) => mark.type.spec.code)) return null;\n    const { $from } = selection;\n    // textContent drops inline atoms and hard breaks, so its offsets are not document offsets.\n    const text = $from.parent.textBetween(0, $from.parentOffset, '\\n', (node) => node.type.name === 'hardBreak' ? '\\n' : '\\ufffc');\n    const match = /(?:^|\\s)\\/([^\\s/]*)$/.exec(text);\n    if (!match) return null;\n    return { from: $from.pos - match[1].length - 1, to: $from.pos, query: match[1] };\n  }, [editor]);\n\n  const filtered = query\n    ? SLASH_ITEMS.filter((item) => {\n        const q = query.toLowerCase();\n        return item.label.toLowerCase().includes(q)\n          || item.description.toLowerCase().includes(q)\n          || item.keywords?.some((k) => k.includes(q));\n      })\n    : SLASH_ITEMS;\n\n  const close = useCallback(() => {\n    setVisible(false);\n    setQuery('');\n    const range = activeRange.current;\n    if (range) dismissed.current = `${range.from}:${range.to}:${range.query}`;\n    activeRange.current = null;\n    setSelected(0);\n  }, []);\n\n  const executeItem = useCallback((item: SlashMenuItem) => {\n    const range = getRange();\n    const active = activeRange.current;\n    if (!range || !active || range.from !== active.from || range.to !== active.to || range.query !== active.query) {\n      close();\n      return;\n    }\n    const url = item.label === 'Image' ? window.prompt('Image URL:')?.trim() : undefined;\n    if (item.label === 'Image' && !url) { close(); return; }\n    close();\n    // Delete the trigger and insert/convert in one transaction (one undo step).\n    const chain = editor.chain().focus().deleteRange(range);\n    (url ? chain.setImage({ src: url }) : item.action(chain)).run();\n  }, [editor, getRange, close]);\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const handleUpdate = () => {\n      const range = editor.isFocused ? getRange() : null;\n      if (!range) {\n        activeRange.current = null;\n        dismissed.current = null;\n        setVisible(false);\n        return;\n      }\n      if (dismissed.current === `${range.from}:${range.to}:${range.query}`) return;\n      if (activeRange.current?.query !== range.query || activeRange.current?.from !== range.from) setSelected(0);\n      activeRange.current = range;\n      setQuery(range.query);\n      setVisible(true);\n    };\n    const start = () => { composing.current = true; close(); };\n    const end = () => {\n      composing.current = false;\n      dismissed.current = null;\n      timer = setTimeout(handleUpdate, 0);\n    };\n    const dom = editor.view.dom;\n    editor.on('transaction', handleUpdate);\n    editor.on('blur', close);\n    dom.addEventListener('compositionstart', start);\n    dom.addEventListener('compositionend', end);\n    return () => {\n      clearTimeout(timer);\n      editor.off('transaction', handleUpdate);\n      editor.off('blur', close);\n      dom.removeEventListener('compositionstart', start);\n      dom.removeEventListener('compositionend', end);\n    };\n  }, [editor, getRange, close]);\n\n  useLayoutEffect(() => {\n    if (!visible || !filtered.length) return;\n    const wrapper = editor.view.dom.closest('.rte-editor-wrapper') as HTMLElement | null;\n    const menu = menuRef.current;\n    if (!wrapper || !menu) return;\n    const place = () => {\n      const range = getRange();\n      if (!range) { close(); return; }\n      const coords = editor.view.coordsAtPos(range.to);\n      const rect = wrapper.getBoundingClientRect();\n      const left = Math.max(8, rect.left + wrapper.clientLeft);\n      const right = Math.min(window.innerWidth - 8, rect.right);\n      const top = Math.max(8, rect.top + wrapper.clientTop);\n      const bottom = Math.min(window.innerHeight - 8, rect.bottom);\n      if (coords.bottom < top || coords.top > bottom) { close(); return; }\n      menu.style.minWidth = '0';\n      menu.style.width = `${Math.max(0, Math.min(280, right - left))}px`;\n      const below = bottom - coords.bottom - 4;\n      const above = coords.top - top - 4;\n      const flip = below < Math.min(300, menu.scrollHeight) && above > below;\n      menu.style.maxHeight = `${Math.max(0, Math.min(300, flip ? above : below))}px`;\n      const x = Math.max(left, Math.min(coords.left, right - menu.offsetWidth));\n      const y = flip ? coords.top - menu.offsetHeight - 4 : coords.bottom + 4;\n      setPos({ x: x - rect.left - wrapper.clientLeft + wrapper.scrollLeft,\n        y: y - rect.top - wrapper.clientTop + wrapper.scrollTop });\n    };\n    place();\n    window.addEventListener('scroll', place, true);\n    window.addEventListener('resize', place);\n    editor.on('transaction', place);\n    return () => {\n      window.removeEventListener('scroll', place, true);\n      window.removeEventListener('resize', place);\n      editor.off('transaction', place);\n    };\n  }, [editor, visible, filtered.length, getRange, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const menu = menuRef.current;\n    const item = menu?.children[selected] as HTMLElement | undefined;\n    if (!menu || !item) return;\n    if (item.offsetTop < menu.scrollTop) menu.scrollTop = item.offsetTop;\n    else if (item.offsetTop + item.offsetHeight > menu.scrollTop + menu.clientHeight) {\n      menu.scrollTop = item.offsetTop + item.offsetHeight - menu.clientHeight;\n    }\n  }, [selected, visible]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!editor.view.dom.contains(e.target as Node) || !editor.isFocused || e.isComposing || e.keyCode === 229 || editor.view.composing || composing.current || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;\n      if (!filtered.length && e.key !== 'Escape') return;\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) e.stopImmediatePropagation();\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setSelected((s) => (s + 1) % filtered.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setSelected((s) => (s - 1 + filtered.length) % filtered.length);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        if (filtered[selected]) executeItem(filtered[selected]);\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [editor, visible, filtered, selected, executeItem, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handler = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) close();\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [visible, close]);\n\n  if (!visible || filtered.length === 0) return null;\n\n  return (\n    <div ref={menuRef} className=\"rte-slash-menu\" role=\"menu\" aria-label=\"Insert block\" style={{ left: pos.x, top: pos.y }} onMouseDown={(e) => e.preventDefault()}>\n      {filtered.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          role=\"menuitem\"\n          tabIndex={-1}\n          className={`rte-slash-menu__item ${i === selected ? 'rte-slash-menu__item--active' : ''}`}\n          onClick={() => executeItem(item)}\n          onMouseEnter={() => setSelected(i)}\n        >\n          <span className=\"rte-slash-menu__icon\">{item.icon}</span>\n          <div className=\"rte-slash-menu__text\">\n            <span className=\"rte-slash-menu__label\">{item.label}</span>\n            <span className=\"rte-slash-menu__desc\">{item.description}</span>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default SlashMenu;\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Editor } from '@tiptap/react';
+import { type Editor } from '@tiptap/react';
 import type { ToolbarSection, RichTextEditorLabels } from '../types';
 interface ToolbarProps {
     editor: Editor;