From d0ff3c66d815b014f2b1fe34fb0537c0e439e7bf Mon Sep 17 00:00:00 2001 From: GnoxNahte Date: Thu, 21 Mar 2024 15:23:41 +0800 Subject: [PATCH] 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 | 68 ------------------------------ src/embed-widget.ts | 12 +----- src/embeds/codepen.ts | 3 -- src/embeds/defaultFallbackEmbed.ts | 13 +++--- src/embeds/embedBase.ts | 17 +++++++- src/embeds/imgur.ts | 2 +- src/embeds/reddit.ts | 8 ++-- src/embeds/twitter.ts | 2 +- src/main.ts | 17 ++------ styles.css | 8 ++-- 10 files changed, 35 insertions(+), 115 deletions(-) diff --git a/src/embed-state-field.ts b/src/embed-state-field.ts index 4ada1cd..6efb1d4 100644 --- a/src/embed-state-field.ts +++ b/src/embed-state-field.ts @@ -64,71 +64,3 @@ export const embedField = StateField.define({ 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(); - -// 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 = { -// decorations: (value: EmojiListPlugin) => value.decorations, -// }; - -// export const emojiListPlugin = ViewPlugin.fromClass( -// EmojiListPlugin, -// pluginSpec -// ); \ No newline at end of file diff --git a/src/embed-widget.ts b/src/embed-widget.ts index d5755e3..10a8600 100644 --- a/src/embed-widget.ts +++ b/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) { diff --git a/src/embeds/codepen.ts b/src/embeds/codepen.ts index a3a8226..86b28fb 100644 --- a/src/embeds/codepen.ts +++ b/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"); diff --git a/src/embeds/defaultFallbackEmbed.ts b/src/embeds/defaultFallbackEmbed.ts index 1daa892..6abc1f6 100644 --- a/src/embeds/defaultFallbackEmbed.ts +++ b/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"); diff --git a/src/embeds/embedBase.ts b/src/embeds/embedBase.ts index 3fa1ff3..67483d3 100644 --- a/src/embeds/embedBase.ts +++ b/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; } diff --git a/src/embeds/imgur.ts b/src/embeds/imgur.ts index 2b7dc1c..16c30dc 100644 --- a/src/embeds/imgur.ts +++ b/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 { diff --git a/src/embeds/reddit.ts b/src/embeds/reddit.ts index cce5eb3..fecac4d 100644 --- a/src/embeds/reddit.ts +++ b/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; diff --git a/src/embeds/twitter.ts b/src/embeds/twitter.ts index 592c931..7f33cb4 100644 --- a/src/embeds/twitter.ts +++ b/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; } diff --git a/src/main.ts b/src/main.ts index c25c60c..8765990 100644 --- a/src/main.ts +++ b/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; diff --git a/styles.css b/styles.css index e10765d..ee0b908 100644 --- a/styles.css +++ b/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; */ }