@pie-lib/editable-html-tip-tap 1.2.0-next.32 → 1.2.0-next.34

package/lib/extensions/image-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-component.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isEqual","_debug","_LinearProgress","_styles","_react2","_reactDom","_InsertImageHandler","_ImageToolbar","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledProgress","styled","LinearProgress","shouldForwardProp","prop","_ref","hideProgress","position","left","width","top","transition","opacity","StyledRoot","includes","_ref2","loading","pendingDelete","display","StyledImageContainer","_ref3","theme","alignItems","StyledImage","_ref4","active","border","concat","palette","primary","main","StyledResize","_ref5","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","sizePx","s","ImageComponent","props","_options$imageHandlin6","node","editor","attributes","onFocus","getPos","selected","options","_props$maxImageWidth","maxImageWidth","_props$maxImageHeight","maxImageHeight","alt","attrs","pos","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","latestNodeRef","useRef","imgRef","resizeRef","toolbarRef","getPercentFromWidth","useCallback","floored","current","naturalWidth","parseInt","toFixed","applySizeData","update","resizePercent","isEqual","commands","updateAttributes","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","_node$attrs$src","_node$attrs","_options$imageHandlin","hasImageSrc","String","src","trim","imageHandling","insertImageRequested","finish","InsertImageHandler","resizeHandle","addEventListener","initResize","removeEventListener","loadImage","box","style","w","Math","min","h","naturalHeight","updateAspect","initial","next","keepAspect","undefined","resizeType","ratio","startResize","bounds","target","getBoundingClientRect","clientX","clientY","findNodePos","found","doc","descendants","type","name","onChange","newValues","stopResize","window","objectFit","flexAlign","center","right","alignment","createElement","NodeViewWrapper","loaded","deleteStatus","justifyContent","mode","value","percent","onDragStart","preventDefault","_extends2","draggable","ref","onLoad","className","_tiptapContainerEl","ReactDOM","createPortal","zIndex","background","boxShadow","showDone","deletable","toolbarOpts","onDelete","_options$imageHandlin2","_options$imageHandlin3","nodePos","view","dispatch","tr","nodeAt","focus","onDone","_options$imageHandlin4","_options$imageHandlin5","disableImageAlignmentButtons","imageLoaded","propTypes","PropTypes","object","isRequired","func","number","_default","exports"],"sources":["../../src/extensions/image-component.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash-es/isEqual';\nimport debug from 'debug';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { styled } from '@mui/material/styles';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport ReactDOM from 'react-dom';\nimport InsertImageHandler from '../components/image/InsertImageHandler';\nimport ImageToolbar from '../components/image/ImageToolbar';\nimport CustomToolbarWrapper from './custom-toolbar-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst StyledProgress = styled(LinearProgress, {\n  shouldForwardProp: (prop) => prop !== 'hideProgress',\n})(({ hideProgress }) => ({\n  position: 'absolute',\n  left: '0',\n  width: 'fit-content',\n  top: '0%',\n  transition: 'opacity 200ms linear',\n  ...(hideProgress && {\n    opacity: 0,\n  }),\n}));\n\nconst StyledRoot = styled('div', {\n  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),\n})(({ loading, pendingDelete }) => ({\n  position: 'relative',\n  display: 'flex',\n  transition: 'opacity 200ms linear',\n  ...(loading && {\n    opacity: 0.3,\n  }),\n  ...(pendingDelete && {\n    opacity: 0.3,\n  }),\n}));\n\nconst StyledImageContainer = styled('div')(({ theme }) => ({\n  position: 'relative',\n  width: 'fit-content',\n  display: 'flex',\n  alignItems: 'center',\n  '&&:hover > .resize': {\n    display: 'block',\n  },\n}));\n\nconst StyledImage = styled('img', {\n  shouldForwardProp: (prop) => prop !== 'active',\n})(({ theme, active }) => ({\n  border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.primary.main,\n  cursor: 'col-resize',\n  height: '35px',\n  width: '5px',\n  borderRadius: 8,\n  marginLeft: '5px',\n  marginRight: '10px',\n  display: 'none',\n}));\n\nconst sizePx = (s) => (s ? `${s}px` : 'calc(20px)');\n\nfunction ImageComponent(props) {\n  const {\n    node,\n    editor,\n    attributes,\n    onFocus,\n    getPos,\n    selected,\n    options,\n    maxImageWidth = 700,\n    maxImageHeight = 900,\n  } = props;\n  const { alt } = node.attrs;\n  const pos = getPos();\n\n  const [showToolbar, setShowToolbar] = useState(false);\n\n  const latestNodeRef = useRef(node);\n  const imgRef = useRef(null);\n  const resizeRef = useRef(null);\n  const toolbarRef = useRef(null);\n\n  const getPercentFromWidth = useCallback((width) => {\n    const floored = (width / imgRef.current.naturalWidth) * 4;\n    return parseInt(floored.toFixed(0) * 25, 10);\n  }, []);\n\n  const applySizeData = useCallback(() => {\n    if (!node.attrs.width || !imgRef.current) return;\n\n    const update = {\n      ...node.attrs,\n      resizePercent: getPercentFromWidth(node.attrs.width),\n    };\n\n    if (!isEqual(update, node.attrs)) {\n      editor.commands.updateAttributes('imageUploadNode', update);\n    }\n  }, [editor, node.attrs, getPercentFromWidth]);\n\n  // keep ref in sync with latest node\n  useEffect(() => {\n    latestNodeRef.current = { ...node, pos };\n  }, [node, pos]);\n\n  useEffect(() => {\n    const { selection } = editor.state;\n    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n    if (selected) {\n      if (onlyThisNodeSelected) {\n        // Only open the upload UI for a fresh placeholder. Remounting after tab switch\n        // would otherwise call insertImageRequested again and reopen the file modal.\n        const hasImageSrc = String(node.attrs?.src ?? '').trim();\n\n        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {\n          options.imageHandling.insertImageRequested(\n            editor,\n            latestNodeRef.current,\n            (finish) => new InsertImageHandler(editor, latestNodeRef.current, finish),\n          );\n        }\n\n        setShowToolbar(selected);\n      }\n    } else {\n      setShowToolbar(selected);\n    }\n  }, [editor, node, selected]);\n\n  useEffect(() => {\n    applySizeData();\n\n    const resizeHandle = resizeRef.current;\n    if (resizeHandle) {\n      resizeHandle.addEventListener('mousedown', initResize, false);\n    }\n    return () => {\n      if (resizeHandle) {\n        resizeHandle.removeEventListener('mousedown', initResize, false);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    applySizeData();\n  });\n\n  const loadImage = useCallback(() => {\n    const box = imgRef.current;\n    if (!box) return;\n\n    if (!box.style.width || box.style.width === 'calc(20px)') {\n      const w = Math.min(box.naturalWidth, maxImageWidth);\n      const h = Math.min(box.naturalHeight, maxImageHeight);\n\n      box.style.width = `${w}px`;\n      box.style.height = `${h}px`;\n\n      const update = { width: w, height: h };\n      if (!isEqual(update, node.attrs)) {\n        editor.commands.updateAttributes('imageUploadNode', update);\n      }\n    }\n  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);\n\n  const updateAspect = (initial, next, keepAspect = true, resizeType) => {\n    if (keepAspect) {\n      const ratio = initial.width / initial.height;\n      if (resizeType === 'height') return { width: next.height * ratio, height: next.height };\n      return { width: next.width, height: next.width / ratio };\n    }\n    return next;\n  };\n\n  const startResize = useCallback(\n    (e) => {\n      const box = imgRef.current;\n      if (!box) return;\n\n      const bounds = e.target.getBoundingClientRect();\n      const initial = { width: box.naturalWidth, height: box.naturalHeight };\n\n      const next = updateAspect(initial, {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      });\n\n      if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {\n        box.style.width = `${next.width}px`;\n        box.style.height = `${next.height}px`;\n\n        const update = { width: next.width, height: next.height };\n        if (!isEqual(update, node.attrs)) {\n          editor.commands.updateAttributes('imageUploadNode', update);\n        }\n      }\n    },\n    [editor, node.attrs],\n  );\n\n  // Helper to find this node's current position in the doc.\n  // We cannot use object identity (n === node) because ProseMirror replaces\n  // node objects after every transaction — match by src instead.\n  const findNodePos = useCallback(() => {\n    let found = null;\n    const src = latestNodeRef.current.attrs.src;\n    editor.state.doc.descendants((n, pos) => {\n      if (found !== null) return false;\n      if (n.type.name === 'imageUploadNode' && n.attrs.src === src) {\n        found = pos;\n        return false;\n      }\n    });\n    return found;\n  }, [editor]);\n\n  const onChange = useCallback(\n    (newValues) => {\n      editor.commands.updateAttributes('imageUploadNode', newValues);\n    },\n    [editor],\n  );\n\n  const stopResize = useCallback(() => {\n    window.removeEventListener('mousemove', startResize);\n    window.removeEventListener('mouseup', stopResize);\n  }, [startResize]);\n\n  const initResize = useCallback(() => {\n    window.addEventListener('mousemove', startResize);\n    window.addEventListener('mouseup', stopResize);\n  }, [startResize, stopResize]);\n\n  const style = {\n    width: sizePx(node.attrs.width),\n    height: sizePx(node.attrs.height),\n    objectFit: 'contain',\n  };\n\n  const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';\n\n  return (\n    <NodeViewWrapper>\n      <StyledRoot\n        onFocus={onFocus}\n        loading={!node.attrs.loaded}\n        pendingDelete={node.attrs.deleteStatus === 'pending'}\n        style={{ justifyContent: flexAlign }}\n      >\n        <StyledProgress mode=\"determinate\" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />\n\n        <StyledImageContainer onDragStart={(e) => e.preventDefault()}>\n          <StyledImage\n            {...attributes}\n            active={selected && node.attrs.loaded}\n            draggable={false}\n            ref={imgRef}\n            src={node.attrs.src}\n            style={style}\n            onLoad={loadImage}\n            alt={node.attrs.alt}\n          />\n          <StyledResize ref={resizeRef} className=\"resize\" />\n        </StyledImageContainer>\n      </StyledRoot>\n\n      {showToolbar &&\n        editor._tiptapContainerEl &&\n        ReactDOM.createPortal(\n          <div\n            ref={toolbarRef}\n            style={{\n              zIndex: 20,\n              background: 'var(--editable-html-toolbar-bg, #efefef)',\n              boxShadow:\n                '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n              width: '100%',\n            }}\n          >\n            <CustomToolbarWrapper\n              showDone\n              deletable\n              toolbarOpts={options.toolbarOpts || {}}\n              onDelete={() => {\n                const nodePos = findNodePos();\n                if (nodePos === null) return;\n\n                options.imageHandling?.onDelete?.(latestNodeRef.current);\n\n                editor.view.dispatch(\n                  editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),\n                );\n                setShowToolbar(false);\n                editor.commands.focus();\n              }}\n              onDone={() => {\n                setShowToolbar(false);\n                options.imageHandling?.onDone?.(editor);\n                editor.commands.focus('end');\n              }}\n            >\n              <ImageToolbar\n                disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}\n                alt={node.attrs.alt}\n                imageLoaded={node.attrs.loaded}\n                alignment={node.attrs.alignment || 'left'}\n                onChange={onChange}\n              />\n            </CustomToolbarWrapper>\n          </div>,\n          editor._tiptapContainerEl,\n        )}\n    </NodeViewWrapper>\n  );\n}\n\nImageComponent.propTypes = {\n  node: PropTypes.object.isRequired,\n  editor: PropTypes.object.isRequired,\n  attributes: PropTypes.object,\n  onFocus: PropTypes.func,\n  maxImageWidth: PropTypes.number,\n  maxImageHeight: PropTypes.number,\n};\n\nexport default ImageComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image-component.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isEqual","_debug","_LinearProgress","_styles","_react2","_reactDom","_InsertImageHandler","_ImageToolbar","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledProgress","styled","LinearProgress","shouldForwardProp","prop","_ref","hideProgress","position","left","width","top","transition","opacity","StyledRoot","includes","_ref2","loading","pendingDelete","display","StyledImageContainer","_ref3","theme","alignItems","StyledImage","_ref4","active","border","concat","palette","primary","main","StyledResize","_ref5","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","sizePx","s","ImageComponent","props","_options$imageHandlin6","node","editor","attributes","onFocus","getPos","selected","options","_props$maxImageWidth","maxImageWidth","_props$maxImageHeight","maxImageHeight","alt","attrs","pos","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","latestNodeRef","useRef","imgRef","resizeRef","toolbarRef","getPercentFromWidth","useCallback","floored","current","naturalWidth","parseInt","toFixed","findNodePos","key","nodeKey","found","state","doc","descendants","type","name","updateThisNode","newAttrs","nodePos","currentNode","nodeAt","view","dispatch","tr","setNodeMarkup","undefined","applySizeData","resizePercent","useEffect","selection","onlyThisNodeSelected","from","nodeSize","to","_node$attrs$src","_node$attrs","_options$imageHandlin","hasImageSrc","String","src","trim","imageHandling","insertImageRequested","finish","InsertImageHandler","resizeHandle","addEventListener","initResize","removeEventListener","loadImage","box","style","w","Math","min","h","naturalHeight","update","isEqual","updateAspect","initial","next","keepAspect","resizeType","ratio","startResize","bounds","target","getBoundingClientRect","clientX","clientY","onChange","newValues","stopResize","window","objectFit","flexAlign","center","right","alignment","createElement","NodeViewWrapper","loaded","deleteStatus","justifyContent","mode","value","percent","onDragStart","preventDefault","_extends2","draggable","ref","onLoad","className","_tiptapContainerEl","ReactDOM","createPortal","zIndex","background","boxShadow","showDone","deletable","toolbarOpts","onDelete","_options$imageHandlin2","_options$imageHandlin3","commands","focus","onDone","_options$imageHandlin4","_options$imageHandlin5","disableImageAlignmentButtons","imageLoaded","propTypes","PropTypes","object","isRequired","func","number","_default","exports"],"sources":["../../src/extensions/image-component.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash-es/isEqual';\nimport debug from 'debug';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { styled } from '@mui/material/styles';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport ReactDOM from 'react-dom';\nimport InsertImageHandler from '../components/image/InsertImageHandler';\nimport ImageToolbar from '../components/image/ImageToolbar';\nimport CustomToolbarWrapper from './custom-toolbar-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst StyledProgress = styled(LinearProgress, {\n  shouldForwardProp: (prop) => prop !== 'hideProgress',\n})(({ hideProgress }) => ({\n  position: 'absolute',\n  left: '0',\n  width: 'fit-content',\n  top: '0%',\n  transition: 'opacity 200ms linear',\n  ...(hideProgress && {\n    opacity: 0,\n  }),\n}));\n\nconst StyledRoot = styled('div', {\n  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),\n})(({ loading, pendingDelete }) => ({\n  position: 'relative',\n  display: 'flex',\n  transition: 'opacity 200ms linear',\n  ...(loading && {\n    opacity: 0.3,\n  }),\n  ...(pendingDelete && {\n    opacity: 0.3,\n  }),\n}));\n\nconst StyledImageContainer = styled('div')(({ theme }) => ({\n  position: 'relative',\n  width: 'fit-content',\n  display: 'flex',\n  alignItems: 'center',\n  '&&:hover > .resize': {\n    display: 'block',\n  },\n}));\n\nconst StyledImage = styled('img', {\n  shouldForwardProp: (prop) => prop !== 'active',\n})(({ theme, active }) => ({\n  border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.primary.main,\n  cursor: 'col-resize',\n  height: '35px',\n  width: '5px',\n  borderRadius: 8,\n  marginLeft: '5px',\n  marginRight: '10px',\n  display: 'none',\n}));\n\nconst sizePx = (s) => (s ? `${s}px` : 'calc(20px)');\n\nfunction ImageComponent(props) {\n  const {\n    node,\n    editor,\n    attributes,\n    onFocus,\n    getPos,\n    selected,\n    options,\n    maxImageWidth = 700,\n    maxImageHeight = 900,\n  } = props;\n  const { alt } = node.attrs;\n  const pos = getPos();\n\n  const [showToolbar, setShowToolbar] = useState(false);\n\n  const latestNodeRef = useRef(node);\n  const imgRef = useRef(null);\n  const resizeRef = useRef(null);\n  const toolbarRef = useRef(null);\n\n  const getPercentFromWidth = useCallback((width) => {\n    const floored = (width / imgRef.current.naturalWidth) * 4;\n    return parseInt(floored.toFixed(0) * 25, 10);\n  }, []);\n\n  const findNodePos = useCallback(() => {\n    const key = latestNodeRef.current.attrs.nodeKey;\n    let found = null;\n    editor.state.doc.descendants((n, pos) => {\n      if (found !== null) return false;\n      if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {\n        found = pos;\n        return false;\n      }\n    });\n    return found;\n  }, [editor]);\n\n  // dispatch an attribute update targeted precisely at this node by nodeKey.\n  const updateThisNode = useCallback((newAttrs) => {\n    const nodePos = findNodePos();\n    if (nodePos === null) return;\n    const currentNode = editor.state.doc.nodeAt(nodePos);\n    if (!currentNode) return;\n    editor.view.dispatch(\n      editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }),\n    );\n  }, [editor, findNodePos]);\n\n  const applySizeData = useCallback(() => {\n    if (!node.attrs.width || !imgRef.current) return;\n    const resizePercent = getPercentFromWidth(node.attrs.width);\n    if (node.attrs.resizePercent === resizePercent) return;\n    updateThisNode({ resizePercent });\n  }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);\n\n  // keep ref in sync with latest node\n  useEffect(() => {\n    latestNodeRef.current = { ...node, pos };\n  }, [node, pos]);\n\n  useEffect(() => {\n    const { selection } = editor.state;\n    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n    if (selected) {\n      if (onlyThisNodeSelected) {\n        // Only open the upload UI for a fresh placeholder. Remounting after tab switch\n        // would otherwise call insertImageRequested again and reopen the file modal.\n        const hasImageSrc = String(node.attrs?.src ?? '').trim();\n\n        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {\n          options.imageHandling.insertImageRequested(\n            editor,\n            [node, pos],\n            (finish) => new InsertImageHandler(editor, [node, pos], finish),\n          );\n        }\n\n        setShowToolbar(selected);\n      }\n    } else {\n      setShowToolbar(selected);\n    }\n  }, [editor, node, pos, selected]);\n\n  useEffect(() => {\n    applySizeData();\n\n    const resizeHandle = resizeRef.current;\n    if (resizeHandle) {\n      resizeHandle.addEventListener('mousedown', initResize, false);\n    }\n    return () => {\n      if (resizeHandle) {\n        resizeHandle.removeEventListener('mousedown', initResize, false);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    applySizeData();\n  });\n\n  const loadImage = useCallback(() => {\n    const box = imgRef.current;\n    if (!box) return;\n\n    if (!box.style.width || box.style.width === 'calc(20px)') {\n      const w = Math.min(box.naturalWidth, maxImageWidth);\n      const h = Math.min(box.naturalHeight, maxImageHeight);\n\n      box.style.width = `${w}px`;\n      box.style.height = `${h}px`;\n\n      const update = { width: w, height: h };\n      if (!isEqual(update, { width: node.attrs.width, height: node.attrs.height })) {\n        updateThisNode(update);\n      }\n    }\n  }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);\n\n  const updateAspect = (initial, next, keepAspect = true, resizeType) => {\n    if (keepAspect) {\n      const ratio = initial.width / initial.height;\n      if (resizeType === 'height') return { width: next.height * ratio, height: next.height };\n      return { width: next.width, height: next.width / ratio };\n    }\n    return next;\n  };\n\n  const startResize = useCallback(\n    (e) => {\n      const box = imgRef.current;\n      if (!box) return;\n\n      const bounds = e.target.getBoundingClientRect();\n      const initial = { width: box.naturalWidth, height: box.naturalHeight };\n\n      const next = updateAspect(initial, {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      });\n\n      if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {\n        box.style.width = `${next.width}px`;\n        box.style.height = `${next.height}px`;\n\n        updateThisNode({ width: next.width, height: next.height });\n      }\n    },\n    [editor, updateThisNode],\n  );\n\n  const onChange = useCallback(\n    (newValues) => {\n      updateThisNode(newValues);\n    },\n    [editor, updateThisNode],\n  );\n\n  const stopResize = useCallback(() => {\n    window.removeEventListener('mousemove', startResize);\n    window.removeEventListener('mouseup', stopResize);\n  }, [startResize]);\n\n  const initResize = useCallback(() => {\n    window.addEventListener('mousemove', startResize);\n    window.addEventListener('mouseup', stopResize);\n  }, [startResize, stopResize]);\n\n  const style = {\n    width: sizePx(node.attrs.width),\n    height: sizePx(node.attrs.height),\n    objectFit: 'contain',\n  };\n\n  const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';\n\n  return (\n    <NodeViewWrapper>\n      <StyledRoot\n        onFocus={onFocus}\n        loading={!node.attrs.loaded}\n        pendingDelete={node.attrs.deleteStatus === 'pending'}\n        style={{ justifyContent: flexAlign }}\n      >\n        <StyledProgress mode=\"determinate\" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />\n\n        <StyledImageContainer onDragStart={(e) => e.preventDefault()}>\n          <StyledImage\n            {...attributes}\n            active={selected && node.attrs.loaded}\n            draggable={false}\n            ref={imgRef}\n            src={node.attrs.src}\n            style={style}\n            onLoad={loadImage}\n            alt={node.attrs.alt}\n          />\n          <StyledResize ref={resizeRef} className=\"resize\" />\n        </StyledImageContainer>\n      </StyledRoot>\n\n      {showToolbar &&\n        editor._tiptapContainerEl &&\n        ReactDOM.createPortal(\n          <div\n            ref={toolbarRef}\n            style={{\n              zIndex: 20,\n              background: 'var(--editable-html-toolbar-bg, #efefef)',\n              boxShadow:\n                '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n              width: '100%',\n            }}\n          >\n            <CustomToolbarWrapper\n              showDone\n              deletable\n              toolbarOpts={options.toolbarOpts || {}}\n              onDelete={() => {\n                const nodePos = findNodePos();\n                if (nodePos === null) return;\n\n                options.imageHandling?.onDelete?.(latestNodeRef.current);\n\n                editor.view.dispatch(\n                  editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),\n                );\n                setShowToolbar(false);\n                editor.commands.focus();\n              }}\n              onDone={() => {\n                setShowToolbar(false);\n                options.imageHandling?.onDone?.(editor);\n                editor.commands.focus('end');\n              }}\n            >\n              <ImageToolbar\n                disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}\n                alt={node.attrs.alt}\n                imageLoaded={node.attrs.loaded}\n                alignment={node.attrs.alignment || 'left'}\n                onChange={onChange}\n              />\n            </CustomToolbarWrapper>\n          </div>,\n          editor._tiptapContainerEl,\n        )}\n    </NodeViewWrapper>\n  );\n}\n\nImageComponent.propTypes = {\n  node: PropTypes.object.isRequired,\n  editor: PropTypes.object.isRequired,\n  attributes: PropTypes.object,\n  onFocus: PropTypes.func,\n  maxImageWidth: PropTypes.number,\n  maxImageHeight: PropTypes.number,\n};\n\nexport default ImageComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/extensions/image.js

@@ -11,6 +11,7 @@ var _react = require("@tiptap/react");
 var _state = require("@tiptap/pm/state");
 var _react2 = _interopRequireDefault(require("react"));
 var _imageComponent = _interopRequireDefault(require("./image-component"));
+var _propTypes = require("prop-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
@@ -24,6 +25,9 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
   // optional
   addAttributes: function addAttributes() {
     return {
+      nodeKey: {
+        "default": null
+      },
       loaded: {
         "default": false
       },
@@ -76,7 +80,11 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
         return function (_ref2) {
           var commands = _ref2.commands;
           return commands.insertContent({
-            type: _this2.name
+            type: _this2.name,
+            // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
+            attrs: {
+              nodeKey: "img-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2))
+            }
           });
         };
       }
@@ -111,7 +119,8 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
               type: 'imageUploadNode',
               attrs: {
                 src: src,
-                loaded: true
+                loaded: true,
+                nodeKey: "img-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2))
               }
             });
           };

package/lib/extensions/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":["_core","require","_react","_state","_react2","_interopRequireDefault","_imageComponent","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type","addProseMirrorPlugins","editor","Plugin","handlePaste","view","event","_event$clipboardData","items","Array","from","clipboardData","imageItem","find","item","kind","startsWith","file","getAsFile","reader","FileReader","onload","result","attrs","readAsDataURL"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { mergeAttributes, Node } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport { Plugin } from '@tiptap/pm/state';\nimport React from 'react';\nimport ImageComponent from './image-component';\n\nexport const ImageUploadNode = Node.create({\n  name: 'imageUploadNode',\n\n  group: 'block',\n  atom: true, // ✅ prevents content holes\n  selectable: true, // optional\n  draggable: true, // optional\n\n  addAttributes() {\n    return {\n      loaded: { default: false },\n      deleteStatus: { default: null },\n      alignment: { default: null },\n      percent: { default: null },\n      width: { default: null },\n      height: { default: null },\n      src: { default: null },\n      alt: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'img[data-type=\"image-upload-node\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n  },\n\n  addCommands() {\n    return {\n      setImageUploadNode:\n        () =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: this.name,\n          });\n        },\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const editor = this.editor;\n\n    return [\n      new Plugin({\n        props: {\n          handlePaste(view, event) {\n            const items = Array.from(event.clipboardData?.items || []);\n\n            const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));\n\n            if (!imageItem) {\n              return false;\n            }\n\n            const file = imageItem.getAsFile();\n\n            if (!file) {\n              return false;\n            }\n\n            // Example 1: insert as base64 immediately\n            const reader = new FileReader();\n\n            reader.onload = () => {\n              const src = reader.result;\n\n              if (typeof src !== 'string') {\n                return;\n              }\n\n              editor.commands.insertContent({\n                type: 'imageUploadNode',\n                attrs: {\n                  src,\n                  loaded: true,\n                },\n              });\n            };\n\n            reader.readAsDataURL(file);\n\n            return true;\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image.js","names":["_core","require","_react","_state","_react2","_interopRequireDefault","_imageComponent","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","nodeKey","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type","attrs","concat","Date","now","Math","random","toString","slice","addProseMirrorPlugins","editor","Plugin","handlePaste","view","event","_event$clipboardData","items","Array","from","clipboardData","imageItem","find","item","kind","startsWith","file","getAsFile","reader","FileReader","onload","result","readAsDataURL"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { mergeAttributes, Node } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport { Plugin } from '@tiptap/pm/state';\nimport React from 'react';\nimport ImageComponent from './image-component';\nimport { node } from 'prop-types';\n\nexport const ImageUploadNode = Node.create({\n  name: 'imageUploadNode',\n\n  group: 'block',\n  atom: true, // ✅ prevents content holes\n  selectable: true, // optional\n  draggable: true, // optional\n\n  addAttributes() {\n    return {\n      nodeKey: { default: null },\n      loaded: { default: false },\n      deleteStatus: { default: null },\n      alignment: { default: null },\n      percent: { default: null },\n      width: { default: null },\n      height: { default: null },\n      src: { default: null },\n      alt: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'img[data-type=\"image-upload-node\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n  },\n\n  addCommands() {\n    return {\n      setImageUploadNode:\n        () =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: this.name,\n              // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images\n              attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },\n          });\n        },\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const editor = this.editor;\n\n    return [\n      new Plugin({\n        props: {\n          handlePaste(view, event) {\n            const items = Array.from(event.clipboardData?.items || []);\n\n            const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));\n\n            if (!imageItem) {\n              return false;\n            }\n\n            const file = imageItem.getAsFile();\n\n            if (!file) {\n              return false;\n            }\n\n            // Example 1: insert as base64 immediately\n            const reader = new FileReader();\n\n            reader.onload = () => {\n              const src = reader.result;\n\n              if (typeof src !== 'string') {\n                return;\n              }\n\n              editor.commands.insertContent({\n                type: 'imageUploadNode',\n                attrs: {\n                  src,\n                  loaded: true,\n                  nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,\n                },\n              });\n            };\n\n            reader.readAsDataURL(file);\n\n            return true;\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.0-next.32",
+  "version": "1.2.0-next.34",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "434e83e0c559a566a1993422c07b79701f13a809",
+  "gitHead": "deace2ad16b79cd8ca6d955819d722ba36adf09e",
   "scripts": {}
 }

package/src/__tests__/EditableHtml.test.jsx

@@ -85,6 +85,14 @@ jest.mock('../extensions/ensure-empty-root-div', () => ({
   EnsureEmptyRootIsDiv: {},
 }));
 
+jest.mock('../extensions/extended-list-item', () => ({
+  ExtendedListItem: {},
+}));
+
+jest.mock('../extensions/ensure-list-item-content-is-div', () => ({
+  EnsureListItemContentIsDiv: {},
+}));
+
 jest.mock('../extensions/responseArea', () => ({
   ExplicitConstructedResponseNode: {
     configure: jest.fn(() => ({})),

package/src/__tests__/index.test.jsx

@@ -36,6 +36,8 @@ jest.mock('../extensions/extended-table-cell', () => ({
 }));
 jest.mock('../extensions/extended-table', () => ({ __esModule: true, default: {} }));
 jest.mock('../extensions/ensure-empty-root-div', () => ({ EnsureEmptyRootIsDiv: {} }));
+jest.mock('../extensions/extended-list-item', () => ({ ExtendedListItem: {} }));
+jest.mock('../extensions/ensure-list-item-content-is-div', () => ({ EnsureListItemContentIsDiv: {} }));
 jest.mock('../extensions/responseArea', () => ({
   ExplicitConstructedResponseNode: { configure: jest.fn(() => ({})) },
   DragInTheBlankNode: { configure: jest.fn(() => ({})) },

package/src/components/EditableHtml.jsx

@@ -16,6 +16,7 @@ import ExtendedTable from '../extensions/extended-table';
 import { ExtendedTableCell, ExtendedTableHeader } from '../extensions/extended-table-cell';
 import { DivNode } from '../extensions/div-node';
 import { EnsureEmptyRootIsDiv } from '../extensions/ensure-empty-root-div';
+import { EnsureListItemContentIsDiv } from '../extensions/ensure-list-item-content-is-div';
 import { TableRow } from '@tiptap/extension-table-row';
 import {
   DragInTheBlankNode,
@@ -28,6 +29,7 @@ import { MathNode } from '../extensions/math';
 import { ImageUploadNode } from '../extensions/image';
 import { Media } from '../extensions/media';
 import { CSSMark } from '../extensions/css';
+import { ExtendedListItem } from '../extensions/extended-list-item';
 
 import EditorContainer from './TiptapContainer';
 import { valueToSize } from '../utils/size';
@@ -164,8 +166,10 @@ export const EditableHtml = (props) => {
         notAfter: ['paragraph', 'div'],
       },
     }),
+    ExtendedListItem,
     DivNode,
     EnsureEmptyRootIsDiv,
+    EnsureListItemContentIsDiv,
     Placeholder.configure({
       placeholder: props.placeholder,
       // show placeholder even when editor is focused
@@ -206,7 +210,9 @@ export const EditableHtml = (props) => {
           }),
         insertImageRequested:
           props.imageSupport &&
-          ((editor, addedImage, getHandler) => {
+          ((editor, imageInfo, getHandler) => {
+            const [addedImage, pos] = imageInfo;
+
             const onFinish = (result) => {
               let cb;
 
@@ -215,7 +221,7 @@ export const EditableHtml = (props) => {
                 cb = props.onChange;
               }
 
-              removePendingImage(addedImage.pos);
+              removePendingImage(pos);
               cb?.(editor.getHTML());
             };
 
@@ -236,7 +242,7 @@ export const EditableHtml = (props) => {
                   return;
                 }
 
-                removePendingImage(addedImage.pos);
+                removePendingImage(pos);
                 editor._insertingImage = false;
                 detach();
               }, 500);

package/src/components/__tests__/InsertImageHandler.test.js

@@ -6,14 +6,14 @@ describe('InsertImageHandler', () => {
     nodeSize: 1,
   };
 
+  const NODE_POS = 5;
+
+  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
+
   const createMockEditor = () => ({
     _insertingImage: true,
     state: {
-      doc: {
-        descendants: jest.fn((callback) => {
-          callback(mockNode, 5);
-        }),
-      },
+      doc: {},
       tr: {
         setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
         delete: jest.fn((from, to) => ({ delete: jest.fn() })),
@@ -32,34 +32,36 @@ describe('InsertImageHandler', () => {
 
   it('creates handler instance', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const info = nodeInfo();
+    const handler = new InsertImageHandler(editor, info, mockOnFinish);
     expect(handler).toBeDefined();
     expect(handler.editor).toBe(editor);
+    expect(handler.nodeInfo).toBe(info);
     expect(handler.node).toBe(mockNode);
     expect(handler.onFinish).toBe(mockOnFinish);
   });
 
-  it('stores nodePos from descendants', () => {
+  it('stores nodePos from nodeInfo tuple', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
-    expect(handler.nodePos).toBe(5);
+    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
+    expect(handler.nodePos).toBe(42);
   });
 
   it('stores isPasted parameter', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish, true);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
     expect(handler.isPasted).toBe(true);
   });
 
   it('defaults isPasted to false', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.isPasted).toBe(false);
   });
 
   it('cancel deletes node and calls onFinish', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.cancel();
     expect(mockOnFinish).toHaveBeenCalledWith(false);
     expect(editor._insertingImage).toBe(false);
@@ -70,16 +72,16 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.updateNode({ newAttr: 'newValue' });
 
-    expect(mockNodeAt).toHaveBeenCalledWith(5);
+    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
     expect(editor.view.dispatch).toHaveBeenCalled();
   });
 
   it('done calls onFinish with false on error', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
 
     handler.done('error', null);
@@ -95,7 +97,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.done(null, 'http://example.com/image.jpg');
 
     expect(editor.view.dispatch).toHaveBeenCalled();
@@ -105,7 +107,7 @@ describe('InsertImageHandler', () => {
 
   it('fileChosen returns early when no file provided', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.fileChosen(null);
     expect(editor.view.dispatch).not.toHaveBeenCalled();
   });
@@ -115,7 +117,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
 
     global.FileReader = jest.fn(function () {
@@ -136,7 +138,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.progress(50, 500, 1000);
 
     expect(editor.view.dispatch).toHaveBeenCalled();
@@ -144,7 +146,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns the chosen file', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
     handler.chosenFile = mockFile;
 
@@ -153,7 +155,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns null initially', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.getChosenFile()).toBeNull();
   });
 });

package/src/components/image/InsertImageHandler.js

@@ -11,20 +11,11 @@ const log = debug('@pie-lib:editable-html:image:insert-image-handler');
  * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
  */
 class InsertImageHandler {
-  constructor(editor, node, onFinish, isPasted = false) {
+  constructor(editor, nodeInfo, onFinish, isPasted = false) {
     this.editor = editor;
-    this.node = node;
-
-    let nodePos;
-
-    editor.state.doc.descendants((node, pos) => {
-      if (node === this.node) {
-        nodePos = pos;
-        return false;
-      }
-    });
-
-    this.nodePos = nodePos;
+    this.nodeInfo = nodeInfo;
+    this.node = nodeInfo[0];
+    this.nodePos = nodeInfo[1];
     this.onFinish = onFinish;
     this.isPasted = isPasted;
     this.chosenFile = null;

package/src/extensions/__tests__/ensure-list-item-content-is-div.test.js

@@ -0,0 +1,44 @@
+import { EnsureListItemContentIsDiv } from '../ensure-list-item-content-is-div';
+
+describe('EnsureListItemContentIsDiv', () => {
+  it('registers a ProseMirror plugin that rewrites listItem paragraph children to div', () => {
+    const plugins = EnsureListItemContentIsDiv.config.addProseMirrorPlugins();
+    expect(Array.isArray(plugins)).toBe(true);
+    expect(plugins).toHaveLength(1);
+
+    const plugin = plugins[0];
+    const divType = { name: 'div' };
+    const tr = { setNodeMarkup: jest.fn() };
+
+    const paragraphChild = {
+      type: { name: 'paragraph' },
+      attrs: { class: 'x' },
+      nodeSize: 6,
+    };
+
+    const listItemNode = {
+      type: { name: 'listItem' },
+      forEach: (cb) => cb(paragraphChild),
+    };
+
+    const newState = {
+      schema: { nodes: { div: divType } },
+      tr,
+      doc: {
+        descendants: (cb) => cb(listItemNode, 10),
+      },
+    };
+
+    const result = plugin.spec.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.setNodeMarkup).toHaveBeenCalledWith(11, divType, paragraphChild.attrs);
+    expect(result).toBe(tr);
+  });
+
+  it('returns null when there is no document change', () => {
+    const plugin = EnsureListItemContentIsDiv.config.addProseMirrorPlugins()[0];
+
+    const result = plugin.spec.appendTransaction([{ docChanged: false }], {}, {});
+    expect(result).toBeNull();
+  });
+});

package/src/extensions/__tests__/extended-list-item.test.js

@@ -0,0 +1,13 @@
+import { ExtendedListItem } from '../extended-list-item';
+
+describe('ExtendedListItem', () => {
+  it('extends listItem and prefers div over paragraph in content spec', () => {
+    expect(ExtendedListItem.name).toBe('listItem');
+
+    const content =
+      ExtendedListItem.options?.content ?? ExtendedListItem.config?.content ?? ExtendedListItem.extendOptions?.content;
+
+    expect(String(content)).toMatch(/^\(div \| paragraph/);
+    expect(String(content)).toContain('imageUploadNode');
+  });
+});

package/src/extensions/__tests__/image-component.test.jsx

@@ -45,13 +45,26 @@ describe('ImageComponent', () => {
     },
     state: {
       selection,
+      doc: {
+        descendants: jest.fn(),
+        nodeAt: jest.fn(),
+      },
+      tr: {
+        setNodeMarkup: jest.fn().mockReturnThis(),
+        delete: jest.fn().mockReturnThis(),
+      },
+    },
+    view: {
+      dispatch: jest.fn(),
     },
   });
 
   let mockEditor = createMockEditor();
 
   const mockNode = {
+    type: { name: 'imageUploadNode' },
     attrs: {
+      nodeKey: 'test-key-123',
       src: 'test.jpg',
       width: 100,
       height: 100,
@@ -88,6 +101,8 @@ describe('ImageComponent', () => {
     mockEditor = createMockEditor();
     defaultProps.editor = mockEditor;
     defaultProps.getPos = jest.fn(() => MOCK_NODE_POS);
+    mockEditor.state.doc.descendants.mockImplementation((cb) => cb(mockNode, 0));
+    mockEditor.state.doc.nodeAt.mockReturnValue(mockNode);
   });
 
   it('renders without crashing', () => {
@@ -209,7 +224,7 @@ describe('ImageComponent', () => {
     expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
   });
 
-  it('calls insertImageRequested with editor and node when empty placeholder is solely selected', async () => {
+  it('calls insertImageRequested with editor and [node, pos] when empty placeholder is solely selected', async () => {
     const placeholderNode = {
       ...mockNode,
       nodeSize: 1,
@@ -230,7 +245,7 @@ describe('ImageComponent', () => {
 
     expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalledWith(
       mockEditor,
-      expect.objectContaining({ ...placeholderNode, pos: MOCK_NODE_POS }),
+      [placeholderNode, MOCK_NODE_POS],
       expect.any(Function),
     );
     expect(defaultProps.getPos).toHaveBeenCalled();
@@ -261,7 +276,12 @@ describe('ImageComponent', () => {
       fireEvent.click(centerButton);
     });
 
-    expect(mockEditor.commands.updateAttributes).toHaveBeenCalledWith('imageUploadNode', { alignment: 'center' });
+    expect(mockEditor.state.tr.setNodeMarkup).toHaveBeenCalledWith(
+      0,
+      undefined,
+      expect.objectContaining({ alignment: 'center' }),
+    );
+    expect(mockEditor.view.dispatch).toHaveBeenCalled();
   });
 
   it('toolbar is shown when selected', async () => {