ninegrid2 6.1393.0 → 6.1395.0

package/dist/bundle.cjs.js

@@ -28593,14 +28593,12 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }
 
@@ -28638,10 +28636,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28900,7 +28898,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28918,8 +28916,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -28927,10 +28923,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -55221,6 +55217,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -55263,6 +55261,34 @@ class nxEditor extends nxDiv {
 		this.setAttribute("name", v);
 	}
 
+	// 1. readonly getter/setter 추가
+	get readonly() {
+		return this.hasAttribute("readonly");
+	}
+	set readonly(v) {
+		if (v) {
+			this.setAttribute("readonly", "");
+		} else {
+			this.removeAttribute("readonly");
+		}
+		this.#updateEditable();
+	}
+
+	// 2. 에디터 상태 업데이트 로직 분리
+	#updateEditable() {
+		if (this.#editor) {
+			const isReadonly = this.readonly;
+			// Tiptap 에디터 편집 가능 여부 설정
+			this.#editor.setEditable(!isReadonly);
+
+			// 메뉴바 보이기/숨기기 제어
+			const menuBar = this.shadowRoot.querySelector('.menu-bar');
+			if (menuBar) {
+				menuBar.style.display = isReadonly ? 'none' : 'flex';
+			}
+		}
+	}
+
 	#render() {
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -55316,6 +55342,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				index_default,
 				Underline,
@@ -55345,7 +55372,8 @@ class nxEditor extends nxDiv {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
 			},
 			onSelectionUpdate: ({ editor }) => {
-				this.#updateMenuState(editor);
+				// 5. readonly가 아닐 때만 메뉴 상태 업데이트 (성능 최적화)
+				if (!this.readonly) this.#updateMenuState(editor);
 			},
 		});
 

package/dist/bundle.esm.js

@@ -28589,14 +28589,12 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }
 
@@ -28634,10 +28632,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28896,7 +28894,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28914,8 +28912,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -28923,10 +28919,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -55217,6 +55213,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -55259,6 +55257,34 @@ class nxEditor extends nxDiv {
 		this.setAttribute("name", v);
 	}
 
+	// 1. readonly getter/setter 추가
+	get readonly() {
+		return this.hasAttribute("readonly");
+	}
+	set readonly(v) {
+		if (v) {
+			this.setAttribute("readonly", "");
+		} else {
+			this.removeAttribute("readonly");
+		}
+		this.#updateEditable();
+	}
+
+	// 2. 에디터 상태 업데이트 로직 분리
+	#updateEditable() {
+		if (this.#editor) {
+			const isReadonly = this.readonly;
+			// Tiptap 에디터 편집 가능 여부 설정
+			this.#editor.setEditable(!isReadonly);
+
+			// 메뉴바 보이기/숨기기 제어
+			const menuBar = this.shadowRoot.querySelector('.menu-bar');
+			if (menuBar) {
+				menuBar.style.display = isReadonly ? 'none' : 'flex';
+			}
+		}
+	}
+
 	#render() {
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -55312,6 +55338,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				index_default,
 				Underline,
@@ -55341,7 +55368,8 @@ class nxEditor extends nxDiv {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
 			},
 			onSelectionUpdate: ({ editor }) => {
-				this.#updateMenuState(editor);
+				// 5. readonly가 아닐 때만 메뉴 상태 업데이트 (성능 최적화)
+				if (!this.readonly) this.#updateMenuState(editor);
 			},
 		});
 

package/dist/nx/_nxDiv.js

@@ -160,13 +160,11 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }

package/dist/nx/nxButtons.js

@@ -13,8 +13,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,10 +20,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/nxEditor.js

@@ -24,6 +24,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -66,6 +68,34 @@ class nxEditor extends nxDiv {
 		this.setAttribute("name", v);
 	}
 
+	// 1. readonly getter/setter 추가
+	get readonly() {
+		return this.hasAttribute("readonly");
+	}
+	set readonly(v) {
+		if (v) {
+			this.setAttribute("readonly", "");
+		} else {
+			this.removeAttribute("readonly");
+		}
+		this.#updateEditable();
+	}
+
+	// 2. 에디터 상태 업데이트 로직 분리
+	#updateEditable() {
+		if (this.#editor) {
+			const isReadonly = this.readonly;
+			// Tiptap 에디터 편집 가능 여부 설정
+			this.#editor.setEditable(!isReadonly);
+
+			// 메뉴바 보이기/숨기기 제어
+			const menuBar = this.shadowRoot.querySelector('.menu-bar');
+			if (menuBar) {
+				menuBar.style.display = isReadonly ? 'none' : 'flex';
+			}
+		}
+	}
+
 	#render() {
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -119,6 +149,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				StarterKit,
 				Underline,
@@ -148,7 +179,8 @@ class nxEditor extends nxDiv {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
 			},
 			onSelectionUpdate: ({ editor }) => {
-				this.#updateMenuState(editor);
+				// 5. readonly가 아닐 때만 메뉴 상태 업데이트 (성능 최적화)
+				if (!this.readonly) this.#updateMenuState(editor);
 			},
 		});
 

package/dist/nx/nxPanel.js

@@ -33,7 +33,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/nxTitle2.js

@@ -35,10 +35,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/package.json

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

package/src/nx/_nxDiv.js

@@ -160,13 +160,11 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }

package/src/nx/nxButtons.js

@@ -13,8 +13,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,10 +20,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/src/nx/nxEditor.js

@@ -24,6 +24,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -66,6 +68,34 @@ class nxEditor extends nxDiv {
 		this.setAttribute("name", v);
 	}
 
+	// 1. readonly getter/setter 추가
+	get readonly() {
+		return this.hasAttribute("readonly");
+	}
+	set readonly(v) {
+		if (v) {
+			this.setAttribute("readonly", "");
+		} else {
+			this.removeAttribute("readonly");
+		}
+		this.#updateEditable();
+	}
+
+	// 2. 에디터 상태 업데이트 로직 분리
+	#updateEditable() {
+		if (this.#editor) {
+			const isReadonly = this.readonly;
+			// Tiptap 에디터 편집 가능 여부 설정
+			this.#editor.setEditable(!isReadonly);
+
+			// 메뉴바 보이기/숨기기 제어
+			const menuBar = this.shadowRoot.querySelector('.menu-bar');
+			if (menuBar) {
+				menuBar.style.display = isReadonly ? 'none' : 'flex';
+			}
+		}
+	}
+
 	#render() {
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -119,6 +149,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				StarterKit,
 				Underline,
@@ -148,7 +179,8 @@ class nxEditor extends nxDiv {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
 			},
 			onSelectionUpdate: ({ editor }) => {
-				this.#updateMenuState(editor);
+				// 5. readonly가 아닐 때만 메뉴 상태 업데이트 (성능 최적화)
+				if (!this.readonly) this.#updateMenuState(editor);
 			},
 		});
 

package/src/nx/nxPanel.js

@@ -33,7 +33,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/src/nx/nxTitle2.js

@@ -35,10 +35,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }