@underpostnet/underpost 2.98.0 → 2.98.3

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) => {
@@ -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>`;
@@ -748,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;
@@ -810,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,
     },
@@ -454,7 +455,9 @@ const PanelForm = {
 
             const baseNewDoc = newInstance(data);
             baseNewDoc.tags = tags.filter((t) => !prefixTags.includes(t));
-            baseNewDoc.mdFileId = hasMdContent ? marked.parse(data.mdFileId) : null;
+            baseNewDoc.mdFileId = hasMdContent
+              ? `<div class="markdown-content">${marked.parse(data.mdFileId)}</div>`
+              : null;
             baseNewDoc.userId = Elements.Data.user?.main?.model?.user?._id;
 
             // Ensure profileImageId is properly formatted as object with _id property
@@ -676,7 +679,7 @@ const PanelForm = {
                     mdPlain = await blobArray[0].text();
                     // Parse markdown with proper error handling
                     try {
-                      parsedMarkdown = mdPlain ? marked.parse(mdPlain) : '';
+                      parsedMarkdown = mdPlain ? `<div class="markdown-content">${marked.parse(mdPlain)}</div>` : '';
                     } catch (parseError) {
                       logger.error('Error parsing markdown for document:', documentObject._id, parseError);
                       parsedMarkdown = `<p><strong>Error rendering markdown:</strong> ${parseError.message}</p>`;

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

@@ -679,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',
+    };
   },
 };
 

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

@@ -174,52 +174,103 @@ const disableOptionsClick = (element, types) => {
 
 /**
  * The function `checkFullScreen` checks if the document is in full screen mode and returns a boolean
- * value accordingly.
- * @returns The function `checkFullScreen` is returning `true` if `document.fullscreenElement` is
- * truthy, otherwise it returns `false`.
+ * value accordingly. Checks all vendor-prefixed APIs for maximum compatibility.
+ * @returns The function `checkFullScreen` is returning `true` if any fullscreen API indicates
+ * fullscreen mode is active, otherwise it returns `false`.
  * @memberof VanillaJS
  */
 const checkFullScreen = () => {
-  // !(!window.screenTop && !window.screenY) ||
-  return document.fullscreenElement ? true : false;
+  return !!(
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement ||
+    document.fullscreen ||
+    document.webkitIsFullScreen ||
+    document.mozFullScreen
+  );
 };
 
 /**
  * The function `fullScreenOut` is used to exit full screen mode in a web browser.
+ * Handles all vendor-prefixed APIs and returns a promise for better control flow.
+ * @returns {Promise<boolean>} Promise that resolves to true if exit was attempted
  * @memberof VanillaJS
  */
 const fullScreenOut = () => {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  } else if (document.msExitFullscreen) {
-    window.top.document.msExitFullscreen();
-  }
+  return new Promise((resolve) => {
+    if (!checkFullScreen()) {
+      resolve(true);
+      return;
+    }
+
+    try {
+      if (document.exitFullscreen) {
+        document
+          .exitFullscreen()
+          .then(() => resolve(true))
+          .catch(() => resolve(false));
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+        setTimeout(() => resolve(true), 100);
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+        setTimeout(() => resolve(true), 100);
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+        setTimeout(() => resolve(true), 100);
+      } else {
+        resolve(false);
+      }
+    } catch (err) {
+      console.warn('Fullscreen exit error:', err);
+      resolve(false);
+    }
+  });
 };
 
 /**
  * The `fullScreenIn` function is used to request full screen mode in a web browser using different
- * vendor-specific methods.
+ * vendor-specific methods. Returns a promise for better control flow.
+ * @returns {Promise<boolean>} Promise that resolves to true if fullscreen was requested
  * @memberof VanillaJS
  */
 const fullScreenIn = () => {
-  const elem = document.documentElement;
-  if (elem.requestFullscreen) {
-    elem.requestFullscreen();
-  } else if (elem.mozRequestFullScreen) {
-    /* Firefox */
-    elem.mozRequestFullScreen();
-  } else if (elem.webkitRequestFullscreen) {
-    /* Chrome, Safari & Opera */
-    elem.webkitRequestFullscreen();
-  } else if (elem.msRequestFullscreen) {
-    /* IE/Edge */
-    elem = window.top.document.body; //To break out of frame in IE
-    elem.msRequestFullscreen();
-  }
+  return new Promise((resolve) => {
+    if (checkFullScreen()) {
+      resolve(true);
+      return;
+    }
+
+    const elem = document.documentElement;
+
+    try {
+      if (elem.requestFullscreen) {
+        elem
+          .requestFullscreen()
+          .then(() => resolve(true))
+          .catch(() => resolve(false));
+      } else if (elem.webkitRequestFullscreen) {
+        /* Chrome, Safari & Opera */
+        elem.webkitRequestFullscreen();
+        setTimeout(() => resolve(true), 100);
+      } else if (elem.mozRequestFullScreen) {
+        /* Firefox */
+        elem.mozRequestFullScreen();
+        setTimeout(() => resolve(true), 100);
+      } else if (elem.msRequestFullscreen) {
+        /* IE/Edge */
+        const msElem = window.top.document.body;
+        msElem.msRequestFullscreen();
+        setTimeout(() => resolve(true), 100);
+      } else {
+        resolve(false);
+      }
+    } catch (err) {
+      console.warn('Fullscreen request error:', err);
+      resolve(false);
+    }
+  });
 };
 
 /**