Merge pull request #89 from mbehzad/bugfix/71-rich-text-in-sidekick-l…

…ibrary

Bugfix/71 rich text in sidekick library

documentation.md

@@ -283,7 +283,7 @@ Represents the constructed Element.
 | ---------- | ---------- |
 | `SidekickElement` | `{
   dataLibraryId?: string;
-  innerHTML: string;
+  content: DocumentFragment;
   href?: string;
 }` |
 

src/blocks/banner/banner.ts

@@ -18,15 +18,15 @@ const template = (args: TemplateArgs) => {
     <div id="banner">
       <div class="content">
         <header>
-          <h1 ${getSidekickLibraryId(headline)}>${headline.innerHTML}</h1>
-          <p ${getSidekickLibraryId(subline)}>${subline.innerHTML}</p>
+          <h1 ${getSidekickLibraryId(headline)}>${headline.content}</h1>
+          <p ${getSidekickLibraryId(subline)}>${subline.content}</p>
         </header>
-        ${texts?.map((text) => html`<p ${getSidekickLibraryId(text)}>${text.innerHTML}</p>`)}
+        ${texts?.map((text) => html`<div ${getSidekickLibraryId(text)}>${text.content}</div>`)}
         <ul class="actions">
           ${buttons?.map(
             (button) =>
               html` <li>
-                <a href="${button.href}" class="button big" ${getSidekickLibraryId(button)}>${button.innerHTML}</a>
+                <a href="${button.href}" class="button big" ${getSidekickLibraryId(button)}>${button.content}</a>
               </li>`
           )}
         </ul>

src/helpers/sidekick/extractSidekickLibraryId.spec.ts

@@ -7,7 +7,7 @@ describe('extractSidekickLibraryId', () => {
   beforeEach(() => {
     expected = {
       dataLibraryId: undefined,
-      innerHTML: '',
+      content: new DocumentFragment(),
       href: '',
     };
   });
@@ -17,15 +17,16 @@ describe('extractSidekickLibraryId', () => {
     expect(result).toEqual(expected);
   });
 
-  test('extracts innerHTML correctly', () => {
+  test('extracts content correctly', () => {
     const element = document.createElement('div');
     const innerHTML = '<p>Hello, World!</p>';
 
     element.innerHTML = innerHTML;
-    expected.innerHTML = innerHTML;
 
     const result = extractSidekickLibraryId(element);
-    expect(result).toEqual(expected);
+    const target = document.createElement('div');
+    target.append(result.content);
+    expect(target.innerHTML).toEqual(innerHTML);
   });
 
   test('extracts href attribute correctly for anchor elements', () => {

src/helpers/sidekick/extractSidekickLibraryId.ts

@@ -10,7 +10,7 @@ import { isSidekickLibraryActive } from './isSidekickLibraryActive.ts';
  */
 export type SidekickElement = {
   dataLibraryId?: string;
-  innerHTML: string;
+  content: DocumentFragment;
   href?: string;
 };
 
@@ -22,12 +22,12 @@ export type SidekickElement = {
  * @returns {SidekickElement} - A constructed element object.
  *
  * @example
- * const button = extractSidekickLibraryId(document.querySelector('a'));
+ * const cta = extractSidekickLibraryId(document.querySelector('a'));
  * <a
- *  href="${button.href}"
- *  data-library-id="${ifDefined(button.id)}"
- *  contenteditable="${ifDefined(button.id ? true : undefined)}">
- *    ${button.text}
+ *  href="${cta.href}"
+ *  data-library-id="${ifDefined(cta.dataLibraryId)}"
+ *  contenteditable="${ifDefined(cta.dataLibraryId ? true : undefined)}">
+ *    ${cta.content}
  * </a>
  *
  * @remarks
@@ -37,12 +37,12 @@ export type SidekickElement = {
 export const extractSidekickLibraryId = (element?: HTMLElement | HTMLAnchorElement | null): SidekickElement => {
   const constructedElement: SidekickElement = {
     dataLibraryId: undefined,
-    innerHTML: '',
+    content: new DocumentFragment(),
     href: '',
   };
   if (!element) return constructedElement;
 
-  constructedElement.innerHTML = element.innerHTML;
+  constructedElement.content.append(...element.cloneNode(true).childNodes);
   if (element instanceof HTMLAnchorElement && element.href !== '') {
     constructedElement.href = element.href;
   }

types/src/helpers/sidekick/extractSidekickLibraryId.d.ts

@@ -8,7 +8,7 @@
  */
 export type SidekickElement = {
     dataLibraryId?: string;
-    innerHTML: string;
+    content: DocumentFragment;
     href?: string;
 };
 /**
@@ -19,12 +19,12 @@ export type SidekickElement = {
  * @returns {SidekickElement} - A constructed element object.
  *
  * @example
- * const button = extractSidekickLibraryId(document.querySelector('a'));
+ * const cta = extractSidekickLibraryId(document.querySelector('a'));
  * <a
- *  href="${button.href}"
- *  data-library-id="${ifDefined(button.id)}"
- *  contenteditable="${ifDefined(button.id ? true : undefined)}">
- *    ${button.text}
+ *  href="${cta.href}"
+ *  data-library-id="${ifDefined(cta.dataLibraryId)}"
+ *  contenteditable="${ifDefined(cta.dataLibraryId ? true : undefined)}">
+ *    ${cta.content}
  * </a>
  *
  * @remarks