add iframe demo

docs/src/index.html

@@ -8,5 +8,6 @@
     ${app}
     ${scripts}
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" integrity="sha512-FOf4suFgz7OrWmBiyyWW48u/+6GaaAFSDHagh2EBu/GH/1+OQSYc0NFGeGeZK0gZ3vuU1ovmzVzD6bxmT4vayg==" crossorigin="anonymous"></script>
   </body>
 </html>

docs/src/main.js

@@ -3,6 +3,7 @@ import 'prismjs/components/prism-jsx.js'
 import 'prismjs/components/prism-typescript.js'
 import 'prismjs/components/prism-scss.js'
 import PortalVue from 'portal-vue'
+import iframeResize from 'iframe-resizer/js/iframeResizer'
 import App from '~/layouts/App'
 
 Prism.manual = true
@@ -20,6 +21,16 @@ export default function (Vue, { head }) {
   }
 
   Vue.use(PortalVue)
+
+  Vue.directive('resize', {
+    bind(el, { value = {} }) {
+      el.addEventListener('load', () => iframeResize(value, el))
+    },
+    unbind(el) {
+      el.iFrameResizer.removeListeners()
+    },
+  })
+
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
   Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))

docs/src/pages/index.vue

@@ -13,6 +13,14 @@
     </app-section>
 
     <app-section>
+      <iframe
+        v-resize
+        src="demos/Examples/CollaborativeEditing"
+        style="background-color: white; border-radius: 8px;"
+        width="100%"
+        height="400"
+        frameborder="0"
+      />
       <demo name="Examples/CollaborativeEditing" :show-source="false" inline />
     </app-section>
 

docs/src/templates/DemoPage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-page">
-    <demo :name="$context.name" :show-source="false" />
+    <demo :name="$context.name" :show-source="false" inline />
   </div>
 </template>
 

docs/src/templates/DemoPage/style.scss

@@ -1,4 +1,4 @@
 .demo-page {
-  max-width: 40rem;
-  margin: 2rem auto;
+  // max-width: 40rem;
+  // margin: 2rem auto;
 }