move to use html img element

client/components/codeEditor/codeEditor.less

@@ -161,44 +161,28 @@
 		outline : 1px inset #00000055 !important;
 	}
 
-	.cm-image[style] {
-		position: relative;
-
-		&::before, &::after {
-			content:"";
+	.cm-image {
+		position:relative;
+		
+		.cm-preview {
+			object-fit: contain;
 			position:absolute;
 			bottom:0;
 			left:0;
-			translate:0 100%;
-			display:block;
-			z-index:1000;
-			pointer-events: none;
-			opacity:0;
-			transition:0.2s opacity 0.5s;
-		}
-
-		&::before{
+			height:200px;
 			width:200px;
 			height:200px;
 			background-color: #fff;
 			border-radius:10px;
 			border:3px solid grey;
+			pointer-events: none;
+			opacity:0;
+			transition:0.2s opacity 0.5s;
+			translate:0 100%;
+			z-index:1000;
 		}
 
-		&::after {
-			width:190px;
-			height:190px;
-			//padding of 5px + 3px border: 8px
-			translate:8px calc(100% + 8px);
-			background-image: var(--preview-img);
-			background-size:contain;
-			background-repeat:no-repeat;
-			background-position:center;
-			filter:drop-shadow(0 0 5px #0008);
-		}
-
-		&:hover::before,
-		&:hover::after {
+		&:hover .cm-preview {
 			opacity:1;
 		}
 	}

client/components/codeEditor/extensions/customHighlight.js

@@ -333,6 +333,33 @@ function getUrl(node, doc) {
 	return url;
 }
 
+import { WidgetType } from '@codemirror/view';
+
+class ImageWidget extends WidgetType {
+	constructor(url) {
+		super();
+		this.url = url;
+	}
+
+	toDOM() {
+		const img = document.createElement('img');
+		img.loading = "lazy";
+		img.className = 'cm-preview';
+		img.src = this.url;
+		
+
+		img.onerror = ()=>{
+			img.src = 'client/icons/Broken-image-icon-in-Chrome.png';
+		};
+
+		return img;
+	}
+
+	eq(other) {
+		return other.url === this.url;
+	}
+}
+
 export function customHighlightPlugin(renderer, tab) {
 	//this function takes the custom tokens created in the tokenize function in customhighlight files
 	//takes the tokens defined by that function and assigns classes to them
@@ -368,16 +395,21 @@ export function customHighlightPlugin(renderer, tab) {
 						if(node.name === 'Image') {
 							const url = getUrl(node, view.state.doc);
 
+							console.log(node.node.lastChild.from);
+
 							if(!url) return;
 
 							decos.push(
 								Decoration.mark({
-									class      : 'cm-image',
-									attributes : {
-										'style' : `--preview-img:url(${url});`
-									}
+									class : 'cm-image'
 								}).range(node.from, node.to)
 							);
+							decos.push(
+								Decoration.widget({
+									widget : new ImageWidget(url),
+									side   : 1
+								}).range(node.node.lastChild.from)
+							);
 						}
 					}
 				});