add default widgets to an area

modules/@apostrophecms/area/index.js

@@ -245,12 +245,15 @@ module.exports = {
       // options to sanitize against. Thus h5 can be legal
       // in one rich text widget and not in another.
       //
+      // `forcePlaceholder` is used to choose whether to render the widgets
+      // with their placeholder or not, depending on their manager options.
+      //
       // If any errors occur sanitizing the individual widgets,
       // an array of errors with `path` and `error` properties
       // is thrown.
       //
       // Returns a new array of sanitized items.
-      async sanitizeItems(req, items, options) {
+      async sanitizeItems(req, items, options, forcePlaceholder = false) {
         options = options || {};
         const result = [];
         const errors = [];
@@ -265,14 +268,19 @@ module.exports = {
             self.warnMissingWidgetType(item.type);
             continue;
           }
+
+          if (forcePlaceholder && manager.options.placeholder) {
+            item.aposPlaceholder = true;
+          }
+
           const widgetOptions = widgetsOptions[item.type];
           if (!widgetOptions) {
             // This widget is not specified for this area at all
             continue;
           }
           let newItem;
           try {
-            newItem = await manager.sanitize(req, item, widgetOptions);
+            newItem = await manager.sanitize(req, item, widgetOptions, forcePlaceholder);
             newItem._id = self.apos.launder.id(item._id) || self.apos.util.generateId();
           } catch (e) {
             if (Array.isArray(e)) {
@@ -554,6 +562,8 @@ module.exports = {
         const widgetEditors = {};
         const widgetManagers = {};
         const widgetIsContextual = {};
+        const widgetHasPlaceholder = {};
+        const widgetHasInitialModal = {};
         const contextualWidgetDefaultData = {};
 
         _.each(self.widgetManagers, function (manager, name) {
@@ -563,6 +573,8 @@ module.exports = {
           widgetEditors[name] = (browserData && browserData.components && browserData.components.widgetEditor) || 'AposWidgetEditor';
           widgetManagers[name] = manager.__meta.name;
           widgetIsContextual[name] = manager.options.contextual;
+          widgetHasPlaceholder[name] = manager.options.placeholder;
+          widgetHasInitialModal[name] = !widgetHasPlaceholder[name] && manager.options.initialModal !== false;
           contextualWidgetDefaultData[name] = manager.options.defaultData;
         });
 
@@ -573,6 +585,8 @@ module.exports = {
             widgetEditors
           },
           widgetIsContextual,
+          widgetHasPlaceholder,
+          widgetHasInitialModal,
           contextualWidgetDefaultData,
           widgetManagers,
           action: self.action

modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -422,17 +422,28 @@ export default {
       } else if (this.widgetIsContextual(name)) {
         return this.insert({
           widget: {
-            _id: cuid(),
             type: name,
-            ...this.contextualWidgetDefaultData(name)
+            ...this.contextualWidgetDefaultData(name),
+            ...this.widgetAreaDefaultData(name)
+          },
+          index
+        });
+      } else if (!this.widgetHasInitialModal(name)) {
+        const widgetAreaDefaultData = this.widgetAreaDefaultData(name);
+        const aposPlaceholder = this.widgetHasPlaceholder(name) && !widgetAreaDefaultData;
+        return this.insert({
+          widget: {
+            type: name,
+            ...widgetAreaDefaultData,
+            aposPlaceholder
           },
           index
         });
       } else {
         const componentName = this.widgetEditorComponent(name);
         apos.area.activeEditor = this;
         const widget = await apos.modal.execute(componentName, {
-          value: null,
+          value: this.widgetAreaDefaultData(name),
           options: this.options.widgets[name],
           type: name,
           docId: this.docId
@@ -449,6 +460,13 @@ export default {
     contextualWidgetDefaultData(type) {
       return this.moduleOptions.contextualWidgetDefaultData[type];
     },
+    widgetAreaDefaultData(type) {
+      const defaults = this.options.widgets[type]._def;
+
+      return defaults && Object.keys(defaults).length
+        ? defaults
+        : null;
+    },
     async insert({ index, widget }) {
       if (!widget._id) {
         widget._id = cuid();
@@ -478,6 +496,12 @@ export default {
     widgetIsContextual(type) {
       return this.moduleOptions.widgetIsContextual[type];
     },
+    widgetHasPlaceholder(type) {
+      return this.moduleOptions.widgetHasPlaceholder[type];
+    },
+    widgetHasInitialModal(type) {
+      return this.moduleOptions.widgetHasInitialModal[type];
+    },
     widgetEditorComponent(type) {
       return this.moduleOptions.components.widgetEditors[type];
     },

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

@@ -368,8 +368,8 @@ module.exports = {
       },
       // Returns a new instance of the doc type, with the appropriate default
       // values for each schema field.
-      newInstance() {
-        const doc = self.apos.schema.newInstance(self.schema);
+      async newInstance(req) {
+        const doc = await self.apos.schema.newInstance(req, self.schema);
         doc.type = self.name;
         return doc;
       },

modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -605,6 +605,7 @@ export default {
     async loadNewInstance () {
       this.docReady = false;
       const newInstance = await this.getNewInstance();
+      console.log('🚀 ~ file: AposDocEditor.vue ~ line 610 ~ loadNewInstance ~ newInstance', newInstance);
       this.original = newInstance;
       if (newInstance && newInstance.type !== this.docType) {
         this.docType = newInstance.type;

modules/@apostrophecms/global/index.js

@@ -82,7 +82,7 @@ module.exports = {
         const req = self.apos.task.getReq();
         const existing = await self.apos.doc.db.findOne({ slug: self.slug });
         if (!existing) {
-          const _new = self.newInstance();
+          const _new = await self.newInstance(req);
           Object.assign(_new, {
             slug: self.slug,
             type: self.name

modules/@apostrophecms/i18n/i18n/en.json

@@ -161,6 +161,7 @@
   "home": "Home",
   "image": "Image",
   "imageFile": "Image File",
+  "imagePlaceholder": "Image placeholder",
   "imageTag": "Image Tag",
   "imageTags": "Image Tags",
   "images": "Images",
@@ -263,6 +264,7 @@
   "richTextItalic": "Italic",
   "richTextLink": "Link",
   "richTextParagraph": "Paragraph (P)",
+  "richTextPlaceholder": "Start Typing Here...",
   "richTextH2": "Heading 2 (H2)",
   "richTextH3": "Heading 3 (H3)",
   "richTextH4": "Heading 4 (H4)",

modules/@apostrophecms/i18n/i18n/es.json

@@ -150,6 +150,7 @@
   "home": "Inicio",
   "image": "Imagen",
   "imageFile": "Archivo de Imagen",
+  "imagePlaceholder": "Marcador de posición de imagen",
   "imageTag": "Etiqueta de Imagen",
   "imageTags": "Etiquetas de Imágenes",
   "images": "Imágenes",
@@ -242,6 +243,7 @@
   "richTextItalic": "Cursiva",
   "richTextLink": "Liga",
   "richTextParagraph": "Párrafo (P)",
+  "richTextPlaceholder": "Comience a escribir aquí...",
   "richTextH2": "Título 2 (H2)",
   "richTextH3": "Título 3 (H3)",
   "richTextH4": "Título 4 (H4)",

modules/@apostrophecms/i18n/i18n/fr.json

@@ -148,6 +148,7 @@
   "home": "Accueil",
   "image": "Image",
   "imageFile": "Fichier d'image",
+  "imagePlaceholder": "Espace réservé pour l'image",
   "imageTag": "Tag d'image",
   "imageTags": "Tags d'image",
   "images": "Images",
@@ -249,6 +250,7 @@
   "richTextItalic": "Italique",
   "richTextLink": "Lien",
   "richTextParagraph": "Paragraphe (P)",
+  "richTextPlaceholder": "Commencez à écrire ici...",
   "richTextH2": "Titre de niveau 2 (H2)",
   "richTextH3": "Titre de niveau 3 (H3)",
   "richTextH4": "Titre de niveau 4 (H4)",

modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -150,6 +150,7 @@
   "home": "Home",
   "image": "Imagem",
   "imageFile": "Arquivo de Imagem",
+  "imagePlaceholder": "Espaço reservado para imagem",
   "imageTag": "Tag de Imagem",
   "imageTags": "Tags de Imagem",
   "images": "Imagens",
@@ -240,6 +241,7 @@
   "richTextItalic": "Itálico",
   "richTextLink": "Link",
   "richTextParagraph": "Parágrafo (P)",
+  "richTextPlaceholder": "Comece a digitar aqui...",
   "richTextH2": "Título 2 (H2)",
   "richTextH3": "Título 3 (H3)",
   "richTextH4": "Título 4 (H4)",

modules/@apostrophecms/i18n/i18n/sk.json

@@ -154,6 +154,7 @@
   "home": "Domovská stránka",
   "image": "Obrázok",
   "imageFile": "Súbor s obrázkom",
+  "imagePlaceholder": "Zástupný symbol obrázka",
   "imageTag": "Značku obrázku",
   "imageTags": "Značky obrázkov",
   "images": "Obrázky",
@@ -252,6 +253,7 @@
   "richTextItalic": "Kurzíva",
   "richTextLink": "Link",
   "richTextParagraph": "Odstavec (P)",
+  "richTextPlaceholder": "Začnite písať tu...",
   "richTextH2": "Nadpis 2 (H2)",
   "richTextH3": "Nadpis 3 (H3)",
   "richTextH4": "Nadpis 4 (H4)",

modules/@apostrophecms/image-widget/index.js

@@ -4,7 +4,10 @@ module.exports = {
     label: 'apostrophe:image',
     className: false,
     icon: 'image-icon',
-    dimensionAttrs: false
+    dimensionAttrs: false,
+    placeholder: true,
+    placeholderClass: false,
+    placeholderUrl: '/modules/@apostrophecms/image-widget/placeholder.jpg'
   },
   fields: {
     add: {

modules/@apostrophecms/image-widget/ui/src/index.scss

@@ -0,0 +1,3 @@
+.image-widget-placeholder {
+  width: 100%;
+}

modules/@apostrophecms/image-widget/views/widget.html

@@ -1,31 +1,39 @@
-{% if data.options.className %}
-  {% set className = data.options.className %}
-{% elif data.manager.options.className %}
-  {% set className = data.manager.options.className %}
-{% endif %}
+{% if data.widget.aposPlaceholder and data.manager.options.placeholderUrl %}
+  <img
+    src="{{ apos.asset.url(data.manager.options.placeholderUrl) }}"
+    alt="{{ __t('apostrophe:imagePlaceholder') }}"
+    class="image-widget-placeholder"
+  />
+{% else %}
+  {% if data.options.className %}
+    {% set className = data.options.className %}
+  {% elif data.manager.options.className %}
+    {% set className = data.manager.options.className %}
+  {% endif %}
 
-{% if data.options.dimensionAttrs %}
-  {% set dimensionAttrs = data.options.dimensionAttrs %}
-{% elif data.manager.options.dimensionAttrs  %}
-  {% set dimensionAttrs = data.manager.options.dimensionAttrs  %}
-{% endif %}
+  {% if data.options.dimensionAttrs %}
+    {% set dimensionAttrs = data.options.dimensionAttrs %}
+  {% elif data.manager.options.dimensionAttrs %}
+    {% set dimensionAttrs = data.manager.options.dimensionAttrs  %}
+  {% endif %}
 
-{% set attachment = apos.image.first(data.widget._image) %}
+  {% set attachment = apos.image.first(data.widget._image) %}
 
-{% if attachment %}
-  <img {% if className %} class="{{ className }}"{% endif %}
-    srcset="{{ apos.image.srcset(attachment) }}"
-    src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
-    alt="{{ attachment._alt or '' }}"
-    {% if dimensionAttrs %}
-      {% if attachment.width %} width="{{ apos.attachment.getWidth(attachment) }}" {% endif %}
-      {% if attachment.height %} height="{{ apos.attachment.getHeight(attachment) }}" {% endif %}
-    {% endif %}
-    {% if data.contextOptions and data.contextOptions.sizes %}
-      sizes="{{ data.contextOptions.sizes }}"
-    {% endif %}
-    {% if apos.attachment.hasFocalPoint(attachment) %}
-      style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"
-    {%- endif -%}
-  />
+  {% if attachment %}
+    <img {% if className %} class="{{ className }}"{% endif %}
+      srcset="{{ apos.image.srcset(attachment) }}"
+      src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
+      alt="{{ attachment._alt or '' }}"
+      {% if dimensionAttrs %}
+        {% if attachment.width %} width="{{ apos.attachment.getWidth(attachment) }}" {% endif %}
+        {% if attachment.height %} height="{{ apos.attachment.getHeight(attachment) }}" {% endif %}
+      {% endif %}
+      {% if data.contextOptions and data.contextOptions.sizes %}
+        sizes="{{ data.contextOptions.sizes }}"
+      {% endif %}
+      {% if apos.attachment.hasFocalPoint(attachment) %}
+        style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"
+      {%- endif -%}
+    />
+  {% endif %}
 {% endif %}

modules/@apostrophecms/module/index.js

@@ -186,6 +186,9 @@ module.exports = {
               res.status(200);
               res.send(result);
             } catch (err) {
+              console.log('------------------ ERR ----------------------');
+              console.error(err);
+              console.log('------------------ END ERR ----------------------');
               return self.routeSendError(req, err);
             }
           };

modules/@apostrophecms/page/index.js

@@ -235,7 +235,7 @@ module.exports = {
           // simply get a new page doc and return it
           const parentPage = await self.findForEditing(req, { _id: targetId })
             .permission('edit', '@apostrophecms/any-page-type').toObject();
-          const newChild = self.newChild(parentPage);
+          const newChild = self.newChild(req, parentPage);
           newChild._previewable = true;
           return newChild;
         }
@@ -252,13 +252,13 @@ module.exports = {
           }
           let page;
           if ((position === 'firstChild') || (position === 'lastChild')) {
-            page = self.newChild(targetPage);
+            page = self.newChild(req, targetPage);
           } else {
             const parentPage = targetPage._ancestors[targetPage._ancestors.length - 1];
             if (!parentPage) {
               throw self.apos.error('notfound');
             }
-            page = self.newChild(parentPage);
+            page = self.newChild(req, parentPage);
           }
           await manager.convert(req, input, page, {
             onlyPresentFields: true,
@@ -963,7 +963,7 @@ database.`);
       // such that no child page types are permitted, this method
       // returns null. Visibility settings are inherited from the
       // parent page.
-      newChild(parentPage) {
+      async newChild(req, parentPage) {
         const pageType = self.allowedChildTypes(parentPage)[0];
         if (!pageType) {
           self.apos.util.warn('No allowed Page types are specified.');
@@ -977,7 +977,7 @@ database.`);
             throw self.apos.error('error', `The page type module ${pageType} does not exist in the project.`);
           }
         }
-        const page = manager.newInstance();
+        const page = await manager.newInstance(req);
         _.extend(page, {
           title: 'New Page',
           slug: self.apos.util.addSlashIfNeeded(parentPage.slug) + 'new-page',
@@ -1883,14 +1883,14 @@ database.`);
           delete cloned._defaults;
           let ordinaryDefaults;
           if (parent) {
-            ordinaryDefaults = self.newChild(parent);
+            ordinaryDefaults = self.newChild(req, parent);
           } else {
             // The home page is being parked
             const type = item.type || parkedDefaults.type;
             if (!type) {
               throw new Error('Parked home page must have an explicit page type:\n\n' + JSON.stringify(item, null, '  '));
             }
-            ordinaryDefaults = self.apos.doc.getManager(type).newInstance();
+            ordinaryDefaults = await self.apos.doc.getManager(type).newInstance(req);
           }
           const _item = {
             ...ordinaryDefaults,