mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-03-22 13:18:11 +00:00
basic css changes
This commit is contained in:
Víctor Losada Hernández
@@ -6,138 +6,153 @@ import { foldGutter, foldKeymap } from "@codemirror/language";
|
||||
import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightActiveLine } from "@codemirror/view";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { css } from "@codemirror/lang-css";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
|
||||
const CodeEditor = forwardRef(({ value = "", onChange = () => {} }, ref) => {
|
||||
const editorRef = useRef(null);
|
||||
const viewRef = useRef(null);
|
||||
const CodeEditor = forwardRef(
|
||||
({ value = "", onChange = () => {}, language, editorTheme, tab, view, style, ...props }, ref) => {
|
||||
const editorRef = useRef(null);
|
||||
const viewRef = useRef(null);
|
||||
|
||||
// --- init editor ---
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) return;
|
||||
console.log(props);
|
||||
|
||||
const updateListener = EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
onChange(update.state.doc.toString());
|
||||
// --- init editor ---
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
const updateListener = EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
onChange(update.state.doc.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const boldCommand = (view) => {
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = `**${selected}**`;
|
||||
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const italicCommand = (view) => {
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = `*${selected}*`;
|
||||
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const customKeymap = keymap.of([
|
||||
{ key: "Mod-b", run: boldCommand },
|
||||
{ key: "Mod-i", run: italicCommand },
|
||||
]);
|
||||
|
||||
const languageExtension = () => {
|
||||
switch (language) {
|
||||
case "gfm":
|
||||
return markdown({ codeLanguages: [] }); // GitHub-flavored Markdown
|
||||
case "css":
|
||||
return css();
|
||||
default:
|
||||
return markdown();
|
||||
}
|
||||
};
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: value,
|
||||
extensions: [
|
||||
history(),
|
||||
keymap.of(defaultKeymap),
|
||||
customKeymap,
|
||||
updateListener,
|
||||
languageExtension(),
|
||||
highlightActiveLine(),
|
||||
highlightActiveLineGutter(),
|
||||
keymap.of(foldKeymap),
|
||||
foldGutter(),
|
||||
lineNumbers(),
|
||||
oneDark,
|
||||
],
|
||||
});
|
||||
|
||||
viewRef.current = new EditorView({
|
||||
state,
|
||||
parent: editorRef.current,
|
||||
});
|
||||
|
||||
return () => viewRef.current?.destroy();
|
||||
}, []);
|
||||
|
||||
// --- sync external value ---
|
||||
useEffect(() => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
|
||||
const current = view.state.doc.toString();
|
||||
if (value !== current) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: current.length, insert: value },
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [value]);
|
||||
|
||||
const boldCommand = (view) => {
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = `**${selected}**`;
|
||||
// --- exposed API ---
|
||||
useImperativeHandle(ref, () => ({
|
||||
getValue: () => viewRef.current.state.doc.toString(),
|
||||
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
setValue: (text) => {
|
||||
const view = viewRef.current;
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: text },
|
||||
});
|
||||
},
|
||||
|
||||
return true;
|
||||
};
|
||||
injectText: (text) => {
|
||||
const view = viewRef.current;
|
||||
const { from, to } = view.state.selection.main;
|
||||
|
||||
const italicCommand = (view) => {
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = `*${selected}*`;
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
view.focus();
|
||||
},
|
||||
|
||||
return true;
|
||||
};
|
||||
getCursorPosition: () => viewRef.current.state.selection.main.head,
|
||||
|
||||
const customKeymap = keymap.of([
|
||||
{ key: "Mod-b", run: boldCommand },
|
||||
{ key: "Mod-i", run: italicCommand },
|
||||
]);
|
||||
setCursorPosition: (pos) => {
|
||||
viewRef.current.dispatch({ selection: { anchor: pos } });
|
||||
viewRef.current.focus();
|
||||
},
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: value,
|
||||
extensions: [
|
||||
history(),
|
||||
keymap.of(defaultKeymap),
|
||||
customKeymap,
|
||||
updateListener,
|
||||
markdown(),
|
||||
css(),
|
||||
highlightActiveLine(),
|
||||
highlightActiveLineGutter(),
|
||||
keymap.of(foldKeymap),
|
||||
foldGutter(),
|
||||
lineNumbers(),
|
||||
|
||||
],
|
||||
});
|
||||
undo: () => undo(viewRef.current),
|
||||
redo: () => redo(viewRef.current),
|
||||
|
||||
viewRef.current = new EditorView({
|
||||
state,
|
||||
parent: editorRef.current,
|
||||
});
|
||||
historySize: () => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return { done: 0, undone: 0 };
|
||||
|
||||
return () => viewRef.current?.destroy();
|
||||
}, []);
|
||||
const h = view.state.field(historyField, false);
|
||||
if (!h) return { done: 0, undone: 0 };
|
||||
|
||||
// --- sync external value ---
|
||||
useEffect(() => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
return { done: h.done.length, undone: h.undone.length };
|
||||
},
|
||||
|
||||
const current = view.state.doc.toString();
|
||||
if (value !== current) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: current.length, insert: value },
|
||||
});
|
||||
}
|
||||
}, [value]);
|
||||
focus: () => viewRef.current.focus(),
|
||||
}));
|
||||
|
||||
// --- exposed API ---
|
||||
useImperativeHandle(ref, () => ({
|
||||
getValue: () => viewRef.current.state.doc.toString(),
|
||||
return <div className="codeEditor" ref={editorRef} style={style} />;
|
||||
},
|
||||
);
|
||||
|
||||
setValue: (text) => {
|
||||
const view = viewRef.current;
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: text },
|
||||
});
|
||||
},
|
||||
|
||||
injectText: (text) => {
|
||||
const view = viewRef.current;
|
||||
const { from, to } = view.state.selection.main;
|
||||
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: { anchor: from + text.length },
|
||||
});
|
||||
|
||||
view.focus();
|
||||
},
|
||||
|
||||
getCursorPosition: () => viewRef.current.state.selection.main.head,
|
||||
|
||||
setCursorPosition: (pos) => {
|
||||
viewRef.current.dispatch({ selection: { anchor: pos } });
|
||||
viewRef.current.focus();
|
||||
},
|
||||
|
||||
undo: () => undo(viewRef.current),
|
||||
redo: () => redo(viewRef.current),
|
||||
|
||||
historySize: () => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return { done: 0, undone: 0 };
|
||||
|
||||
const h = view.state.field(historyField, false);
|
||||
if (!h) return { done: 0, undone: 0 };
|
||||
|
||||
return { done: h.done.length, undone: h.undone.length };
|
||||
},
|
||||
|
||||
focus: () => viewRef.current.focus(),
|
||||
}));
|
||||
|
||||
return <div ref={editorRef} style={{ height: "100%" }} />;
|
||||
});
|
||||
|
||||
export default CodeEditor;
|
||||
export default CodeEditor;
|
||||
|
||||
@@ -1,60 +1,81 @@
|
||||
@import (less) 'codemirror/lib/codemirror.css';
|
||||
@import (less) 'codemirror/addon/fold/foldgutter.css';
|
||||
@import (less) 'codemirror/addon/search/matchesonscrollbar.css';
|
||||
@import (less) 'codemirror/addon/dialog/dialog.css';
|
||||
@import (less) 'codemirror/addon/hint/show-hint.css';
|
||||
|
||||
//Icon fonts included so they can appear in emoji autosuggest dropdown
|
||||
@import (less) '@themes/fonts/iconFonts/diceFont.less';
|
||||
@import (less) '@themes/fonts/iconFonts/elderberryInn.less';
|
||||
@import (less) '@themes/fonts/iconFonts/gameIcons.less';
|
||||
@import (less) '@themes/fonts/iconFonts/fontAwesome.less';
|
||||
// Icon fonts for emoji/autocomplete
|
||||
@import (less) "@themes/fonts/iconFonts/diceFont.less";
|
||||
@import (less) "@themes/fonts/iconFonts/elderberryInn.less";
|
||||
@import (less) "@themes/fonts/iconFonts/gameIcons.less";
|
||||
@import (less) "@themes/fonts/iconFonts/fontAwesome.less";
|
||||
|
||||
@keyframes sourceMoveAnimation {
|
||||
50% { color : white;background-color : red;}
|
||||
100% { color : unset;background-color : unset;}
|
||||
50% {
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
100% {
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.codeEditor {
|
||||
@media screen and (pointer : coarse) {
|
||||
font-size : 16px;
|
||||
}
|
||||
.CodeMirror-foldmarker {
|
||||
font-family : inherit;
|
||||
font-weight : 600;
|
||||
color : grey;
|
||||
text-shadow : none;
|
||||
font-family: monospace;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (pointer: coarse) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-foldgutter {
|
||||
cursor : pointer;
|
||||
border-left : 1px solid #EEEEEE;
|
||||
transition : background 0.1s;
|
||||
&:hover { background : #DDDDDD; }
|
||||
/* Line numbers and gutters */
|
||||
.cm-gutters {
|
||||
background-color: #f0f0f0;
|
||||
color: #555;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.sourceMoveFlash .CodeMirror-line {
|
||||
animation-name : sourceMoveAnimation;
|
||||
animation-duration : 0.4s;
|
||||
/* Folding gutter */
|
||||
.cm-foldGutter {
|
||||
cursor: pointer;
|
||||
color: grey;
|
||||
font-weight: 600;
|
||||
transition: background 0.1s;
|
||||
|
||||
&:hover {
|
||||
background: #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror-search-field {
|
||||
width:25em !important;
|
||||
outline:1px inset #00000055 !important;
|
||||
/* Active line */
|
||||
.cm-activeLine {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.cm-activeLineGutter {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Flash animation for source moves */
|
||||
.sourceMoveFlash .cm-line {
|
||||
animation-name: sourceMoveAnimation;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.cm-searchField {
|
||||
width: 25em !important;
|
||||
outline: 1px inset #00000055 !important;
|
||||
}
|
||||
|
||||
/* Tab character visualization (optional) */
|
||||
//.cm-tab {
|
||||
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
|
||||
// background: url(...) no-repeat right;
|
||||
//}
|
||||
|
||||
//.cm-trailingspace {
|
||||
// .cm-space {
|
||||
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
|
||||
// }
|
||||
/* Trailing space visualization (optional) */
|
||||
//.cm-trailingSpace .cm-space {
|
||||
// background: url(...) no-repeat right;
|
||||
//}
|
||||
}
|
||||
|
||||
/* Emoji preview styling */
|
||||
.emojiPreview {
|
||||
font-size : 1.5em;
|
||||
line-height : 1.2em;
|
||||
}
|
||||
font-size: 1.5em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user