@pie-lib/editable-html-tip-tap 1.2.0-next.8 → 2.0.0

package/lib/styles/editorContainerStyles.js

@@ -63,7 +63,7 @@ var styles = function styles(theme) {
         background: 'var(--black)',
         borderRadius: '0.5rem',
         color: 'var(--white)',
-        fontFamily: "'JetBrainsMono', monospace",
+        fontFamily: '\'JetBrainsMono\', monospace',
         margin: '1.5rem 0',
         padding: '0.75rem 1rem',
         '& code': {
@@ -74,9 +74,10 @@ var styles = function styles(theme) {
         }
       },
       '& blockquote': {
-        borderLeft: '3px solid var(--gray-3)',
-        margin: '1.5rem 0',
-        paddingLeft: '1rem'
+        background: '#f9f9f9',
+        borderLeft: '5px solid #ccc',
+        margin: '1.5em 10px',
+        padding: '.5em 10px'
       },
       '& hr': {
         border: 'none',

package/lib/styles/editorContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editorContainerStyles.js","names":["_renderUi","require","styles","theme","root","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","paddingLeft","borderTop","tableLayout","width","borderCollapse","text","textAlign","children","editorHolder","overflowY","disabledScrollbar","display","scrollbarWidth","error","concat","palette","main","noBorder","noPadding","toolbarOnTop","_default","exports"],"sources":["../../src/styles/editorContainerStyles.js"],"sourcesContent":["import { color } from '@pie-lib/render-ui';\n\nconst styles = (theme) => ({\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px',\n    },\n\n    '&:first-child': {\n      marginTop: 0,\n    },\n\n    '& ul, & ol': {\n      padding: '0 1rem',\n      margin: '1.25rem 1rem 1.25rem 0.4rem',\n    },\n\n    '& ul li p, & ol li p': {\n      marginTop: '0.25em',\n      marginBottom: '0.25em',\n    },\n\n    '& h1, & h2, & h3, & h4, & h5, & h6': {\n      lineHeight: 1.1,\n      marginTop: '2.5rem',\n      textWrap: 'pretty',\n    },\n\n    '& h1, & h2': {\n      marginTop: '3.5rem',\n      marginBottom: '1.5rem',\n    },\n\n    '& h1': {\n      fontSize: '1.4rem',\n    },\n\n    '& h2': {\n      fontSize: '1.2rem',\n    },\n\n    '& h3': {\n      fontSize: '1.1rem',\n    },\n\n    '& h4, & h5, & h6': {\n      fontSize: '1rem',\n    },\n\n    '& code': {\n      backgroundColor: 'var(--purple-light)',\n      borderRadius: '0.4rem',\n      color: 'var(--black)',\n      fontSize: '0.85rem',\n      padding: '0.25em 0.3em',\n    },\n\n    '& pre': {\n      background: 'var(--black)',\n      borderRadius: '0.5rem',\n      color: 'var(--white)',\n      fontFamily: \"'JetBrainsMono', monospace\",\n      margin: '1.5rem 0',\n      padding: '0.75rem 1rem',\n\n      '& code': {\n        background: 'none',\n        color: 'inherit',\n        fontSize: '0.8rem',\n        padding: 0,\n      },\n    },\n\n    '& blockquote': {\n      borderLeft: '3px solid var(--gray-3)',\n      margin: '1.5rem 0',\n      paddingLeft: '1rem',\n    },\n\n    '& hr': {\n      border: 'none',\n      borderTop: '1px solid var(--gray-2)',\n      margin: '2rem 0',\n    },\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5',\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center',\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5',\n    },\n  },\n  children: {\n    padding: '10px 16px',\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'auto',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  },\n  noBorder: {\n    border: 'none',\n  },\n  noPadding: {\n    padding: 0,\n  },\n  toolbarOnTop: {\n    marginTop: '45px',\n  },\n});\n\nexport default styles;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"editorContainerStyles.js","names":["_renderUi","require","styles","theme","root","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","borderTop","tableLayout","width","borderCollapse","text","textAlign","children","editorHolder","overflowY","disabledScrollbar","display","scrollbarWidth","error","concat","palette","main","noBorder","noPadding","toolbarOnTop","_default","exports"],"sources":["../../src/styles/editorContainerStyles.js"],"sourcesContent":["import { color } from '@pie-lib/render-ui';\n\nconst styles = (theme) => ({\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px',\n    },\n\n    '&:first-child': {\n      marginTop: 0,\n    },\n\n    '& ul, & ol': {\n      padding: '0 1rem',\n      margin: '1.25rem 1rem 1.25rem 0.4rem',\n    },\n\n    '& ul li p, & ol li p': {\n      marginTop: '0.25em',\n      marginBottom: '0.25em',\n    },\n\n    '& h1, & h2, & h3, & h4, & h5, & h6': {\n      lineHeight: 1.1,\n      marginTop: '2.5rem',\n      textWrap: 'pretty',\n    },\n\n    '& h1, & h2': {\n      marginTop: '3.5rem',\n      marginBottom: '1.5rem',\n    },\n\n    '& h1': {\n      fontSize: '1.4rem',\n    },\n\n    '& h2': {\n      fontSize: '1.2rem',\n    },\n\n    '& h3': {\n      fontSize: '1.1rem',\n    },\n\n    '& h4, & h5, & h6': {\n      fontSize: '1rem',\n    },\n\n    '& code': {\n      backgroundColor: 'var(--purple-light)',\n      borderRadius: '0.4rem',\n      color: 'var(--black)',\n      fontSize: '0.85rem',\n      padding: '0.25em 0.3em',\n    },\n\n    '& pre': {\n      background: 'var(--black)',\n      borderRadius: '0.5rem',\n      color: 'var(--white)',\n      fontFamily: '\\'JetBrainsMono\\', monospace',\n      margin: '1.5rem 0',\n      padding: '0.75rem 1rem',\n\n      '& code': {\n        background: 'none',\n        color: 'inherit',\n        fontSize: '0.8rem',\n        padding: 0,\n      },\n    },\n\n    '& blockquote': {\n      background: '#f9f9f9',\n      borderLeft: '5px solid #ccc',\n      margin: '1.5em 10px',\n      padding: '.5em 10px',\n    },\n\n    '& hr': {\n      border: 'none',\n      borderTop: '1px solid var(--gray-2)',\n      margin: '2rem 0',\n    },\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5',\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center',\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5',\n    },\n  },\n  children: {\n    padding: '10px 16px',\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'auto',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  },\n  noBorder: {\n    border: 'none',\n  },\n  noPadding: {\n    padding: 0,\n  },\n  toolbarOnTop: {\n    marginTop: '45px',\n  },\n});\n\nexport default styles;\n"],"mappings":"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","ignoreList":[]}

package/lib/utils/helper.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeInitialMarkup = void 0;
+var escapeHtml = function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+};
+var normalizeInitialMarkup = exports.normalizeInitialMarkup = function normalizeInitialMarkup(markup) {
+  var trimmed = String(markup !== null && markup !== void 0 ? markup : '').trim();
+  if (!trimmed) return '<div></div>';
+  var looksLikeHtml = /<[^>]+>/.test(trimmed);
+  if (looksLikeHtml) return trimmed;
+  return "<div>".concat(escapeHtml(trimmed), "</div>");
+};
+//# sourceMappingURL=helper.js.map

package/lib/utils/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","names":["escapeHtml","str","String","replace","normalizeInitialMarkup","exports","markup","trimmed","trim","looksLikeHtml","test","concat"],"sources":["../../src/utils/helper.js"],"sourcesContent":["const escapeHtml = (str) =>\n  String(str)\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n\nexport const normalizeInitialMarkup = (markup) => {\n  const trimmed = String(markup ?? '').trim();\n  if (!trimmed) return '<div></div>';\n\n  const looksLikeHtml = /<[^>]+>/.test(trimmed);\n  if (looksLikeHtml) return trimmed;\n\n  return `<div>${escapeHtml(trimmed)}</div>`;\n};\n"],"mappings":";;;;;;AAAA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,GAAG;EAAA,OACrBC,MAAM,CAACD,GAAG,CAAC,CACRE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CACtBA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CACrBA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CACrBA,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CACvBA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAAA;AAEpB,IAAMC,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAIE,MAAM,EAAK;EAChD,IAAMC,OAAO,GAAGL,MAAM,CAACI,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,EAAE,CAAC,CAACE,IAAI,CAAC,CAAC;EAC3C,IAAI,CAACD,OAAO,EAAE,OAAO,aAAa;EAElC,IAAME,aAAa,GAAG,SAAS,CAACC,IAAI,CAACH,OAAO,CAAC;EAC7C,IAAIE,aAAa,EAAE,OAAOF,OAAO;EAEjC,eAAAI,MAAA,CAAeX,UAAU,CAACO,OAAO,CAAC;AACpC,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.0-next.8",
+  "version": "2.0.0",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,11 +16,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^3.2.0-next.2",
-    "@pie-lib/math-input": "^7.2.0-next.2",
-    "@pie-lib/math-rendering": "^4.2.0-next.1",
-    "@pie-lib/math-toolbar": "^2.2.0-next.3",
-    "@pie-lib/render-ui": "^5.2.0-next.2",
+    "@pie-lib/drag": "^4.0.0",
+    "@pie-lib/math-input": "^8.0.0",
+    "@pie-lib/math-rendering": "^5.0.0",
+    "@pie-lib/math-toolbar": "^3.0.0",
+    "@pie-lib/render-ui": "^6.0.0",
     "@tiptap/core": "3.0.9",
     "@tiptap/extension-character-count": "3.0.9",
     "@tiptap/extension-color": "3.0.9",
@@ -52,13 +52,13 @@
     "to-style": "^1.3.3"
   },
   "devDependencies": {
-    "@pie-framework/mathquill": "^1.1.3",
+    "@pie-framework/mathquill": "1.2.1-beta.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "01fa85c5f94bfdef2cd95f49bd465ec0b702fe6d",
+  "gitHead": "bf0904ba8bdd2d6f88fb8ad99060e45e40180348",
   "scripts": {}
 }

package/src/__tests__/EditableHtml.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { useEditor } from '@tiptap/react';
 import { EditableHtml } from '../components/EditableHtml';
 
 // Mock TipTap dependencies
@@ -24,7 +25,9 @@ jest.mock('@tiptap/react', () => ({
 
 jest.mock('@tiptap/starter-kit', () => ({
   __esModule: true,
-  default: {},
+  default: {
+    configure: jest.fn(() => ({})),
+  },
 }));
 
 jest.mock('@tiptap/extension-text-style', () => ({
@@ -68,12 +71,9 @@ jest.mock('@tiptap/extension-table-row', () => ({
   TableRow: {},
 }));
 
-jest.mock('@tiptap/extension-table-cell', () => ({
-  TableCell: {},
-}));
-
-jest.mock('@tiptap/extension-table-header', () => ({
-  TableHeader: {},
+jest.mock('../extensions/extended-table-cell', () => ({
+  ExtendedTableCell: {},
+  ExtendedTableHeader: {},
 }));
 
 jest.mock('../extensions/extended-table', () => ({
@@ -81,6 +81,18 @@ jest.mock('../extensions/extended-table', () => ({
   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(() => ({})),
@@ -91,6 +103,9 @@ jest.mock('../extensions/responseArea', () => ({
   InlineDropdownNode: {
     configure: jest.fn(() => ({})),
   },
+  MathTemplatedNode: {
+    configure: jest.fn(() => ({})),
+  },
   ResponseAreaExtension: {
     configure: jest.fn(() => ({})),
   },
@@ -263,4 +278,75 @@ describe('EditableHtml', () => {
     const { container } = render(<EditableHtml {...defaultProps} disableImageAlignmentButtons={true} />);
     expect(container).toBeInTheDocument();
   });
+
+  it('calls editorRef callback when editor is initialized', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+    });
+  });
+
+  it('calls editorRef with the editor instance', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+      // Verify it was called with an object that has editor-like properties
+      const callArg = editorRef.mock.calls[0][0];
+      expect(callArg).toHaveProperty('getHTML');
+      expect(callArg).toHaveProperty('commands');
+    });
+  });
+
+  it('handles editorRef being undefined', () => {
+    const { container } = render(<EditableHtml {...defaultProps} editorRef={undefined} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('applies flex display to StyledEditorContent', async () => {
+    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
+    await waitFor(() => {
+      const editorContent = getByTestId('editor-content');
+      expect(editorContent).toBeInTheDocument();
+    });
+  });
+
+  it('does not run blur onChange/onDone while an image insert flow is active', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ ...defaultProps.toolbarOpts, doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const blurEditor = {
+      getHTML: jest.fn(() => '<p>changed</p>'),
+      _insertingImage: true,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
 });

package/src/__tests__/index.test.jsx

@@ -13,7 +13,10 @@ jest.mock('@tiptap/react', () => ({
   useEditorState: jest.fn(() => ({ isFocused: false })),
 }));
 
-jest.mock('@tiptap/starter-kit', () => ({ __esModule: true, default: {} }));
+jest.mock('@tiptap/starter-kit', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
 jest.mock('@tiptap/extension-text-style', () => ({ TextStyleKit: {} }));
 jest.mock('@tiptap/extension-character-count', () => ({
   CharacterCount: { configure: jest.fn(() => ({})) },
@@ -27,9 +30,14 @@ jest.mock('@tiptap/extension-text-align', () => ({
 jest.mock('@tiptap/extension-image', () => ({ __esModule: true, default: {} }));
 jest.mock('@tiptap/extension-table', () => ({ __esModule: true, default: {} }));
 jest.mock('@tiptap/extension-table-row', () => ({ TableRow: {} }));
-jest.mock('@tiptap/extension-table-cell', () => ({ TableCell: {} }));
-jest.mock('@tiptap/extension-table-header', () => ({ TableHeader: {} }));
+jest.mock('../extensions/extended-table-cell', () => ({
+  ExtendedTableCell: {},
+  ExtendedTableHeader: {},
+}));
 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/CharacterPicker.jsx

@@ -121,6 +121,7 @@ export function CharacterPicker({ editor, opts, onClose }) {
         <div
           ref={containerRef}
           className="insert-character-dialog"
+          data-toolbar-for={editor.instanceId}
           style={{
             visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
             position: 'absolute',

package/src/components/EditableHtml.jsx

@@ -1,5 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash-es/debounce';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { styled } from '@mui/material/styles';
 import StarterKit from '@tiptap/starter-kit';
 import { TextStyleKit } from '@tiptap/extension-text-style';
 import { CharacterCount } from '@tiptap/extension-character-count';
@@ -8,23 +10,26 @@ import SubScript from '@tiptap/extension-subscript';
 import TextAlign from '@tiptap/extension-text-align';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
-import { styled } from '@mui/material/styles';
-import debounce from 'lodash-es/debounce';
+import { normalizeInitialMarkup } from '../utils/helper';
 
 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 { TableCell } from '@tiptap/extension-table-cell';
-import { TableHeader } from '@tiptap/extension-table-header';
 import {
   DragInTheBlankNode,
   ExplicitConstructedResponseNode,
   InlineDropdownNode,
+  MathTemplatedNode,
   ResponseAreaExtension,
 } from '../extensions/responseArea';
 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';
@@ -96,6 +101,19 @@ export const EditableHtml = (props) => {
   const [scheduled, setScheduled] = useState(false);
   const { toolbarOpts } = props;
 
+  const removePendingImage = useCallback(
+    (imagePos) => {
+      setPendingImages((prev) => {
+        const next = prev.filter((img) => img.pos !== imagePos);
+        if (next.length === 0) {
+          setScheduled(false);
+        }
+        return next;
+      });
+    },
+    [setPendingImages],
+  );
+
   const toolbarOptsToUse = {
     ...defaultToolbarOpts,
     ...toolbarOpts,
@@ -134,11 +152,24 @@ export const EditableHtml = (props) => {
   }, [props]);
 
   const extensions = [
+    TextAlign.configure({
+      types: ['heading', 'paragraph', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
+      alignments: ['left', 'right', 'center', 'justify'],
+    }),
     TextStyleKit,
     CharacterCount.configure({
       limit: props.charactersLimit || 1000000,
     }),
-    StarterKit,
+    StarterKit.configure({
+      trailingNode: {
+        node: 'paragraph',
+        notAfter: ['paragraph', 'div'],
+      },
+    }),
+    ExtendedListItem,
+    DivNode,
+    EnsureEmptyRootIsDiv,
+    EnsureListItemContentIsDiv,
     Placeholder.configure({
       placeholder: props.placeholder,
       // show placeholder even when editor is focused
@@ -148,27 +179,25 @@ export const EditableHtml = (props) => {
     }),
     ExtendedTable,
     TableRow,
-    TableHeader,
-    TableCell,
+    ExtendedTableHeader,
+    ExtendedTableCell,
     ResponseAreaExtension.configure(props.responseAreaProps),
     ExplicitConstructedResponseNode.configure(props.responseAreaProps),
     DragInTheBlankNode.configure(props.responseAreaProps),
     InlineDropdownNode.configure(props.responseAreaProps),
+    MathTemplatedNode.configure(props.responseAreaProps),
     MathNode.configure({
       toolbarOpts: toolbarOptsToUse,
+      math: props.pluginProps?.math || {},
     }),
     SubScript,
     SuperScript,
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-      alignments: ['left', 'right', 'center'],
-    }),
     Image,
     ImageUploadNode.configure({
       toolbarOpts: toolbarOptsToUse,
       imageHandling: {
         disableImageAlignmentButtons: props.disableImageAlignmentButtons,
-        onDone: () => props.onDone?.(editor.getHTML()),
+        onDone: (editor) => props.onDone?.(editor.getHTML()),
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
@@ -176,19 +205,14 @@ export const EditableHtml = (props) => {
             const { src } = node.attrs;
 
             props.imageSupport.delete(src, (e) => {
-              const newPendingImages = pendingImages.filter((img) => img.key !== node.key);
-              const newState = {
-                pendingImages: newPendingImages,
-                scheduled: scheduled && newPendingImages.length === 0 ? false : scheduled,
-              };
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(node.pos);
             });
           }),
         insertImageRequested:
           props.imageSupport &&
-          ((addedImage, getHandler) => {
+          ((editor, imageInfo, getHandler) => {
+            const [addedImage, pos] = imageInfo;
+
             const onFinish = (result) => {
               let cb;
 
@@ -197,29 +221,39 @@ export const EditableHtml = (props) => {
                 cb = props.onChange;
               }
 
-              const newPendingImages = pendingImages.filter((img) => img.key !== addedImage.key);
-              const newState = {
-                pendingImages: newPendingImages,
-              };
-
-              if (newPendingImages.length === 0) {
-                newState.scheduled = false;
-              }
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(pos);
               cb?.(editor.getHTML());
             };
+
             const callback = () => {
               /**
                * The handler is the object through which the outer context
                * communicates file upload events like: fileChosen, cancel, progress
                */
               const handler = getHandler(onFinish);
+
+              // If the user closes the file picker without choosing a file, the window regains
+              // focus while _insertingImage is still true — drop the stale pending entry.
+              const focusHandler = debounce(() => {
+                const detach = () => window.removeEventListener('focus', focusHandler);
+
+                if (!editor._insertingImage) {
+                  detach();
+                  return;
+                }
+
+                removePendingImage(pos);
+                editor._insertingImage = false;
+                detach();
+              }, 500);
+
+              window.addEventListener('focus', focusHandler);
+
               props.imageSupport.add(handler);
             };
 
-            setPendingImages([...pendingImages, addedImage]);
+            editor._insertingImage = true;
+            setPendingImages((prev) => [...prev, addedImage]);
             callback();
           }),
         maxImageWidth: props.maxImageWidth,
@@ -250,7 +284,7 @@ export const EditableHtml = (props) => {
         },
       },
       editable: !props.disabled,
-      content: props.markup,
+      content: normalizeInitialMarkup(props.markup),
       onUpdate: ({ editor, transaction }) => {
         if (transaction.isDone) {
           props.onChange?.(editor.getHTML());
@@ -258,6 +292,7 @@ export const EditableHtml = (props) => {
       },
       onBlur: debounce(({ editor }) => {
         const otherToolbarOpened =
+          editor._insertingImage ||
           editor._toolbarOpened ||
           editor.isActive('inline_dropdown') ||
           editor.isActive('explicit_constructed_response');
@@ -278,6 +313,12 @@ export const EditableHtml = (props) => {
     [props.charactersLimit],
   );
 
+  useEffect(() => {
+    if (props.editorRef) {
+      props.editorRef(editor);
+    }
+  }, [props.editorRef, editor]);
+
   useEffect(() => {
     editor?.setEditable(!props.disabled);
   }, [props.disabled, editor]);
@@ -286,9 +327,10 @@ export const EditableHtml = (props) => {
     if (!editor) {
       return;
     }
+    const nextMarkup = normalizeInitialMarkup(props.markup);
 
-    if (props.markup !== editor.getHTML()) {
-      editor.commands.setContent(props.markup, false); // false = don’t emit update
+    if (nextMarkup !== editor.getHTML()) {
+      editor.commands.setContent(nextMarkup, false);
     }
   }, [props.markup, editor]);
 
@@ -347,26 +389,36 @@ export const EditableHtml = (props) => {
 const StyledEditorContent = styled(EditorContent, {
   shouldForwardProp: (prop) => !['showParagraph', 'separateParagraph'].includes(prop),
 })(({ showParagraph, separateParagraph }) => ({
+  display: 'flex',
   outline: 'none !important',
   '& .ProseMirror': {
+    flex: 1,
     padding: '5px',
     maxHeight: '500px',
     outline: 'none !important',
     position: 'initial',
-    '& > p': {
+
+    // reset default margins for all block paragraphs/divs in the editor
+    '& > p, & > div': {
       margin: '0',
     },
 
-    '& p.is-editor-empty:first-child::before': {
+    // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
+    '& p.is-editor-empty, & div.is-editor-empty': {
+      position: 'relative',
+    },
+    '& p.is-editor-empty::before, & div.is-editor-empty::before': {
       content: 'attr(data-placeholder)',
-      display: 'block',
+      position: 'absolute',
+      left: 0,
+      top: 0,
       color: '#9CA3AF',
       pointerEvents: 'none',
       whiteSpace: 'pre-wrap',
     },
 
     ...(showParagraph && {
-      '& > p:has(+ p)::after': {
+      '& > p:has(+ p)::after, & > div:has(+ div)::after': {
         display: 'block',
         content: '"¶"',
         fontSize: '1em',