From f31bac9045027b78be2921a25629f07458974209 Mon Sep 17 00:00:00 2001
From: Palash <pgolecha12@gmail.com>
Date: Wed, 10 Jan 2024 23:17:13 +0530
Subject: [PATCH] feat: add plugin rendering docs

---
 .../plugins/{index.mdx => basics.mdx}         |  7 +-
 docs/guides/capabilities/plugins/docshare.mdx |  8 ++
 .../guides/capabilities/plugins/rendering.mdx | 98 +++++++++++++++++++
 docs/guides/capabilities/plugins/streamer.mdx |  4 +
 .../capabilities/plugins/whiteboard.mdx       |  4 +
 5 files changed, 120 insertions(+), 1 deletion(-)
 rename docs/guides/capabilities/plugins/{index.mdx => basics.mdx} (99%)
 create mode 100644 docs/guides/capabilities/plugins/rendering.mdx

diff --git a/docs/guides/capabilities/plugins/index.mdx b/docs/guides/capabilities/plugins/basics.mdx
similarity index 99%
rename from docs/guides/capabilities/plugins/index.mdx
rename to docs/guides/capabilities/plugins/basics.mdx
index f255ccdd54..c76698cb35 100644
--- a/docs/guides/capabilities/plugins/index.mdx
+++ b/docs/guides/capabilities/plugins/basics.mdx
@@ -1,4 +1,9 @@
-# Plugins
+---
+slug: '/capabilities/plugins'
+sidebar_position: 1
+---
+
+# Basics
 
 Dyte Plugins allow you to build collaborative and immersive experiences in your meetings without ever having to leave the meeting. The guides listed here will help you enable or disable plugins during meetings, configure existing plugins and even create new plugins with the help of Meeting APIs and built-in realtime database.
 
diff --git a/docs/guides/capabilities/plugins/docshare.mdx b/docs/guides/capabilities/plugins/docshare.mdx
index 0a426713d3..6589e4cb2a 100644
--- a/docs/guides/capabilities/plugins/docshare.mdx
+++ b/docs/guides/capabilities/plugins/docshare.mdx
@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Document Sharing'
+---
+
 # Document Sharing
 
 DocShare allows you to share, view documents and annotate the documents collaboratively.
@@ -35,3 +39,7 @@ To open the plugin you can call
 ```ts
 docsharePlugin.activate();
 ```
+
+### File format support
+
+Supports PPTX, PPT, DOC, PDF
diff --git a/docs/guides/capabilities/plugins/rendering.mdx b/docs/guides/capabilities/plugins/rendering.mdx
new file mode 100644
index 0000000000..69671cb13d
--- /dev/null
+++ b/docs/guides/capabilities/plugins/rendering.mdx
@@ -0,0 +1,98 @@
+---
+sidebar_position: 2
+---
+
+# Rendering
+
+## Usage
+
+### Methods / Properties <div class="header-tag tag-core">Core</div>
+
+Here is an introduction on the basics of rendering plugins in your UI:
+
+<Tabs groupId="framework">
+<TabItem value="js" label="Javascript">
+
+Once a plugin is activated you can render them using an `<iframe>` element
+
+```html
+<iframe id="plugin-view" />
+```
+
+and then pass the iframe to the plugin
+
+```js
+const iframeEl = document.getElementById('plugin-view');
+plugin.addPluginView(this.iframeEl);
+```
+
+A full example might look something like this
+
+```js
+const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
+whiteboard.on('enabled', () => {
+  const iframeEl = document.createElement('iframe');
+  whiteboard.addPluginView(iframeEl);
+  document.body.appendChild(iframeEl);
+});
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+- Setup an iframe element
+
+```jsx
+const PluginView = () => {
+  const pluginEl = useRef();
+
+  return <iframe id="plugin-view" ref={pluginEl} />;
+};
+```
+
+- Send reference of iframe to the plugin
+
+```jsx {4-8}
+const PluginView = (activatedPlugin) => {
+  const pluginEl = useRef();
+
+  useEffect(() => {
+    if (activatedPlugin) {
+      activatedPlugin.addPluginView(pluginEl.current);
+    }
+  }, [activatedPlugin]);
+
+  return <iframe id="plugin-view" ref={pluginEl} />;
+};
+```
+
+- Render all activated plugins
+
+```jsx
+const Meeting = () => {
+  const activatedPlugins = useDyteSelector((m) => m.plugins.active);
+  return (
+    {
+      activatedPlugins.toArray()
+        .map((p) => <PluginView activatedPlugin={p} />)
+    }
+  )
+}
+```
+
+</TabItem>
+<TabItem value="flutter" label="Flutter">
+
+Once a plugin is activated, use the `PluginView` widget to get a Platform View which renders the plugin
+
+```dart {4}
+SizedBox(
+    height: context.height,
+        child: InteractiveViewer(
+            child: PluginView(widget.plugin),
+        ),
+    )
+```
+
+</TabItem>
+</Tabs>
diff --git a/docs/guides/capabilities/plugins/streamer.mdx b/docs/guides/capabilities/plugins/streamer.mdx
index 78a743fae8..b180c620ab 100644
--- a/docs/guides/capabilities/plugins/streamer.mdx
+++ b/docs/guides/capabilities/plugins/streamer.mdx
@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Streamer'
+---
+
 # Video Player
 
 Streamer allows you to share & watch your favorite videos together. The plugin exposes a few APIs to control the video playback
diff --git a/docs/guides/capabilities/plugins/whiteboard.mdx b/docs/guides/capabilities/plugins/whiteboard.mdx
index bba4023154..5f605b2507 100644
--- a/docs/guides/capabilities/plugins/whiteboard.mdx
+++ b/docs/guides/capabilities/plugins/whiteboard.mdx
@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Whiteboard'
+---
+
 # Whiteboard
 
 Whiteboard allows you to write, draw and ideate collaboratively. Built on top of tldraw