Skip to content

Commit

Permalink
Merge pull request #358 from FormidableLabs/task/fix-new-line-add-demo
Browse files Browse the repository at this point in the history 
Fix cursor position on new line, add demo app
  • Loading branch information
@carloskelly13
carloskelly13 authored May 13, 2023
2 parents 94612c2 + 5fa364a commit 6284385
Show file tree
Hide file tree
Showing 15 changed files with 1,041 additions and 331 deletions.
5 changes: 5 additions & 0 deletions .changeset/shiny-jeans-matter.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-live": patch
---

Fix new line cursor position on enter-key press.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions packages/demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions packages/demo/package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
}
6 changes: 6 additions & 0 deletions packages/demo/postcss.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
27 changes: 27 additions & 0 deletions packages/demo/src/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
3 changes: 3 additions & 0 deletions packages/demo/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
10 changes: 10 additions & 0 deletions packages/demo/src/main.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
1 change: 1 addition & 0 deletions packages/demo/src/vite-env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
11 changes: 11 additions & 0 deletions packages/demo/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
23 changes: 23 additions & 0 deletions packages/demo/tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -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"],
}
6 changes: 6 additions & 0 deletions packages/demo/vite.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
plugins: [react()],
});
2 changes: 1 addition & 1 deletion packages/react-live/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
12 changes: 4 additions & 8 deletions packages/react-live/src/components/Editor/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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,
});
Expand Down Expand Up @@ -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) => (
Expand All @@ -76,7 +72,7 @@ const CodeEditor = (props: Props) => {
/>
))}
{"\n"}
</div>
</span>
))}
</pre>
)}
Expand Down
Loading

1 comment on commit 6284385

@vercel
Copy link

@vercel vercel bot commented on 6284385 May 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-live-docs-website – ./

formidable-react-live-docs.vercel.app
react-live-docs-website-git-master-formidable-labs.vercel.app
react-live-docs-website-formidable-labs.vercel.app
react-live.formidable.dev

Please sign in to comment.