ninegrid2 6.1328.0 → 6.1330.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 (5) hide show
  1. package/dist/bundle.cjs.js +19 -1
  2. package/dist/bundle.esm.js +19 -1
  3. package/dist/nx/nxEditor.js +19 -1
  4. package/package.json +1 -1
  5. package/src/nx/nxEditor.js +19 -1
package/dist/bundle.cjs.js CHANGED
@@ -55267,6 +55267,15 @@ class nxEditor extends nxDiv {
55267
55267
  <button type="button" data-cmd="underline"><u>U</u></button>
55268
55268
  <button type="button" data-cmd="strike">S</button>
55269
55269
 
55270
+ <select id="font-size">
55271
+ <option value="12px">12px</option>
55272
+ <option value="14px" selected>14px</option>
55273
+ <option value="16px">16px</option>
55274
+ <option value="18px">18px</option>
55275
+ <option value="24px">24px</option>
55276
+ <option value="32px">32px</option>
55277
+ </select>
55278
+
55270
55279
  <input type="color" id="color-picker" title="Text Color">
55271
55280
  <button type="button" data-cmd="highlight">Highlight</button>
55272
55281
 
@@ -55285,6 +55294,14 @@ class nxEditor extends nxDiv {
55285
55294
  <div id="editor-container"></div>
55286
55295
  `;
55287
55296
  this.#container = this.shadowRoot.querySelector('#editor-container');
55297
+
55298
+ this.shadowRoot.querySelector('#font-size').onchange = (e) => {
55299
+ const size = e.target.value;
55300
+
55301
+ console.log(e.target, size);
55302
+ // Tiptap의 chain을 사용하여 스타일 적용
55303
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
55304
+ };
55288
55305
  }
55289
55306
 
55290
55307
  #initEditor() {
@@ -55295,11 +55312,12 @@ class nxEditor extends nxDiv {
55295
55312
  Underline,
55296
55313
  TextStyle,
55297
55314
  Color,
55315
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
55298
55316
  Highlight.configure({ multicolor: true }),
55299
55317
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55300
55318
  Image.configure({ inline: true, allowBase64: true }),
55301
55319
  ],
55302
- content: this.#tempValue || '',
55320
+ content: this.#tempValue || this.originContents || '',
55303
55321
  onUpdate: ({ editor }) => {
55304
55322
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55305
55323
  },
package/dist/bundle.esm.js CHANGED
@@ -55263,6 +55263,15 @@ class nxEditor extends nxDiv {
55263
55263
  <button type="button" data-cmd="underline"><u>U</u></button>
55264
55264
  <button type="button" data-cmd="strike">S</button>
55265
55265
 
55266
+ <select id="font-size">
55267
+ <option value="12px">12px</option>
55268
+ <option value="14px" selected>14px</option>
55269
+ <option value="16px">16px</option>
55270
+ <option value="18px">18px</option>
55271
+ <option value="24px">24px</option>
55272
+ <option value="32px">32px</option>
55273
+ </select>
55274
+
55266
55275
  <input type="color" id="color-picker" title="Text Color">
55267
55276
  <button type="button" data-cmd="highlight">Highlight</button>
55268
55277
 
@@ -55281,6 +55290,14 @@ class nxEditor extends nxDiv {
55281
55290
  <div id="editor-container"></div>
55282
55291
  `;
55283
55292
  this.#container = this.shadowRoot.querySelector('#editor-container');
55293
+
55294
+ this.shadowRoot.querySelector('#font-size').onchange = (e) => {
55295
+ const size = e.target.value;
55296
+
55297
+ console.log(e.target, size);
55298
+ // Tiptap의 chain을 사용하여 스타일 적용
55299
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
55300
+ };
55284
55301
  }
55285
55302
 
55286
55303
  #initEditor() {
@@ -55291,11 +55308,12 @@ class nxEditor extends nxDiv {
55291
55308
  Underline,
55292
55309
  TextStyle,
55293
55310
  Color,
55311
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
55294
55312
  Highlight.configure({ multicolor: true }),
55295
55313
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55296
55314
  Image.configure({ inline: true, allowBase64: true }),
55297
55315
  ],
55298
- content: this.#tempValue || '',
55316
+ content: this.#tempValue || this.originContents || '',
55299
55317
  onUpdate: ({ editor }) => {
55300
55318
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55301
55319
  },
package/dist/nx/nxEditor.js CHANGED
@@ -79,6 +79,15 @@ class nxEditor extends nxDiv {
79
79
  <button type="button" data-cmd="underline"><u>U</u></button>
80
80
  <button type="button" data-cmd="strike">S</button>
81
81
 
82
+ <select id="font-size">
83
+ <option value="12px">12px</option>
84
+ <option value="14px" selected>14px</option>
85
+ <option value="16px">16px</option>
86
+ <option value="18px">18px</option>
87
+ <option value="24px">24px</option>
88
+ <option value="32px">32px</option>
89
+ </select>
90
+
82
91
  <input type="color" id="color-picker" title="Text Color">
83
92
  <button type="button" data-cmd="highlight">Highlight</button>
84
93
 
@@ -97,6 +106,14 @@ class nxEditor extends nxDiv {
97
106
  <div id="editor-container"></div>
98
107
  `;
99
108
  this.#container = this.shadowRoot.querySelector('#editor-container');
109
+
110
+ this.shadowRoot.querySelector('#font-size').onchange = (e) => {
111
+ const size = e.target.value;
112
+
113
+ console.log(e.target, size);
114
+ // Tiptap의 chain을 사용하여 스타일 적용
115
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
116
+ };
100
117
  }
101
118
 
102
119
  #initEditor() {
@@ -107,11 +124,12 @@ class nxEditor extends nxDiv {
107
124
  Underline,
108
125
  TextStyle,
109
126
  Color,
127
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
110
128
  Highlight.configure({ multicolor: true }),
111
129
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
130
  Image.configure({ inline: true, allowBase64: true }),
113
131
  ],
114
- content: this.#tempValue || '',
132
+ content: this.#tempValue || this.originContents || '',
115
133
  onUpdate: ({ editor }) => {
116
134
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
135
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1328.0",
4
+ "version": "6.1330.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxEditor.js CHANGED
@@ -79,6 +79,15 @@ class nxEditor extends nxDiv {
79
79
  <button type="button" data-cmd="underline"><u>U</u></button>
80
80
  <button type="button" data-cmd="strike">S</button>
81
81
 
82
+ <select id="font-size">
83
+ <option value="12px">12px</option>
84
+ <option value="14px" selected>14px</option>
85
+ <option value="16px">16px</option>
86
+ <option value="18px">18px</option>
87
+ <option value="24px">24px</option>
88
+ <option value="32px">32px</option>
89
+ </select>
90
+
82
91
  <input type="color" id="color-picker" title="Text Color">
83
92
  <button type="button" data-cmd="highlight">Highlight</button>
84
93
 
@@ -97,6 +106,14 @@ class nxEditor extends nxDiv {
97
106
  <div id="editor-container"></div>
98
107
  `;
99
108
  this.#container = this.shadowRoot.querySelector('#editor-container');
109
+
110
+ this.shadowRoot.querySelector('#font-size').onchange = (e) => {
111
+ const size = e.target.value;
112
+
113
+ console.log(e.target, size);
114
+ // Tiptap의 chain을 사용하여 스타일 적용
115
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
116
+ };
100
117
  }
101
118
 
102
119
  #initEditor() {
@@ -107,11 +124,12 @@ class nxEditor extends nxDiv {
107
124
  Underline,
108
125
  TextStyle,
109
126
  Color,
127
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
110
128
  Highlight.configure({ multicolor: true }),
111
129
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
130
  Image.configure({ inline: true, allowBase64: true }),
113
131
  ],
114
- content: this.#tempValue || '',
132
+ content: this.#tempValue || this.originContents || '',
115
133
  onUpdate: ({ editor }) => {
116
134
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
135
  },