decaporg · martinjagodic · Aug 24, 2023 · Sep 24, 2021 · Sep 29, 2021 · Sep 30, 2021
diff --git a/dev-test/config.yml b/dev-test/config.yml
@@ -7,6 +7,27 @@ publish_mode: editorial_workflow
 media_folder: assets/uploads
 
 collections: # A list of collections the CMS should be able to edit
+  - name: 'translations'
+    label: 'Translations'
+    folder: '_translations'
+    i18n:
+      structure: 'multiple_folders'
+    format: custom
+    identifier_field: namespace
+    fields:
+      - label: Namespace
+        name: namespace
+        widget: string
+        i18n: false
+      - label: 'Items'
+        label_singular: 'Item'
+        name: 'list'
+        widget: list
+        fields:
+          - name: key
+            widget: string
+          - name: value
+            widget: string
   - name: 'posts' # Used in routes, ie.: /admin/collections/:slug/edit
     label: 'Posts' # Used in the UI
     label_singular: 'Post' # Used in the UI, ie: "New Post"

diff --git a/dev-test/index.html b/dev-test/index.html
@@ -6,6 +6,11 @@
   <title>Netlify CMS Development Test</title>
   <script>
   window.repoFiles = {
+    _translations: {
+      "common.json": {
+        content: '{"__ns": "common", "key1": "hello"}'
+      }
+    },
     _posts: {
       "2015-02-14-this-is-a-post.md": {
         content: "---\ntitle: This is a YAML front matter post\nimage: /nf-logo.png\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n"
@@ -111,6 +116,9 @@
   </script>
 </head>
 <body>
+  <script>
+  globalThis.CMS_MANUAL_INIT = true
+  </script>
 
   <script src="dist/netlify-cms.js"></script>
   <script>
@@ -237,6 +245,30 @@
         );
       }
     });
+
+    const PreWidget = createClass({
+      render: function() {
+        const { value, fieldsMetaData } = this.props;
+        return value ? h('pre', { style: style },
+          value.toJS()
+        ) : null;
+      }
+    });
+
+    CMS.registerCustomFormat('custom', 'json', {
+      fromFile(content) {
+        const {__ns, ...others} = JSON.parse(content);
+        const list = Object.entries(others).map(([key, value]) => ({key, value}))
+        return {namespace: __ns, list};
+      },
+
+      toFile(data) {
+        const keys = data.list.reduce((acc, item) => ({...acc, [item.key]: item.value}), {})
+        const raw = {__ns: data.namespace, ...keys};
+        return JSON.stringify(raw, null, 2);
+      },
+    });
+    CMS.init()
   </script>
 </body>
 </html>
diff --git a/packages/netlify-cms-core/index.d.ts b/packages/netlify-cms-core/index.d.ts
@@ -36,15 +36,7 @@ declare module 'netlify-cms-core' {
     value: any;
   }
 
-  export type CmsCollectionFormatType =
-    | 'yml'
-    | 'yaml'
-    | 'toml'
-    | 'json'
-    | 'frontmatter'
-    | 'yaml-frontmatter'
-    | 'toml-frontmatter'
-    | 'json-frontmatter';
+  export type CmsCollectionFormatType = string;
 
   export type CmsAuthScope = 'repo' | 'public_repo';
 
@@ -500,6 +492,11 @@ declare module 'netlify-cms-core' {
 
   export type CmsLocalePhrases = any; // TODO: type properly
 
+  export type Formatter = {
+    fromFile(content: string): unknown;
+    toFile(data: object, sortedKeys?: string[], comments?: Record<string, string>): string;
+  };
+
   export interface CmsRegistry {
     backends: {
       [name: string]: CmsRegistryBackend;
@@ -519,6 +516,9 @@ declare module 'netlify-cms-core' {
     locales: {
       [name: string]: CmsLocalePhrases;
     };
+    formats: {
+      [name: string]: Formatter;
+    };
   }
 
   type GetAssetFunction = (asset: string) => {
@@ -578,6 +578,7 @@ declare module 'netlify-cms-core' {
       serializer: CmsWidgetValueSerializer,
     ) => void;
     resolveWidget: (name: string) => CmsWidget | undefined;
+    registerCustomFormat: (name: string, extension: string, formatter: Formatter) => void;
   }
 
   export const NetlifyCmsCore: CMS;

diff --git a/packages/netlify-cms-core/src/constants/configSchema.js b/packages/netlify-cms-core/src/constants/configSchema.js
@@ -8,7 +8,7 @@ import {
 import ajvErrors from 'ajv-errors';
 import uuid from 'uuid/v4';
 
-import { formatExtensions, frontmatterFormats, extensionFormatters } from '../formats/formats';
+import { frontmatterFormats, extensionFormatters } from '../formats/formats';
 import { getWidgets } from '../lib/registry';
 import { I18N_STRUCTURE, I18N_FIELD } from '../lib/i18n';
 
@@ -231,7 +231,7 @@ function getConfigSchema() {
                 preview: { type: 'boolean' },
               },
             },
-            format: { type: 'string', enum: Object.keys(formatExtensions) },
+            format: { type: 'string' },
             extension: { type: 'string' },
             frontmatter_delimiter: {
               type: ['string', 'array'],

diff --git a/packages/netlify-cms-core/src/formats/__tests__/formats.spec.js b/packages/netlify-cms-core/src/formats/__tests__/formats.spec.js
@@ -0,0 +1,87 @@
+import { Map } from 'immutable';
+
+import { extensionFormatters, resolveFormat } from '../formats';
+import { registerCustomFormat } from '../../lib/registry';
+
+describe('custom formats', () => {
+  const testEntry = {
+    collection: 'testCollection',
+    data: { x: 1 },
+    isModification: false,
+    label: 'testLabel',
+    mediaFiles: [],
+    meta: {},
+    newRecord: true,
+    partial: false,
+    path: 'testPath1',
+    raw: 'testRaw',
+    slug: 'testSlug',
+    author: 'testAuthor',
+    updatedOn: 'testUpdatedOn',
+  };
+  it('resolves builtint formats', () => {
+    const collection = Map({
+      name: 'posts',
+    });
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.yml' })).toEqual(
+      extensionFormatters.yml,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.yaml' })).toEqual(
+      extensionFormatters.yml,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.toml' })).toEqual(
+      extensionFormatters.toml,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.json' })).toEqual(
+      extensionFormatters.json,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.md' })).toEqual(
+      extensionFormatters.md,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.markdown' })).toEqual(
+      extensionFormatters.markdown,
+    );
+    expect(resolveFormat(collection, { ...testEntry, path: 'test.html' })).toEqual(
+      extensionFormatters.html,
+    );
+  });
+
+  it('resolves custom format', () => {
+    registerCustomFormat('txt-querystring', 'txt', {
+      fromFile: file => Object.fromEntries(new URLSearchParams(file)),
+      toFile: value => new URLSearchParams(value).toString(),
+    });
+
+    const collection = Map({
+      name: 'posts',
+      format: 'txt-querystring',
+    });
+
+    const formatter = resolveFormat(collection, { ...testEntry, path: 'test.txt' });
+
+    expect(formatter.toFile({ foo: 'bar' })).toEqual('foo=bar');
+    expect(formatter.fromFile('foo=bar')).toEqual({ foo: 'bar' });
+  });
+
+  it('can override existing formatters', () => {
+    // simplified version of a more realistic use case: using a different yaml library like js-yaml
+    // to make netlify-cms play nice with other tools that edit content and spit out yaml
+    registerCustomFormat('bad-yaml', 'yml', {
+      fromFile: file => Object.fromEntries(file.split('\n').map(line => line.split(': '))),
+      toFile: value =>
+        Object.entries(value)
+          .map(([k, v]) => `${k}: ${v}`)
+          .join('\n'),
+    });
+
+    const collection = Map({
+      name: 'posts',
+      format: 'bad-yaml',
+    });
+
+    const formatter = resolveFormat(collection, { ...testEntry, path: 'test.txt' });
+
+    expect(formatter.toFile({ a: 'b', c: 'd' })).toEqual('a: b\nc: d');
+    expect(formatter.fromFile('a: b\nc: d')).toEqual({ a: 'b', c: 'd' });
+  });
+});
diff --git a/packages/netlify-cms-core/src/formats/formats.ts b/packages/netlify-cms-core/src/formats/formats.ts
@@ -5,10 +5,12 @@ import yamlFormatter from './yaml';
 import tomlFormatter from './toml';
 import jsonFormatter from './json';
 import { FrontmatterInfer, frontmatterJSON, frontmatterTOML, frontmatterYAML } from './frontmatter';
+import { getCustomFormatsExtensions, getCustomFormatsFormatters } from '../lib/registry';
 
 import type { Delimiter } from './frontmatter';
 import type { Collection, EntryObject, Format } from '../types/redux';
 import type { EntryValue } from '../valueObjects/Entry';
+import type { Formatter } from 'netlify-cms-core';
 
 export const frontmatterFormats = ['yaml-frontmatter', 'toml-frontmatter', 'json-frontmatter'];
 
@@ -23,6 +25,10 @@ export const formatExtensions = {
   'yaml-frontmatter': 'md',
 };
 
+export function getFormatExtensions() {
+  return { ...formatExtensions, ...getCustomFormatsExtensions() };
+}
+
 export const extensionFormatters = {
   yml: yamlFormatter,
   yaml: yamlFormatter,
@@ -33,8 +39,8 @@ export const extensionFormatters = {
   html: FrontmatterInfer,
 };
 
-function formatByName(name: Format, customDelimiter?: Delimiter) {
-  return {
+function formatByName(name: Format, customDelimiter?: Delimiter): Formatter {
+  const formatters: Record<string, Formatter> = {
     yml: yamlFormatter,
     yaml: yamlFormatter,
     toml: tomlFormatter,
@@ -43,7 +49,12 @@ function formatByName(name: Format, customDelimiter?: Delimiter) {
     'json-frontmatter': frontmatterJSON(customDelimiter),
     'toml-frontmatter': frontmatterTOML(customDelimiter),
     'yaml-frontmatter': frontmatterYAML(customDelimiter),
-  }[name];
+    ...getCustomFormatsFormatters(),
+  };
+  if (name in formatters) {
+    return formatters[name];
+  }
+  throw new Error(`No formatter available with name: ${name}`);
 }
 
 function frontmatterDelimiterIsList(

diff --git a/packages/netlify-cms-core/src/lib/__tests__/registry.spec.js b/packages/netlify-cms-core/src/lib/__tests__/registry.spec.js
@@ -46,6 +46,21 @@ describe('registry', () => {
     });
   });
 
+  describe('registerCustomFormat', () => {
+    it('can register a custom format', () => {
+      const { getCustomFormats, registerCustomFormat } = require('../registry');
+
+      expect(Object.keys(getCustomFormats())).not.toContain('querystring');
+
+      registerCustomFormat('querystring', 'qs', {
+        fromFile: content => Object.fromEntries(new URLSearchParams(content)),
+        toFile: obj => new URLSearchParams(obj).toString(),
+      });
+
+      expect(Object.keys(getCustomFormats())).toContain('querystring');
+    });
+  });
+
   describe('eventHandlers', () => {
     const events = [
       'prePublish',

diff --git a/packages/netlify-cms-core/src/lib/registry.js b/packages/netlify-cms-core/src/lib/registry.js
@@ -31,6 +31,7 @@ const registry = {
   mediaLibraries: [],
   locales: {},
   eventHandlers,
+  formats: {},
 };
 
 export default {
@@ -58,6 +59,10 @@ export default {
   removeEventListener,
   getEventListeners,
   invokeEvent,
+  registerCustomFormat,
+  getCustomFormats,
+  getCustomFormatsExtensions,
+  getCustomFormatsFormatters,
 };
 
 /**
@@ -280,3 +285,28 @@ export function registerLocale(locale, phrases) {
 export function getLocale(locale) {
   return registry.locales[locale];
 }
+
+export function registerCustomFormat(name, extension, formatter) {
+  registry.formats[name] = { extension, formatter };
+}
+
+export function getCustomFormats() {
+  return registry.formats;
+}
+
+export function getCustomFormatsExtensions() {
+  return Object.entries(registry.formats).reduce(function (acc, [name, { extension }]) {
+    return { ...acc, [name]: extension };
+  }, {});
+}
+
+/** @type {() => Record<string, unknown>} */
+export function getCustomFormatsFormatters() {
+  return Object.entries(registry.formats).reduce(function (acc, [name, { formatter }]) {
+    return { ...acc, [name]: formatter };
+  }, {});
+}
+
+export function getFormatter(name) {
+  return registry.formats[name]?.formatter;
+}
diff --git a/packages/netlify-cms-core/src/reducers/collections.ts b/packages/netlify-cms-core/src/reducers/collections.ts
@@ -7,7 +7,7 @@ import { CONFIG_SUCCESS } from '../actions/config';
 import { FILES, FOLDER } from '../constants/collectionTypes';
 import { COMMIT_DATE, COMMIT_AUTHOR } from '../constants/commitProps';
 import { INFERABLE_FIELDS, IDENTIFIER_FIELDS, SORTABLE_FIELDS } from '../constants/fieldInference';
-import { formatExtensions } from '../formats/formats';
+import { getFormatExtensions } from '../formats/formats';
 import { selectMediaFolder } from './entries';
 import { summaryFormatter } from '../lib/formatters';
 
@@ -48,7 +48,8 @@ const selectors = {
     entryExtension(collection: Collection) {
       return (
         collection.get('extension') ||
-        get(formatExtensions, collection.get('format') || 'frontmatter')
+        get(getFormatExtensions(), collection.get('format') || 'frontmatter') ||
+        get(getFormatExtensions(), 'frontmatter')
       ).replace(/^\./, '');
     },
     fields(collection: Collection) {

diff --git a/packages/netlify-cms-core/src/types/redux.ts b/packages/netlify-cms-core/src/types/redux.ts
@@ -598,7 +598,7 @@ type i18n = StaticallyTypedRecord<{
   default_locale: string;
 }>;
 
-export type Format = keyof typeof formatExtensions;
+export type Format = keyof typeof formatExtensions | string;
 
 type CollectionObject = {
   name: string;