ninegrid2 6.1316.0 → 6.1318.0

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 (7) hide show
  1. package/dist/bundle.cjs.js +12 -17
  2. package/dist/bundle.esm.js +12 -17
  3. package/dist/nx/_nxDiv.js +4 -1
  4. package/dist/nx/nxEditor.js +9 -20
  5. package/package.json +1 -1
  6. package/src/nx/_nxDiv.js +4 -1
  7. package/src/nx/nxEditor.js +9 -20
package/dist/bundle.cjs.js CHANGED
@@ -28511,7 +28511,10 @@ class nxDiv extends HTMLElement {
28511
28511
  if (!key || !jsonData.hasOwnProperty(key)) return;
28512
28512
 
28513
28513
  const value = jsonData[key];
28514
- if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
28514
+
28515
+ const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
28516
+
28517
+ if (inputTags.includes(el.tagName)) {
28515
28518
  if (el.type === "checkbox" || el.type === "radio") {
28516
28519
  const isChecked = (String(el.value) === String(value));
28517
28520
  if (el.checked !== isChecked) bChanged = true;
@@ -55180,7 +55183,7 @@ class nxEditor extends nxDiv {
55180
55183
 
55181
55184
  constructor() {
55182
55185
  super();
55183
- this.attachShadow({ mode: 'open' });
55186
+ //this.attachShadow({ mode: 'open' });
55184
55187
  }
55185
55188
 
55186
55189
  connectedCallback() {
@@ -55190,26 +55193,18 @@ class nxEditor extends nxDiv {
55190
55193
  }
55191
55194
  }
55192
55195
 
55196
+ get value() {
55197
+ return this.#editor.getHTML();
55198
+ }
55199
+ set value(v) {
55200
+ this.#editor.commands.setContent(v || "", false);
55201
+ }
55202
+
55193
55203
  #render() {
55194
55204
  this.shadowRoot.innerHTML = `
55195
55205
  <style>
55196
55206
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
55197
55207
  ${ninegrid.getCustomPath(this,"nxEditor.css")}
55198
-
55199
- :host { display: block; border: 1px solid #ddd; border-radius: 4px; background: white; }
55200
- .menu-bar { background: #f8f9fa; padding: 5px; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 4px; }
55201
- .menu-bar button, .menu-bar input[type="color"] {
55202
- padding: 4px 8px; cursor: pointer; border: 1px solid #dee2e6; background: white; border-radius: 3px; font-size: 12px;
55203
- }
55204
- .menu-bar button:hover { background: #e9ecef; }
55205
- .menu-bar button.is-active { background: #007bff; color: white; border-color: #007bff; }
55206
-
55207
- .tiptap { padding: 15px; min-height: 250px; outline: none; }
55208
- .tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
55209
- /* 정렬 스타일 적용 */
55210
- .tiptap [style*="text-align: left"] { text-align: left; }
55211
- .tiptap [style*="text-align: center"] { text-align: center; }
55212
- .tiptap [style*="text-align: right"] { text-align: right; }
55213
55208
  </style>
55214
55209
 
55215
55210
  <div class="menu-bar">
package/dist/bundle.esm.js CHANGED
@@ -28507,7 +28507,10 @@ class nxDiv extends HTMLElement {
28507
28507
  if (!key || !jsonData.hasOwnProperty(key)) return;
28508
28508
 
28509
28509
  const value = jsonData[key];
28510
- if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
28510
+
28511
+ const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
28512
+
28513
+ if (inputTags.includes(el.tagName)) {
28511
28514
  if (el.type === "checkbox" || el.type === "radio") {
28512
28515
  const isChecked = (String(el.value) === String(value));
28513
28516
  if (el.checked !== isChecked) bChanged = true;
@@ -55176,7 +55179,7 @@ class nxEditor extends nxDiv {
55176
55179
 
55177
55180
  constructor() {
55178
55181
  super();
55179
- this.attachShadow({ mode: 'open' });
55182
+ //this.attachShadow({ mode: 'open' });
55180
55183
  }
55181
55184
 
55182
55185
  connectedCallback() {
@@ -55186,26 +55189,18 @@ class nxEditor extends nxDiv {
55186
55189
  }
55187
55190
  }
55188
55191
 
55192
+ get value() {
55193
+ return this.#editor.getHTML();
55194
+ }
55195
+ set value(v) {
55196
+ this.#editor.commands.setContent(v || "", false);
55197
+ }
55198
+
55189
55199
  #render() {
55190
55200
  this.shadowRoot.innerHTML = `
55191
55201
  <style>
55192
55202
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
55193
55203
  ${ninegrid.getCustomPath(this,"nxEditor.css")}
55194
-
55195
- :host { display: block; border: 1px solid #ddd; border-radius: 4px; background: white; }
55196
- .menu-bar { background: #f8f9fa; padding: 5px; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 4px; }
55197
- .menu-bar button, .menu-bar input[type="color"] {
55198
- padding: 4px 8px; cursor: pointer; border: 1px solid #dee2e6; background: white; border-radius: 3px; font-size: 12px;
55199
- }
55200
- .menu-bar button:hover { background: #e9ecef; }
55201
- .menu-bar button.is-active { background: #007bff; color: white; border-color: #007bff; }
55202
-
55203
- .tiptap { padding: 15px; min-height: 250px; outline: none; }
55204
- .tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
55205
- /* 정렬 스타일 적용 */
55206
- .tiptap [style*="text-align: left"] { text-align: left; }
55207
- .tiptap [style*="text-align: center"] { text-align: center; }
55208
- .tiptap [style*="text-align: right"] { text-align: right; }
55209
55204
  </style>
55210
55205
 
55211
55206
  <div class="menu-bar">
package/dist/nx/_nxDiv.js CHANGED
@@ -78,7 +78,10 @@ export class nxDiv extends HTMLElement {
78
78
  if (!key || !jsonData.hasOwnProperty(key)) return;
79
79
 
80
80
  const value = jsonData[key];
81
- if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
81
+
82
+ const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
83
+
84
+ if (inputTags.includes(el.tagName)) {
82
85
  if (el.type === "checkbox" || el.type === "radio") {
83
86
  const isChecked = (String(el.value) === String(value));
84
87
  if (el.checked !== isChecked) bChanged = true;
package/dist/nx/nxEditor.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import ninegrid from "../index.js";
2
2
  import { nxDiv } from "./_nxDiv.js";
3
+
3
4
  import { Editor } from '@tiptap/core';
4
5
  import StarterKit from '@tiptap/starter-kit';
5
-
6
- // 추가 옵션들 임포트
7
- // 수정 전: import TextStyle from '@tiptap/extension-text-style';
8
- // 수정 후:
9
6
  import { TextStyle } from '@tiptap/extension-text-style';
10
7
  import { Color } from '@tiptap/extension-color';
11
8
  import { Highlight } from '@tiptap/extension-highlight';
@@ -19,7 +16,7 @@ class nxEditor extends nxDiv {
19
16
 
20
17
  constructor() {
21
18
  super();
22
- this.attachShadow({ mode: 'open' });
19
+ //this.attachShadow({ mode: 'open' });
23
20
  }
24
21
 
25
22
  connectedCallback() {
@@ -29,26 +26,18 @@ class nxEditor extends nxDiv {
29
26
  }
30
27
  }
31
28
 
29
+ get value() {
30
+ return this.#editor.getHTML();
31
+ }
32
+ set value(v) {
33
+ this.#editor.commands.setContent(v || "", false);
34
+ }
35
+
32
36
  #render() {
33
37
  this.shadowRoot.innerHTML = `
34
38
  <style>
35
39
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
36
40
  ${ninegrid.getCustomPath(this,"nxEditor.css")}
37
-
38
- :host { display: block; border: 1px solid #ddd; border-radius: 4px; background: white; }
39
- .menu-bar { background: #f8f9fa; padding: 5px; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 4px; }
40
- .menu-bar button, .menu-bar input[type="color"] {
41
- padding: 4px 8px; cursor: pointer; border: 1px solid #dee2e6; background: white; border-radius: 3px; font-size: 12px;
42
- }
43
- .menu-bar button:hover { background: #e9ecef; }
44
- .menu-bar button.is-active { background: #007bff; color: white; border-color: #007bff; }
45
-
46
- .tiptap { padding: 15px; min-height: 250px; outline: none; }
47
- .tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
48
- /* 정렬 스타일 적용 */
49
- .tiptap [style*="text-align: left"] { text-align: left; }
50
- .tiptap [style*="text-align: center"] { text-align: center; }
51
- .tiptap [style*="text-align: right"] { text-align: right; }
52
41
  </style>
53
42
 
54
43
  <div class="menu-bar">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1316.0",
4
+ "version": "6.1318.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/_nxDiv.js CHANGED
@@ -78,7 +78,10 @@ export class nxDiv extends HTMLElement {
78
78
  if (!key || !jsonData.hasOwnProperty(key)) return;
79
79
 
80
80
  const value = jsonData[key];
81
- if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
81
+
82
+ const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
83
+
84
+ if (inputTags.includes(el.tagName)) {
82
85
  if (el.type === "checkbox" || el.type === "radio") {
83
86
  const isChecked = (String(el.value) === String(value));
84
87
  if (el.checked !== isChecked) bChanged = true;
package/src/nx/nxEditor.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import ninegrid from "../index.js";
2
2
  import { nxDiv } from "./_nxDiv.js";
3
+
3
4
  import { Editor } from '@tiptap/core';
4
5
  import StarterKit from '@tiptap/starter-kit';
5
-
6
- // 추가 옵션들 임포트
7
- // 수정 전: import TextStyle from '@tiptap/extension-text-style';
8
- // 수정 후:
9
6
  import { TextStyle } from '@tiptap/extension-text-style';
10
7
  import { Color } from '@tiptap/extension-color';
11
8
  import { Highlight } from '@tiptap/extension-highlight';
@@ -19,7 +16,7 @@ class nxEditor extends nxDiv {
19
16
 
20
17
  constructor() {
21
18
  super();
22
- this.attachShadow({ mode: 'open' });
19
+ //this.attachShadow({ mode: 'open' });
23
20
  }
24
21
 
25
22
  connectedCallback() {
@@ -29,26 +26,18 @@ class nxEditor extends nxDiv {
29
26
  }
30
27
  }
31
28
 
29
+ get value() {
30
+ return this.#editor.getHTML();
31
+ }
32
+ set value(v) {
33
+ this.#editor.commands.setContent(v || "", false);
34
+ }
35
+
32
36
  #render() {
33
37
  this.shadowRoot.innerHTML = `
34
38
  <style>
35
39
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
36
40
  ${ninegrid.getCustomPath(this,"nxEditor.css")}
37
-
38
- :host { display: block; border: 1px solid #ddd; border-radius: 4px; background: white; }
39
- .menu-bar { background: #f8f9fa; padding: 5px; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 4px; }
40
- .menu-bar button, .menu-bar input[type="color"] {
41
- padding: 4px 8px; cursor: pointer; border: 1px solid #dee2e6; background: white; border-radius: 3px; font-size: 12px;
42
- }
43
- .menu-bar button:hover { background: #e9ecef; }
44
- .menu-bar button.is-active { background: #007bff; color: white; border-color: #007bff; }
45
-
46
- .tiptap { padding: 15px; min-height: 250px; outline: none; }
47
- .tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
48
- /* 정렬 스타일 적용 */
49
- .tiptap [style*="text-align: left"] { text-align: left; }
50
- .tiptap [style*="text-align: center"] { text-align: center; }
51
- .tiptap [style*="text-align: right"] { text-align: right; }
52
41
  </style>
53
42
 
54
43
  <div class="menu-bar">