fix: improve marker width calculation for server-side rendering [hotfix]

packages/super-editor/src/extensions/list-item/ListItemNodeView.js

@@ -116,7 +116,7 @@
 
     const handlers = {
       right: () => {
-        const calculatedWidth = calculateMarkerWidth(this.dom, this.numberingDOM);
+        const calculatedWidth = calculateMarkerWidth(this.dom, this.numberingDOM, this.editor);
         const minMarkerWidth = Math.max(calculatedWidth, MIN_MARKER_WIDTH);
         const effectiveHanging = Math.max(hanging, minMarkerWidth);
         const markerLeft = contentLeft - effectiveHanging - MARKER_OFFSET_RIGHT;
@@ -126,7 +126,7 @@
         this.numberingDOM.style.textAlign = 'right';
       },
       left: () => {
-        const calculatedWidth = calculateMarkerWidth(this.dom, this.numberingDOM);
+        const calculatedWidth = calculateMarkerWidth(this.dom, this.numberingDOM, this.editor);
         const minMarkerWidth = Math.max(calculatedWidth, MIN_MARKER_WIDTH);
         let markerLeft = contentLeft - hanging;
         if (markerLeft === contentLeft) {
@@ -345,11 +345,12 @@
  * Calculate the width of the list item marker.
  * @param {HTMLElement} dom - The DOM element of the list item.
  * @param {HTMLElement} numberingDOM - The DOM element of the numbering.
+ * @param {Editor} editor - The editor instance.
  * @param {Object} param2 - Additional parameters.
  * @param {boolean} param2.withPadding - Whether to include padding in the calculation.
  * @returns {number} The width of the marker.
  */
-function calculateMarkerWidth(dom, numberingDOM, { withPadding = true } = {}) {
+function calculateMarkerWidth(dom, numberingDOM, editor, { withPadding = true } = {}) {
   const markerText = numberingDOM.textContent || '';
   const fontSize = dom.style.fontSize || DEFAULT_FONT_SIZE;
   const fontValue = dom.style.fontFamily;
@@ -358,6 +359,9 @@
   if (!markerText.trim()) return 0;
 
   try {
+    // If we're in headless mode, we can't use canvas, so we return 0
+    if (editor?.options?.isHeadless) return 0;
+
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
 
@@ -366,11 +370,10 @@
       : Number.parseFloat(fontSize);
 
     context.font = `${fontSizePx}px ${fontFamily}`;
-
     const textWidth = context.measureText(markerText).width;
     const resultWidth = withPadding ? Math.ceil(textWidth + MARKER_PADDING) : Math.ceil(textWidth);
     return resultWidth;
-  } catch {
+  } catch (error) {
     return 0;
   }
 }

packages/superdoc/src/core/SuperDoc.js

@@ -403,7 +403,7 @@
   /**
    * Initialize telemetry service.
    */
   #initTelemetry() {
     this.telemetry = new Telemetry({
       enabled: this.config.telemetry?.enabled ?? true,
       licenseKey: this.config.telemetry?.licenseKey,
@@ -807,10 +807,12 @@
   async #triggerCollaborationSaves() {
     this.#log('🦋 [superdoc] Triggering collaboration saves');
     return new Promise((resolve) => {
-      this.superdocStore.documents.forEach((doc) => {
+      this.superdocStore.documents.forEach((doc, index) => {
+        this.#log(`Before reset - Doc ${index}: pending = ${this.pendingCollaborationSaves}`);
         this.pendingCollaborationSaves = 0;
         if (doc.ydoc) {
           this.pendingCollaborationSaves++;
+          this.#log(`After increment - Doc ${index}: pending = ${this.pendingCollaborationSaves}`);
           const metaMap = doc.ydoc.getMap('meta');
           metaMap.observe((event) => {
             if (event.changes.keys.has('immediate-save-finished')) {
@@ -823,6 +825,9 @@
           metaMap.set('immediate-save', true);
         }
       });
+      this.#log(
+        `FINAL pending = ${this.pendingCollaborationSaves}, but we have ${this.superdocStore.documents.filter((d) => d.ydoc).length} docs!`,
+      );
     });
   }