MSIAB Improvements

.gitignore

@@ -2,4 +2,5 @@
 dist
 node_modules
 package-lock.json
-yarn-error.log
+yarn-error.log
+.DS_Store

package.json

@@ -9,8 +9,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "peerDependencies": {
-    "react": "16.*",
-    "react-dom": "16.*"
+    "react": "*.*",
+    "react-dom": "*.*"
   },
   "keywords": [
     "Editmode",
@@ -25,6 +25,7 @@
     "axios": "0.20.0",
     "isomorphic-dompurify": "^0.6.0",
     "lodash.kebabcase": "^4.1.1",
+    "react-inlinesvg": "^2.3.0",
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
@@ -42,7 +43,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "react-art": "^16.13.1",
+    "react-art": "^17.0.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-node-externals": "^1.7.2"

src/Chunk.jsx

@@ -3,11 +3,10 @@
 import React from "react";
 import { useChunk } from "./useChunk";
 
-export function Chunk({ children, identifier, src, contentKey, ...props }) {
+export function Chunk({ children, identifier, src, contentKey, field = "", ...props }) {
   const type = src ? "image" : undefined;
   const defaultContent = src || children;
-  const { Component } = useChunk(defaultContent, { identifier, type, contentKey });
-
+  const { Component } = useChunk(defaultContent, { identifier, type, contentKey, field });
   return <Component {...props} />;
 }
 

src/ChunkCollection.jsx

@@ -2,9 +2,7 @@
 import React, { useEffect, useState, useContext } from "react";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 import { EditmodeContext } from "./EditmodeContext";
-import { getCachedData, storeCache, computeClassName } from "./utilities";
-import axios from "axios";
-const isBrowser = () => typeof window !== "undefined";
+import { getCachedData, storeCache, computeClassName, api } from "./utilities";
 
 export function ChunkCollection({
   children,
@@ -18,34 +16,30 @@ export function ChunkCollection({
   const [chunks, setChunk] = useState([]);
   const cacheId = identifier + limit + tags.join("");
   // const { collection } = useCollectionData(["Featured Projects"]);
-  const { projectId } = useContext(EditmodeContext);
+  const { projectId, branch } = useContext(EditmodeContext);
 
   useEffect(() => {
     // Get data from localStorage
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-        "referrer": isBrowser() ? window.location.href : ""
-      }
-    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);
       setChunk(data);
     }
-
+    let params = new URL(document.location.href).searchParams;
+    const branchId = branch || params.get("em_branch_id") || "";
     const urlParams = new URLSearchParams({
       limit,
       collection_identifier: identifier || contentKey,
       project_id: projectId,
+      branch_id: branchId,
     });
 
     tags.forEach((tag) => urlParams.append("tags[]", tag));
 
     api
       .get(`chunks?${urlParams}`)
       .then((res) => {
+        if (res.data.error) throw res.data.error;
         storeCache(cacheId, res.data.chunks);
         if (!cachedChunk) setChunk(res.data.chunks);
       })
@@ -63,21 +57,33 @@ export function ChunkCollection({
     ? { ...chunks[0], placeholder: true }
     : {};
 
+  function getChunk(chunk, field) {
+    const fieldChunk = chunk.content.find((c) => c.custom_field_name == field);
+    if (fieldChunk && typeof fieldChunk !== "undefined") {
+      return fieldChunk.content;
+    } else {
+      return "";
+    }
+  }
+
   return (
     <div
       className={computeClassName(className, "chunks-collection-wrapper")}
       data-chunk-cache-id={cacheId}
       data-chunk-collection-identifier={identifier}
+      data-chunk-tags={tags ? tags.join("|") : ""}
     >
-      {chunks.map((chunk) => (
+      {chunks.map((chunk, index) => (
         <ChunkCollectionContext.Provider key={chunk.identifier} value={chunk}>
           <div
             className={computeClassName(
               itemClass,
               "chunks-collection-item--wrapper"
             )}
           >
-            {children}
+            {typeof children === "function"
+              ? children(getChunk, chunk, index)
+              : children}
           </div>
         </ChunkCollectionContext.Provider>
       ))}
@@ -86,14 +92,16 @@ export function ChunkCollection({
           key={chunks[0].identifier + "dummy"}
           value={placeholderChunk}
         >
-          <div
+          <template
             className={computeClassName(
               itemClass,
-              "chunks-col-placeholder-wrapper chunks-hide"
+              "chunks-col-placeholder-wrapper"
             )}
           >
-            {children}
-          </div>
+            {typeof children === "function"
+              ? children(getChunk, placeholderChunk, 0)
+              : children}
+          </template>
         </ChunkCollectionContext.Provider>
       )}
     </div>

src/ChunkFieldValue.jsx

@@ -25,9 +25,7 @@ export function ChunkFieldValue({ children, identifier, transformation, ...props
   const dummyFieldChunk = chunk?.placeholder && ({
     ...fieldChunk,
     identifier: '',
-    content: fieldChunk.chunk_type === 'image'
-      ? 'https://editmode.com/upload.png'
-      : "",
+    content: '',
   })
 
   if (chunk && fieldChunk) {

src/Editmode.jsx

@@ -1,30 +1,55 @@
 // @ts-check
 import React, { useEffect, useState } from "react";
 import { EditmodeContext } from "./EditmodeContext";
+import { getTimedCachedData, storeTimedCache } from "./utilities";
+import { api } from "./utilities";
+import Watermark from "./Watermark.jsx";
 
 export function Editmode({ children, projectId, defaultChunks }) {
   const [branch, setbranch] = useState(null);
-
+  const [hasWaterMark, setHasWaterMark] = useState(null);
   if (!projectId) {
     throw new Error("<Editmode projectId={...}> is missing a valid projectId");
   }
-
+  const cacheId = projectId + "_provider";
   useEffect(() => {
     window["chunksProjectIdentifier"] = projectId;
-
+    window["chunksAppFramework"] = "reactjs"
+    const cachedItem = getTimedCachedData(cacheId);
+    if (cachedItem) window["chunksProjectLoaded"] = true;
     const script = document.createElement("script");
-    script.src = "https://static.editmode.com/editmode@2.0.0/dist/editmode.js";
-    script.async = true;
+
+    script.src = "https://unpkg.com/editmode-magic-editor@^0/dist/magic-editor.js";
     document.body.append(script);
 
     let params = new URL(document.location.href).searchParams;
-    setbranch(params.get("em_branch"));
+    setbranch(params.get("em_branch_id"));
+
+    if (!cachedItem) {
+      api
+        .get(`/projects/${projectId}`)
+        .then((res) => {
+          storeTimedCache(cacheId, res.data);
+          const project = res.data;
+          if (project.has_watermark) {
+            setHasWaterMark(true);
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    } else {
+      const project = cachedItem;
+      if (project.has_watermark) setHasWaterMark(true);
+    }
   }, []);
 
   return (
     <EditmodeContext.Provider value={{ branch, projectId, defaultChunks }}>
-      {children}
+      { children }
+      { hasWaterMark && <Watermark projectId={projectId}/> }
     </EditmodeContext.Provider>
   );
 }
+
 export default Editmode;

src/Watermark.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+const styles = {
+  zIndex: 9999,
+  bottom: 8,
+  right: 8,
+  position: "fixed",
+  opacity: 1,
+  display: 'flex',
+  alignItems: "center",
+  background: "rgba(255,255,255, 0.9)",
+  cursor: "pointer",
+  borderRadius: 5,
+  padding: "2px 5px 2px 2px",
+  boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)"
+}
+
+export default function Watermark({projectId}) {
+  return (
+    <div style={styles} onClick={() => window.open(`https://editmode.com?ref=pb&pid=${projectId}`)}>
+      <svg xmlns="http://www.w3.org/2000/svg"  width="25" height="25" viewBox="0 0 548 532" version="1.1" fill="currentColor">
+        <g id="Page-2" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g id="Group-2-Copy" fill="#02164B" fillRule="nonzero">
+                <path d="M355.57238,93.227099 C421.07938,126.760445 463.228656,200.366589 458.662484,275.197013 C456.789183,321.18219 437.646387,365.465318 406.824729,398.879222 C371.729602,436.503458 321.735878,458.271766 270.922584,458.988418 C203.22031,459.764791 137.596229,421.453764 104.754918,360.956382 C83.2997657,322.496052 75.4553171,276.928922 82.5387371,233.302725 C89.0952911,193.767417 107.828303,156.501508 135.840009,128.343052 C167.861751,95.3770553 211.620895,75.6989829 256.902096,72.4143274 C290.88495,70.1150686 325.248318,77.4308922 355.57238,93.227099 Z M302.597364,108.707879 C244.580186,94.7144282 181.478422,121.295874 147.91428,172.136709 C125.753716,204.951046 116.495656,247.175826 123.079165,286.681355 C127.575938,318.48743 142.800303,348.796389 164.461226,371.680876 C195.556552,404.281339 240.406711,421.818983 284.492713,417.297082 C306.976574,415.738859 326.903446,407.153357 347.094835,397.529041 C333.927816,397.406827 321.113485,400.462166 307.975856,399.881651 C293.691992,399.33169 279.114221,397.284614 265.565123,392.487732 C232.823919,381.213532 204.168018,358.573473 185.916413,328.020087 C170.074843,302.721883 162.668395,271.465768 167.841152,241.52345 C172.896347,214.850343 187.297774,190.224314 208.429665,174.061573 C244.874093,144.791428 299.77586,145.463603 335.750037,175.344815 C370.842495,203.117843 385.273313,253.25595 370.783713,296.550099 C362.524936,322.978778 344.831754,343.357887 322.553628,358.145726 C342.069031,355.12094 360.261854,348.643622 375.985862,336.025074 C406.7285,312.315646 423.275446,271.129681 418.043907,231.715813 C408.727065,170.822914 360.320636,120.89868 302.597364,108.707879 Z M322.507627,229.728263 C308.735553,203.164192 276.64924,189.629307 248.46453,198.136949 C218.823998,206.287627 198.529842,236.927037 201.907349,268.072146 C204.498711,292.375445 220.017772,314.804683 242.932407,323.074349 C267.302864,332.68263 295.895205,325.930061 313.510648,306.148306 C331.970469,285.593129 335.813839,254.180297 322.507627,229.728263 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+      </svg>
+      <span style={{fontSize: 13, fontWeight: 600}}>Powered by Editmode</span>
+    </div>
+  )
+}

src/index.js

@@ -5,6 +5,7 @@ export { Chunk } from "./Chunk.jsx";
 export { ChunkCollection } from "./ChunkCollection.jsx";
 export { ChunkFieldValue } from "./ChunkFieldValue.jsx";
 export { useChunk } from "./useChunk";
+export { useGetChunk } from "./useGetChunk";
 export { useCollectionChunks } from "./useCollectionChunks";
 export { CustomChunkCollection } from "./CustomChunkCollection.jsx";
 export { ChunkCollectionContext } from "./ChunkCollectionContext.js";

src/useChunk.js

@@ -1,24 +1,24 @@
 // @ts-check
 import { useContext, useEffect, useState, useMemo } from "react";
-import axios from "axios";
 
 import { EditmodeContext } from "./EditmodeContext";
 import {
+  api,
   renderChunk,
   computeContentKey,
   getCachedData,
   storeCache,
 } from "./utilities";
 
-export function useChunk(defaultContent, { identifier, type, contentKey }) {
-  const { projectId, defaultChunks } = useContext(EditmodeContext);
-  const [chunk, setChunk] = useState(undefined);
+export function useChunk(defaultContent, { identifier, type, contentKey, field }) {
+  const { projectId, defaultChunks, branch } = useContext(EditmodeContext);
+  let [chunk, setChunk] = useState(undefined);
 
   if (!contentKey) {
     contentKey = defaultContent ? computeContentKey(defaultContent) : null;
   }
 
-  const cacheId = identifier || contentKey + projectId;
+  let cacheId = identifier || contentKey + projectId + field;
 
   let fallbackChunk;
   if (typeof defaultChunks !== "undefined") {
@@ -37,20 +37,12 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
     }, [defaultChunks, identifier]);
   }
 
-  let url = `chunks/${identifier || contentKey}?project_id=${projectId}`;
-
   useEffect(() => {
-    // Render content
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-      },
-      params: {
-        referrer: window.location.href,
-      },
-    });
-
+    let params = new URL(document.location.href).searchParams;
+    const branchId = branch || params.get("em_branch_id") || ""
+    const branchParams = branchId && `branch_id=${branchId}` || ""
+    let url = `chunks/${identifier || contentKey}?project_id=${projectId}&${branchParams}`;
+    if (branchId) cacheId += branchId
     let cachedChunk = getCachedData(cacheId);
     let newChunk = cachedChunk
       ? JSON.parse(cachedChunk)
@@ -79,10 +71,28 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
     }
   }, [cacheId]);
 
+  // Modify chunk if field is present and chunk_type is collection
+  // e.g. <Chunk identifier="identifier_......" field="Title"/>
+  if ( chunk && chunk.chunk_type == "collection_item" && field) {
+    field = field.toLowerCase();
+    const fieldChunk = chunk.content.find(c =>
+      c.custom_field_identifier.toLowerCase() == field || c.custom_field_name.toLowerCase() == field
+    )
+    if (fieldChunk) {
+      setChunk(fieldChunk) // This will set chunk to fieldChunk, and will be rendered by line: 92
+    } else {
+      return {
+        Component() {
+          return null;
+        },
+      };
+    }
+  }
+
   if (chunk) {
     return {
       Component(props) {
-        return renderChunk(chunk, props);
+        return renderChunk(chunk, props, cacheId);
       },
       content: chunk.content,
     };

src/useCollectionChunks.js

@@ -1,21 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { getCachedData, storeCache } from "./utilities";
-import axios from "axios";
+import { getCachedData, storeCache, api } from "./utilities";
 
 export function useCollectionChunks(identifier, limit = "", tags = []) {
   const [chunks, setChunk] = useState([]);
   const cacheId = identifier + limit + tags.join("");
 
   useEffect(() => {
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-      },
-      params: {
-        referrer: window.location.href,
-      },
-    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);