From fccffa4ea2bc0689295f9f837c6818dabfff8dd1 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 14 Mar 2023 08:38:37 +0100
Subject: [PATCH] #363 - Multiline support

---
 CHANGELOG.md                                          | 1 +
 src/components/uniforms-frontmatter/AutoField.tsx     | 4 ++++
 src/dashboardWebView/components/DataView/DataForm.tsx | 7 +++++--
 src/dashboardWebView/styles.css                       | 3 ++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a98bd61..06960b3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 ### ✨ New features
 
+- [#363](https://github.com/estruyf/vscode-front-matter/issues/363): Multiline support for the `string` field in data view
 - [#513](https://github.com/estruyf/vscode-front-matter/issues/513): Added support for external UI scripts to add custom HTML on the dashboard elements
 - [#530](https://github.com/estruyf/vscode-front-matter/issues/530): Implementation of the Front Matter AI 🤖 powered by [mendable.ai](https://mendable.ai)
 
diff --git a/src/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx
index 6560ba46..c04ff6e9 100644
--- a/src/components/uniforms-frontmatter/AutoField.tsx
+++ b/src/components/uniforms-frontmatter/AutoField.tsx
@@ -5,6 +5,7 @@ export { AutoFieldProps } from 'uniforms';
 import BoolField from './BoolField';
 import DateField from './DateField';
 import ListField from './ListField';
+import LongTextField from './LongTextField';
 import NestField from './NestField';
 import NumField from './NumField';
 import RadioField from './RadioField';
@@ -28,6 +29,9 @@ const AutoField = createAutoField((props) => {
     case Object:
       return NestField;
     case String:
+      if (props["multiline"]) {
+        return LongTextField;
+      }
       return TextField;
   }
 
diff --git a/src/dashboardWebView/components/DataView/DataForm.tsx b/src/dashboardWebView/components/DataView/DataForm.tsx
index 1a484a6e..8db8cfbc 100644
--- a/src/dashboardWebView/components/DataView/DataForm.tsx
+++ b/src/dashboardWebView/components/DataView/DataForm.tsx
@@ -3,7 +3,6 @@ import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
-// import { AutoFields, AutoForm, ErrorsField } from 'uniforms-antd';
 import { ErrorBoundary } from '@sentry/react';
 import { DataFormControls } from './DataFormControls';
 import useThemeColors from '../../hooks/useThemeColors';
@@ -24,7 +23,11 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
   const [bridge, setBridge] = useState<JSONSchemaBridge | null>(null);
   const { getColors } = useThemeColors();
 
-  const ajv = new Ajv({ allErrors: true, useDefaults: true });
+  const ajv = new Ajv({
+    allErrors: true,
+    useDefaults: true,
+    strict: false,
+  });
 
   const jsonValidator = (schema: object) => {
     const validator = ajv.compile(schema);
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index cf0c4eea..ee65cd7e 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -85,7 +85,8 @@
       @apply my-2;
     }
 
-    input {
+    input,
+    textarea {
       @apply w-full px-2 py-1 text-vulcan-500;
 
       &::placeholder {