Handle image transformation

README.md

@@ -139,6 +139,20 @@ function Example() {
 
 With this, chunks such as `Hello, {{name}}!` will be parsed as `Hello, John!`
 
+#### Working with Image Transformation:
+Use `transformation` attribute to perform real-time image transformations to deliver perfect images to the end-users.
+
+```js
+// This chunk should render an image with 200 x 200 dimension
+<Chunk identifier='cnk_23123123' transformation="w-200 h-200" />
+
+// For image inside a collection
+<ChunkCollection identifier="col_123...">
+	<ChunkFieldValue identifier='Avatar' transformation="w-200 h-200"  />
+</ChunkCollection>
+```
+Please see complete list of [transformation parameters](https://editmode.com/docs#/imagekit_properties).
+
 ### Step 3:
 
 You can now edit and save all of the chunks in your React app from within the browser - just add `editmode=1` as a query string parameter to the current URL.

src/ChunkFieldValue.jsx

@@ -3,7 +3,7 @@ import React, { useContext } from "react";
 import { renderChunk } from "./utilities";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 
-export function ChunkFieldValue({ children, identifier, ...props }) {
+export function ChunkFieldValue({ children, identifier, transformation, ...props }) {
   const chunk = useContext(ChunkCollectionContext);
 
   if (!chunk) {

src/useChunk.js

@@ -28,7 +28,7 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
     );
   }
 
-  const url = `chunks/${identifier || contentKey}?project_id=${projectId}`;
+  let url = `chunks/${identifier || contentKey}?project_id=${projectId}`;
 
   useEffect(() => {
     // Render content

src/utilities/index.js

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

src/utilities/renderChunk.jsx

@@ -1,8 +1,13 @@
 import React from "react";
-import { sanitizeContent } from './'
+import { sanitizeContent, transformImage } from './'
 
 export const renderChunk = (data, props) => {
   const { chunk, parsedChunk } = sanitizeContent(data, props)
+  const transformation = props.transformation
+  if (transformation && chunk.chunk_type == 'image') {
+    chunk.content = transformImage(chunk.content, transformation)
+    console.log(transformImage(chunk.content, transformation))
+  }
 
   const defaultprops = {
     "data-chunk": chunk.identifier,

src/utilities/transformImage.js

@@ -0,0 +1,11 @@
+export const transformImage = (url, transformation) => {
+  try {
+    transformation = transformation.trim().replace(/\s+/g, ' ').replace(" ", ",")
+    let newUrl = new URL(url)
+    newUrl.searchParams.append('tr', transformation)
+    return newUrl.toString()
+  } catch (er){
+    console.warn(er)
+    return url
+  }
+}

yarn.lock

@@ -5378,11 +5378,6 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-[email protected]:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
-  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
-
 fast-deep-equal@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
@@ -9930,7 +9925,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10180,14 +10175,6 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-native@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-router-native/-/react-router-native-5.2.0.tgz#40c40856a8d1e3b189c7ad5c1be9b1ead4dbacfd"
-  integrity sha512-4J9htwyEDpE8mmuZ3vlgsxUd79BU/R64PqMQoXbZU/QM7gaB1O3EEY9MRryidxDmSy+rrTvVe4PjAzGRV0bFFg==
-  dependencies:
-    prop-types "^15.6.1"
-    react-router "5.2.0"
-
 [email protected]:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
@@ -11544,13 +11531,6 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-swr@^0.3.0:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.3.2.tgz#1197e06553f71afbc42dba758459f12daea96805"
-  integrity sha512-Bs5Bihq1hQ66O5bdKaL47iZ2nlAaBsd8tTLRLkw9stZeuBEfH7zSuQI95S2TpchL0ybsMq3isWwuso2uPvCfHA==
-  dependencies:
-    fast-deep-equal "2.0.1"
-
 symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"