refactor: address pr comments.

Author: knightedcodemonkey

AGENTS.md

@@ -102,3 +102,4 @@ Never:
 - Edit generated output folders unless explicitly requested.
 - Modify node_modules or lockfiles unless explicitly requested.
 - Reintroduce cross-workspace overwrite/delete behavior with any changes.
+- Use eslint disable comments.

playwright/rendering-modes/core.spec.ts

@@ -243,12 +243,12 @@ test('workspace font CSS URL applies to preview and persists per workspace', asy
   await page.getByRole('button', { name: 'Workspaces' }).click()
 
   const fontCssUrlInput = page.getByRole('textbox', {
-    name: 'Workspace Google Fonts CSS URL',
+    name: 'Workspace font stylesheet URL',
   })
   await fontCssUrlInput.fill(
     'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap',
   )
-  await fontCssUrlInput.press('Tab')
+  await page.getByRole('button', { name: 'Load', exact: true }).click()
 
   await expect
     .poll(async () => (await readPreviewBodyFontFamily(page)).toLowerCase())

src/index.html

@@ -811,14 +811,14 @@ <h2 id="workspaces-title">Workspaces</h2>
               class="github-pr-field github-pr-field--full"
               for="workspaces-font-css-url"
             >
-              <span>Google Fonts CSS URL</span>
+              <span>Font Stylesheet URL</span>
               <input
                 id="workspaces-font-css-url"
                 type="text"
                 autocomplete="off"
                 spellcheck="false"
-                aria-label="Workspace Google Fonts CSS URL"
-                placeholder="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap"
+                aria-label="Workspace font stylesheet URL"
+                placeholder="https://cdn.example.com/fonts.css"
               />
             </label>
             <button class="render-button" id="workspaces-font-css-url-load" type="button">

src/modules/preview-runtime/iframe-preview-executor.js

@@ -115,19 +115,13 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
         }
       }
 
-      const __knightedToBaseStyles = (hostPadding, fontCssUrl = '') => {
+      const __knightedToBaseStyles = hostPadding => {
         const resolvedPadding =
           typeof hostPadding === 'string' && hostPadding.trim().length > 0
             ? hostPadding.trim()
             : '18px'
-        const resolvedFontCssUrl = __knightedNormalizeFontCssUrl(fontCssUrl)
-        const escapedFontCssUrl = resolvedFontCssUrl.replace(/"/g, '\\"')
-        const fontImportRule = resolvedFontCssUrl
-          ? '@import url("' + escapedFontCssUrl + '");'
-          : ''
 
         return [
-          fontImportRule,
           'html, body {',
           '  margin: 0;',
           '  min-height: 100%;',
@@ -151,6 +145,50 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
         ].join('\\n')
       }
 
+      const __knightedSyncFontStylesheetLink = ({
+        normalizedFontCssUrl = '',
+        baseStyleElement,
+      }) => {
+        const linkId = 'knighted-preview-font-stylesheet'
+        const existingLink = document.getElementById(linkId)
+        const hasNormalizedFontCssUrl =
+          typeof normalizedFontCssUrl === 'string' &&
+          normalizedFontCssUrl.length > 0
+
+        if (!hasNormalizedFontCssUrl) {
+          if (existingLink instanceof HTMLLinkElement) {
+            existingLink.remove()
+          }
+          return
+        }
+
+        let linkElement = existingLink
+        if (!(linkElement instanceof HTMLLinkElement)) {
+          linkElement = document.createElement('link')
+          linkElement.id = linkId
+          linkElement.rel = 'stylesheet'
+        }
+
+        if (linkElement.getAttribute('href') !== normalizedFontCssUrl) {
+          linkElement.setAttribute('href', normalizedFontCssUrl)
+        }
+
+        const shouldInsertBeforeBase =
+          baseStyleElement instanceof HTMLStyleElement &&
+          baseStyleElement.parentNode === document.head
+
+        if (shouldInsertBeforeBase) {
+          if (linkElement !== baseStyleElement.previousSibling) {
+            document.head.insertBefore(linkElement, baseStyleElement)
+          }
+          return
+        }
+
+        if (linkElement.parentNode !== document.head) {
+          document.head.append(linkElement)
+        }
+      }
+
       const __knightedApplyVisualConfig = ({
         cssText = '',
         userStyleSheets = [],
@@ -239,9 +277,13 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           document.head.insertBefore(baseStyleElement, firstUserStyleElement)
         }
 
+        __knightedSyncFontStylesheetLink({
+          normalizedFontCssUrl: __knightedState.visualConfig.fontCssUrl,
+          baseStyleElement,
+        })
+
         baseStyleElement.textContent = __knightedToBaseStyles(
           __knightedState.visualConfig.hostPadding,
-          __knightedState.visualConfig.fontCssUrl,
         )
 
         for (let index = 0; index < userStyleElements.length; index += 1) {

src/modules/preview/preview-font.js

@@ -92,13 +92,6 @@ export const createPreviewFontController = ({
       emitChange: true,
       syncInputValue: true,
     })
-
-    previewFontCssUrlInput.addEventListener('change', () => {
-      applyPreviewFontCssUrl(previewFontCssUrlInput.value, {
-        emitChange: true,
-        syncInputValue: true,
-      })
-    })
   }
 
   return {

src/modules/workspace/workspace-storage.js

@@ -1,5 +1,5 @@
 import { cdnImports, importFromCdnWithFallback } from '../cdn.js'
-import { defaultFontCssUrl, normalizeFontCssUrl } from '../font-css-url.js'
+import { normalizeFontCssUrl } from '../font-css-url.js'
 import { toWorkspaceRecordKey } from './workspace-tab-helpers.js'
 
 const workspaceDbName = 'knighted-develop-workspaces'
@@ -24,8 +24,8 @@ const toTabRole = value => {
 
 const normalizeRenderMode = value => (value === 'react' ? 'react' : 'dom')
 
-const normalizePreviewFontCssUrl = value =>
-  normalizeFontCssUrl(value, { fallback: defaultFontCssUrl })
+const normalizeStoredPreviewFontCssUrl = value =>
+  normalizeFontCssUrl(value, { fallback: '' })
 
 const toSyncTimestamp = value =>
   Number.isFinite(value) && value > 0 ? Math.max(0, Number(value)) : null
@@ -116,7 +116,9 @@ const normalizeWorkspaceRecord = record => {
         ? record.prContextState.trim()
         : 'inactive',
     renderMode: normalizeRenderMode(record.renderMode),
-    fontCssUrl: normalizePreviewFontCssUrl(record.fontCssUrl ?? record.previewFontCssUrl),
+    fontCssUrl: normalizeStoredPreviewFontCssUrl(
+      record.fontCssUrl ?? record.previewFontCssUrl,
+    ),
     tabs: normalizedTabs,
     activeTabId: typeof record.activeTabId === 'string' ? record.activeTabId : null,
     schemaVersion:
@@ -173,62 +175,38 @@ const hasOwnRecordValue = (record, key) =>
   Boolean(record) && Object.prototype.hasOwnProperty.call(record, key)
 
 const backfillWorkspaceFontCssUrlField = async db => {
-  const records = await db.getAllFromIndex(
-    workspaceStoreName,
-    workspaceByLastModifiedIndexName,
-  )
-  if (!Array.isArray(records) || records.length === 0) {
-    return
-  }
-
-  const candidateRecordIds = records
-    .filter(record => {
-      if (!record || typeof record !== 'object') {
-        return false
-      }
+  const transaction = db.transaction(workspaceStoreName, 'readwrite')
+  const index = transaction.store.index(workspaceByLastModifiedIndexName)
+  const processCursor = async cursor => {
+    if (!cursor) {
+      return
+    }
 
-      const normalizedFontCssUrl = normalizePreviewFontCssUrl(
+    const record = cursor.value
+    if (record && typeof record === 'object') {
+      const normalizedFontCssUrl = normalizeStoredPreviewFontCssUrl(
         record.fontCssUrl ?? record.previewFontCssUrl,
       )
-
-      return (
+      const shouldPersistFontCssUrl =
         !hasOwnRecordValue(record, 'fontCssUrl') ||
         typeof record.fontCssUrl !== 'string' ||
         record.fontCssUrl !== normalizedFontCssUrl
-      )
-    })
-    .map(record => (typeof record?.id === 'string' ? record.id : ''))
-    .filter(Boolean)
-
-  if (candidateRecordIds.length === 0) {
-    return
-  }
 
-  await Promise.all(
-    candidateRecordIds.map(async recordId => {
-      const record = await db.get(workspaceStoreName, recordId)
-      if (!record || typeof record !== 'object') {
-        return
+      if (shouldPersistFontCssUrl) {
+        await cursor.update({
+          ...record,
+          fontCssUrl: normalizedFontCssUrl,
+        })
       }
+    }
 
-      const normalizedFontCssUrl = normalizePreviewFontCssUrl(
-        record.fontCssUrl ?? record.previewFontCssUrl,
-      )
-      const shouldPersistFontCssUrl =
-        !hasOwnRecordValue(record, 'fontCssUrl') ||
-        typeof record.fontCssUrl !== 'string' ||
-        record.fontCssUrl !== normalizedFontCssUrl
+    const nextCursor = await cursor.continue()
+    await processCursor(nextCursor)
+  }
 
-      if (!shouldPersistFontCssUrl) {
-        return
-      }
+  await processCursor(await index.openCursor())
 
-      await db.put(workspaceStoreName, {
-        ...record,
-        fontCssUrl: normalizedFontCssUrl,
-      })
-    }),
-  )
+  await transaction.done
 }
 
 export const createWorkspaceStorageAdapter = ({ loadRuntime } = {}) => {