@usefragments/ui 1.0.0

package/dist/editor.js

@@ -0,0 +1,555 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./components/Editor/Editor.module.scss.js";
+import { ArrowClockwise, ArrowCounterClockwise, Quotes, TextHThree, TextHTwo, TextHOne, ListNumbers, ListBullets, Code, LinkSimple, TextStrikethrough, TextItalic, TextB } from "@phosphor-icons/react";
+import { KEYBOARD_SHORTCUTS } from "./utils/keyboard-shortcuts.js";
+let _useEditor = null;
+let _EditorContent = null;
+let _StarterKit = null;
+let _LinkExtension = null;
+let _tiptapLoaded = false;
+let _tiptapFailed = false;
+function loadTipTapDeps() {
+  if (_tiptapLoaded) return;
+  _tiptapLoaded = true;
+  try {
+    const tiptapReact = require("@tiptap/react");
+    const starterKit = require("@tiptap/starter-kit");
+    const linkExt = require("@tiptap/extension-link");
+    _useEditor = tiptapReact.useEditor;
+    _EditorContent = tiptapReact.EditorContent;
+    _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
+    _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
+  } catch {
+    _tiptapFailed = true;
+  }
+}
+const FORMAT_META = {
+  bold: { icon: TextB, label: "Bold", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
+  italic: { icon: TextItalic, label: "Italic", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
+  strikethrough: { icon: TextStrikethrough, label: "Strikethrough", shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label },
+  link: { icon: LinkSimple, label: "Link", shortcut: KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
+  code: { icon: Code, label: "Code", shortcut: KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
+  bulletList: { icon: ListBullets, label: "Bullet list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label },
+  orderedList: { icon: ListNumbers, label: "Ordered list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label },
+  heading1: { icon: TextHOne, label: "Heading 1", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label },
+  heading2: { icon: TextHTwo, label: "Heading 2", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label },
+  heading3: { icon: TextHThree, label: "Heading 3", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label },
+  blockquote: { icon: Quotes, label: "Blockquote", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label },
+  undo: { icon: ArrowCounterClockwise, label: "Undo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label },
+  redo: { icon: ArrowClockwise, label: "Redo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_REDO.label }
+};
+const DEFAULT_FORMATS = ["bold", "italic", "strikethrough", "link", "code", "bulletList"];
+const ACTION_FORMATS = /* @__PURE__ */ new Set(["undo", "redo"]);
+const DEFAULT_STATUS_LABELS = {
+  idle: "",
+  saving: "SAVING...",
+  saved: "AUTO-SAVED",
+  error: "SAVE FAILED"
+};
+function getSelection(textarea) {
+  return {
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+    text: textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
+  };
+}
+function wrapSelection(textarea, prefix, suffix, setValue) {
+  const sel = getSelection(textarea);
+  const before = textarea.value.substring(0, sel.start);
+  const after = textarea.value.substring(sel.end);
+  const wrapped = `${prefix}${sel.text || "text"}${suffix}`;
+  const newValue = `${before}${wrapped}${after}`;
+  setValue(newValue);
+  requestAnimationFrame(() => {
+    textarea.focus();
+    const newStart = sel.start + prefix.length;
+    const newEnd = newStart + (sel.text || "text").length;
+    textarea.setSelectionRange(newStart, newEnd);
+  });
+}
+function applyMarkdownFormat(format, textarea, setValue) {
+  switch (format) {
+    case "bold":
+      wrapSelection(textarea, "**", "**", setValue);
+      break;
+    case "italic":
+      wrapSelection(textarea, "*", "*", setValue);
+      break;
+    case "strikethrough":
+      wrapSelection(textarea, "~~", "~~", setValue);
+      break;
+    case "code":
+      wrapSelection(textarea, "`", "`", setValue);
+      break;
+    case "link": {
+      const sel = getSelection(textarea);
+      const linkText = sel.text || "link text";
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const newValue = `${before}[${linkText}](url)${after}`;
+      setValue(newValue);
+      requestAnimationFrame(() => {
+        textarea.focus();
+        const urlStart = sel.start + linkText.length + 3;
+        textarea.setSelectionRange(urlStart, urlStart + 3);
+      });
+      break;
+    }
+    case "bulletList": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "item").split("\n");
+      const bulleted = lines.map((l) => `- ${l}`).join("\n");
+      const newValue = `${before}${bulleted}${after}`;
+      setValue(newValue);
+      break;
+    }
+    case "orderedList": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "item").split("\n");
+      const numbered = lines.map((l, i) => `${i + 1}. ${l}`).join("\n");
+      const newValue = `${before}${numbered}${after}`;
+      setValue(newValue);
+      break;
+    }
+    case "heading1":
+      wrapSelection(textarea, "# ", "", setValue);
+      break;
+    case "heading2":
+      wrapSelection(textarea, "## ", "", setValue);
+      break;
+    case "heading3":
+      wrapSelection(textarea, "### ", "", setValue);
+      break;
+    case "blockquote": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "quote").split("\n");
+      const quoted = lines.map((l) => `> ${l}`).join("\n");
+      const newValue = `${before}${quoted}${after}`;
+      setValue(newValue);
+      break;
+    }
+  }
+}
+const EditorContext = React.createContext(null);
+function useEditorContext() {
+  const context = React.useContext(EditorContext);
+  if (!context) {
+    throw new Error("Editor compound components must be used within an Editor");
+  }
+  return context;
+}
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function countWords(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return 0;
+  return trimmed.split(/\s+/).length;
+}
+function EditorRoot({
+  children,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "Start typing...",
+  disabled = false,
+  readOnly = false,
+  formats = DEFAULT_FORMATS,
+  toolbar = true,
+  statusBar = true,
+  onAutoSave,
+  autoSaveInterval = 3e4,
+  size = "md",
+  maxLength,
+  toolbarIcons,
+  className,
+  ...htmlProps
+}) {
+  const contentRef = React.useRef(null);
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onValueChange
+  );
+  const [saveStatus, setSaveStatus] = React.useState("idle");
+  loadTipTapDeps();
+  const hasTipTap = !_tiptapFailed && _useEditor && _EditorContent && _StarterKit;
+  const mode = hasTipTap ? "rich" : "markdown";
+  const tiptapEditor = hasTipTap ? (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _useEditor({
+      extensions: [
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _StarterKit.configure({
+          heading: { levels: [1, 2, 3] },
+          blockquote: {},
+          codeBlock: false,
+          horizontalRule: false,
+          hardBreak: false
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _LinkExtension.configure({
+          openOnClick: false,
+          HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+        })
+      ],
+      editorProps: {
+        attributes: {
+          role: "textbox",
+          "aria-label": placeholder,
+          "aria-multiline": "true"
+        }
+      },
+      content: controlledValue !== void 0 ? controlledValue : defaultValue,
+      editable: !disabled && !readOnly,
+      onUpdate: ({ editor: e }) => {
+        const html = e.getHTML();
+        setValue(html);
+      }
+    })
+  ) : null;
+  React.useEffect(() => {
+    if (tiptapEditor && controlledValue !== void 0) {
+      const currentContent = tiptapEditor.getHTML();
+      if (currentContent !== controlledValue) {
+        tiptapEditor.commands.setContent(controlledValue, false);
+      }
+    }
+  }, [controlledValue, tiptapEditor]);
+  React.useEffect(() => {
+    if (tiptapEditor) {
+      tiptapEditor.setEditable(!disabled && !readOnly);
+    }
+  }, [tiptapEditor, disabled, readOnly]);
+  React.useEffect(() => {
+    if (!onAutoSave || !value) return;
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      setSaveStatus("saving");
+      try {
+        Promise.resolve(onAutoSave(value)).then(() => {
+          if (!cancelled) {
+            setSaveStatus("saved");
+          }
+        }).catch(() => {
+          if (!cancelled) {
+            setSaveStatus("error");
+          }
+        });
+      } catch {
+        if (!cancelled) {
+          setSaveStatus("error");
+        }
+      }
+    }, autoSaveInterval);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [value, onAutoSave, autoSaveInterval]);
+  const toggleFormat = React.useCallback(
+    (format) => {
+      if (disabled || readOnly) return;
+      if (tiptapEditor) {
+        switch (format) {
+          case "bold":
+            tiptapEditor.chain().focus().toggleBold().run();
+            break;
+          case "italic":
+            tiptapEditor.chain().focus().toggleItalic().run();
+            break;
+          case "strikethrough":
+            tiptapEditor.chain().focus().toggleStrike().run();
+            break;
+          case "code":
+            tiptapEditor.chain().focus().toggleCode().run();
+            break;
+          case "bulletList":
+            tiptapEditor.chain().focus().toggleBulletList().run();
+            break;
+          case "orderedList":
+            tiptapEditor.chain().focus().toggleOrderedList().run();
+            break;
+          case "heading1":
+            tiptapEditor.chain().focus().toggleHeading({ level: 1 }).run();
+            break;
+          case "heading2":
+            tiptapEditor.chain().focus().toggleHeading({ level: 2 }).run();
+            break;
+          case "heading3":
+            tiptapEditor.chain().focus().toggleHeading({ level: 3 }).run();
+            break;
+          case "blockquote":
+            tiptapEditor.chain().focus().toggleBlockquote().run();
+            break;
+          case "undo":
+            tiptapEditor.chain().focus().undo().run();
+            break;
+          case "redo":
+            tiptapEditor.chain().focus().redo().run();
+            break;
+          case "link": {
+            const previousUrl = tiptapEditor.getAttributes("link").href;
+            if (previousUrl) {
+              tiptapEditor.chain().focus().unsetLink().run();
+            } else {
+              const url = window.prompt("Enter URL");
+              if (url) {
+                tiptapEditor.chain().focus().setLink({ href: url }).run();
+              }
+            }
+            break;
+          }
+        }
+      } else if (contentRef.current) {
+        applyMarkdownFormat(format, contentRef.current, setValue);
+      }
+    },
+    [disabled, readOnly, tiptapEditor, setValue]
+  );
+  const isFormatActive = React.useCallback(
+    (format) => {
+      if (!tiptapEditor) return false;
+      switch (format) {
+        case "bold":
+          return tiptapEditor.isActive("bold");
+        case "italic":
+          return tiptapEditor.isActive("italic");
+        case "strikethrough":
+          return tiptapEditor.isActive("strike");
+        case "code":
+          return tiptapEditor.isActive("code");
+        case "bulletList":
+          return tiptapEditor.isActive("bulletList");
+        case "orderedList":
+          return tiptapEditor.isActive("orderedList");
+        case "heading1":
+          return tiptapEditor.isActive("heading", { level: 1 });
+        case "heading2":
+          return tiptapEditor.isActive("heading", { level: 2 });
+        case "heading3":
+          return tiptapEditor.isActive("heading", { level: 3 });
+        case "blockquote":
+          return tiptapEditor.isActive("blockquote");
+        case "link":
+          return tiptapEditor.isActive("link");
+        case "undo":
+        case "redo":
+          return false;
+        // Actions don't have active state
+        default:
+          return false;
+      }
+    },
+    [tiptapEditor]
+  );
+  const wordCount = React.useMemo(() => {
+    var _a;
+    if (tiptapEditor) {
+      const text = ((_a = tiptapEditor.getText) == null ? void 0 : _a.call(tiptapEditor)) ?? "";
+      return countWords(text);
+    }
+    return countWords(value);
+  }, [value, tiptapEditor]);
+  const charCount = React.useMemo(() => {
+    var _a;
+    if (tiptapEditor) {
+      return (((_a = tiptapEditor.getText) == null ? void 0 : _a.call(tiptapEditor)) ?? "").length;
+    }
+    return value.length;
+  }, [value, tiptapEditor]);
+  const contextValue = {
+    value,
+    setValue,
+    placeholder,
+    disabled,
+    readOnly,
+    formats,
+    editor: tiptapEditor,
+    mode,
+    size,
+    maxLength,
+    toolbarIcons,
+    wordCount,
+    charCount,
+    toggleFormat,
+    isFormatActive,
+    saveStatus,
+    contentRef
+  };
+  const classes = [
+    styles.editor,
+    disabled && styles.disabled,
+    readOnly && styles.readOnly,
+    className
+  ].filter(Boolean).join(" ");
+  const hasCustomChildren = children !== void 0;
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-size": size,
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar && /* @__PURE__ */ jsx(EditorToolbar, { children: /* @__PURE__ */ jsx(EditorToolbarGroup, { "aria-label": "Text formatting", children: formats.map((f) => /* @__PURE__ */ jsx(EditorToolbarButton, { format: f }, f)) }) }),
+        /* @__PURE__ */ jsx(EditorContentArea, {}),
+        statusBar && /* @__PURE__ */ jsx(EditorStatusBar, { showWordCount: true, showCharCount: true })
+      ] })
+    }
+  ) });
+}
+function EditorToolbar({ children, className }) {
+  const classes = [styles.toolbar, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "toolbar", "aria-label": "Editor formatting", children });
+}
+function EditorToolbarGroup({ children, "aria-label": ariaLabel, className }) {
+  const classes = [styles.toolbarGroup, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children });
+}
+function EditorToolbarButton({ format, className }) {
+  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode, toolbarIcons } = useEditorContext();
+  const meta = FORMAT_META[format];
+  const isAction = ACTION_FORMATS.has(format);
+  const active = isAction ? false : isFormatActive(format);
+  const IconComponent = meta.icon;
+  let isDisabled = disabled || readOnly;
+  if (isAction && !isDisabled) {
+    if (mode === "markdown") {
+      isDisabled = true;
+    } else if (editor) {
+      isDisabled = format === "undo" ? !editor.can().undo() : !editor.can().redo();
+    }
+  }
+  const iconState = {
+    format,
+    active,
+    disabled,
+    readOnly,
+    isDisabled,
+    mode
+  };
+  const iconOverride = toolbarIcons == null ? void 0 : toolbarIcons[format];
+  const renderedOverride = typeof iconOverride === "function" ? iconOverride(iconState) : iconOverride;
+  const classes = [
+    styles.toolbarButton,
+    active && styles.toolbarButtonActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: () => toggleFormat(format),
+      disabled: isDisabled,
+      "aria-label": meta.label,
+      title: `${meta.label} (${meta.shortcut})`,
+      ...isAction ? {} : { "aria-pressed": active },
+      children: iconOverride !== void 0 ? renderedOverride : /* @__PURE__ */ jsx(IconComponent, { size: 16, weight: active ? "bold" : "regular" })
+    }
+  );
+}
+function EditorSeparator({ className }) {
+  const classes = [styles.separator, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "separator", "aria-orientation": "vertical" });
+}
+function EditorStatusIndicator({ status: statusOverride, labels, className }) {
+  const { saveStatus } = useEditorContext();
+  const status = statusOverride ?? saveStatus;
+  const mergedLabels = { ...DEFAULT_STATUS_LABELS, ...labels };
+  const label = mergedLabels[status];
+  if (!label) return null;
+  const classes = [
+    styles.statusIndicator,
+    status === "error" && styles.statusError,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, "aria-live": "polite", role: "status", children: label });
+}
+function EditorContentArea({ className }) {
+  const { value, setValue, placeholder, disabled, readOnly, editor, mode, contentRef } = useEditorContext();
+  if (mode === "rich" && editor && _EditorContent) {
+    const TipTapContent = _EditorContent;
+    const classes2 = [styles.content, styles.contentRich, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, "data-placeholder": placeholder, children: /* @__PURE__ */ jsx(TipTapContent, { editor }) });
+  }
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: contentRef,
+      className: styles.contentTextarea,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      placeholder,
+      disabled,
+      readOnly,
+      "aria-label": placeholder
+    }
+  ) });
+}
+function EditorStatusBar({ showWordCount = true, showCharCount = true, className }) {
+  const { wordCount, charCount, maxLength } = useEditorContext();
+  const classes = [styles.statusBar, className].filter(Boolean).join(" ");
+  const isOverLimit = maxLength !== void 0 && charCount > maxLength;
+  const isNearLimit = maxLength !== void 0 && !isOverLimit && charCount >= maxLength * 0.9;
+  const charLimitClasses = [
+    styles.statusBarItem,
+    isNearLimit && styles.statusBarItemWarning,
+    isOverLimit && styles.statusBarItemError
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, "aria-label": "Editor statistics", children: [
+    /* @__PURE__ */ jsx("div", { className: styles.statusBarLeft }),
+    /* @__PURE__ */ jsxs("div", { className: styles.statusBarRight, children: [
+      showWordCount && /* @__PURE__ */ jsxs("span", { className: styles.statusBarItem, children: [
+        wordCount,
+        " ",
+        wordCount === 1 ? "Word" : "Words"
+      ] }),
+      showWordCount && showCharCount && /* @__PURE__ */ jsx(EditorSeparator, {}),
+      showCharCount && /* @__PURE__ */ jsx("span", { className: charLimitClasses, children: maxLength !== void 0 ? `${charCount} / ${maxLength}` : `${charCount} ${charCount === 1 ? "Character" : "Characters"}` })
+    ] })
+  ] });
+}
+const Editor = Object.assign(EditorRoot, {
+  Toolbar: EditorToolbar,
+  ToolbarGroup: EditorToolbarGroup,
+  ToolbarButton: EditorToolbarButton,
+  Separator: EditorSeparator,
+  StatusIndicator: EditorStatusIndicator,
+  Content: EditorContentArea,
+  StatusBar: EditorStatusBar
+});
+export {
+  Editor,
+  EditorContentArea,
+  EditorRoot,
+  EditorSeparator,
+  EditorStatusBar,
+  EditorStatusIndicator,
+  EditorToolbar,
+  EditorToolbarButton,
+  EditorToolbarGroup,
+  useEditorContext
+};