Register codemirror view Plugin und anderes

package-lock.json

@@ -11,6 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"cheerio": "^1.0.0-rc.12",
+				"fetch-jsonp": "^1.3.0",
 				"oldp-api": "^0.1.0"
 			},
 			"devDependencies": {
@@ -1581,6 +1582,11 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fetch-jsonp": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/fetch-jsonp/-/fetch-jsonp-1.3.0.tgz",
+			"integrity": "sha512-hxCYGvmANEmpkHpeWY8Kawfa5Z1t2csTpIClIDG/0S92eALWHRU1RnGaj86Tf5Cc0QF+afSa4SQ4pFB2rFM5QA=="
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",

src/law-editor-processor.ts

@@ -0,0 +1,65 @@
+import {
+    Decoration,
+    DecorationSet,
+    EditorView,
+    PluginSpec,
+    PluginValue,
+    ViewPlugin,
+    ViewUpdate,
+    WidgetType,
+  } from '@codemirror/view';
+
+import {
+/** EditorState, 
+    StateField **/
+    RangeSetBuilder
+} from '@codemirror/state'; 
+
+import { syntaxTree } from '@codemirror/language';
+
+class LawRefPluginEditorProcessor 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: any) {
+                    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 EmojiWidget(),
+                            })
+                        );
+                    }
+                },
+            });
+        }
+    
+        return builder.finish();
+    }
+}
+  
+export const lawRefPluginEditorProcessor = ViewPlugin.fromClass(LawRefPluginEditorProcessor);
+

src/law-view.ts

@@ -16,9 +16,10 @@ export class ExampleView extends ItemView {
   }
 
   async onOpen() {
+    console.log(this.containerEl);
     const container = this.containerEl.children[1];
     container.empty();
-    container.createEl("h4", { text: "Example view" });
+    container.createEl("h2", { text: "Gesetzesauszüge" });
   }
 
   async onClose() {

src/main.ts

@@ -1,7 +1,9 @@
-import { App, Modal, Notice, Plugin, PluginSettingTab, Setting, Vault, Workspace, WorkspaceLeaf, MarkdownPostProcessorContext } from 'obsidian';
+import { App, Modal, Notice, Plugin, PluginSettingTab, Setting, Vault, Workspace, WorkspaceLeaf, MarkdownPostProcessorContext, parseFrontMatterEntry } from 'obsidian';
-import { VIEW_TYPE_EXAMPLE } from './law-view';
+import { ExampleView, VIEW_TYPE_EXAMPLE } from './law-view';
 import { OldpApi } from './api/opld';
 import LawSuggester from './lawSuggester';
+import { lawRefPluginEditorProcessor } from './law-editor-processor';
+import { syntaxTree } from '@codemirror/language';
 
 // Remember to rename these classes and interfaces!
 
@@ -16,10 +18,10 @@ const DEFAULT_SETTINGS: LawRefPluginSettings = {
 export default class LawRefPlugin extends Plugin {
 	settings: LawRefPluginSettings;
 	private readonly OldpApi = new OldpApi();
-
 	async onload() {
 		await this.loadSettings();
-
+		this.registerView(VIEW_TYPE_EXAMPLE, (leaf) => new ExampleView(leaf))
+		this.registerEditorExtension(lawRefPluginEditorProcessor);
 		// This adds a settings tab so the user can configure various aspects of the plugin
 		this.addSettingTab(new SampleSettingTab(this.app, this));
 
@@ -29,6 +31,12 @@ export default class LawRefPlugin extends Plugin {
 			console.log('click', evt);
 		});
 
+		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+			// Called when the user clicks the icon.
+			new Notice('This is a notice!');
+			this.activateView();
+		});
+
 		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
 
@@ -56,24 +64,36 @@ export default class LawRefPlugin extends Plugin {
 		  // Our view could not be found in the workspace, create a new leaf
 		  // in the right sidebar for it
 		  leaf = workspace.getRightLeaf(false);
-		  //await leaf.setViewState({ type: VIEW_TYPE_EXAMPLE, active: true });
+		  await leaf.setViewState({ type: VIEW_TYPE_EXAMPLE, active: true });
+
 
 		}
+
+
 		// "Reveal" the leaf in case it is in a collapsed sidebar
-		//workspace.revealLeaf(leaf);
+		workspace.revealLeaf(leaf);
 	}
 	async getFrontMatterMeta(){
 		const { workspace } = this.app;
 		const actFile = workspace.getActiveFile();
 		  	if (!actFile) return
-			  const metadata = app.metadataCache.getFileCache(actFile);
+			  const actFilemetadata = app.metadataCache.getFileCache(actFile);
-			if (!metadata) return console.log("no metadata");
+			if (!actFilemetadata) return console.log("no metadata");
-			let returner = metadata.frontmatter;
+			let actFileFrontmatter = actFilemetadata.frontmatter;
-			if (returner) {
+			let LawRefList = parseFrontMatterEntry(actFileFrontmatter, '§');
-				const oldpApi = new OldpApi();
+			if (LawRefList) {
-				console.log(returner['§']);
+				console.log(LawRefList);
-				console.log(await oldpApi.search(returner['§']));
 			}
+			this.app.workspace.getLeavesOfType(VIEW_TYPE_EXAMPLE).forEach((leaf) => {
+				if (leaf.view instanceof ExampleView) {
+					const container = leaf.view.containerEl.children[1];
+					container.empty;
+					console.log(container)
+					LawRefList.forEach((element:string) => {
+						const elementResponse = this.OldpApi.search(element);
+						container.createEl("p", {cls: "LawRefContainer", text: element})});
+				}
+			  });
 	}
 
 

styles.css

@@ -9,6 +9,7 @@
   left: 0;
   border-radius: 15px;
   background-color: white;
+  color: black;
   padding: 0.9rem;
   z-index: 100;
   max-width: 300px;
@@ -18,3 +19,10 @@
 .lawRef-suggestion-container:hover .lawRef-snippet {
   display: block;
 }
+
+.LawRefContainer {
+  background-color: #929292; /* Grauer Hintergrund */
+  color: #000000; /* Schwarze Schrift */
+  padding: 10px; /* Etwas Innenabstand */
+  border-radius: 5px; /* Abgerundete Ecken */
+}