@underpostnet/underpost 2.97.5 → 2.98.1

package/src/client/components/core/Input.js

@@ -43,7 +43,9 @@ const fileFormDataFactory = (e, extensions) => {
       logger.error('Invalid file extension', e.target.files[keyFile]);
       continue;
     }
-    form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+    // form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+    // Use standard 'file' field name for all files - server expects this format
+    form.append('file', e.target.files[keyFile]);
   }
   return form;
 };

package/src/client/components/core/Panel.js

@@ -13,7 +13,7 @@ import { ToggleSwitch } from './ToggleSwitch.js';
 import { RichText } from './RichText.js';
 import { loggerFactory } from './Logger.js';
 import { Badge } from './Badge.js';
-import { Content } from './Content.js';
+import { Content, attachMarkdownLinkHandlers } from './Content.js';
 import { DocumentService } from '../../services/document/document.service.js';
 import { NotificationManager } from './NotificationManager.js';
 import { getApiBaseUrl } from '../../services/core/core.service.js';
@@ -37,6 +37,7 @@ const Panel = {
       onClick: () => {},
       share: {
         copyLink: false,
+        copySourceMd: false,
       },
       showCreatorProfile: false,
     },
@@ -152,6 +153,51 @@ const Panel = {
             }
           });
         }
+        if (options.share && options.share.copySourceMd) {
+          EventsUI.onClick(
+            `.${idPanel}-btn-copy-source-md-${id}`,
+            async (e) => {
+              try {
+                const filesData = options.filesData();
+                const foundFiles = filesData.find((d) => String(d._id || d.id) === String(obj._id || obj.id));
+
+                if (foundFiles && foundFiles.mdFileId && foundFiles.mdFileId.mdPlain) {
+                  await copyData(foundFiles.mdFileId.mdPlain);
+                  await NotificationManager.Push({
+                    status: 'success',
+                    html: html`<div>${Translate.Render('markdown-source-copied')}</div>`,
+                  });
+                } else {
+                  await NotificationManager.Push({
+                    status: 'warning',
+                    html: html`<div>No markdown source available</div>`,
+                  });
+                }
+              } catch (error) {
+                logger.error('Error copying markdown source:', error);
+                await NotificationManager.Push({
+                  status: 'error',
+                  html: html`<div>${Translate.Render('error-copying-markdown')}</div>`,
+                });
+              }
+            },
+            { context: 'modal' },
+          );
+
+          // Add tooltip hover effect
+          setTimeout(() => {
+            const btn = s(`.${idPanel}-btn-copy-source-md-${id}`);
+            const tooltip = s(`.${idPanel}-source-md-tooltip-${id}`);
+            if (btn && tooltip) {
+              btn.addEventListener('mouseenter', () => {
+                tooltip.style.opacity = '1';
+              });
+              btn.addEventListener('mouseleave', () => {
+                tooltip.style.opacity = '0';
+              });
+            }
+          });
+        }
         EventsUI.onClick(
           `.${idPanel}-btn-delete-${id}`,
           async (e) => {
@@ -348,7 +394,7 @@ const Panel = {
                       ? 'rgba(255,255,255,0.9)'
                       : 'rgba(0,0,0,0.85)'}; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                   >
-                    ${obj.userInfo.username || obj.userInfo.email || 'Unknown'}
+                    ${obj.userInfo.username || 'Unknown'}
                   </a>
                   <span
                     style="font-size: 11px; color: ${darkTheme
@@ -514,30 +560,50 @@ const Panel = {
             </div>
           </div>
         </div>
-        ${options.share && options.share.copyLink
+        ${options.share && (options.share.copyLink || options.share.copySourceMd)
           ? html`<div
               class="${idPanel}-share-btn-container ${idPanel}-share-btn-container-${id}"
-              style="position: absolute; bottom: 8px; right: 8px; z-index: 2;"
+              style="position: absolute; bottom: 8px; right: 8px; z-index: 2; display: flex; gap: 8px;"
             >
-              <button
-                class="btn-icon ${idPanel}-btn-copy-share-${id}"
-                style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
-              >
-                <i class="fas fa-link" style="font-size: 20px;"></i>
-                ${obj.totalCopyShareLinkCount && obj.totalCopyShareLinkCount > 0
-                  ? html`<span
-                      class="${idPanel}-share-count-${id}"
-                      style="position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;"
-                      >${obj.totalCopyShareLinkCount}</span
-                    >`
-                  : ''}
-              </button>
-              <div
-                class="${idPanel}-share-tooltip-${id}"
-                style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
-              >
-                ${Translate.Render('copy-share-link')}
-              </div>
+              ${options.share.copyLink
+                ? html`<div style="position: relative;">
+                    <button
+                      class="btn-icon ${idPanel}-btn-copy-share-${id}"
+                      style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
+                    >
+                      <i class="fas fa-link" style="font-size: 20px;"></i>
+                      ${obj.totalCopyShareLinkCount && obj.totalCopyShareLinkCount > 0
+                        ? html`<span
+                            class="${idPanel}-share-count-${id}"
+                            style="position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;"
+                            >${obj.totalCopyShareLinkCount}</span
+                          >`
+                        : ''}
+                    </button>
+                    <div
+                      class="${idPanel}-share-tooltip-${id}"
+                      style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
+                    >
+                      ${Translate.Render('copy-share-link')}
+                    </div>
+                  </div>`
+                : ''}
+              ${options.share.copySourceMd
+                ? html`<div style="position: relative;">
+                    <button
+                      class="btn-icon ${idPanel}-btn-copy-source-md-${id}"
+                      style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
+                    >
+                      <i class="fas fa-code" style="font-size: 20px;"></i>
+                    </button>
+                    <div
+                      class="${idPanel}-source-md-tooltip-${id}"
+                      style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
+                    >
+                      Copy Source MD
+                    </div>
+                  </div>`
+                : ''}
             </div>`
           : ''}
       </div>`;
@@ -644,6 +710,7 @@ const Panel = {
           break;
         case 'file':
           setTimeout(() => {
+            if (!s(`.${modelData.id}`)) return;
             s(`.${modelData.id}`).fileNameInputExtDefaultContent = fileNameInputExtDefaultContent;
             s(`.${modelData.id}`).onchange = async (e) => {
               if (!Object.keys(e.target.files).length) return;
@@ -747,6 +814,8 @@ const Panel = {
             append(`.${idPanel}-render`, await renderPanel(doc));
           }
         } else htmls(`.${idPanel}-render`, await renderPanel({ ...obj, ...documents }));
+
+        attachMarkdownLinkHandlers(`.${idPanel}-render`);
         Input.cleanValues(formData);
         s(`.btn-${idPanel}-close`).click();
         s(`.${scrollClassContainer}`).scrollTop = 0;
@@ -809,6 +878,7 @@ const Panel = {
         if (options.on.initAdd) await options.on.initAdd();
       };
       if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
+      attachMarkdownLinkHandlers(`.${idPanel}-render`);
     });
 
     if (data.length > 0) for (const obj of data) render += await renderPanel(obj);

package/src/client/components/core/PanelForm.js

@@ -92,6 +92,7 @@ const PanelForm = {
       firsUpdateEvent: async () => {},
       share: {
         copyLink: false,
+        copySourceMd: false,
       },
       showCreatorProfile: false,
     },

package/src/client/components/core/Responsive.js

@@ -46,13 +46,21 @@ const Responsive = {
     // alternative option
     // this.Observer = new ResizeObserver(this.resizeCallback);
     // this.Observer.observe(document.documentElement);
-    screen.orientation.addEventListener('change', (event) => {
-      const type = event.target.type; // landscape-primary | portrait-primary
-      const angle = event.target.angle; // 90 degrees.
-      logger.info(`ScreenOrientation change: ${type}, ${angle} degrees.`);
-      setTimeout(() => window.onresize({}, true));
-      Responsive.triggerEventsOrientation();
-    });
+
+    // Check if screen.orientation is available before adding event listener
+    if (
+      typeof screen !== 'undefined' &&
+      screen.orientation &&
+      typeof screen.orientation.addEventListener === 'function'
+    ) {
+      screen.orientation.addEventListener('change', (event) => {
+        const type = event.target.type; // landscape-primary | portrait-primary
+        const angle = event.target.angle; // 90 degrees.
+        logger.info(`ScreenOrientation change: ${type}, ${angle} degrees.`);
+        setTimeout(() => window.onresize({}, true));
+        Responsive.triggerEventsOrientation();
+      });
+    }
     Responsive.matchMediaOrientationInstance = matchMedia('screen and (orientation:portrait)');
 
     Responsive.matchMediaOrientationInstance.onchange = (e) => {

package/src/client/components/core/SearchBox.js

@@ -746,116 +746,6 @@ const SearchBox = {
     }, 0);
   },
 
-  /**
-   * Debounce helper for search-while-typing
-   */
-  debounce: function (func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  },
-
-  /**
-   * Sets up a search input element with automatic search on typing.
-   * Attaches debounced input event handler and manages search lifecycle.
-   * @memberof SearchBoxClient.SearchBox
-   * @param {string} inputId - Input element ID or class name.
-   * @param {string} resultsContainerId - Results container element ID or class name.
-   * @param {object} [context={}] - Configuration context object.
-   * @param {number} [context.debounceTime=300] - Debounce delay in milliseconds.
-   * @param {number} [context.minQueryLength=1] - Minimum query length to trigger search.
-   * @returns {Function} Cleanup function to remove event listeners.
-   */
-  setupSearchInput: function (inputId, resultsContainerId, context = {}) {
-    const input = s(`#${inputId}`) || s(`.${inputId}`);
-    if (!input) {
-      logger.warn(`Input ${inputId} not found`);
-      return;
-    }
-
-    const debounceTime = context.debounceTime || 300;
-
-    const performSearch = this.debounce(async (query) => {
-      const trimmedQuery = query ? query.trim() : '';
-      const minLength = context.minQueryLength !== undefined ? context.minQueryLength : 1;
-
-      // Show recent results when query is empty
-      if (trimmedQuery.length === 0) {
-        const recentResults = this.RecentResults.getAll();
-        this.renderResults(recentResults, resultsContainerId, context);
-        return;
-      }
-
-      // Support single character searches by default (minQueryLength: 1)
-      // Can be configured via context.minQueryLength for different use cases
-      if (trimmedQuery.length < minLength) {
-        this.renderResults([], resultsContainerId, context);
-        return;
-      }
-
-      const results = await this.search(trimmedQuery, context);
-      this.renderResults(results, resultsContainerId, context);
-    }, debounceTime);
-
-    // Store the handler reference
-    const handlerId = `search-handler-${inputId}`;
-    if (this.Data[handlerId]) {
-      input.removeEventListener('input', this.Data[handlerId]);
-    }
-
-    this.Data[handlerId] = (e) => {
-      performSearch(e.target.value);
-    };
-
-    input.addEventListener('input', this.Data[handlerId]);
-
-    logger.info(`Setup search input: ${inputId}`);
-
-    return () => {
-      input.removeEventListener('input', this.Data[handlerId]);
-      delete this.Data[handlerId];
-    };
-  },
-
-  /**
-   * Debounces a function call to reduce excessive invocations.
-   * Used for search input to prevent searching on every keystroke.
-   * @memberof SearchBoxClient.SearchBox
-   * @param {Function} func - The function to debounce.
-   * @param {number} wait - Delay in milliseconds before invoking the function.
-   * @returns {Function} Debounced function that delays invocation.
-   */
-  debounce: function (func, wait) {
-    let timeout;
-
-    const later = function (...args) {
-      timeout = null;
-      func(...args);
-    };
-
-    return function (...args) {
-      if (timeout) clearTimeout(timeout);
-      timeout = setTimeout(() => later(...args), wait);
-    };
-  },
-
-  /**
-   * Clears all registered search providers.
-   * Useful for cleanup or resetting search functionality.
-   * @memberof SearchBoxClient.SearchBox
-   * @returns {void}
-   */
-  clearProviders: function () {
-    this.providers = [];
-    logger.info('Cleared all search providers');
-  },
-
   /**
    * Gets base CSS styles for SearchBox with theme-aware styling.
    * Uses subThemeManager colors for consistent theming across light and dark modes.

package/src/client/components/core/Translate.js

@@ -180,6 +180,7 @@ const TranslateCore = {
     Translate.Data['load'] = { en: 'load', es: 'Cargar' };
     Translate.Data['settings'] = { en: 'settings', es: 'configuraciones' };
     Translate.Data['search'] = { en: 'Search', es: 'Buscar' };
+    Translate.Data['filter-by-file-name'] = { en: 'Filter by file name', es: 'Filtrar por nombre de archivo' };
     Translate.Data['view'] = { en: 'view', es: 'ver' };
     Translate.Data['user'] = { en: 'User', es: 'Usuario' };
     Translate.Data['pass'] = { en: 'Password', es: 'Contraseña' };
@@ -397,6 +398,55 @@ const TranslateCore = {
     };
     Translate.Data['resend'] = { en: 'Resend', es: 'Reenviar' };
     Translate.Data['delete-account'] = { en: 'Delete Account', es: 'Borrar cuenta' };
+
+    Translate.Data['doc-title'] = {
+      en: 'Doc Title',
+      es: 'Título del documento',
+    };
+    Translate.Data['md-file-name'] = {
+      en: 'MD File Name',
+      es: 'Nombre de archivo MD',
+    };
+    Translate.Data['generic-file-name'] = {
+      en: 'Generic File Name',
+      es: 'Nombre de archivo genérico',
+    };
+    Translate.Data['edit-document'] = {
+      en: 'Edit Document',
+      es: 'Editar documento',
+    };
+    Translate.Data['location'] = {
+      en: 'Location',
+      es: 'Ubicación',
+    };
+    Translate.Data['save'] = {
+      en: 'Save',
+      es: 'Guardar',
+    };
+    Translate.Data['success-update-document'] = {
+      en: 'Document updated successfully.',
+      es: 'Documento actualizado con éxito.',
+    };
+    Translate.Data['error-update-document'] = {
+      en: 'Error updating document.',
+      es: 'Error al actualizar el documento.',
+    };
+    Translate.Data['error-title-required'] = {
+      en: 'Title is required.',
+      es: 'El título es obligatorio.',
+    };
+    Translate.Data['editing'] = {
+      en: 'Editing',
+      es: 'Editando',
+    };
+    Translate.Data['no-md-file-attached'] = {
+      en: 'No markdown file attached to this document',
+      es: 'No hay archivo markdown adjunto a este documento',
+    };
+    Translate.Data['no-generic-file-attached'] = {
+      en: 'No generic file attached to this document',
+      es: 'No hay archivo genérico adjunto a este documento',
+    };
     Translate.Data['success-delete-account'] = {
       en: 'Account deleted successfully.',
       es: 'Cuenta borrada con éxito.',
@@ -629,6 +679,14 @@ const TranslateCore = {
       en: 'Public Profile',
       es: 'Perfil Público',
     };
+    Translate.Data['external-link-warning'] = {
+      en: 'You are about to open an external link. Do you want to continue?',
+      es: 'Está a punto de abrir un enlace externo. ¿Desea continuar?',
+    };
+    Translate.Data['markdown-source-copied'] = {
+      en: 'Markdown source copied to clipboard',
+      es: 'Fuente de Markdown copiada al portapapeles',
+    };
   },
 };