mantine-double-click-editable 1.0.0 → 1.0.2

package/README.md

@@ -2,6 +2,13 @@
 
 A double-click-to-edit text component for [Mantine](https://mantine.dev/), with precise caret placement.
 
+[![npm version](https://img.shields.io/npm/v/mantine-double-click-editable.svg)](https://www.npmjs.com/package/mantine-double-click-editable)
+[![github](https://img.shields.io/badge/github-repo-black?logo=github)](https://github.com/ypyl/DoubleClickEditable)
+
+## Demo
+
+![demo](./msedge_g0RHaauDdc.gif)
+
 ## Installation
 
 ```bash

package/dist/index.cjs

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

package/dist/index.js

@@ -1,45 +1,50 @@
 import { jsx as g } from "react/jsx-runtime";
-import { useState as p } from "react";
+import { useState as x } from "react";
 import { Text as b } from "@mantine/core";
-function C({
-  children: a,
+function w({
+  children: s,
   onSave: l,
   style: d,
   ...u
 }) {
-  const [i, c] = p(!1), m = (e) => {
-    c(!0);
-    const o = e.clientX, s = e.clientY;
+  const [r, i] = x(!1), m = (e) => {
+    i(!0);
+    const t = e.clientX, c = e.clientY;
     setTimeout(() => {
-      const n = window.getSelection();
-      if (n) {
+      const o = window.getSelection();
+      if (o) {
         if (document.caretRangeFromPoint) {
-          const t = document.caretRangeFromPoint(o, s);
-          t && (n.removeAllRanges(), n.addRange(t));
+          const n = document.caretRangeFromPoint(t, c);
+          n && (o.removeAllRanges(), o.addRange(n));
         } 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);
+          const n = document.caretPositionFromPoint(t, c);
+          if (n) {
+            const a = document.createRange();
+            a.setStart(n.offsetNode, n.offset), a.collapse(!0), o.removeAllRanges(), o.addRange(a);
           }
         }
       }
     }, 0);
   }, f = (e) => {
-    c(!1);
-    const o = e.currentTarget.innerHTML;
-    l?.(o);
+    i(!1);
+    const t = e.currentTarget.innerText;
+    l?.(t);
+  }, p = (e) => {
+    e.preventDefault();
+    const t = e.clipboardData.getData("text/plain");
+    document.execCommand("insertText", !1, t);
   };
   return /* @__PURE__ */ g(
     b,
     {
       ...u,
-      contentEditable: i,
+      contentEditable: r ? "plaintext-only" : !1,
       suppressContentEditableWarning: !0,
       style: {
         border: "1px dashed #ccc",
         padding: "4px",
-        cursor: i ? "text" : "pointer",
+        cursor: r ? "text" : "pointer",
+        whiteSpace: "pre-wrap",
         ...d
       },
       onMouseDown: (e) => {
@@ -47,10 +52,11 @@ function C({
       },
       onDoubleClick: m,
       onBlur: f,
-      children: a
+      onPaste: p,
+      children: s
     }
   );
 }
 export {
-  C as DoubleClickEditable
+  w as DoubleClickEditable
 };

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "mantine-double-click-editable",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ypyl/DoubleClickEditable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ypyl/DoubleClickEditable/issues"
+  },
+  "homepage": "https://github.com/ypyl/DoubleClickEditable#readme",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",