mantine-double-click-editable 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+# mantine-double-click-editable
+
+A double-click-to-edit text component for [Mantine](https://mantine.dev/), with precise caret placement.
+
+## Installation
+
+```bash
+npm install mantine-double-click-editable
+# or
+yarn add mantine-double-click-editable
+```
+
+## Peer Dependencies
+
+Ensure you have `@mantine/core`, `@mantine/hooks`, `react`, and `react-dom` installed in your project.
+
+## Usage
+
+```tsx
+import { DoubleClickEditable } from 'mantine-double-click-editable';
+import '@mantine/core/styles.css';
+
+function MyComponent() {
+  return (
+    <DoubleClickEditable
+      onSave={(content) => console.log('Saved:', content)}
+      c="blue"
+      fw={700}
+    >
+      Double-click to edit me!
+    </DoubleClickEditable>
+  );
+}
+```
+
+## Features
+
+- **Double-click to edit:** Seamlessly transition between view and edit modes.
+- **Precise Caret Placement:** The cursor is placed exactly where you double-click, even in the middle of text.
+- **Mantine Integration:** Inherits all props from Mantine's `Text` component.
+- **TypeScript Support:** Fully typed out of the box.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),b=require("react"),p=require("@mantine/core");function R({children:l,onSave:a,style:u,...d}){const[i,c]=b.useState(!1),f=e=>{c(!0);const o=e.clientX,s=e.clientY;setTimeout(()=>{const n=window.getSelection();if(n){if(document.caretRangeFromPoint){const t=document.caretRangeFromPoint(o,s);t&&(n.removeAllRanges(),n.addRange(t))}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,s);if(t){const r=document.createRange();r.setStart(t.offsetNode,t.offset),r.collapse(!0),n.removeAllRanges(),n.addRange(r)}}}},0)},g=e=>{c(!1);const o=e.currentTarget.innerHTML;a?.(o)};return m.jsx(p.Text,{...d,contentEditable:i,suppressContentEditableWarning:!0,style:{border:"1px dashed #ccc",padding:"4px",cursor:i?"text":"pointer",...u},onMouseDown:e=>{e.detail>1&&e.preventDefault()},onDoubleClick:f,onBlur:g,children:l})}exports.DoubleClickEditable=R;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/index.js

@@ -0,0 +1,56 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Text as b } from "@mantine/core";
+function C({
+  children: a,
+  onSave: l,
+  style: d,
+  ...u
+}) {
+  const [i, c] = p(!1), m = (e) => {
+    c(!0);
+    const o = e.clientX, s = e.clientY;
+    setTimeout(() => {
+      const n = window.getSelection();
+      if (n) {
+        if (document.caretRangeFromPoint) {
+          const t = document.caretRangeFromPoint(o, s);
+          t && (n.removeAllRanges(), n.addRange(t));
+        } else if (document.caretPositionFromPoint) {
+          const t = document.caretPositionFromPoint(o, s);
+          if (t) {
+            const r = document.createRange();
+            r.setStart(t.offsetNode, t.offset), r.collapse(!0), n.removeAllRanges(), n.addRange(r);
+          }
+        }
+      }
+    }, 0);
+  }, f = (e) => {
+    c(!1);
+    const o = e.currentTarget.innerHTML;
+    l?.(o);
+  };
+  return /* @__PURE__ */ g(
+    b,
+    {
+      ...u,
+      contentEditable: i,
+      suppressContentEditableWarning: !0,
+      style: {
+        border: "1px dashed #ccc",
+        padding: "4px",
+        cursor: i ? "text" : "pointer",
+        ...d
+      },
+      onMouseDown: (e) => {
+        e.detail > 1 && e.preventDefault();
+      },
+      onDoubleClick: m,
+      onBlur: f,
+      children: a
+    }
+  );
+}
+export {
+  C as DoubleClickEditable
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "mantine-double-click-editable",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@mantine/core": ">=7.0.0",
+    "@mantine/hooks": ">=7.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@mantine/core": "^8.3.10",
+    "@mantine/hooks": "^8.3.10",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.1"
+  }
+}