@nine-lab/nine-ux 0.1.85 → 0.1.87
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.
- package/dist/nine-ux.umd.js +1 -9
- package/package.json +13 -5
- package/dist/css/nineEditor.css +0 -171
package/dist/nine-ux.umd.js
CHANGED
|
@@ -649,14 +649,6 @@ dialog.out { animation: nx-fade-out 0.3s forwards; }
|
|
|
649
649
|
confirm(message, title = "Confirm") {
|
|
650
650
|
return __privateMethod(this, _NineUx_instances, createRunner_fn).call(this, "confirm", message, title, "classic");
|
|
651
651
|
}
|
|
652
|
-
// 이제 setup이나 window 교체 로직은 여기서 다 제거합니다.
|
|
653
|
-
// 오직 팝업을 실행하는 인터페이스 역할만 수행.
|
|
654
|
-
async alert1(message, title = "Alert", options = {}) {
|
|
655
|
-
return await nineAlertPopup.alert(message, title, options);
|
|
656
|
-
}
|
|
657
|
-
async confirm1(message, title = "Confirm", options = {}) {
|
|
658
|
-
return await nineConfirmPopup.confirm(message, title, options);
|
|
659
|
-
}
|
|
660
652
|
/**
|
|
661
653
|
* 컴포넌트별 CSS 경로 생성 헬퍼 (복구!)
|
|
662
654
|
*/
|
|
@@ -19372,7 +19364,7 @@ img.ProseMirror-separator {
|
|
|
19372
19364
|
const customImport = customPath ? `@import "${customPath}";` : "";
|
|
19373
19365
|
this.shadowRoot.innerHTML = `
|
|
19374
19366
|
<style>
|
|
19375
|
-
@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ux@${"0.1.
|
|
19367
|
+
@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ux@${"0.1.87"}/dist/css/nineEditor.css";
|
|
19376
19368
|
${customImport}
|
|
19377
19369
|
</style>
|
|
19378
19370
|
|
package/package.json
CHANGED
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nine-lab/nine-ux",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.87",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"main": "dist/nine-ux.umd.js",
|
|
6
|
-
"module": "dist/nine-ux.
|
|
5
|
+
"main": "./dist/nine-ux.umd.js",
|
|
6
|
+
"module": "./dist/nine-ux.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
7
8
|
"files": [
|
|
8
9
|
"dist"
|
|
9
10
|
],
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": "./dist/nine-ux.js",
|
|
14
|
+
"require": "./dist/nine-ux.umd.js"
|
|
15
|
+
},
|
|
16
|
+
"./style.css": "./dist/style.css"
|
|
17
|
+
},
|
|
10
18
|
"scripts": {
|
|
11
19
|
"dev": "vite",
|
|
12
|
-
"build": "vite build
|
|
20
|
+
"build": "vite build",
|
|
13
21
|
"release": "npm version patch && npm run build && npm publish"
|
|
14
22
|
},
|
|
15
23
|
"peerDependencies": {
|
|
16
24
|
"@nine-lab/nine-util": ">=0.9.20"
|
|
17
25
|
},
|
|
18
26
|
"devDependencies": {
|
|
19
|
-
"@nine-lab/nine-util": "^0.9.
|
|
27
|
+
"@nine-lab/nine-util": "^0.9.29",
|
|
20
28
|
"vite": "^5.4.21"
|
|
21
29
|
},
|
|
22
30
|
"dependencies": {
|
package/dist/css/nineEditor.css
DELETED
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
:host(nine-editor) {
|
|
2
|
-
position: relative;
|
|
3
|
-
height: 100%;
|
|
4
|
-
width: 100%;
|
|
5
|
-
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
border: 1px solid #ddd;
|
|
9
|
-
border-radius: 4px;
|
|
10
|
-
background: white;
|
|
11
|
-
overflow: hidden; /* 에디터가 삐져나가지 않게 */
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
#editor-container {
|
|
16
|
-
flex: 1;
|
|
17
|
-
min-height: 0; /* 중요: 이 설정이 있어야 내부에서 스크롤이 터짐 */
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.menu-bar {
|
|
23
|
-
background: #f8f9fa;
|
|
24
|
-
padding: 5px;
|
|
25
|
-
border-bottom: 1px solid #ddd;
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-wrap: wrap;
|
|
28
|
-
gap: 4px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.menu-bar button, .menu-bar input[type="color"] {
|
|
32
|
-
width: 32px;
|
|
33
|
-
height: 32px;
|
|
34
|
-
cursor: pointer;
|
|
35
|
-
border: 1px solid #dee2e6;
|
|
36
|
-
background: white;
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
font-size: 12px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.menu-bar select {
|
|
42
|
-
background: white;
|
|
43
|
-
border: 1px solid #dee2e6;
|
|
44
|
-
border-radius: 2px;
|
|
45
|
-
color: #333;
|
|
46
|
-
padding: 0 4px;
|
|
47
|
-
outline: none;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.menu-bar input[type="color"] {
|
|
51
|
-
padding: 4px;
|
|
52
|
-
color: #333;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.menu-bar button {
|
|
56
|
-
display: inline-flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
justify-content: center;
|
|
59
|
-
padding: 0;
|
|
60
|
-
transition: all 0.2s;
|
|
61
|
-
color: #333;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* 모든 아이콘 공통 스타일 */
|
|
65
|
-
.menu-bar button i {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
width: 18px; /* 아이콘 크기 살짝 키움 */
|
|
68
|
-
height: 18px;
|
|
69
|
-
background-repeat: no-repeat;
|
|
70
|
-
background-position: center;
|
|
71
|
-
background-size: contain;
|
|
72
|
-
/* mask-image 방식을 쓰면 is-active 시 색상 제어가 편합니다 */
|
|
73
|
-
background-color: currentColor;
|
|
74
|
-
-webkit-mask-repeat: no-repeat;
|
|
75
|
-
-webkit-mask-position: center;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.menu-bar button:hover {
|
|
79
|
-
background-color: #f8f9fa;
|
|
80
|
-
border-color: #adb5bd;
|
|
81
|
-
}
|
|
82
|
-
.menu-bar button:active {
|
|
83
|
-
background-color: green;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.menu-bar button.is-active {
|
|
87
|
-
background-color: green; /* 연한 파란색 배경 */
|
|
88
|
-
color: white; /* 파란색 아이콘 */
|
|
89
|
-
--border-color: darkgreen;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
/* 버튼 활성화 시 아이콘 색상 자동 변경 */
|
|
95
|
-
.menu-bar button.is-active i {
|
|
96
|
-
background-color: white; /* 버튼 배경이 파란색이면 아이콘은 흰색으로 */
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/* 하이라이트 아이콘 정의 */
|
|
100
|
-
.icon-highlight { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-highlighter" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.096.644a2 2 0 0 1 2.791.036l1.433 1.433a2 2 0 0 1 .035 2.791l-.413.435-8.07 8.995a.5.5 0 0 1-.372.166h-3a.5.5 0 0 1-.234-.058l-.412.412A.5.5 0 0 1 2.5 15h-2a.5.5 0 0 1-.354-.854l1.412-1.412A.5.5 0 0 1 1.5 12.5v-3a.5.5 0 0 1 .166-.372l8.995-8.07zm-.115 1.47L2.727 9.52l3.753 3.753 7.406-8.254zm3.585 2.17.064-.068a1 1 0 0 0-.017-1.396L13.18 1.387a1 1 0 0 0-1.396-.018l-.068.065zM5.293 13.5 2.5 10.707v1.586L3.707 13.5z"/></svg>'); }
|
|
101
|
-
.icon-left { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/></svg>'); }
|
|
102
|
-
.icon-center { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/></svg>'); }
|
|
103
|
-
.icon-right { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/></svg>'); }
|
|
104
|
-
.icon-ul { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>'); }
|
|
105
|
-
.icon-ol { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/><path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/></svg>'); }
|
|
106
|
-
.icon-image { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"/></svg>'); }
|
|
107
|
-
.icon-undo { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>'); }
|
|
108
|
-
.icon-redo { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/></svg>'); }
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
.tiptap {
|
|
112
|
-
flex: 1; /* 부모인 container의 남은 높이를 다 씀 */
|
|
113
|
-
padding: 15px;
|
|
114
|
-
overflow-y: auto;
|
|
115
|
-
outline: none;
|
|
116
|
-
background: white;
|
|
117
|
-
min-height: 250px;
|
|
118
|
-
font-family: Arial, sans-serif !important;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.tiptap p {
|
|
122
|
-
margin: 0; /* 혹은 아주 적은 여백 */
|
|
123
|
-
}
|
|
124
|
-
.tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
|
|
125
|
-
.tiptap [style*="text-align: left"] { text-align: left; }
|
|
126
|
-
.tiptap [style*="text-align: center"] { text-align: center; }
|
|
127
|
-
.tiptap [style*="text-align: right"] { text-align: right; }
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
.tiptap {
|
|
131
|
-
font-synthesis: style weight !important; /* 브라우저가 임의로 기울임꼴과 굵기를 생성하도록 허용 */
|
|
132
|
-
-webkit-font-smoothing: antialiased;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.tiptap em {
|
|
136
|
-
font-style: italic !important;
|
|
137
|
-
font-display: swap;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* 혹시 모르니 i 태그도 함께 지정 */
|
|
141
|
-
.tiptap i {
|
|
142
|
-
--font-style: italic !important;
|
|
143
|
-
font-style: oblique;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.tiptap span[style*="font-size"] {
|
|
147
|
-
display: inline-block; /* 크기 적용이 더 확실해짐 */
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
/* ProseMirror 필수 에디터 스타일 */
|
|
152
|
-
#editor-container .ProseMirror {
|
|
153
|
-
white-space: pre-wrap; /* 줄바꿈과 공백을 보존 */
|
|
154
|
-
word-wrap: break-word; /* 긴 단어 자동 줄바꿈 */
|
|
155
|
-
outline: none; /* 포커스 시 테두리 제거 (선택) */
|
|
156
|
-
padding: 10px; /* 에디터 안쪽 여백 */
|
|
157
|
-
min-height: 200px; /* 에디터 최소 높이 */
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
/* 에디터 내의 단락(p) 간격 조절 */
|
|
161
|
-
#editor-container .ProseMirror p {
|
|
162
|
-
margin: 0;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
/* readonly일 때 에디터 외관 조절 (선택사항) */
|
|
167
|
-
:host([readonly]) #editor-container {
|
|
168
|
-
border-color: transparent;
|
|
169
|
-
background-color: #f9f9f9;
|
|
170
|
-
cursor: default;
|
|
171
|
-
}
|