Function ContentEditable

packages/editor/src/components/content.tsx:79–670

(props: EditableProps)

 * ContentEditable.
 */
export const ContentEditable = (props: EditableProps) => {
  const {
    autoFocus = true,
    placeholder,
    readOnly: readOnlyProp = false,
    lang,
    style = {},
    as: Component = 'div',
    selectionDrawingStyle: selectionDrawingStyleProp,
    ...attributes
  } = props
  const editor = useEditableStatic()

  const ref = React.useRef<HTMLDivElement>(null)
  const [readOnly, setReadOnly] = useReadOnly()
  // 标记是否是刚拖拽完毕
  const isDragEnded = React.useRef(false)
  const dragTo = useDragTo()
  const dragging = useDragging()
  const { getDrag, setDrag } = useDragMethods()

  const [rendered, setRendered] = React.useState(false)

  // Touch hold timer
  const touchHoldTimer = React.useRef<number | null>(null)

  React.useEffect(() => {
    if (placeholder && !readOnly) {
      const unsubscribe = Placeholder.subscribe(
        editor,
        ([node]) => {
          if (Editable.isEditor(node) && !node.children.some(n => Editor.isList(editor, n)))
            return () => placeholder
        },
        true,
      )

      return () => {
        unsubscribe()
      }
    }
  }, [editor, placeholder, readOnly])

  useIsomorphicLayoutEffect(() => {
    setReadOnly(readOnlyProp)
  }, [readOnlyProp])

  useIsomorphicLayoutEffect(() => {
    Locale.setLang(editor, props.lang || 'en-US')
  }, [editor, lang])

  useIsomorphicLayoutEffect(() => {
    if (selectionDrawingStyleProp) SelectionDrawing.setStyle(editor, selectionDrawingStyleProp)
  }, [editor, selectionDrawingStyleProp])

  const [focused, setFocused] = useFocused()

  const startPointRef = React.useRef<Point | null>(null)