@daisychainapp/maily-to-core 0.3.6 → 0.4.1

package/dist/extensions/index.cjs

@@ -4754,6 +4754,10 @@ function ImageView(props) {
     }),
     [handleImageUpload]
   );
+  const widthValue = width && width !== "auto" ? `${width}px` : void 0;
+  const heightValue = height && height !== "auto" ? `${height}px` : void 0;
+  const hasExplicitWidth = Boolean(widthValue || (resizingStyle == null ? void 0 : resizingStyle.width));
+  const hasExplicitHeight = Boolean(heightValue || (resizingStyle == null ? void 0 : resizingStyle.height));
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     import_react6.NodeViewWrapper,
     __spreadProps(__spreadValues({
@@ -4762,13 +4766,13 @@ function ImageView(props) {
       "data-drag-handle": editor.isEditable,
       className: cn("mly-image-drop-zone", isDraggingOver && "mly-drag-over"),
       style: __spreadValues(__spreadProps(__spreadValues({}, hasImageSrc && status === "loaded" ? __spreadValues({
-        width: width ? `${width}px` : void 0,
-        height: height ? `${height}px` : void 0
+        width: widthValue,
+        height: heightValue
       }, resizingStyle) : {}), {
         overflow: "hidden",
         position: "relative",
         // Weird! Basically tiptap/prose wraps this in a span and the line height causes an annoying buffer.
-        lineHeight: "0px",
+        lineHeight: "normal",
         display: "block",
         maxWidth: "100%"
       }), {
@@ -4801,7 +4805,7 @@ function ImageView(props) {
             type: "file",
             accept: "image/*",
             onChange: handleFileChange,
-            className: "mly:absolute mly:inset-0 mly:opacity-0",
+            className: "mly:absolute mly:inset-0 mly:z-10 mly:h-full mly:w-full mly:cursor-pointer mly:appearance-none mly:bg-transparent mly:opacity-0 mly:text-transparent",
             multiple: false
           }
         ),
@@ -4812,11 +4816,13 @@ function ImageView(props) {
               ref: imgRef,
               style: __spreadProps(__spreadValues({}, resizingStyle), {
                 cursor: "default",
-                objectFit: "fill",
+                objectFit: "contain",
                 marginBottom: 0,
                 borderRadius,
-                width: (resizingStyle == null ? void 0 : resizingStyle.width) ? `${resizingStyle.width}px` : width ? `${width}px` : "auto",
-                height: (resizingStyle == null ? void 0 : resizingStyle.height) ? `${resizingStyle.height}px` : height ? `${height}px` : "auto"
+                width: (resizingStyle == null ? void 0 : resizingStyle.width) ? `${resizingStyle.width}px` : widthValue != null ? widthValue : "100%",
+                height: (resizingStyle == null ? void 0 : resizingStyle.height) ? `${resizingStyle.height}px` : heightValue != null ? heightValue : "auto",
+                maxWidth: hasExplicitWidth ? void 0 : "100%",
+                maxHeight: hasExplicitHeight ? void 0 : "none"
               }),
               draggable: editor.isEditable,
               className: cn(
@@ -4852,6 +4858,8 @@ function ImageView(props) {
 }
 function ImageStatusLabel(props) {
   const _a = props, { status, minHeight, className, style, isDropZone } = _a, rest = __objRest(_a, ["status", "minHeight", "className", "style", "isDropZone"]);
+  const resolvedMinHeight = minHeight != null ? minHeight : isDropZone ? 36 : void 0;
+  const resolvedPaddingY = isDropZone ? 8 : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
@@ -4863,8 +4871,11 @@ function ImageStatusLabel(props) {
         },
         className
       ),
-      style: __spreadValues(__spreadValues({}, minHeight ? {
-        minHeight
+      style: __spreadValues(__spreadValues(__spreadValues({}, resolvedMinHeight ? {
+        minHeight: resolvedMinHeight
+      } : {}), resolvedPaddingY ? {
+        paddingTop: resolvedPaddingY,
+        paddingBottom: resolvedPaddingY
       } : {}), style),
       children: [
         status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
@@ -7015,16 +7026,16 @@ function Select(props) {
     placeholder
   } = props;
   const selectId = `mly${(0, import_react22.useId)()}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly:relative", children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { htmlFor: selectId, className: "mly:sr-only", children: label }),
-    Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mly:pointer-events-none mly:absolute mly:inset-y-0 mly:left-2 mly:z-20 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: cn("mly:size-3", iconClassName) }) }),
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mly:pointer-events-none mly:absolute mly:left-2 mly:top-1/2 mly:z-20 mly:flex mly:h-7 mly:-translate-y-1/2 mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: cn("mly:size-3.5", iconClassName) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "select",
       {
         id: selectId,
         className: cn(
-          "mly-select-padding mly:flex mly:min-h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
-          !!Icon && "mly:pl-7",
+          "mly-select-padding mly:flex mly:h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:leading-none mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
+          !!Icon && "mly:pl-[25px]",
           className
         ),
         value: value || "",
@@ -8647,89 +8658,30 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
 // src/editor/nodes/html/html.tsx
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_state5 = require("@tiptap/pm/state");
-var import_react37 = require("@tiptap/react");
+var import_react36 = require("@tiptap/react");
 var import_xml = __toESM(require("highlight.js/lib/languages/xml"), 1);
 var import_lowlight = require("lowlight");
 
 // src/editor/nodes/html/html-view.tsx
 var import_react35 = require("@tiptap/react");
-var import_react36 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function HTMLCodeBlockView(props) {
-  const { node, updateAttributes: updateAttributes2 } = props;
-  let { language, activeTab = "code" } = node.attrs;
-  activeTab || (activeTab = "code");
+  const { node } = props;
+  const { language } = node.attrs;
   const languageClass = language ? `language-${language}` : "";
-  const html2 = (0, import_react36.useMemo)(() => {
-    const text2 = node.content.content.reduce((acc, cur) => {
-      if (cur.type.name === "text") {
-        return acc + cur.text;
-      } else if (cur.type.name === "variable") {
-        const { id: variable, fallback } = (cur == null ? void 0 : cur.attrs) || {};
-        const formattedVariable = fallback ? `{{${variable},fallback=${fallback}}}` : `{{${variable}}}`;
-        return acc + formattedVariable;
-      }
-      return acc;
-    }, "");
-    const htmlParser = new DOMParser();
-    const htmlDoc = htmlParser.parseFromString(text2, "text/html");
-    const style = htmlDoc.querySelectorAll("style");
-    const body = htmlDoc.body;
-    const combinedStyle = Array.from(style).map((s) => s.innerHTML).join("\n");
-    return `<style>${combinedStyle}</style>${body.innerHTML}`;
-  }, [activeTab]);
-  const isEmpty = html2 === "";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     import_react35.NodeViewWrapper,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: [
-        activeTab === "code" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "mly:my-0 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-2 mly:text-black", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_react35.NodeViewContent,
-          {
-            as: "code",
-            className: cn("is-editable", languageClass)
-          }
-        ) }),
-        activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          "div",
-          {
-            className: cn(
-              "mly:not-prose mly:rounded-lg mly:border mly:border-gray-200 mly:p-2",
-              isEmpty && "mly:min-h-[42px]"
-            ),
-            ref: (node2) => {
-              if (!node2 || (node2 == null ? void 0 : node2.shadowRoot)) {
-                return;
-              }
-              const shadow = node2.attachShadow({ mode: "open" });
-              const sheet = new CSSStyleSheet();
-              sheet.replaceSync(`
-              * { font-family: 'Inter', sans-serif; }
-              blockquote, h1, h2, h3, img, li, ol, p, ul {
-                margin-top: 0;
-                margin-bottom: 0;
-              }
-            `);
-              shadow.adoptedStyleSheets = [sheet];
-              const container = document.createElement("div");
-              container.innerHTML = html2;
-              shadow.appendChild(container);
-            },
-            contentEditable: false,
-            onClick: () => {
-              if (!isEmpty) {
-                return;
-              }
-              updateAttributes2({
-                activeTab: "code"
-              });
-            }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_react35.NodeViewContent,
+        {
+          as: "code",
+          className: cn("is-editable", languageClass)
+        }
+      ) })
     }
   );
 }
@@ -8761,7 +8713,7 @@ var HTMLCodeBlockExtension = import_extension_code_block_lowlight.default.extend
     });
   },
   addNodeView() {
-    return (0, import_react37.ReactNodeViewRenderer)(HTMLCodeBlockView, {
+    return (0, import_react36.ReactNodeViewRenderer)(HTMLCodeBlockView, {
       className: "mly:relative",
       attrs: ({ node }) => {
         var _a;