fix: compatibility with other plugins: inserting icon right before te…

…xt node
yoyurec · Jul 7, 2023 · 07976ba · 07976ba
1 parent 9db3577
commit 07976ba
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/modules/pageIcons/pageIcons.ts b/src/modules/pageIcons/pageIcons.ts
@@ -1,7 +1,7 @@
 import fastdom from 'fastdom'
 
 import { body, doc, globals, propsObject, root } from '../globals';
-import { settingsTextToPropsObj, isNeedLowContrastFix, isEmoji, injectPluginCSS, ejectPluginCSS } from '../utils';
+import { settingsTextToPropsObj, isNeedLowContrastFix, isEmoji, injectPluginCSS, ejectPluginCSS, htmlToElement } from '../utils';
 import { getPropsByPageName } from './queries';
 
 import pageIconsStyles from  './pageIcons.css?inline';
@@ -129,11 +129,13 @@ const setIconToLinkItem = async (linkItem: HTMLElement, pageProps: propsObject,
         return;
     }
     if (pageIcon && pageIcon !== 'none') {
-
         const oldPageIcon = linkItem.querySelector('.awLi-icon');
         oldPageIcon && oldPageIcon.remove();
         hideTitle(linkItem, pageProps);
-        linkItem.insertAdjacentHTML('afterbegin', `<span class="awLi-icon" data-is-emoji="${isEmoji(pageIcon)}">${pageIcon}</span>`);
+
+        const iconNode = htmlToElement(`<span class="awLi-icon" data-is-emoji="${isEmoji(pageIcon)}">${pageIcon}</span>`);
+        const lastNode = linkItem.childNodes[linkItem.childNodes.length - 1];
+        linkItem.insertBefore(iconNode, lastNode);
     }
 }
 

diff --git a/src/modules/utils.ts b/src/modules/utils.ts
@@ -103,3 +103,13 @@ export const ejectPluginCSS = (iframeId: string, label: string) => {
     }
     pluginIframe.contentDocument?.getElementById(label)?.remove();
 }
+
+/**
+ * source: https://stackoverflow.com/a/35385518/7662783
+ */
+export function htmlToElement(html: string): ChildNode {
+    var template = document.createElement('template');
+    html = html.trim(); // Never return a text node of whitespace as the result
+    template.innerHTML = html;
+    return template.content.firstChild as ChildNode;
+}