refactor: rename data -> source prop

2 files changed, 27 insertions, 16 deletions

diff --git a/src/index.tsx b/src/index.tsx
index aa786ac..e37e7aa 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -133,7 +133,7 @@ const App: React.FC = () => {
   let primaryWindowContent = <Markdown url={url} />;
   if (page === 'custom') primaryWindowContent = <CustomPage />;
   else if (page === 'live preview') {
-    primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;
+    primaryWindowContent = <Markdown source={livePreviewData || '# Start typing in the right window!'} />;
   }
 
   const tryButton = (
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index 4fa6a9a..32732ec 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -10,7 +10,7 @@ import Heading from './Heading';
 import Image from './Image';
 
 interface PropTypes {
-  data?: string;
+  source?: string;
   url?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   context?: Record<string, any>;
@@ -24,33 +24,44 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace(
   (match, text, url) => `[${text}](${baseUrl}/${url})`,
 );
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WrappedInlineCode = (context: Record<string, any>): React.FC => ({ children }) => {
+  if (typeof children === 'string' && children?.startsWith('$')) {
+    const symbol = children.slice(1);
+    return context[symbol] || null;
+  }
+  return <InlineCode>{children}</InlineCode>;
+};
+
+const Markdown: React.FC<PropTypes> = ({
+  children,
+  url,
+  source,
+  context = {},
+}) => {
+  const [markdown, setMarkdown] = useState<string>(source || '');
 
-const Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {
-  const [markdown, setMarkdown] = useState<string>(data || '');
+  useEffect(() => {
+    if (url) axios.get(url).then(response => setMarkdown(response.data));
+  }, [url]);
 
-  if (url) axios.get(url).then(response => setMarkdown(response.data));
+  useEffect(() => {
+    if (source) setMarkdown(source);
+  }, [source]);
 
   useEffect(() => {
-    if (!url) setMarkdown(data || '');
-  }, [data, url]);
+    if (children && typeof children === 'string') setMarkdown(children);
+  }, [children]);
 
   const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';
   const sanitized = resolveUrls(markdown, baseUrl);
 
-  const WrappedInlineCode: React.FC = ({ children }) => {
-    if (typeof children === 'string' && children?.startsWith('$')) {
-      const symbol = children.slice(1);
-      return context[symbol] || null;
-    }
-    return <InlineCode>{children}</InlineCode>;
-  };
-
   const renderers = {
     heading: Heading,
     code: CodeBlock,
     link: Link,
     image: Image,
-    inlineCode: WrappedInlineCode,
+    inlineCode: WrappedInlineCode(context),
   };
 
   return (