Run format.
This commit is contained in:
parent
8c3dd2cee3
commit
0d0a99c73b
@ -1,10 +1,8 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import './Editor.css';
|
import "./Editor.css";
|
||||||
import {Highlight} from './highlight';
|
import { Highlight } from "./highlight";
|
||||||
|
|
||||||
function Editor({
|
function Editor({ defaultValue = "I have a text value." }) {
|
||||||
defaultValue = "I have a text value."
|
|
||||||
}) {
|
|
||||||
function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||||
console.log(event.target.value);
|
console.log(event.target.value);
|
||||||
setValue(event.target.value);
|
setValue(event.target.value);
|
||||||
@ -33,7 +31,11 @@ function Editor({
|
|||||||
return (
|
return (
|
||||||
<div className="Editor">
|
<div className="Editor">
|
||||||
<div className="Editor-textwrapper">
|
<div className="Editor-textwrapper">
|
||||||
<textarea onChange={handleChange} className="Editor-textarea" value={value} />
|
<textarea
|
||||||
|
onChange={handleChange}
|
||||||
|
className="Editor-textarea"
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
<div className="Editor-underlay">{value}</div>
|
<div className="Editor-underlay">{value}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="Editor-ast"></div>
|
<div className="Editor-ast"></div>
|
||||||
|
@ -1,9 +1,17 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import init, { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
|
import init, {
|
||||||
import Editor from './Editor';
|
parse_org,
|
||||||
|
} from "../../organic/target/wasm32-unknown-unknown/js/wasm";
|
||||||
|
import Editor from "./Editor";
|
||||||
|
|
||||||
init().then(() => {
|
init().then(() => {
|
||||||
console.log(parse_org("foo"));
|
console.log(parse_org("foo"));
|
||||||
ReactDOM.render(<><h1>Hello, world!</h1><Editor /></>, document.getElementById("root"));
|
ReactDOM.render(
|
||||||
|
<>
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
<Editor />
|
||||||
|
</>,
|
||||||
|
document.getElementById("root"),
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
@ -11,9 +11,7 @@
|
|||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"allowSyntheticDefaultImports": true
|
"allowSyntheticDefaultImports": true,
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["src"],
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
@ -2,31 +2,31 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
const CSSModuleLoader = {
|
const CSSModuleLoader = {
|
||||||
loader: 'css-loader',
|
loader: "css-loader",
|
||||||
options: {
|
options: {
|
||||||
modules: true,
|
modules: true,
|
||||||
importLoaders: 2,
|
importLoaders: 2,
|
||||||
sourceMap: true,
|
sourceMap: true,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const CSSLoader = {
|
const CSSLoader = {
|
||||||
loader: 'css-loader',
|
loader: "css-loader",
|
||||||
options: {
|
options: {
|
||||||
modules: "global",
|
modules: "global",
|
||||||
importLoaders: 2,
|
importLoaders: 2,
|
||||||
sourceMap: true,
|
sourceMap: true,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const PostCSSLoader = {
|
const PostCSSLoader = {
|
||||||
loader: 'postcss-loader',
|
loader: "postcss-loader",
|
||||||
options: {
|
options: {
|
||||||
sourceMap: true,
|
sourceMap: true,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const styleLoader = 'style-loader';
|
const styleLoader = "style-loader";
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: "./src/index.tsx",
|
entry: "./src/index.tsx",
|
||||||
@ -54,17 +54,17 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
test: /\.tsx?$/,
|
test: /\.tsx?$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: {loader: 'ts-loader'},
|
use: { loader: "ts-loader" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(sa|sc|c)ss$/,
|
test: /\.(sa|sc|c)ss$/,
|
||||||
exclude: /\.module\.(sa|sc|c)ss$/,
|
exclude: /\.module\.(sa|sc|c)ss$/,
|
||||||
use: [styleLoader, CSSLoader, PostCSSLoader]
|
use: [styleLoader, CSSLoader, PostCSSLoader],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.module\.(sa|sc|c)ss$/,
|
test: /\.module\.(sa|sc|c)ss$/,
|
||||||
use: [styleLoader, CSSModuleLoader, PostCSSLoader]
|
use: [styleLoader, CSSModuleLoader, PostCSSLoader],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
@ -76,9 +76,9 @@ module.exports = {
|
|||||||
mode: "development",
|
mode: "development",
|
||||||
devtool: "inline-source-map",
|
devtool: "inline-source-map",
|
||||||
experiments: {
|
experiments: {
|
||||||
asyncWebAssembly: true
|
asyncWebAssembly: true,
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.tsx', '.ts', '.js'],
|
extensions: [".tsx", ".ts", ".js"],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user