Change file content from MarkdownCodeBlockProcessor

I want to develop a Plugin where I store some custom data in a Code Block and render a custom ui with a MarkdownCodeBlockProcessor. The goal is to allow users to change the data within the custom ui and write the changes back to Markdown. I’ve tried to get the position in the markdown document with posAtDom but It throws a RangeError when trying to get the position of the CodeBlock element.
this is the code I currently have:

this.registerMarkdownCodeBlockProcessor("pergament", (source, el, ctx) => {			
			const text = document.createElement("div");
			text.innerHTML = source;
			el.appendChild(text);

			console.log(ctx.getSectionInfo(text));

			const markDownView: MarkdownView | null = this.app.workspace.getActiveViewOfType(MarkdownView)
			if (markDownView) {
				const editorView: EditorView = markDownView.editor.cm as EditorView;

				//const element = editorView.contentDOM.getElementsByClassName("cm-hmd-codeblock").item(1);
				
				const pos = editorView.posAtDOM(el);
				const line = editorView.state.doc.lineAt(pos);
			}
		});

and this is the error I’m getting when running it:

app.js:1 Uncaught RangeError: Trying to find position for a DOM position outside of the document
    at t.posFromDOM (app.js:1:379108)
    at e.posAtDOM (app.js:1:470028)
    at eval (main.ts:35:28)
    at app.js:1:1202696
    at t.postProcess (app.js:1:1275693)
    at t.postProcess (app.js:1:1274521)
    at h (app.js:1:1190197)
    at e.onRender (app.js:1:1190457)

Basically I want to be able to write to the CodeBlock I am rendering. Is this possible?