#747 add preview.style directory as a local resource roots in the WebView

src/asciidoctorWebViewConverter.ts

@@ -419,8 +419,13 @@ ${node.hasAttribute('manpurpose') ? this.generateManNameSection(node) : ''}`
     return this.webviewResourceProvider.asMediaWebViewSrc('dist', mediaFile)
   }
 
-  private getStyles (node: Asciidoctor.Document, webviewResourceProvider: WebviewResourceProvider, resource: vscode.Uri,
-    config: AsciidocPreviewConfiguration, state?: any): string {
+  private getStyles (
+    node: Asciidoctor.Document,
+    webviewResourceProvider: WebviewResourceProvider,
+    textDocumentUri: vscode.Uri,
+    config: AsciidocPreviewConfiguration,
+    state?: any
+  ): string {
     const baseStyles: string[] = []
     for (const previewStyle of this.contributions.previewStyles) {
       baseStyles.push(`<link rel="stylesheet" type="text/css" href="${escapeAttribute(webviewResourceProvider.asWebviewUri(previewStyle))}">`)
@@ -434,7 +439,7 @@ ${node.hasAttribute('manpurpose') ? this.generateManNameSection(node) : ''}`
       baseStyles.push(`<link rel="stylesheet" href="${webviewResourceProvider.asMediaWebViewSrc('media', 'font-awesome', 'css', 'font-awesome.css')}">`)
     }
     return `${baseStyles.join('\n')}
-  ${this.computeCustomStyleSheetIncludes(webviewResourceProvider, resource, config)}
+  ${this.computeCustomStyleSheetIncludes(webviewResourceProvider, textDocumentUri, config)}
   ${this.getImageStabilizerStyles(state)}`
   }
 
@@ -446,13 +451,13 @@ ${node.hasAttribute('manpurpose') ? this.generateManNameSection(node) : ''}`
     return out.join('\n')
   }
 
-  private computeCustomStyleSheetIncludes (webviewResourceProvider: WebviewResourceProvider, resource: vscode.Uri, config: AsciidocPreviewConfiguration): string {
-    const style = config.previewStyle
-    if (style === '') {
+  private computeCustomStyleSheetIncludes (webviewResourceProvider: WebviewResourceProvider, textDocumentUri: vscode.Uri, config: AsciidocPreviewConfiguration): string {
+    const stylePath = config.previewStyle
+    if (stylePath === '') {
       return ''
     }
     const out: string[] = []
-    out.push(`<link rel="stylesheet" class="code-user-style" data-source="${escapeAttribute(style)}" href="${escapeAttribute(this.fixHref(webviewResourceProvider, resource, style))}" type="text/css" media="screen">`)
+    out.push(`<link rel="stylesheet" class="code-user-style" data-source="${escapeAttribute(stylePath)}" href="${escapeAttribute(this.fixHref(webviewResourceProvider, textDocumentUri, stylePath))}" type="text/css" media="screen">`)
     return out.join('\n')
   }
 
@@ -471,7 +476,7 @@ ${node.hasAttribute('manpurpose') ? this.generateManNameSection(node) : ''}`
     return ret
   }
 
-  private fixHref (webviewResourceProvider: WebviewResourceProvider, resource: vscode.Uri, href: string): string {
+  private fixHref (webviewResourceProvider: WebviewResourceProvider, textDocumentUri: vscode.Uri, href: string): string {
     // QUESTION: should we use `stylesdir` attribute in here?
     if (!href) {
       return href
@@ -487,12 +492,12 @@ ${node.hasAttribute('manpurpose') ? this.generateManNameSection(node) : ''}`
     }
 
     // Use a workspace relative path if there is a workspace
-    const root = getWorkspaceFolder(resource)
+    const root = getWorkspaceFolder(textDocumentUri)
     if (root) {
       return webviewResourceProvider.asWebviewUri(vscode.Uri.joinPath(root.uri, href)).toString()
     }
 
     // Otherwise look relative to the AsciiDoc file
-    return webviewResourceProvider.asWebviewUri(vscode.Uri.joinPath(uri.Utils.dirname(resource), href)).toString()
+    return webviewResourceProvider.asWebviewUri(vscode.Uri.joinPath(uri.Utils.dirname(textDocumentUri), href)).toString()
   }
 }

src/features/preview.ts

@@ -11,7 +11,7 @@ import { AsciidocContentProvider } from './previewContentProvider'
 import { disposeAll, Disposable } from '../util/dispose'
 import { WebviewResourceProvider } from '../util/resources'
 import { AsciidocFileTopmostLineMonitor, getVisibleLine } from '../util/topmostLineMonitor'
-import { AsciidocPreviewConfigurationManager } from './previewConfig'
+import { AsciidocPreviewConfiguration, AsciidocPreviewConfigurationManager } from './previewConfig'
 import { AsciidocContributionProvider } from '../asciidocExtensions'
 import { isAsciidocFile } from '../util/file'
 import { resolveLinkToAsciidocFile } from '../commands/openDocumentLink'
@@ -63,7 +63,7 @@ export class AsciidocPreview extends Disposable implements WebviewResourceProvid
       topmostLineMonitor,
       contributionProvider)
 
-    preview.editor.webview.options = AsciidocPreview.getWebviewOptions(resource, contributionProvider)
+    preview.editor.webview.options = AsciidocPreview.getWebviewOptions(resource, contributionProvider, previewConfigurations.loadAndCacheConfiguration(resource))
 
     if (!isNaN(line)) {
       preview.line = line
@@ -94,7 +94,7 @@ export class AsciidocPreview extends Disposable implements WebviewResourceProvid
       {
         enableFindWidget: true,
         retainContextWhenHidden,
-        ...AsciidocPreview.getWebviewOptions(resource, contributionProvider),
+        ...AsciidocPreview.getWebviewOptions(resource, contributionProvider, previewConfigurations.loadAndCacheConfiguration(resource)),
       }
     )
 
@@ -376,27 +376,37 @@ export class AsciidocPreview extends Disposable implements WebviewResourceProvid
       this.editor.title = AsciidocPreview.getPreviewTitle(this._resource, this._locked)
     }
     this.editor.iconPath = this.iconPath
-    this.editor.webview.options = AsciidocPreview.getWebviewOptions(resource, this._contributionProvider)
-    const content = await this._contentProvider.providePreviewHTML(document, this._previewConfigurations, this, this.line)
-    this.editor.webview.html = content
+    const asciidocPreviewConfiguration = this._previewConfigurations.loadAndCacheConfiguration(resource)
+    this.editor.webview.options = AsciidocPreview.getWebviewOptions(resource, this._contributionProvider, asciidocPreviewConfiguration)
+    this.editor.webview.html = await this._contentProvider.providePreviewHTML(document, this._previewConfigurations, this, this.line)
   }
 
   private static getWebviewOptions (
     resource: vscode.Uri,
-    contributionProvider: AsciidocContributionProvider
+    contributionProvider: AsciidocContributionProvider,
+    asciidocPreviewConfiguration: AsciidocPreviewConfiguration
   ): vscode.WebviewOptions {
     return {
       enableScripts: true,
       enableCommandUris: true,
-      localResourceRoots: AsciidocPreview.getLocalResourceRoots(resource, contributionProvider),
+      localResourceRoots: AsciidocPreview.getLocalResourceRoots(resource, contributionProvider, asciidocPreviewConfiguration),
     }
   }
 
-  private static getLocalResourceRoots (resource: vscode.Uri, contributionProviderr: AsciidocContributionProvider): vscode.Uri[] {
+  private static getLocalResourceRoots (
+    resource: vscode.Uri,
+    contributionProvider: AsciidocContributionProvider,
+    asciidocPreviewConfiguration: AsciidocPreviewConfiguration
+  ): vscode.Uri[] {
     const baseRoots: vscode.Uri[] = [
-      vscode.Uri.joinPath(contributionProviderr.extensionUri, 'media'),
-      vscode.Uri.joinPath(contributionProviderr.extensionUri, 'dist'),
+      vscode.Uri.joinPath(contributionProvider.extensionUri, 'media'),
+      vscode.Uri.joinPath(contributionProvider.extensionUri, 'dist'),
     ]
+    const previewStylePath = asciidocPreviewConfiguration.previewStyle
+    if (previewStylePath !== '') {
+      const previewStyleUri = vscode.Uri.parse(previewStylePath)
+      baseRoots.push(uri.Utils.dirname(previewStyleUri))
+    }
     const folder = getWorkspaceFolder(resource)
     if (folder) {
       const workspaceRoots = getWorkspaceFolders()?.map((folder) => folder.uri)