apostrophe 3.47.0 → 3.48.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 3.48.0 (2023-05-26)
+
+### Adds
+
+* For performance, add `apos.modules['piece-type']getManagerApiProjection` method to reduce the amount of data returned in the manager
+    modal. The projection will contain the fields returned in the method in addition to the existing manager modal
+    columns.
+* Add `apos.schema.getRelationshipQueryBuilderChoicesProjection` method to set the projection used in
+    `apos.schema.relationshipQueryBuilderChoices`.
+* Rich-text inline images now copies the `alt` attribute from the original image from the Media Library.
+
+### Changes
+
+* Remove `stripPlaceholderBrs` and `restorePlaceholderBrs` from `AposRichTextWidgetEditor.vue` component.
+* Change tiptap `Gapcursor` display to use a vertical blinking cursor instead of an horizontal cursor, which allow users to add text before and after inline images and tables.
+* You can set `max-width` on `.apos-rich-text-toolbar__inner` to define the width of the rich-text toolbar. It will now
+    flow on multiple lines if needed.
+* The `utilityRail` prop of `AposSchema` now defaults to `false`, removing
+the need to explicitly pass it in almost all contexts.
+* Mark `apos.modules['doc-type']` methods `getAutocompleteTitle`, `getAutocompleteProjection` and `autocomplete` as
+    deprecated. Our admin UI does not use them, it uses the `autocomplete('...')` query builder.
+    More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'.
+* Print a warning with a clear explanation if a module's `index.js` file contains
+no `module.exports` object (often due to a typo), or it is empty.
+
+### Fixes
+
+* Now errors and exits when a piece-type or widget-type module has a field object with the property `type`. Thanks to [NuktukDev](https://github.com/nuktukdev) for this contribution.
+* Add a default page type value to prevent the dropdown from containing an empty value.
+
 ## 3.47.0 (2023-05-05)
 
 ### Changes

package/lib/moog-require.js

@@ -77,6 +77,10 @@ module.exports = function(options) {
     }
     if (fs.existsSync(projectLevelPath)) {
       projectLevelDefinition = importFresh(resolveFrom(path.dirname(self.root.filename), projectLevelPath));
+      if (Object.keys(projectLevelDefinition).length === 0) {
+        /* eslint-disable-next-line no-console */
+        console.warn(`⚠️ The file ${projectLevelPath}\ndoes not export anything, did you misspell or forget module.exports?\n`);
+      }
     }
 
     let relativeTo;

package/modules/@apostrophecms/any-page-type/index.js

@@ -26,6 +26,11 @@ module.exports = {
       // titles from. The default behavior is to return the `title` property,
       // but since this is a page we are including the slug as well.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title + ' (' + doc.slug + ')';
       },
       getBrowserData(req) {

package/modules/@apostrophecms/doc-type/index.js

@@ -508,6 +508,26 @@ module.exports = {
       //
       // `query.field` will contain the schema field definition for
       // the relationship the user is attempting to match titles from.
+      getRelationshipQueryBuilderChoicesProjection(query) {
+        const projection = self.getAutocompleteProjection(query);
+
+        return {
+          ...projection,
+          title: 1,
+          type: 1,
+          _id: 1,
+          _url: 1,
+          slug: 1
+        };
+      },
+      // Returns a MongoDB projection object to be used when querying
+      // for this type if all that is needed is a title for display
+      // in an autocomplete menu. Default behavior is to
+      // return only the `title`, `_id` and `slug` properties.
+      // Removing any of these three is not recommended.
+      //
+      // `query.field` will contain the schema field definition for
+      // the relationship the user is attempting to match titles from.
       getAutocompleteProjection(query) {
         return {
           title: 1,
@@ -524,6 +544,11 @@ module.exports = {
       // event start dates and similar information that helps the
       // user distinguish between docs.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title;
       },
       // Used by `@apostrophecms/version` to label changes that
@@ -615,6 +640,12 @@ module.exports = {
       //
       // We don't launder the input here, see the 'autocomplete' route.
       async autocomplete(req, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-autocomplete',
+          'self.autocomplete() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
+
         const _query = query.find(req, {}).sort('search');
         if (query.extendAutocompleteQuery) {
           query.extendAutocompleteQuery(_query);

package/modules/@apostrophecms/image/index.js

@@ -462,6 +462,14 @@ module.exports = {
   },
   extendMethods(self) {
     return {
+      getRelationshipQueryBuilderChoicesProjection(_super, query) {
+        const projection = _super(query);
+
+        return {
+          ...projection,
+          attachment: 1
+        };
+      },
       getBrowserData(_super, req) {
         const data = _super(req);
         data.components.managerModal = 'AposMediaManager';

package/modules/@apostrophecms/page-type/index.js

@@ -22,6 +22,7 @@ module.exports = {
           type: 'select',
           label: 'apostrophe:type',
           required: true,
+          def: self.options.apos.page.typeChoices[0].name,
           choices: self.options.apos.page.typeChoices.map(function (type) {
             return {
               value: type.name,
@@ -297,6 +298,11 @@ module.exports = {
       // the `title` property, but since this is a page we are including
       // the slug as well.
       getAutocompleteTitle(doc, query) {
+        // TODO Remove in next major version.
+        self.apos.util.warnDevOnce(
+          'deprecate-get-autocomplete-title',
+          'self.getAutocompleteTitle() is deprecated. Use the autocomplete(\'...\') query builder instead. More info at https://v3.docs.apostrophecms.org/reference/query-builders.html#autocomplete'
+        );
         return doc.title + ' (' + doc.slug + ')';
       },
       // `req` determines what the user is eligible to edit, `criteria`

package/modules/@apostrophecms/piece-type/index.js

@@ -26,6 +26,20 @@ module.exports = {
     // publicApiProjection: {
     //   title: 1,
     //   _url: 1,
+    // },
+    // By default the manager modal will get all the pieces fields below + all manager columns
+    // you can enable a projection using
+    // managerApiProjection: {
+    //   _id: 1,
+    //   _url: 1,
+    //   aposDocId: 1,
+    //   aposLocale: 1,
+    //   aposMode: 1,
+    //   docPermissions: 1,
+    //   slug: 1,
+    //   title: 1,
+    //   type: 1,
+    //   visibility: 1
     // }
   },
   fields: {
@@ -182,6 +196,10 @@ module.exports = {
     if (!self.options.name) {
       throw new Error('@apostrophecms/pieces require name option');
     }
+    const badFieldName = Object.keys(self.fields).indexOf('type') !== -1;
+    if (badFieldName) {
+      throw new Error(`The ${self.__meta.name} module contains a forbidden field property name: "type".`);
+    }
     if (!self.options.label) {
       // Englishify it
       self.options.label = _.startCase(self.options.name);
@@ -1063,7 +1081,24 @@ module.exports = {
             return self.apos.permission.can(req, batchOperation.permission, self.name);
           }
           return true;
+
+        });
+      },
+      getManagerApiProjection(req) {
+        if (!self.options.managerApiProjection) {
+          return null;
+        }
+
+        const projection = { ...self.options.managerApiProjection };
+        self.columns.forEach(({ name }) => {
+          const column = (name.startsWith('draft:') || name.startsWith('published:'))
+            ? name.replace(/^(draft|published):/, '')
+            : name;
+
+          projection[column] = 1;
         });
+
+        return projection;
       }
     };
   },
@@ -1092,6 +1127,7 @@ module.exports = {
           editorModal: 'AposDocEditor',
           managerModal: 'AposDocsManager'
         });
+        browserOptions.managerApiProjection = self.getManagerApiProjection(req);
 
         return browserOptions;
       },

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -316,6 +316,10 @@ export default {
       const {
         currentPage, pages, results, choices
       } = await this.request({
+        ...(
+          this.moduleOptions.managerApiProjection &&
+          { project: this.moduleOptions.managerApiProjection }
+        ),
         page: this.currentPage
       });
 

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -435,7 +435,7 @@ module.exports = {
             },
             {
               tag: 'img',
-              attributes: [ 'src' ]
+              attributes: [ 'src', 'alt' ]
             }
           ]
         };

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue

@@ -16,7 +16,6 @@
         :schema="schema"
         :trigger-validation="triggerValidation"
         v-model="docFields"
-        :utility-rail="false"
         :modifiers="formModifiers"
         :key="lastSelectionTime"
         :generation="generation"
@@ -125,11 +124,13 @@ export default {
         }
         const image = this.docFields.data._image[0];
         this.docFields.data.imageId = image && image.aposDocId;
+        this.docFields.data.alt = image && image.alt;
         this.$emit('before-commands');
         this.editor.commands.setImage({
           imageId: this.docFields.data.imageId,
           caption: this.docFields.data.caption,
-          style: this.docFields.data.style
+          style: this.docFields.data.style,
+          alt: this.docFields.data.alt
         });
         this.close();
       });

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -2,7 +2,7 @@
   <div>
     <bubble-menu
       class="bubble-menu"
-      :tippy-options="{ duration: 100, zIndex: 2000 }"
+      :tippy-options="{ maxWidth: 'none', duration: 100, zIndex: 2000 }"
       :editor="editor"
       v-if="editor"
     >
@@ -27,7 +27,8 @@
     </bubble-menu>
     <floating-menu
       class="apos-rich-text-insert-menu" :should-show="showFloatingMenu"
-      :editor="editor" :tippy-options="{ duration: 100, zIndex: 2000 }"
+      :editor="editor"
+      :tippy-options="{ duration: 100, zIndex: 2000 }"
       v-if="editor"
     >
       <div class="apos-rich-text-insert-menu-heading">
@@ -178,10 +179,10 @@ export default {
     },
     autofocus() {
       // Only true for a new rich text widget
-      return !this.stripPlaceholderBrs(this.value.content).length;
+      return !this.value.content.length;
     },
     initialContent() {
-      const content = this.transformNamedAnchors(this.stripPlaceholderBrs(this.value.content));
+      const content = this.transformNamedAnchors(this.value.content);
       if (content.length) {
         return content;
       }
@@ -343,26 +344,12 @@ export default {
         clearTimeout(this.pending);
         this.pending = null;
       }
-      let content = this.editor.getHTML();
-      content = this.restorePlaceholderBrs(content);
+      const content = this.editor.getHTML();
       const widget = this.docFields.data;
       widget.content = content;
       // ... removes need for deep watching in parent
       this.$emit('update', { ...widget });
     },
-    // Restore placeholder BRs for empty paragraphs. ProseMirror adds these
-    // temporarily so the editing experience doesn't break due to contenteditable
-    // issues with empty paragraphs, but strips them on save; however
-    // seeing them while editing creates a WYSIWYG expectation
-    // on the user's part, so we must maintain them
-    restorePlaceholderBrs(html) {
-      return html.replace(/<(p[^>]*)>(\s*)<\/p>/gi, '<$1><br /></p>');
-    },
-    // Strip the placeholder BRs again when populating the editor.
-    // Otherwise they get doubled by ProseMirror
-    stripPlaceholderBrs(html) {
-      return html.replace(/<(p[^>]*)>\s*<br \/>\s*<\/p>/gi, '<$1></p>');
-    },
     // Legacy content may have `id` and `name` attributes on anchor tags
     // but our tiptap anchor extension needs them on a separate `span`, so nest
     // a span to migrate this content for each relevant anchor tag encountered
@@ -569,8 +556,10 @@ function traverseNextNode(node) {
 
   .apos-rich-text-toolbar__inner {
     display: flex;
+    flex-wrap: wrap;
     align-items: stretch;
-    height: 35px;
+    max-width: 100%;
+    height: auto;
     background-color: var(--a-background-primary);
     color: var(--a-text-primary);
     border-radius: var(--a-border-radius);
@@ -710,4 +699,27 @@ function traverseNextNode(node) {
   .apos-rich-text-insert-menu-heading {
     color: var(--a-base-5);
   }
+
+  ::v-deep .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+
+    > :last-child {
+      margin-bottom: 1.75em;
+    }
+  }
+
+  ::v-deep .ProseMirror-gapcursor {
+    position: relative;
+    display: block;
+    height: 20px;
+
+    &:after {
+      width: 1px;
+      height: 20px;
+      border-left: 1px solid #000;
+      border-top: 0 none;
+    }
+  }
 </style>

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue

@@ -33,7 +33,6 @@
           :schema="schema"
           :trigger-validation="triggerValidation"
           v-model="docFields"
-          :utility-rail="false"
           :modifiers="formModifiers"
           :key="lastSelectionTime"
           :generation="generation"

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue

@@ -33,7 +33,6 @@
           :schema="schema"
           :trigger-validation="triggerValidation"
           v-model="docFields"
-          :utility-rail="false"
           :modifiers="formModifiers"
           :key="lastSelectionTime"
           :generation="generation"

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Image.js

@@ -1,8 +1,10 @@
-import { Node } from '@tiptap/core';
+import {
+  mergeAttributes,
+  Node
+} from '@tiptap/core';
 
 export default options => {
   return Node.create({
-
     name: 'image',
 
     addOptions() {
@@ -12,22 +14,51 @@ export default options => {
       };
     },
 
-    inline: true,
+    allowGapCursor: true,
+    atom: true,
+    selectable: true,
+
+    group: 'block',
 
-    group: 'inline',
+    content: 'inline*',
 
     draggable: true,
 
+    isolating: false,
+
     addAttributes() {
       return {
         imageId: {
-          default: null
+          default: null,
+          parseHTML: element => {
+            const src = element.querySelector('img')?.getAttribute('src');
+
+            const components = src.split('/');
+            if (components.length < 2) {
+              return false;
+            }
+
+            const routeName = components.pop();
+            if (routeName !== 'src') {
+              return false;
+            }
+
+            const imageId = components.pop();
+
+            return imageId;
+          }
         },
         caption: {
-          default: ''
+          default: '',
+          parseHTML: element => element.querySelector('figcaption')?.innerText || ''
         },
         style: {
-          default: null
+          default: null,
+          parseHTML: element => element.getAttribute('class')
+        },
+        alt: {
+          default: null,
+          parseHTML: element => element.querySelector('img')?.getAttribute('alt')
         }
       };
     },
@@ -35,72 +66,63 @@ export default options => {
     parseHTML() {
       // <figure>
       //   <img src="/media/cc0-images/elephant-660-480.jpg"
-      //       alt="Elephant at sunset">
+      //     alt="Elephant at sunset">
       //   <figcaption>An elephant at sunset</figcaption>
       // </figure>
       return [
         {
           tag: 'figure',
-          getAttrs: el => {
-            const img = el.querySelector('img');
-            const src = img.getAttribute('src');
-            if (!img || !src) {
-              return false;
-            }
-            const caption = el.querySelector('figcaption');
-            const components = src.split('/');
-            if (components.length < 2) {
-              return false;
-            }
-            const routeName = components.pop();
-            if (routeName !== 'src') {
-              return false;
-            }
-            const imageId = components.pop();
-            const style = el.getAttribute('class');
-            if (!imageId) {
-              return false;
-            }
-            const result = {
-              imageId,
-              style,
-              caption: (caption && caption.innerText) || ''
-            };
-            return result;
-          }
+          contentElement: 'figcaption'
         }
       ];
     },
 
-    addCommands() {
-      return {
-        setImage: options => ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options
-          });
-        }
-      };
-    },
-
     renderHTML({ HTMLAttributes }) {
       return [
         'figure',
-        {
-          class: HTMLAttributes.style || this.options.HTMLAttributes.style
-        },
-        [
-          'img',
+        mergeAttributes(
+          this.options.HTMLAttributes,
           {
-            src: `${apos.modules['@apostrophecms/image'].action}/${HTMLAttributes.imageId}/src`
+            class: HTMLAttributes.style
           }
+        ),
+        [
+          'img',
+          mergeAttributes(
+            HTMLAttributes,
+            {
+              src: `${apos.modules['@apostrophecms/image'].action}/${HTMLAttributes.imageId}/src`,
+              alt: HTMLAttributes.alt,
+              draggable: false,
+              contenteditable: false
+            }
+          )
         ],
         [
           'figcaption',
-          {},
-          HTMLAttributes.caption
+          0
         ]
       ];
+    },
+
+    addCommands() {
+      return {
+        setImage: (attrs) => ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs,
+              content: attrs?.caption
+                ? [ {
+                  type: 'text',
+                  text: attrs.caption
+                } ]
+                : []
+            })
+            .createParagraphNear()
+            .run();
+        }
+      };
     }
   });
 };

package/modules/@apostrophecms/schema/index.js

@@ -1090,7 +1090,7 @@ module.exports = {
           const idsStorage = field.idsStorage;
           const ids = await query.toDistinct(idsStorage);
           const manager = self.apos.doc.getManager(field.withType);
-          const relationshipQuery = manager.find(query.req, { aposDocId: { $in: ids } }).project(manager.getAutocompleteProjection({ field: field }));
+          const relationshipQuery = manager.find(query.req, { aposDocId: { $in: ids } }).project(manager.getRelationshipQueryBuilderChoicesProjection({ field: field }));
           if (field.builders) {
             relationshipQuery.applyBuilders(field.builders);
           }

package/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue

@@ -64,7 +64,6 @@
                     v-if="currentId"
                     :schema="schema"
                     :trigger-validation="triggerValidation"
-                    :utility-rail="false"
                     :following-values="followingValues()"
                     :conditional-fields="conditionalFields()"
                     :value="currentDoc"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue

@@ -61,7 +61,6 @@
               :class="item.open && !alwaysExpand ? 'apos-input-array-inline-item--active' : null"
               v-model="item.schemaInput"
               :trigger-validation="triggerValidation"
-              :utility-rail="false"
               :generation="generation"
               :modifiers="['small', 'inverted']"
               :doc-id="docId"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -13,7 +13,6 @@
           <AposSchema
             :schema="field.schema"
             :trigger-validation="triggerValidation"
-            :utility-rail="false"
             :generation="generation"
             :doc-id="docId"
             v-model="schemaInput"

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -104,7 +104,12 @@ export default {
       }
     },
     triggerValidation: Boolean,
-    utilityRail: Boolean,
+    utilityRail: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
     docId: {
       type: String,
       default() {

package/modules/@apostrophecms/widget-type/index.js

@@ -103,6 +103,10 @@ module.exports = {
     placeholderClass: 'apos-placeholder'
   },
   init(self) {
+    const badFieldName = Object.keys(self.fields).indexOf('type') !== -1;
+    if (badFieldName) {
+      throw new Error(`The ${self.__meta.name} module contains a forbidden field property name: "type".`);
+    }
 
     self.enableBrowserData();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.47.0",
+  "version": "3.48.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/pieces-children/pieces-malformed-child.js

@@ -0,0 +1,32 @@
+const t = require('../../test-lib/test.js');
+
+const apiKey = 'this is a test api key';
+
+(async function () {
+  await t.create({
+    root: module,
+
+    modules: {
+      '@apostrophecms/express': {
+        options: {
+          apiKeys: {
+            [apiKey]: {
+              role: 'admin'
+            }
+          }
+        }
+      },
+      malformed: {
+        extend: '@apostrophecms/piece-type',
+        fields: {
+          add: {
+            type: {
+              label: 'Foo',
+              type: 'string'
+            }
+          }
+        }
+      }
+    }
+  });
+})();

package/test/pieces-malformed.js

@@ -0,0 +1,33 @@
+const t = require('../test-lib/test.js');
+const { spawn } = require('child_process');
+const assert = require('assert');
+
+describe('Malformed Pieces', function () {
+  this.timeout(t.timeout);
+  it('should fail to initialize with a schema containing a field named "type"', function (done) {
+    let throwsError = true;
+    const mochaProcess = spawn('node', [ './test/pieces-children/pieces-malformed-child.js' ]);
+
+    mochaProcess.stdout.on('data', (data) => {
+      console.log(`Mocha output: ${data}`);
+
+    });
+
+    mochaProcess.stderr.on('data', (data) => {
+      const errorMsg = data.toString();
+      const errorMatch = errorMsg.match(/(?<error>Error:.*\n)/);
+      if (errorMatch) {
+        throwsError = true;
+        assert.equal(errorMatch.groups.error, 'Error: The malformed module contains a forbidden field property name: "type".\n');
+      } else {
+        throwsError = false;
+      }
+    });
+
+    mochaProcess.on('close', (code) => {
+      assert.equal(code, 1, 'Mocha process exited with status code 0');
+      assert.ok(throwsError, 'Error message not found in stderr');
+      done();
+    });
+  });
+});

package/test/widgets-children/widgets-malformed-child.js

@@ -0,0 +1,32 @@
+const t = require('../../test-lib/test.js');
+
+const apiKey = 'this is a test api key';
+
+(async function () {
+  await t.create({
+    root: module,
+
+    modules: {
+      '@apostrophecms/express': {
+        options: {
+          apiKeys: {
+            [apiKey]: {
+              role: 'admin'
+            }
+          }
+        }
+      },
+      malformed: {
+        extend: '@apostrophecms/widget-type',
+        fields: {
+          add: {
+            type: {
+              label: 'Foo',
+              type: 'string'
+            }
+          }
+        }
+      }
+    }
+  });
+})();

package/test/widgets-malformed.js

@@ -0,0 +1,34 @@
+const t = require('../test-lib/test.js');
+const { spawn } = require('child_process');
+const assert = require('assert');
+
+describe('Malformed Widgets', function () {
+  this.timeout(t.timeout);
+
+  it('should fail to initialize with a schema containing a field named "type"', function (done) {
+    let throwsError = true;
+    const mochaProcess = spawn('node', [ './test/widgets-children/widgets-malformed-child.js' ]);
+
+    mochaProcess.stdout.on('data', (data) => {
+      console.log(`Mocha output: ${data}`);
+
+    });
+
+    mochaProcess.stderr.on('data', (data) => {
+      const errorMsg = data.toString();
+      const errorMatch = errorMsg.match(/(?<error>Error:.*\n)/);
+      if (errorMatch) {
+        throwsError = true;
+        assert.equal(errorMatch.groups.error, 'Error: The malformed module contains a forbidden field property name: "type".\n');
+      } else {
+        throwsError = false;
+      }
+    });
+
+    mochaProcess.on('close', (code) => {
+      assert.equal(code, 1, 'Mocha process exited with status code 0');
+      assert.ok(throwsError, 'Error message not found in stderr');
+      done();
+    });
+  });
+});