Merge pull request #266 from FormidableLabs/jp-use-editable

switch from react-simple-code-editor to use-editable

Author: jpdriver

demo/components/LiveEdit.js

@@ -57,6 +57,7 @@ const StyledPreview = styled(LivePreview)`
   color: black;
   height: auto;
   overflow: hidden;
+  text-align: center;
 
   ${column};
 `;

demo/pages/index.js

@@ -12,14 +12,14 @@ const Container = styled.div`
   width: ${polished.rem(1024)};
   padding: ${polished.rem(20)};
   padding-bottom: ${polished.rem(100)};
-  text-align: center;
 `;
 
 const Description = styled.p`
   color: ${foreground};
   font-size: ${polished.modularScale(1)};
   margin-bottom: ${polished.rem(20)};
   margin-top: ${polished.rem(50)};
+  text-align: center;
 `;
 
 const componentClassExample = `

package.json

@@ -25,8 +25,8 @@
     "dom-iterator": "^1.0.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
-    "react-simple-code-editor": "^0.11.0",
-    "unescape": "^1.0.1"
+    "unescape": "^1.0.1",
+    "use-editable": "^2.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

src/components/Editor/index.js

@@ -1,77 +1,76 @@
-import React, { Fragment, useEffect, useState } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
-import Editor from "react-simple-code-editor";
+import { useEditable } from "use-editable";
 import Highlight, { Prism } from "prism-react-renderer";
 import { theme as liveTheme } from "../../constants/theme";
 
 const CodeEditor = (props) => {
-  const [state, setState] = useState({
-    code: props.code || "",
-  });
+  const editorRef = useRef(null);
+  const [code, setCode] = useState(props.code || "");
 
-  useEffect(() => {
-    if (state.prevCodeProp && props.code !== state.prevCodeProp) {
-      setState({ code: props.code, prevCodeProp: props.code });
-    }
-  }, [props.code]);
+  const onEditableChange = useCallback((_code) => {
+    setCode(_code.slice(0, -1));
+  }, []);
 
-  const updateContent = (code) => {
-    setState({ code });
-  };
+  useEditable(editorRef, onEditableChange, {
+    disabled: props.disabled,
+    indentation: 2,
+  });
 
   useEffect(() => {
     if (props.onChange) {
-      props.onChange(state.code);
+      props.onChange(code);
     }
-  }, [state.code]);
-
-  const highlightCode = (code) => (
-    <Highlight
-      Prism={Prism}
-      code={code}
-      theme={props.theme || liveTheme}
-      language={props.language}
-    >
-      {({ tokens, getLineProps, getTokenProps }) => (
-        <Fragment>
-          {tokens.map((line, i) => (
-            // eslint-disable-next-line react/jsx-key
-            <div {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                // eslint-disable-next-line react/jsx-key
-                <span {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </Fragment>
-      )}
-    </Highlight>
-  );
-
-  // eslint-disable-next-line no-unused-vars
-  const { style, theme, onChange, ...rest } = props;
-  const { code } = state;
-
-  const baseTheme = theme && typeof theme.plain === "object" ? theme.plain : {};
+  }, [code]);
 
   return (
-    <Editor
-      value={code}
-      padding={10}
-      highlight={highlightCode}
-      onValueChange={updateContent}
-      style={{
-        whiteSpace: "pre",
-        fontFamily: "monospace",
-        ...baseTheme,
-        ...style,
-      }}
-      {...rest}
-    />
+    <div className={props.className}>
+      <Highlight
+        Prism={Prism}
+        code={code}
+        theme={props.theme || liveTheme}
+        language={props.language}
+      >
+        {({
+          className: _className,
+          tokens,
+          getLineProps,
+          getTokenProps,
+          style: _style,
+        }) => (
+          <pre
+            className={_className}
+            style={{
+              margin: 0,
+              outline: "none",
+              padding: 10,
+              ...(!props.className || !props.theme ? {} : _style),
+            }}
+            ref={editorRef}
+          >
+            {tokens.map((line, lineIndex) => (
+              // eslint-disable-next-line react/jsx-key
+              <div {...getLineProps({ line, key: `line-${lineIndex}` })}>
+                {line
+                  .filter((token) => !token.empty)
+                  .map((token, tokenIndex) => (
+                    // eslint-disable-next-line react/jsx-key
+                    <span
+                      {...getTokenProps({ token, key: `token-${tokenIndex}` })}
+                    />
+                  ))}
+                {"\n"}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
   );
 };
 
 CodeEditor.propTypes = {
+  className: PropTypes.string,
   code: PropTypes.string,
   disabled: PropTypes.bool,
   language: PropTypes.string,

yarn.lock

@@ -10125,11 +10125,6 @@ react-router@6.2.1, react-router@^6.0.0:
   dependencies:
     history "^5.2.0"
 
-react-simple-code-editor@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
-  integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
-
 react-sizeme@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0"
@@ -11996,6 +11991,11 @@ use-composed-ref@^1.0.0:
   dependencies:
     ts-essentials "^2.0.3"
 
+use-editable@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
+  integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
+
 use-isomorphic-layout-effect@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"