remove submodule, add referrer to api header (#35)

Author: notthatjen

src/ChunkCollection.jsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
-import { api, getCachedData, storeCache } from './utils'
+import { api, getCachedData, storeCache } from './utilities'
 
 export function ChunkCollection({
   children,

src/ChunkFieldValue.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 
-import { renderChunk } from "./utils";
+import { renderChunk } from "./utilities";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 
 export function ChunkFieldValue({ children, identifier, ...props }) {

src/useChunk.js

@@ -2,7 +2,7 @@
 import { useContext, useEffect, useState, useMemo } from "react";
 
 import { EditmodeContext } from "./EditmodeContext";
-import { api, renderChunk, computeContentKey, getCachedData, storeCache } from './utils'
+import { api, renderChunk, computeContentKey, getCachedData, storeCache } from './utilities'
 
 export function useChunk(defaultContent, { identifier, type, contentKey }) {
   const { projectId, defaultChunks } = useContext(EditmodeContext);

src/utilities/api.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: "https://api.editmode.com/",
+  headers: {
+    Accept: "application/json",
+    referrer: window.location.href
+  },
+});

src/utilities/caching.js

@@ -0,0 +1,7 @@
+export const getCachedData = (id) => {
+  return localStorage.getItem(id);
+}
+
+export const storeCache = (id, data) => {
+  localStorage.setItem(id, JSON.stringify(data));
+}

src/utilities/computeContentKey.js

@@ -0,0 +1,13 @@
+import hash from "@emotion/hash";
+import kebabCase from "lodash.kebabcase";
+
+export function computeContentKey(content) {
+  if (typeof content !== "string") {
+    console.error(
+      `Cannot compute chunk.content_key. Expected a string, received ${typeof content}.`
+    );
+    return;
+  }
+
+  return `${kebabCase(content.slice(0, 32))}-${hash(content)}`;
+}

src/utilities/index.js

@@ -0,0 +1,6 @@
+export { getCachedData, storeCache } from './caching'
+export { computeContentKey } from './computeContentKey'
+export { sanitizeContent } from './sanitizeContent'
+export { api } from './api'
+
+export { renderChunk } from './renderChunk.jsx'

src/utilities/renderChunk.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { sanitizeContent } from './'
+
+export const renderChunk = (data, props) => {
+  const { chunk, parsedChunk } = sanitizeContent(data, props)
+
+  const defaultprops = {
+    "data-chunk": chunk.identifier,
+    "data-chunk-editable": true,
+    "data-chunk-content-key": chunk.content_key,
+    "data-chunk-type": chunk.chunk_type,
+    "key": chunk.identifier
+  }
+
+  switch (chunk.chunk_type) {
+    case "single_line_text":
+    case "long_text":
+      return (<em-span
+        {...defaultprops}
+        dangerouslySetInnerHTML={{__html: parsedChunk}}
+        {...props}
+      />);
+    case "rich_text":
+      return (<em-span
+        {...defaultprops}
+        class="editmode-richtext-editor"
+        dangerouslySetInnerHTML={{__html: parsedChunk}}
+        {...props}
+      />);
+    case "image":
+      return (<img
+        {...defaultprops}
+        src={chunk.content}
+        data-chunk-editable={false}
+        alt=""
+        {...props}
+      />);
+    default:
+      return <span {...props}>{parsedChunk}</span>;
+  }
+};

src/utilities/sanitizeContent.js

@@ -0,0 +1,19 @@
+import DOMpurify from "isomorphic-dompurify";
+
+export const sanitizeContent = (data, props) => {
+  const sanitizedContent = DOMpurify.sanitize(data.content);
+  const chunk = { ...data, content: sanitizedContent };
+  const tokens = (chunk.content.match(/\{{(.*?)\}}/g)|| []).map(t => t.substr(2, t.length-4))
+  
+  let parsedChunk = chunk.content;
+
+  if (tokens) {
+    tokens.forEach(function(token) {
+      const value = props.variables && props.variables[token] || ""
+      const emVar = `<em-var data-chunk-variable="${token}" data-chunk-variable-value="${value}">${value}</em-var>`
+      parsedChunk = parsedChunk.replace(`{{${token}}}`, emVar);
+    });
+  }
+
+  return { chunk, parsedChunk }
+}