Add support for text templates to CMS editor (#4144)

cms/src/collections/collections.ts

@@ -7,6 +7,7 @@ import EXERCISE_DEFAULTS_FIELDS from '../fields/defaults';
 import {TAG_FIELDS} from '../fields/tag';
 import {COLLECTION_FIELDS} from '../fields/collection';
 import {DEFAULT_LANGUAGE_TAG} from '../../../shared/src/constants/i18n';
+import EDITOR_TEXT_TEMPLATES_FIELDS from '../fields/templates';
 
 export const exercises: CmsCollection = {
   name: 'exercises',
@@ -38,6 +39,12 @@ export const settings: CmsCollection = {
       file: '/cms/src/defaults/exercise.json',
       fields: EXERCISE_DEFAULTS_FIELDS,
     },
+    {
+      label: '🔖 Editor text templates',
+      name: 'text-templates',
+      file: '/cms/src/templates/editorTexts.json',
+      fields: EDITOR_TEXT_TEMPLATES_FIELDS,
+    },
   ],
   i18n: false,
   extension: 'json',

cms/src/editorComponents.ts/textTemplates.ts

@@ -0,0 +1,33 @@
+import {templates} from '../templates/editorTexts.json';
+
+const templateOptions = templates.map(template => ({
+  label: `${template.name} - ${template.text}`,
+  value: template.text,
+}));
+
+const templatesSubPattern = templates
+  .map(template => template.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  .join('|');
+
+const templatesPattern = new RegExp(`(${templatesSubPattern})(\\s|$)`);
+
+const textTemplates = {
+  id: 'textTemplate',
+  label: '🔖 Text template',
+  fields: [
+    {
+      name: 'template',
+      label: 'Template',
+      widget: 'select',
+      options: templateOptions,
+    },
+  ],
+  pattern: templatesPattern,
+  fromBlock: (match: RegExpMatchArray) => ({
+    template: match[1],
+  }),
+  toBlock: (obj: {template: string}) => obj.template,
+  toPreview: (obj: {template: string}) => obj.template,
+};
+
+export default textTemplates;

cms/src/fields/templates.ts

@@ -0,0 +1,28 @@
+import {CmsField} from 'netlify-cms-core';
+
+const EDITOR_TEXT_TEMPLATES_FIELDS: Array<CmsField> = [
+  {
+    label: '🔖 Text templates',
+    label_singular: '🔖 Text template',
+    name: 'templates',
+    widget: 'list',
+    summary: '{{fields.name}} - {{fields.text}}',
+    min: 1,
+    fields: [
+      {
+        label: '🔖 Name',
+        name: 'name',
+        widget: 'string',
+        required: true,
+      },
+      {
+        label: '📝 Text',
+        name: 'text',
+        widget: 'text',
+        required: true,
+      },
+    ],
+  },
+];
+
+export default EDITOR_TEXT_TEMPLATES_FIELDS;

cms/src/index.ts

@@ -15,6 +15,7 @@ import {
   email,
 } from './collections/collections';
 import {Widget as uniqueIdWidget} from './widgets/uniqueIdWidget';
+import textTemplates from './editorComponents.ts/textTemplates';
 
 CMS.init({
   config: {
@@ -50,3 +51,4 @@ CMS.init({
 
 CMS.registerWidget(uniqueIdWidget);
 CMS.registerMediaLibrary(cloudinary);
+CMS.registerEditorComponent(textTemplates);

cms/src/templates/editorTexts.json

@@ -0,0 +1,8 @@
+{
+  "templates": [
+    {
+      "name": "Test template",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus elit ac orci malesuada, eu euismod lorem porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non tortor sed felis viverra aliquam. Maecenas iaculis tempor quam, eget eleifend nulla lacinia id. Sed sagittis tortor quis nisl vestibulum, vel consequat mauris finibus. Aenean ac elementum mauris. Praesent sed lorem aliquam, rutrum est non, maximus lectus. Aliquam eget dui euismod, accumsan sapien interdum, tincidunt dui. Nullam vel egestas erat.\n\nPellentesque quis elit sapien. Etiam rhoncus accumsan orci, eu dapibus mi mollis et. Maecenas ultrices bibendum tristique. Aliquam rhoncus sem eget tristique porttitor. Praesent bibendum id est vel dictum. Aliquam blandit bibendum convallis. Donec blandit pulvinar tempus. Suspendisse iaculis diam et consequat auctor. Morbi ac elit varius, gravida tellus vel, dictum nisi. Praesent mattis posuere euismod. Integer tempus luctus mauris et ullamcorper.\n\nMauris faucibus tempus neque, nec tincidunt dolor commodo quis. Duis non scelerisque risus. Nam suscipit mattis nisi, non dictum ex auctor nec. Vestibulum ut ultricies enim, eget congue nulla. Ut quis suscipit tellus, ac venenatis eros. Donec leo elit, euismod eu erat eu, mattis suscipit nunc. Suspendisse potenti."
+    }
+  ]
+}