Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-07 08:24:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set up and run eslint and prettier

Browse Source
This commit is contained in:
Matúš Námešný
2024-09-29 21:52:30 +02:00
parent eb497c7ccb
commit 05f5ca2877
15 changed files with 359 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/Editor.js
View File

@@ -1,10 +1,10 @@
import React, { useEffect, useRef } from "react";
import { basicSetup } from "codemirror";
import { EditorState } from "@codemirror/state";
import { EditorView, keymap } from "@codemirror/view";
import { markdown } from "@codemirror/lang-markdown";
import { defaultKeymap } from "@codemirror/commands";
import { oneDark } from "@codemirror/theme-one-dark";
import React, { useEffect, useRef } from 'react';
import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { markdown } from '@codemirror/lang-markdown';
import { defaultKeymap } from '@codemirror/commands';
import { oneDark } from '@codemirror/theme-one-dark';
const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
const editorRef = useRef();
@@ -17,20 +17,20 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
};
const theme = EditorView.theme({
"&": {
height: "100%",
fontSize: "14px",
'&': {
height: '100%',
fontSize: '14px',
},
".cm-scroller": {
overflow: "auto",
'.cm-scroller': {
overflow: 'auto',
},
".cm-gutters": {
backgroundColor: themeType === "dark" ? "#1e1e1e" : "#f5f5f5",
color: themeType === "dark" ? "#858585" : "#999",
border: "none",
'.cm-gutters': {
backgroundColor: themeType === 'dark' ? '#1e1e1e' : '#f5f5f5',
color: themeType === 'dark' ? '#858585' : '#999',
border: 'none',
},
".cm-activeLineGutter": {
backgroundColor: themeType === "dark" ? "#2c313a" : "#e8e8e8",
'.cm-activeLineGutter': {
backgroundColor: themeType === 'dark' ? '#2c313a' : '#e8e8e8',
},
});
@@ -41,18 +41,20 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
markdown(),
EditorView.lineWrapping,
keymap.of(defaultKeymap),
keymap.of([{
key: "Ctrl-s",
run: handleSave,
preventDefault: true
}]),
keymap.of([
{
key: 'Ctrl-s',
run: handleSave,
preventDefault: true,
},
]),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
onChange(update.state.doc.toString());
}
}),
theme,
themeType === "dark" ? oneDark : [],
themeType === 'dark' ? oneDark : [],
],
});
@@ -71,7 +73,11 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
useEffect(() => {
if (viewRef.current && content !== viewRef.current.state.doc.toString()) {
viewRef.current.dispatch({
changes: { from: 0, to: viewRef.current.state.doc.length, insert: content }
changes: {
from: 0,
to: viewRef.current.state.doc.length,
insert: content,
},
});
}
}, [content]);
@@ -79,4 +85,4 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
return <div ref={editorRef} className="editor-container" />;
};
export default Editor;
export default Editor;