f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-31 14:08:11 +00:00
Code Wiki Activity

lint

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-03-25 17:23:38 +01:00
parent 456c149f7b
commit 52f2f532a7
1 changed files with 94 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
client/components/codeEditor/codeEditor.jsx
View File

@@ -1,9 +1,6 @@
import "./codeEditor.less";
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
import './codeEditor.less';
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { EditorState } from "@codemirror/state";
import { defaultKeymap, history, historyField, undo, redo } from "@codemirror/commands";
import { foldGutter, foldKeymap } from "@codemirror/language";
import {
EditorView,
keymap,
@@ -11,65 +8,54 @@ import {
highlightActiveLineGutter,
highlightActiveLine,
scrollPastEnd,
} from "@codemirror/view";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { css } from "@codemirror/lang-css";
import { basicLightHighlightStyle } from "cm6-theme-basic-light";
Decoration,
ViewPlugin,
} from '@codemirror/view';
import { EditorState, Compartment } from '@codemirror/state';
import { foldGutter, foldKeymap, syntaxHighlighting, HighlightStyle } from '@codemirror/language';
import { defaultKeymap, history, historyField, undo, redo } from '@codemirror/commands';
import { languages } from '@codemirror/language-data';
import { css } from '@codemirror/lang-css';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
// themes
import { tags } from '@lezer/highlight';
import * as themes from "@uiw/codemirror-themes-all";
// ######################### THEMES #############################
const themeList = Object.entries(themes)
.filter(([name, value]) => Array.isArray(value) && !name.endsWith("Init") && !name.endsWith("Style"))
.map(([name, theme]) => ({
name,
theme,
}));
console.log(themeList);
import { Compartment } from "@codemirror/state";
import * as themes from '@uiw/codemirror-themes-all';
const themeCompartment = new Compartment();
// custom highlighting
import { HighlightStyle } from "@codemirror/language";
import { syntaxHighlighting } from "@codemirror/language";
import { tags } from "@lezer/highlight";
// ######################### CUSTOM HIGHLIGHTS #############################
const highlightStyle = HighlightStyle.define([
{
tag : tags.heading1,
color: "black",
fontSize: "1.75em",
fontWeight: "700",
class: "cm-header cm-header-1",
color : 'black',
fontSize : '1.75em',
fontWeight : '700',
class : 'cm-header cm-header-1',
},
{
tag : tags.processingInstruction,
color: "blue",
color : 'blue',
},
// …
]);
/*custom tokens */
import { Decoration, ViewPlugin, WidgetType } from "@codemirror/view";
import { tokenizeCustomMarkdown, customTags } from "./customMarkdownGrammar.js";
import { tokenizeCustomMarkdown, customTags } from './customMarkdownGrammar.js';
const customHighlightStyle = HighlightStyle.define([
{ tag: tags.heading1, color: "#000", fontWeight: "700" },
{ tag: tags.keyword, color: "#07a" }, // example for your markdown headings
{ tag: customTags.pageLine, color: "#f0a" },
{ tag: customTags.snippetBreak, class: "cm-snippet-break", color: "#0af" },
{ tag: customTags.inlineBlock, class: "cm-inline-block", backgroundColor: "#fffae6" },
{ tag: customTags.emoji, class: "cm-emoji", color: "#fa0" },
{ tag: customTags.superscript, class: "cm-superscript", verticalAlign: "super", fontSize: "0.8em" },
{ tag: customTags.subscript, class: "cm-subscript", verticalAlign: "sub", fontSize: "0.8em" },
{ tag: customTags.definitionTerm, class: "cm-dt", fontWeight: "bold", color: "#0a0" },
{ tag: customTags.definitionDesc, class: "cm-dd", color: "#070" },
{ tag: tags.heading1, color: '#000', fontWeight: '700' },
{ tag: tags.keyword, color: '#07a' }, // example for your markdown headings
{ tag: customTags.pageLine, color: '#f0a' },
{ tag: customTags.snippetBreak, class: 'cm-snippet-break', color: '#0af' },
{ tag: customTags.inlineBlock, class: 'cm-inline-block', backgroundColor: '#fffae6' },
{ tag: customTags.emoji, class: 'cm-emoji', color: '#fa0' },
{ tag: customTags.superscript, class: 'cm-superscript', verticalAlign: 'super', fontSize: '0.8em' },
{ tag: customTags.subscript, class: 'cm-subscript', verticalAlign: 'sub', fontSize: '0.8em' },
{ tag: customTags.definitionTerm, class: 'cm-dt', fontWeight: 'bold', color: '#0a0' },
{ tag: customTags.definitionDesc, class: 'cm-dd', color: '#070' },
]);
const customHighlightPlugin = ViewPlugin.fromClass(
@@ -111,14 +97,16 @@ const customHighlightPlugin = ViewPlugin.fromClass(
},
);
// ######################### COMPONENT #############################
const CodeEditor = forwardRef(
(
{
value = "",
value = '',
onChange = ()=>{},
language = "",
tab = "brewText",
editorTheme = "default",
language = '',
tab = 'brewText',
editorTheme = 'default',
view,
style,
...props
@@ -130,7 +118,6 @@ const CodeEditor = forwardRef(
const docsRef = useRef({});
const prevTabRef = useRef(tab);
// --- init editor ---
const createExtensions = ({ onChange, language, editorTheme })=>{
const updateListener = EditorView.updateListener.of((update)=>{
if(update.docChanged) {
@@ -165,12 +152,12 @@ const CodeEditor = forwardRef(
};
const customKeymap = keymap.of([
{ key: "Mod-b", run: boldCommand },
{ key: "Mod-i", run: italicCommand },
{ key: 'Mod-b', run: boldCommand },
{ key: 'Mod-i', run: italicCommand },
]);
const languageExtension =
language === "css" ? css() : markdown({ base: markdownLanguage, codeLanguages: languages });
language === 'css' ? css() : markdown({ base: markdownLanguage, codeLanguages: languages });
const themeExtension = Array.isArray(themes[editorTheme]) ? themes[editorTheme] : [];
@@ -253,7 +240,8 @@ const CodeEditor = forwardRef(
}
}, [value]);
useEffect(() => { //rebuild theme extension on theme change
useEffect(()=>{
//rebuild theme extension on theme change
const view = viewRef.current;
if(!view) return;
@@ -264,7 +252,6 @@ const CodeEditor = forwardRef(
});
}, [editorTheme]);
useImperativeHandle(ref, ()=>({
getValue : ()=>viewRef.current.state.doc.toString(),
@@ -310,7 +297,7 @@ const CodeEditor = forwardRef(
focus : ()=>viewRef.current.focus(),
}));
return <div className="codeEditor" ref={editorRef} style={style} />;
return <div className='codeEditor' ref={editorRef} style={style} />;
},
);