ninegrid2 6.1327.0 → 6.1329.0

package/dist/bundle.cjs.js

@@ -55267,6 +55267,15 @@ class nxEditor extends nxDiv {
              <button type="button" data-cmd="underline"><u>U</u></button>
              <button type="button" data-cmd="strike">S</button>
              
+             <select id="font-size">
+      <option value="12px">12px</option>
+      <option value="14px" selected>14px</option>
+      <option value="16px">16px</option>
+      <option value="18px">18px</option>
+      <option value="24px">24px</option>
+      <option value="32px">32px</option>
+   </select>
+   
              <input type="color" id="color-picker" title="Text Color">
              <button type="button" data-cmd="highlight">Highlight</button>
              
@@ -55285,6 +55294,12 @@ class nxEditor extends nxDiv {
           <div id="editor-container"></div>
         `;
 		this.#container = this.shadowRoot.querySelector('#editor-container');
+
+		this.shadowRoot.querySelector('#font-size').onchange = (e) => {
+			const size = e.target.value;
+			// Tiptap의 chain을 사용하여 스타일 적용
+			this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+		};
 	}
 
 	#initEditor() {
@@ -55295,19 +55310,35 @@ class nxEditor extends nxDiv {
 				Underline,
 				TextStyle,
 				Color,
+				TextStyle.configure({ types: [Highlight.name, Color.name] }),
 				Highlight.configure({ multicolor: true }),
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || this.originContents || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/dist/bundle.esm.js

@@ -55263,6 +55263,15 @@ class nxEditor extends nxDiv {
              <button type="button" data-cmd="underline"><u>U</u></button>
              <button type="button" data-cmd="strike">S</button>
              
+             <select id="font-size">
+      <option value="12px">12px</option>
+      <option value="14px" selected>14px</option>
+      <option value="16px">16px</option>
+      <option value="18px">18px</option>
+      <option value="24px">24px</option>
+      <option value="32px">32px</option>
+   </select>
+   
              <input type="color" id="color-picker" title="Text Color">
              <button type="button" data-cmd="highlight">Highlight</button>
              
@@ -55281,6 +55290,12 @@ class nxEditor extends nxDiv {
           <div id="editor-container"></div>
         `;
 		this.#container = this.shadowRoot.querySelector('#editor-container');
+
+		this.shadowRoot.querySelector('#font-size').onchange = (e) => {
+			const size = e.target.value;
+			// Tiptap의 chain을 사용하여 스타일 적용
+			this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+		};
 	}
 
 	#initEditor() {
@@ -55291,19 +55306,35 @@ class nxEditor extends nxDiv {
 				Underline,
 				TextStyle,
 				Color,
+				TextStyle.configure({ types: [Highlight.name, Color.name] }),
 				Highlight.configure({ multicolor: true }),
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || this.originContents || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/dist/nx/nxEditor.js

@@ -79,6 +79,15 @@ class nxEditor extends nxDiv {
              <button type="button" data-cmd="underline"><u>U</u></button>
              <button type="button" data-cmd="strike">S</button>
              
+             <select id="font-size">
+      <option value="12px">12px</option>
+      <option value="14px" selected>14px</option>
+      <option value="16px">16px</option>
+      <option value="18px">18px</option>
+      <option value="24px">24px</option>
+      <option value="32px">32px</option>
+   </select>
+   
              <input type="color" id="color-picker" title="Text Color">
              <button type="button" data-cmd="highlight">Highlight</button>
              
@@ -97,6 +106,12 @@ class nxEditor extends nxDiv {
           <div id="editor-container"></div>
         `;
 		this.#container = this.shadowRoot.querySelector('#editor-container');
+
+		this.shadowRoot.querySelector('#font-size').onchange = (e) => {
+			const size = e.target.value;
+			// Tiptap의 chain을 사용하여 스타일 적용
+			this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+		};
 	}
 
 	#initEditor() {
@@ -107,19 +122,35 @@ class nxEditor extends nxDiv {
 				Underline,
 				TextStyle,
 				Color,
+				TextStyle.configure({ types: [Highlight.name, Color.name] }),
 				Highlight.configure({ multicolor: true }),
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || this.originContents || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1327.0",
+  "version": "6.1329.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxEditor.js

@@ -79,6 +79,15 @@ class nxEditor extends nxDiv {
              <button type="button" data-cmd="underline"><u>U</u></button>
              <button type="button" data-cmd="strike">S</button>
              
+             <select id="font-size">
+      <option value="12px">12px</option>
+      <option value="14px" selected>14px</option>
+      <option value="16px">16px</option>
+      <option value="18px">18px</option>
+      <option value="24px">24px</option>
+      <option value="32px">32px</option>
+   </select>
+   
              <input type="color" id="color-picker" title="Text Color">
              <button type="button" data-cmd="highlight">Highlight</button>
              
@@ -97,6 +106,12 @@ class nxEditor extends nxDiv {
           <div id="editor-container"></div>
         `;
 		this.#container = this.shadowRoot.querySelector('#editor-container');
+
+		this.shadowRoot.querySelector('#font-size').onchange = (e) => {
+			const size = e.target.value;
+			// Tiptap의 chain을 사용하여 스타일 적용
+			this.#editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+		};
 	}
 
 	#initEditor() {
@@ -107,19 +122,35 @@ class nxEditor extends nxDiv {
 				Underline,
 				TextStyle,
 				Color,
+				TextStyle.configure({ types: [Highlight.name, Color.name] }),
 				Highlight.configure({ multicolor: true }),
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || this.originContents || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;