@gitlab/duo-ui 8.12.0 → 8.12.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [8.12.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.12.0...v8.12.1) (2025-04-09)
+
+
+### Bug Fixes
+
+* make custom code buttons work when response html lacks code tag ([35ce601](https://gitlab.com/gitlab-org/duo-ui/commit/35ce60111be3494ba58a4da7dfe4f916cc488547))
+
 # [8.12.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.11.0...v8.12.0) (2025-04-07)
 
 

package/dist/components/chat/components/duo_chat_message/copy_code_element.js

@@ -2,19 +2,49 @@ import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
 import { checkClipboardPermissions } from './utils';
 
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
 class CopyCodeElement extends HTMLElement {
   constructor() {
     super();
+    _defineProperty(this, "getCodeElement", () => {
+      const wrapper = this.parentNode;
+      return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+    });
     this.initialize();
   }
   async initialize() {
+    if (!this.getCodeElement()) return;
     const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
     this.appendChild(btn);
     const tooltip = await createTooltip(btn, 'Copy to clipboard');
     this.appendChild(tooltip);
-    const wrapper = this.parentNode;
-    const [codeElement] = wrapper.getElementsByTagName('code');
     btn.addEventListener('click', async () => {
+      // We fetch the code element on click instead because the structure of the HTML can change after
+      // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+      // not present in the DOM.
+      const codeElement = this.getCodeElement();
       const textToCopy = codeElement.innerText;
       const hasClipboardPermission = await checkClipboardPermissions();
       try {

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

@@ -17,55 +17,80 @@ function _classPrivateFieldInitSpec(e, t, a) {
 function _classPrivateFieldSet2(s, a, r) {
   return s.set(_assertClassBrand(s, a), r), r;
 }
-function _toSetter(t, e, n) {
-  e || (e = []);
-  var r = e.length++;
-  return Object.defineProperty({}, "_", {
-    set: function (o) {
-      e[r] = o, t.apply(n, e);
-    }
-  });
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
 }
 
 const CODE_MARKDOWN_CLASS = 'js-markdown-code';
 var _actionButton = /*#__PURE__*/new WeakMap();
-var _codeElement = /*#__PURE__*/new WeakMap();
+var _codeBlock = /*#__PURE__*/new WeakMap();
 var _handleClick = /*#__PURE__*/new WeakMap();
 class InsertCodeSnippetElement extends HTMLElement {
-  constructor(codeBlock) {
+  constructor(_codeBlock2) {
     super();
     _classPrivateFieldInitSpec(this, _actionButton, void 0);
-    _classPrivateFieldInitSpec(this, _codeElement, void 0);
+    _classPrivateFieldInitSpec(this, _codeBlock, void 0);
     _classPrivateFieldInitSpec(this, _handleClick, () => {
-      if (_classPrivateFieldGet2(_codeElement, this)) {
-        _classPrivateFieldGet2(_codeElement, this).dispatchEvent(new CustomEvent('insert-code-snippet', {
+      // We fetch the code element on click instead because the structure of the HTML can change after
+      // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+      // not present in the DOM.
+      const codeElement = this.getCodeElement(_classPrivateFieldGet2(_codeBlock, this));
+      if (codeElement) {
+        codeElement.dispatchEvent(new CustomEvent('insert-code-snippet', {
           bubbles: true,
           cancelable: true,
           detail: {
-            code: _classPrivateFieldGet2(_codeElement, this).textContent.trim()
+            code: codeElement.textContent.trim()
           }
         }));
       }
     });
-    this.initialize(codeBlock);
+    _defineProperty(this, "getCodeElement", codeBlock => {
+      const wrapper = codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`);
+      return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+    });
+    this.initialize(_codeBlock2);
   }
+
+  // we handle two possible cases here:
+  // 1. we use constructor parameter if the element is created in Javascript and inserted in the document
+  // 2. we find the wrapping element containing code if the element is received from the server
   async initialize(codeBlock) {
+    if (!this.getCodeElement(codeBlock)) return;
+    _classPrivateFieldSet2(_codeBlock, this, codeBlock);
     _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
-    const wrapper = codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`);
-    [_toSetter(_classPrivateFieldSet2, [_codeElement, this])._] = wrapper.getElementsByTagName('code');
     const tooltip = await createTooltip(_classPrivateFieldGet2(_actionButton, this), 'Insert at cursor');
     this.appendChild(tooltip);
   }
   connectedCallback() {
-    this.appendChild(_classPrivateFieldGet2(_actionButton, this));
-    _classPrivateFieldGet2(_actionButton, this).addEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+    if (_classPrivateFieldGet2(_actionButton, this)) {
+      this.appendChild(_classPrivateFieldGet2(_actionButton, this));
+      _classPrivateFieldGet2(_actionButton, this).addEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+    }
   }
   disconnectedCallback() {
-    _classPrivateFieldGet2(_actionButton, this).removeEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+    if (_classPrivateFieldGet2(_actionButton, this)) {
+      _classPrivateFieldGet2(_actionButton, this).removeEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.12.0",
+  "version": "8.12.1",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/chat/components/duo_chat_message/copy_code_element.js

@@ -9,16 +9,19 @@ export class CopyCodeElement extends HTMLElement {
   }
 
   async initialize() {
+    if (!this.getCodeElement()) return;
+
     const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
     this.appendChild(btn);
 
     const tooltip = await createTooltip(btn, 'Copy to clipboard');
     this.appendChild(tooltip);
 
-    const wrapper = this.parentNode;
-    const [codeElement] = wrapper.getElementsByTagName('code');
-
     btn.addEventListener('click', async () => {
+      // We fetch the code element on click instead because the structure of the HTML can change after
+      // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+      // not present in the DOM.
+      const codeElement = this.getCodeElement();
       const textToCopy = codeElement.innerText;
       const hasClipboardPermission = await checkClipboardPermissions();
 
@@ -42,4 +45,9 @@ export class CopyCodeElement extends HTMLElement {
       }
     });
   }
+
+  getCodeElement = () => {
+    const wrapper = this.parentNode;
+    return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+  };
 }

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

@@ -6,34 +6,38 @@ const CODE_MARKDOWN_CLASS = 'js-markdown-code';
 export class InsertCodeSnippetElement extends HTMLElement {
   #actionButton;
 
-  #codeElement;
+  #codeBlock;
 
   constructor(codeBlock) {
     super();
     this.initialize(codeBlock);
   }
 
+  // we handle two possible cases here:
+  // 1. we use constructor parameter if the element is created in Javascript and inserted in the document
+  // 2. we find the wrapping element containing code if the element is received from the server
   async initialize(codeBlock) {
-    this.#actionButton = createButton();
+    if (!this.getCodeElement(codeBlock)) return;
 
-    // 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
-    const wrapper = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
-    [this.#codeElement] = wrapper.getElementsByTagName('code');
+    this.#codeBlock = codeBlock;
+    this.#actionButton = createButton();
 
     const tooltip = await createTooltip(this.#actionButton, 'Insert at cursor');
     this.appendChild(tooltip);
   }
 
   #handleClick = () => {
-    if (this.#codeElement) {
-      this.#codeElement.dispatchEvent(
+    // We fetch the code element on click instead because the structure of the HTML can change after
+    // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+    // not present in the DOM.
+    const codeElement = this.getCodeElement(this.#codeBlock);
+    if (codeElement) {
+      codeElement.dispatchEvent(
         new CustomEvent('insert-code-snippet', {
           bubbles: true,
           cancelable: true,
           detail: {
-            code: this.#codeElement.textContent.trim(),
+            code: codeElement.textContent.trim(),
           },
         })
       );
@@ -41,11 +45,20 @@ export class InsertCodeSnippetElement extends HTMLElement {
   };
 
   connectedCallback() {
-    this.appendChild(this.#actionButton);
-    this.#actionButton.addEventListener('click', this.#handleClick);
+    if (this.#actionButton) {
+      this.appendChild(this.#actionButton);
+      this.#actionButton.addEventListener('click', this.#handleClick);
+    }
   }
 
   disconnectedCallback() {
-    this.#actionButton.removeEventListener('click', this.#handleClick);
+    if (this.#actionButton) {
+      this.#actionButton.removeEventListener('click', this.#handleClick);
+    }
   }
+
+  getCodeElement = (codeBlock) => {
+    const wrapper = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+    return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+  };
 }