React Native Support

package.json

@@ -26,7 +26,8 @@
     "dompurify": "^2.0.11",
     "lodash-es": "^4.17.15",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-native": "^0.63.2"
   },
   "devDependencies": {
     "@auto-it/all-contributors": "^9.35.1",

src/Editmode.jsx

@@ -1,23 +1,28 @@
 // @ts-check
 import React, { useEffect } from "react";
 import { EditmodeContext } from "./EditmodeContext";
+import { Platform } from 'react-native';
 
 export function Editmode({ children, projectId }) {
   if (!projectId) {
     throw new Error("<Editmode projectId={...}> is missing a valid projectId");
   }
 
-  useEffect(() => {
-    window["chunksProjectIdentifier"] = projectId;
+  let branch;
 
-    const script = document.createElement("script");
-    script.src = "https://static.editmode.com/editmode@^1.0.0/dist/editmode.js";
-    script.async = true;
-    document.body.append(script);
-  }, []);
+  if (Platform.OS === 'web') {
+    useEffect(() => {
+      window["chunksProjectIdentifier"] = projectId;
 
-  let params = new URL(document.location.href).searchParams;
-  let branch = params.get("em_branch");
+      const script = document.createElement("script");
+      script.src = "https://static.editmode.com/editmode@^1.0.0/dist/editmode.js";
+      script.async = true;
+      document.body.append(script);
+    }, []);
+
+    let params = new URL(document.location.href).searchParams;
+    branch = params.get("em_branch");
+  }
 
   return (
     <EditmodeContext.Provider value={{ branch, projectId }}>

src/utils/renderChunk.jsx

@@ -1,63 +1,68 @@
 import DOMpurify from "dompurify";
 import React from "react";
+import { Platform, Text, Image } from 'react-native';
 
 export const renderChunk = (cnk, props) => {
-  let chunk = { ...cnk, content: DOMpurify.sanitize(cnk.content) };
+  const sanitizedContent = Platform.OS === 'web'
+    ? DOMpurify.sanitize(cnk.content)
+    : cnk.content;
+
+  let chunk = { ...cnk, content: sanitizedContent };
   switch (chunk.chunk_type) {
     case "single_line_text":
-      return (
-        <em-span
-          data-chunk={chunk.identifier}
-          data-chunk-editable={true}
-          data-chunk-content-key={chunk.content_key}
-          data-chunk-type="single_line_text"
-          key={chunk.identifier}
-          {...props}
-        >
-          {chunk.content}
-        </em-span>
-      );
     case "long_text":
-      return (
-        <em-span
-          data-chunk={chunk.identifier}
-          data-chunk-editable={true}
-          data-chunk-content-key={chunk.content_key}
-          data-chunk-type="long_text"
-          key={chunk.identifier}
-          {...props}
-        >
-          {chunk.content}
-        </em-span>
-      )
+      return Platform.OS === 'web'
+        ? (<em-span
+            data-chunk={chunk.identifier}
+            data-chunk-editable={true}
+            data-chunk-content-key={chunk.content_key}
+            data-chunk-type={chunk.chunk_type}
+            key={chunk.identifier}
+            {...props}
+          >
+            {chunk.content}
+          </em-span>)
+        : (<Text
+            key={chunk.identifier}
+            {...props}
+          >
+            {chunk.content}
+          </Text>);
     case "rich_text":
-      return (
-        <em-span
-          class="editmode-richtext-editor"
-          data-chunk={chunk.identifier}
-          data-chunk-editable={true}
-          data-chunk-content-key={chunk.content_key}
-          data-chunk-type="rich_text"
-          key={chunk.identifier}
-          dangerouslySetInnerHTML={{__html: chunk.content}}
-          {...props}
-        >
-        </em-span>
-      )
+      return Platform.OS === 'web'
+        ? (<em-span
+            class="editmode-richtext-editor"
+            data-chunk={chunk.identifier}
+            data-chunk-editable={true}
+            data-chunk-content-key={chunk.content_key}
+            data-chunk-type="rich_text"
+            key={chunk.identifier}
+            dangerouslySetInnerHTML={{__html: chunk.content}}
+            {...props}
+          >
+          </em-span>)
+        : null;
     case "image":
-      return (
-        <img
-          src={chunk.content}
-          data-chunk={chunk.identifier}
-          data-chunk-editable={false}
-          data-chunk-content-key={chunk.content_key}
-          data-chunk-type="image"
-          alt=""
-          key={chunk.identifier}
-          {...props}
-        />
-      );
+      return Platform.OS === 'web'
+        ? (<img
+            src={chunk.content}
+            data-chunk={chunk.identifier}
+            data-chunk-editable={false}
+            data-chunk-content-key={chunk.content_key}
+            data-chunk-type="image"
+            alt=""
+            key={chunk.identifier}
+            {...props}
+          />)
+        : (<Image
+              source={{
+                uri: 'https:' + chunk.content,
+                isStatic: true,
+              }}
+            />);
     default:
-      return <span {...props}>{chunk.content}</span>;
+      return Platform.OS === 'web'
+        ? <span {...props}>{chunk.content}</span>
+        : <Text {...props}>{chunk.content}</Text>;
   }
 };