@innovastudio/contentbuilder 1.5.157 → 1.5.158

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.
package/index.d.ts CHANGED
@@ -331,5 +331,11 @@ declare class ContentBuilder {
331
331
 
332
332
  generateImage(prompt: string, callback?: () => void): void;
333
333
  openFilePicker(type?: string, callback?: () => void): void;
334
+ openColorPicker(
335
+ currentColor: string,
336
+ callback: (color: string) => void,
337
+ btn?: HTMLElement
338
+ ): void;
339
+ openIconPicker(callback: (iconHtml: string) => void): void;
334
340
  }
335
341
  export default ContentBuilder;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbuilder",
3
3
  "type": "module",
4
- "version": "1.5.157",
4
+ "version": "1.5.158",
5
5
  "description": "",
6
6
  "main": "public/contentbuilder/contentbuilder.esm.js",
7
7
  "types": "index.d.ts",
@@ -52603,6 +52603,10 @@ class Element$1 {
52603
52603
 
52604
52604
  // Set contentEditable FALSE on special elements
52605
52605
 
52606
+ const plugins = col.querySelectorAll('[data-cb-type]'); // plugins
52607
+ Array.prototype.forEach.call(plugins, plugin => {
52608
+ plugin.contentEditable = false;
52609
+ });
52606
52610
  let sociallinks = col.querySelectorAll('.is-social');
52607
52611
  Array.prototype.forEach.call(sociallinks, sociallink => {
52608
52612
  sociallink.contentEditable = false;
@@ -97180,6 +97184,143 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
97180
97184
  fromViewToActual(html) {
97181
97185
  return this.htmlutil.fromViewToActual(html);
97182
97186
  }
97187
+ openColorPicker(currentColor, callback, btn) {
97188
+ this.colorPicker.open(callback, currentColor, () => {}, btn);
97189
+ }
97190
+ openIconPicker(callback) {
97191
+ let iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
97192
+ if (!iconModal) {
97193
+ // Create modal with search input and event listeners once
97194
+ let html = `
97195
+ <style>
97196
+ .is-modal.iconselect .icon-search-wrapper {
97197
+ position: sticky;
97198
+ top: 0;
97199
+ background: white;
97200
+ padding: 20px;
97201
+ border-bottom: 1px solid #ddd;
97202
+ z-index: 10;
97203
+ }
97204
+ .is-modal.iconselect .icon-search {
97205
+ width: 100%;
97206
+ padding: 10px 15px;
97207
+ font-size: 16px;
97208
+ border: 1px solid #ccc;
97209
+ border-radius: 4px;
97210
+ box-sizing: border-box;
97211
+ }
97212
+ .is-modal.iconselect .icon-search:focus {
97213
+ outline: none;
97214
+ border-color: #007bff;
97215
+ }
97216
+ .is-modal.iconselect .icon-list {
97217
+ display: flex;
97218
+ gap: 10px;
97219
+ flex-flow: wrap;
97220
+ padding: 20px;
97221
+ }
97222
+ .is-modal.iconselect .icon-list > button {
97223
+ display: flex !important;
97224
+ width: 80px !important;
97225
+ height: 80px !important;
97226
+ flex: none;
97227
+ font-size: 30px !important;
97228
+ box-shadow: none !important;
97229
+ align-items: center;
97230
+ justify-content: center;
97231
+ }
97232
+ .is-modal.iconselect .icon-list > button.hidden {
97233
+ display: none !important;
97234
+ }
97235
+ .is-modal.iconselect .no-results {
97236
+ padding: 40px 20px;
97237
+ text-align: center;
97238
+ color: #666;
97239
+ display: none;
97240
+ }
97241
+ .is-modal.iconselect .no-results.show {
97242
+ display: block;
97243
+ }
97244
+ </style>
97245
+ <div class="is-modal iconselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
97246
+ <div class="is-modal-content scroll" style="width: 90vw; max-width: 908px; height: 70vh; min-height: 525px; padding: 0;">
97247
+ <div style="height: 100%; overflow-y: auto; display: flex; flex-direction: column;">
97248
+ <div class="icon-search-wrapper">
97249
+ <input type="text" class="icon-search" placeholder="Search icons... (e.g., alarm, wrench)" />
97250
+ </div>
97251
+ <div class="icon-list"></div>
97252
+ <div class="no-results">No icons found matching your search.</div>
97253
+ </div>
97254
+ </div>
97255
+ </div>
97256
+ `;
97257
+ this.dom.appendHtml(this.builderStuff, html);
97258
+ iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
97259
+ this.iconModal = iconModal;
97260
+ const iconList = this.builderStuff.querySelector('.icon-list');
97261
+ const searchInput = this.builderStuff.querySelector('.icon-search');
97262
+ const noResults = this.builderStuff.querySelector('.no-results');
97263
+ iconList.innerHTML = this.rte.getIcons2() + this.rte.getIcons();
97264
+ let icons = iconList.querySelectorAll('button');
97265
+
97266
+ // Add click handlers for icons
97267
+ icons.forEach(icon => {
97268
+ icon.addEventListener('click', () => {
97269
+ // Get the current callback from the modal's data
97270
+ const currentCallback = iconModal._currentCallback;
97271
+ if (currentCallback) {
97272
+ currentCallback(icon.innerHTML);
97273
+ }
97274
+ this.util.hideModal(iconModal);
97275
+ });
97276
+ });
97277
+
97278
+ // Add search/filter functionality
97279
+ searchInput.addEventListener('input', e => {
97280
+ const searchTerm = e.target.value.toLowerCase().trim();
97281
+ let visibleCount = 0;
97282
+ icons.forEach(icon => {
97283
+ const iconElement = icon.querySelector('i');
97284
+ if (!iconElement) return;
97285
+
97286
+ // Get class names from the icon
97287
+ const iconClasses = iconElement.className.toLowerCase();
97288
+
97289
+ // Check if search term matches any part of the icon classes
97290
+ if (searchTerm === '' || iconClasses.includes(searchTerm)) {
97291
+ icon.classList.remove('hidden');
97292
+ visibleCount++;
97293
+ } else {
97294
+ icon.classList.add('hidden');
97295
+ }
97296
+ });
97297
+
97298
+ // Show/hide no results message
97299
+ if (visibleCount === 0 && searchTerm !== '') {
97300
+ noResults.classList.add('show');
97301
+ } else {
97302
+ noResults.classList.remove('show');
97303
+ }
97304
+ });
97305
+
97306
+ // Clear search when modal is opened
97307
+ iconModal.addEventListener('modalshow', () => {
97308
+ searchInput.value = '';
97309
+ searchInput.dispatchEvent(new Event('input'));
97310
+ });
97311
+ }
97312
+
97313
+ // Store the current callback and reset search
97314
+ iconModal._currentCallback = callback;
97315
+ const searchInput = iconModal.querySelector('.icon-search');
97316
+ if (searchInput) {
97317
+ searchInput.value = '';
97318
+ searchInput.dispatchEvent(new Event('input'));
97319
+ // Focus search input after a brief delay to ensure modal is visible
97320
+ setTimeout(() => searchInput.focus(), 100);
97321
+ }
97322
+ this.util.showModal(iconModal);
97323
+ }
97183
97324
  colorpicker(onPick, defaultcolor) {
97184
97325
  // return new ColorPicker({
97185
97326
  // onPick: onPick,