Fix apply-font for multiple font pickers (closes #7)

samuelmeuli · May 11, 2019 · 9e440e3 · 9e440e3
1 parent ad62603
commit 9e440e3
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/src/font-manager/styles/declarations.ts b/src/font-manager/styles/declarations.ts
@@ -1,9 +1,7 @@
 import getFontId from "../../shared/fontId";
 import { Font } from "../../shared/types";
 
-const activeFontStylesheet = document.createElement("style");
 const previewFontsStylesheet = document.createElement("style");
-document.head.appendChild(activeFontStylesheet);
 document.head.appendChild(previewFontsStylesheet);
 
 /**
@@ -19,6 +17,20 @@ export function applyFontPreview(previewFont: Font, selectorSuffix: string): voi
 	previewFontsStylesheet.appendChild(document.createTextNode(style));
 }
 
+/**
+ * Create/find and return the apply-font stylesheet for the provided selectorSuffix
+ */
+function getActiveFontStylesheet(selectorSuffix: string) {
+	const stylesheetId = `active-font-${selectorSuffix}`;
+	let activeFontStylesheet = document.getElementById(stylesheetId);
+	if (!activeFontStylesheet) {
+		activeFontStylesheet = document.createElement("style");
+		activeFontStylesheet.id = stylesheetId;
+		document.head.appendChild(activeFontStylesheet);
+	}
+	return activeFontStylesheet;
+}
+
 /**
  * Add/update declaration for applying the current active font
  */
@@ -32,10 +44,6 @@ export function applyActiveFont(
 			font-family: "${activeFont.family}"${previousFontFamily ? `, "${previousFontFamily}"` : ""};
 		}
 	`;
-	const styleNode = document.createTextNode(style);
-	if (activeFontStylesheet.childNodes.length === 0) {
-		activeFontStylesheet.appendChild(styleNode);
-	} else {
-		activeFontStylesheet.replaceChild(styleNode, activeFontStylesheet.childNodes[0]);
-	}
+	const activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);
+	activeFontStylesheet.innerHTML = style;
 }