Remove modals with duplicate id

docs/userGuide/syntax/modals.md

@@ -45,7 +45,7 @@ header{{slot_info_trigger}} | `String` | `''` | Header of the Modal component. S
 footer <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>modal-footer <br> (deprecated)</small> | {{slot_type_info_trigger}} | empty | Specifying this will override the `ok-text` attribute, and the OK button will not render.
 ok-text | `String` | `''` | Text for the OK button.
 effect | `String` | `zoom` | Supports: `zoom`, `fade`.
-id | `String` | | Used by [Trigger](#trigger) to activate the Modal by id.
+id | `String` | | Used by [Trigger](#trigger) to activate the Modal by id.<br>**Note: Ensure id for each Modal is unique.**
 small | `Boolean` | `false` | Creates a small Modal.
 large | `Boolean` | `false` | Creates a large Modal.
 center | `Boolean` | `false` | Vertically centers the modal (in addition to the horizontal centering by default).

packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html

@@ -207,7 +207,7 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         </div>
       </overlay-source>
       <div id="content-wrapper">
-        <p><strong>Multiple inclusions of a modal should be supported</strong></p>
+        <p><strong>For modals with non-unique id, only the first modal will be shown</strong></p>
         <div>
           <modal large id="modal:bugRepro"><template #header>Establishing Requirements</template>
             <div>Requirements gathering, requirements elicitation, requirements analysis,
@@ -216,11 +216,6 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
           </modal>
         </div>
         <div>
-          <modal large id="modal:bugRepro"><template #header>Establishing Requirements</template>
-            <div>Requirements gathering, requirements elicitation, requirements analysis,
-              requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
-              of understanding what a software product should do.</div>
-          </modal>
         </div>
         <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>

packages/cli/test/functional/test_site/testIncludeMultipleModals.md

@@ -1,4 +1,4 @@
-**Multiple inclusions of a modal should be supported**
+**For modals with non-unique id, only the first modal will be shown**
 
 <include src="requirements/testModal.md" />
 <include src="requirements/testModal.md" />

packages/core/src/html/NodeProcessor.js

@@ -57,6 +57,8 @@ class NodeProcessor {
     this.footnoteProcessor = new FootnoteProcessor();
     this.mdAttributeRenderer = new MdAttributeRenderer(this.markdownProcessor);
     this.pageNavProcessor = new PageNavProcessor();
+
+    this.processedModals = {};
   }
 
   /*
@@ -120,6 +122,23 @@ class NodeProcessor {
     $.remove();
   }
 
+  /**
+   * Removes the node if modal id already exists, processes node otherwise
+   */
+  _processModal(node) {
+    if (this.processedModals[node.attribs.id]) {
+      cheerio(node).remove();
+    } else {
+      this.processedModals[node.attribs.id] = true;
+
+      // Transform deprecated slot names; remove when deprecating
+      renameSlot(node, 'modal-header', 'header');
+      renameSlot(node, 'modal-footer', 'footer');
+
+      this.mdAttributeRenderer.processModalAttributes(node);
+    }
+  }
+
   /*
    * API
    */
@@ -166,11 +185,7 @@ class NodeProcessor {
         this.mdAttributeRenderer.processTooltip(node);
         break;
       case 'modal':
-        // Transform deprecated slot names; remove when deprecating
-        renameSlot(node, 'modal-header', 'header');
-        renameSlot(node, 'modal-footer', 'footer');
-
-        this.mdAttributeRenderer.processModalAttributes(node);
+        this._processModal(node);
         break;
       case 'tab':
       case 'tab-group':