ドクセル埋め込み対応

packages/zenn-cli/articles/305-example-embed-others.md

@@ -56,6 +56,14 @@ published: true
 
 @[speakerdeck](4f926da9cb4cd0001f00a1ff)
 
+## docswell
+
+@[docswell](https://www.docswell.com/slide/LK7J5V/embed)
+
+### embed用でないdocswell URL
+
+@[docswell](https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell)
+
 ## jsfiddle
 
 @[jsfiddle](https://jsfiddle.net/9wkngdue/embedded)

packages/zenn-content-css/src/_embed.scss

@@ -8,6 +8,7 @@ span.embed-block {
 }
 .embed-slideshare,
 .embed-speakerdeck,
+.embed-docswell,
 .embed-codepen,
 .embed-jsfiddle,
 .embed-youtube,

packages/zenn-markdown-html/__tests__/custom-syntax/embed/docswell.test.ts

@@ -0,0 +1,20 @@
+import { describe, test, expect } from 'vitest';
+import markdownToHtml from '../../../src/index';
+
+describe('Docswell', () => {
+  test('should generate docswell html', () => {
+    const html = markdownToHtml(
+      '@[docswell](https://www.docswell.com/slide/LK7J5V/embed)'
+    );
+    expect(html).toContain(
+      '<span class="embed-block embed-docswell"><iframe src="https://www.docswell.com/slide/LK7J5V/embed" allowfullscreen="true" width="620" style="border:1px solid #ccc;display:block;margin:0px auto;padding:0px;aspect-ratio:620/349"></iframe></span>'
+    );
+  });
+
+  test('should not generate docswell html with invalid url', () => {
+    const html = markdownToHtml(
+      '@[docswell](https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell)'
+    );
+    expect(html).toContain('Docswellのembed用のURLを指定してください');
+  });
+});

packages/zenn-markdown-html/__tests__/matchers/isDocswellUrl.test.ts

@@ -0,0 +1,34 @@
+import { isDocswellUrl } from '../../src/utils/url-matcher';
+import { describe, test, expect } from 'vitest';
+
+describe('isDocswellUrlのテスト', () => {
+  describe('Docswellの埋め込み用URLのとき', () => {
+    test('trueを返すこと', () => {
+      const docswellEmbedUrl = 'https://www.docswell.com/slide/LK7J5V/embed';
+      expect(isDocswellUrl(docswellEmbedUrl)).toBe(true);
+    });
+  });
+
+  describe('Docswellの他の画面のURLのとき', () => {
+    test('falseを返すこと', () => {
+      const docswellUrls = [
+        'https://www.docswell.com/',
+        'https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell',
+      ];
+
+      docswellUrls.forEach((url) => {
+        expect(isDocswellUrl(url)).toBe(false);
+      });
+    });
+  });
+
+  describe('他のサイトのURLのとき', () => {
+    test('falseを返すこと', () => {
+      const otherSiteUrls = ['https://zenn.dev/', 'https://github.com/'];
+
+      otherSiteUrls.forEach((url) => {
+        expect(isDocswellUrl(url)).toBe(false);
+      });
+    });
+  });
+});

packages/zenn-markdown-html/src/embed.ts

@@ -1,7 +1,10 @@
 import type { MarkdownOptions } from './types';
 
 import { escapeHtml } from 'markdown-it/lib/common/utils';
-import { extractYoutubeVideoParameters } from './utils/url-matcher';
+import {
+  extractYoutubeVideoParameters,
+  isDocswellUrl,
+} from './utils/url-matcher';
 import {
   sanitizeEmbedToken,
   generateEmbedServerIframe,
@@ -25,6 +28,7 @@ export type EmbedType =
   | 'slideshare'
   | 'speakerdeck'
   | 'jsfiddle'
+  | 'docswell'
   | 'codepen'
   | 'codesandbox'
   | 'stackblitz'
@@ -77,6 +81,12 @@ export const embedGenerators: Readonly<EmbedGeneratorList> = {
       key
     )}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>`;
   },
+  docswell(str) {
+    if (!isDocswellUrl(str)) {
+      return 'Docswellのembed用のURLを指定してください';
+    }
+    return `<span class="embed-block embed-docswell"><iframe src="${str}" allowfullscreen="true" class="docswell-iframe" width="620" height="349" style="border: 1px solid #ccc; display: block; margin: 0px auto; padding: 0px; aspect-ratio: 620/349;"></iframe></span>`;
+  },
   jsfiddle(str) {
     if (!isJsfiddleUrl(str)) {
       return 'jsfiddleのURLが不正です';

packages/zenn-markdown-html/src/utils/url-matcher.ts

@@ -47,6 +47,10 @@ export function isJsfiddleUrl(url: string): boolean {
   return /^(http|https):\/\/jsfiddle\.net\/[a-zA-Z0-9_,/-]+$/.test(url);
 }
 
+export function isDocswellUrl(url: string): boolean {
+  return /^https:\/\/www\.docswell\.com\/[a-zA-Z0-9_,/-]+\/embed$/.test(url);
+}
+
 export function isYoutubeUrl(url: string): boolean {
   return [
     /^https?:\/\/youtu\.be\/[\w-]+(?:\?[\w=&-]+)?$/,