ninegrid2 6.1335.0 → 6.1338.0

package/dist/bundle.cjs.js

@@ -55344,25 +55344,30 @@ class nxEditor extends nxDiv {
 	}
 
 	#updateMenuState(editor) {
+		// 1. 일반 커맨드 버튼 상태 업데이트
 		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
 			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
 			else btn.classList.remove('is-active');
 		});
 
+		// 2. 정렬 상태 업데이트
 		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');
 		});
 
-		// 현재 선택 영역의 폰트 사이즈를 가져와 셀렉트 박스에 반영
-		const fontSize = editor.getAttributes('textStyle').fontSize;
-		console.log(fontSize);
+		// 3. 폰트 사이즈 업데이트
+		const attrs = editor.getAttributes('textStyle');
 		const select = this.shadowRoot.querySelector('#font-size');
-		console.log(select);
-		if (fontSize) {
-			select.value = fontSize;
-		} else {
-			select.value = '14px'; // 기본값
+		if (select) {
+			select.value = attrs.fontSize || '14px'; // 값이 없으면 기본값
+		}
+
+		// 4. 글자 색상 업데이트 (추가된 부분)
+		const colorPicker = this.shadowRoot.querySelector('#color-picker');
+		if (colorPicker) {
+			// Tiptap에서 가져온 색상값이 있으면 적용, 없으면 기본 검정색(#000000)
+			colorPicker.value = attrs.color || '#000000';
 		}
 	}
 

package/dist/bundle.esm.js

@@ -55340,25 +55340,30 @@ class nxEditor extends nxDiv {
 	}
 
 	#updateMenuState(editor) {
+		// 1. 일반 커맨드 버튼 상태 업데이트
 		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
 			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
 			else btn.classList.remove('is-active');
 		});
 
+		// 2. 정렬 상태 업데이트
 		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');
 		});
 
-		// 현재 선택 영역의 폰트 사이즈를 가져와 셀렉트 박스에 반영
-		const fontSize = editor.getAttributes('textStyle').fontSize;
-		console.log(fontSize);
+		// 3. 폰트 사이즈 업데이트
+		const attrs = editor.getAttributes('textStyle');
 		const select = this.shadowRoot.querySelector('#font-size');
-		console.log(select);
-		if (fontSize) {
-			select.value = fontSize;
-		} else {
-			select.value = '14px'; // 기본값
+		if (select) {
+			select.value = attrs.fontSize || '14px'; // 값이 없으면 기본값
+		}
+
+		// 4. 글자 색상 업데이트 (추가된 부분)
+		const colorPicker = this.shadowRoot.querySelector('#color-picker');
+		if (colorPicker) {
+			// Tiptap에서 가져온 색상값이 있으면 적용, 없으면 기본 검정색(#000000)
+			colorPicker.value = attrs.color || '#000000';
 		}
 	}
 

package/dist/nx/nxEditor.js

@@ -156,25 +156,30 @@ class nxEditor extends nxDiv {
 	}
 
 	#updateMenuState(editor) {
+		// 1. 일반 커맨드 버튼 상태 업데이트
 		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
 			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
 			else btn.classList.remove('is-active');
 		});
 
+		// 2. 정렬 상태 업데이트
 		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');
 		});
 
-		// 현재 선택 영역의 폰트 사이즈를 가져와 셀렉트 박스에 반영
-		const fontSize = editor.getAttributes('textStyle').fontSize;
-		console.log(fontSize);
+		// 3. 폰트 사이즈 업데이트
+		const attrs = editor.getAttributes('textStyle');
 		const select = this.shadowRoot.querySelector('#font-size');
-		console.log(select);
-		if (fontSize) {
-			select.value = fontSize;
-		} else {
-			select.value = '14px'; // 기본값
+		if (select) {
+			select.value = attrs.fontSize || '14px'; // 값이 없으면 기본값
+		}
+
+		// 4. 글자 색상 업데이트 (추가된 부분)
+		const colorPicker = this.shadowRoot.querySelector('#color-picker');
+		if (colorPicker) {
+			// Tiptap에서 가져온 색상값이 있으면 적용, 없으면 기본 검정색(#000000)
+			colorPicker.value = attrs.color || '#000000';
 		}
 	}
 

package/package.json

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

package/src/nx/nxEditor.js

@@ -156,25 +156,30 @@ class nxEditor extends nxDiv {
 	}
 
 	#updateMenuState(editor) {
+		// 1. 일반 커맨드 버튼 상태 업데이트
 		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
 			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
 			else btn.classList.remove('is-active');
 		});
 
+		// 2. 정렬 상태 업데이트
 		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');
 		});
 
-		// 현재 선택 영역의 폰트 사이즈를 가져와 셀렉트 박스에 반영
-		const fontSize = editor.getAttributes('textStyle').fontSize;
-		console.log(fontSize);
+		// 3. 폰트 사이즈 업데이트
+		const attrs = editor.getAttributes('textStyle');
 		const select = this.shadowRoot.querySelector('#font-size');
-		console.log(select);
-		if (fontSize) {
-			select.value = fontSize;
-		} else {
-			select.value = '14px'; // 기본값
+		if (select) {
+			select.value = attrs.fontSize || '14px'; // 값이 없으면 기본값
+		}
+
+		// 4. 글자 색상 업데이트 (추가된 부분)
+		const colorPicker = this.shadowRoot.querySelector('#color-picker');
+		if (colorPicker) {
+			// Tiptap에서 가져온 색상값이 있으면 적용, 없으면 기본 검정색(#000000)
+			colorPicker.value = attrs.color || '#000000';
 		}
 	}