Add basic live preview support

Author: samwarnick

main.ts

@@ -11,9 +11,18 @@ import {
   TwitterEmbed,
   YouTubeEmbed,
 } from "./embeds";
-import { debounce, Debouncer, MarkdownView, Plugin } from "obsidian";
+import { debounce, Debouncer, MarkdownView, Plugin, setIcon } from "obsidian";
 import { DEFAULT_SETTINGS, PluginSettings } from "./settings";
 import { SimpleEmbedPluginSettingTab } from "./settings-tab";
+import { RangeSetBuilder } from "@codemirror/rangeset";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
 
 export default class SimpleEmbedsPlugin extends Plugin {
   settings: PluginSettings;
@@ -27,7 +36,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
     new GitHubGistEmbed(),
     new AppleMusicEmbed(),
     new ApplePodcastsEmbed(),
-    new AppleTVEmbed()
+    new AppleTVEmbed(),
   ];
   processedMarkdown: Debouncer<[]>;
   currentTheme: "dark" | "light";
@@ -39,6 +48,9 @@ export default class SimpleEmbedsPlugin extends Plugin {
 
     this.currentTheme = this._getCurrentTheme();
 
+    const ext = this.buildAttributesViewPlugin(this);
+    this.registerEditorExtension(ext);
+
     this.processedMarkdown = debounce(() => {
       this.embedSources.forEach((source) => {
         source.afterAllEmbeds?.();
@@ -72,6 +84,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
   onunload() {
     console.log(`Unloading ${this.manifest.name}`);
     this.processedMarkdown = null;
+    // TODO: Clear all widgets
   }
 
   async loadSettings() {
@@ -122,7 +135,12 @@ export default class SimpleEmbedsPlugin extends Plugin {
     });
 
     if (embedSource && replaceWithEmbed) {
-      const embed = embedSource.createEmbed(href, container, this.settings, this.currentTheme);
+      const embed = embedSource.createEmbed(
+        href,
+        container,
+        this.settings,
+        this.currentTheme,
+      );
       if (fullWidth) {
         embed.classList.add("full-width");
       }
@@ -145,4 +163,122 @@ export default class SimpleEmbedsPlugin extends Plugin {
       parent.replaceChild(container, a);
     }
   }
+
+  get isLivePreviewSupported(): boolean {
+    return (this.app.vault as any).config?.livePreview;
+  }
+
+  buildAttributesViewPlugin(plugin: SimpleEmbedsPlugin) {
+    class EmbedWidget extends WidgetType {
+      constructor(
+        readonly link: string,
+        readonly embed: EmbedSource,
+        readonly settings: Readonly<PluginSettings>,
+        readonly theme: "light" | "dark",
+      ) {
+        super();
+      }
+
+      eq(other: EmbedWidget) {
+        return other.link === this.link;
+      }
+
+      toDOM() {
+        let el = document.createElement("div");
+        return this.embed.createEmbed(this.link, el, this.settings, this.theme);
+      }
+
+      ignoreEvent() {
+        return true;
+      }
+    }
+
+    const viewPlugin = ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = this.buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          if (
+            update.docChanged || update.viewportChanged || update.selectionSet
+          ) {
+            this.decorations = this.buildDecorations(update.view);
+          }
+        }
+
+        destroy() {
+        }
+
+        buildDecorations(view: EditorView) {
+          let builder = new RangeSetBuilder<Decoration>();
+
+          let lines: number[] = [];
+          if (view.state.doc.length > 0) {
+            lines = Array.from(
+              { length: view.state.doc.lines },
+              (_, i) => i + 1,
+            );
+          }
+
+          const currentSelections = [...view.state.selection.ranges];
+
+          for (let n of lines) {
+            const line = view.state.doc.line(n);
+            const startOfLine = line.from;
+            const endOfLine = line.to;
+
+            let currentLine = false;
+
+            currentSelections.forEach((r) => {
+              if (r.from >= startOfLine && r.to <= endOfLine) {
+                currentLine = true;
+                return;
+              }
+            });
+
+            const mdLink = line.text.match(/\[.*\]\(\S*\)/)?.first().trim();
+            if (!currentLine && mdLink) {
+              const start = line.text.indexOf(mdLink) + startOfLine;
+              const end = start + mdLink.length;
+              let embedSource = plugin.embedSources.find((source) => {
+                return plugin.settings[source.enabledKey] &&
+                  source.regex.test(line.text);
+              });
+              if (embedSource) {
+                const link = line.text.match(embedSource.regex).first();
+                const deco = Decoration.replace({
+                  widget: new EmbedWidget(
+                    link,
+                    embedSource,
+                    plugin.settings,
+                    plugin.currentTheme,
+                  ),
+                  inclusive: false,
+                });
+                if (plugin.settings.keepLinksInPreview) {
+                  if (plugin.settings.embedPlacement === "above") {
+                    builder.add(start, start, deco);
+                  } else if (plugin.settings.embedPlacement === "below") {
+                    builder.add(end, end, deco);
+                  }
+                } else {
+                  builder.add(start, end, deco);
+                }
+              }
+            }
+          }
+
+          return builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    );
+
+    return viewPlugin;
+  }
 }

package.json

@@ -12,13 +12,24 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@codemirror/rangeset": "^0.19.0",
+    "@codemirror/state": "^0.19.0",
+    "@codemirror/view": "^0.19.0",
+    "@codemirror/commands": "^0.19.0",
+    "@codemirror/fold": "0.19.0",
+    "@codemirror/history": "^0.19.0",
+    "@codemirror/language": "^0.19.0",
+    "@codemirror/matchbrackets": "^0.19.0",
+    "@codemirror/panel": "^0.19.0",
+    "@codemirror/search": "^0.19.0",
+    "@codemirror/stream-parser": "https://github.com/lishid/stream-parser",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
     "@types/jest": "^27.0.2",
     "@types/node": "^14.14.37",
     "jest": "^27.3.1",
-    "obsidian": "^0.12.0",
+    "obsidian": "^0.13.0",
     "rollup": "^2.32.1",
     "ts-jest": "^27.0.7",
     "tslib": "^2.2.0",

rollup.config.js

@@ -1,30 +1,54 @@
-import typescript from '@rollup/plugin-typescript';
-import {nodeResolve} from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
+import typescript from "@rollup/plugin-typescript";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import builtins from "builtin-modules";
 
-const isProd = (process.env.BUILD === 'production');
+const isProd = process.env.BUILD === "production";
 
-const banner = 
-`/*
+const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
 if you want to view the source visit the plugins github repository
 */
 `;
 
 export default {
-  input: 'main.ts',
+  input: "main.ts",
   output: {
-    dir: '.',
-    sourcemap: 'inline',
+    dir: ".",
+    sourcemap: "inline",
     sourcemapExcludeSources: isProd,
-    format: 'cjs',
-    exports: 'default',
+    format: "cjs",
+    exports: "default",
     banner,
   },
-  external: ['obsidian'],
-  plugins: [
-    typescript(),
-    nodeResolve({browser: true}),
-    commonjs(),
-  ]
-};
+  external: [
+    "obsidian",
+    "electron",
+    "codemirror",
+    "@codemirror/autocomplete",
+    "@codemirror/closebrackets",
+    "@codemirror/collab",
+    "@codemirror/commands",
+    "@codemirror/comment",
+    "@codemirror/fold",
+    "@codemirror/gutter",
+    "@codemirror/highlight",
+    "@codemirror/history",
+    "@codemirror/language",
+    "@codemirror/lint",
+    "@codemirror/matchbrackets",
+    "@codemirror/panel",
+    "@codemirror/rangeset",
+    "@codemirror/rectangular-selection",
+    "@codemirror/search",
+    "@codemirror/state",
+    "@codemirror/stream-parser",
+    "@codemirror/text",
+    "@codemirror/tooltip",
+    "@codemirror/view",
+    "@lezer/common",
+    "@lezer/lr",
+    ...builtins,
+  ],
+  plugins: [typescript(), nodeResolve({ browser: true }), commonjs()],
+};