Migrate remaining markdown it (re)

.eslintignore

@@ -17,6 +17,7 @@ packages/core/src/Layout/*.js
 packages/core/src/lib/nunjucks-extensions/*.js
 packages/core/src/lib/markdown-it/index.js
 packages/core/src/lib/markdown-it/highlight/*.js
+packages/core/src/lib/markdown-it/plugins/**/*.js
 packages/core/src/lib/markdown-it/utils/*.js
 packages/core/src/Page/*.js
 packages/core/src/plugins/**/*.js

.gitignore

@@ -93,8 +93,7 @@ packages/core/src/Layout/*.js
 packages/core/src/lib/nunjucks-extensions/*.js
 packages/core/src/lib/markdown-it/index.js
 packages/core/src/lib/markdown-it/highlight/*.js
-packages/core/src/lib/markdown-it/plugins/markdown-it-icons.js
-packages/core/src/lib/markdown-it/plugins/markdown-it-alt-frontmatter.js
+packages/core/src/lib/markdown-it/plugins/**/*.js
 packages/core/src/lib/markdown-it/utils/*.js
 packages/core/src/Page/*.js
 packages/core/src/plugins/**/*.js

packages/core/src/lib/markdown-it/index.ts

@@ -12,8 +12,12 @@ import { Highlighter } from './highlight/Highlighter';
 
 import { altFrontmatterPlugin } from './plugins/markdown-it-alt-frontmatter';
 import { markdownItIconsPlugin } from './plugins/markdown-it-icons';
-
-const createDoubleDelimiterInlineRule = require('./plugins/markdown-it-double-delimiter');
+import { centertext_plugin } from './plugins/markdown-it-center-text';
+import { colourTextPlugin } from './plugins/markdown-it-colour-text';
+import { createDoubleDelimiterInlineRule } from './plugins/markdown-it-double-delimiter';
+import { footnotePlugin } from './plugins/markdown-it-footnotes';
+import { radioButtonPlugin } from './plugins/markdown-it-radio-button';
+import blockEmbedPlugin from './plugins/markdown-it-block-embed';
 
 const markdownIt = markdownItImport({ html: true, linkify: true });
 
@@ -38,12 +42,12 @@ markdownIt.use(require('markdown-it-mark'))
   .use(require('markdown-it-linkify-images'), { imgClass: 'img-fluid' })
   .use(require('markdown-it-texmath'), { engine: katex, delimiters: ['dollars', 'brackets'] })
   .use(require('markdown-it-attrs'))
-  .use(require('./plugins/markdown-it-radio-button'))
-  .use(require('./plugins/markdown-it-block-embed'))
+  .use(radioButtonPlugin, { enabled: true, label: true })
+  .use(blockEmbedPlugin)
   .use(markdownItIconsPlugin)
-  .use(require('./plugins/markdown-it-footnotes'))
-  .use(require('./plugins/markdown-it-center-text'))
-  .use(require('./plugins/markdown-it-colour-text'))
+  .use(footnotePlugin)
+  .use(centertext_plugin)
+  .use(colourTextPlugin)
   .use(altFrontmatterPlugin);
 
 // fix table style
@@ -236,4 +240,5 @@ markdownIt.use(require('markdown-it-emoji'), {
   defs: fixedNumberEmojiDefs,
 });
 
+(markdownIt as any).createDoubleDelimiterInlineRule = createDoubleDelimiterInlineRule;
 export = markdownIt;

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/PluginEnvironment.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Rotorz Limited and portions by original markdown-it-video authors
+// Licensed under the MIT license. See LICENSE file in the project root.
+
+import MarkdownIt from 'markdown-it';
+import { EmbedServiceMap } from './tokenizer';
+import { BlockEmbedOptions } from './index';
+
+import YouTubeService from './services/YouTubeService';
+import VimeoService from './services/VimeoService';
+import VineService from './services/VineService';
+import PreziService from './services/PreziService';
+import SlideShareService from './services/SlideShareService';
+import PowerPointOnlineService from './services/PowerPointOnlineService';
+
+export default class PluginEnvironment {
+  public md: MarkdownIt;
+  public options: BlockEmbedOptions;
+  public services: EmbedServiceMap = {};
+
+  constructor(md: MarkdownIt, options: BlockEmbedOptions) {
+    this.md = md;
+    this.options = Object.assign(this.getDefaultOptions(), options);
+
+    this._initServices();
+  }
+
+  _initServices(): void {
+    const defaultServiceBindings: Record<string, any> = {
+      'youtube': YouTubeService,
+      'vimeo': VimeoService,
+      'vine': VineService,
+      'prezi': PreziService,
+      'slideshare': SlideShareService,
+      'powerpoint': PowerPointOnlineService,
+    };
+
+    let serviceBindings = Object.assign({}, defaultServiceBindings, this.options.services);
+    let services: EmbedServiceMap = {};
+    for (let serviceName of Object.keys(serviceBindings)) {
+      let _serviceClass = serviceBindings[serviceName];
+      const ActualConstructor = _serviceClass.default || _serviceClass;
+
+      if (typeof ActualConstructor === 'function') {
+        services[serviceName] = new ActualConstructor(serviceName, this.options[serviceName], this);
+      } else {
+        console.error(`BlockEmbed Error: Service "${serviceName}" is not a valid constructor.`);
+      }
+    }
+
+    this.services = services;
+  }
+
+  public getDefaultOptions(): BlockEmbedOptions {
+    return {
+      containerClassName: 'block-embed',
+      serviceClassPrefix: 'block-embed-service-',
+      outputPlayerSize: true,
+      allowFullScreen: true,
+      filterUrl: null
+    };
+  }
+
+}

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/index.ts

@@ -0,0 +1,35 @@
+// Copyright (c) Rotorz Limited and portions by original markdown-it-video authors
+// Licensed under the MIT license. See LICENSE file in the project root.
+
+import MarkdownIt from 'markdown-it';
+
+import PluginEnvironment from './PluginEnvironment';
+import renderer from './renderer';
+import { createTokenizer } from './tokenizer';
+
+export type UrlFilterDelegate = (
+  url: string,
+  serviceName: string,
+  videoID: string,
+  options: BlockEmbedOptions
+) => string;
+
+export interface BlockEmbedOptions {
+  containerClassName?: string;
+  serviceClassPrefix?: string;
+  outputPlayerSize?: boolean;
+  allowFullScreen?: boolean;
+  filterUrl?: UrlFilterDelegate | null;
+  services?: Record<string, any>;
+  [serviceConfig: string]: any;
+}
+
+export default function setup(md: MarkdownIt, options?: BlockEmbedOptions) {
+  const normalizedOptions: BlockEmbedOptions = options ?? {};
+  let env = new PluginEnvironment(md, normalizedOptions);
+
+  md.block.ruler.before("fence", "video", createTokenizer(env.services), {
+    alt: [ "paragraph", "reference", "blockquote", "list" ]
+  });
+  md.renderer.rules["video"] = renderer.bind(env);
+}

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/renderer.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Rotorz Limited and portions by original markdown-it-video authors
+// Licensed under the MIT license. See LICENSE file in the project root.
+
+import Token from 'markdown-it/lib/token';
+
+export default function renderer(tokens: Token[], idx: number, _options: any, _env: any): string {
+  let videoToken = tokens[idx];
+
+  let service = (videoToken as any).info.service;
+  let videoID = (videoToken as any).info.videoID;
+
+  return service.getEmbedCode(videoID);
+}

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PowerPointOnlineService.ts

@@ -0,0 +1,21 @@
+import VideoServiceBase, { VideoServiceOptions } from './VideoServiceBase';
+
+export interface PowerPointOnlineOptions extends VideoServiceOptions {
+  width?: number;
+  height?: number;
+}
+
+export default class PowerPointOnlineService extends VideoServiceBase {
+
+  getDefaultOptions(): PowerPointOnlineOptions {
+    return { width: 610, height: 481, ignoreStyle: true };
+  }
+
+  extractVideoID(reference: string): string {
+    return reference;
+  }
+
+  getVideoUrl(serviceUrl: string): string {
+    return `${serviceUrl}&action=embedview&wdAr=1.3333333333333333`;
+  }
+}

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PreziService.js → packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PreziService.ts

@@ -1,23 +1,26 @@
 // Copyright (c) Rotorz Limited and portions by original markdown-it-video authors
 // Licensed under the MIT license. See LICENSE file in the project root.
 
-"use strict";
+import VideoServiceBase, { VideoServiceOptions } from './VideoServiceBase';
 
-const VideoServiceBase = require("./VideoServiceBase");
+export interface PreziOptions extends VideoServiceOptions {
+  width?: number;
+  height?: number;
+}
 
 
-class PreziService extends VideoServiceBase {
+export default class PreziService extends VideoServiceBase {
 
-  getDefaultOptions() {
+  getDefaultOptions(): PreziOptions {
     return { width: 550, height: 400 };
   }
 
-  extractVideoID(reference) {
+  extractVideoID(reference: string): string {
     let match = reference.match(/^https:\/\/prezi.com\/(.[^/]+)/);
     return match ? match[1] : reference;
   }
 
-  getVideoUrl(videoID) {
+  getVideoUrl(videoID: string): string {
     let escapedVideoID = this.env.md.utils.escapeHtml(videoID);
     return "https://prezi.com/embed/" + escapedVideoID
         + "/?bgcolor=ffffff&lock_to_path=0&autoplay=0&autohide_ctrls=0&"
@@ -26,6 +29,3 @@ class PreziService extends VideoServiceBase {
   }
 
 }
-
-
-module.exports = PreziService;

packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/SlideShareService.ts

@@ -0,0 +1,22 @@
+import VideoServiceBase, { VideoServiceOptions } from './VideoServiceBase';
+
+export interface SlideShareOptions extends VideoServiceOptions {
+  width?: number;
+  height?: number;
+}
+
+export default class SlideShareService extends VideoServiceBase {
+
+  getDefaultOptions(): SlideShareOptions {
+    return {width: 599, height: 487};
+  }
+
+  extractVideoID(reference: string): string {
+    return reference;
+  }
+
+  getVideoUrl(videoID: string): string {
+    let escapedVideoID = this.env.md.utils.escapeHtml(videoID);
+    return `//www.slideshare.net/slideshow/embed_code/key/${escapedVideoID}`;
+  }
+}