rename Drawio -> DrawioViewer

packages/app/src/services/renderer/renderer.tsx

@@ -351,7 +351,7 @@ export const generateViewOptions = (
     components.h2 = Header;
     components.h3 = Header;
     components.lsx = props => <Lsx {...props} forceToFetchData />;
-    components.drawio = props => <drawioPlugin.Drawio {...props} />;
+    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
   }
 
   // // Add configurers for viewer
@@ -424,7 +424,7 @@ export const generateSimpleViewOptions = (config: RendererConfig, pagePath: stri
   // add components
   if (components != null) {
     components.lsx = props => <Lsx {...props} />;
-    components.drawio = props => <drawioPlugin.Drawio {...props} />;
+    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
   }
 
   verifySanitizePlugin(options, false);
@@ -464,7 +464,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   // add components
   if (components != null) {
     components.lsx = props => <Lsx {...props} />;
-    components.drawio = props => <drawioPlugin.Drawio {...props} />;
+    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
   }
 
   // verifySanitizePlugin(options, false);

packages/remark-drawio-plugin/src/components/Drawio.module.scss → packages/remark-drawio-plugin/src/components/DrawioViewer.module.scss

@@ -1,4 +1,4 @@
-.drawio-viewer {
+.drawio-viewer :global {
   margin: 20px 0;
   border: 1px solid transparent;
   border-radius: 4px;

packages/remark-drawio-plugin/src/components/Drawio.tsx → packages/remark-drawio-plugin/src/components/DrawioViewer.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import { generateMxgraphData } from '../utils/embed';
 
-import styles from './Drawio.module.scss';
+import styles from './DrawioViewer.module.scss';
 
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
   children?: ReactNode,
 }
 
-export const Drawio = (props: Props): JSX.Element => {
+export const DrawioViewer = (props: Props): JSX.Element => {
   const {
     diagramIndex, bol, eol, children,
   } = props;
@@ -29,7 +29,7 @@ export const Drawio = (props: Props): JSX.Element => {
 
   const mxgraphData = generateMxgraphData(code, diagramIndex);
 
-  const mxgraphHtml = `<div class="mxgraph" style="max-width: 100%; border: 1px solid transparent" data-mxgraph="${mxgraphData}"></div>`;
+  const mxgraphHtml = `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
 
   return (
     <div

packages/remark-drawio-plugin/src/index.ts

@@ -1,3 +1,3 @@
-export * from './components/Drawio';
+export * from './components/DrawioViewer';
 export * from './services/renderer/remark-drawio-plugin';
 export * from './utils/embed';