cloudinary-community · colbyfayock · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 7, 2023
diff --git a/docs/components/VisualEditor/VideoEditor.js b/docs/components/VisualEditor/VideoEditor.js
@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorView } from "@codemirror/view";
+import parse from 'html-react-parser';
+
+import { CldImage } from '../../../next-cloudinary';
+
+import styles from './VisualEditor.module.scss';
+
+const VisualEditor = ({ defaultCode }) => {
+  const [code, setCode] = useState(defaultCode);
+
+  const cleanCode = code?.trim().replace(/^\s+|\s+$/g, '') || '';
+
+  const onChange = useCallback((value, viewUpdate) => {
+    setCode(value);
+  }, []);
+
+  return (
+    <div className={styles.visualEditor}>
+      <CodeMirror
+        value={cleanCode}
+        height="100%"
+        className={styles.editor}
+        extensions={[
+          javascript({ jsx: true }),
+          EditorView.baseTheme({
+            "&.cm-editor": { overflow: "auto" },
+            ".cm-scroller": { overflow: "auto" }
+          })
+        ]}
+        theme={tokyoNight}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+        }}
+        onChange={onChange}
+      />
+      {parse(cleanCode, {
+        replace(domNode) {
+          if (domNode.name === 'cldimage') {
+            console.log('domNode.attribs', domNode.attribs)
+            return <CldImage {...domNode.attribs} />;
+          }
+        },
+      })}
+    </div>
+  )
+}
+
+export default VisualEditor;
diff --git a/docs/components/VisualEditor/VisualEditor.module.scss b/docs/components/VisualEditor/VisualEditor.module.scss
@@ -0,0 +1,10 @@
+.visualEditor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: #1a1b26;
+}
+
+.editor {
+  overflow-x: auto;
+  padding: 1em;
+}
diff --git a/docs/components/VisualEditor/index.js b/docs/components/VisualEditor/index.js
@@ -0,0 +1 @@
+export { default } from './VideoEditor';
diff --git a/docs/package.json b/docs/package.json
@@ -9,8 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@uiw/codemirror-theme-tokyo-night": "^4.21.7",
+    "@uiw/react-codemirror": "^4.21.7",
     "@vercel/analytics": "^1.0.1",
     "cloudinary": "^1.37.3",
+    "html-react-parser": "^4.0.0",
     "next": "^13.4.9",
     "nextra": "^2.9.0",
     "nextra-theme-docs": "^2.9.0",

diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
@@ -6,6 +6,7 @@ import { CldImage } from '../../../next-cloudinary';
 import ImageGrid from '../../components/ImageGrid';
 import OgImage from '../../components/OgImage';
 import Video from '../../components/Video';
+import VisualEditor from '../../components/VisualEditor';
 
 <Head>
   <title>CldImage - Next Cloudinary</title>
@@ -30,6 +31,19 @@ As CldImage is a wrapper around the Next.js Image component, you also gain acces
 
 The basic required props include `width`, `height`, `src`, and `alt`:
 
+<VisualEditor
+  defaultCode={`
+<CldImage
+  width="960"
+  height="600"
+  src="images/galaxy"
+  sizes="(max-width: 480px) 100vw, 50vw"
+  removeBackground
+  alt=""
+/>
+  `}
+/>
+
 ```jsx
 import { CldImage } from 'next-cloudinary';
 

diff --git a/docs/pages/guides/image-optimization.mdx b/docs/pages/guides/image-optimization.mdx
@@ -72,4 +72,4 @@ You can further optimize delivery by using [responsive sizing](/guides/responsiv
 ## Learn More
 * [Responsive Images](/guides/responsive-images)
 * [CldImage](/cldimage/basic-usage)
-* [getCldImageUrl](/getcldimageurl/basic-usage)
+* [getCldImageUrl](/getcldimageurl/basic-usage)
diff --git a/docs/pages/guides/image-overlays.mdx b/docs/pages/guides/image-overlays.mdx
@@ -109,4 +109,4 @@ You can add images on top of other images by using image-based overlays.
 
 ## Learn More
 * [CldImage](/cldimage/basic-usage)
-* [getCldImageUrl](/getcldimageurl/basic-usage)
+* [getCldImageUrl](/getcldimageurl/basic-usage)
diff --git a/docs/pages/guides/image-underlays.mdx b/docs/pages/guides/image-underlays.mdx
@@ -69,4 +69,4 @@ See the examples above under Overlays to learn more about the available configur
 
 ## Learn More
 * [CldImage](/cldimage/basic-usage)
-* [getCldImageUrl](/getcldimageurl/basic-usage)
+* [getCldImageUrl](/getcldimageurl/basic-usage)
diff --git a/docs/pages/guides/social-media-card.mdx b/docs/pages/guides/social-media-card.mdx
@@ -208,4 +208,4 @@ import { CldImage, CldOgImage } from '../../../next-cloudinary';
 </Tabs>
 
 ## Learn More
-* [CldOgImage Configuration](/cldogimage/configuration)
+* [CldOgImage Configuration](/cldogimage/configuration)
diff --git a/docs/pages/guides/text-overlays.mdx b/docs/pages/guides/text-overlays.mdx
@@ -118,4 +118,4 @@ You can add text on top of your image with text-based overlays.
 
 ## Learn More
 * [CldImage](/cldimage/basic-usage)
-* [getCldImageUrl](/getcldimageurl/basic-usage)
+* [getCldImageUrl](/getcldimageurl/basic-usage)
diff --git a/docs/pages/installation.mdx b/docs/pages/installation.mdx
@@ -73,4 +73,4 @@ Learn how to add one of the Next Cloudinary components:
 Or use the helper methods to generate URLs:
 
 * [getCldImageUrl](/getcldimageurl/basic-usage): Construct a Cloudinary image URL using the same API as CldImage
-* [getCldOgImageUrl](/getcldogimageurl/basic-usage): Create a Cloudinary image URL specifically for OG Images or Social Media Cards
+* [getCldOgImageUrl](/getcldogimageurl/basic-usage): Create a Cloudinary image URL specifically for OG Images or Social Media Cards