ninegrid2 6.1328.0 → 6.1329.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 +17 -1
  2. package/dist/bundle.esm.js +17 -1
  3. package/dist/nx/nxEditor.js +17 -1
  4. package/package.json +1 -1
  5. package/src/nx/nxEditor.js +17 -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,12 @@ 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
+ // Tiptap의 chain을 사용하여 스타일 적용
55301
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
55302
+ };
55288
55303
  }
55289
55304
 
55290
55305
  #initEditor() {
@@ -55295,11 +55310,12 @@ class nxEditor extends nxDiv {
55295
55310
  Underline,
55296
55311
  TextStyle,
55297
55312
  Color,
55313
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
55298
55314
  Highlight.configure({ multicolor: true }),
55299
55315
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55300
55316
  Image.configure({ inline: true, allowBase64: true }),
55301
55317
  ],
55302
- content: this.#tempValue || '',
55318
+ content: this.#tempValue || this.originContents || '',
55303
55319
  onUpdate: ({ editor }) => {
55304
55320
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55305
55321
  },
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,12 @@ 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
+ // Tiptap의 chain을 사용하여 스타일 적용
55297
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
55298
+ };
55284
55299
  }
55285
55300
 
55286
55301
  #initEditor() {
@@ -55291,11 +55306,12 @@ class nxEditor extends nxDiv {
55291
55306
  Underline,
55292
55307
  TextStyle,
55293
55308
  Color,
55309
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
55294
55310
  Highlight.configure({ multicolor: true }),
55295
55311
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55296
55312
  Image.configure({ inline: true, allowBase64: true }),
55297
55313
  ],
55298
- content: this.#tempValue || '',
55314
+ content: this.#tempValue || this.originContents || '',
55299
55315
  onUpdate: ({ editor }) => {
55300
55316
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55301
55317
  },
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,12 @@ 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
+ // Tiptap의 chain을 사용하여 스타일 적용
113
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
114
+ };
100
115
  }
101
116
 
102
117
  #initEditor() {
@@ -107,11 +122,12 @@ class nxEditor extends nxDiv {
107
122
  Underline,
108
123
  TextStyle,
109
124
  Color,
125
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
110
126
  Highlight.configure({ multicolor: true }),
111
127
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
128
  Image.configure({ inline: true, allowBase64: true }),
113
129
  ],
114
- content: this.#tempValue || '',
130
+ content: this.#tempValue || this.originContents || '',
115
131
  onUpdate: ({ editor }) => {
116
132
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
133
  },
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.1329.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,12 @@ 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
+ // Tiptap의 chain을 사용하여 스타일 적용
113
+ this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
114
+ };
100
115
  }
101
116
 
102
117
  #initEditor() {
@@ -107,11 +122,12 @@ class nxEditor extends nxDiv {
107
122
  Underline,
108
123
  TextStyle,
109
124
  Color,
125
+ TextStyle.configure({ types: [Highlight.name, Color.name] }),
110
126
  Highlight.configure({ multicolor: true }),
111
127
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
128
  Image.configure({ inline: true, allowBase64: true }),
113
129
  ],
114
- content: this.#tempValue || '',
130
+ content: this.#tempValue || this.originContents || '',
115
131
  onUpdate: ({ editor }) => {
116
132
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
133
  },