v-notion-editor 0.2.1 → 0.2.2

package/README.md

@@ -10,10 +10,11 @@ A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It
 -  **Masonry Grid Support**: Design and control masonry grids with column resizing, grid controls, and item-level customization.
 -  **Image Handling**: Drag-and-drop image uploads with customizable upload functions.
 -  **File Handler**: Smart paste handling for images and rich content
--  **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
 -  **Embed Handling**: Embed videos OR websites supports YouTube, Vimeo, Google Maps, Facebook, and more.
 -  **Math Rendering**: Inline and block math support with KaTeX
 -  **CSV Import**: Import CSV files data into tables
+-  **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
+-  **Responsive Design**: Optimized for screen sizes, including responsive tables and smart masonry grid layouts for tablets and mobile devices.
 -  **Drag & Drop**: Reorder content blocks with visual drag handles
 -  **Slash Commands**: Quick content insertion with "/" command menu
 -  **Link Management**: Smart link insertion and editing with bubble menu

package/{index-hDwO4nW3.js → index-BIQMg69M.js}

@@ -35079,7 +35079,7 @@ const gz = /* @__PURE__ */ Ae({
   }, e.click();
 }), n6 = async (t) => new Promise(async (e, n) => {
   try {
-    (await import("./papaparse.min-EiJr4k3N.js").then((i) => i.p)).default.parse(t, {
+    (await import("./papaparse.min-BPvsfuSc.js").then((i) => i.p)).default.parse(t, {
       complete: (i) => {
         try {
           const s = i.data;
@@ -37893,12 +37893,12 @@ const TF = { class: "masonry-item-controls" }, AF = {
     return [{ tag: 'div[data-type="masonry-grid-item"]' }];
   },
   renderHTML({ HTMLAttributes: t, node: e }) {
-    const n = e.attrs.backgroundColor, r = n ? `vEditor-bg-${n}` : "";
+    const n = e.attrs.backgroundColor, i = `masonry-grid-item-wrapper ${n ? `vEditor-bg-${n}` : ""}`.trim();
     return [
       "div",
       ct(t, {
         "data-type": "masonry-grid-item",
-        class: r,
+        class: i,
         ...n && { "data-background-color": n }
       }),
       0
@@ -65572,65 +65572,88 @@ const WW = ["innerHTML"], cj = /* @__PURE__ */ Ae({
       if (!n.value) return;
       n.value.querySelectorAll(
         '.tiptap-mathematics-render, [data-type="inline-math"]'
-      ).forEach((l) => {
-        const c = l.getAttribute("data-latex");
-        if (c)
+      ).forEach((u) => {
+        const d = u.getAttribute("data-latex");
+        if (d)
           try {
-            uk.render(c, l, {
+            uk.render(d, u, {
               throwOnError: !1
             });
-          } catch (u) {
-            console.error("KaTeX rendering error:", u);
+          } catch (h) {
+            console.error("KaTeX rendering error:", h);
           }
       });
     }, s = () => {
       if (!n.value) return;
-      n.value.querySelectorAll("pre code").forEach((l) => {
-        const c = l.parentElement;
-        if (!c) return;
-        if (c.hasAttribute("data-syntax-highlighting")) {
-          const f = (l.className || "").match(/language-([\w-]+)/), p = f ? f[1] : null;
+      n.value.querySelectorAll("pre code").forEach((u) => {
+        const d = u.parentElement;
+        if (!d) return;
+        if (d.hasAttribute("data-syntax-highlighting")) {
+          const m = (u.className || "").match(/language-([\w-]+)/), g = m ? m[1] : null;
           try {
-            const m = l.textContent || "";
-            let g;
-            p && p !== "auto" && r.listLanguages().includes(p) ? g = r.highlight(p, m) : g = r.highlightAuto(m);
-            const b = Eu(g);
-            l.innerHTML = b, l.classList.add("hljs");
-          } catch (m) {
-            console.warn("Failed to highlight code block:", m);
+            const b = u.textContent || "";
+            let x;
+            g && g !== "auto" && r.listLanguages().includes(g) ? x = r.highlight(g, b) : x = r.highlightAuto(b);
+            const S = Eu(x);
+            u.innerHTML = S, u.classList.add("hljs");
+          } catch (b) {
+            console.warn("Failed to highlight code block:", b);
           }
         } else
-          l.classList.add("hljs-plain");
-        if (c.querySelector(".code-block-copy-btn")) return;
-        const d = document.createElement("button");
-        d.className = "code-block-copy-btn", d.setAttribute("aria-label", "Copy code"), d.title = "Copy", d.innerHTML = Ro.copy, d.addEventListener("click", async () => {
-          const h = l.textContent || "";
+          u.classList.add("hljs-plain");
+        if (d.querySelector(".code-block-copy-btn")) return;
+        const f = document.createElement("button");
+        f.className = "code-block-copy-btn", f.setAttribute("aria-label", "Copy code"), f.title = "Copy", f.innerHTML = Ro.copy, f.addEventListener("click", async () => {
+          const p = u.textContent || "";
           try {
-            await navigator.clipboard.writeText(h), d.innerHTML = Ro.check, d.classList.add("text-green-600"), setTimeout(() => {
-              d.innerHTML = Ro.copy, d.classList.remove("text-green-600");
+            await navigator.clipboard.writeText(p), f.innerHTML = Ro.check, f.classList.add("text-green-600"), setTimeout(() => {
+              f.innerHTML = Ro.copy, f.classList.remove("text-green-600");
             }, 2e3);
-          } catch (f) {
-            console.error("Failed to copy text: ", f);
+          } catch (m) {
+            console.error("Failed to copy text: ", m);
           }
-        }), c.appendChild(d);
+        }), d.appendChild(f);
       });
     }, o = () => {
+      if (!n.value) return;
+      n.value.querySelectorAll('[data-type="masonry-grid"]').forEach((u) => {
+        const d = Array.from(u.children).filter(
+          (f) => f.getAttribute("data-type") === "masonry-grid-column"
+        ), h = d.length;
+        h !== 0 && d.forEach((f, p) => {
+          Array.from(f.children).filter(
+            (g) => g.getAttribute("data-type") === "masonry-grid-item"
+          ).forEach((g, b) => {
+            const x = b * h + p;
+            g.style.setProperty("--mobile-order", x.toString());
+          });
+        });
+      });
+    }, a = () => {
+      if (!n.value) return;
+      n.value.querySelectorAll("table").forEach((u) => {
+        var h, f;
+        if ((h = u.parentElement) != null && h.classList.contains("table-container")) return;
+        const d = document.createElement("div");
+        d.className = "table-container", (f = u.parentNode) == null || f.insertBefore(d, u), d.appendChild(u);
+      });
+    }, l = () => {
       an(() => {
-        i(), s();
+        a(), i(), s(), o();
       });
     };
     return Vt(() => {
-      o();
+      l();
     }), ir(
       () => e.content,
       () => {
-        o();
+        l();
       }
-    ), (a, l) => (W(), ce("div", {
+    ), (c, u) => (W(), ce("div", {
       ref_key: "containerRef",
       ref: n,
-      class: We(["v-notion-editor read-mode", a.className]),
-      innerHTML: a.content
+      class: We(["v-notion-editor read-mode", c.className]),
+      innerHTML: c.content
     }, null, 10, WW));
   }
 });

package/index.js

@@ -1,4 +1,4 @@
-import { _ as t, b as i, a as r } from "./index-hDwO4nW3.js";
+import { _ as t, b as i, a as r } from "./index-BIQMg69M.js";
 export {
   t as NotionEditor,
   i as NotionReadMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-notion-editor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A Notion-style Vue 3 editor.",
   "type": "module",
   "author": "safdar-azeem",

package/{papaparse.min-EiJr4k3N.js → papaparse.min-BPvsfuSc.js}

@@ -1,4 +1,4 @@
-import { g as me, c as ye } from "./index-hDwO4nW3.js";
+import { g as me, c as ye } from "./index-BIQMg69M.js";
 var ce = { exports: {} };
 /* @license
 Papa Parse