@pega/cosmos-react-rte 9.0.0-build.9.9 → 9.0.0

package/lib/components/Editor/hooks/useTableCellMenu.js

@@ -0,0 +1,120 @@
+import { useState, useEffect, useCallback } from 'react';
+export default function useTableCellMenu({ tiptapEditor, iframeRef }) {
+    const [cellPosition, setCellPosition] = useState(null);
+    const [isOverMenu, setIsOverMenu] = useState(false);
+    const updateCellPosition = useCallback(() => {
+        if (!tiptapEditor || !iframeRef.current) {
+            setCellPosition(null);
+            return;
+        }
+        const isInTable = tiptapEditor.isActive('table') ||
+            tiptapEditor.isActive('tableCell') ||
+            tiptapEditor.isActive('tableHeader');
+        if (!isInTable) {
+            if (!isOverMenu) {
+                setCellPosition(null);
+            }
+            return;
+        }
+        const iframeDoc = iframeRef.current.contentDocument;
+        if (!iframeDoc) {
+            setCellPosition(null);
+            return;
+        }
+        const selection = iframeDoc.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            setCellPosition(null);
+            return;
+        }
+        const anchorNode = selection.anchorNode;
+        if (!anchorNode) {
+            setCellPosition(null);
+            return;
+        }
+        // anchorNode can be a Text node; get the parent element if so
+        const element = anchorNode.nodeType === Node.ELEMENT_NODE
+            ? anchorNode
+            : anchorNode.parentElement;
+        const cellEl = element?.closest('td') ?? element?.closest('th') ?? null;
+        if (!cellEl) {
+            setCellPosition(null);
+            return;
+        }
+        const cellRect = cellEl.getBoundingClientRect();
+        const iframeRect = iframeRef.current.getBoundingClientRect();
+        setCellPosition({
+            top: iframeRect.top + cellRect.top,
+            left: iframeRect.left + cellRect.left,
+            width: cellRect.width,
+            height: cellRect.height
+        });
+    }, [tiptapEditor, iframeRef, isOverMenu]);
+    useEffect(() => {
+        if (!tiptapEditor)
+            return;
+        updateCellPosition();
+        tiptapEditor.on('selectionUpdate', updateCellPosition);
+        tiptapEditor.on('transaction', updateCellPosition);
+        // Update position on resize and scroll so menu follows the cell
+        window.addEventListener('resize', updateCellPosition);
+        window.addEventListener('scroll', updateCellPosition, true);
+        // Also listen for scroll within the iframe
+        const iframeWindow = iframeRef.current?.contentWindow;
+        iframeWindow?.addEventListener('scroll', updateCellPosition, true);
+        return () => {
+            tiptapEditor.off('selectionUpdate', updateCellPosition);
+            tiptapEditor.off('transaction', updateCellPosition);
+            window.removeEventListener('resize', updateCellPosition);
+            window.removeEventListener('scroll', updateCellPosition, true);
+            iframeWindow?.removeEventListener('scroll', updateCellPosition, true);
+        };
+    }, [tiptapEditor, iframeRef, updateCellPosition]);
+    const addRowBelow = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().addRowAfter().run();
+    }, [tiptapEditor]);
+    const addRowAbove = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().addRowBefore().run();
+    }, [tiptapEditor]);
+    const addColumnAfter = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().addColumnAfter().run();
+    }, [tiptapEditor]);
+    const addColumnBefore = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().addColumnBefore().run();
+    }, [tiptapEditor]);
+    const deleteRow = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().deleteRow().run();
+    }, [tiptapEditor]);
+    const deleteColumn = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().deleteColumn().run();
+    }, [tiptapEditor]);
+    const deleteTable = useCallback(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.chain().focus().deleteTable().run();
+    }, [tiptapEditor]);
+    return {
+        cellPosition,
+        isOverMenu,
+        setIsOverMenu,
+        addRowBelow,
+        addRowAbove,
+        addColumnAfter,
+        addColumnBefore,
+        deleteRow,
+        deleteColumn,
+        deleteTable
+    };
+}
+//# sourceMappingURL=useTableCellMenu.js.map

package/lib/components/Editor/hooks/useTableCellMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCellMenu.js","sourceRoot":"","sources":["../../../../src/components/Editor/hooks/useTableCellMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport type { RefObject } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport type { CellPosition } from '../TableCellMenu';\n\ninterface UseTableCellMenuParams {\n  tiptapEditor: TiptapEditor | null;\n  iframeRef: RefObject<HTMLIFrameElement>;\n}\n\ninterface UseTableCellMenuReturn {\n  cellPosition: CellPosition | null;\n  isOverMenu: boolean;\n  setIsOverMenu: (value: boolean) => void;\n  addRowBelow: () => void;\n  addRowAbove: () => void;\n  addColumnAfter: () => void;\n  addColumnBefore: () => void;\n  deleteRow: () => void;\n  deleteColumn: () => void;\n  deleteTable: () => void;\n}\n\nexport default function useTableCellMenu({\n  tiptapEditor,\n  iframeRef\n}: UseTableCellMenuParams): UseTableCellMenuReturn {\n  const [cellPosition, setCellPosition] = useState<CellPosition | null>(null);\n  const [isOverMenu, setIsOverMenu] = useState(false);\n\n  const updateCellPosition = useCallback(() => {\n    if (!tiptapEditor || !iframeRef.current) {\n      setCellPosition(null);\n      return;\n    }\n\n    const isInTable =\n      tiptapEditor.isActive('table') ||\n      tiptapEditor.isActive('tableCell') ||\n      tiptapEditor.isActive('tableHeader');\n\n    if (!isInTable) {\n      if (!isOverMenu) {\n        setCellPosition(null);\n      }\n      return;\n    }\n\n    const iframeDoc = iframeRef.current.contentDocument;\n    if (!iframeDoc) {\n      setCellPosition(null);\n      return;\n    }\n\n    const selection = iframeDoc.getSelection();\n    if (!selection || selection.rangeCount === 0) {\n      setCellPosition(null);\n      return;\n    }\n\n    const anchorNode = selection.anchorNode;\n    if (!anchorNode) {\n      setCellPosition(null);\n      return;\n    }\n\n    // anchorNode can be a Text node; get the parent element if so\n    const element =\n      anchorNode.nodeType === Node.ELEMENT_NODE\n        ? (anchorNode as HTMLElement)\n        : anchorNode.parentElement;\n\n    const cellEl = element?.closest('td') ?? element?.closest('th') ?? null;\n\n    if (!cellEl) {\n      setCellPosition(null);\n      return;\n    }\n\n    const cellRect = cellEl.getBoundingClientRect();\n    const iframeRect = iframeRef.current.getBoundingClientRect();\n\n    setCellPosition({\n      top: iframeRect.top + cellRect.top,\n      left: iframeRect.left + cellRect.left,\n      width: cellRect.width,\n      height: cellRect.height\n    });\n  }, [tiptapEditor, iframeRef, isOverMenu]);\n\n  useEffect(() => {\n    if (!tiptapEditor) return;\n\n    updateCellPosition();\n    tiptapEditor.on('selectionUpdate', updateCellPosition);\n    tiptapEditor.on('transaction', updateCellPosition);\n\n    // Update position on resize and scroll so menu follows the cell\n    window.addEventListener('resize', updateCellPosition);\n    window.addEventListener('scroll', updateCellPosition, true);\n\n    // Also listen for scroll within the iframe\n    const iframeWindow = iframeRef.current?.contentWindow;\n    iframeWindow?.addEventListener('scroll', updateCellPosition, true);\n\n    return () => {\n      tiptapEditor.off('selectionUpdate', updateCellPosition);\n      tiptapEditor.off('transaction', updateCellPosition);\n      window.removeEventListener('resize', updateCellPosition);\n      window.removeEventListener('scroll', updateCellPosition, true);\n      iframeWindow?.removeEventListener('scroll', updateCellPosition, true);\n    };\n  }, [tiptapEditor, iframeRef, updateCellPosition]);\n\n  const addRowBelow = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().addRowAfter().run();\n  }, [tiptapEditor]);\n\n  const addRowAbove = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().addRowBefore().run();\n  }, [tiptapEditor]);\n\n  const addColumnAfter = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().addColumnAfter().run();\n  }, [tiptapEditor]);\n\n  const addColumnBefore = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().addColumnBefore().run();\n  }, [tiptapEditor]);\n\n  const deleteRow = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().deleteRow().run();\n  }, [tiptapEditor]);\n\n  const deleteColumn = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().deleteColumn().run();\n  }, [tiptapEditor]);\n\n  const deleteTable = useCallback(() => {\n    if (!tiptapEditor) return;\n    tiptapEditor.chain().focus().deleteTable().run();\n  }, [tiptapEditor]);\n\n  return {\n    cellPosition,\n    isOverMenu,\n    setIsOverMenu,\n    addRowBelow,\n    addRowAbove,\n    addColumnAfter,\n    addColumnBefore,\n    deleteRow,\n    deleteColumn,\n    deleteTable\n  };\n}\n"]}

package/lib/components/Editor/iframeContentStyles.d.ts

@@ -0,0 +1,10 @@
+import { useTheme } from '@pega/cosmos-react-core';
+type Theme = ReturnType<typeof useTheme>;
+export declare const getPlaceholderStyles: (theme: Theme) => string;
+export declare const getEditorStyles: (theme: Theme) => string;
+export declare const getImageStyles: (theme: Theme) => string;
+export declare const getTableStyles: (theme: Theme) => string;
+export declare const getListStyles: () => string;
+export declare const getIframeContentStyles: (theme: Theme) => string;
+export {};
+//# sourceMappingURL=iframeContentStyles.d.ts.map

package/lib/components/Editor/iframeContentStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframeContentStyles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/iframeContentStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEzC,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,KAAG,MAYnD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,KAAG,MAwB9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,KAAG,MAU7C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,KAAG,MA6E7C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,MA4BhC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,KAAK,KAAG,MAMrD,CAAC"}

package/lib/components/Editor/iframeContentStyles.js

@@ -0,0 +1,162 @@
+import { mix } from 'polished';
+import { useTheme } from '@pega/cosmos-react-core';
+export const getPlaceholderStyles = (theme) => `
+  .ProseMirror p.is-editor-empty:first-child::before {
+    color: ${mix(theme.base.transparency['transparent-3'], theme.base.palette['foreground-color'], theme.components['form-control']['background-color'])};
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+`;
+export const getEditorStyles = (theme) => `
+  html {
+    overflow: hidden;
+  }
+
+  body {
+    min-height: 3rem;
+    padding: ${theme.base.spacing};
+    background: unset;
+    cursor: text;
+  }
+
+  #tiptap-root {
+    min-height: 100%;
+  }
+
+  .ProseMirror {
+    outline: none;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    min-height: 100%;
+    cursor: text;
+  }
+`;
+export const getImageStyles = (theme) => `
+  .ProseMirror img {
+    max-width: 100%;
+    height: auto;
+    cursor: pointer;
+  }
+
+  .ProseMirror img.ProseMirror-selectednode {
+    outline: calc(0.125 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};
+  }
+`;
+export const getTableStyles = (theme) => `
+  .ProseMirror table,
+  .ProseMirror table thead,
+  .ProseMirror table tbody,
+  .ProseMirror table colgroup,
+  .ProseMirror table col,
+  .ProseMirror table tr,
+  .ProseMirror table td,
+  .ProseMirror table th {
+    border: none;
+  }
+
+  .ProseMirror table {
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    border-top: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};
+    border-left: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};
+  }
+
+  .ProseMirror table td,
+  .ProseMirror table th {
+    min-width: 1em;
+    border-right: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};
+    border-bottom: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};
+    padding: calc(0.5 * ${theme.base.spacing});
+    vertical-align: top;
+    position: relative;
+  }
+
+  .ProseMirror table th {
+    font-weight: bold;
+    background-color: ${theme.base.palette['primary-background']};
+    text-align: left;
+  }
+
+  .ProseMirror table .selectedCell:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: ${theme.base.palette.interactive};
+    opacity: 0.15;
+    pointer-events: none;
+  }
+
+  .ProseMirror table td,
+  .ProseMirror table th {
+    position: relative;
+  }
+
+  .ProseMirror table .selectedCell::selection,
+  .ProseMirror table .selectedCell *::selection {
+    background: transparent;
+  }
+
+  .ProseMirror .column-resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: calc(0.25 * ${theme.base.spacing});
+    background-color: ${theme.base.palette.interactive};
+    pointer-events: none;
+  }
+
+  .ProseMirror.resize-cursor {
+    cursor: col-resize;
+  }
+
+  .ProseMirror .tableWrapper {
+    overflow-x: auto;
+  }
+`;
+export const getListStyles = () => `
+  /* Hide default marker for aligned list items and use inline marker instead */
+  .ProseMirror ul li:has(> p[style*="text-align: center"]),
+  .ProseMirror ul li:has(> p[style*="text-align: right"]),
+  .ProseMirror ol li:has(> p[style*="text-align: center"]),
+  .ProseMirror ol li:has(> p[style*="text-align: right"]) {
+    list-style: none;
+  }
+
+  /* Add bullet marker inline with centered/right-aligned text */
+  .ProseMirror ul li:has(> p[style*="text-align: center"]) > p::before,
+  .ProseMirror ul li:has(> p[style*="text-align: right"]) > p::before {
+    content: "• ";
+  }
+
+  /* Add number marker inline with centered/right-aligned text in ordered lists */
+  .ProseMirror ol {
+    counter-reset: list-counter;
+  }
+
+  .ProseMirror ol li {
+    counter-increment: list-counter;
+  }
+
+  .ProseMirror ol li:has(> p[style*="text-align: center"]) > p::before,
+  .ProseMirror ol li:has(> p[style*="text-align: right"]) > p::before {
+    content: counter(list-counter) ". ";
+  }
+`;
+export const getIframeContentStyles = (theme) => `
+  ${getEditorStyles(theme)}
+  ${getImageStyles(theme)}
+  ${getTableStyles(theme)}
+  ${getPlaceholderStyles(theme)}
+  ${getListStyles()}
+`;
+//# sourceMappingURL=iframeContentStyles.js.map

package/lib/components/Editor/iframeContentStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframeContentStyles.js","sourceRoot":"","sources":["../../../src/components/Editor/iframeContentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAInD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC;;aAEjD,GAAG,CACV,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,EACxC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACtC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC,CACrD;;;;;;CAMJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC;;;;;;;eAO1C,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC;;;;;;;;4BAQ5B,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;CAEtF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC;;;;;;;;;;;;;;;;;;gCAkBxB,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;iCAC5E,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;;kCAM5E,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;mCAC5E,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACtF,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;wBAOpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;wBAWxC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;yBAoB7B,KAAK,CAAC,IAAI,CAAC,OAAO;wBACnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;;;;;;CAWrD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B1C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC;IAC5D,eAAe,CAAC,KAAK,CAAC;IACtB,cAAc,CAAC,KAAK,CAAC;IACrB,cAAc,CAAC,KAAK,CAAC;IACrB,oBAAoB,CAAC,KAAK,CAAC;IAC3B,aAAa,EAAE;CAClB,CAAC","sourcesContent":["import { mix } from 'polished';\n\nimport { useTheme } from '@pega/cosmos-react-core';\n\ntype Theme = ReturnType<typeof useTheme>;\n\nexport const getPlaceholderStyles = (theme: Theme): string => `\n  .ProseMirror p.is-editor-empty:first-child::before {\n    color: ${mix(\n      theme.base.transparency['transparent-3'],\n      theme.base.palette['foreground-color'],\n      theme.components['form-control']['background-color']\n    )};\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n  }\n`;\n\nexport const getEditorStyles = (theme: Theme): string => `\n  html {\n    overflow: hidden;\n  }\n\n  body {\n    min-height: 3rem;\n    padding: ${theme.base.spacing};\n    background: unset;\n    cursor: text;\n  }\n\n  #tiptap-root {\n    min-height: 100%;\n  }\n\n  .ProseMirror {\n    outline: none;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    word-break: break-word;\n    min-height: 100%;\n    cursor: text;\n  }\n`;\n\nexport const getImageStyles = (theme: Theme): string => `\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    cursor: pointer;\n  }\n\n  .ProseMirror img.ProseMirror-selectednode {\n    outline: calc(0.125 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};\n  }\n`;\n\nexport const getTableStyles = (theme: Theme): string => `\n  .ProseMirror table,\n  .ProseMirror table thead,\n  .ProseMirror table tbody,\n  .ProseMirror table colgroup,\n  .ProseMirror table col,\n  .ProseMirror table tr,\n  .ProseMirror table td,\n  .ProseMirror table th {\n    border: none;\n  }\n\n  .ProseMirror table {\n    border-collapse: separate;\n    border-spacing: 0;\n    table-layout: fixed;\n    width: 100%;\n    margin: 0;\n    border-top: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};\n    border-left: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};\n  }\n\n  .ProseMirror table td,\n  .ProseMirror table th {\n    min-width: 1em;\n    border-right: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};\n    border-bottom: calc(0.0625 * ${theme.base.spacing}) solid ${theme.components['form-control']['border-color']};\n    padding: calc(0.5 * ${theme.base.spacing});\n    vertical-align: top;\n    position: relative;\n  }\n\n  .ProseMirror table th {\n    font-weight: bold;\n    background-color: ${theme.base.palette['primary-background']};\n    text-align: left;\n  }\n\n  .ProseMirror table .selectedCell:after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: ${theme.base.palette.interactive};\n    opacity: 0.15;\n    pointer-events: none;\n  }\n\n  .ProseMirror table td,\n  .ProseMirror table th {\n    position: relative;\n  }\n\n  .ProseMirror table .selectedCell::selection,\n  .ProseMirror table .selectedCell *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: calc(0.25 * ${theme.base.spacing});\n    background-color: ${theme.base.palette.interactive};\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n  }\n`;\n\nexport const getListStyles = (): string => `\n  /* Hide default marker for aligned list items and use inline marker instead */\n  .ProseMirror ul li:has(> p[style*=\"text-align: center\"]),\n  .ProseMirror ul li:has(> p[style*=\"text-align: right\"]),\n  .ProseMirror ol li:has(> p[style*=\"text-align: center\"]),\n  .ProseMirror ol li:has(> p[style*=\"text-align: right\"]) {\n    list-style: none;\n  }\n\n  /* Add bullet marker inline with centered/right-aligned text */\n  .ProseMirror ul li:has(> p[style*=\"text-align: center\"]) > p::before,\n  .ProseMirror ul li:has(> p[style*=\"text-align: right\"]) > p::before {\n    content: \"• \";\n  }\n\n  /* Add number marker inline with centered/right-aligned text in ordered lists */\n  .ProseMirror ol {\n    counter-reset: list-counter;\n  }\n\n  .ProseMirror ol li {\n    counter-increment: list-counter;\n  }\n\n  .ProseMirror ol li:has(> p[style*=\"text-align: center\"]) > p::before,\n  .ProseMirror ol li:has(> p[style*=\"text-align: right\"]) > p::before {\n    content: counter(list-counter) \". \";\n  }\n`;\n\nexport const getIframeContentStyles = (theme: Theme): string => `\n  ${getEditorStyles(theme)}\n  ${getImageStyles(theme)}\n  ${getTableStyles(theme)}\n  ${getPlaceholderStyles(theme)}\n  ${getListStyles()}\n`;\n"]}

package/lib/components/Editor/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Editor } from './Editor';
 export type { EditorProps, EditorState } from './Editor.types';
 export { useEditorContext } from './Editor.context';
+export { extractMentions, restoreMentionPlaceholders } from './utils/htmlPlaceholder';
+export type { PlaceholderMap } from './utils/htmlPlaceholder';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACtF,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/Editor/index.js

@@ -1,3 +1,4 @@
 export { default as Editor } from './Editor';
 export { useEditorContext } from './Editor.context';
+export { extractMentions, restoreMentionPlaceholders } from './utils/htmlPlaceholder';
 //# sourceMappingURL=index.js.map

package/lib/components/Editor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default as Editor } from './Editor';\nexport type { EditorProps, EditorState } from './Editor.types';\nexport { useEditorContext } from './Editor.context';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default as Editor } from './Editor';\nexport type { EditorProps, EditorState } from './Editor.types';\nexport { useEditorContext } from './Editor.context';\nexport { extractMentions, restoreMentionPlaceholders } from './utils/htmlPlaceholder';\nexport type { PlaceholderMap } from './utils/htmlPlaceholder';\n"]}

package/lib/components/Editor/sanitize.d.ts

@@ -0,0 +1,3 @@
+declare const sanitizeHtml: (html: string) => string;
+export default sanitizeHtml;
+//# sourceMappingURL=sanitize.d.ts.map

package/lib/components/Editor/sanitize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/sanitize.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,MAEpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Editor/sanitize.js

@@ -0,0 +1,11 @@
+import DOMPurify from 'dompurify';
+const SANITIZE_CONFIG = {
+    FORBID_TAGS: ['iframe', 'object', 'embed', 'form', 'input', 'button'],
+    FORBID_ATTR: ['srcset'],
+    ALLOWED_URI_REGEXP: /^(?:https?|mailto|tel|ftp):/i
+};
+const sanitizeHtml = (html) => {
+    return DOMPurify.sanitize(html, SANITIZE_CONFIG);
+};
+export default sanitizeHtml;
+//# sourceMappingURL=sanitize.js.map

package/lib/components/Editor/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sourceRoot":"","sources":["../../../src/components/Editor/sanitize.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAGlC,MAAM,eAAe,GAAW;IAC9B,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC;IACrE,WAAW,EAAE,CAAC,QAAQ,CAAC;IACvB,kBAAkB,EAAE,8BAA8B;CACnD,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAY,EAAU,EAAE;IAC5C,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import DOMPurify from 'dompurify';\nimport type { Config } from 'dompurify';\n\nconst SANITIZE_CONFIG: Config = {\n  FORBID_TAGS: ['iframe', 'object', 'embed', 'form', 'input', 'button'],\n  FORBID_ATTR: ['srcset'],\n  ALLOWED_URI_REGEXP: /^(?:https?|mailto|tel|ftp):/i\n};\n\nconst sanitizeHtml = (html: string): string => {\n  return DOMPurify.sanitize(html, SANITIZE_CONFIG);\n};\n\nexport default sanitizeHtml;\n"]}

package/lib/components/Editor/utils/htmlPlaceholder.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Placeholder utilities for AI rewrite flows.
+ *
+ * Both the RTE (Tiptap/HTML) and Feed (Slate/markdown) paths need to protect
+ * certain tokens — links, images, user mentions — before sending text to the
+ * AI, and restore them afterwards. This file provides both sets of helpers.
+ *
+ * ## RTE (HTML) — `extractLinkAndImg` / `restorePlaceholders`
+ * Replaces `<a>` and `<img>` elements with `[PEGA-IMG-XXXX]` / `[PEGA-LINK-XXXX]`
+ * placeholders using DOMParser. Reduces payload size and prevents the AI from
+ * stripping or mangling anchor/image tags. Images wrapped in an anchor are
+ * captured as a single LINK placeholder so the full `<a><img/></a>` structure
+ * is stored intact.
+ *
+ * ## Feed (markdown) — `extractMentions` / `restoreMentionPlaceholders`
+ * Replaces `<pega-mention .../>` XML elements with `[PEGA-MENTION-XXXX]`
+ * placeholders using regex. Prevents the AI from dropping or mangling user
+ * @mention markup that is stored inline in Slate markdown.
+ *
+ * In both cases: placeholders the AI dropped are appended at the end;
+ * hallucinated placeholder strings not in the map are stripped;
+ * placeholder-like strings the user literally typed are preserved.
+ */
+export interface PlaceholderMap {
+    [placeholder: string]: string;
+}
+interface ExtractResult {
+    placeholderHtml: string;
+    placeholderMap: PlaceholderMap;
+    userPlaceholders: string[];
+}
+/**
+ * Replaces all `<a>` and standalone `<img>` elements in the HTML with unique
+ * placeholders. Uses DOMParser to reliably locate elements rather than regex.
+ * Anchors are processed first so that linked images (`<a><img/></a>`) are
+ * captured as a single LINK placeholder.
+ */
+export declare function extractLinkAndImg(html: string): ExtractResult;
+/**
+ * Restores placeholders in the rewritten HTML with the original HTML elements.
+ * Placeholders that were dropped by the AI are appended at the end, each
+ * wrapped in a `<p>` tag (TipTap's default block element).
+ * Any hallucinated placeholder strings (not in the map) are stripped.
+ */
+export declare function restorePlaceholders(html: string, placeholderMap: PlaceholderMap, userPlaceholders?: string[]): string;
+interface ExtractMentionsResult {
+    cleanText: string;
+    mentionMap: PlaceholderMap;
+    userPlaceholders: string[];
+}
+/**
+ * Extracts all `<pega-mention .../>` elements from a markdown string,
+ * replacing them with unique `[PEGA-MENTION-XXXX]` placeholders.
+ *
+ * Call this before sending Feed text to the AI for rewriting. After the AI
+ * responds, call `restoreMentionPlaceholders` to put the original mention XML back.
+ */
+export declare function extractMentions(markdown: string): ExtractMentionsResult;
+/**
+ * Restores `<pega-mention .../>` XML elements in AI-rewritten Feed text.
+ *
+ * - Placeholders present in the AI response are replaced with the original mention XML.
+ * - Placeholders dropped by the AI are appended at the end (preserving all mentions).
+ * - Hallucinated placeholder strings (not in the map) are stripped, unless they were
+ *   typed literally by the user.
+ */
+export declare function restoreMentionPlaceholders(text: string, mentionMap: PlaceholderMap, userPlaceholders?: string[]): string;
+export {};
+//# sourceMappingURL=htmlPlaceholder.d.ts.map

package/lib/components/Editor/utils/htmlPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlPlaceholder.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/utils/htmlPlaceholder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,MAAM,WAAW,cAAc;IAC7B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,UAAU,aAAa;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAgBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CA0B7D;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,cAAc,EAC9B,gBAAgB,GAAE,MAAM,EAAO,GAC9B,MAAM,CAsBR;AAYD,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAUD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,qBAAqB,CAgBvE;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,cAAc,EAC1B,gBAAgB,GAAE,MAAM,EAAO,GAC9B,MAAM,CA4BR"}

package/lib/components/Editor/utils/htmlPlaceholder.js

@@ -0,0 +1,154 @@
+/**
+ * Placeholder utilities for AI rewrite flows.
+ *
+ * Both the RTE (Tiptap/HTML) and Feed (Slate/markdown) paths need to protect
+ * certain tokens — links, images, user mentions — before sending text to the
+ * AI, and restore them afterwards. This file provides both sets of helpers.
+ *
+ * ## RTE (HTML) — `extractLinkAndImg` / `restorePlaceholders`
+ * Replaces `<a>` and `<img>` elements with `[PEGA-IMG-XXXX]` / `[PEGA-LINK-XXXX]`
+ * placeholders using DOMParser. Reduces payload size and prevents the AI from
+ * stripping or mangling anchor/image tags. Images wrapped in an anchor are
+ * captured as a single LINK placeholder so the full `<a><img/></a>` structure
+ * is stored intact.
+ *
+ * ## Feed (markdown) — `extractMentions` / `restoreMentionPlaceholders`
+ * Replaces `<pega-mention .../>` XML elements with `[PEGA-MENTION-XXXX]`
+ * placeholders using regex. Prevents the AI from dropping or mangling user
+ * @mention markup that is stored inline in Slate markdown.
+ *
+ * In both cases: placeholders the AI dropped are appended at the end;
+ * hallucinated placeholder strings not in the map are stripped;
+ * placeholder-like strings the user literally typed are preserved.
+ */
+import { createUID } from '@pega/cosmos-react-core';
+const PLACEHOLDER_PATTERN = /\[PEGA-(?:IMG|LINK)-[^\]]+\]/g;
+function createUniquePlaceholder(prefix, existingMap, html) {
+    let placeholder;
+    do {
+        placeholder = `[PEGA-${prefix}-${createUID()}]`;
+    } while (placeholder in existingMap || html.includes(placeholder));
+    return placeholder;
+}
+/**
+ * Replaces all `<a>` and standalone `<img>` elements in the HTML with unique
+ * placeholders. Uses DOMParser to reliably locate elements rather than regex.
+ * Anchors are processed first so that linked images (`<a><img/></a>`) are
+ * captured as a single LINK placeholder.
+ */
+export function extractLinkAndImg(html) {
+    const placeholderMap = {};
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    // Record placeholder-like strings the user literally typed so they are
+    // not mistakenly stripped during restoration (they are NOT hallucinations).
+    const userPlaceholders = (html.match(PLACEHOLDER_PATTERN) ?? []).filter((match, i, arr) => arr.indexOf(match) === i);
+    // Process anchor tags first — captures linked images as one unit
+    for (const anchor of Array.from(doc.body.querySelectorAll('a'))) {
+        const placeholder = createUniquePlaceholder('LINK', placeholderMap, html);
+        placeholderMap[placeholder] = anchor.outerHTML;
+        anchor.replaceWith(doc.createTextNode(placeholder));
+    }
+    // Process remaining standalone img tags (not inside an <a> already replaced)
+    for (const img of Array.from(doc.body.querySelectorAll('img'))) {
+        const placeholder = createUniquePlaceholder('IMG', placeholderMap, html);
+        placeholderMap[placeholder] = img.outerHTML;
+        img.replaceWith(doc.createTextNode(placeholder));
+    }
+    return { placeholderHtml: doc.body.innerHTML, placeholderMap, userPlaceholders };
+}
+/**
+ * Restores placeholders in the rewritten HTML with the original HTML elements.
+ * Placeholders that were dropped by the AI are appended at the end, each
+ * wrapped in a `<p>` tag (TipTap's default block element).
+ * Any hallucinated placeholder strings (not in the map) are stripped.
+ */
+export function restorePlaceholders(html, placeholderMap, userPlaceholders = []) {
+    let result = html;
+    const missingElements = [];
+    for (const [placeholder, originalHtml] of Object.entries(placeholderMap)) {
+        if (result.includes(placeholder)) {
+            result = result.replaceAll(placeholder, originalHtml);
+        }
+        else {
+            missingElements.push(originalHtml);
+        }
+    }
+    // Strip any hallucinated placeholder strings the AI may have invented,
+    // but preserve placeholder-like strings the user literally typed.
+    const userSet = new Set(userPlaceholders);
+    result = result.replace(PLACEHOLDER_PATTERN, match => (userSet.has(match) ? match : ''));
+    if (missingElements.length > 0) {
+        result = `${result}${missingElements.map(el => `<p>${el}</p>`).join('')}`;
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Feed (markdown) — pega-mention placeholder helpers
+// ---------------------------------------------------------------------------
+/** Regex matching a <pega-mention .../> self-closing XML element inline in markdown. */
+const PEGA_MENTION_REGEX = /<pega-mention (?:[^\n/]|\/(?!>))+\/>/g;
+/** Matches [PEGA-MENTION-XXXX] bracket placeholders injected by extractMentions. */
+const MENTION_PLACEHOLDER_PATTERN = /\[PEGA-MENTION-[^\]]+\]/g;
+function createUniqueMentionPlaceholder(existingMap, text) {
+    let placeholder;
+    do {
+        placeholder = `[PEGA-MENTION-${createUID()}]`;
+    } while (placeholder in existingMap || text.includes(placeholder));
+    return placeholder;
+}
+/**
+ * Extracts all `<pega-mention .../>` elements from a markdown string,
+ * replacing them with unique `[PEGA-MENTION-XXXX]` placeholders.
+ *
+ * Call this before sending Feed text to the AI for rewriting. After the AI
+ * responds, call `restoreMentionPlaceholders` to put the original mention XML back.
+ */
+export function extractMentions(markdown) {
+    const mentionMap = {};
+    // Record placeholder-like strings the user literally typed so they are
+    // not mistakenly stripped during restoration.
+    const userPlaceholders = (markdown.match(MENTION_PLACEHOLDER_PATTERN) ?? []).filter((match, i, arr) => arr.indexOf(match) === i);
+    const cleanText = markdown.replace(PEGA_MENTION_REGEX, match => {
+        const placeholder = createUniqueMentionPlaceholder(mentionMap, markdown);
+        mentionMap[placeholder] = match;
+        return placeholder;
+    });
+    return { cleanText, mentionMap, userPlaceholders };
+}
+/**
+ * Restores `<pega-mention .../>` XML elements in AI-rewritten Feed text.
+ *
+ * - Placeholders present in the AI response are replaced with the original mention XML.
+ * - Placeholders dropped by the AI are appended at the end (preserving all mentions).
+ * - Hallucinated placeholder strings (not in the map) are stripped, unless they were
+ *   typed literally by the user.
+ */
+export function restoreMentionPlaceholders(text, mentionMap, userPlaceholders = []) {
+    let result = text;
+    const missingMentions = [];
+    for (const [placeholder, originalXml] of Object.entries(mentionMap)) {
+        if (result.includes(placeholder)) {
+            result = result.replaceAll(placeholder, originalXml);
+        }
+        else {
+            missingMentions.push(originalXml);
+        }
+    }
+    const userSet = new Set(userPlaceholders);
+    result = result.replace(MENTION_PLACEHOLDER_PATTERN, match => (userSet.has(match) ? match : ''));
+    if (missingMentions.length > 0) {
+        const appendedMentions = missingMentions.join(' ');
+        if (!result) {
+            result = appendedMentions;
+        }
+        else if (/\s$/.test(result)) {
+            result = `${result}${appendedMentions}`;
+        }
+        else {
+            result = `${result} ${appendedMentions}`;
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=htmlPlaceholder.js.map

package/lib/components/Editor/utils/htmlPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlPlaceholder.js","sourceRoot":"","sources":["../../../../src/components/Editor/utils/htmlPlaceholder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Placeholder utilities for AI rewrite flows.\n *\n * Both the RTE (Tiptap/HTML) and Feed (Slate/markdown) paths need to protect\n * certain tokens — links, images, user mentions — before sending text to the\n * AI, and restore them afterwards. This file provides both sets of helpers.\n *\n * ## RTE (HTML) — `extractLinkAndImg` / `restorePlaceholders`\n * Replaces `<a>` and `<img>` elements with `[PEGA-IMG-XXXX]` / `[PEGA-LINK-XXXX]`\n * placeholders using DOMParser. Reduces payload size and prevents the AI from\n * stripping or mangling anchor/image tags. Images wrapped in an anchor are\n * captured as a single LINK placeholder so the full `<a><img/></a>` structure\n * is stored intact.\n *\n * ## Feed (markdown) — `extractMentions` / `restoreMentionPlaceholders`\n * Replaces `<pega-mention .../>` XML elements with `[PEGA-MENTION-XXXX]`\n * placeholders using regex. Prevents the AI from dropping or mangling user\n * @mention markup that is stored inline in Slate markdown.\n *\n * In both cases: placeholders the AI dropped are appended at the end;\n * hallucinated placeholder strings not in the map are stripped;\n * placeholder-like strings the user literally typed are preserved.\n */\n\nimport { createUID } from '@pega/cosmos-react-core';\n\nexport interface PlaceholderMap {\n  [placeholder: string]: string;\n}\n\ninterface ExtractResult {\n  placeholderHtml: string;\n  placeholderMap: PlaceholderMap;\n  userPlaceholders: string[];\n}\n\nconst PLACEHOLDER_PATTERN = /\\[PEGA-(?:IMG|LINK)-[^\\]]+\\]/g;\n\nfunction createUniquePlaceholder(\n  prefix: string,\n  existingMap: PlaceholderMap,\n  html: string\n): string {\n  let placeholder: string;\n  do {\n    placeholder = `[PEGA-${prefix}-${createUID()}]`;\n  } while (placeholder in existingMap || html.includes(placeholder));\n  return placeholder;\n}\n\n/**\n * Replaces all `<a>` and standalone `<img>` elements in the HTML with unique\n * placeholders. Uses DOMParser to reliably locate elements rather than regex.\n * Anchors are processed first so that linked images (`<a><img/></a>`) are\n * captured as a single LINK placeholder.\n */\nexport function extractLinkAndImg(html: string): ExtractResult {\n  const placeholderMap: PlaceholderMap = {};\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(html, 'text/html');\n\n  // Record placeholder-like strings the user literally typed so they are\n  // not mistakenly stripped during restoration (they are NOT hallucinations).\n  const userPlaceholders = (html.match(PLACEHOLDER_PATTERN) ?? []).filter(\n    (match, i, arr) => arr.indexOf(match) === i\n  );\n\n  // Process anchor tags first — captures linked images as one unit\n  for (const anchor of Array.from(doc.body.querySelectorAll('a'))) {\n    const placeholder = createUniquePlaceholder('LINK', placeholderMap, html);\n    placeholderMap[placeholder] = anchor.outerHTML;\n    anchor.replaceWith(doc.createTextNode(placeholder));\n  }\n\n  // Process remaining standalone img tags (not inside an <a> already replaced)\n  for (const img of Array.from(doc.body.querySelectorAll('img'))) {\n    const placeholder = createUniquePlaceholder('IMG', placeholderMap, html);\n    placeholderMap[placeholder] = img.outerHTML;\n    img.replaceWith(doc.createTextNode(placeholder));\n  }\n\n  return { placeholderHtml: doc.body.innerHTML, placeholderMap, userPlaceholders };\n}\n\n/**\n * Restores placeholders in the rewritten HTML with the original HTML elements.\n * Placeholders that were dropped by the AI are appended at the end, each\n * wrapped in a `<p>` tag (TipTap's default block element).\n * Any hallucinated placeholder strings (not in the map) are stripped.\n */\nexport function restorePlaceholders(\n  html: string,\n  placeholderMap: PlaceholderMap,\n  userPlaceholders: string[] = []\n): string {\n  let result = html;\n  const missingElements: string[] = [];\n\n  for (const [placeholder, originalHtml] of Object.entries(placeholderMap)) {\n    if (result.includes(placeholder)) {\n      result = result.replaceAll(placeholder, originalHtml);\n    } else {\n      missingElements.push(originalHtml);\n    }\n  }\n\n  // Strip any hallucinated placeholder strings the AI may have invented,\n  // but preserve placeholder-like strings the user literally typed.\n  const userSet = new Set(userPlaceholders);\n  result = result.replace(PLACEHOLDER_PATTERN, match => (userSet.has(match) ? match : ''));\n\n  if (missingElements.length > 0) {\n    result = `${result}${missingElements.map(el => `<p>${el}</p>`).join('')}`;\n  }\n\n  return result;\n}\n\n// ---------------------------------------------------------------------------\n// Feed (markdown) — pega-mention placeholder helpers\n// ---------------------------------------------------------------------------\n\n/** Regex matching a <pega-mention .../> self-closing XML element inline in markdown. */\nconst PEGA_MENTION_REGEX = /<pega-mention (?:[^\\n/]|\\/(?!>))+\\/>/g;\n\n/** Matches [PEGA-MENTION-XXXX] bracket placeholders injected by extractMentions. */\nconst MENTION_PLACEHOLDER_PATTERN = /\\[PEGA-MENTION-[^\\]]+\\]/g;\n\ninterface ExtractMentionsResult {\n  cleanText: string;\n  mentionMap: PlaceholderMap;\n  userPlaceholders: string[];\n}\n\nfunction createUniqueMentionPlaceholder(existingMap: PlaceholderMap, text: string): string {\n  let placeholder: string;\n  do {\n    placeholder = `[PEGA-MENTION-${createUID()}]`;\n  } while (placeholder in existingMap || text.includes(placeholder));\n  return placeholder;\n}\n\n/**\n * Extracts all `<pega-mention .../>` elements from a markdown string,\n * replacing them with unique `[PEGA-MENTION-XXXX]` placeholders.\n *\n * Call this before sending Feed text to the AI for rewriting. After the AI\n * responds, call `restoreMentionPlaceholders` to put the original mention XML back.\n */\nexport function extractMentions(markdown: string): ExtractMentionsResult {\n  const mentionMap: PlaceholderMap = {};\n\n  // Record placeholder-like strings the user literally typed so they are\n  // not mistakenly stripped during restoration.\n  const userPlaceholders = (markdown.match(MENTION_PLACEHOLDER_PATTERN) ?? []).filter(\n    (match, i, arr) => arr.indexOf(match) === i\n  );\n\n  const cleanText = markdown.replace(PEGA_MENTION_REGEX, match => {\n    const placeholder = createUniqueMentionPlaceholder(mentionMap, markdown);\n    mentionMap[placeholder] = match;\n    return placeholder;\n  });\n\n  return { cleanText, mentionMap, userPlaceholders };\n}\n\n/**\n * Restores `<pega-mention .../>` XML elements in AI-rewritten Feed text.\n *\n * - Placeholders present in the AI response are replaced with the original mention XML.\n * - Placeholders dropped by the AI are appended at the end (preserving all mentions).\n * - Hallucinated placeholder strings (not in the map) are stripped, unless they were\n *   typed literally by the user.\n */\nexport function restoreMentionPlaceholders(\n  text: string,\n  mentionMap: PlaceholderMap,\n  userPlaceholders: string[] = []\n): string {\n  let result = text;\n  const missingMentions: string[] = [];\n\n  for (const [placeholder, originalXml] of Object.entries(mentionMap)) {\n    if (result.includes(placeholder)) {\n      result = result.replaceAll(placeholder, originalXml);\n    } else {\n      missingMentions.push(originalXml);\n    }\n  }\n\n  const userSet = new Set(userPlaceholders);\n  result = result.replace(MENTION_PLACEHOLDER_PATTERN, match => (userSet.has(match) ? match : ''));\n\n  if (missingMentions.length > 0) {\n    const appendedMentions = missingMentions.join(' ');\n\n    if (!result) {\n      result = appendedMentions;\n    } else if (/\\s$/.test(result)) {\n      result = `${result}${appendedMentions}`;\n    } else {\n      result = `${result} ${appendedMentions}`;\n    }\n  }\n\n  return result;\n}\n"]}