2.8.0-beta-3, import pdf-lib on demand, fixed area hover preview, fix…

…ed local font in popout windows, fixed scrollable elements panel and context menu on (not only mobile)

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "2.8.0-beta-2",
+	"version": "2.8.0-beta-3",
 	"minAppVersion": "1.1.6",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

rollup.config.js

@@ -147,6 +147,7 @@ const BUILD_CONFIG = {
     entryFileNames: 'main.js',
     format: 'cjs',
     exports: 'default',
+    inlineDynamicImports: true, // Add this line only
   },
   plugins: getRollupPlugins(
     {

src/core/managers/MarkdownPostProcessor.ts

@@ -801,15 +801,16 @@ const tmpObsidianWYSIWYG = async (
     if(Boolean(ctx.frontmatter)) {
       el.empty();
     } else {
-      const warningEl = el.querySelector("div>h3[data-heading^='Unable to find section #^");
+      //Obsidian changed this at some point from h3 to h5 and also the text...
+      const warningEl = el.querySelector("div>*[data-heading^='Unable to find ");
       if(warningEl) {
-        const ref = warningEl.getAttr("data-heading").match(/Unable to find section (#\^(?:group=|area=|frame=|clippedframe=)[^ ]*)/)?.[1];
+        const dataHeading = warningEl.getAttr("data-heading");
+        const ref = warningEl.getAttr("data-heading").match(/Unable to find[^^]+(\^(?:group=|area=|frame=|clippedframe=)[^ ”]+)/)?.[1];
         if(ref) {
-          attr.fname = file.path + ref;
+          attr.fname = file.path + "#" +ref;
           areaPreview = true;
         }
       }
-
     }
     if(!isFrontmatterDiv && !areaPreview) {
       if(el.parentElement === containerEl) containerEl.removeChild(el);

src/core/settings.ts

@@ -2509,6 +2509,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.requestReloadDrawings = true;
             this.plugin.settings.experimentalEnableFourthFont = value;
             this.applySettingsUpdate();
+            if(value) {
+              this.plugin.initializeFonts();
+            }
           }),
       );
 

src/utils/exportUtils.ts

@@ -1,9 +1,18 @@
-import { PDFDocument, rgb } from '@cantoo/pdf-lib';
-import exp from 'constants';
 import { Notice } from 'obsidian';
 import { getEA } from 'src/core';
 import { t } from 'src/lang/helpers';
 
+// Define proper types for PDFLib
+type PDFLibType = typeof import('@cantoo/pdf-lib');
+let pdfLibPromise: Promise<PDFLibType> | null = null;
+
+async function getPDFLib(): Promise<PDFLibType> {
+  if (!pdfLibPromise) {
+    pdfLibPromise = import('@cantoo/pdf-lib');
+  }
+  return pdfLibPromise;
+}
+
 const PDF_DPI = 72;
 
 export type PDFPageAlignment = "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
@@ -223,12 +232,13 @@ function calculateDimensions(
 }
 
 async function addSVGToPage(
-  pdfDoc: PDFDocument,
+  pdfDoc: Awaited<ReturnType<typeof import('@cantoo/pdf-lib').PDFDocument.create>>,
   svg: SVGSVGElement,
   dimensions: SVGDimensions,
   pageDim: PageDimensions,
   pageProps: PDFPageProperties
 ) {
+  const { rgb } = await getPDFLib();
   const page = pdfDoc.addPage([pageDim.width, pageDim.height]);
 
   if (pageProps.backgroundColor && pageProps.backgroundColor !== '#ffffff') {
@@ -315,13 +325,15 @@ export async function exportToPDF({
   scale: PDFExportScale;
   pageProps: PDFPageProperties;
 }): Promise<ArrayBuffer> {
-
+  const { PDFDocument } = await getPDFLib();
   const pdfDoc = await PDFDocument.create();
 
   const msg = t('EXPORTDIALOG_PDF_PROGRESS_NOTICE');
   const imgmsg = t('EXPORTDIALOG_PDF_PROGRESS_IMAGE');
 
   let notice = new Notice(msg, 0);
+  //@ts-ignore
+  let noticeContainerEl = notice.containerEl ?? notice.noticeEl;
 
   let j=1;
   for (const svg of SVG) {
@@ -339,20 +351,21 @@ export async function exportToPDF({
     );
 
     let i=1;
-    for (const dim of dimensions) {
-      //@ts-ignore
-      if(notice.containerEl.parentElement) {
+    for (const dim of dimensions) {    
+      if(noticeContainerEl.parentElement) {
         notice.setMessage(`${msg} ${i++}/${dimensions.length}${SVG.length>1?` ${imgmsg} ${j}`:""}`);
       } else {
         notice = new Notice(`${msg} ${i++}/${dimensions.length}${SVG.length>1?` ${imgmsg} ${j}`:""}`, 0);
+        //@ts-ignore
+        noticeContainerEl = notice.containerEl ?? notice.noticeEl;
       }
       await addSVGToPage(pdfDoc, svg, dim, pageProps.dimensions, pageProps);
     }
     j++;
   }
 
   //@ts-ignore
-  if(notice.containerEl.parentElement) {
+  if(noticeContainerEl.parentElement) {
     notice.setMessage(t('EXPORTDIALOG_PDF_PROGRESS_DONE'));
     setTimeout(() => notice.hide(), 4000);
   } else {

src/view/ExcalidrawView.ts

@@ -1578,6 +1578,9 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     this.packages = this.plugin.getPackage(this.ownerWindow);
 
     if(DEVICE.isDesktop && !apiMissing) {
+      if(this.ownerWindow !== window) {
+        this.plugin.initializeFonts();
+      }
       this.destroyers.push(
         //this.containerEl.onWindowMigrated(this.leaf.rebuildView.bind(this))
         this.containerEl.onWindowMigrated(async() => {

styles.css

@@ -116,6 +116,7 @@ li[data-testid] {
   border: 0 !important;
   box-shadow: 0 !important;
   background-color: transparent !important;
+  overflow-y: auto !important;
 } 
 
 .excalidraw .popover {
@@ -336,6 +337,16 @@ label.color-input-container > input {
   display: none !important;
 }
 
+.excalidraw .App-toolbar-content .dropdown-menu {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.excalidraw .panelColumn {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
 .excalidraw .panelColumn .buttonList {
   max-width: 13rem;
 }