css rework

.gitignore

@@ -13,6 +13,7 @@ stats.html
 hot-reload.bat
 data.json
 lib
+dist
 
 #VSCode
 .vscode

package.json

@@ -56,14 +56,16 @@
     "obsidian": "^1.4.0",
     "prettier": "^3.0.1",
     "rollup": "^2.70.1",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postprocess": "github:brettz9/rollup-plugin-postprocess#update",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "tslib": "^2.6.1",
     "ttypescript": "^1.5.15",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "cssnano": "^6.0.2"
+
   },
   "resolutions": {
     "@typescript-eslint/typescript-estree": "5.3.0"

rollup.config.js

@@ -10,7 +10,9 @@ import webWorker from "rollup-plugin-web-worker-loader";
 import fs from'fs';
 import LZString from 'lz-string';
 import postprocess from 'rollup-plugin-postprocess';
+import cssnano from 'cssnano';
 
+const DIST_FOLDER = 'dist'; 
 const isProd = (process.env.NODE_ENV === "production")
 const isLib = (process.env.NODE_ENV === "lib");
 console.log(`Running: ${process.env.NODE_ENV}`);
@@ -25,6 +27,21 @@ const reactdom_pkg = isLib ? "" : isProd
   ? fs.readFileSync("./node_modules/react-dom/umd/react-dom.production.min.js", "utf8")
   : fs.readFileSync("./node_modules/react-dom/umd/react-dom.development.js", "utf8");
 const lzstring_pkg = isLib ? "" : fs.readFileSync("./node_modules/lz-string/libs/lz-string.min.js", "utf8");
+if(!isLib) {
+  const excalidraw_styles = isProd
+    ? fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/styles.production.css", "utf8")
+    : fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/styles.development.css", "utf8");
+  const plugin_styles = fs.readFileSync("./styles.css", "utf8")
+  const styles = plugin_styles + excalidraw_styles;
+  cssnano() 
+    .process(styles) // Process the CSS
+    .then(result => {
+      fs.writeFileSync(`./${DIST_FOLDER}/styles.css`, result.css);
+    })
+    .catch(error => {
+      console.error('Error while processing CSS:', error);
+    });
+}
 
 const manifestStr = isLib ? "" : fs.readFileSync("manifest.json", "utf-8");
 const manifest = isLib ? {} : JSON.parse(manifestStr);
@@ -55,7 +72,8 @@ const getRollupPlugins = (tsconfig, ...plugins) =>
 const BUILD_CONFIG = {
   ...BASE_CONFIG,
   output: {
-    dir: '.',
+    dir: DIST_FOLDER,
+    entryFileNames: 'main.js',
     sourcemap: isProd?false:'inline',
     format: 'cjs',
     exports: 'default',
@@ -97,6 +115,12 @@ const BUILD_CONFIG = {
         [/var React = require\('react'\);/, packageString],
       ])
     ],
+    copy({
+      targets: [
+        { src: 'manifest.json', dest: DIST_FOLDER },
+      ],
+      verbose: true, // Optional: To display copied files in the console
+    }),
   ],
 }
 

src/main.ts

@@ -44,6 +44,9 @@ import {
 import {
   VIRGIL_FONT,
   VIRGIL_DATAURL,
+  CASCADIA_FONT,
+  ASSISTANT_FONT,
+  FONTS_STYLE_ID,
 } from "./constants/constFonts";
 import ExcalidrawView, { TextMode, getTextMode } from "./ExcalidrawView";
 import {
@@ -263,7 +266,7 @@ export default class ExcalidrawPlugin extends Plugin {
     this.registerCommands();
     this.registerEventListeners();
     this.runStartupScript();
-    this.initializeFourthFont();
+    this.initializeFonts();
     this.registerEditorSuggest(new FieldSuggester(this));
 
     //inspiration taken from kanban:
@@ -296,7 +299,7 @@ export default class ExcalidrawPlugin extends Plugin {
     this.taskbone = new Taskbone(this);
   }
 
-  public initializeFourthFont() {
+  public initializeFonts() {
     this.app.workspace.onLayoutReady(async () => {
       const font = await getFontDataURL(
         this.app,
@@ -309,26 +312,35 @@ export default class ExcalidrawPlugin extends Plugin {
       this.fourthFontDef = font.fontDef;
       
       this.getOpenObsidianDocuments().forEach((ownerDocument) => {
-        // replace the old local font <style> element with the one we just created
-        const newStylesheet = ownerDocument.createElement("style");
-        newStylesheet.id = "local-font-stylesheet";
-        newStylesheet.textContent = `
-          @font-face {
-            font-family: 'LocalFont';
-            src: url("${fourthFontDataURL}");
-            font-display: swap;
-          }
-        `;  
-        const oldStylesheet = ownerDocument.getElementById(newStylesheet.id);
-        ownerDocument.head.appendChild(newStylesheet);
-        if (oldStylesheet) {
-          ownerDocument.head.removeChild(oldStylesheet);
-        }
-        ownerDocument.fonts.load('20px LocalFont');
+        this.addFonts([
+          `@font-face{font-family:'LocalFont';src:url("${fourthFontDataURL}");font-display: swap;`,
+        ],ownerDocument);
       })
     });
   }
 
+  public addFonts(declarations: string[],ownerDocument:Document = document) {
+    // replace the old local font <style> element with the one we just created
+    const newStylesheet = ownerDocument.createElement("style");
+    newStylesheet.id = FONTS_STYLE_ID;
+    newStylesheet.textContent = declarations.join("");
+    const oldStylesheet = ownerDocument.getElementById(FONTS_STYLE_ID);
+    ownerDocument.head.appendChild(newStylesheet);
+    if (oldStylesheet) {
+      ownerDocument.head.removeChild(oldStylesheet);
+    }
+    ownerDocument.fonts.load('20px LocalFont');
+  }
+
+  public removeFonts() {
+    this.getOpenObsidianDocuments().forEach((ownerDocument) => {
+      const oldStylesheet = ownerDocument.getElementById(FONTS_STYLE_ID);
+      if (oldStylesheet) {
+        ownerDocument.head.removeChild(oldStylesheet);
+      }
+    })
+  }
+  
   private getOpenObsidianDocuments(): Document[] {
     const visitedDocs = new Set<Document>();
     this.app.workspace.iterateAllLeaves((leaf)=>{
@@ -1969,7 +1981,7 @@ export default class ExcalidrawPlugin extends Plugin {
       self.registerEvent(app.vault.on("rename", renameEventHandler));
 
       const modifyEventHandler = async (file: TFile) => {
-        const leaves = app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+        const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
         leaves.forEach(async (leaf: WorkspaceLeaf) => {
           const excalidrawView = leaf.view as ExcalidrawView;
           if (
@@ -2338,6 +2350,8 @@ export default class ExcalidrawPlugin extends Plugin {
     this.modalContainerObserver = null;
   }
 
+  //managing my own list of Excalidraw files because in the onDelete event handler
+  //the file object is already gone from metadataCache, thus I can't check if it was an Excalidraw file
   updateFileCache(
     file: TFile,
     frontmatter?: FrontMatterCache,
@@ -2357,6 +2371,7 @@ export default class ExcalidrawPlugin extends Plugin {
   onunload() {
     document.body.removeChild(this.textMeasureDiv);
     this.stylesManager.unload();
+    this.removeFonts();
     this.removeEventLisnters.forEach((removeEventListener) =>
       removeEventListener(),
     );

src/settings.ts

@@ -1969,7 +1969,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.requestReloadDrawings = true;
             this.plugin.settings.experimantalFourthFont = value;
             this.applySettingsUpdate(true);
-            this.plugin.initializeFourthFont();
+            this.plugin.initializeFonts();
           },
         );
       });