From 65c6a120a90eee010dc2b0f4fdad8d0062265ebb Mon Sep 17 00:00:00 2001
From: Akiva Berger <akiva10b@gmail.com>
Date: Thu, 21 Nov 2024 14:47:55 +0200
Subject: [PATCH] feat(plugins): init plugin loader

---
 static/js/ConnectionsPanel.jsx   |  5 +++
 static/js/WebComponentLoader.jsx | 54 ++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 static/js/WebComponentLoader.jsx

diff --git a/static/js/ConnectionsPanel.jsx b/static/js/ConnectionsPanel.jsx
index 039b3eadf3..15d158cd9a 100644
--- a/static/js/ConnectionsPanel.jsx
+++ b/static/js/ConnectionsPanel.jsx
@@ -31,6 +31,7 @@ import { AddToSourceSheetBox } from './AddToSourceSheet';
 import LexiconBox from './LexiconBox';
 import AboutBox from './AboutBox';
 import GuideBox from './GuideBox';
+import WebComponentLoader from './WebComponentLoader'
 import TranslationsBox from './TranslationsBox';
 import ExtendedNotes from './ExtendedNotes';
 import classNames from 'classnames';
@@ -348,6 +349,7 @@ class ConnectionsPanel extends Component {
               <ToolsButton en="Table of Contents" he="תוכן העניינים" image="text-navigation.svg" urlConnectionsMode="Navigation" onClick={() => this.props.setConnectionsMode("Navigation")} />
               <ToolsButton en="Search in this Text" he="חיפוש בטקסט" image="compare.svg" urlConnectionsMode="SidebarSearch" onClick={() => this.props.setConnectionsMode("SidebarSearch")} />
               <ToolsButton en="Translations" he="תרגומים" image="translation.svg"  urlConnectionsMode="Translations" onClick={() => this.props.setConnectionsMode("Translations")} count={resourcesButtonCounts.translations} />
+              <ToolsButton en="Plugin" he="תוסף" image="connection.png" urlConnectionsMode="Plugin" onClick={() => this.props.setConnectionsMode("Plugin")} />
             </div>
           }
           {showConnectionSummary ?
@@ -675,6 +677,9 @@ class ConnectionsPanel extends Component {
                 onSidebarSearchClick={this.props.onSidebarSearchClick}
               />
     }
+    else if (this.props.mode === "Plugin") {
+      content = <WebComponentLoader sref={this.props.srefs[0]} />
+    }
 
     const marginless = ["Resources", "ConnectionsList", "Advanced Tools", "Share", "WebPages", "Topics", "manuscripts"].indexOf(this.props.mode) !== -1;
     let classes = classNames({ connectionsPanel: 1, textList: 1, marginless: marginless, fullPanel: this.props.fullPanel, singlePanel: !this.props.fullPanel });
diff --git a/static/js/WebComponentLoader.jsx b/static/js/WebComponentLoader.jsx
new file mode 100644
index 0000000000..16c87dd417
--- /dev/null
+++ b/static/js/WebComponentLoader.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+function WebComponentLoader(props) {
+  const [link, setLink] = useState('');
+  const [loaded, setLoaded] = useState(false);
+  const sref = props.sref;
+
+  const repoToRawLink = (link) => {
+    const repo = link.split('github.com/')[1].split('/');
+    const dateTimeStamp = new Date().getTime();
+    return `https://${repo[0]}.github.io/${repo[1]}/plugin.js?rand=${dateTimeStamp}`
+  }
+
+  let script = null;
+    
+  const handleClick = () => {
+    if (script) {
+      document.head.removeChild(script);
+      setLoaded(false);
+    }
+    if (link) {
+      script = document.createElement('script');
+      script.src = repoToRawLink(link);
+      script.async = true;
+      script.onload = () => {
+        setLoaded(true);
+      };
+      document.head.appendChild(script);
+    }
+  };
+
+  if (loaded) {
+    return (
+            <div>
+                <button onClick={handleClick}>Reload Plugin</button>
+                <sefaria-plugin sref={sref} />
+            </div>
+        );
+  }
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Enter script link"
+        value={link}
+        onChange={(e) => setLink(e.target.value)}
+      />
+      <button onClick={handleClick}>Pull</button>
+    </div>
+  );
+}
+
+export default WebComponentLoader;