@gitlab/ui 91.8.0 → 91.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [91.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.8.0...v91.9.0) (2024-09-04)
+
+
+### Features
+
+* **GlDuoChat:** make insert code snippet work with server-generated elements ([ce66a88](https://gitlab.com/gitlab-org/gitlab-ui/commit/ce66a88f7a477d5120c70633850106e8a8c1200e))
+
 # [91.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.7.0...v91.8.0) (2024-09-04)
 
 

package/dist/components/experimental/duo/chat/components/duo_chat_message/insert_code_snippet_element.js

@@ -1,19 +1,55 @@
 import { createButton } from './buttons_utils';
 
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classPrivateFieldGet2(s, a) {
+  return s.get(_assertClassBrand(s, a));
+}
+function _classPrivateFieldInitSpec(e, t, a) {
+  _checkPrivateRedeclaration(e, t), t.set(e, a);
+}
+function _classPrivateFieldSet2(s, a, r) {
+  return s.set(_assertClassBrand(s, a), r), r;
+}
+
+const CODE_MARKDOWN_CLASS = 'js-markdown-code';
+var _actionButton = /*#__PURE__*/new WeakMap();
+var _codeBlock = /*#__PURE__*/new WeakMap();
+var _handleClick = /*#__PURE__*/new WeakMap();
 class InsertCodeSnippetElement extends HTMLElement {
   constructor(codeBlock) {
     super();
-    const btn = createButton();
-    const wrapper = codeBlock;
-    this.appendChild(btn);
-    btn.addEventListener('click', () => {
-      if (wrapper) {
-        wrapper.dispatchEvent(new CustomEvent('insert-code-snippet', {
+    _classPrivateFieldInitSpec(this, _actionButton, void 0);
+    _classPrivateFieldInitSpec(this, _codeBlock, void 0);
+    _classPrivateFieldInitSpec(this, _handleClick, () => {
+      if (_classPrivateFieldGet2(_codeBlock, this)) {
+        _classPrivateFieldGet2(_codeBlock, this).dispatchEvent(new CustomEvent('insert-code-snippet', {
           bubbles: true,
-          cancelable: true
+          cancelable: true,
+          detail: {
+            code: _classPrivateFieldGet2(_codeBlock, this).textContent.trim()
+          }
         }));
       }
     });
+    _classPrivateFieldSet2(_actionButton, this, createButton());
+
+    // we handle two possible cases here:
+    // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
+    // 2. we find the wrapping element containing code if the element is received from the server
+    _classPrivateFieldSet2(_codeBlock, this, codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`));
+  }
+  connectedCallback() {
+    this.appendChild(_classPrivateFieldGet2(_actionButton, this));
+    _classPrivateFieldGet2(_actionButton, this).addEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+  }
+  disconnectedCallback() {
+    _classPrivateFieldGet2(_actionButton, this).removeEventListener('click', _classPrivateFieldGet2(_handleClick, this));
   }
 }
 

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -419,6 +419,10 @@ var script = {
       }
     },
     onInsertCodeSnippet(e) {
+      /**
+       * Emit insert-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
       this.$emit('insert-code-snippet', e);
     }
   },

package/dist/components/experimental/duo/chat/mock_data.js

@@ -1,5 +1,4 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
-import { InsertCodeSnippetElement } from './components/duo_chat_message/insert_code_snippet_element';
 import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
 
@@ -135,7 +134,6 @@ const renderGFM = el => {
   const codeBlock = el.querySelectorAll('.markdown-code-block');
   codeBlock.forEach(block => {
     block === null || block === void 0 ? void 0 : block.classList.add('gl-markdown', 'gl-compact-markdown');
-    block === null || block === void 0 ? void 0 : block.appendChild(new InsertCodeSnippetElement(block));
   });
 };
 const SLASH_COMMANDS = [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.8.0",
+  "version": "91.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/components/duo_chat_message/insert_code_snippet_element.js

@@ -1,17 +1,42 @@
 import { createButton } from './buttons_utils';
 
+const CODE_MARKDOWN_CLASS = 'js-markdown-code';
+
 export class InsertCodeSnippetElement extends HTMLElement {
+  #actionButton;
+
+  #codeBlock;
+
   constructor(codeBlock) {
     super();
-    const btn = createButton();
-    const wrapper = codeBlock;
-    this.appendChild(btn);
-    btn.addEventListener('click', () => {
-      if (wrapper) {
-        wrapper.dispatchEvent(
-          new CustomEvent('insert-code-snippet', { bubbles: true, cancelable: true })
-        );
-      }
-    });
+    this.#actionButton = createButton();
+
+    // we handle two possible cases here:
+    // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
+    // 2. we find the wrapping element containing code if the element is received from the server
+    this.#codeBlock = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+  }
+
+  #handleClick = () => {
+    if (this.#codeBlock) {
+      this.#codeBlock.dispatchEvent(
+        new CustomEvent('insert-code-snippet', {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            code: this.#codeBlock.textContent.trim(),
+          },
+        })
+      );
+    }
+  };
+
+  connectedCallback() {
+    this.appendChild(this.#actionButton);
+    this.#actionButton.addEventListener('click', this.#handleClick);
+  }
+
+  disconnectedCallback() {
+    this.#actionButton.removeEventListener('click', this.#handleClick);
   }
 }

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -429,6 +429,10 @@ export default {
       }
     },
     onInsertCodeSnippet(e) {
+      /**
+       * Emit insert-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
       this.$emit('insert-code-snippet', e);
     },
   },

package/src/components/experimental/duo/chat/mock_data.js

@@ -1,5 +1,4 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
-import { InsertCodeSnippetElement } from './components/duo_chat_message/insert_code_snippet_element';
 import {
   DOCUMENTATION_SOURCE_TYPES,
   MESSAGE_MODEL_ROLES,
@@ -144,7 +143,6 @@ export const renderGFM = (el) => {
   const codeBlock = el.querySelectorAll('.markdown-code-block');
   codeBlock.forEach((block) => {
     block?.classList.add('gl-markdown', 'gl-compact-markdown');
-    block?.appendChild(new InsertCodeSnippetElement(block));
   });
 };