parsing objects with yaml

Author: RafaelGB

src/components/cellTypes/Editor/MarkdownEditor.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, useEffect } from "react";
+import React, { forwardRef, MutableRefObject, useEffect } from "react";
 import { useAutocompleteInputProps } from "components/cellTypes/Editor/autocomplete";
 import {
   autoPairBracketsCommands,
@@ -10,22 +10,17 @@ import {
 } from "components/cellTypes/Editor/commands";
 import { EMITTERS_GROUPS } from "helpers/Constants";
 import { MarkdownEditorProps } from "cdm/EditorModel";
+import useAutosizeTextArea from "components/styles/hooks/useAutosizeTextArea";
 
 export const MarkdownEditor = forwardRef(function MarkdownEditor(
   { onEnter, onEscape, view, ...inputProps }: MarkdownEditorProps,
-  ref: Ref<HTMLTextAreaElement>
+  ref: MutableRefObject<HTMLTextAreaElement>
 ) {
-  const shouldAutoPairMarkdown = (app.vault as any).getConfig(
-    "autoPairMarkdown"
-  );
-  const shouldAutoPairBrackets = (app.vault as any).getConfig(
-    "autoPairBrackets"
-  );
-  const shouldUseTab = (app.vault as any).getConfig("useTab");
-  const tabWidth = (app.vault as any).getConfig("tabSize");
-  const shouldUseMarkdownLinks = !!(app.vault as any).getConfig(
-    "useMarkdownLinks"
-  );
+  const shouldAutoPairMarkdown = app.vault.getConfig("autoPairMarkdown");
+  const shouldAutoPairBrackets = app.vault.getConfig("autoPairBrackets");
+  const shouldUseTab = app.vault.getConfig("useTab");
+  const tabWidth = app.vault.getConfig("tabSize");
+  const shouldUseMarkdownLinks = !!app.vault.getConfig("useMarkdownLinks");
 
   const autocompleteProps = useAutocompleteInputProps({
     isInputVisible: true,
@@ -97,19 +92,17 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
     };
   }, [view]);
 
+  useAutosizeTextArea(ref.current, inputProps.value.toString());
+
   return (
     <textarea
       {...inputProps}
       {...autocompleteProps}
       ref={(c: HTMLTextAreaElement) => {
         autocompleteProps.ref.current = c;
-
-        if (ref && typeof ref === "function") {
-          ref(c);
-        } else if (ref) {
-          (ref as any).current = c;
-        }
+        ref.current = c;
       }}
+      rows={inputProps.value.toString()?.split("\n").length || 1}
     />
   );
 });

src/components/cellTypes/Editor/autocomplete.tsx

@@ -44,9 +44,7 @@ export function constructAutocomplete({
     keys: ["file.basename", "alias"],
   });
 
-  const willAutoPairBrackets = (view.app.vault as any).getConfig(
-    "autoPairBrackets"
-  );
+  const willAutoPairBrackets = view.app.vault.getConfig("autoPairBrackets");
 
   const configs: StrategyProps[] = [
     getTagSearchConfig(tags, tagSearch),

src/components/cellTypes/Editor/filepicker.ts

@@ -133,9 +133,7 @@ export function getFileSearchConfig(
         );
       }
 
-      const shouldUseMarkdownLinks = !!(
-        app.vault as any
-      ).getConfig('useMarkdownLinks');
+      const shouldUseMarkdownLinks = !!app.vault.getConfig('useMarkdownLinks');
 
       if (willAutoPairBrackets && !shouldUseMarkdownLinks) {
         output[output.length - 1] = output[output.length - 1].slice(0, -2);
@@ -233,9 +231,7 @@ export function getHeadingSearchConfig(
         )
       );
 
-      const shouldUseMarkdownLinks = !!(
-        app.vault as any
-      ).getConfig('useMarkdownLinks');
+      const shouldUseMarkdownLinks = !!app.vault.getConfig('useMarkdownLinks');
 
       if (willAutoPairBrackets && !shouldUseMarkdownLinks) {
         output[output.length - 1] = output[output.length - 1].slice(0, -2);
@@ -435,9 +431,7 @@ export function getBlockSearchConfig(
         )
       );
 
-      const shouldUseMarkdownLinks = !!(
-        app.vault as any
-      ).getConfig('useMarkdownLinks');
+      const shouldUseMarkdownLinks = !!app.vault.getConfig('useMarkdownLinks');
 
       if (willAutoPairBrackets && !shouldUseMarkdownLinks) {
         output[output.length - 1] = output[output.length - 1].slice(0, -2);

src/components/cellTypes/EditorCell.tsx

@@ -4,7 +4,6 @@ import React, { ChangeEventHandler, useCallback, useRef } from "react";
 import { useState } from "react";
 import { MarkdownEditor } from "components/cellTypes/Editor/MarkdownEditor";
 import { c } from "helpers/StylesHelper";
-import useAutosizeTextArea from "components/styles/hooks/useAutosizeTextArea";
 
 const EditorCell = (props: EditorCellComponentProps) => {
   const { defaultCell, persistChange, textCell } = props;
@@ -49,8 +48,6 @@ const EditorCell = (props: EditorCellComponentProps) => {
   const handleOnBlur = () => {
     persistChange(editorValue?.toString());
   };
-
-  useAutosizeTextArea(editableMdRef.current, editorValue);
   return (
     <>
       <MarkdownEditor

src/helpers/Constants.ts

@@ -474,7 +474,8 @@ export const SUGGESTER_REGEX = Object.freeze({
   LINK_BLOCK: /\B\[\[([^#\]]+)#?\^([^\]]*)$/,
   EMBED_BLOCK: /\B!\[\[([^#\]]+)#?\^([^\]]*)$/,
 
-  TEXT_ARRAY: /(^\[{1})([^\[]{1}.*)(\]{1})$/g
+  TEXT_ARRAY: /(^\[{1})([^\[]{1}.*)(\]{1})$/g,
+  TEXT_OBJECT: /(^\{{1})(.*)(\}{1})$/g,
 });
 
 /******************************************************************************

src/services/MarkdownRenderService.ts

@@ -7,6 +7,7 @@ import { getNormalizedPath } from "helpers/VaultManagement";
 import { CachedMetadata, MarkdownRenderer, setIcon, TFile } from "obsidian";
 import { Literal } from "obsidian-dataview";
 import { LOGGER } from "services/Logger";
+import * as YAML from 'yaml';
 
 const ILLIGAL_CHARS = /[!"#$%&()*+,.:;<=>?@^`{|}~/[\]\\]/g;
 class MarkdownRenderService {

src/services/parseServiceHelpers/TextParser.ts

@@ -4,6 +4,7 @@ import { DateTime } from "luxon";
 import { parseLuxonDatetimeToString } from "helpers/LuxonHelper";
 import { TypeParser } from "cdm/ServicesModel";
 import stringifyReplacer from "./StringifyReplacer";
+import * as YAML from 'yaml';
 
 class TextParser extends TypeParser<string | DataObject> {
     /**
@@ -25,7 +26,8 @@ class TextParser extends TypeParser<string | DataObject> {
                 }
                 try {
                     // Try to parse to JSON
-                    return JSON.stringify(wrapped.value, stringifyReplacer);
+                    const jsonReplaced = JSON.stringify(wrapped.value, stringifyReplacer);
+                    return YAML.stringify(JSON.parse(jsonReplaced));
                 } catch (e) {
                     // Do nothing
                 }

src/typings/obsidian.d.ts

@@ -17,4 +17,12 @@ declare module "obsidian" {
      */
     processFrontMatter(file: TFile, fn: (frontMatter: Record<string, Literal>) => void): Promise<void>
   }
+
+  interface Vault {
+    /**
+     * TODO: This is a temporary solution. Obsidian not expose official API to get the config.
+     * @param param 
+     */
+    getConfig(param: string): any;
+  }
 }