import React, { useLayoutEffect, useRef } from 'react'

// Static-content text edited in place. The DOM is uncontrolled while the user types (React never rewrites
// innerHTML during editing, so the caret does not jump) and the HTML is committed once, on blur.
export default function EditableContent({ html, onCommit, style, className, onClick, elementRef }) {
  const ref = useRef(null)
  const editing = useRef(false)

  // Push outside changes (undo, panel edits) into the DOM, but never while the user is typing.
  useLayoutEffect(() => {
    if (!editing.current && ref.current && ref.current.innerHTML !== html) {
      ref.current.innerHTML = html
    }
  }, [html])

  return (
    <div
      ref={(node) => {
        ref.current = node
        if (elementRef) elementRef.current = node
      }}
      data-static-content-editable="true"
      contentEditable={true}
      suppressContentEditableWarning={true}
      onClick={onClick}
      onFocus={() => { editing.current = true }}
      onBlur={(e) => {
        editing.current = false
        const next = e.currentTarget.innerHTML
        if (next !== html) onCommit(next)
      }}
      // Keys typed here are text, not builder shortcuts or drag-and-drop keyboard moves.
      onKeyDown={(e) => e.stopPropagation()}
      className={className}
      style={{ userSelect: 'text', WebkitUserSelect: 'text', ...style }}
    />
  )
}