@fieldnotes/core 0.40.0 → 0.40.2

package/dist/index.cjs

@@ -4031,6 +4031,7 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  onInputCallback = null;
   beginHistory = null;
   commitHistory = null;
   toolbar;
@@ -4048,6 +4049,9 @@ var NoteEditor = class {
   setOnStop(callback) {
     this.onStopCallback = callback;
   }
+  setOnInput(callback) {
+    this.onInputCallback = callback;
+  }
   setHistoryHooks(begin, commit) {
     this.beginHistory = begin;
     this.commitHistory = commit;
@@ -4090,7 +4094,6 @@ var NoteEditor = class {
       cursor: "default"
     });
     this.toolbar?.hide();
-    this.beginHistory?.();
     if (textChanged) {
       store.update(this.editingId, { text });
     }
@@ -4119,6 +4122,7 @@ var NoteEditor = class {
   activateEditing(node, elementId, store) {
     this.editingId = elementId;
     this.editingNode = node;
+    this.beginHistory?.();
     node.contentEditable = "true";
     Object.assign(node.style, {
       userSelect: "text",
@@ -4139,6 +4143,7 @@ var NoteEditor = class {
     node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
     this.inputHandler = () => {
       node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+      this.onInputCallback?.(elementId);
     };
     node.addEventListener("input", this.inputHandler);
     this.toolbar?.show(node);
@@ -4765,6 +4770,16 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
   }
 }
 
+// src/canvas/text-canvas-renderer.ts
+function renderTextOnCanvas(ctx, text) {
+  const pad = 2;
+  ctx.save();
+  ctx.fillStyle = text.color;
+  const runs = parseStyledRuns(text.text ?? "", text.fontSize);
+  renderStyledRuns(ctx, runs, text.position.x + pad, text.position.y + pad, text.size.w - pad * 2);
+  ctx.restore();
+}
+
 // src/canvas/export-image.ts
 var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
@@ -4847,30 +4862,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderTextOnCanvas(ctx, text) {
-  if (!text.text) return;
-  ctx.save();
-  ctx.fillStyle = text.color;
-  ctx.font = `${text.fontSize}px system-ui, sans-serif`;
-  ctx.textBaseline = "top";
-  ctx.textAlign = text.textAlign;
-  const pad = 2;
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line !== void 0) {
-      ctx.fillText(line, textX, text.position.y + pad + i * lineHeight);
-    }
-  }
-  ctx.restore();
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -5092,28 +5083,27 @@ function emitImage(image, dataUri) {
   const { w, h } = image.size;
   return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitText(text) {
+function emitText(text, rasterScale) {
   if (!text.text) return "";
-  const pad = 2;
-  let anchor = "start";
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    anchor = "middle";
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    anchor = "end";
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  let out = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line === void 0) continue;
-    const y = text.position.y + pad + i * lineHeight;
-    out += `<text x="${n(textX)}" y="${n(y)}" font-family="system-ui, sans-serif" font-size="${n(text.fontSize)}" fill="${esc(text.color)}" text-anchor="${anchor}" dominant-baseline="text-before-edge">${esc(line)}</text>`;
+  const { x, y } = text.position;
+  const { w, h } = text.size;
+  if (typeof document === "undefined") return "";
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
+  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(rasterScale, rasterScale);
+  ctx.translate(-x, -y);
+  renderTextOnCanvas(ctx, text);
+  let dataUri;
+  try {
+    dataUri = canvas.toDataURL();
+  } catch {
+    return "";
   }
-  return out;
+  if (!dataUri || !dataUri.startsWith("data:")) return "";
+  return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
 function emitNote(note, rasterScale) {
   const { x, y } = note.position;
@@ -5296,7 +5286,7 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
     case "image":
       return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
     case "text":
-      return withRotationSvg(el, emitText(el));
+      return withRotationSvg(el, emitText(el, rasterScale));
     case "note":
       return withRotationSvg(el, emitNote(el, rasterScale));
     case "template":
@@ -5759,10 +5749,9 @@ var DomNodeManager = class {
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
           lineHeight: "1.4"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         const detector = new DoubleTapDetector();
         node.addEventListener("pointerup", (e) => {
           if (detector.feed(e)) {
@@ -5773,8 +5762,9 @@ var DomNodeManager = class {
         });
       }
       if (!this.isEditingElement(element.id)) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
+        const text = element.text || "";
+        if (node.innerHTML !== text) {
+          node.innerHTML = text;
         }
         Object.assign(node.style, {
           fontSize: `${element.fontSize}px`,
@@ -6617,6 +6607,16 @@ var ViewportInteractions = class {
       this.deps.noteEditor.startEditing(node, id, this.deps.store);
     }
   }
+  liveFitHeight(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element || element.type !== "note" && element.type !== "text") return;
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (!node) return;
+    const measured = node.scrollHeight;
+    if (measured > 0 && measured !== element.size.h) {
+      this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+    }
+  }
   fitNoteHeight(elementId) {
     const element = this.deps.store.getById(elementId);
     if (!element || element.type !== "note") return;
@@ -6636,7 +6636,7 @@ var ViewportInteractions = class {
         this.deps.store.remove(elementId);
         return;
       }
-      this.fitNoteHeight(elementId);
+      this.liveFitHeight(elementId);
       return;
     }
     if (element.type !== "text") return;
@@ -6644,13 +6644,7 @@ var ViewportInteractions = class {
       this.deps.store.remove(elementId);
       return;
     }
-    const node = this.deps.domNodeManager.getNode(elementId);
-    if (node && "size" in element) {
-      const measured = node.scrollHeight;
-      if (measured !== element.size.h) {
-        this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
-      }
-    }
+    this.liveFitHeight(elementId);
   }
   onTapDown = (e) => {
     this.tapDownX = e.clientX;
@@ -6786,6 +6780,7 @@ var Viewport = class {
       placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
+    this.noteEditor.setOnInput((id) => this.interactions.liveFitHeight(id));
     this.arrowLabelEditor = new ArrowLabelEditor();
     this.noteEditor.setHistoryHooks(
       () => this.historyRecorder.begin(),
@@ -9752,7 +9747,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.0";
+var VERSION = "0.40.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,