#743 - Fix for storing yaml

CHANGELOG.md

@@ -20,6 +20,7 @@
 - [#725](https://github.com/estruyf/vscode-front-matter/issues/725): Fix for opening menu of pinned items
 - [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields
 - [#738](https://github.com/estruyf/vscode-front-matter/issues/738): Fix when re-opening the preview after closing it
+- [#743](https://github.com/estruyf/vscode-front-matter/issues/743): Fix for storing data in YAML data files
 
 ## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0)
 

package-lock.json

@@ -23,7 +23,7 @@
         "@types/chai": "^4.3.4",
         "@types/glob": "7.1.3",
         "@types/invariant": "^2.2.35",
-        "@types/js-yaml": "3.12.1",
+        "@types/js-yaml": "^4.0.9",
         "@types/lodash.omit": "^4.5.7",
         "@types/lodash.uniqby": "4.7.6",
         "@types/lodash.xor": "^4.5.7",
@@ -90,7 +90,6 @@
         "react-quill": "^2.0.0",
         "react-router-dom": "^6.8.0",
         "react-sortable-hoc": "^2.0.0",
-        "react-toastify": "^8.2.0",
         "recoil": "^0.4.1",
         "remark-gfm": "^3.0.1",
         "rimraf": "^3.0.2",
@@ -1042,9 +1041,10 @@
       "license": "MIT"
     },
     "node_modules/@types/js-yaml": {
-      "version": "3.12.1",
-      "dev": true,
-      "license": "MIT"
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
@@ -3111,14 +3111,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/clsx": {
-      "version": "1.1.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "dev": true,
@@ -10225,19 +10217,6 @@
         "react-dom": "^16.3.0 || ^17.0.0"
       }
     },
-    "node_modules/react-toastify": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.2.0.tgz",
-      "integrity": "sha512-Pg2Ju7NngAamarFvLwqrFomJ57u/Ay6i6zfLurt/qPynWkAkOthu6vxfqYpJCyNhHRhR4hu7+bySSeWWJu6PAg==",
-      "dev": true,
-      "dependencies": {
-        "clsx": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
     "node_modules/read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -13999,7 +13978,9 @@
       "dev": true
     },
     "@types/js-yaml": {
-      "version": "3.12.1",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
       "dev": true
     },
     "@types/json-schema": {
@@ -15522,10 +15503,6 @@
         "mimic-response": "^1.0.0"
       }
     },
-    "clsx": {
-      "version": "1.1.1",
-      "dev": true
-    },
     "color-convert": {
       "version": "1.9.3",
       "dev": true,
@@ -20287,15 +20264,6 @@
         "prop-types": "^15.5.7"
       }
     },
-    "react-toastify": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.2.0.tgz",
-      "integrity": "sha512-Pg2Ju7NngAamarFvLwqrFomJ57u/Ay6i6zfLurt/qPynWkAkOthu6vxfqYpJCyNhHRhR4hu7+bySSeWWJu6PAg==",
-      "dev": true,
-      "requires": {
-        "clsx": "^1.1.1"
-      }
-    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -2566,7 +2566,7 @@
     "@types/chai": "^4.3.4",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
-    "@types/js-yaml": "3.12.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.uniqby": "4.7.6",
     "@types/lodash.xor": "^4.5.7",
@@ -2633,7 +2633,6 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
-    "react-toastify": "^8.2.0",
     "recoil": "^0.4.1",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",

src/dashboardWebView/DashboardMessage.ts

@@ -74,6 +74,7 @@ export enum DashboardMessage {
   runCustomScript = 'runCustomScript',
   sendTelemetry = 'sendTelemetry',
   logError = 'logError',
+  showNotification = 'showNotification',
 
   // Settings
   getSettings = 'getSettings',

src/dashboardWebView/components/DataView/DataView.tsx

@@ -16,20 +16,17 @@ import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
 import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
-import { ToastContainer, toast, Slide } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
 import { NavigationItem } from '../Layout';
 import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { NavigationType } from '../../models';
 
 export interface IDataViewProps { }
 
 export const DataView: React.FunctionComponent<IDataViewProps> = (
-  props: React.PropsWithChildren<IDataViewProps>
+  _: React.PropsWithChildren<IDataViewProps>
 ) => {
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
@@ -112,15 +109,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         entries: data
       });
 
-      // Show toast message
-      toast.success('Updated your data entries', {
-        position: 'top-right',
-        autoClose: 2000,
-        hideProgressBar: true,
-        closeOnClick: true,
-        pauseOnHover: false,
-        transition: Slide
-      });
+      Messenger.send(DashboardMessage.showNotification, 'Updated your data entries');
     },
     [selectedData]
   );
@@ -319,8 +308,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         isBacker={settings?.isBacker}
       />
 
-      <ToastContainer />
-
       <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=DataView" alt="DataView metrics" />
     </div >
   );

src/dashboardWebView/components/DataView/SortableItem.tsx

@@ -1,7 +1,6 @@
-import { PencilIcon, ChevronDownIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, TrashIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { SortableHandle, SortableElement } from 'react-sortable-hoc';
-import useThemeColors from '../../hooks/useThemeColors';
 import { LinkButton } from '../Common/LinkButton';
 import { Alert } from '../Modals/Alert';
 import * as l10n from '@vscode/l10n';
@@ -16,7 +15,7 @@ export interface ISortableItemProps {
   onDeleteItem: (index: number) => void;
 }
 
-const DragHandle = SortableHandle(() => <ChevronDownIcon className={`w-6 h-6 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
+const DragHandle = SortableHandle(() => <ChevronUpDownIcon className={`w-6 h-6 mr-2 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
 
 export const SortableItem = SortableElement(
   ({
@@ -27,7 +26,6 @@ export const SortableItem = SortableElement(
     onDeleteItem
   }: ISortableItemProps) => {
     const [showAlert, setShowAlert] = React.useState(false);
-    const { getColors } = useThemeColors();
 
     const deleteItemConfirm = () => {
       setShowAlert(true);
@@ -37,12 +35,8 @@ export const SortableItem = SortableElement(
       <>
         <li
           data-test={`${selectedIndex}-${crntIndex}`}
-          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? getColors(`bg-gray-300 dark:bg-vulcan-300`, `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]`) : ``
-            } ${getColors(
-              'hover:bg-gray-200 dark:hover:bg-vulcan-400',
-              'hover:bg-[var(--frontmatter-list-hover-background)]'
-            )
-            }`}
+          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : ``
+            } hover:bg-[var(--frontmatter-list-hover-background)]`}
         >
           <div
             className="flex items-center w-full"

src/helpers/FrameworkDetector.ts

@@ -163,7 +163,7 @@ export class FrameworkDetector {
       if (await existsAsync(hexoConfig)) {
         const content = await readFileAsync(hexoConfig, 'utf8');
         // Convert YAML to JSON
-        const config = jsyaml.load(content);
+        const config = jsyaml.load(content) as any;
 
         // Check if post assets are used: https://hexo.io/docs/asset-folders.html#Post-Asset-Folder
         if (config.post_asset_folder) {
@@ -210,7 +210,7 @@ export class FrameworkDetector {
       if (await existsAsync(jekyllConfig)) {
         const content = await readFileAsync(jekyllConfig, 'utf8');
         // Convert YAML to JSON
-        const config = jsyaml.load(content);
+        const config = jsyaml.load(content) as any;
 
         if (config.collections_dir) {
           collectionDir = config.collections_dir;

src/listeners/dashboard/DashboardListener.ts

@@ -46,6 +46,11 @@ export class DashboardListener extends BaseListener {
       case DashboardMessage.getPinnedItems:
         DashboardListener.getPinnedItems(msg);
         break;
+      case DashboardMessage.showNotification:
+        if (msg.payload) {
+          Notifications.info(msg.payload);
+        }
+        break;
     }
   }
 

src/listeners/dashboard/DataListener.ts

@@ -6,7 +6,7 @@ import { DashboardCommand } from '../../dashboardWebView/DashboardCommand';
 import { Folders } from '../../commands/Folders';
 import { dirname } from 'path';
 import * as yaml from 'js-yaml';
-import { DataFileHelper } from '../../helpers';
+import { DataFileHelper, Logger } from '../../helpers';
 import { existsAsync, readFileAsync, writeFileAsync } from '../../utils';
 import { mkdirAsync } from '../../utils/mkdirAsync';
 import { PostMessageData } from '../../models';
@@ -59,8 +59,12 @@ export class DataListener extends BaseListener {
       newFileContent || workspace.getConfiguration().get('files.insertFinalNewline');
 
     if (fileType === 'yaml') {
-      const yamlData = yaml.safeDump(entries);
-      await writeFileAsync(absPath, insertFinalNewLine ? `${yamlData}\n` : yamlData, 'utf8');
+      try {
+        const yamlData = yaml.dump(entries);
+        await writeFileAsync(absPath, insertFinalNewLine ? `${yamlData}\n` : yamlData, 'utf8');
+      } catch (e) {
+        Logger.error((e as Error).message);
+      }
     } else {
       const jsonData = JSON.stringify(entries, null, 2);
       await writeFileAsync(absPath, insertFinalNewLine ? `${jsonData}\n` : jsonData, 'utf8');