@teriusu/rich-editor 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/utils/resize.d.ts.map +1 -1
  2. package/dist/utils/resize.js +39 -23
  3. package/package.json +1 -1
package/dist/utils/resize.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC;AAUD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CA+GrE"}
1
+ {"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC;AAUD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CAiIrE"}
package/dist/utils/resize.js CHANGED
@@ -36,16 +36,17 @@ export function attachResize(options) {
36
36
  if (!resizing)
37
37
  paint(false);
38
38
  };
39
- const onPointerDown = (e) => {
40
- e.preventDefault();
41
- e.stopPropagation();
42
- resizing = true;
43
- const rect = dom.getBoundingClientRect();
44
- start = axis === "x" ? e.clientX : e.clientY;
45
- startSize = axis === "x" ? rect.width : rect.height;
46
- paint(true);
47
- handle.setPointerCapture(e.pointerId);
48
- };
39
+ /*
40
+ * ⚠️ **`setPointerCapture` 에 기대지 않는다.**
41
+ *
42
+ * 손잡이는 14px 밖에 안 되는데 드래그는 그 밖으로 한참 벗어난다. 캡처가 잡히면 그래도
43
+ * 이벤트가 오지만, 캡처는 조용히 실패할 수 있다(합성 포인터·다른 요소가 이미 캡처를
44
+ * 쥔 경우 등). 그러면 `pointermove`/`pointerup` 이 손잡이에 안 오고, 드래그가 커밋되지
45
+ * 않은 채 원래 크기로 되돌아간다 — 에러 없이.
46
+ *
47
+ * 그래서 `pointerdown` 에서 **window 에 붙였다 떼는** 방식으로 간다. 캡처 실패에도,
48
+ * 포인터가 창 밖으로 나가도 견딘다.
49
+ */
49
50
  const onPointerMove = (e) => {
50
51
  if (!resizing)
51
52
  return;
@@ -56,17 +57,14 @@ export function attachResize(options) {
56
57
  else
57
58
  dom.style.height = `${next}px`;
58
59
  };
59
- const endResize = (e) => {
60
+ const endResize = () => {
60
61
  if (!resizing)
61
62
  return;
62
63
  resizing = false;
63
64
  paint(false);
64
- try {
65
- handle.releasePointerCapture(e.pointerId);
66
- }
67
- catch {
68
- // 이미 캡처를 놓쳤을 수 있다 — 무시해도 되는 실패다.
69
- }
65
+ detachWindow();
66
+ document.body.style.removeProperty("user-select");
67
+ document.body.style.removeProperty("cursor");
70
68
  const raw = axis === "x" ? dom.style.width : dom.style.height;
71
69
  if (!raw)
72
70
  return;
@@ -84,20 +82,38 @@ export function attachResize(options) {
84
82
  [attr]: format(parsed)
85
83
  }));
86
84
  };
85
+ const attachWindow = () => {
86
+ window.addEventListener("pointermove", onPointerMove);
87
+ window.addEventListener("pointerup", endResize);
88
+ window.addEventListener("pointercancel", endResize);
89
+ };
90
+ const detachWindow = () => {
91
+ window.removeEventListener("pointermove", onPointerMove);
92
+ window.removeEventListener("pointerup", endResize);
93
+ window.removeEventListener("pointercancel", endResize);
94
+ };
95
+ const onPointerDown = (e) => {
96
+ e.preventDefault();
97
+ e.stopPropagation();
98
+ resizing = true;
99
+ const rect = dom.getBoundingClientRect();
100
+ start = axis === "x" ? e.clientX : e.clientY;
101
+ startSize = axis === "x" ? rect.width : rect.height;
102
+ paint(true);
103
+ // 드래그 중 텍스트가 선택되며 파랗게 물드는 것을 막는다.
104
+ document.body.style.userSelect = "none";
105
+ document.body.style.cursor = preset.cursor;
106
+ attachWindow();
107
+ };
87
108
  handle.addEventListener("mouseenter", onEnter);
88
109
  handle.addEventListener("mouseleave", onLeave);
89
110
  handle.addEventListener("pointerdown", onPointerDown);
90
- handle.addEventListener("pointermove", onPointerMove);
91
- handle.addEventListener("pointerup", endResize);
92
- handle.addEventListener("pointercancel", endResize);
93
111
  dom.appendChild(handle);
94
112
  return () => {
95
113
  handle.removeEventListener("mouseenter", onEnter);
96
114
  handle.removeEventListener("mouseleave", onLeave);
97
115
  handle.removeEventListener("pointerdown", onPointerDown);
98
- handle.removeEventListener("pointermove", onPointerMove);
99
- handle.removeEventListener("pointerup", endResize);
100
- handle.removeEventListener("pointercancel", endResize);
116
+ detachWindow();
101
117
  handle.remove();
102
118
  };
103
119
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teriusu/rich-editor",
3
- "version": "0.8.0",
3
+ "version": "0.8.2",
4
4
  "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
5
5
  "type": "module",
6
6
  "svelte": "./dist/index.js",