Merge pull request #24 from Bwc9876/dev

0.6.0

package.json

@@ -29,6 +29,7 @@
         "@rjsf/core": "^4.2.3",
         "@tauri-apps/api": "^1.0.2",
         "bootstrap": "^5.2.0",
+        "jsonpath-plus": "^7.0.0",
         "monaco-editor": "^0.33.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.5.0",
@@ -37,7 +38,8 @@
         "react-hotkeys-hook": "^3.4.7",
         "react-jsonschema-form": "^1.8.1",
         "react-redux": "^8.0.2",
-        "sortablejs": "^1.15.0"
+        "sortablejs": "^1.15.0",
+        "vscode-json-languageservice": "^5.1.0"
     },
     "devDependencies": {
         "@tauri-apps/cli": "^1.0.5",

src/Common/AppData/Settings.ts

@@ -33,7 +33,7 @@ export type Settings = {
     minify: boolean;
 
     /**
-     * @description Always use a text editor for files instead of the inspector. (Reload Required)
+     * @description Always use a text editor for files instead of the inspector.
      */
     alwaysUseTextEditor: boolean;
 

src/Common/AppData/SettingsSchema.json

@@ -7,7 +7,7 @@
             "additionalProperties": false,
             "properties": {
                 "alwaysUseTextEditor": {
-                    "description": "Always use a text editor for files instead of the inspector. (Reload Required)",
+                    "description": "Always use a text editor for files instead of the inspector.",
                     "type": "boolean"
                 },
                 "defaultAuthor": {

src/Common/Popover/IconPopover.tsx

@@ -0,0 +1,34 @@
+import { Placement } from "@popperjs/core";
+import PropTypes from "prop-types";
+import { Popover, PopoverBody, PopoverHeader } from "react-bootstrap";
+import IconPopoverTrigger from "./IconPopoverTrigger";
+
+export type DescriptionPopoverProps = {
+    id: string;
+    title: string;
+    body: string;
+    icon: PropTypes.ReactElementLike;
+    className?: string;
+    placement?: Placement;
+};
+
+function IconPopover(props: DescriptionPopoverProps) {
+    const popover = (
+        <Popover className="position-absolute" id={`${props.id}-popover`}>
+            <PopoverHeader>{props.title}</PopoverHeader>
+            <PopoverBody>{props.body}</PopoverBody>
+        </Popover>
+    );
+
+    return (
+        <IconPopoverTrigger
+            className={props.className}
+            popover={popover}
+            icon={props.icon}
+            placement={props.placement}
+            ariaLabel="Info"
+        />
+    );
+}
+
+export default IconPopover;

src/Common/Popover/IconPopoverTrigger.tsx

@@ -0,0 +1,33 @@
+import { Placement } from "@popperjs/core";
+import PropTypes from "prop-types";
+import { cloneElement } from "react";
+import { OverlayTrigger } from "react-bootstrap";
+
+export type InfoIconTriggerProps = {
+    popover: PropTypes.ReactElementLike;
+    icon: PropTypes.ReactElementLike;
+    ariaLabel: string;
+    className?: string;
+    placement?: Placement;
+};
+
+function IconPopoverTrigger(props: InfoIconTriggerProps) {
+    // noinspection RequiredAttributes
+    return (
+        <OverlayTrigger
+            delay={{ show: 50, hide: 50 }}
+            trigger={["hover", "focus"]}
+            placement={props.placement ?? "right"}
+            overlay={props.popover}
+        >
+            {cloneElement(props.icon, {
+                className: `ms-2 fs-6 text-secondary${
+                    props.className ? ` ${props.className}` : ""
+                }`,
+                "aria-label": props.ariaLabel
+            })}
+        </OverlayTrigger>
+    );
+}
+
+export default IconPopoverTrigger;

src/MainWindow/MenuBar/AboutGroup.tsx

@@ -96,13 +96,6 @@ function ReloadItem() {
         }
     };
 
-    window.onbeforeunload = (e) => {
-        if (filesHaveChanged) {
-            e.preventDefault();
-            e.returnValue = "There are unsaved changes. Are you sure?";
-        }
-    };
-
     return (
         <IconDropDownItem
             annotation="Ctrl+R"

src/MainWindow/MenuBar/FileGroup.tsx

@@ -60,10 +60,7 @@ function SaveFileItem() {
     );
 
     const onClick = () => {
-        console.debug("Save Action");
-        console.debug(selectedFile);
         if (selectedIndex !== -1 && selectedFile !== undefined) {
-            console.debug("Saving file", selectedFile.name);
             dispatch(saveFileData({ file: selectedFile, projectPath: project.path }));
         }
     };

src/MainWindow/Panels/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useMemo } from "react";
+import { ReactElement, useEffect, useMemo, useRef } from "react";
 import Col from "react-bootstrap/Col";
 import { connect } from "react-redux";
 import { SchemaStore } from "../../../Common/AppData/SchemaStore";
@@ -9,7 +9,8 @@ import {
     OpenFile,
     readFileData,
     selectOpenFileByRelativePath,
-    selectOpenFileIsSelectedFactory
+    selectOpenFileIsSelectedFactory,
+    validateFile
 } from "../../Store/OpenFilesSlice";
 import { isAudio, isImage, usesInspector } from "../../Store/FileUtils";
 import { RootState } from "../../Store/Store";
@@ -51,6 +52,7 @@ const determineEditor = (
 function Editor(props: EditorProps) {
     const { alwaysUseTextEditor } = useSettings();
     const dispatch = useAppDispatch();
+    const currentValidationPromise = useRef<{ abort: () => void } | null>(null);
 
     const file = useAppSelector((state: RootState) =>
         selectOpenFileByRelativePath(state.openFiles, props.relativePath)
@@ -74,6 +76,8 @@ function Editor(props: EditorProps) {
 
     const onDataChanged = (value: string) => {
         dispatch(fileEdited({ id: file.relativePath, content: value }));
+        currentValidationPromise.current?.abort();
+        currentValidationPromise.current = dispatch(validateFile({ value, file }));
     };
 
     const ChosenEditor = useMemo(

src/MainWindow/Panels/Editor/EditorTab.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { cloneElement, useMemo } from "react";
 import { X } from "react-bootstrap-icons";
 import Col from "react-bootstrap/Col";
 import { contextMenu } from "../../Store/ContextMenuSlice";
@@ -41,10 +41,13 @@ function EditorTab(props: EditorTabProps) {
 
     const icon = useMemo(() => determineIcon(file), [props.id]);
 
+    const hasErrors =
+        (file.errors.length > 0 || file.otherErrors) && file.tabIndex !== selectedIndex;
+
     return (
         <Col data-relpath={props.id} onContextMenu={onContext} xs="auto" className={classes}>
             <span onClick={onClick} className="d-flex align-items-center justify-content-center">
-                {icon}
+                {cloneElement(icon, { className: hasErrors ? "text-danger" : "" })}
                 <span className="ms-1">
                     {file.name + (file.memoryData !== file.diskData ? "*" : "")}
                 </span>

src/MainWindow/Panels/Editor/Editors/Inspector/FieldTemplates/InspectorArrayFieldTemplate.tsx

@@ -1,9 +1,9 @@
 import { ArrayFieldTemplateProps } from "@rjsf/core";
 import { cloneElement, useState } from "react";
 import { Button, Collapse } from "react-bootstrap";
-import { CaretRightFill } from "react-bootstrap-icons";
+import { CaretRightFill, InfoCircle } from "react-bootstrap-icons";
 import { camelToTitleCase } from "../../../../../../Common/Utils";
-import DescriptionPopover from "./DescriptionPopover";
+import IconPopover from "../../../../../../Common/Popover/IconPopover";
 
 function InspectorArrayFieldTemplate({
     canAdd,
@@ -35,10 +35,11 @@ function InspectorArrayFieldTemplate({
                         {camelToTitleCase(title)}
                     </span>
                     {schema.description !== undefined && (
-                        <DescriptionPopover
+                        <IconPopover
+                            icon={<InfoCircle />}
                             id={title}
                             title={title}
-                            description={schema.description}
+                            body={schema.description}
                         />
                     )}
                 </h4>