Note.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import ContentEditableModule, { ContentEditableEvent } from 'react-contenteditable'
import { useDispatch, useSelector } from 'react-redux'
import { css, cx } from '../../styled-system/css'
import { textNoteRecipe } from '../../styled-system/recipes'
import Path from '../@types/Path'
import SimplePath from '../@types/SimplePath'
import { cursorDownActionCreator as cursorDown } from '../actions/cursorDown'
import { deleteThoughtActionCreator as deleteThought } from '../actions/deleteThought'
import { editNotePathActionCreator as editNotePath } from '../actions/editNotePath'
import { editThoughtActionCreator as editThought } from '../actions/editThought'
import { keyboardOpenActionCreator as keyboardOpen } from '../actions/keyboardOpen'
import { setCursorActionCreator as setCursor } from '../actions/setCursor'
import { setDescendantActionCreator as setDescendant } from '../actions/setDescendant'
import { setNoteFocusActionCreator as setNoteFocus } from '../actions/setNoteFocus'
import { toggleNoteActionCreator as toggleNote } from '../actions/toggleNote'
import { isTouch } from '../browser'
import preventAutoscroll, { preventAutoscrollEnd } from '../device/preventAutoscroll'
import * as selection from '../device/selection'
import useFreshCallback from '../hooks/useFreshCallback'
import { firstVisibleChild, getChildrenSorted } from '../selectors/getChildren'
import getThoughtById from '../selectors/getThoughtById'
import noteThought from '../selectors/noteThought'
import noteValue from '../selectors/noteValue'
import resolveNoteKey from '../selectors/resolveNoteKey'
import resolveNotePath from '../selectors/resolveNotePath'
import store from '../stores/app'
import editableSyncStore from '../stores/editableSyncStore'
import appendToPath from '../util/appendToPath'
import applyOuterTags from '../util/applyOuterTags'
import equalPathHead from '../util/equalPathHead'
import getCommandState from '../util/getCommandState'
import head from '../util/head'
import strip from '../util/strip'
import trimHtml from '../util/trimHtml'
import useCaretRestore from './Editable/useCaretRestore'
import useOnCut from './Editable/useOnCut'
import FauxCaret from './FauxCaret'

// react-contenteditable is CommonJS that sets __esModule. Because em's package.json has "type": "module", Vite resolves
// its default import to module.exports rather than module.exports.default, while Vitest unwraps it to the component.
// See https://vite.dev/guide/migration#consistent-commonjs-interop.
const ContentEditable =
  (ContentEditableModule as unknown as { default?: typeof ContentEditableModule }).default ?? ContentEditableModule

/** Renders an editable note that modifies the content of the hidden =note attribute. */
const Note = React.memo(
  ({
    disabled,
    path,
  }: {
    /** Disables interaction with the note. Used when the note is hidden by autofocus but remains in th DOM. */
    disabled?: boolean
    path: Path
  }) => {
    const dispatch = useDispatch()
    const noteRef: { current: HTMLElement | null } = useRef(null)
    const fontSize = useSelector(state => state.fontSize)
    const generating = useSelector(state => !!getThoughtById(state, head(path))?.generating)
    const hasFocus = useSelector(state => state.noteFocus && equalPathHead(state.cursor, path))
    const [justPasted, setJustPasted] = useState(false)
    // A draft preserves the user's comma spacing while typing. A forced editor refresh (e.g. undo/redo)
    // invalidates it in the same render, before the caret effect runs, so it cannot mask the restored value.
    const [noteDraft, setNoteDraft] = useState<{ value: string; editableNonce: number } | null>(null)

    /** Gets the value of the note. Returns null if no note exists or if the context view is active. */
    const note = useSelector(state => noteValue(state, path))
    const editableNonce = useSelector(state => state.editableNonce)

    // Formatting applied to the note while it was empty is held on the note's thought until the user types (#3910).
    // Style the placeholder with it so that the empty note previews the formatting its text will take.
    // Only the colors preview. react-contenteditable re-renders only when one of the props it watches changes, and
    // `style` is one while `data-*` is not, so the color reaches the DOM but the data-placeholder-* attributes that
    // drive bold/italic/underline/strikethrough/code never do. Moving Note onto the app's own ContentEditable, which
    // spreads props without that gate, fixes it and is out of scope here.
    const pendingFormat = useSelector(state => noteThought(state, path)?.pendingFormat)
    const placeholderCommandState = useMemo(
      () => (pendingFormat ? getCommandState(pendingFormat) : null),
      [pendingFormat],
    )
    const placeholderForeColor =
      typeof placeholderCommandState?.foreColor === 'string' ? placeholderCommandState.foreColor : undefined
    const placeholderBackColor =
      typeof placeholderCommandState?.backColor === 'string' ? placeholderCommandState.backColor : undefined

    // A note is short enough that the trackpad's hit test lands outside it from the moment the space bar is
    // pressed, so the caret escapes without any drag at all. It only escapes from the end, where the note abuts
    // the parent thought, so that is where it belongs when restored. (#3276)
    useCaretRestore({ editableRef: noteRef, enabled: !!hasFocus, end: true })

    /** Focus Handling with useFreshCallback. */
    const onFocus = useFreshCallback(() => {
      preventAutoscrollEnd(noteRef.current)
      const state = store.getState()
      const targetPath = resolveNotePath(state, path)
      const { noteId } = resolveNoteKey(state, head(path))
      if (targetPath && !noteId) {
        setNoteDraft({ value: noteValue(state, path) ?? '', editableNonce: state.editableNonce })
      }
      // Bail if state already has the caret on this note. Then the focus did not come from the user: it came from the
      // effect below placing the caret, which focuses the note as a side effect. There is no cursor to move, but
      // setCursor would still clear the one-shot noteOffset the effect is in the middle of honoring and recompute
      // cursorOffset, and the undo enhancer records those as a fresh navigation action — discarding the redo stack the
      // moment an undo restores a note caret, so the note edit that was just undone has no redo step.
      if (state.noteFocus && equalPathHead(state.cursor, path)) return
      dispatch(
        setCursor({
          path,
          cursorHistoryClear: true,
          isKeyboardOpen: true,
          noteOffset: null,
          noteFocus: true,
        }),
      )
    }, [dispatch, path])

    // set the caret on the note if editing this thought and noteFocus is true
    useEffect(() => {
      const { noteOffset } = store.getState()
      // cursor must be true if note is focused
      if (hasFocus && noteOffset !== null) {
        selection.set(noteRef.current!, { offset: noteOffset })
        // Clear noteOffset after placing the caret so it acts as a one-shot request. Otherwise repeatedly
        // restoring the caret to the same offset (e.g. applying a font color over a background color multiple
        // times) would set noteOffset to an unchanged value, the effect would not re-run, and the caret would
        // be left wherever the note's re-render dropped it instead of the requested offset (#4630).
        dispatch(setNoteFocus({ value: true, offset: null }))
      }
    }, [dispatch, editableNonce, hasFocus])

    /** Handles note keyboard shortcuts. */
    const onKeyDown = useCallback(
      (e: React.KeyboardEvent) => {
        // Only unmodified keys are note navigation. A chord that includes a command modifier belongs to a command
        // (e.g. Cmd + Shift + ArrowDown is Move Thought Down), so let it propagate to the global keyDown handler
        // instead of swallowing it as Cursor Down or Toggle Note (#4954).
        if (e.metaKey || e.ctrlKey || e.altKey) return

        // delete empty note
        const note = noteValue(store.getState(), path)

        // select thought
        if (e.key === 'Escape' || e.key === 'ArrowUp') {
          e.stopPropagation()
          e.preventDefault()
          dispatch(toggleNote())
        }
        // delete empty note
        // (delete non-empty note is handled by delete command, which allows mobile gesture to work)
        // note may be '' or null if the attribute child was deleted
        else if (e.key === 'Backspace' && !note) {
          e.stopPropagation()
          e.preventDefault()

          // delete target thought if it exists
          dispatch((dispatch, getState) => {
            const state = getState()
            const targetPath = resolveNotePath(state, path) ?? path
            const targetThought = targetPath ? getThoughtById(state, head(targetPath)) : undefined

            if (targetThought) {
              dispatch(deleteThought({ pathParent: path, thoughtId: targetThought.id }))
            }
          })

          dispatch(setNoteFocus({ value: false }))
        } else if (e.key === 'ArrowDown') {
          e.stopPropagation()
          e.preventDefault()
          dispatch(cursorDown())
        }
      },
      [dispatch, path],
    )

    /** Updates the =note attribute when the note text is edited. */
    const onChange = useCallback(
      (e: ContentEditableEvent) => {
        if (editableSyncStore.getState().suppressChange) return

        // calculate pathToContext onChange not in render for performance
        const value = justPasted
          ? // if just pasted, strip all HTML from value
            (setJustPasted(false), strip(e.target.value))
          : // Mobile Safari inserts <br> when all text is deleted
            // Strip <br> from beginning and end of text
            e.target.value.replace(/^<br>|<br>$/gi, '')

        const noteOffset = noteRef.current ? selection.offsetFromNode(noteRef.current) : null

        // update the referenced thought directly if it exists
        dispatch((dispatch, getState) => {
          const state = getState()

          const resolvedTargetPath = resolveNotePath(state, path)
          const targetPath = resolvedTargetPath ?? path
          const { noteId } = resolveNoteKey(state, head(path))

          if (!noteId && resolvedTargetPath) {
            const values = value.split(',').map(value => value.trim())

            setNoteDraft({ value, editableNonce: state.editableNonce })
            dispatch(
              editNotePath({
                noteOffset: noteOffset ?? undefined,
                path: targetPath,
                values,
                undoLabel: 'Edit Note',
              }),
            )
            return
          }

          const noteThoughtValue = firstVisibleChild(state, head(targetPath))

          if (noteThoughtValue) {
            // The formatting held while the note was empty is transferred onto the first text typed into it (#3910).
            // editThought drops the held copy, and force re-renders the note with the tags in place so that the browser
            // carries them through the rest of the typing.
            const wrappedValue =
              noteThoughtValue.pendingFormat && noteThoughtValue.value.length === 0 && value.length > 0
                ? applyOuterTags(value, noteThoughtValue.pendingFormat)
                : value

            dispatch(
              editThought({
                path: appendToPath(targetPath, noteThoughtValue.id) as SimplePath,
                oldValue: noteThoughtValue.value,
                newValue: wrappedValue,
                noteOffset: noteOffset ?? undefined,
                force: wrappedValue !== value,
                undoLabel: 'Edit Note',
              }),
            )
          } else {
            dispatch(
              setDescendant({
                path: targetPath,
                values: [value],
                undoLabel: 'Edit Note',
              }),
            )
          }
        })
      },
      [dispatch, path, justPasted],
    )

    /** Trims the saved note and updates focus and keyboard state when editing ends. */
    const onBlur = useFreshCallback(
      (e: React.FocusEvent) => {
        if (editableSyncStore.getState().suppressBlurSync || editableSyncStore.getState().suppressChange) return

        // Input saves synchronously. Trim fresh state rather than replaying the DOM, which may be stale after a
        // command or undo. Only update an existing note so blur cannot recreate one that was just deleted.
        dispatch((dispatch, getState) => {
          const state = getState()
          const targetPath = resolveNotePath(state, path)
          if (!targetPath) return

          const { noteId } = resolveNoteKey(state, head(path))
          if (noteId) {
            const thought = firstVisibleChild(state, head(targetPath))
            if (!thought) return
            const value = trimHtml(thought.value)
            if (value !== thought.value) {
              dispatch(
                editThought({
                  path: appendToPath(targetPath, thought.id) as SimplePath,
                  oldValue: thought.value,
                  newValue: value,
                  undoLabel: 'Edit Note',
                }),
              )
            }
          } else {
            const children = getChildrenSorted(state, head(targetPath))
            const values = children.map(child => trimHtml(child.value))
            if (values.some((value, index) => value !== children[index].value)) {
              dispatch(editNotePath({ path: targetPath, values, undoLabel: 'Edit Note' }))
            }
          }
        })
        setNoteDraft(null)
        if (!selection.isNote(e.relatedTarget)) {
          dispatch(setNoteFocus({ value: false }))
        }
        if (isTouch && !selection.isThought()) {
          dispatch(keyboardOpen({ value: false }))
        }
      },
      [dispatch, path],
    )

    const onMouseDown = useCallback(() => preventAutoscroll(noteRef.current), [noteRef])

    const onCopy = useCallback((e: React.ClipboardEvent) => {
      const html = selection.html()
      const text = selection.text()

      if (!html || !text) return

      e.clipboardData.setData('text/html', html)
      e.clipboardData.setData('text/plain', text)
      e.clipboardData.setData('text/em', 'true')
      e.preventDefault()
    }, [])

    const onCut = useOnCut()

    if (note === null) return null

    return (
      <div
        aria-label='note'
        data-generating-note={generating || undefined}
        className={cx(
          textNoteRecipe(),
          css({
            fontSize: 'sm',
            lineHeight: 1.25,
            // negative margin to compensate for line-height. See .thought-container
            marginTop: -3,
            position: 'relative',
            marginBottom: '2px',
            padding: '0 0 4px 0',
          }),
        )}
        style={{
          // offset editable's margin-left, which is dynamically set based on font size
          marginLeft: fontSize - 14,
        }}
      >
        <span className={css({ fontSize: '1.2em', position: 'absolute', margin: '-0.175em 0 0 0.0875em' })}>
          <FauxCaret caretType='noteStart' />
        </span>
        <ContentEditable
          html={(noteDraft?.editableNonce === editableNonce ? noteDraft.value : note) ?? ''}
          innerRef={noteRef as React.RefObject<HTMLElement>}
          aria-label='note-editable'
          data-thought-id={head(path)}
          placeholder='Enter a note'
          data-placeholder-bold={placeholderCommandState?.bold || undefined}
          data-placeholder-code={placeholderCommandState?.code || undefined}
          data-placeholder-italic={placeholderCommandState?.italic || undefined}
          data-placeholder-strikethrough={placeholderCommandState?.strikethrough || undefined}
          data-placeholder-underline={placeholderCommandState?.underline || undefined}
          style={{
            ...(placeholderForeColor ? { '--placeholder-color': placeholderForeColor } : null),
            ...(placeholderBackColor ? { '--placeholder-background-color': placeholderBackColor } : null),
            ...(placeholderForeColor || placeholderBackColor ? { '--placeholder-opacity': 0.5 } : null),
          }}
          className={css({
            display: 'inline-block',
            padding: '0 1em 0 0.333em',
            // Match thoughts so the browser keeps typed spaces as whitespace that trimHtml can trim.
            whiteSpace: 'pre-wrap',
          })}
          // For some reason, pointerEvents: 'none' on ContentEditable or its parent does prevent onFocus.
          // This is strange, as it seems to prevent onFocus in Subthought.tsx.
          disabled={disabled}
          // Prevent drag-and-drop of text selection between thoughts and notes. This also disables dragging
          // text within the note, which was previously possible on mobile but not desktop. This may be addressed
          // on both platforms by https://github.com/cybersemics/em/issues/3739.
          onDrop={isTouch ? (e: React.DragEvent) => e.preventDefault() : undefined}
          onKeyDown={onKeyDown}
          onChange={onChange}
          // Text copied from a note and pasted on a thought should not bring along the note's default color and italicization. (#3779)
          onCopy={onCopy}
          onCut={onCut}
          onPaste={(e: React.ClipboardEvent) => {
            // mobile Safari copies URLs as 'text/uri-list' when the share button is used
            const text = e.clipboardData.getData('text/plain') || e.clipboardData.getData('text/uri-list')

            // Pasting from mobile copy (e.g. Choose "Share" in Twitter and select "Copy") can result in a blank clipboard
            // that the browser still pastes, so fall back to the default paste and strip the HTML it inserts in onChange.
            // See: https://github.com/cybersemics/em/issues/286
            if (!text) {
              setJustPasted(true)
              return
            }

            // Insert the plain text rather than letting the browser paste HTML. WebKit wraps pasted text in a span with
            // inline styles and a trailing newline, and stripping them in onChange leaves a value that no longer matches
            // the DOM, so the note re-renders and the caret jumps to the end on iOS and is dropped on Android (#3828).
            // insertText leaves the caret after the pasted text and the DOM in sync with the value.
            e.preventDefault()
            document.execCommand('insertText', false, text)
          }}
          onBlur={onBlur}
          onFocus={onFocus}
          onMouseDown={onMouseDown}
          role='button'
        />
        <span className={css({ fontSize: '1.1em', position: 'absolute', margin: '-0.15em 0 0 -1.175em' })}>
          <FauxCaret caretType='noteEnd' />
        </span>
      </div>
    )
  },
)

Note.displayName = 'Note'

export default Note