Skip to content

Commit

Permalink
fix multiline with labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacovinus
jacovinus committed Mar 17, 2022
1 parent f44950f commit 8354363
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 86 deletions.
64 changes: 25 additions & 39 deletions src/components/LabelBrowser/QueryBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,25 @@ export const QueryBar = () => {
const historyOpen = useSelector((store) => store.historyOpen);
const [queryInput, setQueryInput] = useState(query);
const [queryValid, setQueryValid] = useState(false);
const [queryValue, setQueryValue] = useState( query.split(/[ ]+/).map( m => ({
type:'code-line',
children:[
{
text:m
}
]
}))||[
{
type: "code_line",
const [queryValue, setQueryValue] = useState(
query.split(/[ ]+/).map((m) => ({
type: "code-line",
children: [
{
text: "Enter a cLoki Query",
text: m,
},
],
},
]);
})) || [
{
type: "code-line",
children: [
{
text: "Enter a cLoki Query",
},
],
},
]
);
const SHOW_LOGS = "Show Logs";
const LOG_BROWSER = "Log Browser";
const queryHistory = useSelector((store) => store.queryHistory);
Expand Down Expand Up @@ -91,20 +93,9 @@ export const QueryBar = () => {

useEffect(() => {
setQueryInput(query);
setQueryValue(
[
{
type: "code_line",
children: [
{
text: query,
},
],
},
]
)
setQueryValue([{children:[{text:query}]}]);
setQueryValid(onQueryValid(query));
}, [query, queryInput]);
}, [query]);

const onValueDisplay = (e) => {
e.preventDefault();
Expand All @@ -117,15 +108,11 @@ export const QueryBar = () => {
setQueryInput(qr);
dispatch(setQuery(qr));
};
const handleQueryChange = (e) => {
console.log(e);
// const qr = e.target.value;
// console.log(qr)
console.log(e.length)
const multiline = e.map( text => text.children[0].text).join(' ')
console.log(multiline)
dispatch(setQuery(multiline))

function handleQueryChange (e) {
setQueryValue(e)

const multiline = e.map((text) => text.children[0].text).join("\n");
dispatch(setQuery(multiline));
};
const onBrowserActive = () => {
return !labelsBrowserOpen
Expand All @@ -136,6 +123,7 @@ export const QueryBar = () => {
};

const handleInputKeyDown = (e) => {

if (e.code === "Enter" && e.ctrlKey) {
onSubmit(e);
}
Expand Down Expand Up @@ -185,7 +173,6 @@ export const QueryBar = () => {
onQueryChange={handleQueryChange}
value={queryValue}
onKeyDown={handleInputKeyDown}

/>

{/* <input
Expand All @@ -201,12 +188,11 @@ export const QueryBar = () => {
<HistoryButton
style={{
color: historyItems ? "orange" : "#ddd",
height:'22px',
margin:'3px'
height: "22px",
margin: "3px",
}}
onClick={(e) => handleHistoryClick(e)}
>

<HistoryIcon fontSize={"small"} />
</HistoryButton>
</Tooltip>
Expand Down
108 changes: 61 additions & 47 deletions src/plugins/queryeditor/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// Import React dependencies.
import styled from "@emotion/styled";
import {css} from "@emotion/css";
import React, { useCallback, useState, useMemo } from "react";
import { css } from "@emotion/css";
import React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
// Import the Slate editor factory.
import { createEditor, Text, Element as SlateElement, Descendant } from "slate";
// Import the Slate components and React plugin.
import { Slate, Editable, withReact } from "slate-react";
import { Slate, Editable, withReact,insertData } from "slate-react";
import { withHistory } from "slate-history";
import Prism from "prismjs";
import "prismjs/components/prism-promql";
Expand All @@ -18,7 +18,7 @@ import "prismjs/components/prism-sql";
const CustomEditor = styled(Editable)`
flex: 1;
background: #121212;
color:#ccc;
color: #ccc;
padding: 4px 8px;
font-size: 1em;
font-family: monospace;
Expand All @@ -32,92 +32,101 @@ const QueryBar = styled.div`
align-items: center;
flex: 1;
`;

function Leaf({ attributes, children, leaf }) {

return (
<span
{...attributes}
className={css`
font-family: monospace;
// background: black;
// background: black;
${leaf.comment &&
css`
color: slategray;
color: blue;
`}
${(leaf.operator || leaf.url) &&
css`
color: #9a6e3a;
color: white;
`}
${leaf.keyword &&
${leaf.keyword &&
css`
color:#07a;
color: #57aed4;
`}
${(leaf.variable || leaf.regex) &&
css`
color: #e90;
`}
css`
color: #e90;
`}
${(leaf.number ||
leaf.boolean ||
leaf.tag ||
leaf.constant ||
leaf.symbol ||
leaf['attr-name'] ||
leaf["attr-name"] ||
leaf.selector) &&
css`
color: #690;
`}
css`
color: #dd4a68;
`}
${leaf.punctuation &&
css`
color: yellow;
`}
css`
color: orange;
`}
${(leaf.string || leaf.char) &&
css`
color: #690;
`}
${(leaf.function || leaf['class-name'] || leaf['attr-name']) &&
css`
color: #dd4a68;
`}
${leaf['context-labels']&&
css`
color:orange;
`}
${leaf['label-key'] &&
css`
color: green
color: #7bdb40;
`}
${(leaf.function || leaf["class-name"] || leaf["attr-name"]) &&
css`
color: #dd4a68;
`}
${leaf["context-labels"] &&
css`
color: orange;
`}
${leaf["label-key"] &&
css`
color: green;
`}
`}
>
{children}
</span>
);
}

export default function QueryEditor({ onQueryChange, value, onKeyDown }) {
// Create a Slate editor object that won't change across renders.
// the value could change, so add useEffect



const renderLeaf = useCallback((props) => <Leaf {...props} />, []);

const editor = useMemo(() => withHistory(withReact(createEditor())), []);
/* const editorRef = useRef()
if(!editorRef.current) editorRef.current = withHistory(withReact(createEditor()))
const editor = editorRef.current */
const editor = useMemo(() => withHistory(withReact(createEditor())), []);
// Keep track of state for the value of the editor.
const [language, setLanguage] = useState("promql");

const [language, setLanguage] = useState("sql");

const decorate = useCallback(
([node, path]) => {
const ranges = [];
if (!Text.isText(node)) {
if (!Text.isText(node) || node.length <1) {
return ranges;
}
const tokens = Prism.tokenize(node.text, Prism.languages[language]);
let start = 0;
for (const token of tokens) {
const length = getLength(token);
const end = start + length;

if (typeof token !== "string") {
ranges.push({
[token.type]: true,
anchor: { path, offset: start },
focus: { path, offset: end },
focus: { path, offset: end },
});
}
start = end;
Expand All @@ -137,15 +146,25 @@ export default function QueryEditor({ onQueryChange, value, onKeyDown }) {
}
}


const [editorValue, setEditorValue] = useState(value)

useEffect(()=>{
setEditorValue(value)
},[])
useEffect(()=>{
setEditorValue(value)
editor.children = value
},[value])
return (
<QueryBar>
<select value={language} onChange={(e) => setLanguage(e.target.value)}>
{/* <select value={language} onChange={(e) => setLanguage(e.target.value)}>
<option value={"sql"}>{"SQL"}</option>
<option value={"promql"}>{"promQL"}</option>
</select>
<Slate editor={editor} value={value} onChange={onQueryChange}>
</select> */}
<Slate editor={editor} value={editorValue} onChange={onQueryChange}>
<CustomEditor
decorate={decorate}
decorate={decorate}
renderLeaf={renderLeaf}
placeholder="Enter a cLoki Query"
onKeyDown={onKeyDown}
Expand All @@ -156,8 +175,3 @@ export default function QueryEditor({ onQueryChange, value, onKeyDown }) {
);
}

/**
* events will be taken from CustomEditor
* as: CTRL Enter
* as: Enter (new line)
*/

0 comments on commit 8354363

Please sign in to comment.