MarkdownField not working properly in List Region

[horacioj]

Let's say you have this region:

[Region(ListExpand = false)]
public IList<Whatever> Something { get; set; }

Let's say Whatever is like:

public class Whatever
{
    [Field]
    public StringField Title{ get; set; }

    [Field]
    public MarkdownField Body { get; set; }
}

Then, when trying to add a "whatever" in the manager, this happens (screenshot):

When ListExpand = true, the problem doesn't happen.

[horacioj]

demo video attached:

piranhacms-region-issue.mp4

[tidyui]

Thanks for your detailed error report. There's an issue when the new item is expanded causing all buttons in the markdown toolbar to be clicked. We will fix this in the upcoming version, but here's a workaround to fix it in your current application. First create a javascript-file in your wwwroot, we will call it custom-overrides.js here:

custom-overrides.js

$(document).ready(function () {
  console.log("overriding region component");

  Vue.component("region", {
    props: ["model", "content", "type"],
    data: function () {
      return {
        itemAdded: false
      };
    },
    methods: {
      moveItem: function (from, to) {
        this.model.items.splice(to, 0, this.model.items.splice(from, 1)[0]);
      },
      addItem: function () {
        var self = this;
        fetch(piranha.baseUrl + "manager/api/content/region/" + this.content + "/" + this.type + "/" + this.model.meta.id).then(function (response) {
          return response.json();
        }).then(function (result) {
          self.model.items.push(result);
          self.itemAdded = true;
        }).catch(function (error) {
          console.log("error:", error);
        });
      },
      removeItem: function (item) {
        this.model.items.splice(this.model.items.indexOf(item), 1);
      },
      updateTitle: function (e) {
        var self = this;

        if (self.model.meta.isCollection) {
          for (var n = 0; n < self.model.items.length; n++) {
            var item = self.model.items[n];

            for (var m = 0; m < item.fields.length; m++) {
              var field = item.fields[m];

              if (field.meta.uid === e.uid) {
                self.model.items[n].title = e.title;
                break;
              }
            }
          }
        }
      }
    },
    mounted: function () {
      if (this.model.meta.isCollection) {
        var self = this;
        sortable("#" + this.model.meta.uid, {
          handle: '.card-header a:first-child',
          items: ":not(.unsortable)"
        })[0].addEventListener("sortupdate", function (e) {
          self.moveItem(e.detail.origin.index, e.detail.destination.index);
        });
      }
    },
    updated: function () {
      if (this.model.meta.isCollection && this.itemAdded) {
        sortable("#" + this.model.meta.uid, "disable");
        sortable("#" + this.model.meta.uid, "enable");

        if (!this.model.meta.expanded) {
          $("#" + this.model.meta.uid + " .card:last-child .card-header > a").click();
        }

        this.itemAdded = false;
      }
    },
    template: "\n<div class=\"row\" v-if=\"!model.meta.isCollection\">\n    <div class=\"col-sm-12\" v-if=\"model.meta.description != null\">\n        <div class=\"alert alert-info\" v-html=\"model.meta.description\"></div>\n    </div>\n    <div class=\"form-group\" :class=\"{ 'col-sm-6': field.meta.isHalfWidth, 'col-sm-12': !field.meta.isHalfWidth }\" v-bind:key=\"'field' + field.meta.uid\" v-for=\"field in model.items[0].fields\">\n        <label v-if=\"model.items[0].fields.length > 1\">{{ field.meta.name }}</label>\n        <div v-if=\"field.meta.description != null\" v-html=\"field.meta.description\" class=\"field-description small text-muted\"></div>\n        <div class=\"field-body\">\n            <div :id=\"'tb-' + field.meta.uid\" class=\"component-toolbar\"></div>\n            <component v-if=\"field.model != null\" v-bind:is=\"field.meta.component\" v-bind:uid=\"field.meta.uid\" v-bind:meta=\"field.meta\" v-bind:toolbar=\"'tb-' + field.meta.uid\" v-bind:model=\"field.model\"></component>\n        </div>\n    </div>\n</div>\n<div v-else>\n    <div v-if=\"model.meta.description != null\">\n        <div class=\"alert alert-info\" v-html=\"model.meta.description\"></div>\n    </div>\n    <div :id=\"model.meta.uid\" class=\"accordion sortable\" :class=\"model.items.length !== 0 ? 'mb-3' : ''\">\n        <div class=\"card\" :key=\"item.uid\" v-for=\"(item) in model.items\">\n            <div class=\"card-header\">\n                <a href=\"#\" :data-toggle=\"!model.meta.expanded ? 'collapse' : false\" :data-target=\"'#body' + item.uid\">\n                    <div class=\"handle\">\n                        <i class=\"fas fa-ellipsis-v\"></i>\n                    </div>\n                    {{ item.title }}\n                </a>\n                <span class=\"actions float-right\">\n                    <a v-on:click.prevent=\"removeItem(item)\" href=\"#\" class=\"danger\"><i class=\"fas fa-trash\"></i></a>\n                </span>\n            </div>\n            <div :id=\"'body' + item.uid\" :class=\"{ 'collapse' : !model.meta.expanded }\" :data-parent=\"'#' + model.meta.uid\">\n                <div class=\"card-body\">\n                    <div class=\"row\">\n                        <div class=\"form-group\" :class=\"{ 'col-sm-6': field.meta.isHalfWidth, 'col-sm-12': !field.meta.isHalfWidth }\" v-bind:key=\"field.meta.uid\" v-for=\"field in item.fields\">\n                            <label v-if=\"item.fields.length > 1 || field.meta.id !== 'Default'\">{{ field.meta.name }}</label>\n                            <div v-if=\"field.meta.description != null\" v-html=\"field.meta.description\" class=\"field-description small text-muted\"></div>\n                            <div class=\"field-body\">\n                                <div :id=\"'tb-' + field.meta.uid\" class=\"component-toolbar\"></div>\n                                <component v-if=\"field.model != null\" v-bind:is=\"field.meta.component\" v-bind:uid=\"field.meta.uid\" v-bind:meta=\"field.meta\" v-bind:toolbar=\"'tb-' + field.meta.uid\" v-bind:model=\"field.model\" v-on:update-title=\"updateTitle($event)\"></component>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <a href=\"#\" class=\"block-add\" v-on:click.prevent=\"addItem()\">\n        <hr>\n        <i class=\"fas fa-plus-circle\"></i>\n    </a>\n    <div v-if=\"model.items.length === 0\" class=\"empty-info unsortable\">\n        <p>{{ piranha.resources.texts.emptyAddAbove }}</p>\n    </div>\n</div>\n"
  });
});

Then you register it in your Startup.cs like so:

App.Modules.Manager().Scripts.Add("~/assets/custom-overrides.js");

This will override the default component handling the regions in the manager and fix the issue.

Best regards