Function MarkdownEditor

frontend/src/components/shared/markdown-editor.tsx:103–304

({
    autoFocus,
    className,
    contentClassName,
    disabled,
    onBlur,
    onChange,
    placeholder = 'Write something…',
    ref,
    showToolbar = true,
    value,
}: MarkdownEditorProps & { ref?: Ref<MarkdownEditorHandle> })

}

function MarkdownEditor({
    autoFocus,
    className,
    contentClassName,
    disabled,
    onBlur,
    onChange,
    placeholder = 'Write something…',
    ref,
    showToolbar = true,
    value,
}: MarkdownEditorProps & { ref?: Ref<MarkdownEditorHandle> }) {
    const onChangeRef = useRef(onChange);
    const onBlurRef = useRef(onBlur);
    // Tracks the last markdown the editor reported externally. We compare
    // against this to suppress echo updates: tiptap-markdown can re-serialize
    // content slightly differently than the input string (whitespace/list
    // markers/hard breaks/etc.), and we don't want to flag those
    // normalizations as user edits — that would falsely flip RHF's
    // `isDirty` flag.
    //
    // The baseline is the editor's own serialized markdown, NOT the raw
    // input `value`. Comparing user edits against the canonical
    // (post-normalization) form is what makes the comparison correct.
    const lastEmittedRef = useRef<string>(value);

    // Tiptap dispatches transactions for the initial content during view
    // construction. Those `onUpdate` calls are echoes of the initial
    // parse, not real user edits — forwarding them to RHF would mark
    // the form dirty on mount. We start forwarding edits only after
    // `onCreate` has captured the canonical baseline.
    const isInitializedRef = useRef(false);

    // Tracks whether we have already cleared the undo stack on initial
    // mount. After the first sync useEffect run we set this to true; on
    // subsequent renders we only clear the stack when an external value
    // arrived (see `shouldExternalSync` below).
    const hasResetInitialHistoryRef = useRef(false);

    useEffect(() => {
        onChangeRef.current = onChange;
        onBlurRef.current = onBlur;
    }, [onChange, onBlur]);

    const editor = useEditor({
        content: value,
        editable: !disabled,
        extensions: [
            StarterKit.configure({
                codeBlock: { HTMLAttributes: { class: 'hljs' } },
            }),
            Placeholder.configure({
                emptyEditorClass: 'is-editor-empty',
                placeholder,
            }),
            Markdown.configure({
                breaks: true,
                html: false,