ninegrid2 6.1327.0 → 6.1328.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 -2
  2. package/dist/bundle.esm.js +17 -2
  3. package/dist/nx/nxEditor.js +17 -2
  4. package/package.json +1 -1
  5. package/src/nx/nxEditor.js +17 -2
package/dist/bundle.cjs.js CHANGED
@@ -55299,15 +55299,30 @@ class nxEditor extends nxDiv {
55299
55299
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55300
55300
  Image.configure({ inline: true, allowBase64: true }),
55301
55301
  ],
55302
- content: this.originContents || '',
55302
+ content: this.#tempValue || '',
55303
55303
  onUpdate: ({ editor }) => {
55304
55304
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55305
- }
55305
+ },
55306
+ onSelectionUpdate: ({ editor }) => {
55307
+ this.#updateMenuState(editor);
55308
+ },
55306
55309
  });
55307
55310
 
55308
55311
  this.#bindEvents();
55309
55312
  }
55310
55313
 
55314
+ #updateMenuState(editor) {
55315
+ this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
55316
+ if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
55317
+ else btn.classList.remove('is-active');
55318
+ });
55319
+
55320
+ this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
55321
+ if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
55322
+ else btn.classList.remove('is-active');
55323
+ });
55324
+ }
55325
+
55311
55326
  #bindEvents() {
55312
55327
  const editor = this.#editor;
55313
55328
 
package/dist/bundle.esm.js CHANGED
@@ -55295,15 +55295,30 @@ class nxEditor extends nxDiv {
55295
55295
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
55296
55296
  Image.configure({ inline: true, allowBase64: true }),
55297
55297
  ],
55298
- content: this.originContents || '',
55298
+ content: this.#tempValue || '',
55299
55299
  onUpdate: ({ editor }) => {
55300
55300
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
55301
- }
55301
+ },
55302
+ onSelectionUpdate: ({ editor }) => {
55303
+ this.#updateMenuState(editor);
55304
+ },
55302
55305
  });
55303
55306
 
55304
55307
  this.#bindEvents();
55305
55308
  }
55306
55309
 
55310
+ #updateMenuState(editor) {
55311
+ this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
55312
+ if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
55313
+ else btn.classList.remove('is-active');
55314
+ });
55315
+
55316
+ this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
55317
+ if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
55318
+ else btn.classList.remove('is-active');
55319
+ });
55320
+ }
55321
+
55307
55322
  #bindEvents() {
55308
55323
  const editor = this.#editor;
55309
55324
 
package/dist/nx/nxEditor.js CHANGED
@@ -111,15 +111,30 @@ class nxEditor extends nxDiv {
111
111
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
112
  Image.configure({ inline: true, allowBase64: true }),
113
113
  ],
114
- content: this.originContents || '',
114
+ content: this.#tempValue || '',
115
115
  onUpdate: ({ editor }) => {
116
116
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
- }
117
+ },
118
+ onSelectionUpdate: ({ editor }) => {
119
+ this.#updateMenuState(editor);
120
+ },
118
121
  });
119
122
 
120
123
  this.#bindEvents();
121
124
  }
122
125
 
126
+ #updateMenuState(editor) {
127
+ this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
128
+ if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
129
+ else btn.classList.remove('is-active');
130
+ });
131
+
132
+ this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
133
+ if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
134
+ else btn.classList.remove('is-active');
135
+ });
136
+ }
137
+
123
138
  #bindEvents() {
124
139
  const editor = this.#editor;
125
140
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1327.0",
4
+ "version": "6.1328.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxEditor.js CHANGED
@@ -111,15 +111,30 @@ class nxEditor extends nxDiv {
111
111
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
112
112
  Image.configure({ inline: true, allowBase64: true }),
113
113
  ],
114
- content: this.originContents || '',
114
+ content: this.#tempValue || '',
115
115
  onUpdate: ({ editor }) => {
116
116
  this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
117
- }
117
+ },
118
+ onSelectionUpdate: ({ editor }) => {
119
+ this.#updateMenuState(editor);
120
+ },
118
121
  });
119
122
 
120
123
  this.#bindEvents();
121
124
  }
122
125
 
126
+ #updateMenuState(editor) {
127
+ this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
128
+ if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
129
+ else btn.classList.remove('is-active');
130
+ });
131
+
132
+ this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
133
+ if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
134
+ else btn.classList.remove('is-active');
135
+ });
136
+ }
137
+
123
138
  #bindEvents() {
124
139
  const editor = this.#editor;
125
140