Merge branch 'master' into support/apply-bootstrap4

src/client/js/components/Drawio.jsx

@@ -33,7 +33,16 @@ class Drawio extends React.Component {
   componentDidMount() {
     const DrawioViewer = window.GraphViewer;
     if (DrawioViewer != null) {
-      DrawioViewer.processElements();
+      const mxgraphs = this.drawioContainer.getElementsByClassName('mxgraph');
+      if (mxgraphs.length > 0) {
+        // GROWI では、mxgraph element は最初のものをレンダリングする前提とする
+        const div = mxgraphs[0];
+
+        if (div != null) {
+          div.innerHTML = '';
+          DrawioViewer.createViewerForElement(div);
+        }
+      }
     }
   }
 
@@ -55,9 +64,6 @@ class Drawio extends React.Component {
           className="drawio"
           style={this.style}
           ref={(c) => { this.drawioContainer = c }}
-          onScroll={(event) => {
-            event.preventDefault();
-          }}
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: this.renderContents() }}
         >

src/client/js/components/PageComment/CommentEditor.jsx

@@ -271,7 +271,7 @@ class CommentEditor extends React.Component {
                     isGfmMode={this.state.isMarkdown}
                     lineNumbers={false}
                     isMobile={appContainer.isMobile}
-                    isUploadable={this.state.isUploadable && this.state.isLayoutTypeGrowi} // enable only when GROWI layout
+                    isUploadable={this.state.isUploadable && layoutType === 'growi'} // enable only when GROWI layout
                     isUploadableFile={this.state.isUploadableFile}
                     emojiStrategy={emojiStrategy}
                     onChange={this.updateState}

src/client/js/services/CommentContainer.js

@@ -137,6 +137,7 @@ export default class CommentContainer extends Container {
 
     const endpoint = '/attachments.add';
     const formData = new FormData();
+    formData.append('_csrf', this.appContainer.csrfToken);
     formData.append('file', file);
     formData.append('path', pagePath);
     formData.append('page_id', pageId);

src/client/js/util/interceptor/drawio-interceptor.js

@@ -17,11 +17,21 @@ export class DrawioInterceptor extends BasicInterceptor {
     this.previousPreviewContext = null;
     this.appContainer = appContainer;
 
-    const DrawioViewer = window.GraphViewer;
-    if (DrawioViewer != null) {
-      // viewer.min.js の Resize による Scroll イベントを抑止するために無効化する
-      DrawioViewer.useResizeSensor = false;
-    }
+    // draw.io の viewer.min.js から呼ばれるコールバックを定義する
+    // refs: https://github.com/jgraph/drawio/blob/v12.9.1/etc/build/build.xml#L219-L232
+    window.onDrawioViewerLoad = function() {
+      const DrawioViewer = window.GraphViewer;
+
+      if (DrawioViewer != null) {
+        // viewer.min.js の Resize による Scroll イベントを抑止するために
+        // useResizeSensor と checkVisibleState を無効化する
+        DrawioViewer.useResizeSensor = false;
+        DrawioViewer.prototype.checkVisibleState = false;
+
+        // 初回レンダリング時に mxfile をレンダリングする
+        DrawioViewer.processElements();
+      }
+    };
   }
 
   /**