ninegrid2 6.1391.0 → 6.1394.0

package/dist/bundle.cjs.js

@@ -55221,6 +55221,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -55263,6 +55265,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 +55346,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				index_default,
 				Underline,
@@ -55345,7 +55376,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

@@ -55217,6 +55217,8 @@ class nxEditor extends nxDiv {
 		if (super.connectedCallback()) {
 			this.#render();
 			this.#initEditor();
+			// 3. 초기 로드 시 readonly 상태 적용
+			this.#updateEditable();
 		}
 	}
 
@@ -55259,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>
@@ -55312,6 +55342,7 @@ class nxEditor extends nxDiv {
 	#initEditor() {
 		this.#editor = new Editor({
 			element: this.#container,
+			editable: !this.readonly, // 4. 생성 시 readonly 여부 반영
 			extensions: [
 				index_default,
 				Underline,
@@ -55341,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/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/package.json

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

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);
 			},
 		});