@fieldnotes/core 0.9.0 → 0.10.0

package/dist/index.js

@@ -169,6 +169,120 @@ var Quadtree = class {
   }
 };
 
+// src/elements/note-sanitizer.ts
+var BOLD_TAGS = /* @__PURE__ */ new Set(["b", "strong"]);
+var ITALIC_TAGS = /* @__PURE__ */ new Set(["i", "em"]);
+var UNDERLINE_TAGS = /* @__PURE__ */ new Set(["u"]);
+var STRIKE_TAGS = /* @__PURE__ */ new Set(["s", "strike", "del"]);
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["div"]);
+function parseStyledRuns(html, baseFontSize) {
+  if (!html) return [];
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const runs = [];
+  const baseStyle = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    fontSize: baseFontSize
+  };
+  walkNodes(doc.body, baseStyle, runs);
+  return runs;
+}
+function walkNodes(node, style, runs) {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent ?? "";
+      if (text) {
+        runs.push({ text, ...style });
+      }
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "br") {
+      runs.push({ text: "\n", ...style });
+      continue;
+    }
+    if (BLOCK_TAGS.has(tag) && runs.length > 0) {
+      const lastRun = runs[runs.length - 1];
+      if (lastRun && !lastRun.text.endsWith("\n")) {
+        runs.push({ text: "\n", ...style });
+      }
+    }
+    const childStyle = { ...style };
+    if (BOLD_TAGS.has(tag)) childStyle.bold = true;
+    if (ITALIC_TAGS.has(tag)) childStyle.italic = true;
+    if (UNDERLINE_TAGS.has(tag)) childStyle.underline = true;
+    if (STRIKE_TAGS.has(tag)) childStyle.strikethrough = true;
+    if (tag === "span") {
+      const fontSize = el.style.fontSize;
+      if (fontSize) {
+        childStyle.fontSize = parseInt(fontSize, 10) || style.fontSize;
+      }
+    }
+    walkNodes(el, childStyle, runs);
+  }
+}
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "s",
+  "strike",
+  "del",
+  "span",
+  "br",
+  "div"
+]);
+function sanitizeNoteHtml(html) {
+  if (!html) return "";
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  sanitizeNode(doc.body);
+  return doc.body.innerHTML;
+}
+function sanitizeNode(node) {
+  const children = Array.from(node.childNodes);
+  for (const child of children) {
+    if (child.nodeType === Node.TEXT_NODE) continue;
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      child.remove();
+      continue;
+    }
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) {
+      const fragment = document.createDocumentFragment();
+      while (el.firstChild) {
+        fragment.appendChild(el.firstChild);
+      }
+      node.replaceChild(fragment, el);
+      sanitizeNode(node);
+      return;
+    }
+    sanitizeAttributes(el, tag);
+    sanitizeNode(el);
+  }
+}
+function sanitizeAttributes(el, tag) {
+  const attrs = Array.from(el.attributes);
+  for (const attr of attrs) {
+    if (tag === "span" && attr.name === "style") {
+      const fontSize = el.style.fontSize;
+      if (fontSize) {
+        el.setAttribute("style", `font-size: ${fontSize};`);
+      } else {
+        el.removeAttribute("style");
+      }
+      continue;
+    }
+    el.removeAttribute(attr.name);
+  }
+}
+
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
 function exportState(elements, camera, layers = []) {
@@ -231,7 +345,17 @@ function validateState(data) {
     ];
   }
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape", "grid"]);
+var VALID_TYPES = /* @__PURE__ */ new Set([
+  "stroke",
+  "note",
+  "arrow",
+  "image",
+  "html",
+  "text",
+  "shape",
+  "grid",
+  "template"
+]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -281,6 +405,9 @@ function migrateElement(obj) {
   if (obj["type"] === "note" && typeof obj["textColor"] !== "string") {
     obj["textColor"] = "#000000";
   }
+  if (obj["type"] === "note" && typeof obj["text"] === "string") {
+    obj["text"] = sanitizeNoteHtml(obj["text"]);
+  }
 }
 
 // src/core/snap.ts
@@ -2190,7 +2317,359 @@ var ElementRenderer = class {
   }
 };
 
+// src/elements/create-id.ts
+var counter = 0;
+function createId(prefix) {
+  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
+}
+
+// src/elements/element-factory.ts
+var DEFAULT_NOTE_FONT_SIZE = 18;
+function createStroke(input) {
+  return {
+    id: createId("stroke"),
+    type: "stroke",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    points: input.points,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2,
+    opacity: input.opacity ?? 1
+  };
+}
+function createNote(input) {
+  return {
+    id: createId("note"),
+    type: "note",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size ?? { w: 200, h: 100 },
+    text: input.text ?? "",
+    backgroundColor: input.backgroundColor ?? "#ffeb3b",
+    textColor: input.textColor ?? "#000000",
+    fontSize: input.fontSize ?? DEFAULT_NOTE_FONT_SIZE
+  };
+}
+function createArrow(input) {
+  const bend = input.bend ?? 0;
+  const result = {
+    id: createId("arrow"),
+    type: "arrow",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    from: input.from,
+    to: input.to,
+    bend,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2,
+    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
+  };
+  if (input.fromBinding) result.fromBinding = input.fromBinding;
+  if (input.toBinding) result.toBinding = input.toBinding;
+  return result;
+}
+function createImage(input) {
+  return {
+    id: createId("image"),
+    type: "image",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size,
+    src: input.src
+  };
+}
+function createHtmlElement(input) {
+  const el = {
+    id: createId("html"),
+    type: "html",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size
+  };
+  if (input.domId) el.domId = input.domId;
+  return el;
+}
+function createShape(input) {
+  return {
+    id: createId("shape"),
+    type: "shape",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    shape: input.shape ?? "rectangle",
+    size: input.size,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 2,
+    fillColor: input.fillColor ?? "none"
+  };
+}
+function createGrid(input) {
+  return {
+    id: createId("grid"),
+    type: "grid",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    gridType: input.gridType ?? "square",
+    hexOrientation: input.hexOrientation ?? "pointy",
+    cellSize: input.cellSize ?? 40,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 1,
+    opacity: input.opacity ?? 1
+  };
+}
+function createText(input) {
+  return {
+    id: createId("text"),
+    type: "text",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size ?? { w: 200, h: 28 },
+    text: input.text ?? "",
+    fontSize: input.fontSize ?? 16,
+    color: input.color ?? "#1a1a1a",
+    textAlign: input.textAlign ?? "left"
+  };
+}
+function createTemplate(input) {
+  return {
+    id: createId("template"),
+    type: "template",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    templateShape: input.templateShape,
+    radius: input.radius,
+    angle: input.angle ?? 0,
+    fillColor: input.fillColor ?? "rgba(255, 87, 34, 0.2)",
+    strokeColor: input.strokeColor ?? "#FF5722",
+    strokeWidth: input.strokeWidth ?? 2,
+    opacity: input.opacity ?? 0.6,
+    feetPerCell: input.feetPerCell,
+    radiusFeet: input.radiusFeet
+  };
+}
+
+// src/elements/note-formatting.ts
+function toggleBold() {
+  document.execCommand("bold");
+}
+function toggleItalic() {
+  document.execCommand("italic");
+}
+function toggleUnderline() {
+  document.execCommand("underline");
+}
+function toggleStrikethrough() {
+  document.execCommand("strikeThrough");
+}
+function setFontSize(size) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return;
+  const span = document.createElement("span");
+  span.style.fontSize = `${size}px`;
+  try {
+    range.surroundContents(span);
+  } catch {
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+  }
+}
+function getActiveFormats() {
+  const query = (cmd) => {
+    try {
+      return document.queryCommandState(cmd);
+    } catch {
+      return false;
+    }
+  };
+  return {
+    bold: query("bold"),
+    italic: query("italic"),
+    underline: query("underline"),
+    strikethrough: query("strikeThrough")
+  };
+}
+
+// src/elements/note-toolbar.ts
+var TOOLBAR_HEIGHT = 32;
+var TOOLBAR_GAP = 4;
+var FORMAT_BUTTONS = [
+  { label: "B", format: "bold", command: "bold" },
+  { label: "I", format: "italic", command: "italic" },
+  { label: "U", format: "underline", command: "underline" },
+  { label: "S", format: "strikethrough", command: "strikeThrough" }
+];
+var DEFAULT_FONT_SIZE_PRESETS = [
+  { label: "Small", size: 14 },
+  { label: "Normal", size: 18 },
+  { label: "Large", size: 24 },
+  { label: "Heading", size: 32 }
+];
+var NoteToolbar = class {
+  el = null;
+  anchor = null;
+  selectionListener = null;
+  fontSizePresets;
+  constructor(fontSizePresets) {
+    this.fontSizePresets = fontSizePresets ?? DEFAULT_FONT_SIZE_PRESETS;
+  }
+  show(anchor) {
+    this.hide();
+    this.anchor = anchor;
+    this.el = this.createToolbarElement();
+    document.body.appendChild(this.el);
+    this.positionToolbar(anchor);
+    this.selectionListener = () => this.updateActiveStates();
+    document.addEventListener("selectionchange", this.selectionListener);
+  }
+  hide() {
+    if (this.selectionListener) {
+      document.removeEventListener("selectionchange", this.selectionListener);
+      this.selectionListener = null;
+    }
+    if (this.el) {
+      this.el.remove();
+      this.el = null;
+    }
+    this.anchor = null;
+  }
+  getElement() {
+    return this.el;
+  }
+  updatePosition(anchor) {
+    if (this.el) {
+      this.positionToolbar(anchor);
+    }
+  }
+  createToolbarElement() {
+    const toolbar = document.createElement("div");
+    toolbar.dataset["noteToolbar"] = "";
+    Object.assign(toolbar.style, {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      gap: "2px",
+      padding: "2px 4px",
+      background: "#fff",
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      zIndex: "10000",
+      height: `${TOOLBAR_HEIGHT}px`,
+      userSelect: "none"
+    });
+    for (const btn of FORMAT_BUTTONS) {
+      toolbar.appendChild(this.createFormatButton(btn));
+    }
+    toolbar.appendChild(this.createFontSizeSelect());
+    return toolbar;
+  }
+  createFormatButton(config) {
+    const btn = document.createElement("button");
+    btn.dataset["format"] = config.format;
+    btn.textContent = config.label;
+    Object.assign(btn.style, {
+      border: "1px solid transparent",
+      borderRadius: "3px",
+      background: "none",
+      cursor: "pointer",
+      padding: "2px 6px",
+      fontSize: "13px",
+      fontWeight: config.format === "bold" ? "bold" : "normal",
+      fontStyle: config.format === "italic" ? "italic" : "normal",
+      textDecoration: config.format === "underline" ? "underline" : config.format === "strikethrough" ? "line-through" : "none",
+      minWidth: "24px",
+      height: "24px",
+      lineHeight: "24px"
+    });
+    btn.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      document.execCommand(config.command);
+      this.updateActiveStates();
+    });
+    return btn;
+  }
+  createFontSizeSelect() {
+    const select = document.createElement("select");
+    Object.assign(select.style, {
+      border: "1px solid #ccc",
+      borderRadius: "3px",
+      background: "#fff",
+      cursor: "pointer",
+      padding: "2px",
+      fontSize: "12px",
+      height: "24px",
+      marginLeft: "4px"
+    });
+    for (const preset of this.fontSizePresets) {
+      const option = document.createElement("option");
+      option.value = String(preset.size);
+      option.textContent = preset.label;
+      select.appendChild(option);
+    }
+    select.value = String(DEFAULT_NOTE_FONT_SIZE);
+    select.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+    });
+    select.addEventListener("change", () => {
+      setFontSize(Number(select.value));
+      this.updateActiveStates();
+      this.anchor?.focus();
+    });
+    return select;
+  }
+  positionToolbar(anchor) {
+    if (!this.el) return;
+    const rect = anchor.getBoundingClientRect();
+    const toolbarWidth = this.el.offsetWidth || 200;
+    let top = rect.top - TOOLBAR_HEIGHT - TOOLBAR_GAP;
+    if (top < 0) {
+      top = rect.bottom + TOOLBAR_GAP;
+    }
+    let left = rect.left + (rect.width - toolbarWidth) / 2;
+    left = Math.max(4, left);
+    Object.assign(this.el.style, {
+      top: `${top}px`,
+      left: `${left}px`
+    });
+  }
+  updateActiveStates() {
+    if (!this.el) return;
+    const active = getActiveFormats();
+    for (const config of FORMAT_BUTTONS) {
+      const btn = this.el.querySelector(`[data-format="${config.format}"]`);
+      if (!btn) continue;
+      const isActive = active[config.format] ?? false;
+      btn.style.background = isActive ? "#e0e0e0" : "none";
+      btn.style.borderColor = isActive ? "#bbb" : "transparent";
+    }
+  }
+};
+
 // src/elements/note-editor.ts
+var FORMAT_SHORTCUTS = {
+  b: toggleBold,
+  i: toggleItalic,
+  u: toggleUnderline
+};
 var NoteEditor = class {
   editingId = null;
   editingNode = null;
@@ -2199,6 +2678,10 @@ var NoteEditor = class {
   pointerHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  toolbar;
+  constructor(options) {
+    this.toolbar = options?.toolbar === false ? null : new NoteToolbar(options?.fontSizePresets);
+  }
   get isEditing() {
     return this.editingId !== null;
   }
@@ -2223,13 +2706,6 @@ var NoteEditor = class {
   stopEditing(store) {
     this.pendingEditId = null;
     if (!this.editingId || !this.editingNode) return;
-    const text = this.editingNode.textContent ?? "";
-    store.update(this.editingId, { text });
-    this.editingNode.contentEditable = "false";
-    Object.assign(this.editingNode.style, {
-      userSelect: "none",
-      cursor: "default"
-    });
     if (this.blurHandler) {
       this.editingNode.removeEventListener("blur", this.blurHandler);
     }
@@ -2239,6 +2715,14 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    const text = sanitizeNoteHtml(this.editingNode.innerHTML);
+    store.update(this.editingId, { text });
+    this.editingNode.contentEditable = "false";
+    Object.assign(this.editingNode.style, {
+      userSelect: "none",
+      cursor: "default"
+    });
+    this.toolbar?.hide();
     if (this.editingId && this.onStopCallback) {
       this.onStopCallback(this.editingId);
     }
@@ -2254,6 +2738,11 @@ var NoteEditor = class {
       this.stopEditing(store);
     }
   }
+  updateToolbarPosition() {
+    if (this.editingNode) {
+      this.toolbar?.updatePosition(this.editingNode);
+    }
+  }
   activateEditing(node, elementId, store) {
     this.editingId = elementId;
     this.editingNode = node;
@@ -2272,8 +2761,21 @@ var NoteEditor = class {
       selection.removeAllRanges();
       selection.addRange(range);
     }
-    this.blurHandler = () => this.stopEditing(store);
+    this.toolbar?.show(node);
+    this.blurHandler = (e) => {
+      const related = e.relatedTarget;
+      if (related && this.toolbar?.getElement()?.contains(related)) return;
+      this.stopEditing(store);
+    };
     this.keyHandler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+        const action = FORMAT_SHORTCUTS[e.key.toLowerCase()];
+        if (action) {
+          e.preventDefault();
+          action();
+          return;
+        }
+      }
       if (e.key === "Escape") {
         node.blur();
       }
@@ -2525,150 +3027,86 @@ var HistoryRecorder = class {
   }
 };
 
-// src/elements/create-id.ts
-var counter = 0;
-function createId(prefix) {
-  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
-}
-
-// src/elements/element-factory.ts
-function createStroke(input) {
-  return {
-    id: createId("stroke"),
-    type: "stroke",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    points: input.points,
-    color: input.color ?? "#000000",
-    width: input.width ?? 2,
-    opacity: input.opacity ?? 1
-  };
-}
-function createNote(input) {
-  return {
-    id: createId("note"),
-    type: "note",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size ?? { w: 200, h: 100 },
-    text: input.text ?? "",
-    backgroundColor: input.backgroundColor ?? "#ffeb3b",
-    textColor: input.textColor ?? "#000000"
-  };
-}
-function createArrow(input) {
-  const bend = input.bend ?? 0;
-  const result = {
-    id: createId("arrow"),
-    type: "arrow",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    from: input.from,
-    to: input.to,
-    bend,
-    color: input.color ?? "#000000",
-    width: input.width ?? 2,
-    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
-  };
-  if (input.fromBinding) result.fromBinding = input.fromBinding;
-  if (input.toBinding) result.toBinding = input.toBinding;
-  return result;
-}
-function createImage(input) {
-  return {
-    id: createId("image"),
-    type: "image",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size,
-    src: input.src
-  };
-}
-function createHtmlElement(input) {
-  const el = {
-    id: createId("html"),
-    type: "html",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size
-  };
-  if (input.domId) el.domId = input.domId;
-  return el;
-}
-function createShape(input) {
-  return {
-    id: createId("shape"),
-    type: "shape",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    shape: input.shape ?? "rectangle",
-    size: input.size,
-    strokeColor: input.strokeColor ?? "#000000",
-    strokeWidth: input.strokeWidth ?? 2,
-    fillColor: input.fillColor ?? "none"
-  };
-}
-function createGrid(input) {
-  return {
-    id: createId("grid"),
-    type: "grid",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    gridType: input.gridType ?? "square",
-    hexOrientation: input.hexOrientation ?? "pointy",
-    cellSize: input.cellSize ?? 40,
-    strokeColor: input.strokeColor ?? "#000000",
-    strokeWidth: input.strokeWidth ?? 1,
-    opacity: input.opacity ?? 1
-  };
+// src/canvas/note-canvas-renderer.ts
+function renderNoteOnCanvas(ctx, note) {
+  const { x, y } = note.position;
+  const { w, h } = note.size;
+  const r = 4;
+  const pad = 8;
+  const baseFontSize = note.fontSize ?? DEFAULT_NOTE_FONT_SIZE;
+  ctx.save();
+  ctx.fillStyle = note.backgroundColor;
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+  ctx.fill();
+  if (note.text) {
+    ctx.fillStyle = note.textColor;
+    const runs = parseStyledRuns(note.text, baseFontSize);
+    renderStyledRuns(ctx, runs, x + pad, y + pad, w - pad * 2);
+  }
+  ctx.restore();
 }
-function createText(input) {
-  return {
-    id: createId("text"),
-    type: "text",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size ?? { w: 200, h: 28 },
-    text: input.text ?? "",
-    fontSize: input.fontSize ?? 16,
-    color: input.color ?? "#1a1a1a",
-    textAlign: input.textAlign ?? "left"
-  };
+function buildFontString(run) {
+  const style = run.italic ? "italic" : "normal";
+  const weight = run.bold ? "bold" : "normal";
+  return `${style} ${weight} ${run.fontSize}px system-ui, sans-serif`;
 }
-function createTemplate(input) {
-  return {
-    id: createId("template"),
-    type: "template",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    templateShape: input.templateShape,
-    radius: input.radius,
-    angle: input.angle ?? 0,
-    fillColor: input.fillColor ?? "rgba(255, 87, 34, 0.2)",
-    strokeColor: input.strokeColor ?? "#FF5722",
-    strokeWidth: input.strokeWidth ?? 2,
-    opacity: input.opacity ?? 0.6,
-    feetPerCell: input.feetPerCell,
-    radiusFeet: input.radiusFeet
-  };
+function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
+  ctx.textBaseline = "top";
+  let cursorX = startX;
+  let cursorY = startY;
+  let lineHeight = 0;
+  for (const run of runs) {
+    ctx.font = buildFontString(run);
+    const runLineHeight = run.fontSize * 1.3;
+    lineHeight = Math.max(lineHeight, runLineHeight);
+    const words = run.text.split(/(\n| )/);
+    for (const word of words) {
+      if (word === "\n") {
+        cursorX = startX;
+        cursorY += lineHeight;
+        lineHeight = runLineHeight;
+        continue;
+      }
+      if (word === " ") {
+        const spaceWidth = ctx.measureText(" ").width;
+        if (cursorX + spaceWidth > startX + maxWidth && cursorX > startX) {
+          cursorX = startX;
+          cursorY += lineHeight;
+          lineHeight = runLineHeight;
+        } else {
+          cursorX += spaceWidth;
+        }
+        continue;
+      }
+      if (!word) continue;
+      const metrics = ctx.measureText(word);
+      if (cursorX + metrics.width > startX + maxWidth && cursorX > startX) {
+        cursorX = startX;
+        cursorY += lineHeight;
+        lineHeight = runLineHeight;
+      }
+      ctx.fillText(word, cursorX, cursorY);
+      if (run.underline) {
+        const underY = cursorY + run.fontSize + 1;
+        ctx.fillRect(cursorX, underY, metrics.width, 1);
+      }
+      if (run.strikethrough) {
+        const strikeY = cursorY + run.fontSize * 0.55;
+        ctx.fillRect(cursorX, strikeY, metrics.width, 1);
+      }
+      cursorX += metrics.width;
+    }
+  }
 }
 
 // src/canvas/export-image.ts
@@ -2747,33 +3185,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderNoteOnCanvas(ctx, note) {
-  const { x, y } = note.position;
-  const { w, h } = note.size;
-  const r = 4;
-  const pad = 8;
-  ctx.save();
-  ctx.fillStyle = note.backgroundColor;
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.lineTo(x + w - r, y);
-  ctx.arcTo(x + w, y, x + w, y + r, r);
-  ctx.lineTo(x + w, y + h - r);
-  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
-  ctx.lineTo(x + r, y + h);
-  ctx.arcTo(x, y + h, x, y + h - r, r);
-  ctx.lineTo(x, y + r);
-  ctx.arcTo(x, y, x + r, y, r);
-  ctx.closePath();
-  ctx.fill();
-  if (note.text) {
-    ctx.fillStyle = note.textColor;
-    ctx.font = "14px system-ui, sans-serif";
-    ctx.textBaseline = "top";
-    wrapText(ctx, note.text, x + pad, y + pad, w - pad * 2, 18);
-  }
-  ctx.restore();
-}
 function renderTextOnCanvas(ctx, text) {
   if (!text.text) return;
   ctx.save();
@@ -2798,25 +3209,6 @@ function renderTextOnCanvas(ctx, text) {
   }
   ctx.restore();
 }
-function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
-  const words = text.split(" ");
-  let line = "";
-  let offsetY = 0;
-  for (const word of words) {
-    const testLine = line ? `${line} ${word}` : word;
-    const metrics = ctx.measureText(testLine);
-    if (metrics.width > maxWidth && line) {
-      ctx.fillText(line, x, y + offsetY);
-      line = word;
-      offsetY += lineHeight;
-    } else {
-      line = testLine;
-    }
-  }
-  if (line) {
-    ctx.fillText(line, x, y + offsetY);
-  }
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -3215,13 +3607,13 @@ var DomNodeManager = class {
           padding: "8px",
           borderRadius: "4px",
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-          fontSize: "14px",
+          fontSize: `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`,
           overflow: "hidden",
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         node.addEventListener("dblclick", (e) => {
           e.stopPropagation();
           const id = node.dataset["elementId"];
@@ -3229,11 +3621,13 @@ 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;
         }
         node.style.backgroundColor = element.backgroundColor;
         node.style.color = element.textColor;
+        node.style.fontSize = `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`;
       }
     }
     if (element.type === "html" && !node.dataset["initialized"]) {
@@ -3664,7 +4058,10 @@ var Viewport = class {
       this.renderLoop.markAllLayersDirty();
       this.requestRender();
     });
-    this.noteEditor = new NoteEditor();
+    this.noteEditor = new NoteEditor({
+      fontSizePresets: options.fontSizePresets,
+      toolbar: options.toolbar
+    });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history);
@@ -3720,6 +4117,7 @@ var Viewport = class {
     });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
+      this.noteEditor.updateToolbarPosition();
       this.requestRender();
     });
     this.unsubStore = [
@@ -5069,17 +5467,20 @@ var NoteTool = class {
   backgroundColor;
   textColor;
   size;
+  fontSize;
   optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
     this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
+    this.fontSize = options.fontSize ?? DEFAULT_NOTE_FONT_SIZE;
   }
   getOptions() {
     return {
       backgroundColor: this.backgroundColor,
       textColor: this.textColor,
-      size: { ...this.size }
+      size: { ...this.size },
+      fontSize: this.fontSize
     };
   }
   onOptionsChange(listener) {
@@ -5090,6 +5491,7 @@ var NoteTool = class {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
     if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
+    if (options.fontSize !== void 0) this.fontSize = options.fontSize;
     this.notifyOptionsChange();
   }
   notifyOptionsChange() {
@@ -5107,6 +5509,7 @@ var NoteTool = class {
       size: { ...this.size },
       backgroundColor: this.backgroundColor,
       textColor: this.textColor,
+      fontSize: this.fontSize,
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(note);
@@ -5774,7 +6177,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.9.0";
+var VERSION = "0.10.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -5783,6 +6186,8 @@ export {
   BatchCommand,
   Camera,
   CreateLayerCommand,
+  DEFAULT_FONT_SIZE_PRESETS,
+  DEFAULT_NOTE_FONT_SIZE,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -5796,6 +6201,7 @@ export {
   MeasureTool,
   NoteEditor,
   NoteTool,
+  NoteToolbar,
   PencilTool,
   Quadtree,
   RemoveElementCommand,
@@ -5826,6 +6232,7 @@ export {
   exportState,
   findBindTarget,
   findBoundArrows,
+  getActiveFormats,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
@@ -5842,9 +6249,15 @@ export {
   isBindable,
   isNearBezier,
   parseState,
+  sanitizeNoteHtml,
+  setFontSize,
   smartSnap,
   snapPoint,
   snapToHexCenter,
+  toggleBold,
+  toggleItalic,
+  toggleStrikethrough,
+  toggleUnderline,
   unbindArrow,
   updateBoundArrow
 };