Improve Load Unload Extension Mechanism

Author: Ozan Tellioglu

README.md

@@ -31,7 +31,7 @@ FORMAT: ![[IMAGE_PATH_OR_NAME]]
 SAMPLE: ![[myimage.png]]
 ```
 
-**Scanned Image Formats** : `jpg`, `jpeg`, `png`, `gif`, `svg`, `bmp`
+**Scanned Image Formats** : `jpg`, `jpeg`, `png`, `gif`, `svg`, `bmp`, `webp`
 
 ## 📕 Image View Size
 

src/cm6/viewPlugin.ts

@@ -3,7 +3,6 @@ import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
 import OzanImagePlugin from 'src/main';
 import { StatefulDecorationSet } from 'src/cm6/decorations';
 import { livePreviewActive, pluginIsLoaded } from 'src/util/obsidianHelper';
-import { MSGHandlerPlugin } from 'src/types';
 
 // --> View Plugin
 export const getViewPlugin = (params: { plugin: OzanImagePlugin }): Extension => {

src/main.ts

@@ -4,9 +4,11 @@ import { OzanImagePluginSettings, DEFAULT_SETTINGS } from './settings';
 import * as ObsidianHelpers from 'src/util/obsidianHelper';
 import * as ImageHandler from 'src/util/imageHandler';
 import { buildExtension } from 'src/cm6';
+import { Extension } from '@codemirror/state';
 
 export default class OzanImagePlugin extends Plugin {
     settings: OzanImagePluginSettings;
+    editorExtensions: Extension[] = [];
 
     async onload() {
         console.log('Image in Editor Plugin is loaded');
@@ -77,10 +79,8 @@ export default class OzanImagePlugin extends Plugin {
         }
 
         // --> New Editor (CM6)
-        if (this.settings.cm6RenderAll) {
-            const extension = buildExtension({ plugin: this });
-            this.registerEditorExtension(extension);
-        }
+        this.registerEditorExtension(this.editorExtensions);
+        if (this.settings.cm6RenderAll) this.loadCM6Extension();
 
         // --> Custom Event Listeners
         document.on('click', `.oz-obsidian-inner-link`, this.onClickTransclusionLink);
@@ -106,6 +106,17 @@ export default class OzanImagePlugin extends Plugin {
         await this.saveData(this.settings);
     }
 
+    loadCM6Extension = () => {
+        const extension = buildExtension({ plugin: this });
+        this.editorExtensions.push(extension);
+        this.app.workspace.updateOptions();
+    };
+
+    unloadCM6Extension = () => {
+        this.editorExtensions.length = 0;
+        this.app.workspace.updateOptions();
+    };
+
     // Context Menu for Rendered Images
     onImageMenu = (event: MouseEvent, target: HTMLElement) => {
         const file = this.app.vault.getAbstractFileByPath(target.dataset.path);

src/settings.ts

@@ -80,13 +80,18 @@ export class OzanImagePluginSettingsTab extends PluginSettingTab {
             .addToggle((toggle) => {
                 toggle.setValue(this.plugin.settings.cm6RenderAll).onChange((value) => {
                     this.plugin.settings.cm6RenderAll = value;
+                    if (value) {
+                        this.plugin.loadCM6Extension();
+                    } else {
+                        this.plugin.unloadCM6Extension();
+                    }
                     this.plugin.saveSettings();
                 });
             });
 
         new Setting(containerEl)
             .setName('Render Images in Editor')
-            .setDesc('Turn on this option if you want Image files (jpeg, jpg, png, gif, svg, bmp) to be rendered in Editor')
+            .setDesc('Turn on this option if you want Image files (jpeg, jpg, png, gif, svg, bmp, webp) to be rendered in Editor')
             .addToggle((toggle) =>
                 toggle.setValue(this.plugin.settings.renderImages).onChange((value) => {
                     this.plugin.settings.renderImages = value;