Merge pull request #270 from jsightapi/rc/6.1

Release 6.1

README.md

@@ -225,23 +225,23 @@ Check that the JSight Server is working by running the following command:
 Linux:
 
 ```
-curl --location --request POST "http://localhost:8080/" \
+curl --location --request POST "http://localhost:8080/convert-jsight?to=jdoc-2.0" \
 --header "Content-Type: text/plain" \
 --data-raw "JSIGHT 0.3"
 ```
 
 Windows cmd:
 
 ```
-curl --location --request POST "http://localhost:8080/" ^
+curl --location --request POST "http://localhost:8080/convert-jsight?to=jdoc-2.0" ^
 --header "Content-Type: text/plain" ^
 --data-raw "JSIGHT 0.3"
 ```
 
 Windows PowerShell:
 
 ```
-curl --location --request POST "http://localhost:8080/" `
+curl --location --request POST "http://localhost:8080/convert-jsight?to=jdoc-2.0" `
 --header "Content-Type: text/plain" `
 --data-raw "JSIGHT 0.3"
 ```
@@ -259,7 +259,7 @@ If everything is in order, then you should receive a json in response, something
 <td>
 
 ```
-{"jdocExchangeFileSchemaVersion":"0.3.0","jsight":"0.3","resourceMethods":{},"tags":{}}
+{"jdocExchangeVersion":"2.0.0","jsight":"0.3","interactions":{},"tags":{}}
 ```
 
 </td>

package.json

@@ -77,6 +77,7 @@
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "4.11.1",
     "@typescript-eslint/parser": "4.11.1",
+    "ajv": "^8.16.0",
     "autoprefixer": "10.4.0",
     "eslint": "7.17.0",
     "eslint-config-prettier": "7.1.0",

src/assets/fonts/fontello/fontello.css

@@ -126,8 +126,18 @@
 .icon-arrow-back:before {
   content: '\e816';
 } /* '' */
-.icon-plus:before { content: '\e817'; } /* '' */
-.icon-upload:before { content: '\e818'; } /* '' */
-.icon-copy:before { content: '\e819'; } /* '' */
-.icon-check:before { content: '\e81a'; } /* '' */
-.icon-danger:before { content: '\e81b'; } /* '' */
+.icon-plus:before {
+  content: '\e817';
+} /* '' */
+.icon-upload:before {
+  content: '\e818';
+} /* '' */
+.icon-copy:before {
+  content: '\e819';
+} /* '' */
+.icon-check:before {
+  content: '\e81a';
+} /* '' */
+.icon-danger:before {
+  content: '\e81b';
+} /* '' */

src/components/Dropdown/DropdownMenu/DropdownMenu.styles.scss

@@ -37,7 +37,7 @@
       position: relative;
     }
 
-    [class^='icon-']+span {
+    [class^='icon-'] + span {
       margin-left: 1.2rem;
     }
 

src/components/Editor/Editor.styles.scss

@@ -10,7 +10,8 @@
   }
 }
 
-.errorLine, .errorLine+.line-numbers {
+.errorLine,
+.errorLine + .line-numbers {
   background: $secondary-red;
   opacity: 0.65;
 }

src/components/Editor/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useRef, useContext} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import * as monaco from 'monaco-editor';
 import {createOnigScanner, createOnigString, loadWASM} from 'vscode-oniguruma';
 import {SimpleLanguageInfoProvider} from 'textmate/providers';
@@ -7,10 +7,6 @@ import {rehydrateRegexps} from 'textmate/configuration';
 import VsCodeDarkTheme from 'textmate/themes/vs-dark-plus-theme';
 import type {LanguageId} from 'textmate/register';
 import type {ScopeName, TextMateGrammar, ScopeNameInfo} from 'textmate/providers';
-import {getExistingState} from 'api/codeSharing';
-import {getDefaultErrorMessages} from 'utils/getError';
-import {SharingContext} from 'store/SharingStore';
-import {ErrorSimpleType} from 'types';
 import './Editor.styles.scss';
 
 import('textmate/themes/jsight-dark.json').then((data: any) => {
@@ -20,13 +16,14 @@ import('textmate/themes/jsight-dark.json').then((data: any) => {
 
 interface EditorProps {
   content: string;
-  setContent: (value: string) => void;
-  errorRow: number | null;
-  scrollToRow: boolean;
-  reload: boolean;
-  reloadedEditor(): void;
-  setDisableSharing: React.Dispatch<React.SetStateAction<boolean>>;
-  setError: React.Dispatch<React.SetStateAction<ErrorSimpleType | null>>;
+  setContent?: (value: string) => void;
+  errorRow?: number | null;
+  scrollToRow?: boolean;
+  reload?: boolean;
+  reloadedEditor?: () => void;
+  readOnly?: boolean;
+  currentTheme?: string;
+  globalTestId?: string;
 }
 
 function initializeEditor(
@@ -60,33 +57,30 @@ export const Editor = React.memo(
     setContent,
     errorRow,
     scrollToRow,
-    setDisableSharing,
-    setError,
     reload,
     reloadedEditor,
+    readOnly = false,
+    globalTestId,
   }: EditorProps) => {
-    const {key, version, history} = useContext(SharingContext);
     const ref = useRef<HTMLDivElement | null>(null);
     const jsightEditor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const decorationsRef = useRef<string[]>([]);
     const [isEditorLoaded, setIsEditorLoaded] = useState<boolean>(false);
-    const dontUpdateSharingBtn = useRef<boolean>(false);
     const languagesList = ['jsight', 'jschema', 'markdown'];
     const currentLanguage = 'jsight';
 
-    // @ts-ignore
-    window['jsightEditor'] = jsightEditor;
+    if (globalTestId !== undefined) {
+      // @ts-ignore
+      window[globalTestId] = jsightEditor;
+    }
 
     const languages: monaco.languages.ILanguageExtensionPoint[] = languagesList.map((id) => ({
       id,
     }));
 
     const onContentChange = (editor: monaco.editor.IStandaloneCodeEditor) => {
       const content = getEditorValue(editor);
-      setContent(content);
-      if (!dontUpdateSharingBtn.current) {
-        setDisableSharing(false);
-      }
+      setContent && setContent(content);
     };
 
     // TODO: "source.${language} is not correct for markdown. MD scope is "text.html.markdown".
@@ -179,6 +173,7 @@ export const Editor = React.memo(
 
           editor.updateOptions({
             unicodeHighlight: {ambiguousCharacters: false},
+            readOnly,
           });
 
           const model = editor?.getModel();
@@ -200,59 +195,28 @@ export const Editor = React.memo(
         };
       })();
       // eslint-disable-next-line
-  }, []);
-
-    useEffect(() => {
-      if (isEditorLoaded) {
-        if (key) {
-          dontUpdateSharingBtn.current = true;
-          (async () => {
-            try {
-              const result = await getExistingState(key, version);
-              const resultContent = result.data.content;
-              if (jsightEditor.current) {
-                jsightEditor.current?.setValue(resultContent);
-              }
-              dontUpdateSharingBtn.current = false;
-              if (!version) {
-                history.push(`/r/${result.code}/${result.version}`);
-              }
-              highlightError();
-            } catch (error) {
-              if (error.Code) {
-                setError({
-                  code: error.Code,
-                  message: getDefaultErrorMessages(error.Code),
-                });
-              }
-            }
-          })();
-        } else {
-          setDisableSharing(false);
-        }
-      }
-    }, [isEditorLoaded, key, version]);
+    }, []);
 
     // process errors
     useEffect(() => {
       if (isEditorLoaded) {
         highlightError();
       }
       // eslint-disable-next-line
-  }, [isEditorLoaded, errorRow, content]);
+    }, [isEditorLoaded, errorRow, content]);
 
     useEffect(() => {
       if (reload && isEditorLoaded) {
         jsightEditor.current?.setValue(content);
-        reloadedEditor();
+        reloadedEditor && reloadedEditor();
       }
       // eslint-disable-next-line
-  }, [isEditorLoaded, reload]);
+    }, [isEditorLoaded, reload]);
 
     useEffect(() => {
       errorRow && jsightEditor.current?.revealLine(errorRow, 0);
       // eslint-disable-next-line
-  }, [scrollToRow]);
+    }, [scrollToRow]);
 
     const highlightError = () => {
       if (jsightEditor.current) {

src/components/Header/index.tsx

@@ -20,6 +20,7 @@ interface HeaderProps {
   setContactModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
   openSharingModal(): void;
   disableSharing: boolean;
+  sharingContent?: string;
 }
 
 export const Header = ({
@@ -28,6 +29,7 @@ export const Header = ({
   setContactModalVisible,
   openSharingModal,
   disableSharing,
+  sharingContent,
 }: HeaderProps) => {
   const [docsMenuVisible, setDocsMenuVisible] = useState<boolean>(false);
   const [fileMenuVisible, setFileMenuVisible] = useState<boolean>(false);
@@ -102,7 +104,11 @@ export const Header = ({
               />
             </Button>
           </div>
-          <ShareButton disableSharing={disableSharing} openSharingModal={openSharingModal} />
+          <ShareButton
+            disableSharing={disableSharing}
+            openSharingModal={openSharingModal}
+            sharingContent={sharingContent}
+          />
         </div>
       </div>
     </div>

src/components/MainContent/MainContent.styles.scss

@@ -75,18 +75,26 @@
 }
 
 .openapi-wrapper {
-  display: flex;
-}
+  position: relative;
+  display: block;
+  height: 100%;
 
-.openapi-lines {
-  padding: 20px 0;
-  width: 54px;
-  font-family: 'JetBrainsMono', serif;
-  font-size: 14px;
-  text-align: center;
-  background-color: $secondary-grey;
-  color: $main-grey;
-  flex-shrink: 0;
+  .margin-view-overlays {
+    background-color: $secondary-grey;
+    color: $main-grey;
+  }
+
+  .monaco-editor-background {
+    background-color: $secondary-grey;
+  }
+
+  .view-lines span {
+    color: $main-text;
+  }
+
+  .core-guide-indent.vertical {
+    box-shadow: 1px 0 0 0 $main-grey inset !important;
+  }
 }
 
 .openapi-content {
@@ -113,3 +121,7 @@
 .openapi-copy img {
   margin-left: 8px;
 }
+
+.monaco-editor-overlaymessage {
+  display: none !important;
+}