zenn-embed-elements 0.1.101 → 0.1.103-alpha.1

package/lib/classes/katex.js

@@ -27,7 +27,6 @@ class EmbedKatex extends HTMLElement {
         });
     }
     render() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (typeof katex === 'undefined') {
                 yield load_script_1.loadScript({
@@ -41,7 +40,9 @@ class EmbedKatex extends HTMLElement {
                 id: `katex-css`,
             });
             const displayMode = !!this.getAttribute('display-mode');
-            katex === null || katex === void 0 ? void 0 : katex.render((_a = this.innerText) !== null && _a !== void 0 ? _a : '', this._container, {
+            // detailsタグの中ではinnerTextがnullになることがあるため
+            const content = this.textContent || this.innerText;
+            katex === null || katex === void 0 ? void 0 : katex.render(content, this._container, {
                 macros: { '\\RR': '\\mathbb{R}' },
                 throwOnError: false,
                 displayMode,

package/lib/classes/mermaid.d.ts

@@ -2,10 +2,9 @@
  * original: https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/behaviors/markdown/render_mermaid.js
  */
 export declare class EmbedMermaid extends HTMLElement {
-    private readonly _source;
-    private readonly _tmpContainer;
-    private readonly _svgContainer;
-    constructor();
+    private observer?;
+    private _tmpContainer?;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     render(): Promise<void>;
 }

package/lib/classes/mermaid.js

@@ -95,37 +95,51 @@ function getPotentialPerformanceRisk(source) {
     };
 }
 class EmbedMermaid extends HTMLElement {
-    constructor() {
-        super();
-        // コード記述が格納されている pre タグを取得
-        // できるだけコードがちらつかないようにインスタンス変数に入れて削除してしまう
-        // パフォーマンスのために削除しているが、「コードをコピペしたい」みたいな話がでてきたときは残してHiddenにする
-        const sourceContainer = this.childNodes[0];
-        this._source = sourceContainer.innerText || '';
-        sourceContainer.remove();
-        // 一時コンテナ
-        const tmpContainer = document.createElement('div');
-        this.appendChild(tmpContainer);
-        this._tmpContainer = tmpContainer;
-        // 描画後のSVGを格納する div タグを作成
-        const container = document.createElement('div');
-        this.appendChild(container);
-        this._svgContainer = container;
-    }
     connectedCallback() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.render();
+            // 一時コンテナ
+            const tmpContainer = document.createElement('div');
+            this.appendChild(tmpContainer);
+            this._tmpContainer = tmpContainer;
+            // 以下の理由からmermaidのレンダリングを遅延する
+            // - パフォーマンスのため
+            // - Safariでdetailsタグ内のmermaid.jsがうまくレンダリングされないため
+            this.observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    var _a;
+                    if (entry.isIntersecting) {
+                        this.render();
+                        if (!this._tmpContainer) {
+                            console.error('Something wrong with _tmpContainer');
+                            return;
+                        }
+                        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.unobserve(this._tmpContainer); // 一度レンダリングされたらobserveを解除する
+                    }
+                });
+            }, { rootMargin: '1000px 0px' } // 手前で発火
+            );
+            this._tmpContainer && this.observer.observe(this._tmpContainer);
         });
     }
+    disconnectedCallback() {
+        // observeを解除
+        if (this.observer) {
+            this._tmpContainer && this.observer.unobserve(this._tmpContainer);
+            this.observer.disconnect();
+        }
+    }
     render() {
         return __awaiter(this, void 0, void 0, function* () {
             yield initMermaid();
+            const content = this.textContent || this.innerText;
             // Mermaid モジュールの読み込みに失敗したり、レンダリング対象のコンテンツが空の場合は何もせずに終了
-            if (!this._source) {
+            if (!content)
                 return;
-            }
+            // 図だけを表示するためにコードは非表示に
+            const sourceContainer = this.childNodes[0];
+            sourceContainer.setAttribute('style', 'display:none');
             // 文法エラーやパフォーマンスリスクが検出された場合、注意書きをレンダリングして終了
-            const risk = getPotentialPerformanceRisk(this._source);
+            const risk = getPotentialPerformanceRisk(content);
             if (Object.values(risk)
                 .map((r) => r.yes)
                 .includes(true)) {
@@ -148,9 +162,12 @@ class EmbedMermaid extends HTMLElement {
             // https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/usage.md#binding-events
             // ここを参考に追加する
             const insert = (svgCode) => {
-                this._svgContainer.innerHTML = svgCode;
+                // 描画後のSVGを格納する div タグを作成
+                const container = document.createElement('div');
+                this.appendChild(container);
+                container.innerHTML = svgCode;
             };
-            mermaid === null || mermaid === void 0 ? void 0 : mermaid.mermaidAPI.render(`${containerId}-${Date.now().valueOf()}-render`, this._source, insert, this._tmpContainer);
+            mermaid === null || mermaid === void 0 ? void 0 : mermaid.mermaidAPI.render(`${containerId}-${Date.now().valueOf()}-render`, content, insert, this._tmpContainer);
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.1.101",
+  "version": "0.1.103-alpha.1",
   "license": "MIT",
   "description": "Web components for embedded contents.",
   "repository": {
@@ -28,7 +28,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^3.9.3"
   },
-  "gitHead": "9713490577e00d1dc2dd710d7a0eb32b12b15436",
+  "gitHead": "fbc22a3bd78996526bedf97899c945c841e60ff1",
   "publishConfig": {
     "access": "public"
   }