@mhamz.01/easyflow-texteditor 0.1.86 → 0.1.88

package/dist/index.mjs

@@ -1270,7 +1270,7 @@ function EditorLayout({ children, onChange, initialTabs, onTabsChange }) {
 }
 
 // src/components/tiptap-templates/simple/simple-editor.tsx
-import { useEffect as useEffect23, useRef as useRef7, useState as useState33 } from "react";
+import { useEffect as useEffect24, useRef as useRef7, useState as useState33 } from "react";
 import { EditorContent, EditorContext, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
 import Image from "@tiptap/extension-image";
@@ -6711,44 +6711,189 @@ function useUndoRedo(config) {
 
 // src/components/tiptap-ui/font-family-dropdown/font-family-dropdown.tsx
 import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
-import { useState as useState28 } from "react";
+import { useState as useState28, useEffect as useEffect18 } from "react";
+
+// src/lib/colors.ts
+var GRADIENT_ROWS_70 = [
+  // ROW 1 — GRAY (Neutral gradient)
+  "#ffffff",
+  "#f2f2f2",
+  "#e6e6e6",
+  "#cccccc",
+  "#b3b3b3",
+  "#999999",
+  "#808080",
+  "#666666",
+  "#4d4d4d",
+  "#333333",
+  // ROW 2 — RED
+  "#ffe8e8",
+  "#ffc4c4",
+  "#ff9e9e",
+  "#ff7878",
+  "#ff5252",
+  "#ff2d2d",
+  "#ff0707",
+  "#d30000",
+  "#a80000",
+  "#7d0000",
+  // ROW 3 — ORANGE
+  "#fff1e0",
+  "#ffd9b3",
+  "#ffc285",
+  "#ffab57",
+  "#ff9429",
+  "#ff7d00",
+  "#e66700",
+  "#cc5500",
+  "#b24400",
+  "#803000",
+  // ROW 4 — YELLOW
+  "#fffbe0",
+  "#fff4b3",
+  "#ffec85",
+  "#ffe457",
+  "#ffdc29",
+  "#ffd400",
+  "#e6be00",
+  "#cca900",
+  "#b39400",
+  "#806e00",
+  // ROW 5 — GREEN
+  "#e7ffe8",
+  "#c4ffc7",
+  "#9effa5",
+  "#78ff83",
+  "#52ff61",
+  "#2dff3f",
+  "#0afc22",
+  "#00d51d",
+  "#00ad18",
+  "#008512",
+  // ROW 6 — BLUE
+  "#e4f2ff",
+  "#bcdcff",
+  "#94c5ff",
+  "#6badff",
+  "#4396ff",
+  "#1b7eff",
+  "#0065e6",
+  "#0054bf",
+  "#004499",
+  "#003373",
+  // ROW 7 — PURPLE
+  "#f3e6ff",
+  "#dfb5ff",
+  "#cb85ff",
+  "#b755ff",
+  "#a326ff",
+  "#8a0dff",
+  "#7600e6",
+  "#6300bf",
+  "#4f0099",
+  "#3c0073"
+];
+
+// src/lib/editorStorage.ts
+var STORAGE_KEY = "tiptap-tabs-v1";
+var ACTIVE_TAB_KEY = "tiptap-active-tab";
+function loadTabs() {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem("tiptap-tabs-v1");
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed;
+  } catch {
+    return [];
+  }
+}
+function saveTabs(tabs) {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs));
+}
+function loadActiveTab() {
+  if (typeof window === "undefined") return "1";
+  return localStorage.getItem(ACTIVE_TAB_KEY) ?? "1";
+}
+function saveActiveTab(id) {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(ACTIVE_TAB_KEY, id);
+}
 
 // src/lib/font.ts
 var FONT_OPTIONS = [
-  { label: "Inter", cssFontFamily: "Inter" },
-  { label: "Roboto", cssFontFamily: "Roboto" },
-  { label: "Open Sans", cssFontFamily: "Opensans" },
-  { label: "Poppins", cssFontFamily: "Poppins" },
-  { label: "Montserrat", cssFontFamily: "Montserrat" },
-  { label: "Lato", cssFontFamily: "Lato" },
-  { label: "Oswald", cssFontFamily: "Oswald" },
-  { label: "Raleway", cssFontFamily: "Raleway" },
-  { label: "Merriweather", cssFontFamily: "Merriweather" },
-  { label: "Playfair Display", cssFontFamily: "Playfair" },
-  { label: "Ubuntu", cssFontFamily: "Ubuntu" },
-  { label: "PT Sans", cssFontFamily: "Ptsans" },
-  { label: "Barlow", cssFontFamily: "Barlow" },
-  { label: "Fira Sans", cssFontFamily: "Fira" },
-  { label: "Nunito", cssFontFamily: "Nunito" },
-  { label: "Cabin", cssFontFamily: "Cabin" },
-  { label: "Bebas Neue", cssFontFamily: "Bebas" },
-  { label: "Source Serif Pro", cssFontFamily: "Sourceserif" },
-  { label: "Libre Baskerville", cssFontFamily: "Librebask" },
-  { label: "Rubik", cssFontFamily: "Rubik" },
-  { label: "Inconsolata", cssFontFamily: "Inconsolata" },
-  { label: "Work Sans", cssFontFamily: "Worksans" },
-  { label: "Mulish", cssFontFamily: "Mulish" },
-  { label: "Quicksand", cssFontFamily: "Quicksand" },
-  { label: "Kanit", cssFontFamily: "Kanit" },
-  { label: "Teko", cssFontFamily: "Teko" },
-  { label: "Josefin Sans", cssFontFamily: "Josefin" },
-  { label: "Philosopher", cssFontFamily: "Philosopher" },
-  { label: "Dancing Script", cssFontFamily: "Dancing" },
-  { label: "Noto Serif", cssFontFamily: "Notoserif" },
-  { label: "Manrope", cssFontFamily: "Manrope" },
-  { label: "Space Grotesk", cssFontFamily: "Spacegrotesk" }
+  { label: "Inter", cssFontFamily: "Inter, sans-serif", googleFontName: "Inter" },
+  { label: "Roboto", cssFontFamily: "Roboto, sans-serif", googleFontName: "Roboto" },
+  { label: "Open Sans", cssFontFamily: "'Open Sans', sans-serif", googleFontName: "Open+Sans" },
+  { label: "Poppins", cssFontFamily: "Poppins, sans-serif", googleFontName: "Poppins" },
+  { label: "Montserrat", cssFontFamily: "Montserrat, sans-serif", googleFontName: "Montserrat" },
+  { label: "Lato", cssFontFamily: "Lato, sans-serif", googleFontName: "Lato" },
+  { label: "Oswald", cssFontFamily: "Oswald, sans-serif", googleFontName: "Oswald" },
+  { label: "Raleway", cssFontFamily: "Raleway, sans-serif", googleFontName: "Raleway" },
+  { label: "Merriweather", cssFontFamily: "Merriweather, serif", googleFontName: "Merriweather" },
+  { label: "Playfair Display", cssFontFamily: "'Playfair Display', serif", googleFontName: "Playfair+Display" },
+  { label: "Ubuntu", cssFontFamily: "Ubuntu, sans-serif", googleFontName: "Ubuntu" },
+  { label: "PT Sans", cssFontFamily: "'PT Sans', sans-serif", googleFontName: "PT+Sans" },
+  { label: "Barlow", cssFontFamily: "Barlow, sans-serif", googleFontName: "Barlow" },
+  { label: "Fira Sans", cssFontFamily: "'Fira Sans', sans-serif", googleFontName: "Fira+Sans" },
+  { label: "Nunito", cssFontFamily: "Nunito, sans-serif", googleFontName: "Nunito" },
+  { label: "Cabin", cssFontFamily: "Cabin, sans-serif", googleFontName: "Cabin" },
+  { label: "Bebas Neue", cssFontFamily: "'Bebas Neue', cursive", googleFontName: "Bebas+Neue" },
+  { label: "Source Serif Pro", cssFontFamily: "'Source Serif Pro', serif", googleFontName: "Source+Serif+Pro" },
+  { label: "Libre Baskerville", cssFontFamily: "'Libre Baskerville', serif", googleFontName: "Libre+Baskerville" },
+  { label: "Rubik", cssFontFamily: "Rubik, sans-serif", googleFontName: "Rubik" },
+  { label: "Inconsolata", cssFontFamily: "Inconsolata, monospace", googleFontName: "Inconsolata" },
+  { label: "Work Sans", cssFontFamily: "'Work Sans', sans-serif", googleFontName: "Work+Sans" },
+  { label: "Mulish", cssFontFamily: "Mulish, sans-serif", googleFontName: "Mulish" },
+  { label: "Quicksand", cssFontFamily: "Quicksand, sans-serif", googleFontName: "Quicksand" },
+  { label: "Kanit", cssFontFamily: "Kanit, sans-serif", googleFontName: "Kanit" },
+  { label: "Teko", cssFontFamily: "Teko, sans-serif", googleFontName: "Teko" },
+  { label: "Josefin Sans", cssFontFamily: "'Josefin Sans', sans-serif", googleFontName: "Josefin+Sans" },
+  { label: "Philosopher", cssFontFamily: "Philosopher, sans-serif", googleFontName: "Philosopher" },
+  { label: "Dancing Script", cssFontFamily: "'Dancing Script', cursive", googleFontName: "Dancing+Script" },
+  { label: "Noto Serif", cssFontFamily: "'Noto Serif', serif", googleFontName: "Noto+Serif" },
+  { label: "Manrope", cssFontFamily: "Manrope, sans-serif", googleFontName: "Manrope" },
+  { label: "Space Grotesk", cssFontFamily: "'Space Grotesk', sans-serif", googleFontName: "Space+Grotesk" }
 ];
 
+// src/lib/local-image.ts
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+}
+function saveImageBase64(key, base64) {
+  localStorage.setItem(key, base64);
+}
+function loadImageBase64(key) {
+  return localStorage.getItem(key);
+}
+
+// src/lib/font-loader.ts
+var fontsLoaded = false;
+function loadGoogleFonts() {
+  if (fontsLoaded || typeof document === "undefined") return;
+  const fontNames = FONT_OPTIONS.filter((font) => font.googleFontName).map((font) => font.googleFontName);
+  if (fontNames.length === 0) return;
+  const fontFamilies = fontNames.join("&family=");
+  const googleFontsUrl = `https://fonts.googleapis.com/css2?family=${fontFamilies}&display=swap`;
+  const existingLink = document.querySelector(`link[href*="fonts.googleapis.com"]`);
+  if (existingLink) {
+    fontsLoaded = true;
+    return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = googleFontsUrl;
+  document.head.appendChild(link);
+  fontsLoaded = true;
+}
+
 // src/components/tiptap-ui/font-family-dropdown/font-family-dropdown.tsx
 import { ChevronDown } from "lucide-react";
 
@@ -6898,6 +7043,9 @@ import { jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
 function FontFamilyDropdown() {
   const { editor } = useCurrentEditor3();
   const [open, setOpen] = useState28(false);
+  useEffect18(() => {
+    loadGoogleFonts();
+  }, []);
   if (!editor) return null;
   const currentFont = editor.getAttributes("textStyle").fontFamily || "Font Family";
   const applyFont = (family) => {
@@ -6920,7 +7068,7 @@ function FontFamilyDropdown() {
       Button,
       {
         variant: "outlineFontFamily",
-        className: "\r\n            min-w-[90px] h-7 px-2 flex items-center justify-between rounded-sm\r\n            border-[#a3a3a8] text-[#a3a3a8]\r\n            hover:border-[#000] hover:text-[#fff] transition-colors\r\n          ",
+        className: "min-w-[90px] h-7 px-2 flex items-center justify-between rounded-sm border-[#a3a3a8] text-[#a3a3a8] hover:border-[#000] hover:text-[#fff] transition-colors",
         children: [
           currentFont,
           /* @__PURE__ */ jsx76(ChevronDown, { className: "w-4 h-4" })
@@ -6970,7 +7118,7 @@ function FontFamilyDropdown() {
                 CommandItem,
                 {
                   onSelect: () => {
-                    applyFont(label);
+                    applyFont(cssFontFamily);
                     setOpen(false);
                   },
                   style: { fontFamily: cssFontFamily },
@@ -6987,92 +7135,9 @@ function FontFamilyDropdown() {
 }
 
 // src/components/tiptap-ui/color-picker/color-picker.tsx
-import { useState as useState29, useEffect as useEffect18 } from "react";
+import { useState as useState29, useEffect as useEffect19 } from "react";
 import { useCurrentEditor as useCurrentEditor4 } from "@tiptap/react";
 import { HexColorPicker } from "react-colorful";
-
-// src/lib/colors.ts
-var GRADIENT_ROWS_70 = [
-  // ROW 1 — GRAY (Neutral gradient)
-  "#ffffff",
-  "#f2f2f2",
-  "#e6e6e6",
-  "#cccccc",
-  "#b3b3b3",
-  "#999999",
-  "#808080",
-  "#666666",
-  "#4d4d4d",
-  "#333333",
-  // ROW 2 — RED
-  "#ffe8e8",
-  "#ffc4c4",
-  "#ff9e9e",
-  "#ff7878",
-  "#ff5252",
-  "#ff2d2d",
-  "#ff0707",
-  "#d30000",
-  "#a80000",
-  "#7d0000",
-  // ROW 3 — ORANGE
-  "#fff1e0",
-  "#ffd9b3",
-  "#ffc285",
-  "#ffab57",
-  "#ff9429",
-  "#ff7d00",
-  "#e66700",
-  "#cc5500",
-  "#b24400",
-  "#803000",
-  // ROW 4 — YELLOW
-  "#fffbe0",
-  "#fff4b3",
-  "#ffec85",
-  "#ffe457",
-  "#ffdc29",
-  "#ffd400",
-  "#e6be00",
-  "#cca900",
-  "#b39400",
-  "#806e00",
-  // ROW 5 — GREEN
-  "#e7ffe8",
-  "#c4ffc7",
-  "#9effa5",
-  "#78ff83",
-  "#52ff61",
-  "#2dff3f",
-  "#0afc22",
-  "#00d51d",
-  "#00ad18",
-  "#008512",
-  // ROW 6 — BLUE
-  "#e4f2ff",
-  "#bcdcff",
-  "#94c5ff",
-  "#6badff",
-  "#4396ff",
-  "#1b7eff",
-  "#0065e6",
-  "#0054bf",
-  "#004499",
-  "#003373",
-  // ROW 7 — PURPLE
-  "#f3e6ff",
-  "#dfb5ff",
-  "#cb85ff",
-  "#b755ff",
-  "#a326ff",
-  "#8a0dff",
-  "#7600e6",
-  "#6300bf",
-  "#4f0099",
-  "#3c0073"
-];
-
-// src/components/tiptap-ui/color-picker/color-picker.tsx
 import { debounce } from "lodash";
 
 // src/components/ui/label.tsx
@@ -7105,12 +7170,12 @@ function ColorPicker({ type = "text" }) {
   const [showCustom, setShowCustom] = useState29(false);
   const [tempHex, setTempHex] = useState29("#000000");
   const [canApply, setCanApply] = useState29(false);
-  useEffect18(() => {
+  useEffect19(() => {
     const current = type === "text" ? editor?.getAttributes("textStyle").color || "#000000" : editor?.getAttributes("highlight")?.color || "#FFFF00";
     setColor(current);
     setTempHex(current);
   }, [editor, type]);
-  useEffect18(() => {
+  useEffect19(() => {
     const check = () => {
       try {
         setCanApply(!editor?.state.selection.empty);
@@ -7363,17 +7428,17 @@ var ArrowLeftIcon = memo39(({ className, ...props }) => {
 ArrowLeftIcon.displayName = "ArrowLeftIcon";
 
 // src/hooks/use-window-size.ts
-import { useEffect as useEffect20, useState as useState31 } from "react";
+import { useEffect as useEffect21, useState as useState31 } from "react";
 
 // src/hooks/use-throttled-callback.ts
 import throttle from "lodash.throttle";
 
 // src/hooks/use-unmount.ts
-import { useRef as useRef6, useEffect as useEffect19 } from "react";
+import { useRef as useRef6, useEffect as useEffect20 } from "react";
 var useUnmount = (callback) => {
   const ref = useRef6(callback);
   ref.current = callback;
-  useEffect19(
+  useEffect20(
     () => () => {
       ref.current();
     },
@@ -7426,7 +7491,7 @@ function useWindowSize() {
       return { width, height, offsetTop, offsetLeft, scale };
     });
   }, 200);
-  useEffect20(() => {
+  useEffect21(() => {
     const visualViewport = window.visualViewport;
     if (!visualViewport) return;
     visualViewport.addEventListener("resize", handleViewportChange);
@@ -7439,7 +7504,7 @@ function useWindowSize() {
 }
 
 // src/hooks/use-element-rect.ts
-import { useCallback as useCallback28, useEffect as useEffect21, useState as useState32 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect22, useState as useState32 } from "react";
 var initialRect = {
   x: 0,
   y: 0,
@@ -7497,7 +7562,7 @@ function useElementRect({
     [enabled, getTargetElement],
     { leading: true, trailing: true }
   );
-  useEffect21(() => {
+  useEffect22(() => {
     if (!enabled || !isClientSide()) {
       setRect(initialRect);
       return;
@@ -7538,7 +7603,7 @@ function useRefRect(ref, options = {}) {
 }
 
 // src/hooks/use-cursor-visibility.ts
-import { useEffect as useEffect22 } from "react";
+import { useEffect as useEffect23 } from "react";
 function useCursorVisibility({
   editor,
   overlayHeight = 0
@@ -7549,7 +7614,7 @@ function useCursorVisibility({
     throttleMs: 100,
     useResizeObserver: true
   });
-  useEffect22(() => {
+  useEffect23(() => {
     const ensureCursorVisibility = () => {
       if (!editor) return;
       const { state, view } = editor;
@@ -7704,7 +7769,7 @@ function SimpleEditor() {
       debouncedSave(editor2);
     }
   });
-  useEffect23(() => {
+  useEffect24(() => {
     if (editor) {
       console.log("\u{1F527} Setting editor content in context");
       setEditorContent(editor);
@@ -7714,17 +7779,17 @@ function SimpleEditor() {
     editor,
     overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0
   });
-  useEffect23(() => {
+  useEffect24(() => {
     if (!isMobile && mobileView !== "main") {
       setMobileView("main");
     }
   }, [isMobile, mobileView]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (editor) {
       editor.commands.focus("start");
     }
   }, [editor]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!window?.visualViewport) return;
     const toolbar = document.querySelector(
       ".tiptap-toolbar[data-variant='fixed']"
@@ -7798,11 +7863,11 @@ function Editor({ onChange, className, style, onTabsChange, initialTabs }) {
 }
 
 // src/hooks/use-scrolling.ts
-import { useEffect as useEffect24, useState as useState34 } from "react";
+import { useEffect as useEffect25, useState as useState34 } from "react";
 function useScrolling(target, options = {}) {
   const { debounce: debounce2 = 150, fallbackToDocument = true } = options;
   const [isScrolling, setIsScrolling] = useState34(false);
-  useEffect24(() => {
+  useEffect25(() => {
     const element = target && typeof Window !== "undefined" && target instanceof Window ? target : target?.current ?? window;
     const eventTarget = fallbackToDocument && element === window && typeof document !== "undefined" ? document : element;
     const on = (el, event, handler) => el.addEventListener(event, handler, true);
@@ -7831,50 +7896,6 @@ function useScrolling(target, options = {}) {
   }, [target, debounce2, fallbackToDocument, isScrolling]);
   return isScrolling;
 }
-
-// src/lib/editorStorage.ts
-var STORAGE_KEY = "tiptap-tabs-v1";
-var ACTIVE_TAB_KEY = "tiptap-active-tab";
-function loadTabs() {
-  if (typeof window === "undefined") return [];
-  try {
-    const raw = localStorage.getItem("tiptap-tabs-v1");
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    if (!Array.isArray(parsed)) return [];
-    return parsed;
-  } catch {
-    return [];
-  }
-}
-function saveTabs(tabs) {
-  if (typeof window === "undefined") return;
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs));
-}
-function loadActiveTab() {
-  if (typeof window === "undefined") return "1";
-  return localStorage.getItem(ACTIVE_TAB_KEY) ?? "1";
-}
-function saveActiveTab(id) {
-  if (typeof window === "undefined") return;
-  localStorage.setItem(ACTIVE_TAB_KEY, id);
-}
-
-// src/lib/local-image.ts
-function fileToBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = (error) => reject(error);
-  });
-}
-function saveImageBase64(key, base64) {
-  localStorage.setItem(key, base64);
-}
-function loadImageBase64(key) {
-  return localStorage.getItem(key);
-}
 export {
   Editor,
   EditorBridgeProvider,