fix

Author: wxiaoguang

templates/shared/repo/fileviewrender.tmpl

@@ -1,7 +1,4 @@
-<div class="file-view-render-container" data-global-init="initFileViewRender"
-	data-raw-file-link="{{$.RawFileLink}}"
-	data-fallback-text="{{ctx.Locale.Tr "repo.file_view_raw"}}"
-	data-error-header="{{ctx.Locale.Tr "repo.file_render_failed"}}">
+<div class="file-view-render-container" data-global-init="initFileViewRender" data-raw-file-link="{{$.RawFileLink}}">
 	<div class="file-view-raw-prompt tw-p-4">
 		<a href="{{$.RawFileLink}}" rel="nofollow">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 	</div>

web_src/css/file-view.css

@@ -1,3 +1,3 @@
-/* TODO: add more styles? */
-.file-view-render-container {
+.file-view-render-container :last-child {
+  border-radius: 0 0 var(--border-radius) var(--border-radius); /* to match the "ui segment" bottom radius */
 }

web_src/js/features/file-view.ts

@@ -1,9 +1,10 @@
-import {applyRenderPlugin} from '../modules/file-render-plugin.ts';
+import {findFileRenderPlugin} from '../modules/file-render-plugin.ts';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
 import {register3DViewerPlugin} from '../render/plugins/3d-viewer.ts';
 import {registerPdfViewerPlugin} from '../render/plugins/pdf-viewer.ts';
 import {htmlEscape} from 'escape-goat';
+import {basename} from '../utils.ts';
 
 export function initFileViewRender(): void {
   let pluginRegistered = false;
@@ -16,14 +17,23 @@ export function initFileViewRender(): void {
     }
 
     const rawFileLink = container.getAttribute('data-raw-file-link');
+    const mimeType = container.getAttribute('data-mime-type') || ''; // not used yet
     const elViewRawPrompt = container.querySelector('.file-view-raw-prompt');
     if (!rawFileLink || !elViewRawPrompt) throw new Error('unexpected file view container');
 
     let rendered = false, errorMsg = '';
     try {
-      rendered = await applyRenderPlugin(container, rawFileLink);
+      const plugin = findFileRenderPlugin(basename(rawFileLink), mimeType);
+      if (plugin) {
+        container.classList.add('is-loading');
+        container.setAttribute('data-render-name', plugin.name); // not used yet
+        await plugin.render(container, rawFileLink);
+        rendered = true;
+      }
     } catch (e) {
       errorMsg = `${e}`;
+    } finally {
+      container.classList.remove('is-loading');
     }
 
     if (rendered) {

web_src/js/modules/file-render-plugin.ts

@@ -15,37 +15,12 @@ export type FileRenderPlugin = {
   render: (container: HTMLElement, fileUrl: string, options?: any) => Promise<void>;
 }
 
-// store registered render plugins
 const plugins: FileRenderPlugin[] = [];
 
-/**
- * register a file render plugin
- */
 export function registerFileRenderPlugin(plugin: FileRenderPlugin): void {
   plugins.push(plugin);
 }
 
-/**
- * find suitable render plugin by filename and mime type
- */
-function findPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
+export function findFileRenderPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
   return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
 }
-
-/**
- * apply render plugin to specified container
- */
-export async function applyRenderPlugin(container: HTMLElement, rawFileLink: string): Promise<boolean> {
-  try {
-    const mimeType = container.getAttribute('data-mime-type') || '';
-    const plugin = findPlugin(rawFileLink, mimeType);
-    if (!plugin) return false;
-
-    container.classList.add('is-loading');
-    container.setAttribute('data-render-name', plugin.name);
-    await plugin.render(container, rawFileLink);
-    return true;
-  } finally {
-    container.classList.remove('is-loading');
-  }
-}