add example

README.md

@@ -1,19 +1,17 @@
 # Obsidian Plugin: Convert an url (ex, youtube) into an iframe (preview)
 **Transform an youtube url into a youtube preview.**
 
+![Demo](images/demo-url-to-preview-2.gif)
+
 Transform a selected url to an embed view if the website allows it. It offers the possibilitiy to resize the preview.
 
 The default hotkey is `cmd + shift + i`.
 
-### Manually installing the plugin
-
-- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
 
 # Installation
 Support for 3rd party plugins is enabled in settings (Obsidian > Settings > Third Party plugin > Safe mode - OFF)
 To install this plugin, download zip archive from GitHub releases page. Extract the archive into <vault>/.obsidian/plugins.
 
-
-### API Documentation
-
-See https://github.com/obsidianmd/obsidian-api
+# Future improvement
+- Find a way to detect when the website doesn't allow cross origins.
+- Support more websites.

__tests__/iframe_converter.spec.ts

@@ -6,6 +6,7 @@ describe('updateUrlIfYoutube', () => {
 		["https://www.youtube.com/watch?v=FY7DtKMBxBw", "https://www.youtube.com/embed/FY7DtKMBxBw"],
 		["https://www.youtube.com/watch?v=FY7D_KM-xBw", "https://www.youtube.com/embed/FY7D_KM-xBw"],
 		["https://www.youtube.com/embed/FY7DtKMBxBw", "https://www.youtube.com/embed/FY7DtKMBxBw"],
+		["https://www.youtube.com/watch?v=DLMkT_FHczU&ab_channel=HughJeffreysHughJeffreys", "https://www.youtube.com/embed/DLMkT_FHczU"]
 	]
 	it.each(inputToExpectedOutput)('should correctly parse "%s"', (input: string, expected) => {
 		const output = updateUrlIfYoutube(input);

configure_iframe_modal.ts

@@ -15,23 +15,13 @@ export class ConfigureIframeModal extends Modal {
 	onOpen() {
 		let { contentEl } = this;
 
+		const container = contentEl.createEl('div');
+		container.className = 'iframe__container';
+
 		const title = contentEl.createEl('h2');
 		title.innerText = "This is how the iframe is going to look (your can choose the size)";
 
 		const iframe = createIframeEl(contentEl, this.url);
-		iframe.onload = (ev) => {
-			console.log('iframe is loaded!');
-
-			if (isIframeCorrectlyLoaded(iframe)) {
-				iframe.style.display = 'block';
-			} else {
-				const errorMessage = contentEl.createEl('h2');
-				errorMessage.innerText = `Sorry, the website doesn't allow iframe: ${url}`;
-				iframe.insertAfter(errorMessage);
-				iframe.remove();
-			}
-		};
-
 		const widthCheckbox = createShouldUseDefaultWidthCheckbox(iframe);
 
 		const okButton = contentEl.createEl('button');
@@ -57,8 +47,6 @@ export class ConfigureIframeModal extends Modal {
 		buttonContainer.appendChild(okButton);
 		buttonContainer.appendChild(cancelButton);
 
-		const container = contentEl.createEl('div');
-		container.className = 'iframe__container';
 		container.appendChild(title);
 		container.appendChild(widthCheckbox);
 		container.appendChild(iframe);
@@ -76,7 +64,6 @@ export function createIframeEl(contentEl: HTMLElement, url: string): HTMLIFrameE
 	const iframe = contentEl.createEl('iframe');
 	iframe.src = url;
 	iframe.className = 'resize-vertical'
-	iframe.style.display = 'none'
 
 	return iframe
 }
@@ -95,8 +82,6 @@ export function createShouldUseDefaultWidthCheckbox(iframe: HTMLElement): HTMLDi
 	label.innerText = 'Do you want to use the note default width?'
 
 	checkbox.onclick = (e) => {
-		console.log('click!!!')
-
 		if (checkbox.checked) {
 			iframe.className = 'resize-vertical'
 			iframe.style.width = '100%'
@@ -112,14 +97,3 @@ export function createShouldUseDefaultWidthCheckbox(iframe: HTMLElement): HTMLDi
 
 
 }
-
-export function isIframeCorrectlyLoaded(iframe: HTMLIFrameElement): boolean {
-	var html = null;
-	try {
-		var doc = iframe.contentDocument || iframe.contentWindow.document;
-		html = doc.body.innerHTML;
-	} catch (e) {
-		// Do nothing
-	}
-	return !!html
-}