xertica-ui 2.4.0 → 2.5.0

package/dist/use-rich-text-editor-DjiddBGv.js

@@ -0,0 +1,282 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+function useRichTextEditor({
+  value,
+  onChange
+}) {
+  const editorRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const linkInputRef = useRef(null);
+  const savedSelection = useRef(null);
+  const [wordCount, setWordCount] = useState(0);
+  const [characterCount, setCharacterCount] = useState(0);
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    justifyLeft: false,
+    justifyCenter: false,
+    justifyRight: false,
+    insertUnorderedList: false,
+    insertOrderedList: false,
+    link: false,
+    h1: false,
+    h2: false,
+    h3: false,
+    p: true
+  });
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [linkUrl, setLinkUrl] = useState("https://");
+  const [isLinkOpen, setIsLinkOpen] = useState(false);
+  const [hasSavedSelection, setHasSavedSelection] = useState(false);
+  const findParentTag = useCallback((node, tagName) => {
+    let current = node;
+    while (current && current !== editorRef.current) {
+      if (current.nodeName === tagName) return current;
+      current = current.parentNode;
+    }
+    return null;
+  }, []);
+  const updateActiveFormatsRef = useRef(() => {
+  });
+  const updateActiveFormats = useCallback(() => {
+    let formatBlock = "";
+    try {
+      formatBlock = document.queryCommandValue("formatBlock");
+    } catch (_e) {
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const focusNode = selection == null ? void 0 : selection.focusNode;
+    setActiveFormats({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      justifyLeft: document.queryCommandState("justifyLeft"),
+      justifyCenter: document.queryCommandState("justifyCenter"),
+      justifyRight: document.queryCommandState("justifyRight"),
+      insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+      insertOrderedList: document.queryCommandState("insertOrderedList"),
+      link: !!(findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A")),
+      h1: formatBlock === "h1" || formatBlock === "H1",
+      h2: formatBlock === "h2" || formatBlock === "H2",
+      h3: formatBlock === "h3" || formatBlock === "H3",
+      p: formatBlock === "p" || formatBlock === "P" || formatBlock === "div" || formatBlock === "DIV" || formatBlock === ""
+    });
+  }, [findParentTag]);
+  updateActiveFormatsRef.current = updateActiveFormats;
+  useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+  }, []);
+  useEffect(() => {
+    if (editorRef.current && document.activeElement !== editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+      const text = editorRef.current.innerText || "";
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+      setCharacterCount(text.trim() ? text.length : 0);
+    }
+  }, [value]);
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      if (document.activeElement === editorRef.current) {
+        updateActiveFormatsRef.current();
+      }
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+  }, []);
+  const handleInput = useCallback(() => {
+    if (editorRef.current) {
+      onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
+      updateActiveFormats();
+      const text = editorRef.current.innerText || "";
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+      setCharacterCount(text.trim() ? text.length : 0);
+    }
+  }, [onChange, updateActiveFormats]);
+  const execCommand = useCallback((command, val = "") => {
+    var _a;
+    document.execCommand(command, false, val);
+    updateActiveFormats();
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+    if (editorRef.current) {
+      onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
+    }
+  }, [onChange, updateActiveFormats]);
+  const performSearch = useCallback((text, backward = false) => {
+    var _a, _b;
+    if (!text || !editorRef.current) return;
+    const editor = editorRef.current;
+    const selection = window.getSelection();
+    if (!selection) return;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+    const segments = [];
+    let offset = 0;
+    let node;
+    while (node = walker.nextNode()) {
+      segments.push({ node, start: offset });
+      offset += node.length;
+    }
+    const fullText = segments.reduce((acc, s) => acc + (s.node.textContent ?? ""), "");
+    let searchFrom = 0;
+    if (selection.rangeCount > 0) {
+      const range2 = selection.getRangeAt(0);
+      if (editor.contains(range2.startContainer)) {
+        const seg = segments.find((s) => s.node === range2.startContainer);
+        if (seg) {
+          searchFrom = backward ? seg.start + range2.startOffset - 1 : seg.start + range2.endOffset;
+        }
+      }
+    }
+    const lowerFull = fullText.toLowerCase();
+    const lowerQuery = text.toLowerCase();
+    let matchStart = -1;
+    if (backward) {
+      matchStart = lowerFull.lastIndexOf(lowerQuery, Math.max(0, searchFrom));
+      if (matchStart === -1) matchStart = lowerFull.lastIndexOf(lowerQuery);
+    } else {
+      matchStart = lowerFull.indexOf(lowerQuery, searchFrom);
+      if (matchStart === -1) matchStart = lowerFull.indexOf(lowerQuery);
+    }
+    if (matchStart === -1) return;
+    const matchEnd = matchStart + text.length;
+    const range = document.createRange();
+    let startSet = false;
+    let endSet = false;
+    for (let i = 0; i < segments.length && !endSet; i++) {
+      const seg = segments[i];
+      const segEnd = seg.start + seg.node.length;
+      if (!startSet && matchStart < segEnd && matchStart >= seg.start) {
+        range.setStart(seg.node, matchStart - seg.start);
+        startSet = true;
+      }
+      if (startSet && matchEnd <= segEnd) {
+        range.setEnd(seg.node, matchEnd - seg.start);
+        endSet = true;
+      }
+    }
+    if (startSet && endSet) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      (_b = (_a = range.startContainer.parentElement) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
+    }
+  }, []);
+  const handleCreateLink = useCallback(() => {
+    if (savedSelection.current) {
+      const selection2 = window.getSelection();
+      selection2 == null ? void 0 : selection2.removeAllRanges();
+      selection2 == null ? void 0 : selection2.addRange(savedSelection.current);
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      if (linkUrl) {
+        existingLink.setAttribute("href", linkUrl);
+        existingLink.setAttribute("target", "_blank");
+        existingLink.setAttribute("rel", "noopener noreferrer");
+        existingLink.style.color = "hsl(var(--primary))";
+        existingLink.style.textDecoration = "underline";
+        existingLink.style.cursor = "pointer";
+      }
+      handleInput();
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+      return;
+    }
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return;
+    }
+    if (linkUrl) {
+      document.execCommand("createLink", false, linkUrl);
+      setTimeout(() => {
+        var _a;
+        const anchor = findParentTag(((_a = window.getSelection()) == null ? void 0 : _a.anchorNode) || null, "A");
+        if (anchor) {
+          anchor.setAttribute("target", "_blank");
+          anchor.setAttribute("rel", "noopener noreferrer");
+          anchor.style.color = "hsl(var(--primary))";
+          anchor.style.textDecoration = "underline";
+          anchor.style.cursor = "pointer";
+        }
+        handleInput();
+      }, 10);
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+    }
+  }, [linkUrl, findParentTag, handleInput]);
+  const handleUnlink = useCallback(() => {
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      const parent = existingLink.parentNode;
+      while (existingLink.firstChild) {
+        parent == null ? void 0 : parent.insertBefore(existingLink.firstChild, existingLink);
+      }
+      parent == null ? void 0 : parent.removeChild(existingLink);
+      handleInput();
+    } else {
+      document.execCommand("unlink", false, "");
+    }
+  }, [findParentTag, handleInput]);
+  const onLinkPopoverOpenChange = useCallback((open) => {
+    if (open) {
+      const selection = window.getSelection();
+      const anchorNode = selection == null ? void 0 : selection.anchorNode;
+      const focusNode = selection == null ? void 0 : selection.focusNode;
+      const existingLink = findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A");
+      if (existingLink) {
+        setLinkUrl(existingLink.getAttribute("href") || "https://");
+      } else {
+        setLinkUrl("https://");
+      }
+      if (selection && selection.rangeCount > 0 && (!selection.isCollapsed || existingLink)) {
+        savedSelection.current = selection.getRangeAt(0).cloneRange();
+        setHasSavedSelection(true);
+      } else {
+        savedSelection.current = null;
+        setHasSavedSelection(false);
+      }
+      setTimeout(() => {
+        var _a;
+        return (_a = linkInputRef.current) == null ? void 0 : _a.focus();
+      }, 100);
+    } else {
+      setHasSavedSelection(false);
+    }
+    setIsLinkOpen(open);
+  }, [findParentTag]);
+  return {
+    // Refs
+    editorRef,
+    searchInputRef,
+    linkInputRef,
+    // State
+    activeFormats,
+    isSearchOpen,
+    setIsSearchOpen,
+    searchQuery,
+    setSearchQuery,
+    linkUrl,
+    setLinkUrl,
+    isLinkOpen,
+    hasSavedSelection,
+    // Computed
+    wordCount,
+    characterCount,
+    // Handlers
+    updateActiveFormats,
+    execCommand,
+    handleInput,
+    performSearch,
+    handleCreateLink,
+    handleUnlink,
+    onLinkPopoverOpenChange
+  };
+}
+export {
+  useRichTextEditor as u
+};

package/dist/use-rich-text-editor-lpeswbCs.cjs

@@ -0,0 +1,281 @@
+"use strict";
+const React = require("react");
+function useRichTextEditor({
+  value,
+  onChange
+}) {
+  const editorRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const linkInputRef = React.useRef(null);
+  const savedSelection = React.useRef(null);
+  const [wordCount, setWordCount] = React.useState(0);
+  const [characterCount, setCharacterCount] = React.useState(0);
+  const [activeFormats, setActiveFormats] = React.useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    justifyLeft: false,
+    justifyCenter: false,
+    justifyRight: false,
+    insertUnorderedList: false,
+    insertOrderedList: false,
+    link: false,
+    h1: false,
+    h2: false,
+    h3: false,
+    p: true
+  });
+  const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [linkUrl, setLinkUrl] = React.useState("https://");
+  const [isLinkOpen, setIsLinkOpen] = React.useState(false);
+  const [hasSavedSelection, setHasSavedSelection] = React.useState(false);
+  const findParentTag = React.useCallback((node, tagName) => {
+    let current = node;
+    while (current && current !== editorRef.current) {
+      if (current.nodeName === tagName) return current;
+      current = current.parentNode;
+    }
+    return null;
+  }, []);
+  const updateActiveFormatsRef = React.useRef(() => {
+  });
+  const updateActiveFormats = React.useCallback(() => {
+    let formatBlock = "";
+    try {
+      formatBlock = document.queryCommandValue("formatBlock");
+    } catch (_e) {
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const focusNode = selection == null ? void 0 : selection.focusNode;
+    setActiveFormats({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      justifyLeft: document.queryCommandState("justifyLeft"),
+      justifyCenter: document.queryCommandState("justifyCenter"),
+      justifyRight: document.queryCommandState("justifyRight"),
+      insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+      insertOrderedList: document.queryCommandState("insertOrderedList"),
+      link: !!(findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A")),
+      h1: formatBlock === "h1" || formatBlock === "H1",
+      h2: formatBlock === "h2" || formatBlock === "H2",
+      h3: formatBlock === "h3" || formatBlock === "H3",
+      p: formatBlock === "p" || formatBlock === "P" || formatBlock === "div" || formatBlock === "DIV" || formatBlock === ""
+    });
+  }, [findParentTag]);
+  updateActiveFormatsRef.current = updateActiveFormats;
+  React.useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+  }, []);
+  React.useEffect(() => {
+    if (editorRef.current && document.activeElement !== editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+      const text = editorRef.current.innerText || "";
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+      setCharacterCount(text.trim() ? text.length : 0);
+    }
+  }, [value]);
+  React.useEffect(() => {
+    const handleSelectionChange = () => {
+      if (document.activeElement === editorRef.current) {
+        updateActiveFormatsRef.current();
+      }
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+  }, []);
+  const handleInput = React.useCallback(() => {
+    if (editorRef.current) {
+      onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
+      updateActiveFormats();
+      const text = editorRef.current.innerText || "";
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+      setCharacterCount(text.trim() ? text.length : 0);
+    }
+  }, [onChange, updateActiveFormats]);
+  const execCommand = React.useCallback((command, val = "") => {
+    var _a;
+    document.execCommand(command, false, val);
+    updateActiveFormats();
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+    if (editorRef.current) {
+      onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
+    }
+  }, [onChange, updateActiveFormats]);
+  const performSearch = React.useCallback((text, backward = false) => {
+    var _a, _b;
+    if (!text || !editorRef.current) return;
+    const editor = editorRef.current;
+    const selection = window.getSelection();
+    if (!selection) return;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+    const segments = [];
+    let offset = 0;
+    let node;
+    while (node = walker.nextNode()) {
+      segments.push({ node, start: offset });
+      offset += node.length;
+    }
+    const fullText = segments.reduce((acc, s) => acc + (s.node.textContent ?? ""), "");
+    let searchFrom = 0;
+    if (selection.rangeCount > 0) {
+      const range2 = selection.getRangeAt(0);
+      if (editor.contains(range2.startContainer)) {
+        const seg = segments.find((s) => s.node === range2.startContainer);
+        if (seg) {
+          searchFrom = backward ? seg.start + range2.startOffset - 1 : seg.start + range2.endOffset;
+        }
+      }
+    }
+    const lowerFull = fullText.toLowerCase();
+    const lowerQuery = text.toLowerCase();
+    let matchStart = -1;
+    if (backward) {
+      matchStart = lowerFull.lastIndexOf(lowerQuery, Math.max(0, searchFrom));
+      if (matchStart === -1) matchStart = lowerFull.lastIndexOf(lowerQuery);
+    } else {
+      matchStart = lowerFull.indexOf(lowerQuery, searchFrom);
+      if (matchStart === -1) matchStart = lowerFull.indexOf(lowerQuery);
+    }
+    if (matchStart === -1) return;
+    const matchEnd = matchStart + text.length;
+    const range = document.createRange();
+    let startSet = false;
+    let endSet = false;
+    for (let i = 0; i < segments.length && !endSet; i++) {
+      const seg = segments[i];
+      const segEnd = seg.start + seg.node.length;
+      if (!startSet && matchStart < segEnd && matchStart >= seg.start) {
+        range.setStart(seg.node, matchStart - seg.start);
+        startSet = true;
+      }
+      if (startSet && matchEnd <= segEnd) {
+        range.setEnd(seg.node, matchEnd - seg.start);
+        endSet = true;
+      }
+    }
+    if (startSet && endSet) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      (_b = (_a = range.startContainer.parentElement) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
+    }
+  }, []);
+  const handleCreateLink = React.useCallback(() => {
+    if (savedSelection.current) {
+      const selection2 = window.getSelection();
+      selection2 == null ? void 0 : selection2.removeAllRanges();
+      selection2 == null ? void 0 : selection2.addRange(savedSelection.current);
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      if (linkUrl) {
+        existingLink.setAttribute("href", linkUrl);
+        existingLink.setAttribute("target", "_blank");
+        existingLink.setAttribute("rel", "noopener noreferrer");
+        existingLink.style.color = "hsl(var(--primary))";
+        existingLink.style.textDecoration = "underline";
+        existingLink.style.cursor = "pointer";
+      }
+      handleInput();
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+      return;
+    }
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return;
+    }
+    if (linkUrl) {
+      document.execCommand("createLink", false, linkUrl);
+      setTimeout(() => {
+        var _a;
+        const anchor = findParentTag(((_a = window.getSelection()) == null ? void 0 : _a.anchorNode) || null, "A");
+        if (anchor) {
+          anchor.setAttribute("target", "_blank");
+          anchor.setAttribute("rel", "noopener noreferrer");
+          anchor.style.color = "hsl(var(--primary))";
+          anchor.style.textDecoration = "underline";
+          anchor.style.cursor = "pointer";
+        }
+        handleInput();
+      }, 10);
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+    }
+  }, [linkUrl, findParentTag, handleInput]);
+  const handleUnlink = React.useCallback(() => {
+    const selection = window.getSelection();
+    const anchorNode = selection == null ? void 0 : selection.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      const parent = existingLink.parentNode;
+      while (existingLink.firstChild) {
+        parent == null ? void 0 : parent.insertBefore(existingLink.firstChild, existingLink);
+      }
+      parent == null ? void 0 : parent.removeChild(existingLink);
+      handleInput();
+    } else {
+      document.execCommand("unlink", false, "");
+    }
+  }, [findParentTag, handleInput]);
+  const onLinkPopoverOpenChange = React.useCallback((open) => {
+    if (open) {
+      const selection = window.getSelection();
+      const anchorNode = selection == null ? void 0 : selection.anchorNode;
+      const focusNode = selection == null ? void 0 : selection.focusNode;
+      const existingLink = findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A");
+      if (existingLink) {
+        setLinkUrl(existingLink.getAttribute("href") || "https://");
+      } else {
+        setLinkUrl("https://");
+      }
+      if (selection && selection.rangeCount > 0 && (!selection.isCollapsed || existingLink)) {
+        savedSelection.current = selection.getRangeAt(0).cloneRange();
+        setHasSavedSelection(true);
+      } else {
+        savedSelection.current = null;
+        setHasSavedSelection(false);
+      }
+      setTimeout(() => {
+        var _a;
+        return (_a = linkInputRef.current) == null ? void 0 : _a.focus();
+      }, 100);
+    } else {
+      setHasSavedSelection(false);
+    }
+    setIsLinkOpen(open);
+  }, [findParentTag]);
+  return {
+    // Refs
+    editorRef,
+    searchInputRef,
+    linkInputRef,
+    // State
+    activeFormats,
+    isSearchOpen,
+    setIsSearchOpen,
+    searchQuery,
+    setSearchQuery,
+    linkUrl,
+    setLinkUrl,
+    isLinkOpen,
+    hasSavedSelection,
+    // Computed
+    wordCount,
+    characterCount,
+    // Handlers
+    updateActiveFormats,
+    execCommand,
+    handleInput,
+    performSearch,
+    handleCreateLink,
+    handleUnlink,
+    onLinkPopoverOpenChange
+  };
+}
+exports.useRichTextEditor = useRichTextEditor;