@pie-lib/editable-html-tip-tap 2.1.0-next.0 → 2.1.0-next.2

package/lib/extensions/heading-paragraph.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingParagraph = void 0;
+var _core = require("@tiptap/core");
+/**
+ * HeadingParagraph extension
+ *
+ * Renders as <p data-heading="heading1"> in the HTML output instead of <h3>.
+ * This provides semantic heading styling without using a native heading element,
+ * as required by PIE's accessibility conventions.
+ */
+var HeadingParagraph = exports.HeadingParagraph = _core.Node.create({
+  name: 'headingParagraph',
+  group: 'block',
+  content: 'inline*',
+  defining: true,
+  addAttributes: function addAttributes() {
+    return {
+      'data-heading': {
+        "default": 'heading1',
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-heading');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return {
+            'data-heading': attributes['data-heading']
+          };
+        }
+      }
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: 'p[data-heading]'
+    }];
+  },
+  renderHTML: function renderHTML(_ref) {
+    var HTMLAttributes = _ref.HTMLAttributes;
+    return ['p', (0, _core.mergeAttributes)(HTMLAttributes), 0];
+  },
+  addCommands: function addCommands() {
+    return {
+      toggleHeadingParagraph: function toggleHeadingParagraph() {
+        return function (_ref2) {
+          var commands = _ref2.commands,
+            editor = _ref2.editor;
+          if (editor.isActive('headingParagraph')) {
+            return commands.setNode('paragraph');
+          }
+          return commands.setNode('headingParagraph', {
+            'data-heading': 'heading1'
+          });
+        };
+      }
+    };
+  }
+});
+//# sourceMappingURL=heading-paragraph.js.map

package/lib/extensions/heading-paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-paragraph.js","names":["_core","require","HeadingParagraph","exports","Node","create","name","group","content","defining","addAttributes","parseHTML","element","getAttribute","renderHTML","attributes","tag","_ref","HTMLAttributes","mergeAttributes","addCommands","toggleHeadingParagraph","_ref2","commands","editor","isActive","setNode"],"sources":["../../src/extensions/heading-paragraph.js"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core';\n\n/**\n * HeadingParagraph extension\n *\n * Renders as <p data-heading=\"heading1\"> in the HTML output instead of <h3>.\n * This provides semantic heading styling without using a native heading element,\n * as required by PIE's accessibility conventions.\n */\nexport const HeadingParagraph = Node.create({\n  name: 'headingParagraph',\n\n  group: 'block',\n\n  content: 'inline*',\n\n  defining: true,\n\n  addAttributes() {\n    return {\n      'data-heading': {\n        default: 'heading1',\n        parseHTML: (element) => element.getAttribute('data-heading'),\n        renderHTML: (attributes) => ({\n          'data-heading': attributes['data-heading'],\n        }),\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      { tag: 'p[data-heading]' },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['p', mergeAttributes(HTMLAttributes), 0];\n  },\n\n  addCommands() {\n    return {\n      toggleHeadingParagraph:\n        () =>\n        ({ commands, editor }) => {\n          if (editor.isActive('headingParagraph')) {\n            return commands.setNode('paragraph');\n          }\n          return commands.setNode('headingParagraph', { 'data-heading': 'heading1' });\n        },\n    };\n  },\n});\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,UAAI,CAACC,MAAM,CAAC;EAC1CC,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAE,OAAO;EAEdC,OAAO,EAAE,SAAS;EAElBC,QAAQ,EAAE,IAAI;EAEdC,aAAa,WAAbA,aAAaA,CAAA,EAAG;IACd,OAAO;MACL,cAAc,EAAE;QACd,WAAS,UAAU;QACnBC,SAAS,EAAE,SAAXA,SAASA,CAAGC,OAAO;UAAA,OAAKA,OAAO,CAACC,YAAY,CAAC,cAAc,CAAC;QAAA;QAC5DC,UAAU,EAAE,SAAZA,UAAUA,CAAGC,UAAU;UAAA,OAAM;YAC3B,cAAc,EAAEA,UAAU,CAAC,cAAc;UAC3C,CAAC;QAAA;MACH;IACF,CAAC;EACH,CAAC;EAEDJ,SAAS,WAATA,SAASA,CAAA,EAAG;IACV,OAAO,CACL;MAAEK,GAAG,EAAE;IAAkB,CAAC,CAC3B;EACH,CAAC;EAEDF,UAAU,WAAVA,UAAUA,CAAAG,IAAA,EAAqB;IAAA,IAAlBC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IACzB,OAAO,CAAC,GAAG,EAAE,IAAAC,qBAAe,EAACD,cAAc,CAAC,EAAE,CAAC,CAAC;EAClD,CAAC;EAEDE,WAAW,WAAXA,WAAWA,CAAA,EAAG;IACZ,OAAO;MACLC,sBAAsB,EACpB,SADFA,sBAAsBA,CAAA;QAAA,OAEpB,UAAAC,KAAA,EAA0B;UAAA,IAAvBC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;YAAEC,MAAM,GAAAF,KAAA,CAANE,MAAM;UACjB,IAAIA,MAAM,CAACC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;YACvC,OAAOF,QAAQ,CAACG,OAAO,CAAC,WAAW,CAAC;UACtC;UACA,OAAOH,QAAQ,CAACG,OAAO,CAAC,kBAAkB,EAAE;YAAE,cAAc,EAAE;UAAW,CAAC,CAAC;QAC7E,CAAC;MAAA;IACL,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/utils/helper.js

@@ -7,11 +7,67 @@ 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;');
 };
+
+/**
+ * Converts consecutive div elements into a single paragraph with line breaks.
+ * Example: "<div>A</div><div>B</div>" becomes "<p>A<br>B</p>"
+ */
+var convertConsecutiveDivsToParagraph = function convertConsecutiveDivsToParagraph(html) {
+  // Create a temporary element to parse the HTML
+  var temp = document.createElement('div');
+  temp.innerHTML = html;
+
+  // Get all top-level children
+  var children = Array.from(temp.children);
+
+  // Only convert if there are 2 or more divs
+  if (children.length < 2) {
+    return html;
+  }
+
+  // Check if all children are divs with simple content (text or inline elements)
+  var allDivs = children.every(function (child) {
+    return child.tagName === 'DIV';
+  });
+  if (!allDivs) {
+    return html;
+  }
+
+  // Check if divs have no attributes (only convert plain divs)
+  var hasNoAttributes = children.every(function (div) {
+    return div.attributes.length === 0;
+  });
+  if (!hasNoAttributes) {
+    return html;
+  }
+
+  // Check if divs contain only simple content (no nested block elements)
+  var hasOnlySimpleContent = children.every(function (div) {
+    return Array.from(div.children).every(function (child) {
+      var tag = child.tagName;
+      // Allow inline elements and br tags
+      return ['SPAN', 'B', 'I', 'EM', 'STRONG', 'U', 'SUB', 'SUP', 'A', 'CODE', 'BR'].includes(tag);
+    });
+  });
+  if (!hasOnlySimpleContent) {
+    return html;
+  }
+
+  // Convert to paragraph with br tags
+  var contents = children.map(function (div) {
+    return div.innerHTML;
+  });
+  return "<p>".concat(contents.join('<br>'), "</p>");
+};
 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>");
+  if (!looksLikeHtml) {
+    return "<div>".concat(escapeHtml(trimmed), "</div>");
+  }
+
+  // Apply the div-to-paragraph transformation
+  return convertConsecutiveDivsToParagraph(trimmed);
 };
 //# sourceMappingURL=helper.js.map

package/lib/utils/helper.js.map

@@ -1 +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":[]}
+{"version":3,"file":"helper.js","names":["escapeHtml","str","String","replace","convertConsecutiveDivsToParagraph","html","temp","document","createElement","innerHTML","children","Array","from","length","allDivs","every","child","tagName","hasNoAttributes","div","attributes","hasOnlySimpleContent","tag","includes","contents","map","concat","join","normalizeInitialMarkup","exports","markup","trimmed","trim","looksLikeHtml","test"],"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\n/**\n * Converts consecutive div elements into a single paragraph with line breaks.\n * Example: \"<div>A</div><div>B</div>\" becomes \"<p>A<br>B</p>\"\n */\nconst convertConsecutiveDivsToParagraph = (html) => {\n  // Create a temporary element to parse the HTML\n  const temp = document.createElement('div');\n  temp.innerHTML = html;\n\n  // Get all top-level children\n  const children = Array.from(temp.children);\n\n  // Only convert if there are 2 or more divs\n  if (children.length < 2) {\n    return html;\n  }\n\n  // Check if all children are divs with simple content (text or inline elements)\n  const allDivs = children.every((child) => child.tagName === 'DIV');\n\n  if (!allDivs) {\n    return html;\n  }\n\n  // Check if divs have no attributes (only convert plain divs)\n  const hasNoAttributes = children.every((div) => div.attributes.length === 0);\n\n  if (!hasNoAttributes) {\n    return html;\n  }\n\n  // Check if divs contain only simple content (no nested block elements)\n  const hasOnlySimpleContent = children.every((div) => {\n    return Array.from(div.children).every((child) => {\n      const tag = child.tagName;\n      // Allow inline elements and br tags\n      return ['SPAN', 'B', 'I', 'EM', 'STRONG', 'U', 'SUB', 'SUP', 'A', 'CODE', 'BR'].includes(tag);\n    });\n  });\n\n  if (!hasOnlySimpleContent) {\n    return html;\n  }\n\n  // Convert to paragraph with br tags\n  const contents = children.map((div) => div.innerHTML);\n  return `<p>${contents.join('<br>')}</p>`;\n};\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) {\n    return `<div>${escapeHtml(trimmed)}</div>`;\n  }\n\n  // Apply the div-to-paragraph transformation\n  return convertConsecutiveDivsToParagraph(trimmed);\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;;AAE3B;AACA;AACA;AACA;AACA,IAAMC,iCAAiC,GAAG,SAApCA,iCAAiCA,CAAIC,IAAI,EAAK;EAClD;EACA,IAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAC1CF,IAAI,CAACG,SAAS,GAAGJ,IAAI;;EAErB;EACA,IAAMK,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAACN,IAAI,CAACI,QAAQ,CAAC;;EAE1C;EACA,IAAIA,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;IACvB,OAAOR,IAAI;EACb;;EAEA;EACA,IAAMS,OAAO,GAAGJ,QAAQ,CAACK,KAAK,CAAC,UAACC,KAAK;IAAA,OAAKA,KAAK,CAACC,OAAO,KAAK,KAAK;EAAA,EAAC;EAElE,IAAI,CAACH,OAAO,EAAE;IACZ,OAAOT,IAAI;EACb;;EAEA;EACA,IAAMa,eAAe,GAAGR,QAAQ,CAACK,KAAK,CAAC,UAACI,GAAG;IAAA,OAAKA,GAAG,CAACC,UAAU,CAACP,MAAM,KAAK,CAAC;EAAA,EAAC;EAE5E,IAAI,CAACK,eAAe,EAAE;IACpB,OAAOb,IAAI;EACb;;EAEA;EACA,IAAMgB,oBAAoB,GAAGX,QAAQ,CAACK,KAAK,CAAC,UAACI,GAAG,EAAK;IACnD,OAAOR,KAAK,CAACC,IAAI,CAACO,GAAG,CAACT,QAAQ,CAAC,CAACK,KAAK,CAAC,UAACC,KAAK,EAAK;MAC/C,IAAMM,GAAG,GAAGN,KAAK,CAACC,OAAO;MACzB;MACA,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CAACM,QAAQ,CAACD,GAAG,CAAC;IAC/F,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,IAAI,CAACD,oBAAoB,EAAE;IACzB,OAAOhB,IAAI;EACb;;EAEA;EACA,IAAMmB,QAAQ,GAAGd,QAAQ,CAACe,GAAG,CAAC,UAACN,GAAG;IAAA,OAAKA,GAAG,CAACV,SAAS;EAAA,EAAC;EACrD,aAAAiB,MAAA,CAAaF,QAAQ,CAACG,IAAI,CAAC,MAAM,CAAC;AACpC,CAAC;AAEM,IAAMC,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAIE,MAAM,EAAK;EAChD,IAAMC,OAAO,GAAG7B,MAAM,CAAC4B,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,IAAI,CAACE,aAAa,EAAE;IAClB,eAAAP,MAAA,CAAe1B,UAAU,CAAC+B,OAAO,CAAC;EACpC;;EAEA;EACA,OAAO3B,iCAAiC,CAAC2B,OAAO,CAAC;AACnD,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.0-next.0",
+  "version": "2.1.0-next.2",
   "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": "^4.0.2-next.0",
+    "@pie-lib/drag": "^4.0.2-next.1",
     "@pie-lib/math-input": "^8.1.0-next.0",
     "@pie-lib/math-rendering": "^5.0.2-next.0",
-    "@pie-lib/math-toolbar": "^3.0.2-next.0",
-    "@pie-lib/render-ui": "^6.1.0-next.0",
+    "@pie-lib/math-toolbar": "^3.0.2-next.1",
+    "@pie-lib/render-ui": "^6.1.0-next.1",
     "@tiptap/core": "3.0.9",
     "@tiptap/extension-character-count": "3.0.9",
     "@tiptap/extension-color": "3.0.9",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "2cf9410d6d89313791f1c763904bdfbceb6b1742",
+  "gitHead": "7fc2719f4e3886ce25e5d9e2afd87367798da650",
   "scripts": {}
 }

package/src/__tests__/EditableHtml.test.jsx

@@ -349,4 +349,126 @@ describe('EditableHtml', () => {
 
     jest.useRealTimers();
   });
+
+  describe('onUpdate callback', () => {
+    it('calls onChange when transaction.isDone is true', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Initial content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Updated content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).toHaveBeenCalledWith('<p>Updated content</p>');
+    });
+
+    it('calls onChange when markup differs from editor HTML', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Initial content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Different content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: false,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).toHaveBeenCalledWith('<p>Different content</p>');
+    });
+
+    it('does not call onChange when transaction.isDone is false and markup matches editor HTML', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Same content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Same content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: false,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('calls onChange when transaction.isDone is true even if markup matches', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Same content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Same content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).toHaveBeenCalledWith('<p>Same content</p>');
+    });
+
+    it('does not call onChange when onChange is not provided', async () => {
+      const markup = '<p>Content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={undefined} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Updated content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      // Should not throw error when onChange is undefined
+      expect(() => {
+        editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+      }).not.toThrow();
+    });
+  });
 });

package/src/__tests__/div-to-paragraph-conversion.test.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { EditableHtml } from '../components/EditableHtml';
+
+describe('Div to Paragraph Conversion', () => {
+  it('converts consecutive divs to paragraph with br tags', async () => {
+    const markup = '<div>A</div><div>B</div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    // Wait for the editor to initialize
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Check that the content was converted to a paragraph
+    const paragraph = container.querySelector('.ProseMirror p');
+    expect(paragraph).toBeInTheDocument();
+
+    // Check that br tag is present
+    const br = container.querySelector('.ProseMirror p br');
+    expect(br).toBeInTheDocument();
+
+    // Verify the text content
+    expect(paragraph.textContent).toBe('AB');
+  });
+
+  it('converts three consecutive divs correctly', async () => {
+    const markup = '<div>First</div><div>Second</div><div>Third</div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    const paragraph = container.querySelector('.ProseMirror p');
+    expect(paragraph).toBeInTheDocument();
+
+    // Should have 2 br tags (between 3 items)
+    const brTags = container.querySelectorAll('.ProseMirror p br');
+    expect(brTags.length).toBe(2);
+
+    expect(paragraph.textContent).toBe('FirstSecondThird');
+  });
+
+  it('does not convert single div', async () => {
+    const markup = '<div>Single</div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Should remain as a div
+    const div = container.querySelector('.ProseMirror div');
+    expect(div).toBeInTheDocument();
+    expect(div.textContent).toBe('Single');
+  });
+
+  it('does not convert divs with attributes', async () => {
+    const markup = '<div class="test">A</div><div>B</div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Should remain as divs since one has an attribute
+    const divs = container.querySelectorAll('.ProseMirror div');
+    expect(divs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('handles divs with inline formatting', async () => {
+    const markup = '<div><strong>Bold</strong></div><div><em>Italic</em></div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Should be converted to paragraph
+    const paragraph = container.querySelector('.ProseMirror p');
+    expect(paragraph).toBeInTheDocument();
+
+    // Check that formatting is preserved
+    const strong = container.querySelector('.ProseMirror p strong');
+    const em = container.querySelector('.ProseMirror p em');
+    expect(strong).toBeInTheDocument();
+    expect(em).toBeInTheDocument();
+  });
+
+  it('does not convert mixed element types', async () => {
+    const markup = '<div>A</div><p>B</p>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Should have both div and paragraph
+    const div = container.querySelector('.ProseMirror div');
+    const p = container.querySelector('.ProseMirror p');
+    expect(div).toBeInTheDocument();
+    expect(p).toBeInTheDocument();
+  });
+
+  it('does not convert divs with nested block elements', async () => {
+    const markup = '<div><div>Nested</div></div><div>B</div>';
+    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
+
+    await waitFor(() => {
+      const prosemirror = container.querySelector('.ProseMirror');
+      expect(prosemirror).toBeInTheDocument();
+    });
+
+    // Should remain as divs
+    const divs = container.querySelectorAll('.ProseMirror > div');
+    expect(divs.length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/components/EditableHtml.jsx

@@ -30,6 +30,7 @@ import { ImageUploadNode } from '../extensions/image';
 import { Media } from '../extensions/media';
 import { CSSMark } from '../extensions/css';
 import { ExtendedListItem } from '../extensions/extended-list-item';
+import { HeadingParagraph } from '../extensions/heading-paragraph';
 
 import EditorContainer from './TiptapContainer';
 import { valueToSize } from '../utils/size';
@@ -153,7 +154,7 @@ export const EditableHtml = (props) => {
 
   const extensions = [
     TextAlign.configure({
-      types: ['heading', 'paragraph', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
+      types: ['heading', 'paragraph', 'div', 'headingParagraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
       alignments: ['left', 'right', 'center', 'justify'],
     }),
     TextStyleKit,
@@ -168,6 +169,7 @@ export const EditableHtml = (props) => {
     }),
     ExtendedListItem,
     DivNode,
+    HeadingParagraph,
     EnsureEmptyRootIsDiv,
     EnsureListItemContentIsDiv,
     Placeholder.configure({
@@ -286,7 +288,7 @@ export const EditableHtml = (props) => {
       editable: !props.disabled,
       content: normalizeInitialMarkup(props.markup),
       onUpdate: ({ editor, transaction }) => {
-        if (transaction.isDone) {
+        if (transaction.isDone || props.markup !== editor.getHTML()) {
           props.onChange?.(editor.getHTML());
         }
       },

package/src/components/MenuBar.jsx

@@ -122,6 +122,7 @@ function MenuBar({
         isHeading1: ctx.editor.isActive('heading', { level: 1 }) ?? false,
         isHeading2: ctx.editor.isActive('heading', { level: 2 }) ?? false,
         isHeading3: ctx.editor.isActive('heading', { level: 3 }) ?? false,
+        isHeadingParagraph: ctx.editor.isActive('headingParagraph') ?? false,
         isHeading4: ctx.editor.isActive('heading', { level: 4 }) ?? false,
         isHeading5: ctx.editor.isActive('heading', { level: 5 }) ?? false,
         isHeading6: ctx.editor.isActive('heading', { level: 6 }) ?? false,
@@ -289,8 +290,8 @@ function MenuBar({
       {
         icon: <HeadingIcon />,
         hidden: () => !activePlugins?.includes('h3'),
-        onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-        isActive: (state) => state.isHeading3,
+        onClick: (editor) => editor.chain().focus().toggleHeadingParagraph().run(),
+        isActive: (state) => state.isHeadingParagraph,
       },
       {
         icon: <Functions />,

package/src/extensions/heading-paragraph.js

@@ -0,0 +1,53 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+/**
+ * HeadingParagraph extension
+ *
+ * Renders as <p data-heading="heading1"> in the HTML output instead of <h3>.
+ * This provides semantic heading styling without using a native heading element,
+ * as required by PIE's accessibility conventions.
+ */
+export const HeadingParagraph = Node.create({
+  name: 'headingParagraph',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      'data-heading': {
+        default: 'heading1',
+        parseHTML: (element) => element.getAttribute('data-heading'),
+        renderHTML: (attributes) => ({
+          'data-heading': attributes['data-heading'],
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'p[data-heading]' },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['p', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      toggleHeadingParagraph:
+        () =>
+        ({ commands, editor }) => {
+          if (editor.isActive('headingParagraph')) {
+            return commands.setNode('paragraph');
+          }
+          return commands.setNode('headingParagraph', { 'data-heading': 'heading1' });
+        },
+    };
+  },
+});