#363 - Multiline support

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)
 

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;
   }
 

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);

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 {