Merge pull request #358 from FormidableLabs/task/fix-new-line-add-demo

carloskelly13 · web-flow · commit 628438504a81 · 2023-05-13T18:03:32.000-05:00
Fix cursor position on new line, add demo app
diff --git a/.changeset/shiny-jeans-matter.md b/.changeset/shiny-jeans-matter.md
@@ -0,0 +1,5 @@
+---
+"react-live": patch
+---
+
+Fix new line cursor position on enter-key press.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "license": "MIT",
   "scripts": {
     "start:docs": "pnpm run --filter website start",
+    "dev:demo": "pnpm run --filter demo dev",
     "build": "pnpm run -r build",
     "build:lib": "pnpm run --filter react-live build",
     "lint": "pnpm run --parallel lint",
@@ -16,7 +17,7 @@
     "version": "pnpm changeset version && pnpm install --no-frozen-lockfile"
   },
   "dependencies": {
-    "prism-react-renderer": "^2.0.3"
+    "prism-react-renderer": "^2.0.4"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.0",
diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-live": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.31",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.2"
+  }
+}
diff --git a/packages/demo/postcss.config.cjs b/packages/demo/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/demo/src/app.tsx b/packages/demo/src/app.tsx
@@ -0,0 +1,27 @@
+import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";
+
+const code = `
+function handleClick() {
+  console.log("Hi there!");
+}
+const HelloWorld = () => (
+  <button onClick={handleClick}>
+    Hello World
+  </button>
+);
+render(<HelloWorld />);
+`.trim();
+
+export const DemoApp = () => {
+  return (
+    <div>
+      <LiveProvider code={code} noInline>
+        <div className="grid lg:grid-cols-2 gap-4">
+          <LiveEditor className="font-mono" />
+          <LivePreview />
+        </div>
+        <LiveError className="text-red-800 bg-red-100 mt-2" />
+      </LiveProvider>
+    </div>
+  );
+};
diff --git a/packages/demo/src/index.css b/packages/demo/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/demo/src/main.tsx b/packages/demo/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { DemoApp } from "./app";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <DemoApp />
+  </React.StrictMode>
+);
diff --git a/packages/demo/src/vite-env.d.ts b/packages/demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/demo/tailwind.config.cjs b/packages/demo/tailwind.config.cjs
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/demo/tsconfig.json b/packages/demo/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+}
diff --git a/packages/demo/vite.config.ts b/packages/demo/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/packages/react-live/package.json b/packages/react-live/package.json
@@ -53,7 +53,7 @@
     "react-test-renderer": "^17.0.2",
     "styled-components": "^4.0.0-beta.8",
     "tsup": "^6.7.0",
-    "typescript": "^4.9",
+    "typescript": "^4.9.5",
     "typings-tester": "^0.3.1",
     "webpack": "^5.76.3"
   },
diff --git a/packages/react-live/src/components/Editor/index.tsx b/packages/react-live/src/components/Editor/index.tsx
@@ -1,5 +1,5 @@
 import { Highlight, Prism, themes } from "prism-react-renderer";
-import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import { useEditable } from "use-editable";
 
 export type Props = {
@@ -23,11 +23,7 @@ const CodeEditor = (props: Props) => {
     setCode(props.code);
   }, [props.code]);
 
-  const onEditableChange = useCallback((_code: string) => {
-    setCode(_code.slice(0, -1));
-  }, []);
-
-  useEditable(editorRef, onEditableChange, {
+  useEditable(editorRef, (text) => setCode(text.trimEnd()), {
     disabled: props.disabled,
     indentation: props.tabMode === "indentation" ? 2 : undefined,
   });
@@ -66,7 +62,7 @@ const CodeEditor = (props: Props) => {
             spellCheck="false"
           >
             {tokens.map((line, lineIndex) => (
-              <div key={`line-${lineIndex}`} {...getLineProps({ line })}>
+              <span key={`line-${lineIndex}`} {...getLineProps({ line })}>
                 {line
                   .filter((token) => !token.empty)
                   .map((token, tokenIndex) => (
@@ -76,7 +72,7 @@ const CodeEditor = (props: Props) => {
                     />
                   ))}
                 {"\n"}
-              </div>
+              </span>
             ))}
           </pre>
         )}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-live": patch
 +---
++
 +Fix new line cursor position on enter-key press.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`