@teriusu/rich-editor 0.9.2 → 0.9.3

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 (5) hide show
  1. package/dist/components/InputModal.svelte +14 -1
  2. package/dist/components/InputModal.svelte.d.ts.map +1 -1
  3. package/dist/components/MathModal.svelte +28 -3
  4. package/dist/components/MathModal.svelte.d.ts.map +1 -1
  5. package/package.json +1 -1
package/dist/components/InputModal.svelte CHANGED
@@ -61,7 +61,7 @@
61
61
  <!-- svelte-ignore a11y_click_events_have_key_events -->
62
62
  <!-- svelte-ignore a11y_no_static_element_interactions -->
63
63
  <div
64
- class="bg-background border border-border rounded-xl shadow-xl p-5 w-[360px] max-w-[90vw]"
64
+ class="hce-input-panel bg-background border border-border rounded-xl shadow-xl p-5 w-[360px] max-w-[90vw]"
65
65
  onclick={(e) => e.stopPropagation()}
66
66
  >
67
67
  {#if title}
@@ -103,3 +103,16 @@
103
103
  </div>
104
104
  </div>
105
105
  </div>
106
+
107
+ <style>
108
+ /*
109
+ * `w-full` 은 `width: 100%` 일 뿐이라, `box-sizing` 이 `content-box` 로 남아 있으면
110
+ * 좌우 패딩·테두리가 그대로 더해져 입력창이 모달 밖으로 나간다. 이 패키지는 Tailwind
111
+ * preflight 를 끄고 배포하고 정올 앱에도 전역 리셋이 없다 — 수식 모달에서 실제로 터졌다.
112
+ * 같은 조합이므로 여기서도 미리 못을 박는다.
113
+ */
114
+ .hce-input-panel,
115
+ .hce-input-panel input {
116
+ box-sizing: border-box;
117
+ }
118
+ </style>
package/dist/components/InputModal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA6EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA+EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
package/dist/components/MathModal.svelte CHANGED
@@ -94,7 +94,7 @@
94
94
  <!-- svelte-ignore a11y_click_events_have_key_events -->
95
95
  <!-- svelte-ignore a11y_no_static_element_interactions -->
96
96
  <div
97
- class="bg-background border border-border rounded-xl shadow-xl p-5 w-[440px] max-w-[90vw]"
97
+ class="hce-math-panel bg-background border border-border rounded-xl shadow-xl p-5 w-[440px] max-w-[90vw]"
98
98
  onclick={(e) => e.stopPropagation()}
99
99
  >
100
100
  <div class="flex items-center justify-between mb-3">
@@ -128,7 +128,7 @@
128
128
  `color-mix` 를 인라인으로 준다. `editor.css` 의 `.hce-active` 가 같은 이유로 같은 처방을 쓴다.
129
129
  -->
130
130
  <div
131
- class="mt-3 min-h-[52px] flex items-center justify-center rounded-md border border-border px-3 py-2 overflow-x-auto"
131
+ class="hce-math-preview mt-3 min-h-[52px] flex items-center justify-center rounded-md border border-border px-3 py-2 overflow-x-auto"
132
132
  style="background-color: color-mix(in srgb, var(--muted) 40%, transparent)"
133
133
  >
134
134
  {#if preview.error}
@@ -142,7 +142,7 @@
142
142
  {/if}
143
143
  </div>
144
144
 
145
- <div class="flex items-center justify-between gap-2 mt-4">
145
+ <div class="hce-math-actions flex items-center justify-between gap-2 mt-4">
146
146
  <span class="text-[11px] text-muted-foreground">⌘/Ctrl + Enter 로 확인</span>
147
147
  <div class="flex gap-2">
148
148
  <button
@@ -163,3 +163,28 @@
163
163
  </div>
164
164
  </div>
165
165
  </div>
166
+
167
+ <style>
168
+ /*
169
+ * ⚠️ **`box-sizing` 을 호스트에 기대면 안 된다.**
170
+ *
171
+ * 이 패키지는 Tailwind preflight 를 끄고 배포하고(`tailwind.config.js` 의
172
+ * `corePlugins.preflight: false`), 정올 앱에도 전역 `* { box-sizing: border-box }` 리셋이
173
+ * 없다(`layout.css` 의 `*` 규칙은 reduced-motion 과 탭 하이라이트뿐). 그래서 `w-full`
174
+ * (= `width: 100%`) 에 좌우 패딩 24px + 테두리 2px 가 **그대로 더해져** 입력창이 모달
175
+ * 오른쪽으로 삐져나왔다(사용자 제보).
176
+ *
177
+ * 패키지가 내보내는 상자는 자기 안에서 못을 박는다 — 툴바 버튼·표 셀·카드 프레임이
178
+ * 이미 같은 이유로 각자 `box-sizing` 을 들고 있다.
179
+ */
180
+ .hce-math-panel,
181
+ .hce-math-panel textarea,
182
+ .hce-math-preview,
183
+ .hce-math-actions {
184
+ box-sizing: border-box;
185
+ }
186
+
187
+ .hce-math-panel textarea {
188
+ max-width: 100%;
189
+ }
190
+ </style>
package/dist/components/MathModal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MathModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MathModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAiHJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"MathModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MathModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAmHJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teriusu/rich-editor",
3
- "version": "0.9.2",
3
+ "version": "0.9.3",
4
4
  "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
5
5
  "type": "module",
6
6
  "svelte": "./dist/index.js",