Refactor Rapid integration to load the editor in an iframe

maproulette · Aug 15, 2024 · 8914a73 · 8914a73
1 parent 3b07eea
commit 8914a73
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 1,350 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
     "@nivo/line": "^0.79.1",
     "@nivo/radar": "^0.79.1",
     "@popperjs/core": "^2.8.4",
-    "@rapideditor/rapid": "^2.1.1",
     "@react-leaflet/core": "^2.1.0",
     "@rjsf/core": "^4.2.3",
     "@turf/bbox": "^6.0.1",
@@ -131,11 +130,9 @@
     "update-layers": "node scripts/update_layers.js",
     "update-layers-prod": "NODE_ENV=production node scripts/update_layers.js",
     "update-presets": "node scripts/update_presets.js",
-    "copy-static": "bash -c \"mkdir -p public/static/id; mkdir -p public/static/rapid; if ! (test -a public/static/rapid/rapid.js); then cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid; fi\"",
-    "update-static": "bash -c \"mkdir -p public/static/id; mkdir -p public/static/rapid; cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid;\"",
     "start-js": "react-scripts --max_old_space_size=4096 start",
-    "start": "npm-run-all -p copy-static update-layers watch-postcss start-js",
-    "build": "yarn update-static && yarn run build-intl && yarn run update-layers-prod && yarn run build-postcss && react-scripts --max_old_space_size=4096 build",
+    "start": "npm-run-all -p update-layers watch-postcss start-js",
+    "build": "yarn run build-intl && yarn run update-layers-prod && yarn run build-postcss && react-scripts --max_old_space_size=4096 build",
     "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --resetMocks=false --detectOpenHandles",
     "test:cov": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --coverage --resetMocks=false",
     "test:cov-full": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-leaflet)/\" --coverage --watchAll --resetMocks=false",

diff --git a/public/rapid-editor.html b/public/rapid-editor.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <!--
+      Adapted from Rapid's code examples at https://github.com/facebook/Rapid/tree/main/dist/examples
+
+      Copyright (c) 2024, Rapid Contributors
+
+      Permission to use, copy, modify, and/or distribute this software for any purpose
+      with or without fee is hereby granted, provided that the above copyright notice
+      and this permission notice appear in all copies.
+
+      THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+      REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+      AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+      INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+      OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+      TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+      THIS SOFTWARE.
+    -->
+    <title>Rapid</title>
+    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@rapideditor/rapid@2/dist/rapid.min.css'>
+
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
+    <meta name='mobile-web-app-capable' content='yes'/>
+    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
+    <style type='text/css'>
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        /* disable elastic page bounce upon scroll */
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id='rapid-container'></div>
+
+    <script>
+      const container = document.getElementById('rapid-container');
+      const newScript = document.createElement('script');
+      newScript.type = 'text/javascript';
+      newScript.onload = checkScript;
+      newScript.onerror = checkScript;
+      newScript.src = 'https://cdn.jsdelivr.net/npm/@rapideditor/rapid@2/dist/rapid.min.js';
+
+      document.getElementsByTagName('head')[0].appendChild(newScript);
+
+      function checkScript() {
+        const params = new URLSearchParams(document.location.search);
+        const token = params.get('token');
+
+        console.log("token", token);
+
+        if (!token) {
+          console.error("Rapid iframe initialized without an OSM API access token");
+        }
+
+        if (typeof Rapid === 'undefined' || !Rapid.utilDetect().support) {
+          container.innerHTML = 'Sorry, the Rapid editor does not support your web browser.';
+          container.style.padding = '20px';
+
+        } else {
+          const context = new Rapid.Context();
+          context.containerNode = container;
+          context.assetPath = 'https://cdn.jsdelivr.net/npm/@rapideditor/rapid@2/dist/';
+          context.buildID = '';
+          context.buildSHA = '';
+          context.buildDate = '';
+          context.preauth =  {
+            url: 'https://www.openstreetmap.org', // TODO: use REACT_APP_OSM_SERVER here?
+            apiUrl: 'https://api.openstreetmap.org',
+            access_token: token,
+          };
+          context.apiConnections = [context.preauth];
+
+          window.rapidContext = context;
+          context.initAsync();
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/components/HOCs/WithEditor/WithEditor.js b/src/components/HOCs/WithEditor/WithEditor.js
@@ -26,7 +26,7 @@ export const mapStateToProps = state => {
   return ({
     editor: state.openEditor,
     configuredEditor: _get(userEntity, 'settings.defaultEditor', DEFAULT_EDITOR),
-    rapidContext: _get(state, 'rapidEditor.context'),
+    rapidEditorState: _get(state, 'rapidEditor'),
   })
 }
 

diff --git a/src/components/HOCs/WithEditor/__snapshots__/WithEditor.test.js.snap b/src/components/HOCs/WithEditor/__snapshots__/WithEditor.test.js.snap
@@ -4,6 +4,6 @@ exports[`mapStateToProps provides an editor prop with the current open editor 1`
 Object {
   "configuredEditor": 0,
   "editor": 1,
-  "rapidContext": undefined,
+  "rapidEditorState": undefined,
 }
 `;
diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.js b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.js
@@ -183,11 +183,10 @@ export class ActiveTaskControls extends Component {
   }
 
   initiateCompletion = (taskStatus, submitRevision) => {
-    const hasUnsavedRapidChanges = this.props.rapidContext?.systems.editor.hasChanges()
     const intl = this.props.intl
     const message = intl.formatMessage(messages.rapidDiscardUnsavedChanges)
 
-    if (!hasUnsavedRapidChanges || window.confirm(message)) {
+    if (!this.props.rapidEditorState.hasUnsavedChanges || window.confirm(message)) {
       this.setState({
         confirmingTask: this.props.task,
         osmComment: `${this.props.task.parent.checkinComment}${constructChangesetUrl(this.props.task)}`,