@quen-ui/components 0.0.14 → 1.0.0

package/dist/RichTextEditor/RichTextEditor.es.js

@@ -0,0 +1,290 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, useImperativeHandle, Fragment } from "react";
+import { useTheme } from "@quen-ui/theme";
+import { sanitize, toolbarButton } from "./helpers.es.js";
+import { RichTextEditorWrapper, RichTextEditorContentStyled } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Divider from "../Divider/Divider.es.js";
+import { defaultPlugins } from "./plugins.es.js";
+const RichTextEditor = ({
+  className,
+  onChange,
+  disabled,
+  value = "",
+  placeholder,
+  style,
+  plugins = [],
+  enablePlugins = []
+}, ref) => {
+  const theme = useTheme();
+  const editorRef = useRef(null);
+  const lastHtmlRef = useRef(value);
+  const [selection, setSelection] = useState(null);
+  const [updatePluginState, setUpdatePluginState] = useState(0);
+  const pluginStateRef = useRef({});
+  const exec = useCallback(
+    (command, value2) => {
+      if (disabled) return;
+      document.execCommand(command, false, value2);
+      const el = editorRef.current;
+      if (!el) return;
+      const html = sanitize(el.innerHTML);
+      lastHtmlRef.current = html;
+      onChange?.(html);
+    },
+    [disabled, onChange]
+  );
+  const getHTML = useCallback(
+    () => sanitize(editorRef.current?.innerHTML || ""),
+    []
+  );
+  const setHTML = useCallback(
+    (html) => {
+      if (!editorRef.current) return;
+      editorRef.current.innerHTML = sanitize(html);
+      lastHtmlRef.current = editorRef.current.innerHTML;
+      onChange?.(lastHtmlRef.current);
+    },
+    [onChange]
+  );
+  const getText = useCallback(() => editorRef.current?.innerText || "", []);
+  const getPluginState = useCallback(
+    (key) => pluginStateRef.current[key],
+    []
+  );
+  const setPluginState = useCallback((key, value2) => {
+    setUpdatePluginState(Math.random());
+    pluginStateRef.current[key] = value2;
+  }, []);
+  const update = useCallback(() => {
+    if (!editorRef.current) return;
+    const html = sanitize(editorRef.current.innerHTML);
+    if (html === lastHtmlRef.current) return;
+    lastHtmlRef.current = html;
+    onChange?.(html);
+    const ctx = createCtx();
+    plugins.forEach((p) => p.onInput?.(ctx));
+  }, [onChange, plugins]);
+  const createCtx = useCallback(() => {
+    return {
+      editor: editorRef.current,
+      exec,
+      update,
+      getHTML,
+      getText,
+      setHTML,
+      selection,
+      getPluginState,
+      setPluginState,
+      theme
+    };
+  }, [
+    exec,
+    update,
+    getHTML,
+    getText,
+    setHTML,
+    selection,
+    getPluginState,
+    setPluginState,
+    theme
+  ]);
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.innerHTML = sanitize(value);
+      lastHtmlRef.current = editorRef.current.innerHTML;
+    }
+  }, []);
+  const allPlugins = useMemo(() => {
+    const pl = [...defaultPlugins, ...plugins];
+    if (enablePlugins?.length) {
+      return pl.filter((p) => enablePlugins.includes(p.key));
+    }
+    return pl;
+  }, [plugins]);
+  useImperativeHandle(ref, () => ({
+    getHTML: () => sanitize(editorRef.current?.innerHTML || ""),
+    setHTML: (html) => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = sanitize(html);
+        lastHtmlRef.current = editorRef.current.innerHTML;
+        onChange?.(lastHtmlRef.current);
+      }
+    },
+    focus: () => editorRef.current?.focus()
+  }));
+  useEffect(() => {
+    const handleSelection = () => {
+      const sel = document.getSelection();
+      setSelection(sel);
+      const ctx = createCtx();
+      allPlugins.forEach((p) => p.onSelectionChange?.(sel, ctx));
+    };
+    document.addEventListener("selectionchange", handleSelection);
+    return () => document.removeEventListener("selectionchange", handleSelection);
+  }, [allPlugins, createCtx]);
+  useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const ctx = createCtx();
+    const handleInput = () => {
+      update();
+      allPlugins.forEach((p) => p.onInput?.(ctx));
+    };
+    const handleFocus = () => {
+      allPlugins.forEach((p) => p.onFocus?.(ctx));
+    };
+    const handleBlur = () => {
+      allPlugins.forEach((p) => p.onBlur?.(ctx));
+    };
+    const handleKeyDown2 = (e) => {
+      allPlugins.forEach((p) => p.onKeyDown?.(e, ctx));
+    };
+    const handlePaste = (e) => {
+      let handled = false;
+      allPlugins.forEach((p) => {
+        try {
+          p.onPaste?.(e, ctx);
+          if (e.defaultPrevented) handled = true;
+        } catch (err) {
+          window.console.error(err);
+        }
+      });
+      if (!handled) {
+        const clipboard = e.clipboardData;
+        if (!clipboard) return;
+        const html = clipboard.getData("text/html");
+        if (html) {
+          e.preventDefault();
+          const safe = sanitize(html);
+          document.execCommand("insertHTML", false, safe);
+          update();
+        }
+      }
+    };
+    const handleDrop2 = (ev) => {
+      ev.preventDefault();
+      allPlugins.forEach((p) => p.onDrop?.(ev, ctx));
+      const files = Array.from(ev.dataTransfer?.files || []);
+      for (const file of files) {
+        if (file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const imgHtml = `<img src="${e.target?.result}" alt="image" style="max-width:100%;height:auto;" />`;
+            document.execCommand("insertHTML", false, imgHtml);
+            update();
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    };
+    el.addEventListener("input", handleInput);
+    el.addEventListener("focus", handleFocus);
+    el.addEventListener("blur", handleBlur);
+    el.addEventListener("keydown", handleKeyDown2);
+    el.addEventListener("paste", handlePaste);
+    el.addEventListener("drop", handleDrop2);
+    return () => {
+      el.removeEventListener("input", handleInput);
+      el.removeEventListener("focus", handleFocus);
+      el.removeEventListener("blur", handleBlur);
+      el.removeEventListener("keydown", handleKeyDown2);
+      el.removeEventListener("paste", handlePaste);
+      el.removeEventListener("drop", handleDrop2);
+    };
+  }, [allPlugins, createCtx, update]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        switch (e.key.toLowerCase()) {
+          case "b":
+            e.preventDefault();
+            exec("bold");
+            break;
+          case "i":
+            e.preventDefault();
+            exec("italic");
+            break;
+          case "u":
+            e.preventDefault();
+            exec("underline");
+            break;
+        }
+      }
+    },
+    [exec]
+  );
+  const onInput = useCallback(() => {
+    update();
+  }, [update]);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      for (const file of files) {
+        if (file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            const img = `<img src="${ev.target?.result}" alt="image" style="max-width:100%;height:auto;" />`;
+            document.execCommand("insertHTML", false, img);
+            update();
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    },
+    [update, disabled]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!disabled) e.preventDefault();
+    },
+    [disabled]
+  );
+  const renderToolbar = useCallback(() => {
+    const ctx = createCtx();
+    return allPlugins.map((plugin, idx) => {
+      const key = plugin.key ?? `p_${idx}`;
+      const state = plugin.getState ? plugin.getState(editorRef.current, ctx) : { active: false };
+      const title = plugin.title;
+      const onClick = (ref2) => plugin.action?.({
+        exec,
+        update,
+        editor: editorRef.current,
+        context: ctx,
+        ref: ref2
+      });
+      return /* @__PURE__ */ jsx(Fragment, { children: toolbarButton(
+        plugin.label,
+        onClick,
+        title,
+        plugin.disabled,
+        Boolean(state?.active)
+      ) }, key);
+    });
+  }, [updatePluginState]);
+  return /* @__PURE__ */ jsxs(RichTextEditorWrapper, { className, style, children: [
+    /* @__PURE__ */ jsx(Flex, { gap: "xs", wrap: "wrap", children: renderToolbar() }),
+    /* @__PURE__ */ jsx(Divider, { direction: "horizontal", view: "disabled" }),
+    /* @__PURE__ */ jsx(
+      RichTextEditorContentStyled,
+      {
+        role: "textbox",
+        ref: editorRef,
+        contentEditable: !disabled,
+        suppressContentEditableWarning: true,
+        onInput,
+        onKeyDown: handleKeyDown,
+        "data-placeholder": placeholder,
+        "aria-label": "Rich text editor",
+        onDrop: handleDrop,
+        onDragOver: handleDragOver
+      }
+    )
+  ] });
+};
+const RichTextEditor_default = forwardRef(RichTextEditor);
+export {
+  RichTextEditor_default as default
+};

package/dist/RichTextEditor/RichTextEditorColorControl.cjs.js

@@ -0,0 +1,38 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const theme = require("@quen-ui/theme");
+const index = require("../ColorPicker/index.cjs.js");
+const Dropdown = require("../Dropdown/Dropdown.cjs.js");
+const RichTextEditorColorControl = ({
+  ref,
+  onChange,
+  onClose,
+  color,
+  theme: theme$1
+}) => {
+  const [open, setOpen] = React.useState(true);
+  const handleClose = () => {
+    setOpen(false);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(theme.QuenUIProvider, { theme: theme$1, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Dropdown,
+    {
+      anchorRef: ref,
+      open,
+      onClickOutside: handleClose,
+      content: /* @__PURE__ */ jsxRuntime.jsx(
+        index.ColorPicker,
+        {
+          size: "s",
+          format: "hex",
+          hideInputs: true,
+          onChangeComplete: onChange,
+          value: color
+        }
+      )
+    }
+  ) });
+};
+module.exports = RichTextEditorColorControl;

package/dist/RichTextEditor/RichTextEditorColorControl.d.ts

@@ -0,0 +1,3 @@
+import { IRichTextEditorColorPickerProps } from './types';
+declare const RichTextEditorColorControl: ({ ref, onChange, onClose, color, theme }: IRichTextEditorColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default RichTextEditorColorControl;

package/dist/RichTextEditor/RichTextEditorColorControl.es.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { QuenUIProvider } from "@quen-ui/theme";
+import { ColorPicker } from "../ColorPicker/index.es.js";
+import Dropdown from "../Dropdown/Dropdown.es.js";
+const RichTextEditorColorControl = ({
+  ref,
+  onChange,
+  onClose,
+  color,
+  theme
+}) => {
+  const [open, setOpen] = useState(true);
+  const handleClose = () => {
+    setOpen(false);
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(QuenUIProvider, { theme, children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      anchorRef: ref,
+      open,
+      onClickOutside: handleClose,
+      content: /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          size: "s",
+          format: "hex",
+          hideInputs: true,
+          onChangeComplete: onChange,
+          value: color
+        }
+      )
+    }
+  ) });
+};
+export {
+  RichTextEditorColorControl as default
+};

package/dist/RichTextEditor/RichTextEditorTableControl.cjs.js

@@ -0,0 +1,62 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const theme = require("@quen-ui/theme");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Dropdown = require("../Dropdown/Dropdown.cjs.js");
+const RichTextEditorTableControl = ({
+  onSelect,
+  onClose,
+  ref,
+  theme: theme$1
+}) => {
+  const [hovered, setHovered] = React.useState({ rows: 0, cols: 0 });
+  const [gridSize, setGridSize] = React.useState({ rows: 10, cols: 10 });
+  const [open, setOpen] = React.useState(true);
+  const handleHover = (r, c) => {
+    if (r + 1 >= gridSize.rows) {
+      setGridSize({ ...gridSize, rows: Math.min(gridSize.rows + 5, 10) });
+    }
+    if (c + 1 >= gridSize.cols) {
+      setGridSize({ ...gridSize, cols: Math.min(gridSize.cols + 5, 10) });
+    }
+    setHovered({ rows: r + 1, cols: c + 1 });
+  };
+  const handleClick = () => {
+    if (hovered.rows > 0 && hovered.cols > 0) {
+      onSelect(hovered);
+      onClose?.();
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(theme.QuenUIProvider, { theme: theme$1, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Dropdown,
+    {
+      onClickClose: onClose,
+      open,
+      anchorRef: ref,
+      content: /* @__PURE__ */ jsxRuntime.jsxs(styles.TableSizePickerWrapper, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", gap: 2, children: Array.from({ length: gridSize.rows }).map((_, r) => /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 2, children: Array.from({ length: gridSize.cols }).map((_2, c) => {
+          const active = r < hovered.rows && c < hovered.cols;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            styles.TableSizePickerCellStyled,
+            {
+              active,
+              onMouseEnter: () => handleHover(r, c),
+              onClick: handleClick
+            },
+            c
+          );
+        }) }, r)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", children: [
+          hovered.rows,
+          " × ",
+          hovered.cols
+        ] })
+      ] })
+    }
+  ) });
+};
+module.exports = RichTextEditorTableControl;

package/dist/RichTextEditor/RichTextEditorTableControl.d.ts

@@ -0,0 +1,3 @@
+import { IRichTextEditorTableSizePickerProps } from './types';
+declare const RichTextEditorTableControl: ({ onSelect, onClose, ref, theme }: IRichTextEditorTableSizePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default RichTextEditorTableControl;

package/dist/RichTextEditor/RichTextEditorTableControl.es.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { QuenUIProvider } from "@quen-ui/theme";
+import { TableSizePickerWrapper, TableSizePickerCellStyled } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Dropdown from "../Dropdown/Dropdown.es.js";
+const RichTextEditorTableControl = ({
+  onSelect,
+  onClose,
+  ref,
+  theme
+}) => {
+  const [hovered, setHovered] = useState({ rows: 0, cols: 0 });
+  const [gridSize, setGridSize] = useState({ rows: 10, cols: 10 });
+  const [open, setOpen] = useState(true);
+  const handleHover = (r, c) => {
+    if (r + 1 >= gridSize.rows) {
+      setGridSize({ ...gridSize, rows: Math.min(gridSize.rows + 5, 10) });
+    }
+    if (c + 1 >= gridSize.cols) {
+      setGridSize({ ...gridSize, cols: Math.min(gridSize.cols + 5, 10) });
+    }
+    setHovered({ rows: r + 1, cols: c + 1 });
+  };
+  const handleClick = () => {
+    if (hovered.rows > 0 && hovered.cols > 0) {
+      onSelect(hovered);
+      onClose?.();
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(QuenUIProvider, { theme, children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      onClickClose: onClose,
+      open,
+      anchorRef: ref,
+      content: /* @__PURE__ */ jsxs(TableSizePickerWrapper, { children: [
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: Array.from({ length: gridSize.rows }).map((_, r) => /* @__PURE__ */ jsx(Flex, { gap: 2, children: Array.from({ length: gridSize.cols }).map((_2, c) => {
+          const active = r < hovered.rows && c < hovered.cols;
+          return /* @__PURE__ */ jsx(
+            TableSizePickerCellStyled,
+            {
+              active,
+              onMouseEnter: () => handleHover(r, c),
+              onClick: handleClick
+            },
+            c
+          );
+        }) }, r)) }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
+          hovered.rows,
+          " × ",
+          hovered.cols
+        ] })
+      ] })
+    }
+  ) });
+};
+export {
+  RichTextEditorTableControl as default
+};

package/dist/RichTextEditor/helpers.cjs.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DOMPurify = require("dompurify");
+const Tooltip = require("../Tooltip/Tooltip.cjs.js");
+const styles = require("./styles.cjs.js");
+const sanitize = (html) => {
+  return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+};
+const toolbarButton = (label, onClick, title, disabled, active = false) => {
+  const ref = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { text: title, show: !!title, children: /* @__PURE__ */ jsxRuntime.jsx(
+    styles.ToolbarButtonStyled,
+    {
+      disabled,
+      "aria-label": title,
+      ref,
+      size: "s",
+      view: !active ? "icon" : "link",
+      onClick: () => onClick(ref),
+      children: label
+    }
+  ) });
+};
+const insertNodeAtSelection = (editor, node) => {
+  const sel = document.getSelection();
+  if (!sel || !sel.rangeCount) {
+    editor.appendChild(node);
+    return;
+  }
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  range.insertNode(node);
+};
+const setCursorAtEnd = (el) => {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+};
+const getCurrentBlock = () => {
+  const sel = document.getSelection();
+  if (!sel || !sel.anchorNode) {
+    return null;
+  }
+  let node = sel.anchorNode;
+  if (node.nodeType === 3) {
+    node = node.parentElement;
+  }
+  if (!node) {
+    return null;
+  }
+  return node.closest("[data-checkbox-line], div, p, li");
+};
+function isCursorInTag(tagName, sel) {
+  if (!sel || !sel.anchorNode) return false;
+  let node = sel.anchorNode;
+  if (node.nodeType === Node.TEXT_NODE) {
+    node = node.parentNode;
+  }
+  while (node) {
+    if (node instanceof HTMLElement && node.tagName.toLowerCase() === tagName.toLowerCase()) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+const findClosestAncestorElement = (node, predicate) => {
+  let cur = node;
+  if (!cur) return null;
+  if (cur.nodeType === Node.TEXT_NODE) cur = cur.parentElement;
+  while (cur && cur instanceof HTMLElement) {
+    if (predicate(cur)) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+};
+const unwrapInlineColorSpans = (fragment) => {
+  const walker = document.createTreeWalker(
+    fragment,
+    NodeFilter.SHOW_ELEMENT,
+    null
+  );
+  const toUnwrap = [];
+  let node = walker.nextNode();
+  while (node) {
+    const el = node;
+    if (el.tagName === "SPAN" && el.style && (el.style.color || el.style.backgroundColor)) {
+      toUnwrap.push(el);
+    }
+    node = walker.nextNode();
+  }
+  for (const span of toUnwrap) {
+    const parent = span.parentNode;
+    if (!parent) continue;
+    while (span.firstChild) parent.insertBefore(span.firstChild, span);
+    parent.removeChild(span);
+  }
+  return fragment;
+};
+const getCurrentTextColor = (range) => {
+  const commonAncestor = range.commonAncestorContainer;
+  if (!range.collapsed) {
+    const walker = document.createTreeWalker(
+      commonAncestor,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+      null
+    );
+    let detectedColor = null;
+    let first = true;
+    let node2 = walker.nextNode();
+    while (node2) {
+      if (range.intersectsNode(node2)) {
+        const el = node2 instanceof HTMLElement ? node2 : node2.parentElement;
+        if (el) {
+          const color = el.style?.color || null;
+          if (first) {
+            detectedColor = color;
+            first = false;
+          } else if (detectedColor !== color) {
+            return null;
+          }
+        }
+      }
+      node2 = walker.nextNode();
+    }
+    return detectedColor;
+  }
+  let node = range.startContainer;
+  if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+  while (node && node instanceof HTMLElement) {
+    if (node.style.color) {
+      return node.style.color;
+    }
+    node = node.parentElement;
+  }
+  return null;
+};
+exports.findClosestAncestorElement = findClosestAncestorElement;
+exports.getCurrentBlock = getCurrentBlock;
+exports.getCurrentTextColor = getCurrentTextColor;
+exports.insertNodeAtSelection = insertNodeAtSelection;
+exports.isCursorInTag = isCursorInTag;
+exports.sanitize = sanitize;
+exports.setCursorAtEnd = setCursorAtEnd;
+exports.toolbarButton = toolbarButton;
+exports.unwrapInlineColorSpans = unwrapInlineColorSpans;

package/dist/RichTextEditor/helpers.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, RefObject } from 'react';
+export declare const sanitize: (html: string) => string;
+export declare const toolbarButton: (label: ReactNode, onClick: (ref: RefObject<HTMLButtonElement | null>) => void, title?: string, disabled?: boolean, active?: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const insertNodeAtSelection: (editor: HTMLElement, node: HTMLElement) => void;
+export declare const setCursorAtEnd: (el: HTMLElement) => void;
+export declare const getCurrentBlock: () => HTMLElement | null;
+export declare function isCursorInTag(tagName: string, sel: Selection | null): boolean;
+export declare const findClosestAncestorElement: (node: Node | null, predicate: (el: HTMLElement) => boolean) => HTMLElement | null;
+export declare const unwrapInlineColorSpans: (fragment: DocumentFragment) => DocumentFragment;
+export declare const getCurrentTextColor: (range: Range) => string | null;