zenn-markdown-html 0.1.126-alpha.3 → 0.1.126

package/lib/utils/embed-helper.d.ts

@@ -1,26 +1,16 @@
-export declare type EmbedType = keyof typeof embedGenerators;
-/** 渡された文字列から埋め込み要素のHTMLを生成する関数をまとめたオブジェクト */
-declare const embedGenerators: {
-    youtube(videoId: string): string;
-    slideshare(key: string): string;
-    speakerdeck(key: string): string;
-    jsfiddle(str: string): string;
-    codepen(str: string): string;
-    codesandbox(str: string): string;
-    stackblitz(str: string): string;
-    tweet(str: string): string;
-    blueprintue(str: string): string;
-    figma(str: string): string;
-    card(str: string): string;
-    gist(str: string): string;
-    github(str: string): string;
+export declare type EmbedType = 'youtube' | 'slideshare' | 'speakerdeck' | 'jsfiddle' | 'codepen' | 'codesandbox' | 'stackblitz' | 'tweet' | 'blueprintue' | 'figma' | 'card' | 'gist' | 'github';
+/** embedサーバーで表示する埋め込み要素の種別 */
+export declare type ZennEmbedTypes = 'tweet' | 'link-card' | 'mermaid' | 'github' | 'gist';
+/** 渡された埋め込みURLまたはTokenを検証する */
+export declare const validateEmbedToken: (str: string, type?: "youtube" | "slideshare" | "speakerdeck" | "jsfiddle" | "codepen" | "codesandbox" | "stackblitz" | "tweet" | "blueprintue" | "figma" | "card" | "gist" | "github" | "link-card" | "mermaid" | undefined) => {
+    isValid: boolean;
+    message: string;
 };
+/** Embedサーバーを使った埋め込み要素の文字列を生成する */
+export declare function generateEmbedIframe(type: ZennEmbedTypes, src: string): string;
 /** `EmbedType`か判定する */
 export declare function isEmbedType(type: unknown): type is EmbedType;
-/** 渡された埋め込みURLを検証する */
-export declare const validateEbedUrl: (url: string) => boolean;
 /** 渡された`type`の埋め込み要素のHTML文字列を返す */
-export declare const generateEmbedHTML: (type: EmbedType, url: string) => string;
+export declare const generateEmbedHTML: (type: EmbedType, str: string) => string;
 /** Linkifyな埋め込み要素のHTML生成する */
 export declare const generateLinkifyEmbedHTML: (url: string) => string;
-export {};

package/lib/utils/embed-helper.js

@@ -3,27 +3,105 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateLinkifyEmbedHTML = exports.generateEmbedHTML = void 0;
+exports.generateEmbedHTML = void 0;
+exports.generateEmbedIframe = generateEmbedIframe;
+exports.generateLinkifyEmbedHTML = void 0;
 exports.isEmbedType = isEmbedType;
-exports.validateEbedUrl = void 0;
+exports.validateEmbedToken = void 0;
 
 var _utils = require("markdown-it/lib/common/utils");
 
-var _helper = require("./helper");
-
 var _urlMatcher = require("./url-matcher");
 
-/** 埋め込みURLの最大文字数( LinkCardは除く ) */
-const MAX_EMBED_URL_LENGTH = 300;
+/** 検証から除外する埋め込みの種別 */
+const ignoredEmbedType = ['card', 'link-card', 'github'];
+/** 埋め込みURLまたはTokenの最大文字数( excludeEmbedTypeは除く ) */
+
+const MAX_EMBED_TOKEN_LENGTH = 300;
+/** 渡された埋め込みURLまたはTokenを検証する */
+
+const validateEmbedToken = (str, type) => {
+  if (type && ignoredEmbedType.includes(type)) {
+    return {
+      isValid: true,
+      message: ''
+    };
+  }
+
+  if (str.length > MAX_EMBED_TOKEN_LENGTH) {
+    return {
+      isValid: false,
+      message: `埋め込みURLは${MAX_EMBED_TOKEN_LENGTH}文字以内にする必要があります`
+    };
+  }
+
+  return {
+    isValid: true,
+    message: ''
+  };
+};
+/** 渡された文字列をサニタイズする */
+
+
+exports.validateEmbedToken = validateEmbedToken;
+
+function sanitaizeEmbedToken(str) {
+  return str.replace(/"/g, '%22');
+}
+/** URL文字列か判定する */
+
+
+function isValidHttpUrl(str) {
+  try {
+    const url = new URL(str);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+}
+/** `videoId`から Youtube の埋め込み要素の文字列を生成する */
+
+
+function generateYoutubeHtmlFromVideoId(videoId, start) {
+  const escapedVideoId = (0, _utils.escapeHtml)(videoId);
+  const time = Math.min(Number(start || 0), 48 * 60 * 60); // 48時間以内
+
+  const startQuery = time ? `&start=${time}` : '';
+  return `<div class="embed-youtube"><iframe src="https://www.youtube.com/embed/${escapedVideoId}?loop=1&playlist=${escapedVideoId}${startQuery}" allowfullscreen loading="lazy"></iframe></div>`;
+}
+/** Youtube の埋め込み要素の文字列を生成する */
+
+
+function generateYoutubeHtmlFromUrl(url) {
+  const params = (0, _urlMatcher.extractYoutubeVideoParameters)(url);
+
+  if (!params) {
+    return generateEmbedIframe('link-card', url);
+  } else {
+    return generateYoutubeHtmlFromVideoId(params.videoId, params.start);
+  }
+}
+/** Embedサーバーを使った埋め込み要素の文字列を生成する */
+
+
+function generateEmbedIframe(type, src) {
+  // ユーザーからの入力値が引数として渡されたときのために念のためencodeする
+  const encodedType = encodeURIComponent(type);
+  const encodedSrc = encodeURIComponent(src);
+  const id = `zenn-embedded__${Math.random().toString(16).slice(2)}`;
+  const iframeSrc = `https://embed.zenn.studio/${encodedType}#${id}`;
+  return `<div class="zenn-embedded zenn-embedded-${encodedType}"><iframe id="${id}" src="${iframeSrc}" data-content="${encodedSrc}" frameborder="0" scrolling="no" loading="lazy"></iframe></div>`;
+}
 /** 渡された文字列から埋め込み要素のHTMLを生成する関数をまとめたオブジェクト */
 
+
 const embedGenerators = {
   youtube(videoId) {
     if (!(videoId !== null && videoId !== void 0 && videoId.match(/^[a-zA-Z0-9_-]+$/))) {
       return 'YouTubeのvideoIDが不正です';
     }
 
-    return (0, _helper.generateYoutubeHtmlFromVideoId)(videoId);
+    return generateYoutubeHtmlFromVideoId(videoId);
   },
 
   slideshare(key) {
@@ -55,7 +133,7 @@ const embedGenerators = {
       url = url.endsWith('/') ? `${url}embedded/` : `${url}/embedded/`;
     }
 
-    return `<div class="embed-jsfiddle"><iframe src="${encodeDoubleQuote(url)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<div class="embed-jsfiddle"><iframe src="${sanitaizeEmbedToken(url)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
   },
 
   codepen(str) {
@@ -65,7 +143,7 @@ const embedGenerators = {
 
     const url = new URL(str.replace('/pen/', '/embed/'));
     url.searchParams.set('embed-version', '2');
-    return `<div class="embed-codepen"><iframe src="${encodeDoubleQuote(url.toString())}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<div class="embed-codepen"><iframe src="${sanitaizeEmbedToken(url.toString())}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
   },
 
   codesandbox(str) {
@@ -73,7 +151,7 @@ const embedGenerators = {
       return '「https://codesandbox.io/embed/」から始まる正しいURLを入力してください';
     }
 
-    return `<div class="embed-codesandbox"><iframe src="${encodeDoubleQuote(str)}" style="width:100%;height:500px;border:none;overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" loading="lazy" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe></div>`;
+    return `<div class="embed-codesandbox"><iframe src="${sanitaizeEmbedToken(str)}" style="width:100%;height:500px;border:none;overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" loading="lazy" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe></div>`;
   },
 
   stackblitz(str) {
@@ -81,27 +159,27 @@ const embedGenerators = {
       return 'StackBlitzのembed用のURLを指定してください';
     }
 
-    return `<div class="embed-stackblitz"><iframe src="${encodeDoubleQuote(str)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<div class="embed-stackblitz"><iframe src="${sanitaizeEmbedToken(str)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
   },
 
   tweet(str) {
     if (!(0, _urlMatcher.isTweetUrl)(str)) return 'ツイートページのURLを指定してください';
-    return (0, _helper.generateEmbedIframe)('tweet', str);
+    return generateEmbedIframe('tweet', str);
   },
 
   blueprintue(str) {
     if (!(0, _urlMatcher.isBlueprintUEUrl)(str)) return '「https://blueprintue.com/render/」から始まる正しいURLを指定してください';
-    return `<div class="embed-blueprintue"><iframe src="${encodeDoubleQuote(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
+    return `<div class="embed-blueprintue"><iframe src="${sanitaizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
   },
 
   figma(str) {
     if (!(0, _urlMatcher.isFigmaUrl)(str)) return 'ファイルまたはプロトタイプのFigma URLを指定してください';
-    return `<div class="embed-figma"><iframe src="https://www.figma.com/embed?embed_host=zenn&url=${encodeDoubleQuote(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
+    return `<div class="embed-figma"><iframe src="https://www.figma.com/embed?embed_host=zenn&url=${sanitaizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
   },
 
   card(str) {
-    if (!(0, _helper.isValidHttpUrl)(str)) return 'URLが不正です';
-    return (0, _helper.generateEmbedIframe)('link-card', str);
+    if (!isValidHttpUrl(str)) return 'URLが不正です';
+    return generateEmbedIframe('link-card', str);
   },
 
   gist(str) {
@@ -113,42 +191,29 @@ const embedGenerators = {
      * のような形式
      */
 
-    return (0, _helper.generateEmbedIframe)('gist', str);
+    return generateEmbedIframe('gist', str);
   },
 
   github(str) {
     if (!(0, _urlMatcher.isGithubUrl)(str)) return 'GitHub のファイルURLまたはパーマリンクを指定してください';
-    return (0, _helper.generateEmbedIframe)('github', str);
+    return generateEmbedIframe('github', str);
   }
 
 };
-
-function encodeDoubleQuote(str) {
-  return str.replace(/"/g, '%22');
-}
 /** `EmbedType`か判定する */
 
-
 function isEmbedType(type) {
   return typeof type === 'string' && type in embedGenerators;
 }
-/** 渡された埋め込みURLを検証する */
-
-
-const validateEbedUrl = url => {
-  return url.length <= MAX_EMBED_URL_LENGTH;
-};
 /** 渡された`type`の埋め込み要素のHTML文字列を返す */
 
 
-exports.validateEbedUrl = validateEbedUrl;
-
-const generateEmbedHTML = (type, url) => {
-  if (type !== 'card' && !validateEbedUrl(url)) {
-    return `埋め込みURLは${MAX_EMBED_URL_LENGTH}文字以内にする必要があります`;
-  }
-
-  return embedGenerators[type](url);
+const generateEmbedHTML = (type, str) => {
+  const {
+    isValid,
+    message
+  } = validateEmbedToken(str, type);
+  return isValid ? embedGenerators[type](str) : message;
 };
 /** Linkifyな埋め込み要素のHTML生成する */
 
@@ -156,10 +221,15 @@ const generateEmbedHTML = (type, url) => {
 exports.generateEmbedHTML = generateEmbedHTML;
 
 const generateLinkifyEmbedHTML = url => {
-  let html = null;
-  if ((0, _urlMatcher.isTweetUrl)(url)) html = (0, _helper.generateEmbedIframe)('tweet', url);else if ((0, _urlMatcher.isYoutubeUrl)(url)) html = (0, _helper.generateYoutubeHtmlFromUrl)(url);else if ((0, _urlMatcher.isGithubUrl)(url)) html = (0, _helper.generateEmbedIframe)('github', url);
-  if (!html) return (0, _helper.generateEmbedIframe)('link-card', url);
-  return validateEbedUrl(url) ? html : `埋め込みURLは${MAX_EMBED_URL_LENGTH}文字以内にする必要があります`;
+  const {
+    isValid,
+    message: msg
+  } = validateEmbedToken(url);
+  if ((0, _urlMatcher.isTweetUrl)(url)) return isValid ? generateEmbedIframe('tweet', url) : msg;
+  if ((0, _urlMatcher.isYoutubeUrl)(url)) return isValid ? generateYoutubeHtmlFromUrl(url) : msg; // GitHub は URL が長くなりやすいためバリデーション(`validateEmbedToken`)から外す
+
+  if ((0, _urlMatcher.isGithubUrl)(url)) return generateEmbedIframe('github', url);
+  return generateEmbedIframe('link-card', url);
 };
 
 exports.generateLinkifyEmbedHTML = generateLinkifyEmbedHTML;

package/lib/utils/md-renderer-fence.js

@@ -8,7 +8,7 @@ exports.parseInfo = parseInfo;
 
 var _utils = require("markdown-it/lib/common/utils");
 
-var _helper = require("./helper");
+var _embedHelper = require("./embed-helper");
 
 var _highlight = require("./highlight");
 
@@ -88,7 +88,7 @@ function mdRendererFence(md) {
     } = parseInfo(info);
 
     if (langName === 'mermaid') {
-      return (0, _helper.generateEmbedIframe)('mermaid', content.trim());
+      return (0, _embedHelper.generateEmbedIframe)('mermaid', content.trim());
     }
 
     const className = getClassName({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.126-alpha.3",
+  "version": "0.1.126",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -53,7 +53,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "prismjs": "^1.27.0"
   },
-  "gitHead": "3d78ffb0fc67efde08b361120b087c2b4db8087d",
+  "gitHead": "2068f91c365dff20abbfc8de7eed6580a81bdbc0",
   "publishConfig": {
     "access": "public"
   }

package/lib/utils/helper.d.ts

@@ -1,6 +0,0 @@
-export declare function generateYoutubeHtmlFromUrl(url: string): string;
-export declare function generateYoutubeHtmlFromVideoId(videoId: string): string;
-export declare function isValidHttpUrl(str: string): boolean;
-declare type ZennEmbedTypes = 'tweet' | 'link-card' | 'mermaid' | 'github' | 'gist';
-export declare function generateEmbedIframe(type: ZennEmbedTypes, src: string): string;
-export {};

package/lib/utils/helper.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateEmbedIframe = generateEmbedIframe;
-exports.generateYoutubeHtmlFromUrl = generateYoutubeHtmlFromUrl;
-exports.generateYoutubeHtmlFromVideoId = generateYoutubeHtmlFromVideoId;
-exports.isValidHttpUrl = isValidHttpUrl;
-
-var _utils = require("markdown-it/lib/common/utils");
-
-var _urlMatcher = require("./url-matcher");
-
-function generateYoutubeHtml(videoId, start) {
-  const escapedVideoId = (0, _utils.escapeHtml)(videoId); // 48時間以内
-
-  const time = Math.min(Number(start || 0), 48 * 60 * 60);
-  const startQuery = time ? `&start=${time}` : '';
-  return `<div class="embed-youtube"><iframe src="https://www.youtube.com/embed/${escapedVideoId}?loop=1&playlist=${escapedVideoId}${startQuery}" allowfullscreen loading="lazy"></iframe></div>`;
-}
-
-function generateYoutubeHtmlFromUrl(url) {
-  const params = (0, _urlMatcher.extractYoutubeVideoParameters)(url);
-
-  if (!params) {
-    return generateEmbedIframe('link-card', url);
-  } else {
-    return generateYoutubeHtml(params.videoId, params.start);
-  }
-}
-
-function generateYoutubeHtmlFromVideoId(videoId) {
-  return generateYoutubeHtml(videoId);
-}
-
-function isValidHttpUrl(str) {
-  try {
-    const url = new URL(str);
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch (_) {
-    return false;
-  }
-}
-
-function generateEmbedIframe(type, src) {
-  // ユーザーからの入力値が引数として渡されたときのために念のためencodeする
-  const encodedType = encodeURIComponent(type);
-  const encodedSrc = encodeURIComponent(src);
-  const id = `zenn-embedded__${Math.random().toString(16).slice(2)}`;
-  const iframeSrc = `https://embed.zenn.studio/${encodedType}#${id}`;
-  return `<div class="zenn-embedded zenn-embedded-${encodedType}"><iframe id="${id}" src="${iframeSrc}" data-content="${encodedSrc}" frameborder="0" scrolling="no" loading="lazy"></iframe></div>`;
-}