feat(codeeditor): support markdown and plain text (#535)

* Update 3 files * Update 3 files * update snapshot
codesandbox · Jul 20, 2022 · c159608 · c159608
1 parent aaa6353
commit c159608
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 124 deletions.
diff --git a/cypress/snapshots.js b/cypress/snapshots.js
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -43,6 +43,7 @@
     "@codemirror/lang-css": "^0.19.3",
     "@codemirror/lang-html": "^0.19.4",
     "@codemirror/lang-javascript": "^0.19.3",
+    "@codemirror/lang-markdown": "^0.19.3",
     "@codemirror/language": "^0.19.7",
     "@codemirror/matchbrackets": "^0.19.3",
     "@codemirror/state": "^0.19.6",

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import * as mocks from "./languages-mocks";
 import { SandpackProvider } from "../../contexts/sandpackContext";
 
 import { CodeEditor } from "./index";
@@ -12,21 +13,7 @@ export default {
 export const HTML: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>HTML 5 Boilerplate</title>
-    <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
-  <script src="index.js"></script>
-  </body>
-</html>
-`}
+      code={mocks.html}
       fileType="html"
       id="html"
       initMode="immediate"
@@ -38,33 +25,7 @@ export const HTML: React.FC = () => (
 export const Javascript: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-function foo(params) {
-  return params
-}
-
-const baz = (foo) => {
-  return foo
-}
-
-const array = [];
-const object = {};
-const regex = new Regex(//);
-
-const expr = 'Papayas';
-switch (expr) {
-  case 'Oranges':
-    console.log('Oranges are $0.59 a pound.');
-    break;
-  case 'Mangoes':
-  case 'Papayas':
-    console.log('Mangoes and papayas are $2.79 a pound.');
-    // expected output: "Mangoes and papayas are $2.79 a pound."
-    break;
-  default:
-    console.log(\`Sorry, we are out of $\{expr}.\`);
-}
-`}
+      code={mocks.js}
       fileType="js"
       id="js"
       initMode="immediate"
@@ -76,21 +37,7 @@ switch (expr) {
 export const JSX: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-function Greeting({ name }) {
-  return <h1>Hello, {name}!</h1>;
-}
-
-export default function App() {
-  return (
-    <div>
-      <Greeting name="Divyesh" />
-      <Greeting name="Sarah" />
-      <Greeting name="Taylor" />
-    </div>
-  );
-}      
-`}
+      code={mocks.jsx}
       fileType="jsx"
       id="jsx"
       initMode="immediate"
@@ -102,21 +49,7 @@ export default function App() {
 export const CSS: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-body {
-  background-color: lightblue;
-}
-
-h1 {
-  color: white;
-  text-align: center;
-}
-
-p {
-  font-family: verdana;
-  font-size: 20px;
-}    
-`}
+      code={mocks.css}
       fileType="css"
       id="css"
       initMode="immediate"
@@ -128,15 +61,7 @@ p {
 export const Less: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-@width: 10px;
-@height: @width + 10px;
-
-#header {
-  width: @width;
-  height: @height;
-}  
-`}
+      code={mocks.less}
       fileType="less"
       id="less"
       initMode="immediate"
@@ -148,23 +73,7 @@ export const Less: React.FC = () => (
 export const Vue: React.FC = () => (
   <SandpackProvider>
     <CodeEditor
-      code={`
-<template>
-  <div class="column is-12">
-      <label class="label" for="email">Email</label>
-      <p :class="{ 'control': true }">
-          <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
-          <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
-      </p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'basic-example'
-};
-</script>
-`}
+      code={mocks.vue}
       fileType="vue"
       id="vue"
       initMode="immediate"
@@ -173,6 +82,18 @@ export default {
   </SandpackProvider>
 );
 
+export const Markdown: React.FC = () => (
+  <SandpackProvider>
+    <CodeEditor
+      code={mocks.markdown}
+      fileType="markdown"
+      id="markdown"
+      initMode="immediate"
+      showLineNumbers={false}
+    />
+  </SandpackProvider>
+);
+
 export const ShowLineNumber: React.FC = () => (
   <SandpackProvider>
     <CodeEditor

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -74,7 +74,8 @@ interface CodeMirrorProps {
     | "scss"
     | "less"
     | "html"
-    | "vue";
+    | "vue"
+    | "markdown";
   onCodeUpdate?: (newCode: string) => void;
   showLineNumbers?: boolean;
   showInlineErrors?: boolean;

diff --git a/sandpack-react/src/components/CodeEditor/languages-mocks.ts b/sandpack-react/src/components/CodeEditor/languages-mocks.ts
@@ -91,3 +91,10 @@ export const vue = `<template>
   name: 'basic-example'
 };
 </script>`;
+
+export const markdown = `## Title
+
+- List item
+- List item
+- List item
+- List item`;
diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts
@@ -2,6 +2,7 @@ import { HighlightStyle, tags } from "@codemirror/highlight";
 import { css } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
 import { javascript } from "@codemirror/lang-javascript";
+import { markdown } from "@codemirror/lang-markdown";
 import type { LanguageSupport } from "@codemirror/language";
 import type { Extension } from "@codemirror/state";
 import type { Text } from "@codemirror/text";
@@ -151,13 +152,18 @@ export const getSyntaxHighlight = (theme: SandpackTheme): HighlightStyle =>
     },
   ]);
 
-type SandpackLanguageSupport = "javascript" | "typescript" | "html" | "css";
+type SandpackLanguageSupport =
+  | "javascript"
+  | "typescript"
+  | "html"
+  | "css"
+  | "markdown";
 
 export const getLanguageFromFile = (
   filePath?: string,
   fileType?: string
 ): SandpackLanguageSupport => {
-  if (!filePath && !fileType) return "javascript";
+  if (!filePath && !fileType) return "markdown";
 
   let extension = fileType;
   if (!extension && filePath) {
@@ -180,8 +186,10 @@ export const getLanguageFromFile = (
     case "less":
     case "scss":
       return "css";
+    case "md":
+      return "markdown";
     default:
-      return "javascript";
+      return "markdown";
   }
 };
 
@@ -193,6 +201,7 @@ export const getCodeMirrorLanguage = (
     typescript: javascript({ jsx: true, typescript: true }),
     html: html(),
     css: css(),
+    markdown: markdown(),
   };
 
   return options[extension];

diff --git a/yarn.lock b/yarn.lock
@@ -1387,7 +1387,7 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.23"
 
-"@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
+"@codemirror/highlight@^0.19.0", "@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
   version "0.19.8"
   resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
   integrity sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==
@@ -1418,7 +1418,7 @@
     "@codemirror/state" "^0.19.0"
     "@lezer/css" "^0.15.2"
 
-"@codemirror/lang-html@^0.19.4":
+"@codemirror/lang-html@^0.19.0", "@codemirror/lang-html@^0.19.4":
   version "0.19.4"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.4.tgz#e6eec28462f18842a0e108732a214a7416b5e333"
   integrity sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==
@@ -1445,6 +1445,19 @@
     "@codemirror/view" "^0.19.0"
     "@lezer/javascript" "^0.15.1"
 
+"@codemirror/lang-markdown@^0.19.3":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-markdown/-/lang-markdown-0.19.6.tgz#761301d276fcfbdf88440f0333785efd71c2a4f5"
+  integrity sha512-ojoHeLgv1Rfu0GNGsU0bCtXAIp5dy4VKjndHScITQdlCkS/+SAIfuoeowEx+nMAQwTxI+/9fQZ3xdZVznGFYug==
+  dependencies:
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/lang-html" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    "@lezer/markdown" "^0.15.0"
+
 "@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
   version "0.19.10"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.10.tgz#c3d1330fa5de778c6b6b5177af5572a3d9d596b5"
@@ -4013,6 +4026,13 @@
   dependencies:
     "@lezer/common" "^0.15.0"
 
+"@lezer/markdown@^0.15.0":
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/@lezer/markdown/-/markdown-0.15.6.tgz#2a826a507399b32176efdc35554397f05227d2aa"
+  integrity sha512-1XXLa4q0ZthryUEfO47ipvZHxNb+sCKoQIMM9dKs5vXZOBbgF2Vah/GL3g26BFIAEc2uCv4VQnI+lSrv58BT3g==
+  dependencies:
+    "@lezer/common" "^0.15.0"
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"