mantine-double-click-editable 1.0.1 → 1.0.3

package/README.md

@@ -5,6 +5,9 @@ A double-click-to-edit text component for [Mantine](https://mantine.dev/), with
 [![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
 

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

package/dist/index.js

@@ -1,56 +1,66 @@
-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,
+import { jsx as x } from "react/jsx-runtime";
+import { useState as b, useRef as R, useEffect as D } from "react";
+import { Text as P } from "@mantine/core";
+function T({
+  children: i,
+  onSave: u,
   style: d,
-  ...u
+  ...f
 }) {
-  const [i, c] = p(!1), m = (e) => {
-    c(!0);
-    const o = e.clientX, s = e.clientY;
+  const [r, s] = b(!1), a = R(null);
+  D(() => {
+    !r && a.current && (a.current.innerText = i);
+  }, [i, r]);
+  const m = (e) => {
+    s(!0);
+    const t = e.clientX, l = 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, l);
+          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, l);
+          if (n) {
+            const c = document.createRange();
+            c.setStart(n.offsetNode, n.offset), c.collapse(!0), o.removeAllRanges(), o.addRange(c);
           }
         }
       }
     }, 0);
-  }, f = (e) => {
-    c(!1);
-    const o = e.currentTarget.innerHTML;
-    l?.(o);
+  }, p = (e) => {
+    s(!1);
+    const t = e.currentTarget.innerText;
+    u?.(t);
+  }, g = (e) => {
+    e.preventDefault();
+    const t = e.clipboardData.getData("text/plain");
+    document.execCommand("insertText", !1, t);
   };
-  return /* @__PURE__ */ g(
-    b,
+  return /* @__PURE__ */ x(
+    P,
     {
-      ...u,
-      contentEditable: i,
+      ...f,
+      ref: a,
+      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) => {
         e.detail > 1 && e.preventDefault();
       },
       onDoubleClick: m,
-      onBlur: f,
-      children: a
+      onBlur: p,
+      onPaste: g
     }
   );
 }
 export {
-  C as DoubleClickEditable
+  T as DoubleClickEditable
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mantine-double-click-editable",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ypyl/DoubleClickEditable.git"