Function RichTextEditor

packages/agentflow/src/atoms/RichTextEditor.tsx:163–238

({
    value,
    onChange,
    placeholder,
    disabled = false,
    rows,
    autoFocus = false,
    onEditorReady,
    useMarkdown = true
}: RichTextEditorProps)

 * business logic. Variable/mention support lives in the features layer.
 */
export function RichTextEditor({
    value,
    onChange,
    placeholder,
    disabled = false,
    rows,
    autoFocus = false,
    onEditorReady,
    useMarkdown = true
}: RichTextEditorProps) {
    // Keep a ref to the latest onChange so the TipTap onUpdate callback never goes stale
    const onChangeRef = useRef(onChange)
    useEffect(() => {
        onChangeRef.current = onChange
    }, [onChange])

    // Track the last value we emitted (or loaded) to avoid re-setting content
    // when the parent echoes our own onChange value back as the new prop.
    const lastEmittedRef = useRef<string>(value || '')

    // Capture initial value and useMarkdown for the mount effect below so we can
    // depend only on `editor` without suppressing the exhaustive-deps rule.
    const initialValueRef = useRef(value)
    const useMarkdownRef = useRef(useMarkdown)

    const extensions = useMemo(() => buildExtensions(placeholder, useMarkdown), [placeholder, useMarkdown])

    const editor = useEditor({
        extensions,
        content: '',
        editable: !disabled,
        autofocus: autoFocus ? 'end' : false,
        onUpdate: ({ editor: ed }) => {
            const raw = useMarkdown ? getEditorMarkdown(ed) : ed.getHTML()
            const emitted = useMarkdown ? unescapeXmlTags(raw) : raw
            lastEmittedRef.current = emitted
            onChangeRef.current(emitted)
        }
    })

    // Notify parent when the editor instance is ready (used by ExpandTextDialog to flush
    // the current editor state to markdown when switching to Source mode).
    useEffect(() => {
        onEditorReady?.(editor)
        return () => onEditorReady?.(null)
    }, [editor, onEditorReady])

    // Load initial content once the editor is ready, detecting legacy HTML vs markdown.
    // Reads from refs so only `editor` needs to be in the dep array.
    useEffect(() => {
        if (!editor || !initialValueRef.current) return
        loadContent(editor, initialValueRef.current, useMarkdownRef.current)
        lastEmittedRef.current = initialValueRef.current
    }, [editor])

    // Sync genuine external value changes (e.g. parent resets the field programmatically).
    useEffect(() => {
        if (editor && value !== lastEmittedRef.current) {