#418 - Heading and divider fields

CHANGELOG.md

@@ -24,6 +24,7 @@
 - [#394](https://github.com/estruyf/vscode-front-matter/issues/394): Ordering of snippet fields is based on their field definition
 - [#395](https://github.com/estruyf/vscode-front-matter/issues/395): Added support for custom snippet fields on media snippets
 - [#402](https://github.com/estruyf/vscode-front-matter/issues/402): Custom sorting of content now supports `number` fields
+- [#418](https://github.com/estruyf/vscode-front-matter/issues/418): New `heading` and `divider` fields for your content-type definition
 
 ### ⚡️ Optimizations
 

package.json

@@ -873,7 +873,9 @@
                         "block",
                         "list",
                         "dataFile",
-                        "slug"
+                        "slug",
+                        "divider",
+                        "heading"
                       ],
                       "description": "Define the type of field"
                     },
@@ -1045,6 +1047,20 @@
                     "name"
                   ],
                   "allOf": [
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "divider"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "type"
+                        ]
+                      }
+                    },
                     {
                       "if": {
                         "properties": {

src/models/PanelSettings.ts

@@ -51,7 +51,7 @@ export interface ContentType {
   postScript?: string;
 }
 
-export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block" | "file" | "dataFile" | "list" | "slug";
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block" | "file" | "dataFile" | "list" | "slug" | "divider" | "heading";
 
 export interface Field {
   title?: string;

src/panelWebView/components/Fields/WrapperField.tsx

@@ -111,7 +111,18 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     return null;
   }
 
-  if (field.type === 'datetime') {
+  if (field.type === 'divider') {
+    return (
+      <div key={field.name} className="metadata_field__divider" />
+    )
+  } else if (field.type === 'heading') {
+    return (
+      <div key={field.name} className="metadata_field__heading">
+        <h3>{field.title}</h3>
+        {field.description && <p className='metadata_field__description'>{field.description}</p>}
+      </div>
+    )
+  } else if (field.type === 'datetime') {
     return (
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <DateTimeField
@@ -324,9 +335,9 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
               required={field.required} />
             
             { field.description && (
-              <div className={`metadata_field__description`}>
+              <p className={`metadata_field__description`}>
                 {field.description}
-              </div>
+              </p>
             )}
 
             { renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onSendUpdate) }

src/panelWebView/styles.css

@@ -353,6 +353,22 @@
   margin-left: .5rem;
 }
 
+/* Divider field */
+.metadata_field__divider {
+  background: var(--vscode-button-secondaryBackground);
+  margin: 1rem 2.5rem;
+  height: 1px;
+}
+
+/* Heading field */
+.metadata_field__heading {
+  margin: 1rem 0;
+  
+  .metadata_field__description {
+    margin: -1rem 0 0 0;
+  }
+}
+
 /* Text field */
 .metadata_field__limit {
   color: var(--vscode-inputValidation-warningBorder);