Popover error message

packages/core/src/html/includePanelProcessor.ts

@@ -305,6 +305,29 @@ export function processInclude(node: MbNode, context: Context, pageSources: Page
   return childContext;
 }
 
+function createPopoverInlineErrorSlot(message: string): NodeOrText[] {
+  return [
+    {
+      type: 'tag',
+      name: 'template',
+      attribs: { slot: 'content' },
+      children: [
+        {
+          type: 'tag',
+          name: 'div',
+          attribs: { style: 'color: red;' },
+          children: [
+            {
+              type: 'text',
+              data: message,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}
+
 /**
  * PreProcesses popovers with the src attribute.
  * Replaces it with an error node if the specified src is invalid.
@@ -318,9 +341,11 @@ export function processPopoverSrc(node: MbNode, context: Context, pageSources: P
   }
 
   if (_.isEmpty(node.attribs.src)) {
-    const error = new Error(`Empty src attribute in popover in: ${context.cwf}`);
-    logger.error(error.message);
-    cheerio(node).replaceWith(createErrorNode(node, error));
+    // const error = new Error(`Empty src attribute in popover in: ${context.cwf}`);
+    const errorMsg = `Empty src attribute in popover in: ${context.cwf}`;
+    logger.error(errorMsg);
+    // cheerio(node).replaceWith(createErrorNode(node, error));
+    node.children = createPopoverInlineErrorSlot(errorMsg);
     return context;
   }
 
@@ -334,14 +359,13 @@ export function processPopoverSrc(node: MbNode, context: Context, pageSources: P
 
   // No need to process url contents
   if (isUrl) {
-    const error = new Error('URLs are not allowed in the \'src\' attribute');
-    logger.error(`${error.message}
-      File: ${context.cwf}
-      URL provided: ${node.attribs.src}
-
-      Please check the \`src\` attribute in the popover element.
-      Ensure it doesn't contain a URL (e.g., "http://www.example.com").`);
-    cheerio(node).replaceWith(createErrorNode(node, error));
+    const errorMsg
+      = 'URLs are not allowed in the \'src\' attribute.<br>'
+      + `File: ${context.cwf}<br>`
+      + `URL provided: ${node.attribs.src}`;
+
+    logger.error(errorMsg);
+    node.children = createPopoverInlineErrorSlot(errorMsg);
     return context;
   }
 
@@ -372,12 +396,12 @@ export function processPopoverSrc(node: MbNode, context: Context, pageSources: P
     actualContent = $(hash).html() || '';
 
     if (actualContent === '') {
-      const error = new Error(`No such segment '${hash}' in file: ${actualFilePath}\n`
-        + `Missing reference in ${context.cwf}`);
-      logger.error(error.message);
-
-      cheerio(node).replaceWith(createErrorNode(node, error));
+      const errorMsg
+        = `No such segment '${hash}' in file: ${actualFilePath}\n`
+        + `Missing reference in ${context.cwf}`;
 
+      logger.error(errorMsg);
+      node.children = createPopoverInlineErrorSlot(errorMsg);
       return context;
     }
   }
@@ -390,7 +414,7 @@ export function processPopoverSrc(node: MbNode, context: Context, pageSources: P
     if (childContext.hasExceededMaxCallstackSize()) {
       const error = new CyclicReferenceError(childContext.callStack);
       logger.error(error.message);
-      cheerio(node).replaceWith(createErrorNode(node, error));
+      node.children = createPopoverInlineErrorSlot(error.message);
       return context;
     }
   }

packages/vue-components/src/Popover.vue

@@ -4,7 +4,12 @@
     data-mb-component-type="popover"
     tabindex="0"
   >
-    <portal v-if="targetEl.id" :to="'popover:' + targetEl.id">
+
+    <div v-if="localError" class="popover-error-message">
+      {{ localError }}
+    </div>
+
+    <portal v-if="targetEl.id && !localError" :to="'popover:' + targetEl.id">
       <h3 v-if="hasHeader" class="popover-header">
         <slot name="header"></slot>
       </h3>
@@ -13,7 +18,7 @@
       </div>
     </portal><!-- do not delete this comment, it is for the stray space issue (#2419)
  --><v-popover
-      v-if="isMounted"
+      v-if="isMounted && !localError"
       :auto-hide="!isInput"
       :triggers="triggers"
       :popper-triggers="triggers"
@@ -60,19 +65,28 @@ export default {
       type: String,
       default: 'top',
     },
+    src: {
+      type: String,
+      default: '',
+    },
+    header: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
       targetEl: {},
       isMounted: false,
+      localError: '',
     };
   },
   computed: {
     triggers() {
       return this.trigger.split(' ');
     },
     hasHeader() {
-      return !!this.$slots.header;
+      return !!this.$slots.header || this.header;
     },
     isInput() {
       return Boolean(this.$slots.default && this.$slots.default().some(vnode => vnode.type === 'input'));
@@ -81,6 +95,54 @@ export default {
   mounted() {
     this.targetEl = this.$el;
     this.isMounted = true;
+    this.$nextTick(() => {
+      this.captureAndLocalizeErrors();
+    });
+  },
+  methods: {
+    captureAndLocalizeErrors() {
+      // Method 1: Check for common error patterns in the DOM
+      this.findAndHandleGlobalErrors();
+
+      // Method 2: Validate proactively
+      this.validatePopover();
+    },
+    findAndHandleGlobalErrors() {
+      // Look for error messages that might have been injected elsewhere
+      const popoverErrors = Array.from(document.querySelectorAll('.popover-error'))
+        .filter(el => el.textContent.includes('popover') || el.textContent.includes('src'));
+
+      popoverErrors.forEach((errorEl) => {
+        if (this.$el.contains(errorEl)) {
+          // Error is already in the right place
+          return;
+        }
+
+        // Check if this error belongs to our popover
+        if (errorEl.textContent.includes(this.src)
+            || errorEl.textContent.includes(this.header)) {
+          this.localError = errorEl.textContent;
+          errorEl.remove();
+        }
+      });
+    },
+    validatePopover() {
+      if (!this.src && !this.$slots.content) {
+        this.localError = 'Popover requires either a src attribute or content';
+        return;
+      }
+      if (this.src && !this.isValidUrl(this.src)) {
+        this.localError = 'Invalid popover source URL';
+      }
+    },
+    isValidUrl(url) {
+      try {
+        (() => new URL(url))();
+        return true;
+      } catch (_) {
+        return false;
+      }
+    },
   },
 };
 </script>
@@ -99,4 +161,10 @@ export default {
     .v-popper {
         display: inline;
     }
+
+    .popover-error-message {
+        color: #f00;
+        font-size: 1.0rem;
+        margin-top: 0.25rem;
+    }
 </style>