@rufous/ui 0.1.63 → 0.2.0-beta.0

package/dist/chunk-66HHM7VI.js

@@ -0,0 +1,468 @@
+// lib/Editors/RichTextEditor.tsx
+import React, { useEffect, useRef, useState } from "react";
+import JoditReact from "jodit-react";
+var MOBILE_BREAKPOINT = 768;
+var TODO_STATES = [
+  { label: "Todo", name: "empty", imageUrl: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg" },
+  { label: "Working", name: "working", imageUrl: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg" },
+  { label: "Blocked", name: "blocked", imageUrl: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg" },
+  { label: "Resolved", name: "resolved", imageUrl: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" }
+];
+var BASIC_BUTTONS = [
+  "paragraph",
+  "fontsize",
+  "font",
+  "bold",
+  "italic",
+  "link",
+  "lineHeight",
+  "|",
+  "ul",
+  "ol",
+  "|",
+  "align",
+  "outdent",
+  "indent",
+  "|",
+  "brush",
+  "table",
+  "image",
+  "video",
+  "|"
+];
+var MOBILE_BUTTONS = ["paragraph", "bold"];
+var MORE_BUTTONS = ["spellcheck", "cut", "copy", "symbols"];
+var UNDO_REDO = ["undo", "redo", "|"];
+var AI_BUTTONS = ["|", "ai-commands", "|"];
+function debounce(fn, delay) {
+  let t;
+  return (...args) => {
+    clearTimeout(t);
+    t = setTimeout(() => fn(...args), delay);
+  };
+}
+function createTodoItem(stateName = "empty") {
+  const state = TODO_STATES.find((s) => s.name === stateName) ?? TODO_STATES[0];
+  const container = document.createElement("p");
+  container.classList.add("todo-item");
+  const btn = document.createElement("button");
+  btn.classList.add("todo-item-button");
+  btn.setAttribute("contenteditable", "false");
+  const img = document.createElement("img");
+  img.src = state.imageUrl;
+  img.alt = state.label;
+  btn.appendChild(img);
+  const span = document.createElement("span");
+  span.classList.add("todo-item-text");
+  span.innerText = state.label;
+  container.appendChild(btn);
+  container.appendChild(span);
+  return container;
+}
+function RichTextEditor({
+  value = "",
+  onChange,
+  onBlur,
+  onError,
+  onClose,
+  onImageUploadSuccess,
+  height = "300px",
+  width = "100%",
+  placeholder = "Start writing\u2026",
+  disabled = false,
+  allowResizeY = true,
+  fullSize = false,
+  aiSupport = false,
+  licenseKey = "",
+  translationKey = "",
+  token = "",
+  uploadUrl = "",
+  mentions,
+  error,
+  className = "",
+  style
+}) {
+  const editorRef = useRef(null);
+  const containerRef = useRef(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [showAll, setShowAll] = useState(true);
+  const [isListening, setIsListening] = useState(false);
+  const [speechText, setSpeechText] = useState("");
+  const [speechVisible, setSpeechVisible] = useState(false);
+  const [speechPos, setSpeechPos] = useState({ top: 0, left: 0 });
+  const recognitionRef = useRef(null);
+  const silenceTimer = useRef(null);
+  const interimSpanRef = useRef(null);
+  useEffect(() => {
+    const check = () => {
+      const mobile = window.innerWidth <= MOBILE_BREAKPOINT;
+      setIsMobile(mobile);
+      if (!mobile) setShowAll(true);
+    };
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  useEffect(() => {
+    let cursorTimeout;
+    import("./esm-5T53WHPT.js").then(({ Jodit }) => {
+      Jodit.plugins.add("rteKeyLogger", (jodit) => {
+        const debouncedToggle = debounce((btn, container) => {
+          const pressed = container.getAttribute("aria-pressed");
+          if (!pressed || pressed === "false") {
+            container.setAttribute("aria-pressed", "true");
+            btn.setAttribute("aria-pressed", "true");
+          } else {
+            container.setAttribute("aria-pressed", "false");
+            btn.setAttribute("aria-pressed", "false");
+          }
+        }, 150);
+        jodit.events.on("keydown", (e) => {
+          const isTodoShortcut = (e.key === "U" || e.key === "u") && e.shiftKey && (e.metaKey || e.ctrlKey);
+          if (isTodoShortcut) {
+            e.preventDefault();
+            const btnList2 = document.getElementsByClassName("jodit-toolbar-button_insertTodo");
+            const btn = btnList2[0]?.getElementsByTagName("button")[0];
+            if (!btn || !btnList2[0]) return false;
+            const isPressed = btnList2[0].getAttribute("aria-pressed") === "true";
+            if (!isPressed) {
+              btnList2[0].setAttribute("aria-pressed", "true");
+              btn.setAttribute("aria-pressed", "true");
+              const todo2 = createTodoItem();
+              jodit.selection.insertNode(todo2);
+              const textSpan2 = todo2.querySelector("span");
+              if (textSpan2) setTimeout(() => jodit.selection?.setCursorIn?.(textSpan2), 0);
+            } else {
+              btnList2[0].setAttribute("aria-pressed", "false");
+              btn.setAttribute("aria-pressed", "false");
+            }
+            return false;
+          }
+          if (e.key === "Delete") {
+            e.preventDefault();
+            return false;
+          }
+          if (e.key !== "Enter" || e.shiftKey) return;
+          const btnList = document.getElementsByClassName("jodit-toolbar-button_insertTodo");
+          if (btnList[0]?.getAttribute("aria-pressed") !== "true") return;
+          e.preventDefault();
+          const todo = createTodoItem();
+          try {
+            const current = jodit.selection?.current?.();
+            const container = current ? Jodit.modules.Dom.closest(current, ".todo-item", jodit.editor) : null;
+            if (container?.parentNode) {
+              container.after ? container.after(todo) : container.parentNode.insertBefore(todo, container.nextSibling);
+            } else {
+              jodit.selection.insertNode(todo);
+            }
+          } catch {
+            jodit.selection.insertNode(todo);
+          }
+          const textSpan = todo.querySelector("span");
+          clearTimeout(cursorTimeout);
+          cursorTimeout = setTimeout(() => {
+            if (textSpan) jodit.selection?.setCursorIn?.(textSpan);
+          }, 100);
+        });
+        jodit.events.on("click", (e) => {
+          const target = e.target;
+          if (!target.classList.contains("todo-item-button") && !target.closest?.(".todo-item-button")) return;
+          const btn = target.classList.contains("todo-item-button") ? target : target.closest(".todo-item-button");
+          const img = btn?.querySelector("img");
+          if (!img) return;
+          const cur = TODO_STATES.findIndex((s) => img.src.includes(s.imageUrl.split("/").pop()));
+          const next = TODO_STATES[(cur + 1) % TODO_STATES.length];
+          img.src = next.imageUrl;
+          img.alt = next.label;
+        });
+      });
+      const observer = new MutationObserver(() => {
+        const popup = document.querySelector(".jodit-popup-container");
+        if (!popup) return;
+        ["Open in new tab", "No follow"].forEach((label) => {
+          popup.querySelectorAll(".jodit-ui-checkbox").forEach((el) => {
+            const text = el.querySelector(".jodit-ui-checkbox__label")?.textContent?.trim();
+            if (text !== label) return;
+            const input = el.querySelector('input[type="checkbox"]');
+            if (input && !input.checked) {
+              input.checked = true;
+              input.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+          });
+        });
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      return () => observer.disconnect();
+    });
+    return () => clearTimeout(cursorTimeout);
+  }, []);
+  const speechButton = {
+    name: "customSpeechRecognize",
+    tooltip: isListening ? "Stop listening" : "Speech to Text",
+    iconURL: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMUM5Ljc5MDg2IDEgOCAyLjc5MDg2IDggNVYxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNkMxNC4yMDkxIDE2IDE2IDE0LjIwOTEgMTYgMTJWNUMxNiAyLjc5MDg2IDE0LjIwOTEgMSAxMiAxWk0xMCA1QzEwIDMuODk1NDMgMTAuODk1NCAzIDEyIDNDMTMuMTA0NiAzIDE0IDMuODk1NDMgMTQgNVYxMkMxNCAxMy4xMDQ2IDEzLjEwNDYgMTQgMTIgMTRDMTAuODk1NCAxNCAxMCAxMy4xMDQ2IDEwIDEyVjVaIiBmaWxsPSIjMDAwMDAwIi8+PHBhdGggZD0iTTUgOUM1LjU1MjI4IDkgNiA5LjQ0NzcxIDYgMTBWMTJDNiAxMy41OTEzIDYuNjMyMTQgMTUuMTE3NCA3Ljc1NzM2IDE2LjI0MjZDOC44ODI1OCAxNy4zNjc5IDEwLjQwODcgMTggMTIgMThDMTMuNTkxMyAxOCAxNS4xMTc0IDE3LjM2NzkgMTYuMjQyNiAxNi4yNDI2QzE3LjM2NzkgMTUuMTE3NCAxOCAxMy41OTEzIDE4IDEyVjEwQzE4IDkuNDQ3NzEgMTguNDQ3NyA5IDE5IDlDMTkuNTUyMyA5IDIwIDkuNDQ3NzEgMjAgMTBWMTJDMjAgMTQuMTIxNyAxOS4xNTcxIDE2LjE1NjYgMTcuNjU2OSAxNy42NTY5QzE2LjM5MzggMTguOTE5OSAxNC43NTE4IDE5LjcxNyAxMi45OTgxIDE5LjkzNzVDMTIuOTk5MyAxOS45NTgyIDEzIDE5Ljk3OSAxMyAyMFYyMkMxMyAyMi41NTIzIDEyLjU1MjMgMjMgMTIgMjNDMTEuNDQ3NyAyMyAxMSAyMi41NTIzIDExIDIyVjIwQzExIDE5Ljk3OSAxMS4wMDA2IDE5Ljk1ODIgMTEuMDAxOSAxOS45Mzc1QzkuMjQ4MiAxOS43MTcgNy42MDYyMyAxOC45MTk5IDYuMzQzMTUgMTcuNjU2OUM0Ljg0Mjg1IDE2LjE1NjYgNCAxNC4xMjE3IDQgMTJWMTBDNCA5LjQ0NzcxIDQuNDQ3NzIgOSA1IDlaIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+",
+    exec(editorInstance) {
+      if (isListening) {
+        recognitionRef.current?.stop();
+        return;
+      }
+      const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SR) {
+        onError?.("Speech Recognition is not supported in this browser.");
+        return;
+      }
+      const recognition = new SR();
+      recognitionRef.current = recognition;
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = "en-US";
+      const finalize = () => {
+        const span = interimSpanRef.current;
+        if (span && editorInstance.editor.contains(span)) {
+          if (span.innerHTML.trim()) {
+            editorInstance.s.setCursorAfter(span);
+            span.replaceWith(...Array.from(span.childNodes));
+          } else {
+            span.remove();
+          }
+        }
+        interimSpanRef.current = null;
+      };
+      recognition.onstart = () => {
+        setIsListening(true);
+        setSpeechText("Listening\u2026");
+        setSpeechVisible(true);
+        editorInstance.focus();
+        try {
+          const sel = editorInstance.selection?.sel;
+          if (sel?.rangeCount > 0) {
+            const rect = sel.getRangeAt(0).getBoundingClientRect();
+            const cRect = containerRef.current?.getBoundingClientRect() ?? { top: 0, left: 0 };
+            setSpeechPos({ top: rect.bottom - cRect.top + 5, left: rect.left - cRect.left });
+          }
+        } catch {
+        }
+      };
+      recognition.onresult = (event) => {
+        if (silenceTimer.current) clearTimeout(silenceTimer.current);
+        let finalText = "";
+        let interimText = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const t = event.results[i][0].transcript;
+          if (event.results[i].isFinal) finalText += t;
+          else interimText += t;
+        }
+        if (finalText.trim()) {
+          finalize();
+          editorInstance.s.insertHTML(" " + finalText.trim());
+        }
+        if (interimText.trim()) {
+          let span = interimSpanRef.current;
+          if (!span || !editorInstance.editor.contains(span)) {
+            finalize();
+            span = editorInstance.create.inside.span();
+            editorInstance.s.insertNode(span, false);
+            interimSpanRef.current = span;
+          }
+          span.innerHTML = " " + interimText.trim();
+          setSpeechText(interimText.trim());
+          editorInstance.s.setCursorAfter(span);
+        }
+        silenceTimer.current = setTimeout(() => recognitionRef.current?.stop(), 2500);
+      };
+      recognition.onend = () => {
+        finalize();
+        setIsListening(false);
+        setSpeechVisible(false);
+        if (silenceTimer.current) clearTimeout(silenceTimer.current);
+        recognitionRef.current = null;
+      };
+      recognition.onerror = () => {
+        finalize();
+        setIsListening(false);
+        setSpeechVisible(false);
+      };
+      recognition.start();
+    }
+  };
+  const todoButton = {
+    name: "insertTodo",
+    tooltip: "To-do item  (\u2318\u21E7U)",
+    iconURL: TODO_STATES[0].imageUrl,
+    list: Object.fromEntries(TODO_STATES.map((s) => [s.name, s.label])),
+    childTemplate: (_editor, _key, text) => `<span>${text}</span>`,
+    exec: async (jodit, _current, btn) => {
+      const btnList = document.getElementsByClassName("jodit-toolbar-button_insertTodo");
+      const el = btnList[0];
+      const isPressed = el?.getAttribute("aria-pressed") === "true";
+      if (!isPressed || btn?.control?.name !== "insertTodo") {
+        const todo = createTodoItem(btn?.control?.name ?? "empty");
+        jodit.selection.insertNode(todo);
+        const span = todo.querySelector("span");
+        if (span) jodit.selection.setCursorIn(span);
+      }
+    }
+  };
+  const toggleButton = {
+    name: "toggleButtons",
+    tooltip: showAll ? "Show less" : "Show more",
+    iconURL: showAll ? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+PHBvbHlsaW5lIHBvaW50cz0iOCAxNCAxMiAxMCAxNiAxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=" : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+PHBvbHlsaW5lIHBvaW50cz0iOCAxMCAxMiAxNCAxNiAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=",
+    exec: () => setShowAll((prev) => !prev)
+  };
+  const config = React.useMemo(() => {
+    let uploadConfig = {};
+    if (uploadUrl) {
+      const uploadData = {};
+      uploadConfig = {
+        uploader: {
+          url: uploadUrl,
+          headers: token ? { AuthToken: token } : {},
+          imagesExtensions: ["jpg", "png", "jpeg", "webp"],
+          processFileName: (key, file, name) => {
+            uploadData.file = file;
+            return [key, file, name];
+          },
+          buildData(data) {
+            const ext = uploadData.file?.name.split(".").pop() ?? "";
+            if (!["jpg", "png", "jpeg", "webp"].includes(ext.toLowerCase())) {
+              onError?.("Please choose a jpg, png, jpeg or webp file.");
+              return new Promise(() => {
+              });
+            }
+            const form = new FormData();
+            form.append("file", uploadData.file);
+            form.append("isPublicLink", "true");
+            return form;
+          },
+          isSuccess: (resp) => !resp?.error,
+          defaultHandlerSuccess(data) {
+            if (data?.url && this.s) {
+              this.s.insertImage(data.url);
+              onImageUploadSuccess?.(data.url);
+            }
+          }
+        }
+      };
+    }
+    const baseButtons = [
+      ...UNDO_REDO,
+      ...aiSupport ? AI_BUTTONS : [],
+      ...isMobile && !showAll ? MOBILE_BUTTONS : BASIC_BUTTONS,
+      ...isMobile ? ["|"] : [],
+      ...isMobile && showAll ? MORE_BUTTONS : [],
+      ...!isMobile ? MORE_BUTTONS : [],
+      ...onClose ? [{
+        name: "close",
+        tooltip: "Close",
+        iconURL: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E",
+        exec: () => onClose()
+      }] : []
+    ];
+    return {
+      readonly: disabled,
+      license: licenseKey,
+      toolbar: true,
+      spellcheck: true,
+      language: "en",
+      placeholder,
+      toolbarButtonSize: "middle",
+      toolbarAdaptive: false,
+      showCharsCounter: true,
+      showWordsCounter: true,
+      showXPathInStatusbar: false,
+      askBeforePasteHTML: false,
+      askBeforePasteFromWord: true,
+      processPasteFromWord: true,
+      processPasteHTML: true,
+      nl2brInPlainText: false,
+      defaultActionOnPasteFromWord: "insert_as_html",
+      scrollToPastedContent: true,
+      link: { noFollowCheckbox: true, openInNewTabCheckbox: true },
+      defaultLineHeight: 0.5,
+      lineHeight: [0.5, 1, 1.15, 1.5, 2],
+      allowResizeY,
+      width,
+      height,
+      ...translationKey ? {
+        translate: {
+          provider: "google",
+          googleProviderOptions: { key: translationKey }
+        }
+      } : {},
+      ...aiSupport ? {
+        aiAssistant: {
+          aiAssistantCallback(prompt, htmlFragment) {
+            return fetch("https://api.openai.com/v1/chat/completions", {
+              method: "POST",
+              headers: { "Content-Type": "application/json", Authorization: `Bearer ${window.__RTE_OPENAI_KEY__ ?? ""}` },
+              body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [{ role: "system", content: prompt }, { role: "user", content: htmlFragment }] })
+            }).then((r) => r.json()).then((d) => {
+              if (d.error) throw new Error(d.error.message);
+              return d.choices?.[0]?.message?.content ?? "";
+            });
+          }
+        }
+      } : {},
+      ...mentions?.arr?.length ? {
+        autocomplete: {
+          sources: [{
+            feed: (query) => {
+              if (!query.includes("@")) return [];
+              return mentions.arr.filter((m) => m.id.includes(query) || m.name.includes(query));
+            },
+            itemRenderer: (item) => `<span class="mention-option">${item.id}</span>`,
+            insertValueRenderer: (item) => `<span class="mention-jodit" data-mention="${item.id}" data-user-id="${item.userId ?? ""}" href="${item.link ?? ""}">${item.id}</span>`
+          }]
+        }
+      } : {},
+      ...uploadConfig,
+      buttons: [...baseButtons, ...fullSize ? ["fullsize"] : []],
+      extraButtons: [
+        speechButton,
+        todoButton,
+        ...isMobile ? [toggleButton] : []
+      ],
+      safePluginList: ["changecase", "rteKeyLogger"]
+    };
+  }, [isMobile, showAll, isListening, disabled, aiSupport, licenseKey, translationKey, token, uploadUrl, mentions?.arr?.length, height, width, allowResizeY, fullSize, placeholder]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: `rte-wrapper ${isListening ? "rte-listening" : ""} ${className}`,
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      JoditReact,
+      {
+        ref: editorRef,
+        value,
+        config,
+        tabIndex: 1,
+        onChange: (v) => onChange?.(v),
+        onBlur: (v) => onBlur?.(v)
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "rte-speech-popup",
+        style: {
+          top: speechPos.top,
+          left: speechPos.left,
+          opacity: speechVisible && speechText ? 1 : 0,
+          transform: speechVisible ? "translateY(0)" : "translateY(10px)",
+          pointerEvents: "none"
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "rte-speech-dot" }),
+      /* @__PURE__ */ React.createElement("span", null, speechText || "\u2026")
+    ),
+    error && /* @__PURE__ */ React.createElement("p", { className: "rte-error" }, error)
+  );
+}
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};

package/dist/{chunk-YRFUVQDN.js → chunk-CTBYVXFP.js}

@@ -1,6 +1,6 @@
 // lib/Progress/circularProgress.tsx
 import * as React from "react";
-var CircularProgess = ({
+var CircularProgress = ({
   size = 50,
   color = "#a81c08",
   ...props
@@ -24,7 +24,7 @@ var CircularProgess = ({
     ))
   );
 };
-var circularProgress_default = CircularProgess;
+var circularProgress_default = CircularProgress;
 
 export {
   circularProgress_default