Testing Live preview. (Not working yet, moving to another computer)

Mostly follows the code from https://docs.obsidian.md/Plugins/Editor/Decorations#State+fields

src/embed-state-field.ts

@@ -0,0 +1,99 @@
+import { syntaxTree } from "@codemirror/language"
+import { Extension, RangeSetBuilder, StateField, Transaction } from "@codemirror/state"
+import { Decoration, DecorationSet, EditorView, WidgetType } from "@codemirror/view"
+import { EmbedWidget } from "./embed-widget";
+
+export const embedField = StateField.define<DecorationSet>({
+    create(state): DecorationSet {
+        return Decoration.none;
+    },
+    update(oldState: DecorationSet, transaction: Transaction): DecorationSet {
+        const builder = new RangeSetBuilder<Decoration>();
+
+        syntaxTree(transaction.state).iterate({
+            enter(node) {
+                console.log("Type: " + node.type.name)
+                if (node.type.name === "formatting_formatting-link-string_string_url") {
+                    builder.add(
+                        node.from,
+                        node.to,
+                        Decoration.replace({ widget: new EmbedWidget(), }) 
+                    );
+                }
+            },
+        });
+
+        return builder.finish();
+    },
+    provide(field: StateField<DecorationSet>): Extension {
+        return EditorView.decorations.from(field);
+    }
+})
+
+// import { syntaxTree } from "@codemirror/language";
+// import { RangeSetBuilder } from "@codemirror/state";
+// import {
+//   Decoration,
+//   DecorationSet,
+//   EditorView,
+//   PluginSpec,
+//   PluginValue,
+//   ViewPlugin,
+//   ViewUpdate,
+//   WidgetType,
+// } from "@codemirror/view";
+// import { EmbedWidget } from "./embed-widget";
+
+// class EmojiListPlugin implements PluginValue {
+//   decorations: DecorationSet;
+
+//   constructor(view: EditorView) {
+//     this.decorations = this.buildDecorations(view);
+//   }
+
+//   update(update: ViewUpdate) {
+//     if (update.docChanged || update.viewportChanged) {
+//       this.decorations = this.buildDecorations(update.view);
+//     }
+//   }
+
+//   destroy() {}
+
+//   buildDecorations(view: EditorView): DecorationSet {
+//     const builder = new RangeSetBuilder<Decoration>();
+
+//     for (let { from, to } of view.visibleRanges) {
+//       syntaxTree(view.state).iterate({
+//         from,
+//         to,
+//         enter(node) {
+
+//             console.log("Type (State): " + node.type.name)
+//           if (node.type.name.startsWith("list")) {
+//             // Position of the '-' or the '*'.
+//             const listCharFrom = node.from - 2;
+
+//             builder.add(
+//               listCharFrom,
+//               listCharFrom + 1,
+//               Decoration.replace({
+//                 widget: new EmbedWidget(),
+//               })
+//             );
+//           }
+//         },
+//       });
+//     }
+
+//     return builder.finish();
+//   }
+// }
+
+// const pluginSpec: PluginSpec<EmojiListPlugin> = {
+//   decorations: (value: EmojiListPlugin) => value.decorations,
+// };
+
+// export const emojiListPlugin = ViewPlugin.fromClass(
+//   EmojiListPlugin,
+//   pluginSpec
+// );

src/embed-widget.ts

@@ -0,0 +1,15 @@
+import { EditorView, WidgetType } from "@codemirror/view"
+
+export class EmbedWidget extends WidgetType {
+    toDOM(view: EditorView): HTMLElement {
+        // const div = createDiv({text: "Embed Widget Text"});
+        
+        // return div;
+
+        const div = document.createElement("span");
+
+        div.innerText = "👉";
+
+        return div;
+    }
+}

src/main.ts

@@ -10,6 +10,7 @@ import { ImgurEmbed } from 'src/embeds/imgur';
 import { SpotifyEmbed } from 'src/embeds/spotify';
 import SuggestEmbed from 'src/suggestEmbed';
 import { isURL, regexUrl } from 'src/utility';
+import { embedField } from './embed-state-field';
 
 class PasteInfo {
 	trigger: boolean;
@@ -45,8 +46,13 @@ export default class AutoEmbedPlugin extends Plugin {
 		console.log('loading plugin');
 		await this.loadSettings();
 
+		this.registerEditorExtension(embedField);
+		console.log("A      ")
 		this.addSettingTab(new AutoEmbedSettingTab(this.app, this));
-
+		
+		// Remove while testing editor extension
+		return;
+		console.log("B")
 		this.registerDomEvent(document, "keydown", (e) => {
 			if (e.shiftKey)
 				this.isShiftDown = true;
@@ -202,4 +208,14 @@ export default class AutoEmbedPlugin extends Plugin {
 		const embed = embedSource.createEmbed(link);
 		return embed; 
 	}
+	
+	isLiveViewSupported() {
+		if ((this.app.vault as any).config?.livePreview) {
+			// todo
+			console.log("Live view is supported");
+		}
+		else {
+			console.log("Live view is not supported");
+		}
+	}
 }