diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js
index afa65677..440d337c 100644
--- a/src/components/LabelBrowser/QueryBar.js
+++ b/src/components/LabelBrowser/QueryBar.js
@@ -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);
@@ -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();
@@ -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
@@ -136,6 +123,7 @@ export const QueryBar = () => {
};
const handleInputKeyDown = (e) => {
+
if (e.code === "Enter" && e.ctrlKey) {
onSubmit(e);
}
@@ -185,7 +173,6 @@ export const QueryBar = () => {
onQueryChange={handleQueryChange}
value={queryValue}
onKeyDown={handleInputKeyDown}
-
/>
{/* {
handleHistoryClick(e)}
>
-
diff --git a/src/plugins/queryeditor/index.js b/src/plugins/queryeditor/index.js
index 6edb7673..3ac1d30a 100644
--- a/src/plugins/queryeditor/index.js
+++ b/src/plugins/queryeditor/index.js
@@ -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";
@@ -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;
@@ -32,80 +32,88 @@ const QueryBar = styled.div`
align-items: center;
flex: 1;
`;
+
function Leaf({ attributes, children, leaf }) {
+
return (
{children}
);
}
+
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) => , []);
- 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]);
@@ -113,11 +121,12 @@ export default function QueryEditor({ onQueryChange, value, onKeyDown }) {
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;
@@ -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 (
- */}
+