@daisychainapp/maily-to-core 0.3.6 → 0.4.1

package/dist/extensions/index.mjs

@@ -4666,6 +4666,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__ */ jsxs3(
     NodeViewWrapper2,
     __spreadProps(__spreadValues({
@@ -4674,13 +4678,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%"
       }), {
@@ -4713,7 +4717,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
           }
         ),
@@ -4724,11 +4728,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(
@@ -4764,6 +4770,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__ */ jsxs3(
     "div",
     __spreadProps(__spreadValues({}, rest), {
@@ -4775,8 +4783,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__ */ jsxs3(Fragment2, { children: [
@@ -6957,16 +6968,16 @@ function Select(props) {
     placeholder
   } = props;
   const selectId = `mly${useId()}`;
-  const content = /* @__PURE__ */ jsxs14("div", { className: "mly:relative", children: [
+  const content = /* @__PURE__ */ jsxs14("div", { className: "mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
     /* @__PURE__ */ jsx30("label", { htmlFor: selectId, className: "mly:sr-only", children: label }),
-    Icon && /* @__PURE__ */ jsx30("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__ */ jsx30(Icon, { className: cn("mly:size-3", iconClassName) }) }),
+    Icon && /* @__PURE__ */ jsx30("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__ */ jsx30(Icon, { className: cn("mly:size-3.5", iconClassName) }) }),
     /* @__PURE__ */ jsxs14(
       "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 || "",
@@ -8606,83 +8617,24 @@ import { createLowlight, common } from "lowlight";
 
 // src/editor/nodes/html/html-view.tsx
 import { NodeViewContent as NodeViewContent2, NodeViewWrapper as NodeViewWrapper7 } from "@tiptap/react";
-import { useMemo as useMemo7 } from "react";
-import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "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 = useMemo7(() => {
-    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__ */ jsxs20(
+  return /* @__PURE__ */ jsx37(
     NodeViewWrapper7,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: [
-        activeTab === "code" && /* @__PURE__ */ jsx37("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__ */ jsx37(
-          NodeViewContent2,
-          {
-            as: "code",
-            className: cn("is-editable", languageClass)
-          }
-        ) }),
-        activeTab === "preview" && /* @__PURE__ */ jsx37(
-          "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__ */ jsx37("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ jsx37(
+        NodeViewContent2,
+        {
+          as: "code",
+          className: cn("is-editable", languageClass)
+        }
+      ) })
     }
   );
 }