@signiphi/pdf-compose 0.1.0-beta.10 → 0.1.0-beta.11

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React12 from 'react';
 import React12__default, { createContext, useCallback, useState, useRef, useEffect, useMemo, useContext } from 'react';
-import { AlertTriangle, RefreshCw, FileText, ChevronDown, Circle, CheckSquare, Calendar, Hash, PenTool, Type, Braces, Droplets, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Maximize2, Loader2, Plus, Save, FileDown, CheckCircle2, PanelLeftOpen, PanelLeftClose, Undo, Redo, Bold, Italic, Underline as Underline$1, Code, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Minus, AlignLeft, AlignCenter, AlignRight, Trash2, X, PenLine, Upload, Search, WrapText, Download } from 'lucide-react';
+import { AlertTriangle, RefreshCw, FileText, ChevronDown, Circle, CheckSquare, Calendar, Hash, PenTool, Type, Braces, Droplets, Image, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Maximize2, Loader2, Plus, Save, FileDown, CheckCircle2, PanelLeftOpen, PanelLeftClose, Undo, Redo, Bold, Italic, Underline as Underline$1, Code, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Minus, AlignLeft, AlignCenter, AlignRight, Trash2, X, PenLine, Upload, Search, WrapText, Download } from 'lucide-react';
 import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
@@ -418,6 +418,72 @@ var WatermarkNode = Node.create({
     return ReactNodeViewRenderer(WatermarkNodeView);
   }
 });
+function ImageNodeView({ node, selected }) {
+  const { src, varName, alt, width, height, align } = node.attrs;
+  const hasRenderableSrc = !!src && /^(https?:|data:)/i.test(src);
+  const wrapperJustify = align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start";
+  const toCssSize = (v) => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v;
+  const sizeStyle = {};
+  if (width) sizeStyle.width = toCssSize(width);
+  if (height) sizeStyle.height = toCssSize(height);
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx("div", { className: cn("flex my-1", wrapperJustify), "data-image-node": "", children: hasRenderableSrc ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: alt || varName || "",
+      style: sizeStyle,
+      className: cn(
+        "max-w-full rounded-sm object-contain",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      draggable: false
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-image-placeholder": "",
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-md border border-dashed text-sm",
+        "bg-slate-50 text-slate-500 border-slate-300",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      style: height ? { minHeight: toCssSize(height) } : void 0,
+      title: varName ? `Image variable: ${varName}` : "Image",
+      children: [
+        /* @__PURE__ */ jsx(Image, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: varName ? `Image: ${varName}` : alt || "Image" })
+      ]
+    }
+  ) }) });
+}
+
+// src/extensions/image-node.ts
+var ImageNode = Node.create({
+  name: "imageNode",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      src: { default: "" },
+      varName: { default: "" },
+      alt: { default: "" },
+      width: { default: "" },
+      height: { default: "" },
+      align: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-image-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-image-node": "" }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView);
+  }
+});
 var RepeatNode = Node.create({
   name: "repeatBlock",
   group: "block",
@@ -1062,11 +1128,23 @@ function parseBlocks(lines, startIdx, stopCondition) {
       continue;
     }
     const inlineNodes = parseInline(line);
-    const nonWhitespace = inlineNodes.filter(
-      (n) => !(n.type === "text" && !(n.text || "").trim())
-    );
-    if (nonWhitespace.length === 1 && nonWhitespace[0].type === "imageNode") {
-      content.push(nonWhitespace[0]);
+    if (inlineNodes.some((n) => n.type === "imageNode")) {
+      let run = [];
+      const flushRun = () => {
+        if (run.some((n) => !(n.type === "text" && !(n.text || "").trim()))) {
+          content.push({ type: "paragraph", content: run });
+        }
+        run = [];
+      };
+      for (const n of inlineNodes) {
+        if (n.type === "imageNode") {
+          flushRun();
+          content.push(n);
+        } else {
+          run.push(n);
+        }
+      }
+      flushRun();
     } else {
       content.push({ type: "paragraph", content: inlineNodes });
     }
@@ -3192,6 +3270,7 @@ function useDocumentGenerator(options = {}) {
       ColumnsNode,
       ColumnNode,
       WatermarkNode,
+      ImageNode,
       RepeatNode,
       SubtotalsNode
     ],
@@ -7428,6 +7507,6 @@ function parseXmlTemplate(xmlString) {
   };
 }
 
-export { DocumentGenerator, EditorPanel, FormFieldType, PreviewPanel, RepeatNode, SubtotalsNode, ThemeProvider, expandBlockVariables, expandRepeatContent, extractVariablesFromContent, generatePdfFromMarkdown, generatePdfFromTiptap, isZeroLike, markdownToTiptap, parseXmlTemplate, suppressZeroContent, tiptapToMarkdown, useDocumentGenerator, useTheme };
+export { DocumentGenerator, EditorPanel, FormFieldType, ImageNode, PreviewPanel, RepeatNode, SubtotalsNode, ThemeProvider, expandBlockVariables, expandRepeatContent, extractVariablesFromContent, generatePdfFromMarkdown, generatePdfFromTiptap, isZeroLike, markdownToTiptap, parseXmlTemplate, suppressZeroContent, tiptapToMarkdown, useDocumentGenerator, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map