add async function for icon detection

Author: bourgeoa

src/humanReadablePane.js

@@ -25,30 +25,19 @@ const humanReadablePane = {
       return icons.iconBase + 'markdown.svg'
     }
 
-    // Dokieli files detected by RDF metadata (synchronous)
+    // Dokieli files detected by content check
     if (subject) {
       const kb = context.session.store
 
-      // Check RDF for dokieli stylesheets
-      const stylesheets = kb.each(subject, ns.link('stylesheet'))
-      const isDokieliByRDF = stylesheets.some(s => 
-        s.uri && s.uri.includes('dokie.li/media/css/dokieli.css')
-      )
-      
-      if (isDokieliByRDF) {
-        dokieliCache.set(subject.uri, 'dokieli')
-        return icons.iconBase + 'dokieli-logo.png'
-      }
-      
-      // Check cache from previous content detection
+      // Check cache from previous detection
       const cachedResult = dokieliCache.get(subject.uri)
       if (cachedResult === 'dokieli') {
         return icons.iconBase + 'dokieli-logo.png'
       } else if (cachedResult === 'html') {
         return icons.originalIconBase + 'tango/22-text-x-generic.png'
       }
 
-      // Not in RDF or cache - check if content already fetched
+      // Check if content already fetched (synchronous)
       const responseText = kb.fetcher.getHeader(subject.doc(), 'content')
       if (responseText && responseText.length > 0) {
         const text = responseText[0]
@@ -59,6 +48,27 @@ const humanReadablePane = {
           ? icons.iconBase + 'dokieli-logo.png'
           : icons.originalIconBase + 'tango/22-text-x-generic.png'
       }
+      
+      // Content not yet fetched - return a promise (async detection)
+      const cts = kb.fetcher.getHeader(subject.doc(), 'content-type')
+      const ct = cts ? cts[0].split(';', 1)[0].trim() : null
+      
+      if (ct === 'text/html') {
+        return kb.fetcher._fetch(subject.uri)
+          .then(response => response.text())
+          .then(text => {
+            const isDokieli = text.includes('<script src="https://dokie.li/scripts/dokieli.js">') || 
+                             text.includes('dokieli.css')
+            dokieliCache.set(subject.uri, isDokieli ? 'dokieli' : 'html')
+            return isDokieli 
+              ? icons.iconBase + 'dokieli-logo.png'
+              : icons.originalIconBase + 'tango/22-text-x-generic.png'
+          })
+          .catch(() => {
+            dokieliCache.set(subject.uri, 'html')
+            return icons.originalIconBase + 'tango/22-text-x-generic.png'
+          })
+      }
     }
 
     // Default for all other human-readable content
@@ -201,7 +211,7 @@ const humanReadablePane = {
 
       // Apply sandbox for HTML/XHTML
       if (ct === 'text/html' || ct === 'application/xhtml+xml') {
-        frame.setAttribute('sandbox', 'allow-scripts allow-same-origin')
+        frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms')
       }
 
       // Fetch content to calculate lines dynamically

src/outline/manager.js

@@ -597,6 +597,7 @@ export default function (context) {
         // if only one, simplify interface
         relevantPanes.forEach((pane, index) => {
           const label = pane.label(subject, context)
+
           const iconSrc = typeof pane.icon === 'function' ? pane.icon(subject, context) : pane.icon
           const ico = UI.utils.AJARImage(iconSrc, label, label, dom)