diff --git a/README.md b/README.md index 1ebe379..d63b1e8 100644 --- a/README.md +++ b/README.md @@ -1,27 +1 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -``` - -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +Сайт с калькулятором на mathjs diff --git a/index.html b/index.html index 6cd5d9f..9673536 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Calculator + calculator
diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 5e1c49c..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { noop } from 'lodash' -import { Editor } from './Editor' - -export const App = () => { - return -} - -const testText = ` -# Welcome to calculator (написать норм приветствие и описать принцип работы калькулятора) -# Lines starting with # are ignored - -# Basic math -2 + 2 -6 - 3 -10 / 4 -5 * 1.5 -2 + 2 * 2 -(2 + 2) * 2 -0.1 + 0.2 - -# Units -10 inch in cm -2 feet to m -15 degC to degF -3 tbsp to tsp -9 km/h to m/s - -# Functions -sqrt(3^2 + 4^2) -cos(pi rad) -sin(30 deg) - -# Variables -a = 25 -b = a * 2 - -2 * 2 -last + 1 - -# Function declaration -pow2(x) = x ^ 2 -pow2(6) - -f(x) = (sin(x) + cos(x/2)) * 5 - -# Matrices -a = [1, 2, 3; 2+2, 5, 6] -a[2, 3] -a[1:2, 2] -b = [1, 2; 3, 4] -b * a -a[3, 1:3] = [7, 8, 9] -` diff --git a/src/Editor.tsx b/src/Editor.tsx index 0f5ac8c..fca1cb9 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -1,33 +1,89 @@ import { defaultKeymap, historyKeymap, history } from '@codemirror/commands' -import { EditorView, drawSelection, dropCursor, keymap } from '@codemirror/view' +import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view' import { defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language' import { Extension } from '@codemirror/state' import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete' import { searchKeymap } from '@codemirror/search' import { useEffect, useRef } from 'react' -import { textObserverPlugin } from './textObserverPlugin' import { mathPlugin } from './mathPlugin' -type Props = { - text: string - onChange: (text: string) => void -} +const testText = `# Welcome to calculator +# Lines starting with # are ignored -export const Editor = ({ text, onChange }: Props) => { +# Basic math +2 + 2 +6 - 3 +10 / 4 +5 * 1.5 +2 + 2 * 2 +(2 + 2) * 2 +0.1 + 0.2 + +# Units +10 inch in cm +2 feet to m +15 degC to degF +3 tbsp to tsp +9 km/h to m/s + +# Functions +sqrt(3^2 + 4^2) +cos(pi rad) +sin(30 deg) + +# Variables +a = 25 +b = a * 2 + +2 * 2 +last + 1 + +# Function declaration +pow2(x) = x ^ 2 +pow2(6) + +f(x) = (sin(x) + cos(x/2)) * 5 + +# Matrices +a = [1, 2, 3; 2+2, 5, 6] +a[2, 3] +a[1:2, 2] +b = [1, 2; 3, 4] +b * a +a[3, 1:3] = [7, 8, 9] +` + +export const Editor = () => { const ref = useRef(null) const view = useRef() useEffect(() => { view.current = new EditorView({ - doc: text, - extensions: [basicSetup, textObserverPlugin(onChange)], + doc: '', + extensions: [basicSetup], parent: ref.current!, }) return () => view.current?.destroy() }, []) - return
+ return ( +
+
+ +
+
+
+ ) } const basicSetup: Extension = [ @@ -39,4 +95,5 @@ const basicSetup: Extension = [ closeBrackets(), keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap]), mathPlugin(), + placeholder('0.1 + 0.2 = 0.3'), ] diff --git a/src/index.css b/src/index.css index 4fada80..cd221f8 100644 --- a/src/index.css +++ b/src/index.css @@ -22,6 +22,10 @@ body { outline: none; } +.cm-scroller { + margin-right: -14px; +} + .math-result { color: rgb(80, 80, 80); margin-left: 8px; @@ -52,3 +56,26 @@ body { border-left: 0; margin-left: 6px; } + +.example-button { + background-color: black; + color: white; + border: none; + border-radius: 4px; + padding: 8px 16px; + font-family: monospace; + font-size: 14px; + cursor: pointer; + margin: 8px 0; + transition: all 0.2s ease; + font-weight: 600; +} + +.example-button:hover { + background-color: #333; + transform: translateY(-3px); +} + +.example-button:active { + transform: translateY(3px); +} diff --git a/src/main.tsx b/src/main.tsx index 5e818a0..0f987fa 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { App } from './App.tsx' +import { Editor } from './Editor.tsx' import './index.css' const root = document.getElementById('root') @@ -8,7 +8,7 @@ const root = document.getElementById('root') if (root) { ReactDOM.createRoot(root).render( - + , ) } diff --git a/src/math.ts b/src/math.ts deleted file mode 100644 index 6caed26..0000000 --- a/src/math.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { create, all } from 'mathjs' - -export const math = create(all) diff --git a/src/mathPlugin.ts b/src/mathPlugin.ts index 68bf19c..8e59000 100644 --- a/src/mathPlugin.ts +++ b/src/mathPlugin.ts @@ -1,5 +1,7 @@ import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view' -import { math } from './math' +import { create, all } from 'mathjs' + +const math = create(all) export const mathPlugin = () => ViewPlugin.fromClass( diff --git a/src/textObserverPlugin.ts b/src/textObserverPlugin.ts deleted file mode 100644 index d4ac59a..0000000 --- a/src/textObserverPlugin.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { ViewPlugin, ViewUpdate } from '@codemirror/view' - -export const textObserverPlugin = (callback: (text: string) => void) => - ViewPlugin.define(() => ({ - update(update: ViewUpdate) { - if (update.docChanged) { - callback(update.state.doc.toString()) - } - }, - }))