bug fixes

packages/components/frontend/ConfigEditor.tsx

@@ -42,9 +42,16 @@ function MonacoContainer({
     editor.layout();
   }, [size]);
   React.useEffect(() => {
-    if (!editor) return;
+    if (!editor || !model) return;
+    const decoration = editor.createDecorationsCollection();
+    const updateDecoration = () => {
+      const found = model.findMatches("'[hidden]'", true, false, true, '', true).map((i) => i.range);
+      decoration.set(found.map((range) => ({ range, options: { inlineClassName: 'decoration-hide' } })));
+    };
+    updateDecoration();
     const disposable = editor.onDidChangeModelContent(() => {
       const val = editor.getValue({ lineEnding: '\n', preserveBOM: false });
+      updateDecoration();
       try {
         const loaded = yaml.load(val);
         schema(loaded);
@@ -55,7 +62,7 @@ function MonacoContainer({
       }
     });
     return () => disposable.dispose(); // eslint-disable-line
-  }, [editor, setValue, setError]);
+  }, [editor, model, setValue, setError]);
   React.useEffect(() => {
     if (!editorRef.current || loading) return;
     setLoading(true);

packages/components/frontend/Dom.tsx

@@ -0,0 +1,14 @@
+import { omit } from 'lodash';
+import React from 'react';
+
+export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { childDom: HTMLElement }) {
+  const [dom, setDom] = React.useState<HTMLElement | null>(null);
+  React.useEffect(() => {
+    if (!dom) return;
+    dom.appendChild(props.childDom);
+    return () => { // eslint-disable-line consistent-return
+      dom.removeChild(props.childDom);
+    };
+  }, [dom]);
+  return <div {...omit(props, 'childDom')} ref={setDom}></div>;
+}

packages/components/frontend/provider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastContainer } from 'react-toastify';
+import { Slide, ToastContainer } from 'react-toastify';
 
 interface C {
   i18n: (key: string, ...args: any[]) => string;
@@ -19,14 +19,15 @@ export default function ComponentsProvider(props: { children: React.ReactNode }
     <ToastContainer
       position="bottom-left"
       autoClose={5000}
-      hideProgressBar={false}
+      hideProgressBar
       newestOnTop={false}
       closeOnClick={false}
       rtl={false}
       pauseOnFocusLoss
       draggable
       pauseOnHover
-      theme={props.theme}
+      theme="colored"
+      transition={Slide}
     />
     {props.children}
   </ComponentsContext.Provider>;