Merge pull request samwarnick#58 from toddmoy/whimsical

Initial support of Whimsical Boards

Author: samwarnick

embeds/index.ts

@@ -38,5 +38,6 @@ export * from "./noteflight";
 export * from "./reddit";
 export * from "./twitter";
 export * from "./vimeo";
+export * from "./whimsical";
 export * from "./youtube";
 export * from "./generic-preview";

embeds/whimsical.ts

@@ -0,0 +1,27 @@
+import { EmbedSource, EnableEmbedKey } from './';
+
+const WHIMSICAL_LINK = new RegExp(
+  /https:\/\/whimsical.com\/(?:[a-zA-Z0-9\-]+\-)?(?<id>[a-km-zA-HJ-NP-Z1-9]{16,22})(@[a-km-zA-HJ-NP-Z1-9]+)?/
+);
+
+export class WhimsicalEmbed implements EmbedSource {
+  name = 'Whimsical';
+  enabledKey: EnableEmbedKey = 'replaceWhimsicalLinks';
+  regex = WHIMSICAL_LINK;
+
+  createEmbed(link: string, container: HTMLElement) {
+    const iframe = document.createElement('iframe');
+
+    const matches = link.match(WHIMSICAL_LINK);
+    const id = matches.groups.id;
+
+    iframe.src = `https://whimsical.com/embed/${id}`;
+    iframe.style.aspectRatio = '800/450';
+    iframe.style.width = '100%';
+    iframe.setAttribute('frameborder', '0');
+    iframe.allow = 'fullscreen';
+    container.appendChild(iframe);
+    container.classList.add('whimsical');
+    return container;
+  }
+}

main.ts

@@ -12,6 +12,7 @@ import {
   RedditEmbed,
   TwitterEmbed,
   VimeoEmbed,
+  WhimsicalEmbed,
   YouTubeEmbed,
   GenericPreviewEmbed,
 } from "./embeds";
@@ -40,6 +41,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
     new BandcampEmbed(),
     new VimeoEmbed(),
     new RedditEmbed(),
+    new WhimsicalEmbed(),
   ];
   processedMarkdown: Debouncer<[]>;
   currentTheme: "dark" | "light";

settings.ts

@@ -11,6 +11,7 @@ export interface EnableEmbeds {
   replaceRedditLinks: boolean;
   replaceTwitterLinks: boolean;
   replaceVimeoLinks: boolean;
+  replaceWhimsicalLinks: boolean;
   replaceYouTubeLinks: boolean;
   replaceGenericLinks: boolean;
 }
@@ -69,6 +70,7 @@ export const DEFAULT_SETTINGS: PluginSettings = {
   replaceRedditLinks: true,
   replaceTwitterLinks: true,
   replaceVimeoLinks: true,
+  replaceWhimsicalLinks: true,
   replaceYouTubeLinks: true,
 
   replaceGenericLinks: false,