fix: infinite loop in selection html with base64 images

.changeset/thirty-poems-add.md

@@ -0,0 +1,5 @@
+---
+"prosemirror-dev-toolkit": patch
+---
+
+fix: infinite loop in selection html with base64 images

packages/extension/package.json

@@ -23,7 +23,7 @@
     "svelte-check": "^3.7.1",
     "svelte-preprocess": "^5.1.4",
     "typescript": "5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {

packages/prosemirror-dev-toolkit/package.json

@@ -64,9 +64,9 @@
     "svelte-preprocess": "^5.1.4",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.5.3"
+    "vitest": "^2.0.5"
   },
   "dependencies": {
     "html": "^1.0.0",

packages/prosemirror-dev-toolkit/src/history-and-diff/createHistoryEntry.test.ts

@@ -0,0 +1,56 @@
+import { EditorView } from 'prosemirror-view'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { createHistoryEntry } from './createHistoryEntry'
+import { setupEditor } from '$test-utils/setupEditor'
+import { AllSelection } from 'prosemirror-state'
+
+let view: EditorView
+
+describe('createHistoryEntry', () => {
+  beforeAll(() => {
+    const el = document.createElement('div')
+    document.body.appendChild(el)
+    el.id = 'pm-editor'
+    view = setupEditor(el)
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(1704060000000))
+    const oldMath = Math
+    vi.stubGlobal('Math', {
+      floor: oldMath.floor,
+      max: oldMath.max,
+      min: oldMath.min,
+      random: vi.fn(() => 0)
+    })
+  })
+
+  it('should collapse base64 src attributes', () => {
+    const logSpy = vi.spyOn(console, 'log')
+    const infoSpy = vi.spyOn(console, 'info')
+    const warnSpy = vi.spyOn(console, 'warn')
+    const errorSpy = vi.spyOn(console, 'error')
+
+    const startingState = view.state
+    // This will cause an infinite loop in 'html' package
+    const img1 = view.state.schema.nodes.image.create({
+      src: 'data:image/png;base64,abcdefgh'
+    })
+    const img2 = view.state.schema.nodes.image.create({
+      src: 'data:image/png;base64,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'
+    })
+    const tr = view.state.tr
+    tr.insert(0, img1)
+    tr.insert(0, img2)
+    tr.setSelection(new AllSelection(tr.doc))
+    view.dispatch(tr)
+    const entry = createHistoryEntry([tr], view.state, startingState)
+    // Hack to fix vitest's mocked Date from producing weird getHours (22)
+    entry.timeStr = '00' + entry.timeStr.slice(2)
+    expect(entry).toMatchSnapshot()
+    expect(logSpy).toHaveBeenCalledTimes(0)
+    expect(infoSpy).toHaveBeenCalledTimes(0)
+    expect(warnSpy).toHaveBeenCalledTimes(0)
+    expect(errorSpy).toHaveBeenCalledTimes(0)
+    expect(document.body).toMatchSnapshot()
+  })
+})

packages/prosemirror-dev-toolkit/src/history-and-diff/createHistoryEntry.ts

@@ -36,12 +36,16 @@ const formatTimestamp = (timestamp: number) => {
   ].join(':')
 }
 
-const regexp = /(<\/?[\w\d\s="']+>)/gim
+// Matches any src attribute containing base64 data due to bug in html package and legibility
+// https://github.com/TeemuKoivisto/prosemirror-dev-toolkit/issues/81
+const srcAttr = /src=[\"|\']data:(.*);base64,(.*)[\"|\']/g
+
+const wrappingCarets = /(<\/?[\w\d\s="']+>)/gim
 const highlightHtmlString = (html: string) =>
   html
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(regexp, "<span style='color: cadetblue;'>$&</span>")
+    .replace(wrappingCarets, "<span style='color: cadetblue;'>$&</span>")
 
 export function createHistoryEntry(
   trs: readonly Transaction[],
@@ -57,7 +61,7 @@ export function createHistoryEntry(
   if (domFragment) {
     let child = domFragment.firstChild as HTMLElement | null
     while (child) {
-      selectedElementsAsHtml.push(child.outerHTML)
+      selectedElementsAsHtml.push(child.outerHTML.replaceAll(srcAttr, 'src="..."'))
       child = child.nextSibling as HTMLElement | null
     }
   }

packages/prosemirror-dev-toolkit/src/test-utils/schema.ts

@@ -1,10 +1,39 @@
-import { Schema } from 'prosemirror-model'
+import { NodeSpec, Schema } from 'prosemirror-model'
 
 export const schema = new Schema({
   nodes: {
     doc: {
       content: 'block+'
     },
+    /// An inline image (`<img>`) node. Supports `src`,
+    /// `alt`, and `href` attributes. The latter two default to the empty
+    /// string.
+    image: {
+      inline: true,
+      attrs: {
+        src: { validate: 'string' },
+        alt: { default: null, validate: 'string|null' },
+        title: { default: null, validate: 'string|null' }
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs(dom: HTMLElement) {
+            return {
+              src: dom.getAttribute('src'),
+              title: dom.getAttribute('title'),
+              alt: dom.getAttribute('alt')
+            }
+          }
+        }
+      ],
+      toDOM(node) {
+        const { src, alt, title } = node.attrs
+        return ['img', { src, alt, title }]
+      }
+    } as NodeSpec,
     paragraph: {
       content: 'inline*',
       group: 'block',

packages/site/package.json

@@ -19,7 +19,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "vite": "^5.2.11",
+    "vite": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {