ritext 1.0.14 → 1.0.18

package/README.md

@@ -14,34 +14,33 @@ Ritext is a modern WYSIWYG rich text editor built with Tailwind CSS, powered by
 ### This is an testing phase will publish soon.
 
 # Extension Roadmap
-- [x] Starter Kit
-- [x] Bold
-- [x] Italic
-- [x] Underline
-- [x] Strike
-- [x] Subscript
-- [x] Superscript
-- [ ] SubAndSuperScript
-- [ ] Format Painter
-- [ ] Clear Format
-- [ ] Font Family
-- [ ] Heading
-- [ ] Fonts Size
-- [ ] Undo
-- [ ] Redo
-- [ ] Emoji
-- [ ] Color
-- [ ] Highlight
-- [ ] Bullet List
-- [ ] Ordered List
-- [ ] Alignment
-- [ ] Indent
-- [ ] Outdent
-- [ ] Line Height
-- [ ] Task List
-- [ ] Image
-- [ ] Link
-- [ ] Blockquote
+☑ Starter Kit  
+☑ Bold  
+☑ Italic  
+☑ Underline  
+☑ Strike  
+☑ Subscript  
+☑ Superscript  
+☑ SubAndSuperScript  
+☑ Clear Format  
+☑ Heading  
+☑ Font Family  
+☑ Fonts Size  
+☑ Undo  
+☑ Redo  
+☐ Color  
+☐ Highlight  
+☐ Bullet List  
+☐ Ordered List  
+☐ Alignment  
+☐ Indent  
+☐ Outdent  
+☐ Line Height  
+☐ Task List  
+☐ Image  
+☐ Link  
+☐ Blockquote  
+☐ Format Painter  
 
 # Stay in touch
 

package/dist/chunk-2YUUKIIT.mjs

@@ -0,0 +1,149 @@
+import {
+  Tooltip_default
+} from "./chunk-7QOFJIQ3.mjs";
+import {
+  useEditor
+} from "./chunk-VYDH6BZE.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/lib/components/DropdownComponent.tsx
+import { useState, Fragment, useId, Children, isValidElement, cloneElement } from "react";
+import { twMerge } from "tailwind-merge";
+import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useClick, useDismiss, FloatingPortal } from "@floating-ui/react";
+
+// src/lib/icon/ArrowIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var ArrowIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: /* @__PURE__ */ jsx("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
+    })
+  );
+};
+var ArrowIcon_default = ArrowIcon;
+
+// src/lib/components/DropdownComponent.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DropdownComponent = ({ children, className, showArrow = true, content, dropdownClassName, style, tooltip, tooltipClassName, tooltipPlacement, _tooltipContent, _internalContent, _dropdownClassName }) => {
+  const [open, setOpen] = useState(false);
+  const { x, y, refs, strategy, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+  const listId = useId();
+  const tooltipContent = /* @__PURE__ */ jsx2("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
+  const initialMotion = { opacity: 0, scale: 0.95 };
+  const animateMotion = { opacity: 1, scale: 1 };
+  const enhancedChildren = Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    if (!("onSelect" in child.props)) return child;
+    const prevOnSelect = child.props.onSelect;
+    const combinedOnSelect = () => {
+      prevOnSelect == null ? void 0 : prevOnSelect();
+      setOpen(false);
+    };
+    return cloneElement(child, { onSelect: combinedOnSelect });
+  });
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({}, getReferenceProps({
+      ref: refs.setReference,
+      type: "button",
+      "aria-controls": open ? listId : void 0
+    })), {
+      className: twMerge(
+        "p-1.5 rounded-md hover:bg-gray-100 items-center flex gap-x-0.5",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx2("span", { children: content != null ? content : _internalContent }),
+        showArrow && /* @__PURE__ */ jsx2(ArrowIcon_default, { size: 14, className: "text-gray-500 block" })
+      ]
+    })
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tooltip === false ? btn : /* @__PURE__ */ jsx2(
+      Tooltip_default,
+      {
+        content: tooltipContent,
+        className: tooltipClassName,
+        placement: tooltipPlacement,
+        children: btn
+      }
+    ),
+    /* @__PURE__ */ jsx2(FloatingPortal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: open && /* @__PURE__ */ jsx2(
+      motion.div,
+      __spreadProps(__spreadValues({}, getFloatingProps({
+        ref: refs.setFloating,
+        style: {
+          position: strategy,
+          top: y != null ? y : 0,
+          left: x != null ? x : 0
+        },
+        role: "listbox",
+        id: listId
+      })), {
+        initial: initialMotion,
+        animate: animateMotion,
+        exit: initialMotion,
+        className: twMerge("bg-white border border-solid border-gray-200 p-2 space-y-1 rounded-lg shadow-sm shadow-gray-200/40 max-h-125 overflow-auto", _dropdownClassName, dropdownClassName),
+        children: enhancedChildren
+      })
+    ) }) })
+  ] });
+};
+var DropdownComponent_default = DropdownComponent;
+
+// src/lib/components/DropdownItemComponent.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { useEditorState } from "@tiptap/react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DropdownItemComponent = ({ item, onSelect, activeClassName, itemClassName, _itemClassName, showKeyShortcutText = true, spClass }) => {
+  const { editor } = useEditor();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(item.name, item.ext ? { level: item.ext } : void 0)) || false })
+  });
+  return /* @__PURE__ */ jsxs2("div", { className: twMerge2(
+    "flex items-center gap-x-2.5 transition-all duration-100 cursor-pointer select-none px-2 py-1.5 rounded-md",
+    _itemClassName,
+    (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
+    itemClassName,
+    (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
+  ), onClick: onSelect, children: [
+    item.icon,
+    /* @__PURE__ */ jsx3("span", { className: twMerge2("flex-1 text-base", spClass), style: item.style, children: item.text }),
+    showKeyShortcutText && item.keyBind && /* @__PURE__ */ jsx3("span", { className: "ml-6 text-gray-400", children: item.keyBind })
+  ] });
+};
+var DropdownItemComponent_default = DropdownItemComponent;
+
+export {
+  DropdownComponent_default,
+  DropdownItemComponent_default
+};

package/dist/chunk-7QOFJIQ3.mjs

@@ -0,0 +1,90 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/lib/components/_com/Tooltip.tsx
+import { useState, Fragment, cloneElement, isValidElement, useId } from "react";
+import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useHover, useDismiss, FloatingPortal } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = ({ placement = "top", children, content, className }) => {
+  const [open, setOpen] = useState(false);
+  const { x, y, refs, strategy, context, placement: resolvedPlacement } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [offset(8), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate
+  });
+  const hover = useHover(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss]);
+  const id = useId();
+  function mergeRefs(...refsToMerge) {
+    return (node) => {
+      for (const r of refsToMerge) {
+        if (!r) continue;
+        if (typeof r === "function") r(node);
+        else r.current = node;
+      }
+    };
+  }
+  const side = resolvedPlacement.split("-")[0];
+  const enterOffset = 6;
+  const getInitial = () => {
+    switch (side) {
+      case "top":
+        return { opacity: 0, y: enterOffset };
+      case "bottom":
+        return { opacity: 0, y: -enterOffset };
+      case "left":
+        return { opacity: 0, x: enterOffset };
+      case "right":
+        return { opacity: 0, x: -enterOffset };
+      default:
+        return { opacity: 0 };
+    }
+  };
+  const getExit = () => __spreadProps(__spreadValues({}, getInitial()), { opacity: 0 });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(children) ? cloneElement(children, __spreadProps(__spreadValues({}, getReferenceProps({
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      "aria-describedby": open ? id : void 0
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+    })), {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      ref: mergeRefs(children.props.ref, refs.setReference)
+    })) : children,
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      __spreadProps(__spreadValues({
+        ref: refs.setFloating
+      }, getFloatingProps({
+        role: "tooltip",
+        id,
+        style: {
+          position: strategy,
+          top: y != null ? y : 0,
+          left: x != null ? x : 0,
+          pointerEvents: "none"
+        }
+      })), {
+        initial: getInitial(),
+        animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+        exit: getExit(),
+        transition: { type: "spring", stiffness: 420, damping: 30, mass: 0.6 },
+        className: twMerge("bg-white border border-solid border-gray-200/50 py-1 px-3 rounded-lg text-sm shadow-lg shadow-gray-50 text-center", className),
+        children: content
+      }),
+      "tooltip"
+    ) }) })
+  ] });
+};
+var Tooltip_default = Tooltip;
+
+export {
+  Tooltip_default
+};

package/dist/chunk-D47XME55.mjs

@@ -0,0 +1,49 @@
+import {
+  Tooltip_default
+} from "./chunk-7QOFJIQ3.mjs";
+
+// src/lib/components/ButtonWithoutActive.tsx
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ButtonWithoutActive = ({ className, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _internalIcon, _tooltipContent, _interShortcut, _onToggle, _buttonClassName, _disabled = false }) => {
+  const tooltipContent = /* @__PURE__ */ jsxs("p", { children: [
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
+    _interShortcut && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("br", {}),
+      " ",
+      _interShortcut,
+      " "
+    ] })
+  ] });
+  const btn = /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: _onToggle,
+      disabled: _disabled,
+      className: twMerge(
+        "py-1.5 px-2.5 rounded-md hover:bg-gray-100",
+        _disabled ? "opacity-20" : "",
+        _buttonClassName,
+        className
+      ),
+      style,
+      children: icon != null ? icon : _internalIcon
+    }
+  );
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ jsx(
+    Tooltip_default,
+    {
+      content: tooltipContent,
+      className: tooltipClassName,
+      placement: tooltipPlacement,
+      children: btn
+    }
+  );
+};
+var ButtonWithoutActive_default = ButtonWithoutActive;
+
+export {
+  ButtonWithoutActive_default
+};

package/dist/chunk-FWCSY2DS.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/chunk-GSHINFPO.mjs

@@ -0,0 +1,53 @@
+import {
+  Tooltip_default
+} from "./chunk-7QOFJIQ3.mjs";
+import {
+  useEditor
+} from "./chunk-VYDH6BZE.mjs";
+
+// src/lib/components/ButtonComponent.tsx
+import { twMerge } from "tailwind-merge";
+import { useEditorState } from "@tiptap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ButtonComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _extName, _internalIcon, _tooltipContent, _onToggle, _interShortcut, _buttonClassName }) => {
+  const { editor } = useEditor();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(_extName)) || false })
+  });
+  const tooltipContent = /* @__PURE__ */ jsxs("p", { children: [
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
+    /* @__PURE__ */ jsx("br", {}),
+    _interShortcut
+  ] });
+  const btn = /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: _onToggle,
+      className: twMerge(
+        "py-1.5 px-2.5 rounded-md",
+        _buttonClassName,
+        (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
+        className,
+        (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
+      ),
+      style,
+      children: icon != null ? icon : _internalIcon
+    }
+  );
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ jsx(
+    Tooltip_default,
+    {
+      content: tooltipContent,
+      className: tooltipClassName,
+      placement: tooltipPlacement,
+      children: btn
+    }
+  );
+};
+var ButtonComponent_default = ButtonComponent;
+
+export {
+  ButtonComponent_default
+};

package/dist/chunk-LMOTHRGQ.mjs

@@ -0,0 +1,37 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/lib/icon/SupIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SupIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m4 19 8-8" }),
+        /* @__PURE__ */ jsx("path", { d: "m12 19-8-8" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" })
+      ]
+    })
+  );
+};
+var SupIcon_default = SupIcon;
+
+export {
+  SupIcon_default
+};

package/dist/chunk-MBF77NHS.mjs

@@ -0,0 +1,37 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/lib/icon/SubIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SubIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m4 5 8 8" }),
+        /* @__PURE__ */ jsx("path", { d: "m12 5-8 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
+      ]
+    })
+  );
+};
+var SubIcon_default = SubIcon;
+
+export {
+  SubIcon_default
+};

package/dist/chunk-VYDH6BZE.mjs

@@ -0,0 +1,17 @@
+// src/lib/context/editor.context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var EditorContext = createContext({ editor: null });
+var useEditor = () => {
+  const ctx = useContext(EditorContext);
+  if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
+  return ctx;
+};
+var EditorProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value, children });
+};
+
+export {
+  useEditor,
+  EditorProvider
+};

package/dist/extension/bold.d.mts

@@ -0,0 +1,8 @@
+import { Mark } from '@tiptap/react';
+import { E as ExtButtonOptions } from '../tiptap-ext.type-DrneAC5G.mjs';
+import 'react';
+import '@floating-ui/react';
+
+declare const Bold: Mark<ExtButtonOptions>;
+
+export { Bold };

package/dist/extension/bold.d.ts

@@ -0,0 +1,8 @@
+import { Mark } from '@tiptap/react';
+import { E as ExtButtonOptions } from '../tiptap-ext.type-DrneAC5G.js';
+import 'react';
+import '@floating-ui/react';
+
+declare const Bold: Mark<ExtButtonOptions>;
+
+export { Bold };