Cleaning up code

- Add common iframe attributes in embedBase, avoiding duplicate code
- Partially fix reddit resizing bug by lazy loading it. Still occurs when there are multiple reddit embeds in the user's view
- support more imgur urls
- remove min-height from css to allow user-set heights

src/embed-state-field.ts

@@ -64,71 +64,3 @@ export const embedField = StateField.define<DecorationSet>({
         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

@@ -15,18 +15,8 @@ export class EmbedWidget extends WidgetType {
 
     toDOM(view: EditorView): HTMLElement {
         const embed = this.embedData.embedSource.createEmbed(this.url);
-        this.embedData.embedSource.applyOptions(embed, this.embedData);
+        this.embedData.embedSource.applyModifications(embed, this.embedData);
         return embed;
-
-        // const div = createDiv({text: "Embed Widget Text"});
-        
-        // return div;
-
-        // const div = document.createElement("span");
-
-        // div.innerText = "👉";
-
-        // return div;
     }
     
     eq(other: EmbedWidget) {

src/embeds/codepen.ts

@@ -14,9 +14,6 @@ export class CodepenEmbed extends EmbedBase {
         const iframe = createEl("iframe");
 
         iframe.src = `https://codepen.io/${regexMatch[1]}/embed/${regexMatch[2]}?default-tab=result&editable=true`;
-        iframe.setAttribute("loading", "lazy");
-        iframe.setAttribute("allowfullscreen", "true");
-        iframe.setAttribute("allowtransparency", "true");
 
         iframe.classList.add(this.autoEmbedCssClass, "codepen-embed");
 

src/embeds/defaultFallbackEmbed.ts

@@ -6,23 +6,20 @@ export class DefaultFallbackEmbed extends EmbedBase {
     regex = new RegExp(/ /); // Not using regex for this
 
     createEmbed(url: string): HTMLElement {
-        const youtubeMatch = url.match(/https:\/\/www.youtube.com\/embed\/(\w+)/);
-        console.log("Match : " + youtubeMatch)
-        if (youtubeMatch)
-            return this.onErrorCreatingEmbed(`Unable to parse YouTube ${youtubeMatch[1]} urls. Try deleting "/${youtubeMatch[1]}"`);
+        // const youtubeMatch = url.match(/https:\/\/www.youtube.com\/embed\/(\w+)/);
+        // console.log("Match : " + youtubeMatch)
+        // if (youtubeMatch)
+        //     return this.onErrorCreatingEmbed(`Unable to parse YouTube ${youtubeMatch[1]} urls. Try deleting "/${youtubeMatch[1]}"`);
 
         switch (this.plugin.settings.fallbackOptions) {
             case FallbackOptions.ShowErrorMessage:
-                return this.onErrorCreatingEmbed("Unable to parse: " + url);
+                return this.onErrorCreatingEmbed("Unable to embed: " + url);
             case FallbackOptions.EmbedLink:
             {        
                 // Creating the iframe
                 const iframe = createEl("iframe");
                 
                 iframe.src = url;
-                iframe.setAttribute("loading", "lazy");
-                iframe.setAttribute("allowfullscreen", "true");
-                iframe.setAttribute("allowtransparency", "true");
                 
                 iframe.classList.add(this.autoEmbedCssClass, "default-fallback-embed");
 

src/embeds/embedBase.ts

@@ -53,6 +53,10 @@ export abstract class EmbedBase {
             options.shouldEmbed = true;
         }
 
+        // TODO Options: 
+        // - Size: Set both height and width at the same time. [ae.size:100x200]
+
+        // TODO: Optimise this? If there are alot of options, it might be slow.
         const widthMatch = alt.match(/(?:w|width)\s*(?::|=)\s*(\d+(?:\%|\w+))/);
         if (widthMatch)
             options.width = widthMatch[1];
@@ -64,10 +68,19 @@ export abstract class EmbedBase {
         return options;
     }
 
-    applyOptions(el: HTMLElement, data: BaseEmbedData) {
+    applyModifications(el: HTMLElement, data: BaseEmbedData) {
+        // Applying attributes. Do here to avoid repeating this code
+        console.log("Tagname: " + el.tagName)
+        if (el instanceof HTMLIFrameElement) {
+            el.setAttribute("loading", "lazy");
+            el.setAttribute("allowfullscreen", "true");
+            el.setAttribute("allowtransparency", "true");
+        }
+
+        // Applying optionsa
         if (data.width)
             el.style.width = data.width;
-
+        
         if (data.height)
             el.style.height = data.height;
     }

src/embeds/imgur.ts

@@ -2,7 +2,7 @@ import { EmbedBase } from "./embedBase";
 
 export class ImgurEmbed extends EmbedBase {
     name = "Imgur";
-    regex = new RegExp(/https:\/\/imgur\.com\/(?:gallery|(?:t\/\w+))\/(\w+)/);
+    regex = new RegExp(/https:\/\/imgur\.com\/(?:(?:gallery|(?:t\/\w+))\/)?(\w+)/);
     embedOrigin = "https://imgur.com";
 
     createEmbed(url: string): HTMLElement {

src/embeds/reddit.ts

@@ -3,7 +3,7 @@ import { EmbedBase } from "./embedBase";
 export class RedditEmbed extends EmbedBase {
     name = "Reddit";
     regex = new RegExp(/reddit.com/);
-    embedOrigin: "https://embed.reddit.com";
+    embedOrigin = "https://embed.reddit.com";
 
     createEmbed(url: string): HTMLElement {
         const regexMatch = url.match(this.regex);
@@ -17,12 +17,13 @@ export class RedditEmbed extends EmbedBase {
         const iframe = createEl("iframe");
         
         iframe.classList.add(this.autoEmbedCssClass, "reddit-embed", "reddit-" + postId[1]);
-
+        
         url = url.replace("www.reddit.com", "reddit.com"); // Remove "www"
         url = url.replace("reddit.com", "embed.reddit.com"); // Add embed subdomain
         
         if (this.plugin.settings.darkMode)
         {
+             // If it already has the query marker "?", add to the query with the theme, else just add the query
             url += (url.contains('?') ? "&" : "?") + "theme=dark";
         }
 
@@ -48,8 +49,9 @@ export class RedditEmbed extends EmbedBase {
     }
 
     onResizeMessage(e: MessageEvent) {
+
         const data = JSON.parse(e.data);
-        
+        console.log("data: " + e.data)
         // Only continue if the method is for resizing
         if (data.type !== "resize.embed")
             return;

src/embeds/twitter.ts

@@ -23,7 +23,7 @@ export class TwitterEmbed extends EmbedBase {
 
         iframe.sandbox.add("allow-forms", "allow-presentation", "allow-same-origin", "allow-scripts", "allow-modals", "allow-popups");
         iframe.setAttribute("scrolling", "no");
-        iframe.setAttribute("allowfullscreen", "");
+        // iframe.setAttribute("allowfullscreen", "");
 
         return iframe;
     }

src/main.ts

@@ -69,17 +69,6 @@ export default class AutoEmbedPlugin extends Plugin {
 
 				this.handleImage(image);
 			})
-
-			// const iframes = el.querySelectorAll('iframe');
-			// iframes.forEach((iframe) => {
-			// 	if (!isURL(iframe.src))
-			// 		return;
-
-			// 	const embed = this.handleIFrame(iframe);
-			// 	if (embed) {
-			// 		// iframe.style.display = "none !important;";
-			// 	}
-			// })
 		})
 
 		this.registerDomEvent(window, "message", (e: MessageEvent) => {
@@ -87,8 +76,8 @@ export default class AutoEmbedPlugin extends Plugin {
 			for (const source of EmbedManager.Instance.embedSources) {
 				console.log(source.embedOrigin  + " | " + e.origin);
 				if (source.embedOrigin === e.origin && source.onResizeMessage) {
-					console.log("Origin: " + e.origin);
-					console.log("Data: " + e.data);
+					// console.log("Origin: " + e.origin);
+					// console.log("Data: " + e.data);
 					source.onResizeMessage(e);
 					break;
 				}
@@ -146,7 +135,7 @@ export default class AutoEmbedPlugin extends Plugin {
 			return null;
 		}
 		const embed = embedData.embedSource.createEmbed(src);
-		embedData.embedSource.applyOptions(embed, embedData);
+		embedData.embedSource.applyModifications(embed, embedData);
 
 		// Insert embed
 		const parent = img.parentElement;

styles.css

@@ -26,15 +26,15 @@ iframe.auto-embed {
 }
 
 iframe.small.auto-embed {
-    min-height: 300px;
+    height: 300px;
 }
 
 iframe.large.auto-embed {
-    min-height: 1000px;
+    height: 1000px;
 }
 
 iframe.largest.auto-embed {
-    min-height: calc(100vh - 100px);
+    height: calc(100vh - 100px);
 }
 
 .auto-embed.twitter-embed {
@@ -78,7 +78,7 @@ iframe.largest.auto-embed {
 }
 
 .auto-embed.reddit-embed {
-    min-height: 240px;
+    height: 240px;
     width: 100%;
     /* height: 500px; */
 }