diff --git a/src/renderer/src/EditorPane.tsx b/src/renderer/src/EditorPane.tsx
index 275261e..9acd5b0 100644
--- a/src/renderer/src/EditorPane.tsx
+++ b/src/renderer/src/EditorPane.tsx
@@ -1,5 +1,12 @@
import * as React from 'react'
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import {
+ defaultKeymap,
+ history,
+ historyKeymap,
+ indentWithTab,
+ redo,
+ undo
+} from '@codemirror/commands'
import { markdown } from '@codemirror/lang-markdown'
import { EditorState } from '@codemirror/state'
import {
@@ -13,6 +20,8 @@ import { applyMarkdownAction } from './markdown-actions'
export type MarkdownEditorHandle = {
applyAction: (id: string) => void | Promise
+ undo: () => boolean
+ redo: () => boolean
searchText: (query: string) => boolean
getView: () => EditorView | null
getScrollTop: () => number
@@ -86,6 +95,16 @@ export const EditorPane = React.forwardRef(
requestColor: requestColorRef.current
})
},
+ undo: (): boolean => {
+ const view = viewRef.current
+ if (!view) return false
+ return undo(view)
+ },
+ redo: (): boolean => {
+ const view = viewRef.current
+ if (!view) return false
+ return redo(view)
+ },
searchText: (query: string): boolean => {
const view = viewRef.current
if (!view || !query.trim()) return false
diff --git a/src/renderer/src/LiveLineView.tsx b/src/renderer/src/LiveLineView.tsx
index bf3985a..57df3ac 100644
--- a/src/renderer/src/LiveLineView.tsx
+++ b/src/renderer/src/LiveLineView.tsx
@@ -8,6 +8,18 @@ import {
type LiveBlockSegment,
type LiveSegment
} from './liveDocumentSegments'
+import type { MarkdownEditorHandle } from './EditorPane'
+import type { ActionDeps } from './markdown-actions'
+import { applyLiveMarkdownAction } from './liveTextActions'
+import {
+ canRedoDoc,
+ canUndoDoc,
+ createDocHistory,
+ pushDocHistory,
+ redoDoc,
+ undoDoc
+} from './liveDocHistory'
+import { isLiveModalAction, liveEditorCommand } from './liveShortcuts'
type Props = {
content: string
@@ -21,6 +33,9 @@ type Props = {
onOpenMarkdown?: (path: string, anchorId?: string) => void
onOpenExternal?: (url: string) => void
onChange: (next: string) => void
+ requestText?: (title: string, defaultValue: string) => Promise
+ requestImageDetails?: () => Promise<{ url: string; alt: string } | null>
+ requestColor?: () => Promise
}
function splitLines(doc: string): string[] {
@@ -52,7 +67,7 @@ function resizeTextarea(ta: HTMLTextAreaElement): void {
type BlockPreviewProps = {
html: string
baseFilePath: string | null
- blockKind: 'code' | 'diagram'
+ blockKind: 'code' | 'diagram' | 'table'
resolveRelativePath?: (base: string, href: string) => Promise
onOpenMarkdown?: (path: string, anchorId?: string) => void
onOpenExternal?: (url: string) => void
@@ -79,19 +94,25 @@ function LiveBlockPreview({
)
}
-export function LiveLineView({
- content,
- baseFilePath,
- activeId,
- gotoLine,
- previewMaxWidth,
- scrollRef,
- articleRef,
- resolveRelativePath,
- onOpenMarkdown,
- onOpenExternal,
- onChange
-}: Props): React.ReactElement {
+export const LiveLineView = React.forwardRef(function LiveLineView(
+ {
+ content,
+ baseFilePath,
+ activeId,
+ gotoLine,
+ previewMaxWidth,
+ scrollRef,
+ articleRef,
+ resolveRelativePath,
+ onOpenMarkdown,
+ onOpenExternal,
+ onChange,
+ requestText,
+ requestImageDetails,
+ requestColor
+ },
+ ref
+): React.ReactElement {
const lines = React.useMemo(() => splitLines(content), [content])
const segments = React.useMemo(() => parseLiveDocumentSegments(content), [content])
const [editingKey, setEditingKey] = React.useState(null)
@@ -99,6 +120,176 @@ export function LiveLineView({
const inputRef = React.useRef(null)
const innerScrollRef = React.useRef(null)
const skipBlurCommitRef = React.useRef(false)
+ const lastActiveLineRef = React.useRef(0)
+ const pendingActionRef = React.useRef(null)
+ const docHistoryRef = React.useRef(createDocHistory(content))
+ const selfChangeRef = React.useRef(false)
+ const actionDepsRef = React.useRef({
+ requestText: (title, def) => Promise.resolve(window.prompt(title, def))
+ })
+ actionDepsRef.current = {
+ requestText:
+ requestText ??
+ ((title: string, def: string) => Promise.resolve(window.prompt(title, def))),
+ requestImageDetails,
+ requestColor
+ }
+
+ const applyToTextarea = React.useCallback(
+ async (id: string): Promise => {
+ const ta = inputRef.current
+ if (!ta) return
+ if (isLiveModalAction(id)) skipBlurCommitRef.current = true
+ try {
+ const result = await applyLiveMarkdownAction(
+ draft,
+ { start: ta.selectionStart, end: ta.selectionEnd },
+ id,
+ actionDepsRef.current
+ )
+ if (!result) return
+ setDraft(result.value)
+ requestAnimationFrame(() => {
+ ta.focus()
+ ta.setSelectionRange(result.selection.start, result.selection.end)
+ resizeTextarea(ta)
+ })
+ } finally {
+ if (isLiveModalAction(id)) skipBlurCommitRef.current = false
+ }
+ },
+ [draft]
+ )
+
+ const applyDocumentChange = React.useCallback(
+ (next: string): void => {
+ if (next !== docHistoryRef.current.current) {
+ docHistoryRef.current = pushDocHistory(docHistoryRef.current, next)
+ }
+ selfChangeRef.current = true
+ onChange(next)
+ },
+ [onChange]
+ )
+
+ const performDocUndo = React.useCallback((): boolean => {
+ const next = undoDoc(docHistoryRef.current)
+ if (!next) return false
+ docHistoryRef.current = next
+ skipBlurCommitRef.current = true
+ setEditingKey(null)
+ applyDocumentChange(next.current)
+ return true
+ }, [applyDocumentChange])
+
+ const performDocRedo = React.useCallback((): boolean => {
+ const next = redoDoc(docHistoryRef.current)
+ if (!next) return false
+ docHistoryRef.current = next
+ skipBlurCommitRef.current = true
+ setEditingKey(null)
+ applyDocumentChange(next.current)
+ return true
+ }, [applyDocumentChange])
+
+ const isLiveTextareaFocused = React.useCallback((): boolean => {
+ const root = innerScrollRef.current
+ const active = document.activeElement
+ if (!root || !(active instanceof HTMLTextAreaElement)) return false
+ if (!root.contains(active)) return false
+ return (
+ active.classList.contains('live-line-input') ||
+ active.classList.contains('live-block-input')
+ )
+ }, [])
+
+ /** 整篇撤销/重做：非创作行内编辑框，且焦点不在其它表单控件上 */
+ const shouldUseDocHistory = React.useCallback((): boolean => {
+ if (isLiveTextareaFocused()) return false
+ const active = document.activeElement
+ if (!active) return true
+ if (active instanceof HTMLInputElement || active instanceof HTMLSelectElement) {
+ return false
+ }
+ if (active instanceof HTMLElement && active.isContentEditable) return false
+ return true
+ }, [isLiveTextareaFocused])
+
+ const runToolbarAction = React.useCallback(
+ async (id: string): Promise => {
+ if (editingKey && inputRef.current) {
+ await applyToTextarea(id)
+ return
+ }
+
+ let line = lastActiveLineRef.current
+ if (line < 0 || line >= lines.length) line = 0
+
+ pendingActionRef.current = id
+ setDraft(lines[line] ?? '')
+ setEditingKey(editKey({ type: 'line', line }))
+ },
+ [editingKey, lines, applyToTextarea]
+ )
+
+ const handleEditorCommand = React.useCallback(
+ (e: KeyboardEvent): boolean => {
+ const cmd = liveEditorCommand(e)
+ if (!cmd) return false
+
+ if (cmd.type === 'undo') {
+ if (!shouldUseDocHistory()) return false
+ if (!canUndoDoc(docHistoryRef.current)) return false
+ e.preventDefault()
+ e.stopPropagation()
+ performDocUndo()
+ return true
+ }
+
+ if (cmd.type === 'redo') {
+ if (!shouldUseDocHistory()) return false
+ if (!canRedoDoc(docHistoryRef.current)) return false
+ e.preventDefault()
+ e.stopPropagation()
+ performDocRedo()
+ return true
+ }
+
+ e.preventDefault()
+ e.stopPropagation()
+ void runToolbarAction(cmd.id)
+ return true
+ },
+ [shouldUseDocHistory, performDocUndo, performDocRedo, runToolbarAction]
+ )
+
+ React.useImperativeHandle(
+ ref,
+ () => ({
+ applyAction: async (id: string) => {
+ await runToolbarAction(id)
+ },
+ undo: (): boolean => {
+ if (!shouldUseDocHistory()) {
+ return document.execCommand('undo')
+ }
+ return performDocUndo()
+ },
+ redo: (): boolean => {
+ if (!shouldUseDocHistory()) {
+ return document.execCommand('redo')
+ }
+ return performDocRedo()
+ },
+ searchText: (_query: string): boolean => false,
+ getView: (): null => null,
+ getScrollTop: (): number => innerScrollRef.current?.scrollTop ?? 0,
+ setScrollTop: (top: number): void => {
+ if (innerScrollRef.current) innerScrollRef.current.scrollTop = top
+ }
+ }),
+ [runToolbarAction, shouldUseDocHistory, performDocUndo, performDocRedo]
+ )
const setScrollRef = React.useCallback(
(el: HTMLDivElement | null) => {
@@ -111,9 +302,21 @@ export function LiveLineView({
)
React.useEffect(() => {
+ docHistoryRef.current = createDocHistory(content)
+ selfChangeRef.current = false
setEditingKey(null)
}, [activeId])
+ React.useEffect(() => {
+ if (selfChangeRef.current) {
+ selfChangeRef.current = false
+ docHistoryRef.current = { ...docHistoryRef.current, current: content }
+ return
+ }
+ docHistoryRef.current = createDocHistory(content)
+ setEditingKey(null)
+ }, [content])
+
React.useEffect(() => {
if (!editingKey) return
const ta = inputRef.current
@@ -122,7 +325,31 @@ export function LiveLineView({
const len = ta.value.length
ta.setSelectionRange(len, len)
resizeTextarea(ta)
- }, [editingKey])
+
+ const pending = pendingActionRef.current
+ if (pending) {
+ pendingActionRef.current = null
+ void applyToTextarea(pending)
+ }
+ }, [editingKey, applyToTextarea])
+
+ React.useEffect(() => {
+ const root = innerScrollRef.current
+ if (!root) return
+ const onKeyDown = (e: KeyboardEvent): void => {
+ const cmd = liveEditorCommand(e)
+ if (cmd?.type === 'undo' || cmd?.type === 'redo') {
+ handleEditorCommand(e)
+ return
+ }
+ const active = document.activeElement
+ const inLive = root.contains(active) || root.contains(e.target as Node)
+ if (!inLive) return
+ handleEditorCommand(e)
+ }
+ window.addEventListener('keydown', onKeyDown, true)
+ return () => window.removeEventListener('keydown', onKeyDown, true)
+ }, [handleEditorCommand])
React.useEffect(() => {
if (!gotoLine) return
@@ -161,18 +388,20 @@ export function LiveLineView({
} else {
nextLines = applyBlockEdit(lines, target.startLine, target.endLine, text)
}
- onChange(joinLines(nextLines))
+ applyDocumentChange(joinLines(nextLines))
setEditingKey(null)
},
- [lines, onChange]
+ [lines, applyDocumentChange]
)
const startLineEdit = React.useCallback((line: number): void => {
+ lastActiveLineRef.current = line
setDraft(lines[line] ?? '')
setEditingKey(editKey({ type: 'line', line }))
}, [lines])
const startBlockEdit = React.useCallback((seg: LiveBlockSegment): void => {
+ lastActiveLineRef.current = seg.startLine
setDraft(seg.text)
setEditingKey(editKey({ type: 'block', startLine: seg.startLine, endLine: seg.endLine }))
}, [])
@@ -216,6 +445,7 @@ export function LiveLineView({
resizeTextarea(e.target)
}}
onKeyDown={(e) => {
+ if (handleEditorCommand(e.nativeEvent)) return
if (e.key === 'Escape') {
e.preventDefault()
cancelEdit()
@@ -226,14 +456,13 @@ export function LiveLineView({
}
}}
onBlur={() => {
- if (skipBlurCommitRef.current) {
- skipBlurCommitRef.current = false
- return
- }
+ if (skipBlurCommitRef.current) return
commitEdit(target, draft)
}}
/>
- Esc 取消 · Ctrl+Enter 保存
+
+ Esc 取消 · Ctrl+Enter 保存 · Ctrl+Z/Y 撤销重做（行内编辑时用浏览器撤销）
+