diff --git a/README.md b/README.md
index 460f804..17f2d8c 100644
--- a/README.md
+++ b/README.md
@@ -80,10 +80,12 @@ There is a list of options, you could pass to init: $("#editor").brickyeditor(op
 
 ### Template system
 
-In current version there are 3 type of fields you can use inside your templates.
- - Html Field - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
- - Image Field - *Div or img tag, that allows to upload image in base64 format.*
- - Embed Field - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+There are 4 base types of fields you can use inside your templates:
+ - **Html Field** - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
+ - **Image Field** - *Div or img tag, that allows to upload image in base64 format.*
+ - **Embed Field** - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+ - **Container Field** - *Container tag, that allows to put other templates inside. It's useful if you want to use layout templates.*
+
 Fields tags should be marked with attribute `data-bre-field="{ 'name' : 'caption', 'type' : 'html'}"`, with field settings inside it. 
 
 All templates should be placed inside `<div class="bre-template" data-name="Template Name"></div>`. 
@@ -102,3 +104,24 @@ If you want custom preview for your template, you could wrap preview html inside
 In this sample two editable fields - img (field type - image) and figcaption (field type = html). 
 Editor will get _templates/image-with-caption.jpg_ image as preview to render block inside tools panel.
 You could find more examples in `build/templates folder`.
+
+##Template groups
+You could use template grouping inside your template file for better semantics. Put templates inside div with class='bre-template-group' and set 'title' attribute to name the group.
+```html
+<div class="bre-template-group" title="Containers">
+    <div class="bre-template" data-name="Columns-2">
+        <div class="row">
+            <div class="col-md-6" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-6" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+        </div>
+    </div>
+
+    <div class="bre-template" data-name="Columns-3">
+        <div class="row">
+            <div class="col-md-4" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col3", "type": "container" }'></div>
+        </div>
+    </div>
+</>
+```
\ No newline at end of file
diff --git a/demo/css/jquery.brickyeditor.css b/demo/css/jquery.brickyeditor.css
index 75d9eee..78579fe 100644
--- a/demo/css/jquery.brickyeditor.css
+++ b/demo/css/jquery.brickyeditor.css
@@ -256,6 +256,13 @@
     width: 100%;
     height: 99%;
     overflow: auto; }
+    .bre-tools .bre-tools-templates .bre-template-group {
+      color: #92819F;
+      font-size: .5rem;
+      padding: .5rem .5rem 0rem .5rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      cursor: pointer; }
     .bre-tools .bre-tools-templates .bre-template {
       cursor: pointer;
       background: #fff;
@@ -270,6 +277,18 @@
         zoom: 0.2; }
       .bre-tools .bre-tools-templates .bre-template:hover {
         background: #f2f2f2; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container {
+        padding: 1rem;
+        border: 1px solid #DDDDDD;
+        border-right-width: 0px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 1rem;
+        color: #92819F; }
+        .bre-tools .bre-tools-templates .bre-template .bre-field-container::after {
+          content: '\2295'; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container:last-child {
+        border-right-width: 1px; }
     @media (min-width: 576px) and (max-width: 1023px) {
       .bre-tools .bre-tools-templates .bre-template > * {
         zoom: 0.3; } }
@@ -280,6 +299,9 @@
 .bre-tools-collapsed {
   right: -196px; }
 
+.bre-field-selected {
+  outline: dotted 1px #DDDDDD; }
+
 .bre * {
   font-family: sans-serif; }
 
diff --git a/demo/data.json b/demo/data.json
index 40debb2..983dc4a 100644
--- a/demo/data.json
+++ b/demo/data.json
@@ -1,5 +1,5 @@
 [{
-    "template": "Display Heading 1",
+    "template": "Container",
     "fields": [
         {
             "name": "text",
@@ -7,90 +7,4 @@
             "html": "Hi! This is bricky editor example."
         }
     ]
-},
-{
-    "template": "Paragraph Lead",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "Ok, you put some traditional wysiwyg to your site and give html freedom to your editors.<div>But this freedom played a cruel joke&nbsp;<span style=\"font-size: 1.25rem;\">with you and now you need to correct every article by yourself.</span></div>"
-        }
-    ]
-},
-{
-    "template": "Paragraph",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I know this situation, cause I'm very often hear something like: \"I don't how this happens, it maked it by itself\". And this poor guys are right - sometimes wysiwygs made \"this\" by themselfs. And one day I decide to correct this situation."
-        }
-    ]
-},
-{
-    "template": "Paragraph",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "If you look closely, you will see, that 99 percents of all articles in web contains some typical blocks. Escpeccialy in pro media: headers, paragraps, photos, embed fragments from social networks, or, maybe, galleries. And I started creation of my own universal WYSIWYG plugin with predifined blocks. Of cource I made some quick googling for plugins of this type, but this field is still pure and have only a few solutions. And the best one is payed and it's vendor locked.&nbsp;I'm not greedy, but I really love open source because it speeds up the evolution of the solution (you know it buy yourself, couse 99% that you come here from github ;))."
-        }
-    ]
-},
-{
-    "template": "Blockquote Reverse",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I am fond of pigs. Dogs look up to us. Cats look down on us. Pigs treat us as equals."
-        },
-        {
-            "name": "author",
-            "type": "html",
-            "html": "Winston Churchill"
-        },
-        {
-            "name": "author",
-            "type": "html",
-            "html": "This quote is here, because I need to show, what brickyeditor can. And, yes, I', civ fan."
-        }
-    ]
-},
-{
-    "template": "Image with caption",
-    "fields": [
-        {
-            "name": "image",
-            "type": "image",
-            "src": "assets/photo.jpg"
-        },
-        {
-            "name": "caption",
-            "type": "html",
-            "html": "I don't love to write a lot. So I put here my cats photo, his name is Shprotski."
-        }
-    ]
-},
-{
-    "template": "Paragraph Lead",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I think I must write more marketing words here, but sorry, I don't have no time for that shit. But I can instagram embed photo, I like it."
-        }
-    ]
-},
-{
-    "template": "Embed",
-    "fields": [
-        {
-            "name": "embed",
-            "type": "embed",
-            "url": "http://instagr.am/p/BYJAes_HEI0/"
-        }
-    ]
-}
-]
\ No newline at end of file
+}]
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index d13d453..791f4a9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,17 +12,15 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
   <script src="js/jquery.brickyeditor.js"></script>
+  <script src="js/locales/jquery.brickyeditor.ru.js"></script>
   <script>
     $(function () {
       $("#editor").brickyeditor({
         ignoreHtml: true,
         blocksUrl: 'data.json',
         templatesUrl: 'templates.html',
-        onBlockAdd: function(data) {
-          console.log('BrickyEditor block added.');
-        },
-        onBlockUpdate: function(data) {
-          console.log('BrickyEditor block updated. Property: ' + data.property + ', New value:' + data.newValue);
+        onChange: function(data) {
+          console.log(data.html);
         }
       });
     });
diff --git a/demo/js/jquery.brickyeditor.js b/demo/js/jquery.brickyeditor.js
index 6f067eb..456e3ee 100644
--- a/demo/js/jquery.brickyeditor.js
+++ b/demo/js/jquery.brickyeditor.js
@@ -43,6 +43,135 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var BrickyEditor;
+(function (BrickyEditor) {
+    var BlocksContainer = (function () {
+        function BlocksContainer($element, onAddBlock, onDeleteBlock, onSelectBlock, onDeselectBlock, onMoveBlock, onUpdateBlock, usePlaceholder) {
+            if (usePlaceholder === void 0) { usePlaceholder = false; }
+            this.$element = $element;
+            this.onAddBlock = onAddBlock;
+            this.onDeleteBlock = onDeleteBlock;
+            this.onSelectBlock = onSelectBlock;
+            this.onDeselectBlock = onDeselectBlock;
+            this.onMoveBlock = onMoveBlock;
+            this.onUpdateBlock = onUpdateBlock;
+            this.usePlaceholder = usePlaceholder;
+            this.blocks = [];
+            this.isContainer = true;
+            this.togglePlaceholderIfNeed();
+        }
+        BlocksContainer.prototype.getData = function (ignoreHtml) {
+            var blocksData = [];
+            this.blocks.forEach(function (block) {
+                blocksData.push(block.getData(ignoreHtml));
+            });
+            return blocksData;
+        };
+        BlocksContainer.prototype.getHtml = function () {
+            var blocksHtml = [];
+            this.blocks.forEach(function (block) {
+                blocksHtml.push(block.getHtml(true));
+            });
+            var blocksHtmlJoined = blocksHtml.join('\n');
+            var $el = this.$element.clone(false, false).html(blocksHtmlJoined).wrap('<div></div>');
+            var html = $('<div></div>').append($el).html();
+            return html;
+        };
+        BlocksContainer.prototype.addBlock = function (template, data, idx, select) {
+            var _this = this;
+            if (select === void 0) { select = true; }
+            var block = new BrickyEditor.Block(template, false, data, function (block) { return _this.deleteBlock(block); }, function (block) { return _this.selectBlock(block); }, function (block) { return _this.deselectBlock(block); }, function (block) { return _this.copyBlock(block); }, function (block, offset) { return _this.moveBlock(block, offset); }, this.onUpdateBlock);
+            this.insertBlock(block, idx);
+            if (select) {
+                block.select();
+                block.scrollTo();
+            }
+        };
+        BlocksContainer.prototype.insertBlock = function (block, idx) {
+            idx = idx || this.blocks.length;
+            if (this.selectedBlock) {
+                idx = this.blocks.indexOf(this.selectedBlock) + 1;
+            }
+            this.blocks.splice(idx, 0, block);
+            if (idx == 0) {
+                this.$element.append(block.ui.$editor);
+            }
+            else {
+                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
+            }
+            this.onAddBlock(block, idx);
+            block.select(null);
+            this.togglePlaceholderIfNeed();
+        };
+        BlocksContainer.prototype.deleteBlock = function (block) {
+            var idx = this.blocks.indexOf(block);
+            this.blocks.splice(idx, 1);
+            block = null;
+            if (idx < this.blocks.length) {
+                this.blocks[idx].select();
+            }
+            else if (this.blocks.length > 0) {
+                this.blocks[idx - 1].select();
+            }
+            else {
+                this.selectedBlock = null;
+            }
+            this.onDeleteBlock(block, idx);
+            this.togglePlaceholderIfNeed();
+        };
+        BlocksContainer.prototype.moveBlock = function (block, offset) {
+            var idx = this.blocks.indexOf(block);
+            var new_idx = idx + offset;
+            if (new_idx >= this.blocks.length || new_idx < 0)
+                return;
+            var $anchorBlock = this.blocks[new_idx].ui.$editor;
+            if (offset > 0) {
+                $anchorBlock.after(block.ui.$editor);
+            }
+            else if (offset < 0) {
+                $anchorBlock.before(block.ui.$editor);
+            }
+            this.blocks.splice(idx, 1);
+            this.blocks.splice(new_idx, 0, block);
+            this.onMoveBlock(block, idx, new_idx);
+            block.scrollTo();
+        };
+        BlocksContainer.prototype.copyBlock = function (block) {
+            var idx = this.blocks.indexOf(block) + 1;
+            var copy = this.addBlock(block.template, block.getData().fields, idx, true);
+        };
+        BlocksContainer.prototype.selectBlock = function (block) {
+            if (this.selectedBlock === block)
+                return;
+            if (this.selectedBlock) {
+                this.selectedBlock.deselect();
+            }
+            this.selectedBlock = block;
+            this.onSelectBlock(block);
+        };
+        BlocksContainer.prototype.deselectBlock = function (block) {
+            this.selectedBlock = null;
+            this.onDeselectBlock(block);
+        };
+        BlocksContainer.prototype.togglePlaceholderIfNeed = function () {
+            if (!this.usePlaceholder) {
+                return;
+            }
+            if (this.blocks.length === 0) {
+                if (!this.$placeholder) {
+                    this.$placeholder = $('<i data-bre-placeholder="true">Click here to select this container...</i>');
+                    this.$element.append(this.$placeholder);
+                }
+            }
+            else if (this.$placeholder) {
+                this.$placeholder.remove();
+                this.$placeholder = null;
+            }
+        };
+        return BlocksContainer;
+    }());
+    BrickyEditor.BlocksContainer = BlocksContainer;
+})(BrickyEditor || (BrickyEditor = {}));
 String.prototype.breContains = function (part) {
     return this.indexOf(part) >= 0;
 };
@@ -120,24 +249,39 @@ var BrickyEditor;
 (function (BrickyEditor) {
     var Editor = (function () {
         function Editor($editor, options) {
-            this.blocks = [];
-            this.compactTools = null;
             BrickyEditor.Fields.BaseField.registerCommonFields();
             this.$editor = $editor;
-            this.$editor.addClass('bre-editor');
+            this.$editor.addClass(BrickyEditor.Selectors.classEditor);
             this.options = new BrickyEditor.EditorOptions(options);
+            this.container = this.createContainer();
             Editor.UI = new BrickyEditor.UI(this);
         }
-        Object.defineProperty(Editor.prototype, "selectedBlockIndex", {
-            get: function () {
-                if (this.selectedBlock) {
-                    return this.blocks.indexOf(this.selectedBlock);
+        Editor.prototype.createContainer = function () {
+            var _this = this;
+            var onAdd = function (block, idx) {
+                if (_this.isLoaded) {
+                    _this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
+                    _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
                 }
-                return -1;
-            },
-            enumerable: true,
-            configurable: true
-        });
+            };
+            var onDelete = function (block, idx) {
+                _this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            };
+            var onUpdate = function (block, property, oldValue, newValue) {
+                _this.trigger(BrickyEditor.Events.onBlockUpdate, {
+                    block: block,
+                    property: property,
+                    oldValue: oldValue,
+                    newValue: newValue
+                });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            };
+            return new BrickyEditor.BlocksContainer(this.$editor, onAdd, onDelete, function (block) { _this.trigger(BrickyEditor.Events.onBlockSelect, { block: block }); }, function (block) { _this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block }); }, function (block, from, to) {
+                _this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: from, to: to });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            }, onUpdate);
+        };
         Editor.prototype.initAsync = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var templates, blocks;
@@ -145,7 +289,7 @@ var BrickyEditor;
                     switch (_a.label) {
                         case 0:
                             Editor.UI.toggleToolsLoader(true);
-                            return [4, BrickyEditor.Services.TemplateService.loadTemplatesAsync(this)];
+                            return [4, BrickyEditor.Services.TemplateService.loadTemplatesAsync(this.options.templatesUrl, this.$editor, this.onError)];
                         case 1:
                             templates = _a.sent();
                             Editor.UI.toggleToolsLoader(false);
@@ -183,7 +327,7 @@ var BrickyEditor;
                                         return [3, 4];
                                     case 3:
                                         error_1 = _a.sent();
-                                        console.log('Blocks file not found.');
+                                        this.onError(BrickyEditor.EditorStrings.errorBlocksFileNotFound(url));
                                         reject(error_1);
                                         return [3, 4];
                                     case 4: return [3, 6];
@@ -225,19 +369,10 @@ var BrickyEditor;
             });
         };
         Editor.prototype.getData = function () {
-            var _this = this;
-            var blocksData = [];
-            this.blocks.forEach(function (block) {
-                blocksData.push(block.getData(_this.options.ignoreHtml));
-            });
-            return blocksData;
+            return this.container.getData(this.options.ignoreHtml);
         };
         Editor.prototype.getHtml = function () {
-            var blocksData = [];
-            this.blocks.forEach(function (block) {
-                blocksData.push(block.getHtml(true));
-            });
-            return blocksData.join('\n');
+            return this.container.getHtml();
         };
         Editor.prototype.loadBlocks = function (blocks) {
             var _this = this;
@@ -245,100 +380,31 @@ var BrickyEditor;
                 blocks.forEach(function (block) {
                     var template = BrickyEditor.Services.TemplateService.getTemplate(block.template);
                     if (template) {
-                        _this.addBlock(template, block.fields, null, false);
+                        _this.container.addBlock(template, block.fields, null, false);
                     }
                     else {
-                        console.log("Template " + block.template + " not found.");
+                        var message = BrickyEditor.EditorStrings.errorBlockTemplateNotFound(block.template);
+                        _this.onError(message);
                     }
                 });
             }
         };
-        Editor.prototype.addBlock = function (template, data, idx, select) {
-            var _this = this;
-            if (select === void 0) { select = true; }
-            var onUpdate = function (block, property, oldValue, newValue) {
-                _this.trigger(BrickyEditor.Events.onBlockUpdate, {
-                    block: block,
-                    property: property,
-                    oldValue: oldValue,
-                    newValue: newValue
-                });
-                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
-            };
-            var block = new BrickyEditor.Block(template, false, data, function (block) { return _this.deleteBlock(block); }, function (block) { return _this.selectBlock(block); }, function (block) { return _this.deselectBlock(block); }, function (block) { return _this.copyBlock(block); }, function (block, offset) { return _this.moveBlock(block, offset); }, onUpdate);
-            this.insertBlock(block, idx);
-            if (select) {
-                block.select();
-                block.scrollTo();
-            }
-        };
-        Editor.prototype.insertBlock = function (block, idx) {
-            idx = idx || this.blocks.length;
-            if (this.selectedBlock) {
-                idx = this.selectedBlockIndex + 1;
-            }
-            this.blocks.splice(idx, 0, block);
-            if (idx == 0) {
-                this.$editor.append(block.ui.$editor);
-            }
-            else {
-                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
-            }
-            if (this.isLoaded) {
-                this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
-                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            }
-        };
-        Editor.prototype.deleteBlock = function (block) {
-            var idx = this.blocks.indexOf(block);
-            this.blocks.splice(idx, 1);
-            block = null;
-            if (idx < this.blocks.length) {
-                this.blocks[idx].select();
-            }
-            else if (this.blocks.length > 0) {
-                this.blocks[idx - 1].select();
-            }
-            else {
-                this.selectedBlock = null;
-            }
-            this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+        Editor.prototype.addBlock = function (template) {
+            var container = this.getContainer(this.container);
+            container.addBlock(template, null, null, true);
         };
-        Editor.prototype.moveBlock = function (block, offset) {
-            var idx = this.blocks.indexOf(block);
-            var new_idx = idx + offset;
-            if (new_idx >= this.blocks.length || new_idx < 0)
-                return;
-            var $anchorBlock = this.blocks[new_idx].ui.$editor;
-            if (offset > 0) {
-                $anchorBlock.after(block.ui.$editor);
-            }
-            else if (offset < 0) {
-                $anchorBlock.before(block.ui.$editor);
-            }
-            this.blocks.splice(idx, 1);
-            this.blocks.splice(new_idx, 0, block);
-            this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: idx, to: new_idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            block.scrollTo();
-        };
-        Editor.prototype.copyBlock = function (block) {
-            var idx = this.blocks.indexOf(block) + 1;
-            var copy = this.addBlock(block.template, block.getData().fields, idx, true);
-        };
-        Editor.prototype.selectBlock = function (block) {
-            if (this.selectedBlock === block)
-                return;
-            if (this.selectedBlock) {
-                this.selectedBlock.deselect();
+        Editor.prototype.getContainer = function (container) {
+            if (container.selectedBlock && container.selectedBlock.isContainer()) {
+                var field = container.selectedBlock.selectedField;
+                if (field) {
+                    return this.getContainer(field.container);
+                }
             }
-            this.selectedBlock = block;
-            this.trigger(BrickyEditor.Events.onBlockSelect, { block: block });
+            return container;
         };
-        Editor.prototype.deselectBlock = function (block) {
-            this.selectedBlock = null;
-            this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block });
+        Editor.prototype.onError = function (message, code) {
+            if (code === void 0) { code = 0; }
+            this.options.onError({ message: message, code: code });
         };
         Editor.prototype.trigger = function (event, data) {
             var editor = this;
@@ -359,6 +425,9 @@ var BrickyEditor;
     var EditorOptions = (function () {
         function EditorOptions(options) {
             this.templatesUrl = "templates/bootstrap4.html";
+            this.onError = function (data) {
+                console.log(data.message);
+            };
             this.compactTools = null;
             this.compactToolsWidth = 768;
             this.ignoreHtml = null;
@@ -372,6 +441,7 @@ var BrickyEditor;
             this.onBlockSelect = options.onBlockSelect;
             this.onBlockDeselect = options.onBlockDeselect;
             this.onBlockUpdate = options.onBlockUpdate;
+            this.onError = options.onError || this.onError;
             this.blocksUrl = options.blocksUrl || null;
             this.blocks = options.blocks || null;
             this.compactTools = options.compactTools;
@@ -385,6 +455,39 @@ var BrickyEditor;
     BrickyEditor.EditorOptions = EditorOptions;
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var EditorStrings = (function () {
+        function EditorStrings() {
+        }
+        EditorStrings.errorBlocksFileNotFound = function (url) { return "Blocks file not found. Requested file: " + url + "."; };
+        EditorStrings.errorTemplatesFileNotFound = function (url) { return "Templates file not found. Requested file: " + url + "."; };
+        EditorStrings.errorBlockTemplateNotFound = function (templateName) { return "Template \"" + templateName + "\" not found."; };
+        EditorStrings.embedFieldLinkTitle = 'Link to embed media';
+        EditorStrings.embedFieldLinkPlaceholder = 'Link to instagram, youtube and etc.';
+        EditorStrings.imageFieldLinkTitle = 'Image link';
+        EditorStrings.imageFieldLinkPlaceholder = 'http://url-to-image.png';
+        EditorStrings.imageFieldUploadTitle = 'or Upload a file';
+        EditorStrings.imageFieldUploadButton = 'Select file';
+        EditorStrings.imageFieldAltTitle = 'Alt';
+        EditorStrings.imageFieldAltPlaceholder = 'Image \'alt\' attribute value';
+        EditorStrings.htmlEditorLinkUrlTitle = 'Url';
+        EditorStrings.htmlEditorLinkUrlPlaceholder = 'http://put-your-link.here';
+        EditorStrings.htmlEditorLinkTitleTitle = 'Title';
+        EditorStrings.htmlEditorLinkTitlePlaceholder = 'Title attribute for link';
+        EditorStrings.htmlEditorLinkTargetTitle = 'Target';
+        EditorStrings.htmlEditorLinkTargetBlank = 'Blank';
+        EditorStrings.htmlEditorLinkTargetSelf = 'Self';
+        EditorStrings.htmlEditorLinkTargetParent = 'Parent';
+        EditorStrings.htmlEditorLinkTargetTop = 'Top';
+        EditorStrings.buttonClose = 'close';
+        EditorStrings.buttonOk = 'Ok';
+        EditorStrings.buttonCancel = 'Cancel';
+        EditorStrings.defaultTemplatesGroupName = 'Other templates';
+        return EditorStrings;
+    }());
+    BrickyEditor.EditorStrings = EditorStrings;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var Events = (function () {
         function Events() {
@@ -409,32 +512,6 @@ var BrickyEditor;
     };
 }(jQuery));
 var BrickyEditor;
-(function (BrickyEditor) {
-    var Template = (function () {
-        function Template(el) {
-            var previewSelector = '.bre-template-preview';
-            var $template = $(el);
-            var data = $template.data();
-            this.name = data.name;
-            this.category = data.cactegory || [];
-            this.$html = $template.contents().not(previewSelector);
-            this.$preview = $(previewSelector, $template).contents();
-            if (!this.$preview.length) {
-                var block = new BrickyEditor.Block(this, true);
-                var blockEl = block.getHtml(true);
-                this.$preview = $(blockEl);
-            }
-        }
-        Template.prototype.getPreview = function () {
-            var $template = $("<div class='bre-template'></div>");
-            $template.append(this.$preview);
-            return $template;
-        };
-        return Template;
-    }());
-    BrickyEditor.Template = Template;
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
 (function (BrickyEditor) {
     var Block = (function () {
         function Block(template, preview, data, onDelete, onSelect, onDeselect, onCopy, onMove, onUpdate) {
@@ -454,6 +531,11 @@ var BrickyEditor;
             var actions = this.getActions();
             this.ui = new BrickyEditor.BlockUI($block, preview, actions, function () { return _this.select(); });
         }
+        Block.prototype.isContainer = function () {
+            if (!this.selectedField)
+                return false;
+            return this.selectedField instanceof BrickyEditor.Fields.ContainerField;
+        };
         Block.prototype.bindFields = function ($block, data) {
             var _this = this;
             var block = this;
@@ -466,8 +548,11 @@ var BrickyEditor;
                         _this.onUpdate(block, property, oldValue, newValue);
                     }
                 };
+                var onSelect = function (field) {
+                    block.select(field);
+                };
                 var $field = $(elem);
-                var field = BrickyEditor.Fields.BaseField.createField($field, data, function () { return block.select(); }, onUpdate);
+                var field = BrickyEditor.Fields.BaseField.createField($field, data, onSelect, onUpdate);
                 _this.fields.push(field);
             });
         };
@@ -492,11 +577,24 @@ var BrickyEditor;
         Block.prototype.clone = function () {
             this.onCopy(this);
         };
-        Block.prototype.select = function () {
+        Block.prototype.select = function (field) {
+            if (field === this.selectedField)
+                return;
+            if (field === null) {
+                field = this.fields[0];
+            }
+            if (this.selectedField) {
+                this.selectedField.deselect();
+            }
+            this.selectedField = field;
             this.ui.toggleSelection(true);
             this.onSelect(this);
         };
         Block.prototype.deselect = function () {
+            this.selectedField = null;
+            this.fields.forEach(function (f) {
+                f.deselect();
+            });
             this.ui.toggleSelection(false);
             this.onDeselect(this);
         };
@@ -518,19 +616,26 @@ var BrickyEditor;
             }
             return data;
         };
-        Block.prototype.getHtml = function (trim, skipAttrRemoving) {
-            if (skipAttrRemoving === void 0) { skipAttrRemoving = false; }
-            var $html = this.ui.$block.clone(false, false)
+        Block.prototype.getHtml = function (trim) {
+            var $html = this.template.$html.clone(false, false)
                 .wrap('<div></div>')
                 .parent();
-            $('.bre-temp-container', $html).each(function (idx, el) {
-                var $el = $(el);
-                $el.replaceWith($el.children());
+            var fieldsHtml = {};
+            this.fields.forEach(function (field) {
+                var name = field.name || field.data.name;
+                fieldsHtml[name] = field.getEl();
             });
-            ['contenteditable', 'data-bre-field'].forEach(function (attr) {
-                $("[" + attr + "]", $html).each(function (idx, el) {
-                    el.removeAttribute(attr);
-                });
+            $html
+                .find(BrickyEditor.Selectors.selectorField)
+                .addBack(BrickyEditor.Selectors.selectorField)
+                .each(function (idx, elem) {
+                var fieldData = $(elem).data().breField;
+                if (typeof fieldData === 'string') {
+                    fieldData = JSON.parse(fieldData.replace(/'/g, '"'));
+                }
+                var name = fieldData.name;
+                var $field = fieldsHtml[name];
+                $(elem).replaceWith($field);
             });
             return trim ? $html.html().breTotalTrim() : $html.html();
         };
@@ -583,7 +688,11 @@ var BrickyEditor;
         BlockUI.prototype.buildButton = function (action) {
             var $el = $("<button type=\"button\" class=\"bre-btn\"><i class=\"fa fa-" + action.icon + "\"></i></button>");
             if (action.action) {
-                $el.on('click', function () { return action.action(); });
+                $el.on('click', function (ev) {
+                    action.action();
+                    ev.stopPropagation();
+                    return false;
+                });
             }
             return $el;
         };
@@ -632,6 +741,7 @@ var BrickyEditor;
                 Fields.HtmlField.registerField();
                 Fields.ImageField.registerField();
                 Fields.EmbedField.registerField();
+                Fields.ContainerField.registerField();
             };
             ;
             BaseField.registerField = function () {
@@ -679,8 +789,17 @@ var BrickyEditor;
                 }
             };
             BaseField.prototype.bind = function () { };
-            BaseField.prototype.selectBlock = function () {
-                this.onSelect();
+            BaseField.prototype.select = function () {
+                this.$field.addClass(BrickyEditor.Selectors.selectorFieldSelected);
+                this.onSelect(this);
+            };
+            BaseField.prototype.deselect = function () {
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            };
+            BaseField.prototype.getEl = function () {
+                var $el = this.$field.clone(false);
+                $el.removeAttr(BrickyEditor.Selectors.attrField);
+                return $el;
             };
             BaseField.prototype.updateProperty = function (prop, value, fireUpdate) {
                 if (fireUpdate === void 0) { fireUpdate = true; }
@@ -699,6 +818,47 @@ var BrickyEditor;
     })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var Fields;
+    (function (Fields) {
+        var ContainerField = (function (_super) {
+            __extends(ContainerField, _super);
+            function ContainerField() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            ContainerField.prototype.bind = function () {
+                var _this = this;
+                var field = this;
+                var $field = this.$field;
+                this.container = new BrickyEditor.BlocksContainer($field, function (block) {
+                    field.updateBlocks();
+                }, function (block) { field.updateBlocks(); }, function (block) { _this.select(); }, function (block) { }, function (block) { field.updateBlocks(); }, function (block) { field.updateBlocks(); }, true);
+                $field.addClass(BrickyEditor.Selectors.selectorFieldContainer);
+                $field
+                    .on('click', function (ev) {
+                    field.select();
+                    ev.stopPropagation();
+                    return false;
+                });
+            };
+            ContainerField.prototype.updateBlocks = function () {
+                this.updateProperty('blocks', this.container.getData(true), true);
+                this.updateProperty('html', this.container.getHtml(), true);
+            };
+            ContainerField.prototype.deselect = function () {
+                this.container.blocks.forEach(function (b) { return b.deselect(); });
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            };
+            ContainerField.prototype.getEl = function () {
+                var html = this.container.getHtml();
+                return $(html);
+            };
+            return ContainerField;
+        }(Fields.BaseField));
+        Fields.ContainerField = ContainerField;
+    })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var Fields;
     (function (Fields) {
@@ -714,10 +874,9 @@ var BrickyEditor;
             };
             Object.defineProperty(EmbedField.prototype, "settings", {
                 get: function () {
+                    var _this = this;
                     return function (field) {
-                        var url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                        field.setUrl(url);
-                        field.loadMedia(true);
+                        _this.showEmbedLoaderAsync(field);
                     };
                 },
                 enumerable: true,
@@ -728,20 +887,38 @@ var BrickyEditor;
                 var field = this;
                 var $field = this.$field;
                 $field.on('click', function () { return __awaiter(_this, void 0, void 0, function () {
-                    var url;
+                    return __generator(this, function (_a) {
+                        this.showEmbedLoaderAsync(field);
+                        return [2];
+                    });
+                }); });
+                field.loadMedia(false);
+            };
+            EmbedField.prototype.showEmbedLoaderAsync = function (field) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var fields, url;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
-                            case 0:
-                                url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
+                            case 0: return [4, BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams())];
+                            case 1:
+                                fields = _a.sent();
+                                if (!(fields != null)) return [3, 3];
+                                url = fields.getValue('url');
+                                if (!url) return [3, 3];
                                 field.setUrl(url);
                                 return [4, field.loadMedia(true)];
-                            case 1:
+                            case 2:
                                 _a.sent();
-                                return [2];
+                                _a.label = 3;
+                            case 3: return [2];
                         }
                     });
-                }); });
-                field.loadMedia(false);
+                });
+            };
+            EmbedField.prototype.getPromptParams = function () {
+                return [
+                    new BrickyEditor.Prompt.PromptParameter('url', BrickyEditor.EditorStrings.embedFieldLinkTitle, this.data.url || 'http://instagr.am/p/BO9VX2Vj4fF/', BrickyEditor.EditorStrings.embedFieldLinkPlaceholder)
+                ];
             };
             EmbedField.prototype.loadMedia = function (fireUpdate) {
                 return __awaiter(this, void 0, void 0, function () {
@@ -774,7 +951,7 @@ var BrickyEditor;
                                 field.$field.removeAttr('class');
                                 field.$field.removeAttr('style');
                                 field.$field.append($embed);
-                                field.selectBlock();
+                                field.select();
                                 return [2];
                         }
                     });
@@ -805,8 +982,8 @@ var BrickyEditor;
                 var _this = this;
                 var field = this;
                 var $field = this.$field;
-                if (!$field.is('[contenteditable]')) {
-                    $field.attr('contenteditable', 'true');
+                if (!$field.is(BrickyEditor.Selectors.selectorContentEditable)) {
+                    $field.attr(BrickyEditor.Selectors.attrContentEditable, 'true');
                 }
                 var html = this.data.html || this.$field.html();
                 this.setHtml(html, false);
@@ -825,7 +1002,7 @@ var BrickyEditor;
                     document.execCommand("insertHTML", false, text);
                 })
                     .on('click', function (ev) {
-                    field.selectBlock();
+                    field.select();
                     ev.stopPropagation();
                     return false;
                 });
@@ -838,6 +1015,11 @@ var BrickyEditor;
                 }
                 this.updateProperty('html', value, fireUpdate);
             };
+            HtmlField.prototype.getEl = function () {
+                var $el = _super.prototype.getEl.call(this);
+                $el.removeAttr(BrickyEditor.Selectors.attrContentEditable);
+                return $el;
+            };
             return HtmlField;
         }(Fields.BaseField));
         Fields.HtmlField = HtmlField;
@@ -865,19 +1047,21 @@ var BrickyEditor;
                             case 0: return [4, BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams())];
                             case 1:
                                 fields = _a.sent();
-                                file = fields.getValue('file');
-                                src = fields.getValue('src');
-                                if (file) {
-                                    field.setFile(file);
-                                    field.setSrc(null);
-                                }
-                                else if (src) {
-                                    field.setSrc(src);
-                                    field.setFile(null);
+                                if (fields != null) {
+                                    file = fields.getValue('file');
+                                    src = fields.getValue('src');
+                                    if (file) {
+                                        field.setFile(file);
+                                        field.setSrc(null);
+                                    }
+                                    else if (src) {
+                                        field.setSrc(src);
+                                        field.setFile(null);
+                                    }
+                                    alt = fields.getValue('alt');
+                                    field.setAlt(alt);
                                 }
-                                alt = fields.getValue('alt');
-                                field.setAlt(alt);
-                                field.selectBlock();
+                                field.select();
                                 return [2];
                         }
                     });
@@ -885,9 +1069,9 @@ var BrickyEditor;
             };
             ImageField.prototype.getPromptParams = function () {
                 return [
-                    new BrickyEditor.Prompt.PromptParameter('src', 'Image Link', this.data.url, 'image url'),
-                    new BrickyEditor.Prompt.PromptParameterImage('file', 'or Upload file', this.data.file, 'select file'),
-                    new BrickyEditor.Prompt.PromptParameter('alt', 'Alt', this.data.alt, 'alt attribute value '),
+                    new BrickyEditor.Prompt.PromptParameter('src', BrickyEditor.EditorStrings.imageFieldLinkTitle, this.data.url, BrickyEditor.EditorStrings.imageFieldLinkPlaceholder),
+                    new BrickyEditor.Prompt.PromptParameterImage('file', BrickyEditor.EditorStrings.imageFieldUploadTitle, this.data.file, BrickyEditor.EditorStrings.imageFieldUploadButton),
+                    new BrickyEditor.Prompt.PromptParameter('alt', BrickyEditor.EditorStrings.imageFieldAltTitle, this.data.alt, BrickyEditor.EditorStrings.imageFieldAltPlaceholder),
                 ];
             };
             ImageField.prototype.setSrc = function (src, fireUpdate) {
@@ -993,7 +1177,7 @@ var BrickyEditor;
             PromptParameterImage.prototype.getEditor = function () {
                 var field = this;
                 var img = this.value && this.value.fileContent ? this.value.fileContent : "";
-                var $editor = $("\n                <div class='bre-image-input'>\n                    <label for=\"" + this.key + "\">\n                        Select file...\n                    </label>                        \n                    <img src=\"" + img + "\"/>                    \n                    <input type=\"file\" id=\"" + this.key + "\" class=\"bre-input\" placeholder=\"" + this.placeholder + "\">\n                </div>\n                <small class='bre-image-input-filename'></small>");
+                var $editor = $("\n                <div class='bre-image-input'>\n                    <label for=\"" + this.key + "\">\n                        " + this.placeholder + "\n                    </label>                        \n                    <img src=\"" + img + "\"/>                    \n                    <input type=\"file\" id=\"" + this.key + "\" class=\"bre-input\" placeholder=\"" + this.placeholder + "\">\n                </div>\n                <small class='bre-image-input-filename'></small>");
                 var $file = $('input', $editor);
                 var $filePreview = $('img', $editor);
                 var $fileName = $('.bre-image-input-filename', $editor);
@@ -1110,6 +1294,173 @@ var BrickyEditor;
     })(Prompt = BrickyEditor.Prompt || (BrickyEditor.Prompt = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var Services;
+    (function (Services) {
+        var EmbedService = (function () {
+            function EmbedService() {
+            }
+            EmbedService.getEmbedAsync = function (embedUrl) {
+                var _this = this;
+                var url = "https://noembed.com/embed?url=" + embedUrl;
+                return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                    var params, data, err_1;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                params = { url: url, type: "get", dataType: "jsonp" };
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, , 4]);
+                                return [4, $.ajax(params)];
+                            case 2:
+                                data = _a.sent();
+                                resolve(data);
+                                return [3, 4];
+                            case 3:
+                                err_1 = _a.sent();
+                                reject(err_1);
+                                return [3, 4];
+                            case 4: return [2];
+                        }
+                    });
+                }); });
+            };
+            EmbedService.processEmbed = function (provider) {
+                switch (provider) {
+                    case EmbedService.Instagram:
+                        if (instgrm) {
+                            instgrm.Embeds.process();
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            };
+            EmbedService.Instagram = 'Instagram';
+            return EmbedService;
+        }());
+        Services.EmbedService = EmbedService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var Services;
+    (function (Services) {
+        var TemplateService = (function () {
+            function TemplateService() {
+            }
+            TemplateService.loadTemplatesAsync = function (url, $editor, onError) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    var templates;
+                    return __generator(this, function (_a) {
+                        this.templates = [];
+                        templates = this.templates;
+                        return [2, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                                var _this = this;
+                                var data, $style, $data, $groups, templates_1, defaultGroupName, group, err_2;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            _a.trys.push([0, 2, , 3]);
+                                            return [4, $.get(url)];
+                                        case 1:
+                                            data = _a.sent();
+                                            $style = $(data).filter('style');
+                                            if ($style && $style.length > 0) {
+                                                $editor.prepend($style);
+                                            }
+                                            $data = $("<div>" + data + "</div>");
+                                            $groups = $(BrickyEditor.Selectors.selectorTemplateGroup, $data);
+                                            $groups.each(function (idx, el) {
+                                                var $group = $(el);
+                                                var templates = _this.getTemplates($group);
+                                                _this.templates.push(new BrickyEditor.TemplateGroup($group.attr('title'), templates));
+                                                $group.remove();
+                                            });
+                                            templates_1 = this.getTemplates($data);
+                                            defaultGroupName = this.templates.length > 0 ? BrickyEditor.EditorStrings.defaultTemplatesGroupName : '';
+                                            group = new BrickyEditor.TemplateGroup(defaultGroupName, templates_1);
+                                            this.templates.push(group);
+                                            resolve(this.templates);
+                                            return [3, 3];
+                                        case 2:
+                                            err_2 = _a.sent();
+                                            onError(BrickyEditor.EditorStrings.errorTemplatesFileNotFound(url));
+                                            reject(err_2);
+                                            return [3, 3];
+                                        case 3: return [2];
+                                    }
+                                });
+                            }); })];
+                    });
+                });
+            };
+            TemplateService.getTemplates = function ($el) {
+                var templates = [];
+                var $templates = $(BrickyEditor.Selectors.selectorTemplate, $el);
+                $templates.each(function (idx, t) {
+                    var template = new BrickyEditor.Template(t);
+                    templates.push(template);
+                });
+                return templates;
+            };
+            TemplateService.getTemplate = function (templateName) {
+                for (var gi = 0; gi < this.templates.length; gi++) {
+                    var group = this.templates[gi];
+                    for (var ti = 0; ti < group.templates.length; ti++) {
+                        var template = group.templates[ti];
+                        if (template.name.breEqualsInvariant(templateName)) {
+                            return template;
+                        }
+                    }
+                }
+                return null;
+            };
+            return TemplateService;
+        }());
+        Services.TemplateService = TemplateService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var Template = (function () {
+        function Template(el) {
+            var previewSelector = BrickyEditor.Selectors.selectorTemplatePreview;
+            var $template = $(el);
+            var data = $template.data();
+            this.name = data.name;
+            this.category = data.cactegory || [];
+            this.$html = $template.contents().not(previewSelector);
+            this.$preview = $(previewSelector, $template).contents();
+            if (!this.$preview.length) {
+                var block = new BrickyEditor.Block(this, true);
+                var blockEl = block.getHtml(true);
+                this.$preview = $(blockEl);
+            }
+        }
+        Template.prototype.getPreview = function () {
+            var $template = $("<div class='" + BrickyEditor.Selectors.classTemplate + "'></div>");
+            $template.append(this.$preview);
+            return $template;
+        };
+        return Template;
+    }());
+    BrickyEditor.Template = Template;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var TemplateGroup = (function () {
+        function TemplateGroup(name, templates) {
+            this.name = name;
+            this.templates = templates;
+        }
+        return TemplateGroup;
+    }());
+    BrickyEditor.TemplateGroup = TemplateGroup;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var HtmlTools = (function () {
         function HtmlTools(editor) {
@@ -1231,14 +1582,14 @@ var BrickyEditor;
                 target = a.attr('target');
             }
             return [
-                new BrickyEditor.Prompt.PromptParameter('href', 'Url', href, 'Url'),
-                new BrickyEditor.Prompt.PromptParameter('title', 'Title', title, 'Title'),
-                new BrickyEditor.Prompt.PromptParameterOptions('target', 'Target', [
+                new BrickyEditor.Prompt.PromptParameter('href', BrickyEditor.EditorStrings.htmlEditorLinkUrlTitle, href, BrickyEditor.EditorStrings.htmlEditorLinkUrlPlaceholder),
+                new BrickyEditor.Prompt.PromptParameter('title', BrickyEditor.EditorStrings.htmlEditorLinkTitleTitle, title, BrickyEditor.EditorStrings.htmlEditorLinkTitlePlaceholder),
+                new BrickyEditor.Prompt.PromptParameterOptions('target', BrickyEditor.EditorStrings.htmlEditorLinkTargetTitle, [
                     ['', ''],
-                    ['Blank', '_blank'],
-                    ['Self', '_self'],
-                    ['Parent', '_parent'],
-                    ['Top', '_top'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetBlank, '_blank'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetSelf, '_self'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetParent, '_parent'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetTop, '_top'],
                 ], target)
             ];
         };
@@ -1293,7 +1644,7 @@ var BrickyEditor;
                 });
                 modal.$cancelBtn.on('click', function () {
                     modal.hideModal();
-                    reject(fields);
+                    resolve(null);
                 });
                 modal.showModal();
             });
@@ -1384,11 +1735,21 @@ var BrickyEditor;
         Selectors.attr = function (attr) {
             return "[" + attr + "]";
         };
-        Selectors.field = 'data-bre-field';
-        Selectors.selectorField = "[" + Selectors.field + "]";
+        Selectors.attrContentEditable = 'contenteditable';
+        Selectors.selectorContentEditable = 'contenteditable';
+        Selectors.attrField = 'data-bre-field';
+        Selectors.selectorField = "[" + Selectors.attrField + "]";
+        Selectors.classEditor = 'bre-editor';
+        Selectors.classTemplate = 'bre-template';
+        Selectors.selectorTemplate = "." + Selectors.classTemplate;
+        Selectors.classTemplateGroup = 'bre-template-group';
+        Selectors.selectorTemplateGroup = "." + Selectors.classTemplateGroup;
+        Selectors.selectorTemplatePreview = '.bre-template-preview';
         Selectors.classMobile = 'brickyeditor-tools-mobile';
         Selectors.htmlToolsCommand = 'data-bre-doc-command';
         Selectors.htmlToolsCommandRange = 'data-bre-doc-command-range';
+        Selectors.selectorFieldSelected = 'bre-field-selected';
+        Selectors.selectorFieldContainer = 'bre-field-container';
         Selectors.selectorHtmlToolsCommand = Selectors.attr(Selectors.htmlToolsCommand);
         Selectors.selectorHtmlToolsCommandRange = Selectors.attr(Selectors.htmlToolsCommandRange);
         return Selectors;
@@ -1438,12 +1799,12 @@ var BrickyEditor;
         };
         UI.prototype.setModal = function () {
             var $modal = $('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>');
-            var $modalCloseBtn = $('<div class="bre-modal-close"><a href="#">close ✖</a></div>');
+            var $modalCloseBtn = $("<div class=\"bre-modal-close\"><a href=\"#\">" + BrickyEditor.EditorStrings.buttonClose + " \u2716</a></div>");
             var $modalContent = $('<div class="bre-modal-content"></div>');
             var $modalForm = $('<form></form>');
             var $modalBtns = $('<div class="bre-btns"></div>');
-            var $modalOk = $('<button type="button" class="bre-btn bre-btn-primary">Ok</button>');
-            var $modalCancel = $('<button type="button" class="bre-btn">Cancel</button>');
+            var $modalOk = $("<button type=\"button\" class=\"bre-btn bre-btn-primary\">" + BrickyEditor.EditorStrings.buttonOk + "</button>");
+            var $modalCancel = $("<button type=\"button\" class=\"bre-btn\">" + BrickyEditor.EditorStrings.buttonCancel + "</button>");
             $modalBtns.append($modalOk);
             $modalBtns.append($modalCancel);
             $modalForm.append($modalBtns);
@@ -1457,22 +1818,39 @@ var BrickyEditor;
         UI.prototype.toggleToolsLoader = function (toggle) {
             this.$toolsLoader.toggle(toggle);
         };
-        UI.prototype.setTemplates = function (templates) {
+        UI.prototype.setTemplates = function (templateGroups) {
             var _this = this;
             var editor = this.editor;
-            templates.forEach(function (template) {
-                var $preview = template.getPreview();
-                $preview.on('click', function () {
-                    editor.addBlock(template);
+            templateGroups.forEach(function (group) {
+                if (group.templates.length === 0)
+                    return;
+                var $header = $("<div class='" + BrickyEditor.Selectors.classTemplateGroup + "'>" + group.name + "</div>");
+                _this.$toolsTemplates.append($header);
+                var $group = $('<div></div>');
+                group.templates.forEach(function (template) {
+                    var $preview = template.getPreview();
+                    $preview.attr('title', template.name);
+                    $preview.on('click', function (ev) {
+                        editor.addBlock(template);
+                        ev.stopPropagation();
+                        return false;
+                    });
+                    $group.append($preview);
                 });
-                _this.$toolsTemplates.append($preview);
+                $header.on('click', function () {
+                    $group.toggle();
+                });
+                _this.$toolsTemplates.append($group);
             });
+            ;
         };
         UI.initBtnDeck = function ($btnsDeck) {
             var $btns = $('.bre-btn', $btnsDeck);
             var $firstBtn = $btns.eq(0);
-            $firstBtn.on('click', function () {
+            $firstBtn.on('click', function (ev) {
                 UI.toggleBtnDeck($btnsDeck);
+                ev.stopPropagation();
+                return false;
             });
         };
         UI.toggleBtnDeck = function ($btnsDeck, isOn) {
@@ -1500,115 +1878,3 @@ var BrickyEditor;
     }());
     BrickyEditor.UI = UI;
 })(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    var Services;
-    (function (Services) {
-        var EmbedService = (function () {
-            function EmbedService() {
-            }
-            EmbedService.getEmbedAsync = function (embedUrl) {
-                var _this = this;
-                var url = "https://noembed.com/embed?url=" + embedUrl;
-                return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                    var params, data, err_1;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                params = { url: url, type: "get", dataType: "jsonp" };
-                                _a.label = 1;
-                            case 1:
-                                _a.trys.push([1, 3, , 4]);
-                                return [4, $.ajax(params)];
-                            case 2:
-                                data = _a.sent();
-                                resolve(data);
-                                return [3, 4];
-                            case 3:
-                                err_1 = _a.sent();
-                                reject(err_1);
-                                return [3, 4];
-                            case 4: return [2];
-                        }
-                    });
-                }); });
-            };
-            EmbedService.processEmbed = function (provider) {
-                switch (provider) {
-                    case EmbedService.Instagram:
-                        if (instgrm) {
-                            instgrm.Embeds.process();
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            };
-            EmbedService.Instagram = 'Instagram';
-            return EmbedService;
-        }());
-        Services.EmbedService = EmbedService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    var Services;
-    (function (Services) {
-        var TemplateService = (function () {
-            function TemplateService() {
-            }
-            TemplateService.loadTemplatesAsync = function (editor) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var _this = this;
-                    var templates, url;
-                    return __generator(this, function (_a) {
-                        this.templates = [];
-                        templates = this.templates;
-                        url = editor.options.templatesUrl;
-                        return [2, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                                var _this = this;
-                                var data, $style, $templates, err_2;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            _a.trys.push([0, 2, , 3]);
-                                            return [4, $.get(url)];
-                                        case 1:
-                                            data = _a.sent();
-                                            $style = $(data).filter('style');
-                                            if ($style && $style.length > 0) {
-                                                editor.$editor.prepend($style);
-                                            }
-                                            $templates = $(data).filter('.bre-template');
-                                            $templates.each(function (idx, t) {
-                                                var template = new BrickyEditor.Template(t);
-                                                _this.templates.push(template);
-                                            });
-                                            resolve(this.templates);
-                                            return [3, 3];
-                                        case 2:
-                                            err_2 = _a.sent();
-                                            console.log('Templates file not found.');
-                                            reject(err_2);
-                                            return [3, 3];
-                                        case 3: return [2];
-                                    }
-                                });
-                            }); })];
-                    });
-                });
-            };
-            TemplateService.getTemplate = function (templateName) {
-                for (var i = 0; i < this.templates.length; i++) {
-                    var template = this.templates[i];
-                    if (template.name.toLowerCase() === templateName.toLowerCase()) {
-                        return template;
-                    }
-                }
-                return null;
-            };
-            return TemplateService;
-        }());
-        Services.TemplateService = TemplateService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
diff --git a/demo/js/locales/jquery.brickyeditor.en.js b/demo/js/locales/jquery.brickyeditor.en.js
new file mode 100644
index 0000000..e429dff
--- /dev/null
+++ b/demo/js/locales/jquery.brickyeditor.en.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Blocks file not found. Requested file: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Templates file not found. Requested file:' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Template "' + templateName + '" not found.'; },
+
+    embedFieldLinkTitle: 'Link to embed media',
+
+    imageFieldLinkTitle: 'Image link',
+    imageFieldLinkPlaceholder: 'http://url-to-image.png',
+    
+    imageFieldUploadTitle: 'or Upload a file',
+    imageFieldUploadButton: 'Select file',
+
+    imageFieldAltTitle: 'Alt',
+    imageFieldAltPlaceholder: 'Image \'alt\' attribute value',
+
+    htmlEditorLinkUrlTitle: 'Url',
+    htmlEditorLinkUrlPlaceholder: 'http://put-your-link.here',
+
+    htmlEditorLinkTitleTitle: 'Title',
+    htmlEditorLinkTitlePlaceholder: 'Title attribute for link',
+
+    htmlEditorLinkTargetTitle: 'Target',
+    htmlEditorLinkTargetBlank: 'Blank',
+    htmlEditorLinkTargetSelf: 'Self',
+    htmlEditorLinkTargetParent: 'Parent',
+    htmlEditorLinkTargetTop: 'Top',
+
+    buttonClose: 'close',
+    buttonOk: 'Ok',
+    buttonCancel: 'Cancel',
+
+    defaultTemplatesGroupName: 'Other templates',
+});
\ No newline at end of file
diff --git a/demo/js/locales/jquery.brickyeditor.ru.js b/demo/js/locales/jquery.brickyeditor.ru.js
new file mode 100644
index 0000000..4210a7b
--- /dev/null
+++ b/demo/js/locales/jquery.brickyeditor.ru.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Не найден запрошенный файл с блоками. Указанный путь: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Не найден файл с шаблонами блоков. Указанный путь: ' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Шаблон блока "' + templateName + '" не найден.'; },
+
+    embedFieldLinkTitle: 'Ссылка на встраиваемый элемент',
+
+    imageFieldLinkTitle: 'Ссылка на картинку',
+    imageFieldLinkPlaceholder: 'http://ссылка-на-картинку.png',
+    
+    imageFieldUploadTitle: 'или Загрузите файл',
+    imageFieldUploadButton: 'Выбрать файл',
+
+    imageFieldAltTitle: 'Альтернативный текст (alt)',
+    imageFieldAltPlaceholder: 'Аттрибут \'alt\' для картинки',
+
+    htmlEditorLinkUrlTitle: 'Ссылка',
+    htmlEditorLinkUrlPlaceholder: 'http://ваша-ссылка.здесь',
+
+    htmlEditorLinkTitleTitle: 'Заголовок',
+    htmlEditorLinkTitlePlaceholder: 'Значение атрибута title',
+
+    htmlEditorLinkTargetTitle: 'Цель',
+    htmlEditorLinkTargetBlank: 'В новом окне (_blank)',
+    htmlEditorLinkTargetSelf: 'В текущем окне (_self)',
+    htmlEditorLinkTargetParent: 'Во фрейме-родителе (_parent)',
+    htmlEditorLinkTargetTop: 'В полном окне, игнорируя фреймы (_top)',
+
+    buttonClose: 'закрыть',
+    buttonOk: 'Ok',
+    buttonCancel: 'Отмена',
+
+    defaultTemplatesGroupName: 'Прочие шаблоны',
+});
\ No newline at end of file
diff --git a/demo/templates.html b/demo/templates.html
index 9691a4a..ef904ce 100644
--- a/demo/templates.html
+++ b/demo/templates.html
@@ -1,178 +1,147 @@
 <style>
-    .bre-template > h1,
-    .bre-template > h2,
-    .bre-template > h3,
-    .bre-template > h4,
-    .bre-template > h5,
-    .bre-template > h6,
-    .bre-template > p,
-    .bre-template > blockquote {
+    .bre-template>h1,
+    .bre-template>h2,
+    .bre-template>h3,
+    .bre-template>h4,
+    .bre-template>h5,
+    .bre-template>h6,
+    .bre-template>p,
+    .bre-template>blockquote {
         margin-bottom: 0;
     }
-    .bre-template > mb-4,
-    .bre-template > mt-4 {
+
+    .bre-template>mb-4,
+    .bre-template>mt-4 {
         margin: 0;
     }
 
-    .bre-template > .row > .col-md-6 {
+    .bre-template>.row>.col-md-6 {
         width: 50% !important;
     }
 
-    .bre-template > .row > .col-md-4 {
+    .bre-template>.row>.col-md-4 {
         width: 33.33% !important;
     }
 </style>
 
-<div class="bre-template" data-name="Display Heading 1">
-    <h2 class="display-2" data-bre-field='{ "name" : "text", "type": "html" }'>Header</h1>
-</div>
+<div class="bre-template-group" title="Containers">
 
-<div class="bre-template" data-name="Heading 1">
-    <h1 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h1>
-</div>
+    <div class="bre-template" data-name="Columns-2">
+        <div class="row">
+            <div class="col-md-6" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-6" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+        </div>
+    </div>
 
-<div class="bre-template" data-name="Heading 2">
-    <h2 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h2>
-</div>
+    <div class="bre-template" data-name="Columns-3">
+        <div class="row">
+            <div class="col-md-4" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col3", "type": "container" }'></div>
+        </div>
+    </div>
 
-<div class="bre-template" data-name="Heading 3">
-    <h3 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h3>
+    <div class="bre-template" data-name="Columns-4">
+        <div class="row">
+            <div class="col-md-3" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-3" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+            <div class="col-md-3" data-bre-field='{ "name" : "col3", "type": "container" }'></div>
+            <div class="col-md-3" data-bre-field='{ "name" : "col4", "type": "container" }'></div>
+        </div>
+    </div>
 </div>
 
-<div class="bre-template" data-name="Paragraph Lead">
-    <p class="lead" data-bre-field='{ "name" : "text", "type": "html" }'>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-</div>
+<div class="bre-template-group" title="Headers">
+    <div class="bre-template" data-name="Display Heading 1">
+        <h2 class="display-2" data-bre-field='{ "name" : "text", "type": "html" }'>Header</h1>
+    </div>
 
-<div class="bre-template" data-name="Paragraph">
-    <p data-bre-field='{ "name" : "text", "type": "html" }'>
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</div>
-    
-<div class="bre-template" data-name="Embed">
-    <center>
-        <h4 style="background: #555; color: #fff; padding: 1rem;" data-bre-field='{ "name" : "embed", "type": "embed" }'>
-            &lt; / &gt; Embed
-        </h4>
-    </center>
-</div>
+    <div class="bre-template" data-name="Heading 1">
+        <h1 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h1>
+    </div>
 
-<div class="bre-template" data-name="Image with caption">
-    <div class="row">            
-        <div class="col-md-12">
-            <figure class="figure text-center" style="width: 100%">
-                <img class="figure-img img-fluid" data-bre-field="{ 'name' : 'image', 'type' : 'image', 'src' : 'assets/photo.jpg'}" />
-                <figcaption class="figure-caption" data-bre-field="{ 'name' : 'caption', 'type' : 'html'}">Lorem ipsum dolor sit amet</figcaption>
-            </figure>
-        </div>
+    <div class="bre-template" data-name="Heading 2">
+        <h2 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h2>
     </div>
-</div>
 
-<div class="bre-template" data-name="2 Column Text">
-    <div class="row">
-        <div class="col-md-6 col-sm-12">
-            <p data-bre-field='{ "name" : "column1", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </p>
-        </div>
-        <div class="col-md-6 col-sm-12">
-            <p data-bre-field='{ "name" : "column2", "type": "html" }'>
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </div>
-    </div>    
+    <div class="bre-template" data-name="Heading 3">
+        <h3 data-bre-field='{ "name" : "text", "type": "html" }'>Header</h3>
+    </div>
 </div>
 
-<div class="bre-template" data-name="3 Column Text">
-    <div class="row">
-        <div class="col-md-4 col-sm-12">
-            <p data-bre-field='{ "name" : "column1", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </p>
-        </div>
-        <div class="col-md-4 col-sm-12">
-            <p data-bre-field='{ "name" : "column2", "type": "html" }'>
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </div>
-        <div class="col-md-4 col-sm-12">
-            <p data-bre-field='{ "name" : "column3", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </p>
-        </div>
+<div class="bre-template-group" title="Text">
+
+    <div class="bre-template" data-name="Paragraph Lead">
+        <p class="lead" data-bre-field='{ "name" : "text", "type": "html" }'>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+    </div>
+
+    <div class="bre-template" data-name="Paragraph">
+        <p data-bre-field='{ "name" : "text", "type": "html" }'>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </div>
+
+    <div class="bre-template" data-name="Blockquote">
+        <blockquote class="blockquote">
+            <p class="mb-0" data-bre-field='{ "name" : "text", "type": "html" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+            <footer class="blockquote-footer">
+                <span data-bre-field='{ "name" : "author", "type": "html" }'>Someone famous in </span>
+                <cite data-bre-field='{ "name" : "source", "type": "html" }'>Source Title</cite>
+            </footer>
+        </blockquote>
+    </div>
+
+    <div class="bre-template" data-name="Blockquote Reverse">
+        <blockquote class="blockquote blockquote-reverse">
+            <p class="mb-0" data-bre-field='{ "name" : "text", "type": "html" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+            <footer class="blockquote-footer">
+                <span data-bre-field='{ "name" : "author", "type": "html"}'>Someone famous in</span>
+                <cite data-bre-field='{ "name" : "source", "type": "html" }'>Source Title</cite>
+            </footer>
+        </blockquote>
     </div>
 </div>
 
+<div class="bre-template-group" title="Media">
+
+    <div class="bre-template" data-name="Embed">
+        <center>
+            <h4 style="background: #555; color: #fff; padding: 1rem;" data-bre-field='{ "name" : "embed", "type": "embed" }'>
+                &lt; / &gt; Embed
+            </h4>
+        </center>
+    </div>
 
-<div class="bre-template" data-name="2 Column Image and Text">
+    <div class="bre-template" data-name="Image">
         <div class="row">
-            <div class="col-md-6 col-sm-12">
-                <img class="img-fluid" style="width: 100%" data-bre-field="{ 'name' : 'image1', 'type' : 'image', 'src' : 'assets/photo.jpg'}">
-                <p data-bre-field='{ "name" : "column1", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                </p>
-            </div>
-            <div class="col-md-6 col-sm-12">
-                <img class="img-fluid" style="width: 100%" data-bre-field="{ 'name' : 'image2', 'type' : 'image', 'src' : 'assets/photo.jpg'}">
-                <p data-bre-field='{ "name" : "column2", "type": "html" }'>
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
+            <div class="col-md-12">
+                <img class="figure-img img-fluid" data-bre-field="{ 'name' : 'image', 'type' : 'image', 'src' : 'assets/photo.jpg'}" />
+                </figure>
             </div>
-        </div>    
+        </div>
     </div>
-    
-    <div class="bre-template" data-name="3 Column Image and Text">
+
+    <div class="bre-template" data-name="Image with caption">
         <div class="row">
-            <div class="col-md-4 col-sm-12">
-                <img class="img-fluid" style="width: 100%" data-bre-field="{ 'name' : 'image1', 'type' : 'image', 'src' : 'assets/photo.jpg'}">
-                <p data-bre-field='{ "name" : "column1", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                </p>
-            </div>
-            <div class="col-md-4 col-sm-12">
-                <img class="img-fluid" style="width: 100%" data-bre-field="{ 'name' : 'image2', 'type' : 'image', 'src' : 'assets/photo.jpg'}">
-                <p data-bre-field='{ "name" : "column2", "type": "html" }'>
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="col-md-4 col-sm-12">
-                <img class="img-fluid" style="width: 100%" data-bre-field="{ 'name' : 'image3', 'type' : 'image', 'src' : 'assets/photo.jpg'}">
-                <p data-bre-field='{ "name" : "column3", "type": "html" }'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                </p>
+            <div class="col-md-12">
+                <figure class="figure text-center" style="width: 100%">
+                    <img class="figure-img img-fluid" data-bre-field="{ 'name' : 'image', 'type' : 'image', 'src' : 'assets/photo.jpg'}" />
+                    <figcaption class="figure-caption" data-bre-field="{ 'name' : 'caption', 'type' : 'html'}">Lorem ipsum dolor sit amet</figcaption>
+                </figure>
             </div>
         </div>
     </div>
-    
-
-<div class="bre-template" data-name="Blockquote">
-    <blockquote class="blockquote">
-        <p class="mb-0" data-bre-field='{ "name" : "text", "type": "html" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">
-            <span data-bre-field='{ "name" : "author", "type": "html" }'>Someone famous in </span>
-            <cite data-bre-field='{ "name" : "source", "type": "html" }'>Source Title</cite>
-        </footer>
-    </blockquote>
 </div>
 
-<div class="bre-template" data-name="Blockquote Reverse">
-    <blockquote class="blockquote blockquote-reverse">
-        <p class="mb-0" data-bre-field='{ "name" : "text", "type": "html" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">
-            <span data-bre-field='{ "name" : "author", "type": "html"}'>Someone famous in</span>
-            <cite data-bre-field='{ "name" : "source", "type": "html" }'>Source Title</cite>
-        </footer>
-    </blockquote>
-</div>
-
-<div class="bre-template" data-name="Media">
-    <div class="media">
-        <img class="d-flex align-self-start mr-3" data-bre-field="{ 'name' : 'image', 'type' : 'image', 'src' : 'assets/photo_sm.jpg'}">
-        <div class="media-body">
-            <h5 class="mt-0" data-bre-field='{ "name" : "author", "type": "html" }'>Top-aligned media</h5>
-            <p data-bre-field='{ "name" : "author", "type": "html" }'>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+<div class="bre-template" data-name="Image">
+        <div class="row">
+            <div class="col-md-12">
+                <img class="figure-img img-fluid" data-bre-field="{ 'name' : 'image', 'type' : 'image', 'src' : 'assets/photo.jpg'}" />
+                </figure>
+            </div>
         </div>
-    </div>
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file
diff --git a/dist/jquery.brickyeditor.css b/dist/jquery.brickyeditor.css
index 75d9eee..78579fe 100644
--- a/dist/jquery.brickyeditor.css
+++ b/dist/jquery.brickyeditor.css
@@ -256,6 +256,13 @@
     width: 100%;
     height: 99%;
     overflow: auto; }
+    .bre-tools .bre-tools-templates .bre-template-group {
+      color: #92819F;
+      font-size: .5rem;
+      padding: .5rem .5rem 0rem .5rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      cursor: pointer; }
     .bre-tools .bre-tools-templates .bre-template {
       cursor: pointer;
       background: #fff;
@@ -270,6 +277,18 @@
         zoom: 0.2; }
       .bre-tools .bre-tools-templates .bre-template:hover {
         background: #f2f2f2; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container {
+        padding: 1rem;
+        border: 1px solid #DDDDDD;
+        border-right-width: 0px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 1rem;
+        color: #92819F; }
+        .bre-tools .bre-tools-templates .bre-template .bre-field-container::after {
+          content: '\2295'; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container:last-child {
+        border-right-width: 1px; }
     @media (min-width: 576px) and (max-width: 1023px) {
       .bre-tools .bre-tools-templates .bre-template > * {
         zoom: 0.3; } }
@@ -280,6 +299,9 @@
 .bre-tools-collapsed {
   right: -196px; }
 
+.bre-field-selected {
+  outline: dotted 1px #DDDDDD; }
+
 .bre * {
   font-family: sans-serif; }
 
diff --git a/dist/jquery.brickyeditor.es6.js b/dist/jquery.brickyeditor.es6.js
index 725cb6d..3a89580 100644
--- a/dist/jquery.brickyeditor.es6.js
+++ b/dist/jquery.brickyeditor.es6.js
@@ -6,6 +6,131 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var BrickyEditor;
+(function (BrickyEditor) {
+    class BlocksContainer {
+        constructor($element, onAddBlock, onDeleteBlock, onSelectBlock, onDeselectBlock, onMoveBlock, onUpdateBlock, usePlaceholder = false) {
+            this.$element = $element;
+            this.onAddBlock = onAddBlock;
+            this.onDeleteBlock = onDeleteBlock;
+            this.onSelectBlock = onSelectBlock;
+            this.onDeselectBlock = onDeselectBlock;
+            this.onMoveBlock = onMoveBlock;
+            this.onUpdateBlock = onUpdateBlock;
+            this.usePlaceholder = usePlaceholder;
+            this.blocks = [];
+            this.isContainer = true;
+            this.togglePlaceholderIfNeed();
+        }
+        getData(ignoreHtml) {
+            var blocksData = [];
+            this.blocks.forEach(block => {
+                blocksData.push(block.getData(ignoreHtml));
+            });
+            return blocksData;
+        }
+        getHtml() {
+            var blocksHtml = [];
+            this.blocks.forEach(block => {
+                blocksHtml.push(block.getHtml(true));
+            });
+            var blocksHtmlJoined = blocksHtml.join('\n');
+            let $el = this.$element.clone(false, false).html(blocksHtmlJoined).wrap('<div></div>');
+            const html = $('<div></div>').append($el).html();
+            return html;
+        }
+        addBlock(template, data, idx, select = true) {
+            let block = new BrickyEditor.Block(template, false, data, block => this.deleteBlock(block), block => this.selectBlock(block), block => this.deselectBlock(block), block => this.copyBlock(block), (block, offset) => this.moveBlock(block, offset), this.onUpdateBlock);
+            this.insertBlock(block, idx);
+            if (select) {
+                block.select();
+                block.scrollTo();
+            }
+        }
+        insertBlock(block, idx) {
+            idx = idx || this.blocks.length;
+            if (this.selectedBlock) {
+                idx = this.blocks.indexOf(this.selectedBlock) + 1;
+            }
+            this.blocks.splice(idx, 0, block);
+            if (idx == 0) {
+                this.$element.append(block.ui.$editor);
+            }
+            else {
+                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
+            }
+            this.onAddBlock(block, idx);
+            block.select(null);
+            this.togglePlaceholderIfNeed();
+        }
+        deleteBlock(block) {
+            const idx = this.blocks.indexOf(block);
+            this.blocks.splice(idx, 1);
+            block = null;
+            if (idx < this.blocks.length) {
+                this.blocks[idx].select();
+            }
+            else if (this.blocks.length > 0) {
+                this.blocks[idx - 1].select();
+            }
+            else {
+                this.selectedBlock = null;
+            }
+            this.onDeleteBlock(block, idx);
+            this.togglePlaceholderIfNeed();
+        }
+        moveBlock(block, offset) {
+            const idx = this.blocks.indexOf(block);
+            const new_idx = idx + offset;
+            if (new_idx >= this.blocks.length || new_idx < 0)
+                return;
+            var $anchorBlock = this.blocks[new_idx].ui.$editor;
+            if (offset > 0) {
+                $anchorBlock.after(block.ui.$editor);
+            }
+            else if (offset < 0) {
+                $anchorBlock.before(block.ui.$editor);
+            }
+            this.blocks.splice(idx, 1);
+            this.blocks.splice(new_idx, 0, block);
+            this.onMoveBlock(block, idx, new_idx);
+            block.scrollTo();
+        }
+        copyBlock(block) {
+            const idx = this.blocks.indexOf(block) + 1;
+            const copy = this.addBlock(block.template, block.getData().fields, idx, true);
+        }
+        selectBlock(block) {
+            if (this.selectedBlock === block)
+                return;
+            if (this.selectedBlock) {
+                this.selectedBlock.deselect();
+            }
+            this.selectedBlock = block;
+            this.onSelectBlock(block);
+        }
+        deselectBlock(block) {
+            this.selectedBlock = null;
+            this.onDeselectBlock(block);
+        }
+        togglePlaceholderIfNeed() {
+            if (!this.usePlaceholder) {
+                return;
+            }
+            if (this.blocks.length === 0) {
+                if (!this.$placeholder) {
+                    this.$placeholder = $('<i data-bre-placeholder="true">Click here to select this container...</i>');
+                    this.$element.append(this.$placeholder);
+                }
+            }
+            else if (this.$placeholder) {
+                this.$placeholder.remove();
+                this.$placeholder = null;
+            }
+        }
+    }
+    BrickyEditor.BlocksContainer = BlocksContainer;
+})(BrickyEditor || (BrickyEditor = {}));
 String.prototype.breContains = function (part) {
     return this.indexOf(part) >= 0;
 };
@@ -80,24 +205,42 @@ var BrickyEditor;
 (function (BrickyEditor) {
     class Editor {
         constructor($editor, options) {
-            this.blocks = [];
-            this.compactTools = null;
             BrickyEditor.Fields.BaseField.registerCommonFields();
             this.$editor = $editor;
-            this.$editor.addClass('bre-editor');
+            this.$editor.addClass(BrickyEditor.Selectors.classEditor);
             this.options = new BrickyEditor.EditorOptions(options);
+            this.container = this.createContainer();
             Editor.UI = new BrickyEditor.UI(this);
         }
-        get selectedBlockIndex() {
-            if (this.selectedBlock) {
-                return this.blocks.indexOf(this.selectedBlock);
-            }
-            return -1;
+        createContainer() {
+            const onAdd = (block, idx) => {
+                if (this.isLoaded) {
+                    this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
+                    this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+                }
+            };
+            const onDelete = (block, idx) => {
+                this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
+                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+            };
+            const onUpdate = (block, property, oldValue, newValue) => {
+                this.trigger(BrickyEditor.Events.onBlockUpdate, {
+                    block: block,
+                    property: property,
+                    oldValue: oldValue,
+                    newValue: newValue
+                });
+                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+            };
+            return new BrickyEditor.BlocksContainer(this.$editor, onAdd, onDelete, (block) => { this.trigger(BrickyEditor.Events.onBlockSelect, { block: block }); }, (block) => { this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block }); }, (block, from, to) => {
+                this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: from, to: to });
+                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+            }, onUpdate);
         }
         initAsync() {
             return __awaiter(this, void 0, void 0, function* () {
                 Editor.UI.toggleToolsLoader(true);
-                const templates = yield BrickyEditor.Services.TemplateService.loadTemplatesAsync(this);
+                const templates = yield BrickyEditor.Services.TemplateService.loadTemplatesAsync(this.options.templatesUrl, this.$editor, this.onError);
                 Editor.UI.toggleToolsLoader(false);
                 Editor.UI.setTemplates(templates);
                 const blocks = yield this.tryLoadInitialBlocksAsync();
@@ -116,7 +259,7 @@ var BrickyEditor;
                             resolve(blocks);
                         }
                         catch (error) {
-                            console.log('Blocks file not found.');
+                            this.onError(BrickyEditor.EditorStrings.errorBlocksFileNotFound(url));
                             reject(error);
                         }
                     }
@@ -152,116 +295,40 @@ var BrickyEditor;
             });
         }
         getData() {
-            var blocksData = [];
-            this.blocks.forEach(block => {
-                blocksData.push(block.getData(this.options.ignoreHtml));
-            });
-            return blocksData;
+            return this.container.getData(this.options.ignoreHtml);
         }
         getHtml() {
-            var blocksData = [];
-            this.blocks.forEach(block => {
-                blocksData.push(block.getHtml(true));
-            });
-            return blocksData.join('\n');
+            return this.container.getHtml();
         }
         loadBlocks(blocks) {
             if (blocks && blocks.length) {
                 blocks.forEach(block => {
                     let template = BrickyEditor.Services.TemplateService.getTemplate(block.template);
                     if (template) {
-                        this.addBlock(template, block.fields, null, false);
+                        this.container.addBlock(template, block.fields, null, false);
                     }
                     else {
-                        console.log(`Template ${block.template} not found.`);
+                        const message = BrickyEditor.EditorStrings.errorBlockTemplateNotFound(block.template);
+                        this.onError(message);
                     }
                 });
             }
         }
-        addBlock(template, data, idx, select = true) {
-            const onUpdate = (block, property, oldValue, newValue) => {
-                this.trigger(BrickyEditor.Events.onBlockUpdate, {
-                    block: block,
-                    property: property,
-                    oldValue: oldValue,
-                    newValue: newValue
-                });
-                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            };
-            let block = new BrickyEditor.Block(template, false, data, block => this.deleteBlock(block), block => this.selectBlock(block), block => this.deselectBlock(block), block => this.copyBlock(block), (block, offset) => this.moveBlock(block, offset), onUpdate);
-            this.insertBlock(block, idx);
-            if (select) {
-                block.select();
-                block.scrollTo();
-            }
-        }
-        insertBlock(block, idx) {
-            idx = idx || this.blocks.length;
-            if (this.selectedBlock) {
-                idx = this.selectedBlockIndex + 1;
-            }
-            this.blocks.splice(idx, 0, block);
-            if (idx == 0) {
-                this.$editor.append(block.ui.$editor);
-            }
-            else {
-                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
-            }
-            if (this.isLoaded) {
-                this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
-                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            }
-        }
-        deleteBlock(block) {
-            const idx = this.blocks.indexOf(block);
-            this.blocks.splice(idx, 1);
-            block = null;
-            if (idx < this.blocks.length) {
-                this.blocks[idx].select();
-            }
-            else if (this.blocks.length > 0) {
-                this.blocks[idx - 1].select();
-            }
-            else {
-                this.selectedBlock = null;
-            }
-            this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-        }
-        moveBlock(block, offset) {
-            const idx = this.blocks.indexOf(block);
-            const new_idx = idx + offset;
-            if (new_idx >= this.blocks.length || new_idx < 0)
-                return;
-            var $anchorBlock = this.blocks[new_idx].ui.$editor;
-            if (offset > 0) {
-                $anchorBlock.after(block.ui.$editor);
-            }
-            else if (offset < 0) {
-                $anchorBlock.before(block.ui.$editor);
-            }
-            this.blocks.splice(idx, 1);
-            this.blocks.splice(new_idx, 0, block);
-            this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: idx, to: new_idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            block.scrollTo();
-        }
-        copyBlock(block) {
-            const idx = this.blocks.indexOf(block) + 1;
-            const copy = this.addBlock(block.template, block.getData().fields, idx, true);
+        addBlock(template) {
+            const container = this.getContainer(this.container);
+            container.addBlock(template, null, null, true);
         }
-        selectBlock(block) {
-            if (this.selectedBlock === block)
-                return;
-            if (this.selectedBlock) {
-                this.selectedBlock.deselect();
+        getContainer(container) {
+            if (container.selectedBlock && container.selectedBlock.isContainer()) {
+                const field = container.selectedBlock.selectedField;
+                if (field) {
+                    return this.getContainer(field.container);
+                }
             }
-            this.selectedBlock = block;
-            this.trigger(BrickyEditor.Events.onBlockSelect, { block: block });
+            return container;
         }
-        deselectBlock(block) {
-            this.selectedBlock = null;
-            this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block });
+        onError(message, code = 0) {
+            this.options.onError({ message: message, code: code });
         }
         trigger(event, data) {
             const editor = this;
@@ -281,6 +348,9 @@ var BrickyEditor;
     class EditorOptions {
         constructor(options) {
             this.templatesUrl = "templates/bootstrap4.html";
+            this.onError = (data) => {
+                console.log(data.message);
+            };
             this.compactTools = null;
             this.compactToolsWidth = 768;
             this.ignoreHtml = null;
@@ -294,6 +364,7 @@ var BrickyEditor;
             this.onBlockSelect = options.onBlockSelect;
             this.onBlockDeselect = options.onBlockDeselect;
             this.onBlockUpdate = options.onBlockUpdate;
+            this.onError = options.onError || this.onError;
             this.blocksUrl = options.blocksUrl || null;
             this.blocks = options.blocks || null;
             this.compactTools = options.compactTools;
@@ -306,6 +377,36 @@ var BrickyEditor;
     BrickyEditor.EditorOptions = EditorOptions;
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    class EditorStrings {
+    }
+    EditorStrings.errorBlocksFileNotFound = function (url) { return `Blocks file not found. Requested file: ${url}.`; };
+    EditorStrings.errorTemplatesFileNotFound = function (url) { return `Templates file not found. Requested file: ${url}.`; };
+    EditorStrings.errorBlockTemplateNotFound = function (templateName) { return `Template "${templateName}" not found.`; };
+    EditorStrings.embedFieldLinkTitle = 'Link to embed media';
+    EditorStrings.embedFieldLinkPlaceholder = 'Link to instagram, youtube and etc.';
+    EditorStrings.imageFieldLinkTitle = 'Image link';
+    EditorStrings.imageFieldLinkPlaceholder = 'http://url-to-image.png';
+    EditorStrings.imageFieldUploadTitle = 'or Upload a file';
+    EditorStrings.imageFieldUploadButton = 'Select file';
+    EditorStrings.imageFieldAltTitle = 'Alt';
+    EditorStrings.imageFieldAltPlaceholder = 'Image \'alt\' attribute value';
+    EditorStrings.htmlEditorLinkUrlTitle = 'Url';
+    EditorStrings.htmlEditorLinkUrlPlaceholder = 'http://put-your-link.here';
+    EditorStrings.htmlEditorLinkTitleTitle = 'Title';
+    EditorStrings.htmlEditorLinkTitlePlaceholder = 'Title attribute for link';
+    EditorStrings.htmlEditorLinkTargetTitle = 'Target';
+    EditorStrings.htmlEditorLinkTargetBlank = 'Blank';
+    EditorStrings.htmlEditorLinkTargetSelf = 'Self';
+    EditorStrings.htmlEditorLinkTargetParent = 'Parent';
+    EditorStrings.htmlEditorLinkTargetTop = 'Top';
+    EditorStrings.buttonClose = 'close';
+    EditorStrings.buttonOk = 'Ok';
+    EditorStrings.buttonCancel = 'Cancel';
+    EditorStrings.defaultTemplatesGroupName = 'Other templates';
+    BrickyEditor.EditorStrings = EditorStrings;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     class Events {
     }
@@ -327,31 +428,6 @@ var BrickyEditor;
     };
 }(jQuery));
 var BrickyEditor;
-(function (BrickyEditor) {
-    class Template {
-        constructor(el) {
-            const previewSelector = '.bre-template-preview';
-            let $template = $(el);
-            let data = $template.data();
-            this.name = data.name;
-            this.category = data.cactegory || [];
-            this.$html = $template.contents().not(previewSelector);
-            this.$preview = $(previewSelector, $template).contents();
-            if (!this.$preview.length) {
-                let block = new BrickyEditor.Block(this, true);
-                let blockEl = block.getHtml(true);
-                this.$preview = $(blockEl);
-            }
-        }
-        getPreview() {
-            let $template = $(`<div class='bre-template'></div>`);
-            $template.append(this.$preview);
-            return $template;
-        }
-    }
-    BrickyEditor.Template = Template;
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
 (function (BrickyEditor) {
     class Block {
         constructor(template, preview, data, onDelete, onSelect, onDeselect, onCopy, onMove, onUpdate) {
@@ -370,6 +446,11 @@ var BrickyEditor;
             const actions = this.getActions();
             this.ui = new BrickyEditor.BlockUI($block, preview, actions, () => this.select());
         }
+        isContainer() {
+            if (!this.selectedField)
+                return false;
+            return this.selectedField instanceof BrickyEditor.Fields.ContainerField;
+        }
         bindFields($block, data) {
             const block = this;
             const $fields = $block
@@ -381,8 +462,11 @@ var BrickyEditor;
                         this.onUpdate(block, property, oldValue, newValue);
                     }
                 };
+                const onSelect = (field) => {
+                    block.select(field);
+                };
                 let $field = $(elem);
-                let field = BrickyEditor.Fields.BaseField.createField($field, data, () => block.select(), onUpdate);
+                let field = BrickyEditor.Fields.BaseField.createField($field, data, onSelect, onUpdate);
                 this.fields.push(field);
             });
         }
@@ -407,11 +491,24 @@ var BrickyEditor;
         clone() {
             this.onCopy(this);
         }
-        select() {
+        select(field) {
+            if (field === this.selectedField)
+                return;
+            if (field === null) {
+                field = this.fields[0];
+            }
+            if (this.selectedField) {
+                this.selectedField.deselect();
+            }
+            this.selectedField = field;
             this.ui.toggleSelection(true);
             this.onSelect(this);
         }
         deselect() {
+            this.selectedField = null;
+            this.fields.forEach(f => {
+                f.deselect();
+            });
             this.ui.toggleSelection(false);
             this.onDeselect(this);
         }
@@ -433,18 +530,26 @@ var BrickyEditor;
             }
             return data;
         }
-        getHtml(trim, skipAttrRemoving = false) {
-            let $html = this.ui.$block.clone(false, false)
+        getHtml(trim) {
+            let $html = this.template.$html.clone(false, false)
                 .wrap('<div></div>')
                 .parent();
-            $('.bre-temp-container', $html).each((idx, el) => {
-                let $el = $(el);
-                $el.replaceWith($el.children());
+            let fieldsHtml = {};
+            this.fields.forEach(field => {
+                const name = field.name || field.data.name;
+                fieldsHtml[name] = field.getEl();
             });
-            ['contenteditable', 'data-bre-field'].forEach((attr) => {
-                $(`[${attr}]`, $html).each((idx, el) => {
-                    el.removeAttribute(attr);
-                });
+            $html
+                .find(BrickyEditor.Selectors.selectorField)
+                .addBack(BrickyEditor.Selectors.selectorField)
+                .each((idx, elem) => {
+                let fieldData = $(elem).data().breField;
+                if (typeof fieldData === 'string') {
+                    fieldData = JSON.parse(fieldData.replace(/'/g, '"'));
+                }
+                const name = fieldData.name;
+                const $field = fieldsHtml[name];
+                $(elem).replaceWith($field);
             });
             return trim ? $html.html().breTotalTrim() : $html.html();
         }
@@ -494,7 +599,11 @@ var BrickyEditor;
         buildButton(action) {
             let $el = $(`<button type="button" class="bre-btn"><i class="fa fa-${action.icon}"></i></button>`);
             if (action.action) {
-                $el.on('click', () => action.action());
+                $el.on('click', (ev) => {
+                    action.action();
+                    ev.stopPropagation();
+                    return false;
+                });
             }
             return $el;
         }
@@ -537,6 +646,7 @@ var BrickyEditor;
                 Fields.HtmlField.registerField();
                 Fields.ImageField.registerField();
                 Fields.EmbedField.registerField();
+                Fields.ContainerField.registerField();
             }
             ;
             static registerField() {
@@ -584,8 +694,17 @@ var BrickyEditor;
                 }
             }
             bind() { }
-            selectBlock() {
-                this.onSelect();
+            select() {
+                this.$field.addClass(BrickyEditor.Selectors.selectorFieldSelected);
+                this.onSelect(this);
+            }
+            deselect() {
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            }
+            getEl() {
+                let $el = this.$field.clone(false);
+                $el.removeAttr(BrickyEditor.Selectors.attrField);
+                return $el;
             }
             updateProperty(prop, value, fireUpdate = true) {
                 const oldValue = this.data[prop];
@@ -602,6 +721,41 @@ var BrickyEditor;
     })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    let Fields;
+    (function (Fields) {
+        class ContainerField extends Fields.BaseField {
+            bind() {
+                let field = this;
+                let $field = this.$field;
+                this.container = new BrickyEditor.BlocksContainer($field, (block) => {
+                    field.updateBlocks();
+                }, (block) => { field.updateBlocks(); }, (block) => { this.select(); }, (block) => { }, (block) => { field.updateBlocks(); }, (block) => { field.updateBlocks(); }, true);
+                $field.addClass(BrickyEditor.Selectors.selectorFieldContainer);
+                $field
+                    .on('click', (ev) => {
+                    field.select();
+                    ev.stopPropagation();
+                    return false;
+                });
+            }
+            updateBlocks() {
+                this.updateProperty('blocks', this.container.getData(true), true);
+                this.updateProperty('html', this.container.getHtml(), true);
+            }
+            deselect() {
+                this.container.blocks.forEach(b => b.deselect());
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            }
+            getEl() {
+                let html = this.container.getHtml();
+                return $(html);
+            }
+        }
+        Fields.ContainerField = ContainerField;
+    })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     let Fields;
     (function (Fields) {
@@ -613,21 +767,34 @@ var BrickyEditor;
             }
             get settings() {
                 return (field) => {
-                    const url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                    field.setUrl(url);
-                    field.loadMedia(true);
+                    this.showEmbedLoaderAsync(field);
                 };
             }
             bind() {
                 let field = this;
                 let $field = this.$field;
                 $field.on('click', () => __awaiter(this, void 0, void 0, function* () {
-                    const url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                    field.setUrl(url);
-                    yield field.loadMedia(true);
+                    this.showEmbedLoaderAsync(field);
                 }));
                 field.loadMedia(false);
             }
+            showEmbedLoaderAsync(field) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const fields = yield BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams());
+                    if (fields != null) {
+                        const url = fields.getValue('url');
+                        if (url) {
+                            field.setUrl(url);
+                            yield field.loadMedia(true);
+                        }
+                    }
+                });
+            }
+            getPromptParams() {
+                return [
+                    new BrickyEditor.Prompt.PromptParameter('url', BrickyEditor.EditorStrings.embedFieldLinkTitle, this.data.url || 'http://instagr.am/p/BO9VX2Vj4fF/', BrickyEditor.EditorStrings.embedFieldLinkPlaceholder)
+                ];
+            }
             loadMedia(fireUpdate) {
                 return __awaiter(this, void 0, void 0, function* () {
                     let field = this;
@@ -653,7 +820,7 @@ var BrickyEditor;
                     field.$field.removeAttr('class');
                     field.$field.removeAttr('style');
                     field.$field.append($embed);
-                    field.selectBlock();
+                    field.select();
                 });
             }
             setEmbed(value, fireUpdate = true) {
@@ -674,8 +841,8 @@ var BrickyEditor;
             bind() {
                 let field = this;
                 let $field = this.$field;
-                if (!$field.is('[contenteditable]')) {
-                    $field.attr('contenteditable', 'true');
+                if (!$field.is(BrickyEditor.Selectors.selectorContentEditable)) {
+                    $field.attr(BrickyEditor.Selectors.attrContentEditable, 'true');
                 }
                 var html = this.data.html || this.$field.html();
                 this.setHtml(html, false);
@@ -694,7 +861,7 @@ var BrickyEditor;
                     document.execCommand("insertHTML", false, text);
                 })
                     .on('click', (ev) => {
-                    field.selectBlock();
+                    field.select();
                     ev.stopPropagation();
                     return false;
                 });
@@ -706,6 +873,11 @@ var BrickyEditor;
                 }
                 this.updateProperty('html', value, fireUpdate);
             }
+            getEl() {
+                let $el = super.getEl();
+                $el.removeAttr(BrickyEditor.Selectors.attrContentEditable);
+                return $el;
+            }
         }
         Fields.HtmlField = HtmlField;
     })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
@@ -722,26 +894,28 @@ var BrickyEditor;
                 this.setSrc(this.data.src, false);
                 $field.on('click', () => __awaiter(this, void 0, void 0, function* () {
                     const fields = yield BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams());
-                    const file = fields.getValue('file');
-                    const src = fields.getValue('src');
-                    if (file) {
-                        field.setFile(file);
-                        field.setSrc(null);
-                    }
-                    else if (src) {
-                        field.setSrc(src);
-                        field.setFile(null);
+                    if (fields != null) {
+                        const file = fields.getValue('file');
+                        const src = fields.getValue('src');
+                        if (file) {
+                            field.setFile(file);
+                            field.setSrc(null);
+                        }
+                        else if (src) {
+                            field.setSrc(src);
+                            field.setFile(null);
+                        }
+                        let alt = fields.getValue('alt');
+                        field.setAlt(alt);
                     }
-                    let alt = fields.getValue('alt');
-                    field.setAlt(alt);
-                    field.selectBlock();
+                    field.select();
                 }));
             }
             getPromptParams() {
                 return [
-                    new BrickyEditor.Prompt.PromptParameter('src', 'Image Link', this.data.url, 'image url'),
-                    new BrickyEditor.Prompt.PromptParameterImage('file', 'or Upload file', this.data.file, 'select file'),
-                    new BrickyEditor.Prompt.PromptParameter('alt', 'Alt', this.data.alt, 'alt attribute value '),
+                    new BrickyEditor.Prompt.PromptParameter('src', BrickyEditor.EditorStrings.imageFieldLinkTitle, this.data.url, BrickyEditor.EditorStrings.imageFieldLinkPlaceholder),
+                    new BrickyEditor.Prompt.PromptParameterImage('file', BrickyEditor.EditorStrings.imageFieldUploadTitle, this.data.file, BrickyEditor.EditorStrings.imageFieldUploadButton),
+                    new BrickyEditor.Prompt.PromptParameter('alt', BrickyEditor.EditorStrings.imageFieldAltTitle, this.data.alt, BrickyEditor.EditorStrings.imageFieldAltPlaceholder),
                 ];
             }
             setSrc(src, fireUpdate = true) {
@@ -839,7 +1013,7 @@ var BrickyEditor;
                 var $editor = $(`
                 <div class='bre-image-input'>
                     <label for="${this.key}">
-                        Select file...
+                        ${this.placeholder}
                     </label>                        
                     <img src="${img}"/>                    
                     <input type="file" id="${this.key}" class="bre-input" placeholder="${this.placeholder}">
@@ -950,6 +1124,139 @@ var BrickyEditor;
     })(Prompt = BrickyEditor.Prompt || (BrickyEditor.Prompt = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    let Services;
+    (function (Services) {
+        class EmbedService {
+            constructor() {
+            }
+            static getEmbedAsync(embedUrl) {
+                const url = `https://noembed.com/embed?url=${embedUrl}`;
+                return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                    const params = { url: url, type: "get", dataType: "jsonp" };
+                    try {
+                        const data = yield $.ajax(params);
+                        resolve(data);
+                    }
+                    catch (err) {
+                        reject(err);
+                    }
+                }));
+            }
+            static processEmbed(provider) {
+                switch (provider) {
+                    case EmbedService.Instagram:
+                        if (instgrm) {
+                            instgrm.Embeds.process();
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        EmbedService.Instagram = 'Instagram';
+        Services.EmbedService = EmbedService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    let Services;
+    (function (Services) {
+        class TemplateService {
+            static loadTemplatesAsync(url, $editor, onError) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    this.templates = [];
+                    const templates = this.templates;
+                    return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                        try {
+                            const data = yield $.get(url);
+                            const $style = $(data).filter('style');
+                            if ($style && $style.length > 0) {
+                                $editor.prepend($style);
+                            }
+                            let $data = $(`<div>${data}</div>`);
+                            const $groups = $(BrickyEditor.Selectors.selectorTemplateGroup, $data);
+                            $groups.each((idx, el) => {
+                                let $group = $(el);
+                                let templates = this.getTemplates($group);
+                                this.templates.push(new BrickyEditor.TemplateGroup($group.attr('title'), templates));
+                                $group.remove();
+                            });
+                            let templates = this.getTemplates($data);
+                            let defaultGroupName = this.templates.length > 0 ? BrickyEditor.EditorStrings.defaultTemplatesGroupName : '';
+                            let group = new BrickyEditor.TemplateGroup(defaultGroupName, templates);
+                            this.templates.push(group);
+                            resolve(this.templates);
+                        }
+                        catch (err) {
+                            onError(BrickyEditor.EditorStrings.errorTemplatesFileNotFound(url));
+                            reject(err);
+                        }
+                    }));
+                });
+            }
+            static getTemplates($el) {
+                let templates = [];
+                const $templates = $(BrickyEditor.Selectors.selectorTemplate, $el);
+                $templates.each((idx, t) => {
+                    let template = new BrickyEditor.Template(t);
+                    templates.push(template);
+                });
+                return templates;
+            }
+            static getTemplate(templateName) {
+                for (var gi = 0; gi < this.templates.length; gi++) {
+                    const group = this.templates[gi];
+                    for (var ti = 0; ti < group.templates.length; ti++) {
+                        const template = group.templates[ti];
+                        if (template.name.breEqualsInvariant(templateName)) {
+                            return template;
+                        }
+                    }
+                }
+                return null;
+            }
+        }
+        Services.TemplateService = TemplateService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    class Template {
+        constructor(el) {
+            const previewSelector = BrickyEditor.Selectors.selectorTemplatePreview;
+            let $template = $(el);
+            let data = $template.data();
+            this.name = data.name;
+            this.category = data.cactegory || [];
+            this.$html = $template.contents().not(previewSelector);
+            this.$preview = $(previewSelector, $template).contents();
+            if (!this.$preview.length) {
+                let block = new BrickyEditor.Block(this, true);
+                let blockEl = block.getHtml(true);
+                this.$preview = $(blockEl);
+            }
+        }
+        getPreview() {
+            let $template = $(`<div class='${BrickyEditor.Selectors.classTemplate}'></div>`);
+            $template.append(this.$preview);
+            return $template;
+        }
+    }
+    BrickyEditor.Template = Template;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    class TemplateGroup {
+        constructor(name, templates) {
+            this.name = name;
+            this.templates = templates;
+        }
+    }
+    BrickyEditor.TemplateGroup = TemplateGroup;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     class HtmlTools {
         constructor(editor) {
@@ -1059,14 +1366,14 @@ var BrickyEditor;
                 target = a.attr('target');
             }
             return [
-                new BrickyEditor.Prompt.PromptParameter('href', 'Url', href, 'Url'),
-                new BrickyEditor.Prompt.PromptParameter('title', 'Title', title, 'Title'),
-                new BrickyEditor.Prompt.PromptParameterOptions('target', 'Target', [
+                new BrickyEditor.Prompt.PromptParameter('href', BrickyEditor.EditorStrings.htmlEditorLinkUrlTitle, href, BrickyEditor.EditorStrings.htmlEditorLinkUrlPlaceholder),
+                new BrickyEditor.Prompt.PromptParameter('title', BrickyEditor.EditorStrings.htmlEditorLinkTitleTitle, title, BrickyEditor.EditorStrings.htmlEditorLinkTitlePlaceholder),
+                new BrickyEditor.Prompt.PromptParameterOptions('target', BrickyEditor.EditorStrings.htmlEditorLinkTargetTitle, [
                     ['', ''],
-                    ['Blank', '_blank'],
-                    ['Self', '_self'],
-                    ['Parent', '_parent'],
-                    ['Top', '_top'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetBlank, '_blank'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetSelf, '_self'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetParent, '_parent'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetTop, '_top'],
                 ], target)
             ];
         }
@@ -1118,7 +1425,7 @@ var BrickyEditor;
                 });
                 modal.$cancelBtn.on('click', () => {
                     modal.hideModal();
-                    reject(fields);
+                    resolve(null);
                 });
                 modal.showModal();
             });
@@ -1200,11 +1507,21 @@ var BrickyEditor;
             return `[${attr}]`;
         }
     }
-    Selectors.field = 'data-bre-field';
-    Selectors.selectorField = `[${Selectors.field}]`;
+    Selectors.attrContentEditable = 'contenteditable';
+    Selectors.selectorContentEditable = 'contenteditable';
+    Selectors.attrField = 'data-bre-field';
+    Selectors.selectorField = `[${Selectors.attrField}]`;
+    Selectors.classEditor = 'bre-editor';
+    Selectors.classTemplate = 'bre-template';
+    Selectors.selectorTemplate = `.${Selectors.classTemplate}`;
+    Selectors.classTemplateGroup = 'bre-template-group';
+    Selectors.selectorTemplateGroup = `.${Selectors.classTemplateGroup}`;
+    Selectors.selectorTemplatePreview = '.bre-template-preview';
     Selectors.classMobile = 'brickyeditor-tools-mobile';
     Selectors.htmlToolsCommand = 'data-bre-doc-command';
     Selectors.htmlToolsCommandRange = 'data-bre-doc-command-range';
+    Selectors.selectorFieldSelected = 'bre-field-selected';
+    Selectors.selectorFieldContainer = 'bre-field-container';
     Selectors.selectorHtmlToolsCommand = Selectors.attr(Selectors.htmlToolsCommand);
     Selectors.selectorHtmlToolsCommandRange = Selectors.attr(Selectors.htmlToolsCommandRange);
     BrickyEditor.Selectors = Selectors;
@@ -1247,12 +1564,12 @@ var BrickyEditor;
         }
         setModal() {
             let $modal = $('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>');
-            let $modalCloseBtn = $('<div class="bre-modal-close"><a href="#">close ✖</a></div>');
+            let $modalCloseBtn = $(`<div class="bre-modal-close"><a href="#">${BrickyEditor.EditorStrings.buttonClose} ✖</a></div>`);
             let $modalContent = $('<div class="bre-modal-content"></div>');
             let $modalForm = $('<form></form>');
             let $modalBtns = $('<div class="bre-btns"></div>');
-            let $modalOk = $('<button type="button" class="bre-btn bre-btn-primary">Ok</button>');
-            let $modalCancel = $('<button type="button" class="bre-btn">Cancel</button>');
+            let $modalOk = $(`<button type="button" class="bre-btn bre-btn-primary">${BrickyEditor.EditorStrings.buttonOk}</button>`);
+            let $modalCancel = $(`<button type="button" class="bre-btn">${BrickyEditor.EditorStrings.buttonCancel}</button>`);
             $modalBtns.append($modalOk);
             $modalBtns.append($modalCancel);
             $modalForm.append($modalBtns);
@@ -1266,21 +1583,38 @@ var BrickyEditor;
         toggleToolsLoader(toggle) {
             this.$toolsLoader.toggle(toggle);
         }
-        setTemplates(templates) {
+        setTemplates(templateGroups) {
             let editor = this.editor;
-            templates.forEach(template => {
-                let $preview = template.getPreview();
-                $preview.on('click', () => {
-                    editor.addBlock(template);
+            templateGroups.forEach(group => {
+                if (group.templates.length === 0)
+                    return;
+                let $header = $(`<div class='${BrickyEditor.Selectors.classTemplateGroup}'>${group.name}</div>`);
+                this.$toolsTemplates.append($header);
+                let $group = $('<div></div>');
+                group.templates.forEach(template => {
+                    let $preview = template.getPreview();
+                    $preview.attr('title', template.name);
+                    $preview.on('click', (ev) => {
+                        editor.addBlock(template);
+                        ev.stopPropagation();
+                        return false;
+                    });
+                    $group.append($preview);
+                });
+                $header.on('click', () => {
+                    $group.toggle();
                 });
-                this.$toolsTemplates.append($preview);
+                this.$toolsTemplates.append($group);
             });
+            ;
         }
         static initBtnDeck($btnsDeck) {
             var $btns = $('.bre-btn', $btnsDeck);
             var $firstBtn = $btns.eq(0);
-            $firstBtn.on('click', function () {
+            $firstBtn.on('click', (ev) => {
                 UI.toggleBtnDeck($btnsDeck);
+                ev.stopPropagation();
+                return false;
             });
         }
         static toggleBtnDeck($btnsDeck, isOn) {
@@ -1307,83 +1641,3 @@ var BrickyEditor;
     }
     BrickyEditor.UI = UI;
 })(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    let Services;
-    (function (Services) {
-        class EmbedService {
-            constructor() {
-            }
-            static getEmbedAsync(embedUrl) {
-                const url = `https://noembed.com/embed?url=${embedUrl}`;
-                return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
-                    const params = { url: url, type: "get", dataType: "jsonp" };
-                    try {
-                        const data = yield $.ajax(params);
-                        resolve(data);
-                    }
-                    catch (err) {
-                        reject(err);
-                    }
-                }));
-            }
-            static processEmbed(provider) {
-                switch (provider) {
-                    case EmbedService.Instagram:
-                        if (instgrm) {
-                            instgrm.Embeds.process();
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            }
-        }
-        EmbedService.Instagram = 'Instagram';
-        Services.EmbedService = EmbedService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    let Services;
-    (function (Services) {
-        class TemplateService {
-            static loadTemplatesAsync(editor) {
-                return __awaiter(this, void 0, void 0, function* () {
-                    this.templates = [];
-                    const templates = this.templates;
-                    const url = editor.options.templatesUrl;
-                    return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
-                        try {
-                            const data = yield $.get(url);
-                            const $style = $(data).filter('style');
-                            if ($style && $style.length > 0) {
-                                editor.$editor.prepend($style);
-                            }
-                            const $templates = $(data).filter('.bre-template');
-                            $templates.each((idx, t) => {
-                                let template = new BrickyEditor.Template(t);
-                                this.templates.push(template);
-                            });
-                            resolve(this.templates);
-                        }
-                        catch (err) {
-                            console.log('Templates file not found.');
-                            reject(err);
-                        }
-                    }));
-                });
-            }
-            static getTemplate(templateName) {
-                for (var i = 0; i < this.templates.length; i++) {
-                    var template = this.templates[i];
-                    if (template.name.toLowerCase() === templateName.toLowerCase()) {
-                        return template;
-                    }
-                }
-                return null;
-            }
-        }
-        Services.TemplateService = TemplateService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
diff --git a/dist/jquery.brickyeditor.js b/dist/jquery.brickyeditor.js
index 6f067eb..456e3ee 100644
--- a/dist/jquery.brickyeditor.js
+++ b/dist/jquery.brickyeditor.js
@@ -43,6 +43,135 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var BrickyEditor;
+(function (BrickyEditor) {
+    var BlocksContainer = (function () {
+        function BlocksContainer($element, onAddBlock, onDeleteBlock, onSelectBlock, onDeselectBlock, onMoveBlock, onUpdateBlock, usePlaceholder) {
+            if (usePlaceholder === void 0) { usePlaceholder = false; }
+            this.$element = $element;
+            this.onAddBlock = onAddBlock;
+            this.onDeleteBlock = onDeleteBlock;
+            this.onSelectBlock = onSelectBlock;
+            this.onDeselectBlock = onDeselectBlock;
+            this.onMoveBlock = onMoveBlock;
+            this.onUpdateBlock = onUpdateBlock;
+            this.usePlaceholder = usePlaceholder;
+            this.blocks = [];
+            this.isContainer = true;
+            this.togglePlaceholderIfNeed();
+        }
+        BlocksContainer.prototype.getData = function (ignoreHtml) {
+            var blocksData = [];
+            this.blocks.forEach(function (block) {
+                blocksData.push(block.getData(ignoreHtml));
+            });
+            return blocksData;
+        };
+        BlocksContainer.prototype.getHtml = function () {
+            var blocksHtml = [];
+            this.blocks.forEach(function (block) {
+                blocksHtml.push(block.getHtml(true));
+            });
+            var blocksHtmlJoined = blocksHtml.join('\n');
+            var $el = this.$element.clone(false, false).html(blocksHtmlJoined).wrap('<div></div>');
+            var html = $('<div></div>').append($el).html();
+            return html;
+        };
+        BlocksContainer.prototype.addBlock = function (template, data, idx, select) {
+            var _this = this;
+            if (select === void 0) { select = true; }
+            var block = new BrickyEditor.Block(template, false, data, function (block) { return _this.deleteBlock(block); }, function (block) { return _this.selectBlock(block); }, function (block) { return _this.deselectBlock(block); }, function (block) { return _this.copyBlock(block); }, function (block, offset) { return _this.moveBlock(block, offset); }, this.onUpdateBlock);
+            this.insertBlock(block, idx);
+            if (select) {
+                block.select();
+                block.scrollTo();
+            }
+        };
+        BlocksContainer.prototype.insertBlock = function (block, idx) {
+            idx = idx || this.blocks.length;
+            if (this.selectedBlock) {
+                idx = this.blocks.indexOf(this.selectedBlock) + 1;
+            }
+            this.blocks.splice(idx, 0, block);
+            if (idx == 0) {
+                this.$element.append(block.ui.$editor);
+            }
+            else {
+                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
+            }
+            this.onAddBlock(block, idx);
+            block.select(null);
+            this.togglePlaceholderIfNeed();
+        };
+        BlocksContainer.prototype.deleteBlock = function (block) {
+            var idx = this.blocks.indexOf(block);
+            this.blocks.splice(idx, 1);
+            block = null;
+            if (idx < this.blocks.length) {
+                this.blocks[idx].select();
+            }
+            else if (this.blocks.length > 0) {
+                this.blocks[idx - 1].select();
+            }
+            else {
+                this.selectedBlock = null;
+            }
+            this.onDeleteBlock(block, idx);
+            this.togglePlaceholderIfNeed();
+        };
+        BlocksContainer.prototype.moveBlock = function (block, offset) {
+            var idx = this.blocks.indexOf(block);
+            var new_idx = idx + offset;
+            if (new_idx >= this.blocks.length || new_idx < 0)
+                return;
+            var $anchorBlock = this.blocks[new_idx].ui.$editor;
+            if (offset > 0) {
+                $anchorBlock.after(block.ui.$editor);
+            }
+            else if (offset < 0) {
+                $anchorBlock.before(block.ui.$editor);
+            }
+            this.blocks.splice(idx, 1);
+            this.blocks.splice(new_idx, 0, block);
+            this.onMoveBlock(block, idx, new_idx);
+            block.scrollTo();
+        };
+        BlocksContainer.prototype.copyBlock = function (block) {
+            var idx = this.blocks.indexOf(block) + 1;
+            var copy = this.addBlock(block.template, block.getData().fields, idx, true);
+        };
+        BlocksContainer.prototype.selectBlock = function (block) {
+            if (this.selectedBlock === block)
+                return;
+            if (this.selectedBlock) {
+                this.selectedBlock.deselect();
+            }
+            this.selectedBlock = block;
+            this.onSelectBlock(block);
+        };
+        BlocksContainer.prototype.deselectBlock = function (block) {
+            this.selectedBlock = null;
+            this.onDeselectBlock(block);
+        };
+        BlocksContainer.prototype.togglePlaceholderIfNeed = function () {
+            if (!this.usePlaceholder) {
+                return;
+            }
+            if (this.blocks.length === 0) {
+                if (!this.$placeholder) {
+                    this.$placeholder = $('<i data-bre-placeholder="true">Click here to select this container...</i>');
+                    this.$element.append(this.$placeholder);
+                }
+            }
+            else if (this.$placeholder) {
+                this.$placeholder.remove();
+                this.$placeholder = null;
+            }
+        };
+        return BlocksContainer;
+    }());
+    BrickyEditor.BlocksContainer = BlocksContainer;
+})(BrickyEditor || (BrickyEditor = {}));
 String.prototype.breContains = function (part) {
     return this.indexOf(part) >= 0;
 };
@@ -120,24 +249,39 @@ var BrickyEditor;
 (function (BrickyEditor) {
     var Editor = (function () {
         function Editor($editor, options) {
-            this.blocks = [];
-            this.compactTools = null;
             BrickyEditor.Fields.BaseField.registerCommonFields();
             this.$editor = $editor;
-            this.$editor.addClass('bre-editor');
+            this.$editor.addClass(BrickyEditor.Selectors.classEditor);
             this.options = new BrickyEditor.EditorOptions(options);
+            this.container = this.createContainer();
             Editor.UI = new BrickyEditor.UI(this);
         }
-        Object.defineProperty(Editor.prototype, "selectedBlockIndex", {
-            get: function () {
-                if (this.selectedBlock) {
-                    return this.blocks.indexOf(this.selectedBlock);
+        Editor.prototype.createContainer = function () {
+            var _this = this;
+            var onAdd = function (block, idx) {
+                if (_this.isLoaded) {
+                    _this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
+                    _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
                 }
-                return -1;
-            },
-            enumerable: true,
-            configurable: true
-        });
+            };
+            var onDelete = function (block, idx) {
+                _this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            };
+            var onUpdate = function (block, property, oldValue, newValue) {
+                _this.trigger(BrickyEditor.Events.onBlockUpdate, {
+                    block: block,
+                    property: property,
+                    oldValue: oldValue,
+                    newValue: newValue
+                });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            };
+            return new BrickyEditor.BlocksContainer(this.$editor, onAdd, onDelete, function (block) { _this.trigger(BrickyEditor.Events.onBlockSelect, { block: block }); }, function (block) { _this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block }); }, function (block, from, to) {
+                _this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: from, to: to });
+                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
+            }, onUpdate);
+        };
         Editor.prototype.initAsync = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var templates, blocks;
@@ -145,7 +289,7 @@ var BrickyEditor;
                     switch (_a.label) {
                         case 0:
                             Editor.UI.toggleToolsLoader(true);
-                            return [4, BrickyEditor.Services.TemplateService.loadTemplatesAsync(this)];
+                            return [4, BrickyEditor.Services.TemplateService.loadTemplatesAsync(this.options.templatesUrl, this.$editor, this.onError)];
                         case 1:
                             templates = _a.sent();
                             Editor.UI.toggleToolsLoader(false);
@@ -183,7 +327,7 @@ var BrickyEditor;
                                         return [3, 4];
                                     case 3:
                                         error_1 = _a.sent();
-                                        console.log('Blocks file not found.');
+                                        this.onError(BrickyEditor.EditorStrings.errorBlocksFileNotFound(url));
                                         reject(error_1);
                                         return [3, 4];
                                     case 4: return [3, 6];
@@ -225,19 +369,10 @@ var BrickyEditor;
             });
         };
         Editor.prototype.getData = function () {
-            var _this = this;
-            var blocksData = [];
-            this.blocks.forEach(function (block) {
-                blocksData.push(block.getData(_this.options.ignoreHtml));
-            });
-            return blocksData;
+            return this.container.getData(this.options.ignoreHtml);
         };
         Editor.prototype.getHtml = function () {
-            var blocksData = [];
-            this.blocks.forEach(function (block) {
-                blocksData.push(block.getHtml(true));
-            });
-            return blocksData.join('\n');
+            return this.container.getHtml();
         };
         Editor.prototype.loadBlocks = function (blocks) {
             var _this = this;
@@ -245,100 +380,31 @@ var BrickyEditor;
                 blocks.forEach(function (block) {
                     var template = BrickyEditor.Services.TemplateService.getTemplate(block.template);
                     if (template) {
-                        _this.addBlock(template, block.fields, null, false);
+                        _this.container.addBlock(template, block.fields, null, false);
                     }
                     else {
-                        console.log("Template " + block.template + " not found.");
+                        var message = BrickyEditor.EditorStrings.errorBlockTemplateNotFound(block.template);
+                        _this.onError(message);
                     }
                 });
             }
         };
-        Editor.prototype.addBlock = function (template, data, idx, select) {
-            var _this = this;
-            if (select === void 0) { select = true; }
-            var onUpdate = function (block, property, oldValue, newValue) {
-                _this.trigger(BrickyEditor.Events.onBlockUpdate, {
-                    block: block,
-                    property: property,
-                    oldValue: oldValue,
-                    newValue: newValue
-                });
-                _this.trigger(BrickyEditor.Events.onChange, { blocks: _this.getData(), html: _this.getHtml() });
-            };
-            var block = new BrickyEditor.Block(template, false, data, function (block) { return _this.deleteBlock(block); }, function (block) { return _this.selectBlock(block); }, function (block) { return _this.deselectBlock(block); }, function (block) { return _this.copyBlock(block); }, function (block, offset) { return _this.moveBlock(block, offset); }, onUpdate);
-            this.insertBlock(block, idx);
-            if (select) {
-                block.select();
-                block.scrollTo();
-            }
-        };
-        Editor.prototype.insertBlock = function (block, idx) {
-            idx = idx || this.blocks.length;
-            if (this.selectedBlock) {
-                idx = this.selectedBlockIndex + 1;
-            }
-            this.blocks.splice(idx, 0, block);
-            if (idx == 0) {
-                this.$editor.append(block.ui.$editor);
-            }
-            else {
-                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
-            }
-            if (this.isLoaded) {
-                this.trigger(BrickyEditor.Events.onBlockAdd, { block: block, idx: idx });
-                this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            }
-        };
-        Editor.prototype.deleteBlock = function (block) {
-            var idx = this.blocks.indexOf(block);
-            this.blocks.splice(idx, 1);
-            block = null;
-            if (idx < this.blocks.length) {
-                this.blocks[idx].select();
-            }
-            else if (this.blocks.length > 0) {
-                this.blocks[idx - 1].select();
-            }
-            else {
-                this.selectedBlock = null;
-            }
-            this.trigger(BrickyEditor.Events.onBlockDelete, { block: block, idx: idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+        Editor.prototype.addBlock = function (template) {
+            var container = this.getContainer(this.container);
+            container.addBlock(template, null, null, true);
         };
-        Editor.prototype.moveBlock = function (block, offset) {
-            var idx = this.blocks.indexOf(block);
-            var new_idx = idx + offset;
-            if (new_idx >= this.blocks.length || new_idx < 0)
-                return;
-            var $anchorBlock = this.blocks[new_idx].ui.$editor;
-            if (offset > 0) {
-                $anchorBlock.after(block.ui.$editor);
-            }
-            else if (offset < 0) {
-                $anchorBlock.before(block.ui.$editor);
-            }
-            this.blocks.splice(idx, 1);
-            this.blocks.splice(new_idx, 0, block);
-            this.trigger(BrickyEditor.Events.onBlockMove, { block: block, from: idx, to: new_idx });
-            this.trigger(BrickyEditor.Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            block.scrollTo();
-        };
-        Editor.prototype.copyBlock = function (block) {
-            var idx = this.blocks.indexOf(block) + 1;
-            var copy = this.addBlock(block.template, block.getData().fields, idx, true);
-        };
-        Editor.prototype.selectBlock = function (block) {
-            if (this.selectedBlock === block)
-                return;
-            if (this.selectedBlock) {
-                this.selectedBlock.deselect();
+        Editor.prototype.getContainer = function (container) {
+            if (container.selectedBlock && container.selectedBlock.isContainer()) {
+                var field = container.selectedBlock.selectedField;
+                if (field) {
+                    return this.getContainer(field.container);
+                }
             }
-            this.selectedBlock = block;
-            this.trigger(BrickyEditor.Events.onBlockSelect, { block: block });
+            return container;
         };
-        Editor.prototype.deselectBlock = function (block) {
-            this.selectedBlock = null;
-            this.trigger(BrickyEditor.Events.onBlockDeselect, { block: block });
+        Editor.prototype.onError = function (message, code) {
+            if (code === void 0) { code = 0; }
+            this.options.onError({ message: message, code: code });
         };
         Editor.prototype.trigger = function (event, data) {
             var editor = this;
@@ -359,6 +425,9 @@ var BrickyEditor;
     var EditorOptions = (function () {
         function EditorOptions(options) {
             this.templatesUrl = "templates/bootstrap4.html";
+            this.onError = function (data) {
+                console.log(data.message);
+            };
             this.compactTools = null;
             this.compactToolsWidth = 768;
             this.ignoreHtml = null;
@@ -372,6 +441,7 @@ var BrickyEditor;
             this.onBlockSelect = options.onBlockSelect;
             this.onBlockDeselect = options.onBlockDeselect;
             this.onBlockUpdate = options.onBlockUpdate;
+            this.onError = options.onError || this.onError;
             this.blocksUrl = options.blocksUrl || null;
             this.blocks = options.blocks || null;
             this.compactTools = options.compactTools;
@@ -385,6 +455,39 @@ var BrickyEditor;
     BrickyEditor.EditorOptions = EditorOptions;
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var EditorStrings = (function () {
+        function EditorStrings() {
+        }
+        EditorStrings.errorBlocksFileNotFound = function (url) { return "Blocks file not found. Requested file: " + url + "."; };
+        EditorStrings.errorTemplatesFileNotFound = function (url) { return "Templates file not found. Requested file: " + url + "."; };
+        EditorStrings.errorBlockTemplateNotFound = function (templateName) { return "Template \"" + templateName + "\" not found."; };
+        EditorStrings.embedFieldLinkTitle = 'Link to embed media';
+        EditorStrings.embedFieldLinkPlaceholder = 'Link to instagram, youtube and etc.';
+        EditorStrings.imageFieldLinkTitle = 'Image link';
+        EditorStrings.imageFieldLinkPlaceholder = 'http://url-to-image.png';
+        EditorStrings.imageFieldUploadTitle = 'or Upload a file';
+        EditorStrings.imageFieldUploadButton = 'Select file';
+        EditorStrings.imageFieldAltTitle = 'Alt';
+        EditorStrings.imageFieldAltPlaceholder = 'Image \'alt\' attribute value';
+        EditorStrings.htmlEditorLinkUrlTitle = 'Url';
+        EditorStrings.htmlEditorLinkUrlPlaceholder = 'http://put-your-link.here';
+        EditorStrings.htmlEditorLinkTitleTitle = 'Title';
+        EditorStrings.htmlEditorLinkTitlePlaceholder = 'Title attribute for link';
+        EditorStrings.htmlEditorLinkTargetTitle = 'Target';
+        EditorStrings.htmlEditorLinkTargetBlank = 'Blank';
+        EditorStrings.htmlEditorLinkTargetSelf = 'Self';
+        EditorStrings.htmlEditorLinkTargetParent = 'Parent';
+        EditorStrings.htmlEditorLinkTargetTop = 'Top';
+        EditorStrings.buttonClose = 'close';
+        EditorStrings.buttonOk = 'Ok';
+        EditorStrings.buttonCancel = 'Cancel';
+        EditorStrings.defaultTemplatesGroupName = 'Other templates';
+        return EditorStrings;
+    }());
+    BrickyEditor.EditorStrings = EditorStrings;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var Events = (function () {
         function Events() {
@@ -409,32 +512,6 @@ var BrickyEditor;
     };
 }(jQuery));
 var BrickyEditor;
-(function (BrickyEditor) {
-    var Template = (function () {
-        function Template(el) {
-            var previewSelector = '.bre-template-preview';
-            var $template = $(el);
-            var data = $template.data();
-            this.name = data.name;
-            this.category = data.cactegory || [];
-            this.$html = $template.contents().not(previewSelector);
-            this.$preview = $(previewSelector, $template).contents();
-            if (!this.$preview.length) {
-                var block = new BrickyEditor.Block(this, true);
-                var blockEl = block.getHtml(true);
-                this.$preview = $(blockEl);
-            }
-        }
-        Template.prototype.getPreview = function () {
-            var $template = $("<div class='bre-template'></div>");
-            $template.append(this.$preview);
-            return $template;
-        };
-        return Template;
-    }());
-    BrickyEditor.Template = Template;
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
 (function (BrickyEditor) {
     var Block = (function () {
         function Block(template, preview, data, onDelete, onSelect, onDeselect, onCopy, onMove, onUpdate) {
@@ -454,6 +531,11 @@ var BrickyEditor;
             var actions = this.getActions();
             this.ui = new BrickyEditor.BlockUI($block, preview, actions, function () { return _this.select(); });
         }
+        Block.prototype.isContainer = function () {
+            if (!this.selectedField)
+                return false;
+            return this.selectedField instanceof BrickyEditor.Fields.ContainerField;
+        };
         Block.prototype.bindFields = function ($block, data) {
             var _this = this;
             var block = this;
@@ -466,8 +548,11 @@ var BrickyEditor;
                         _this.onUpdate(block, property, oldValue, newValue);
                     }
                 };
+                var onSelect = function (field) {
+                    block.select(field);
+                };
                 var $field = $(elem);
-                var field = BrickyEditor.Fields.BaseField.createField($field, data, function () { return block.select(); }, onUpdate);
+                var field = BrickyEditor.Fields.BaseField.createField($field, data, onSelect, onUpdate);
                 _this.fields.push(field);
             });
         };
@@ -492,11 +577,24 @@ var BrickyEditor;
         Block.prototype.clone = function () {
             this.onCopy(this);
         };
-        Block.prototype.select = function () {
+        Block.prototype.select = function (field) {
+            if (field === this.selectedField)
+                return;
+            if (field === null) {
+                field = this.fields[0];
+            }
+            if (this.selectedField) {
+                this.selectedField.deselect();
+            }
+            this.selectedField = field;
             this.ui.toggleSelection(true);
             this.onSelect(this);
         };
         Block.prototype.deselect = function () {
+            this.selectedField = null;
+            this.fields.forEach(function (f) {
+                f.deselect();
+            });
             this.ui.toggleSelection(false);
             this.onDeselect(this);
         };
@@ -518,19 +616,26 @@ var BrickyEditor;
             }
             return data;
         };
-        Block.prototype.getHtml = function (trim, skipAttrRemoving) {
-            if (skipAttrRemoving === void 0) { skipAttrRemoving = false; }
-            var $html = this.ui.$block.clone(false, false)
+        Block.prototype.getHtml = function (trim) {
+            var $html = this.template.$html.clone(false, false)
                 .wrap('<div></div>')
                 .parent();
-            $('.bre-temp-container', $html).each(function (idx, el) {
-                var $el = $(el);
-                $el.replaceWith($el.children());
+            var fieldsHtml = {};
+            this.fields.forEach(function (field) {
+                var name = field.name || field.data.name;
+                fieldsHtml[name] = field.getEl();
             });
-            ['contenteditable', 'data-bre-field'].forEach(function (attr) {
-                $("[" + attr + "]", $html).each(function (idx, el) {
-                    el.removeAttribute(attr);
-                });
+            $html
+                .find(BrickyEditor.Selectors.selectorField)
+                .addBack(BrickyEditor.Selectors.selectorField)
+                .each(function (idx, elem) {
+                var fieldData = $(elem).data().breField;
+                if (typeof fieldData === 'string') {
+                    fieldData = JSON.parse(fieldData.replace(/'/g, '"'));
+                }
+                var name = fieldData.name;
+                var $field = fieldsHtml[name];
+                $(elem).replaceWith($field);
             });
             return trim ? $html.html().breTotalTrim() : $html.html();
         };
@@ -583,7 +688,11 @@ var BrickyEditor;
         BlockUI.prototype.buildButton = function (action) {
             var $el = $("<button type=\"button\" class=\"bre-btn\"><i class=\"fa fa-" + action.icon + "\"></i></button>");
             if (action.action) {
-                $el.on('click', function () { return action.action(); });
+                $el.on('click', function (ev) {
+                    action.action();
+                    ev.stopPropagation();
+                    return false;
+                });
             }
             return $el;
         };
@@ -632,6 +741,7 @@ var BrickyEditor;
                 Fields.HtmlField.registerField();
                 Fields.ImageField.registerField();
                 Fields.EmbedField.registerField();
+                Fields.ContainerField.registerField();
             };
             ;
             BaseField.registerField = function () {
@@ -679,8 +789,17 @@ var BrickyEditor;
                 }
             };
             BaseField.prototype.bind = function () { };
-            BaseField.prototype.selectBlock = function () {
-                this.onSelect();
+            BaseField.prototype.select = function () {
+                this.$field.addClass(BrickyEditor.Selectors.selectorFieldSelected);
+                this.onSelect(this);
+            };
+            BaseField.prototype.deselect = function () {
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            };
+            BaseField.prototype.getEl = function () {
+                var $el = this.$field.clone(false);
+                $el.removeAttr(BrickyEditor.Selectors.attrField);
+                return $el;
             };
             BaseField.prototype.updateProperty = function (prop, value, fireUpdate) {
                 if (fireUpdate === void 0) { fireUpdate = true; }
@@ -699,6 +818,47 @@ var BrickyEditor;
     })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var Fields;
+    (function (Fields) {
+        var ContainerField = (function (_super) {
+            __extends(ContainerField, _super);
+            function ContainerField() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            ContainerField.prototype.bind = function () {
+                var _this = this;
+                var field = this;
+                var $field = this.$field;
+                this.container = new BrickyEditor.BlocksContainer($field, function (block) {
+                    field.updateBlocks();
+                }, function (block) { field.updateBlocks(); }, function (block) { _this.select(); }, function (block) { }, function (block) { field.updateBlocks(); }, function (block) { field.updateBlocks(); }, true);
+                $field.addClass(BrickyEditor.Selectors.selectorFieldContainer);
+                $field
+                    .on('click', function (ev) {
+                    field.select();
+                    ev.stopPropagation();
+                    return false;
+                });
+            };
+            ContainerField.prototype.updateBlocks = function () {
+                this.updateProperty('blocks', this.container.getData(true), true);
+                this.updateProperty('html', this.container.getHtml(), true);
+            };
+            ContainerField.prototype.deselect = function () {
+                this.container.blocks.forEach(function (b) { return b.deselect(); });
+                this.$field.removeClass(BrickyEditor.Selectors.selectorFieldSelected);
+            };
+            ContainerField.prototype.getEl = function () {
+                var html = this.container.getHtml();
+                return $(html);
+            };
+            return ContainerField;
+        }(Fields.BaseField));
+        Fields.ContainerField = ContainerField;
+    })(Fields = BrickyEditor.Fields || (BrickyEditor.Fields = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var Fields;
     (function (Fields) {
@@ -714,10 +874,9 @@ var BrickyEditor;
             };
             Object.defineProperty(EmbedField.prototype, "settings", {
                 get: function () {
+                    var _this = this;
                     return function (field) {
-                        var url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                        field.setUrl(url);
-                        field.loadMedia(true);
+                        _this.showEmbedLoaderAsync(field);
                     };
                 },
                 enumerable: true,
@@ -728,20 +887,38 @@ var BrickyEditor;
                 var field = this;
                 var $field = this.$field;
                 $field.on('click', function () { return __awaiter(_this, void 0, void 0, function () {
-                    var url;
+                    return __generator(this, function (_a) {
+                        this.showEmbedLoaderAsync(field);
+                        return [2];
+                    });
+                }); });
+                field.loadMedia(false);
+            };
+            EmbedField.prototype.showEmbedLoaderAsync = function (field) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var fields, url;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
-                            case 0:
-                                url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
+                            case 0: return [4, BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams())];
+                            case 1:
+                                fields = _a.sent();
+                                if (!(fields != null)) return [3, 3];
+                                url = fields.getValue('url');
+                                if (!url) return [3, 3];
                                 field.setUrl(url);
                                 return [4, field.loadMedia(true)];
-                            case 1:
+                            case 2:
                                 _a.sent();
-                                return [2];
+                                _a.label = 3;
+                            case 3: return [2];
                         }
                     });
-                }); });
-                field.loadMedia(false);
+                });
+            };
+            EmbedField.prototype.getPromptParams = function () {
+                return [
+                    new BrickyEditor.Prompt.PromptParameter('url', BrickyEditor.EditorStrings.embedFieldLinkTitle, this.data.url || 'http://instagr.am/p/BO9VX2Vj4fF/', BrickyEditor.EditorStrings.embedFieldLinkPlaceholder)
+                ];
             };
             EmbedField.prototype.loadMedia = function (fireUpdate) {
                 return __awaiter(this, void 0, void 0, function () {
@@ -774,7 +951,7 @@ var BrickyEditor;
                                 field.$field.removeAttr('class');
                                 field.$field.removeAttr('style');
                                 field.$field.append($embed);
-                                field.selectBlock();
+                                field.select();
                                 return [2];
                         }
                     });
@@ -805,8 +982,8 @@ var BrickyEditor;
                 var _this = this;
                 var field = this;
                 var $field = this.$field;
-                if (!$field.is('[contenteditable]')) {
-                    $field.attr('contenteditable', 'true');
+                if (!$field.is(BrickyEditor.Selectors.selectorContentEditable)) {
+                    $field.attr(BrickyEditor.Selectors.attrContentEditable, 'true');
                 }
                 var html = this.data.html || this.$field.html();
                 this.setHtml(html, false);
@@ -825,7 +1002,7 @@ var BrickyEditor;
                     document.execCommand("insertHTML", false, text);
                 })
                     .on('click', function (ev) {
-                    field.selectBlock();
+                    field.select();
                     ev.stopPropagation();
                     return false;
                 });
@@ -838,6 +1015,11 @@ var BrickyEditor;
                 }
                 this.updateProperty('html', value, fireUpdate);
             };
+            HtmlField.prototype.getEl = function () {
+                var $el = _super.prototype.getEl.call(this);
+                $el.removeAttr(BrickyEditor.Selectors.attrContentEditable);
+                return $el;
+            };
             return HtmlField;
         }(Fields.BaseField));
         Fields.HtmlField = HtmlField;
@@ -865,19 +1047,21 @@ var BrickyEditor;
                             case 0: return [4, BrickyEditor.Editor.UI.modal.promptAsync(field.getPromptParams())];
                             case 1:
                                 fields = _a.sent();
-                                file = fields.getValue('file');
-                                src = fields.getValue('src');
-                                if (file) {
-                                    field.setFile(file);
-                                    field.setSrc(null);
-                                }
-                                else if (src) {
-                                    field.setSrc(src);
-                                    field.setFile(null);
+                                if (fields != null) {
+                                    file = fields.getValue('file');
+                                    src = fields.getValue('src');
+                                    if (file) {
+                                        field.setFile(file);
+                                        field.setSrc(null);
+                                    }
+                                    else if (src) {
+                                        field.setSrc(src);
+                                        field.setFile(null);
+                                    }
+                                    alt = fields.getValue('alt');
+                                    field.setAlt(alt);
                                 }
-                                alt = fields.getValue('alt');
-                                field.setAlt(alt);
-                                field.selectBlock();
+                                field.select();
                                 return [2];
                         }
                     });
@@ -885,9 +1069,9 @@ var BrickyEditor;
             };
             ImageField.prototype.getPromptParams = function () {
                 return [
-                    new BrickyEditor.Prompt.PromptParameter('src', 'Image Link', this.data.url, 'image url'),
-                    new BrickyEditor.Prompt.PromptParameterImage('file', 'or Upload file', this.data.file, 'select file'),
-                    new BrickyEditor.Prompt.PromptParameter('alt', 'Alt', this.data.alt, 'alt attribute value '),
+                    new BrickyEditor.Prompt.PromptParameter('src', BrickyEditor.EditorStrings.imageFieldLinkTitle, this.data.url, BrickyEditor.EditorStrings.imageFieldLinkPlaceholder),
+                    new BrickyEditor.Prompt.PromptParameterImage('file', BrickyEditor.EditorStrings.imageFieldUploadTitle, this.data.file, BrickyEditor.EditorStrings.imageFieldUploadButton),
+                    new BrickyEditor.Prompt.PromptParameter('alt', BrickyEditor.EditorStrings.imageFieldAltTitle, this.data.alt, BrickyEditor.EditorStrings.imageFieldAltPlaceholder),
                 ];
             };
             ImageField.prototype.setSrc = function (src, fireUpdate) {
@@ -993,7 +1177,7 @@ var BrickyEditor;
             PromptParameterImage.prototype.getEditor = function () {
                 var field = this;
                 var img = this.value && this.value.fileContent ? this.value.fileContent : "";
-                var $editor = $("\n                <div class='bre-image-input'>\n                    <label for=\"" + this.key + "\">\n                        Select file...\n                    </label>                        \n                    <img src=\"" + img + "\"/>                    \n                    <input type=\"file\" id=\"" + this.key + "\" class=\"bre-input\" placeholder=\"" + this.placeholder + "\">\n                </div>\n                <small class='bre-image-input-filename'></small>");
+                var $editor = $("\n                <div class='bre-image-input'>\n                    <label for=\"" + this.key + "\">\n                        " + this.placeholder + "\n                    </label>                        \n                    <img src=\"" + img + "\"/>                    \n                    <input type=\"file\" id=\"" + this.key + "\" class=\"bre-input\" placeholder=\"" + this.placeholder + "\">\n                </div>\n                <small class='bre-image-input-filename'></small>");
                 var $file = $('input', $editor);
                 var $filePreview = $('img', $editor);
                 var $fileName = $('.bre-image-input-filename', $editor);
@@ -1110,6 +1294,173 @@ var BrickyEditor;
     })(Prompt = BrickyEditor.Prompt || (BrickyEditor.Prompt = {}));
 })(BrickyEditor || (BrickyEditor = {}));
 var BrickyEditor;
+(function (BrickyEditor) {
+    var Services;
+    (function (Services) {
+        var EmbedService = (function () {
+            function EmbedService() {
+            }
+            EmbedService.getEmbedAsync = function (embedUrl) {
+                var _this = this;
+                var url = "https://noembed.com/embed?url=" + embedUrl;
+                return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                    var params, data, err_1;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                params = { url: url, type: "get", dataType: "jsonp" };
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, , 4]);
+                                return [4, $.ajax(params)];
+                            case 2:
+                                data = _a.sent();
+                                resolve(data);
+                                return [3, 4];
+                            case 3:
+                                err_1 = _a.sent();
+                                reject(err_1);
+                                return [3, 4];
+                            case 4: return [2];
+                        }
+                    });
+                }); });
+            };
+            EmbedService.processEmbed = function (provider) {
+                switch (provider) {
+                    case EmbedService.Instagram:
+                        if (instgrm) {
+                            instgrm.Embeds.process();
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            };
+            EmbedService.Instagram = 'Instagram';
+            return EmbedService;
+        }());
+        Services.EmbedService = EmbedService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var Services;
+    (function (Services) {
+        var TemplateService = (function () {
+            function TemplateService() {
+            }
+            TemplateService.loadTemplatesAsync = function (url, $editor, onError) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    var templates;
+                    return __generator(this, function (_a) {
+                        this.templates = [];
+                        templates = this.templates;
+                        return [2, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                                var _this = this;
+                                var data, $style, $data, $groups, templates_1, defaultGroupName, group, err_2;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            _a.trys.push([0, 2, , 3]);
+                                            return [4, $.get(url)];
+                                        case 1:
+                                            data = _a.sent();
+                                            $style = $(data).filter('style');
+                                            if ($style && $style.length > 0) {
+                                                $editor.prepend($style);
+                                            }
+                                            $data = $("<div>" + data + "</div>");
+                                            $groups = $(BrickyEditor.Selectors.selectorTemplateGroup, $data);
+                                            $groups.each(function (idx, el) {
+                                                var $group = $(el);
+                                                var templates = _this.getTemplates($group);
+                                                _this.templates.push(new BrickyEditor.TemplateGroup($group.attr('title'), templates));
+                                                $group.remove();
+                                            });
+                                            templates_1 = this.getTemplates($data);
+                                            defaultGroupName = this.templates.length > 0 ? BrickyEditor.EditorStrings.defaultTemplatesGroupName : '';
+                                            group = new BrickyEditor.TemplateGroup(defaultGroupName, templates_1);
+                                            this.templates.push(group);
+                                            resolve(this.templates);
+                                            return [3, 3];
+                                        case 2:
+                                            err_2 = _a.sent();
+                                            onError(BrickyEditor.EditorStrings.errorTemplatesFileNotFound(url));
+                                            reject(err_2);
+                                            return [3, 3];
+                                        case 3: return [2];
+                                    }
+                                });
+                            }); })];
+                    });
+                });
+            };
+            TemplateService.getTemplates = function ($el) {
+                var templates = [];
+                var $templates = $(BrickyEditor.Selectors.selectorTemplate, $el);
+                $templates.each(function (idx, t) {
+                    var template = new BrickyEditor.Template(t);
+                    templates.push(template);
+                });
+                return templates;
+            };
+            TemplateService.getTemplate = function (templateName) {
+                for (var gi = 0; gi < this.templates.length; gi++) {
+                    var group = this.templates[gi];
+                    for (var ti = 0; ti < group.templates.length; ti++) {
+                        var template = group.templates[ti];
+                        if (template.name.breEqualsInvariant(templateName)) {
+                            return template;
+                        }
+                    }
+                }
+                return null;
+            };
+            return TemplateService;
+        }());
+        Services.TemplateService = TemplateService;
+    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var Template = (function () {
+        function Template(el) {
+            var previewSelector = BrickyEditor.Selectors.selectorTemplatePreview;
+            var $template = $(el);
+            var data = $template.data();
+            this.name = data.name;
+            this.category = data.cactegory || [];
+            this.$html = $template.contents().not(previewSelector);
+            this.$preview = $(previewSelector, $template).contents();
+            if (!this.$preview.length) {
+                var block = new BrickyEditor.Block(this, true);
+                var blockEl = block.getHtml(true);
+                this.$preview = $(blockEl);
+            }
+        }
+        Template.prototype.getPreview = function () {
+            var $template = $("<div class='" + BrickyEditor.Selectors.classTemplate + "'></div>");
+            $template.append(this.$preview);
+            return $template;
+        };
+        return Template;
+    }());
+    BrickyEditor.Template = Template;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
+(function (BrickyEditor) {
+    var TemplateGroup = (function () {
+        function TemplateGroup(name, templates) {
+            this.name = name;
+            this.templates = templates;
+        }
+        return TemplateGroup;
+    }());
+    BrickyEditor.TemplateGroup = TemplateGroup;
+})(BrickyEditor || (BrickyEditor = {}));
+var BrickyEditor;
 (function (BrickyEditor) {
     var HtmlTools = (function () {
         function HtmlTools(editor) {
@@ -1231,14 +1582,14 @@ var BrickyEditor;
                 target = a.attr('target');
             }
             return [
-                new BrickyEditor.Prompt.PromptParameter('href', 'Url', href, 'Url'),
-                new BrickyEditor.Prompt.PromptParameter('title', 'Title', title, 'Title'),
-                new BrickyEditor.Prompt.PromptParameterOptions('target', 'Target', [
+                new BrickyEditor.Prompt.PromptParameter('href', BrickyEditor.EditorStrings.htmlEditorLinkUrlTitle, href, BrickyEditor.EditorStrings.htmlEditorLinkUrlPlaceholder),
+                new BrickyEditor.Prompt.PromptParameter('title', BrickyEditor.EditorStrings.htmlEditorLinkTitleTitle, title, BrickyEditor.EditorStrings.htmlEditorLinkTitlePlaceholder),
+                new BrickyEditor.Prompt.PromptParameterOptions('target', BrickyEditor.EditorStrings.htmlEditorLinkTargetTitle, [
                     ['', ''],
-                    ['Blank', '_blank'],
-                    ['Self', '_self'],
-                    ['Parent', '_parent'],
-                    ['Top', '_top'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetBlank, '_blank'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetSelf, '_self'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetParent, '_parent'],
+                    [BrickyEditor.EditorStrings.htmlEditorLinkTargetTop, '_top'],
                 ], target)
             ];
         };
@@ -1293,7 +1644,7 @@ var BrickyEditor;
                 });
                 modal.$cancelBtn.on('click', function () {
                     modal.hideModal();
-                    reject(fields);
+                    resolve(null);
                 });
                 modal.showModal();
             });
@@ -1384,11 +1735,21 @@ var BrickyEditor;
         Selectors.attr = function (attr) {
             return "[" + attr + "]";
         };
-        Selectors.field = 'data-bre-field';
-        Selectors.selectorField = "[" + Selectors.field + "]";
+        Selectors.attrContentEditable = 'contenteditable';
+        Selectors.selectorContentEditable = 'contenteditable';
+        Selectors.attrField = 'data-bre-field';
+        Selectors.selectorField = "[" + Selectors.attrField + "]";
+        Selectors.classEditor = 'bre-editor';
+        Selectors.classTemplate = 'bre-template';
+        Selectors.selectorTemplate = "." + Selectors.classTemplate;
+        Selectors.classTemplateGroup = 'bre-template-group';
+        Selectors.selectorTemplateGroup = "." + Selectors.classTemplateGroup;
+        Selectors.selectorTemplatePreview = '.bre-template-preview';
         Selectors.classMobile = 'brickyeditor-tools-mobile';
         Selectors.htmlToolsCommand = 'data-bre-doc-command';
         Selectors.htmlToolsCommandRange = 'data-bre-doc-command-range';
+        Selectors.selectorFieldSelected = 'bre-field-selected';
+        Selectors.selectorFieldContainer = 'bre-field-container';
         Selectors.selectorHtmlToolsCommand = Selectors.attr(Selectors.htmlToolsCommand);
         Selectors.selectorHtmlToolsCommandRange = Selectors.attr(Selectors.htmlToolsCommandRange);
         return Selectors;
@@ -1438,12 +1799,12 @@ var BrickyEditor;
         };
         UI.prototype.setModal = function () {
             var $modal = $('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>');
-            var $modalCloseBtn = $('<div class="bre-modal-close"><a href="#">close ✖</a></div>');
+            var $modalCloseBtn = $("<div class=\"bre-modal-close\"><a href=\"#\">" + BrickyEditor.EditorStrings.buttonClose + " \u2716</a></div>");
             var $modalContent = $('<div class="bre-modal-content"></div>');
             var $modalForm = $('<form></form>');
             var $modalBtns = $('<div class="bre-btns"></div>');
-            var $modalOk = $('<button type="button" class="bre-btn bre-btn-primary">Ok</button>');
-            var $modalCancel = $('<button type="button" class="bre-btn">Cancel</button>');
+            var $modalOk = $("<button type=\"button\" class=\"bre-btn bre-btn-primary\">" + BrickyEditor.EditorStrings.buttonOk + "</button>");
+            var $modalCancel = $("<button type=\"button\" class=\"bre-btn\">" + BrickyEditor.EditorStrings.buttonCancel + "</button>");
             $modalBtns.append($modalOk);
             $modalBtns.append($modalCancel);
             $modalForm.append($modalBtns);
@@ -1457,22 +1818,39 @@ var BrickyEditor;
         UI.prototype.toggleToolsLoader = function (toggle) {
             this.$toolsLoader.toggle(toggle);
         };
-        UI.prototype.setTemplates = function (templates) {
+        UI.prototype.setTemplates = function (templateGroups) {
             var _this = this;
             var editor = this.editor;
-            templates.forEach(function (template) {
-                var $preview = template.getPreview();
-                $preview.on('click', function () {
-                    editor.addBlock(template);
+            templateGroups.forEach(function (group) {
+                if (group.templates.length === 0)
+                    return;
+                var $header = $("<div class='" + BrickyEditor.Selectors.classTemplateGroup + "'>" + group.name + "</div>");
+                _this.$toolsTemplates.append($header);
+                var $group = $('<div></div>');
+                group.templates.forEach(function (template) {
+                    var $preview = template.getPreview();
+                    $preview.attr('title', template.name);
+                    $preview.on('click', function (ev) {
+                        editor.addBlock(template);
+                        ev.stopPropagation();
+                        return false;
+                    });
+                    $group.append($preview);
                 });
-                _this.$toolsTemplates.append($preview);
+                $header.on('click', function () {
+                    $group.toggle();
+                });
+                _this.$toolsTemplates.append($group);
             });
+            ;
         };
         UI.initBtnDeck = function ($btnsDeck) {
             var $btns = $('.bre-btn', $btnsDeck);
             var $firstBtn = $btns.eq(0);
-            $firstBtn.on('click', function () {
+            $firstBtn.on('click', function (ev) {
                 UI.toggleBtnDeck($btnsDeck);
+                ev.stopPropagation();
+                return false;
             });
         };
         UI.toggleBtnDeck = function ($btnsDeck, isOn) {
@@ -1500,115 +1878,3 @@ var BrickyEditor;
     }());
     BrickyEditor.UI = UI;
 })(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    var Services;
-    (function (Services) {
-        var EmbedService = (function () {
-            function EmbedService() {
-            }
-            EmbedService.getEmbedAsync = function (embedUrl) {
-                var _this = this;
-                var url = "https://noembed.com/embed?url=" + embedUrl;
-                return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                    var params, data, err_1;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                params = { url: url, type: "get", dataType: "jsonp" };
-                                _a.label = 1;
-                            case 1:
-                                _a.trys.push([1, 3, , 4]);
-                                return [4, $.ajax(params)];
-                            case 2:
-                                data = _a.sent();
-                                resolve(data);
-                                return [3, 4];
-                            case 3:
-                                err_1 = _a.sent();
-                                reject(err_1);
-                                return [3, 4];
-                            case 4: return [2];
-                        }
-                    });
-                }); });
-            };
-            EmbedService.processEmbed = function (provider) {
-                switch (provider) {
-                    case EmbedService.Instagram:
-                        if (instgrm) {
-                            instgrm.Embeds.process();
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            };
-            EmbedService.Instagram = 'Instagram';
-            return EmbedService;
-        }());
-        Services.EmbedService = EmbedService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
-var BrickyEditor;
-(function (BrickyEditor) {
-    var Services;
-    (function (Services) {
-        var TemplateService = (function () {
-            function TemplateService() {
-            }
-            TemplateService.loadTemplatesAsync = function (editor) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var _this = this;
-                    var templates, url;
-                    return __generator(this, function (_a) {
-                        this.templates = [];
-                        templates = this.templates;
-                        url = editor.options.templatesUrl;
-                        return [2, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                                var _this = this;
-                                var data, $style, $templates, err_2;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            _a.trys.push([0, 2, , 3]);
-                                            return [4, $.get(url)];
-                                        case 1:
-                                            data = _a.sent();
-                                            $style = $(data).filter('style');
-                                            if ($style && $style.length > 0) {
-                                                editor.$editor.prepend($style);
-                                            }
-                                            $templates = $(data).filter('.bre-template');
-                                            $templates.each(function (idx, t) {
-                                                var template = new BrickyEditor.Template(t);
-                                                _this.templates.push(template);
-                                            });
-                                            resolve(this.templates);
-                                            return [3, 3];
-                                        case 2:
-                                            err_2 = _a.sent();
-                                            console.log('Templates file not found.');
-                                            reject(err_2);
-                                            return [3, 3];
-                                        case 3: return [2];
-                                    }
-                                });
-                            }); })];
-                    });
-                });
-            };
-            TemplateService.getTemplate = function (templateName) {
-                for (var i = 0; i < this.templates.length; i++) {
-                    var template = this.templates[i];
-                    if (template.name.toLowerCase() === templateName.toLowerCase()) {
-                        return template;
-                    }
-                }
-                return null;
-            };
-            return TemplateService;
-        }());
-        Services.TemplateService = TemplateService;
-    })(Services = BrickyEditor.Services || (BrickyEditor.Services = {}));
-})(BrickyEditor || (BrickyEditor = {}));
diff --git a/dist/jquery.brickyeditor.min.css b/dist/jquery.brickyeditor.min.css
index c920b67..cc3b64d 100644
--- a/dist/jquery.brickyeditor.min.css
+++ b/dist/jquery.brickyeditor.min.css
@@ -1 +1 @@
-.bre-block-wrapper [contenteditable]:focus{outline:0}.bre-block-wrapper.bre-active{outline:1px dotted #92819f}.bre-block-wrapper.bre-selected{border-left:1px solid #92819f;margin-left:-6px;padding-left:5px}.bre-block-wrapper.bre-selected>.bre-block-tools{display:block}.bre-block-wrapper.bre-selected.bre-active{outline:0 dotted #92819f}.bre-block-wrapper .bre-block-tools{background:rgba(255,255,255,.85);border-radius:1rem;width:36px;margin-left:-42px;position:absolute;display:none;z-index:101}@media (max-width:767px){.bre-block-wrapper .bre-block-tools{margin-left:0;margin-top:-42px}.bre-block-wrapper.bre-selected{border-top:1px solid #92819f;margin-top:-6px;padding-top:5px;border-left-width:0;margin-left:0;padding-left:0}}.bre-btn{width:2rem;height:2rem;cursor:pointer;border-width:0;background:#fff;border:1px solid #92819f;color:#92819f;text-align:center;font-size:1rem;line-height:2rem;-webkit-transition:all .25s ease-in 0s;-moz-transition:all .25s ease-in 0s;transition:all .25s ease-in 0s}.bre-btn:hover{color:#fff;background:#92819f}.bre-btn:focus{outline-style:none}.bre-btn-primary{color:#fff;background-color:#92819f}.bre-btn-primary:hover{background-color:#796687}.bre-btns{text-align:right}.bre-btns .bre-btn{width:auto;text-transform:uppercase;padding:0 1rem;margin-right:.25rem;font-size:.7rem}.bre-btns .bre-btn:last-child{margin-right:0}.bre-btn-group .bre-btn{float:left;border-radius:0;border-left:0;padding:0}.bre-btn-group .bre-btn:first-child{border-left:1px solid #92819f;border-radius:.5rem 0 0 .5rem}.bre-btn-group .bre-btn:last-child{border-radius:0 .5rem .5rem 0}.bre-btn-deck{position:relative;width:2rem}.bre-btn-deck .bre-btn{padding:0;top:0;left:0;opacity:0;border-radius:2rem;position:absolute;z-index:101}.bre-btn-deck .bre-btn:first-child{opacity:1;z-index:102}.bre-btn-deck .bre-btn-active{background-color:#92819f;color:#fff;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.bre-html-tools{position:absolute;z-index:101}.bre label.bre-label{display:block;font-weight:700;font-size:.8rem;color:#333;margin-bottom:.3rem}.bre input.bre-input,.bre select.bre-select,.bre textarea.bre-textarea{height:2rem;vertical-align:middle;display:inline-block;max-width:100%;width:100%;background:#fff;font-size:.8rem;font-weight:300;color:#555;border:1px solid #ddd;padding:0 .8rem;margin-bottom:.5rem;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bre input.bre-input:focus,.bre select.bre-select:focus,.bre textarea.bre-textarea:focus{outline:0;border-color:#92819f}.bre input.bre-input:-ms-input-placeholder,.bre input.bre-input::-moz-placeholder,.bre input.bre-input::-webkit-input-placeholder,.bre input.bre-input::placeholder,.bre select.bre-select:-ms-input-placeholder,.bre select.bre-select::-moz-placeholder,.bre select.bre-select::-webkit-input-placeholder,.bre select.bre-select::placeholder,.bre textarea.bre-textarea:-ms-input-placeholder,.bre textarea.bre-textarea::-moz-placeholder,.bre textarea.bre-textarea::-webkit-input-placeholder,.bre textarea.bre-textarea::placeholder{color:#eee!important}.bre .bre-image-input{text-align:center}.bre .bre-image-input label{cursor:pointer;background:0 0;vertical-align:middle;overflow:visible;box-sizing:border-box;margin:0;padding:0 2rem;font-size:.7rem;line-height:1.75rem;color:#555;text-align:center;text-decoration:none;text-transform:uppercase;border:1px solid #ddd;min-height:2rem;width:100%;max-width:100%}.bre .bre-image-input label:hover{outline:0;border-color:#92819f;color:#92819f}.bre .bre-image-input img.bre-loaded{max-width:100%;height:300px;margin:.5rem 0}.bre .bre-image-input input[type=file]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.bre-modal{display:none;position:fixed;z-index:102;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.bre-modal .bre-modal-placeholder{background-color:#fefefe;margin:20px auto;min-width:400px;max-width:800px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3)}.bre-modal .bre-modal-placeholder .bre-modal-close{text-align:right;padding:.5rem 1.5rem 0 0}.bre-modal .bre-modal-placeholder .bre-modal-close a{text-decoration:none;color:#000;font-weight:700;font-size:.8rem}.bre-modal .bre-modal-placeholder form{padding:0 1.5rem 1.5rem 1.5rem}.bre-tools{position:fixed;width:30%;max-width:245px;height:100%;top:0;right:0;z-index:101;background:rgba(238,238,238,.5);-webkit-transition:all .15s ease-in 0s;-moz-transition:all .15s ease-in 0s;transition:all .15s ease-in 0s}.bre-tools.bre-tools-templates-compact{width:100%}.bre-tools.bre-tools-templates-compact.bre-tools-collapsed{right:-245px}.bre-tools .bre-tools-toggle{border:0;cursor:pointer;border-radius:.5rem 0 0 .5rem;position:fixed;background:rgba(238,238,238,.5);width:2rem;height:2rem;margin-left:-2rem;margin-top:2rem;padding:0}.bre-tools .bre-tools-toggle:hover{color:#fff}.bre-tools .bre-tools-toggle:focus{outline-style:none}.bre-tools .bre-tools-toggle>div{color:#92819f;line-height:2rem;font-weight:700;-webkit-transition:all .15s ease-in 0s;-moz-transition:all .15s ease-in 0s;transition:all .15s ease-in 0s}.bre-tools .bre-tools-toggle-collapsed div{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.bre-tools .bre-tools-templates{width:100%;height:99%;overflow:auto}.bre-tools .bre-tools-templates .bre-template{cursor:pointer;background:#fff;user-select:none;padding:.5rem;margin:.5rem;-webkit-box-shadow:0 1px 5px 0 rgba(115,115,115,.2);-moz-box-shadow:0 1px 5px 0 rgba(115,115,115,.2);box-shadow:0 1px 5px 0 rgba(115,115,115,.2)}.bre-tools .bre-tools-templates .bre-template>*,.bre-tools .bre-tools-templates .bre-template>*>*{zoom:.2}.bre-tools .bre-tools-templates .bre-template:hover{background:#f2f2f2}@media (min-width:576px) and (max-width:1023px){.bre-tools .bre-tools-templates .bre-template>*{zoom:.3}}@media (min-width:1024px){.bre-tools .bre-tools-templates .bre-template>*{zoom:.4}}.bre-tools-collapsed{right:-196px}.bre *{font-family:sans-serif}.bre-editor{position:relative}
\ No newline at end of file
+.bre-block-wrapper [contenteditable]:focus{outline:0}.bre-block-wrapper.bre-active{outline:1px dotted #92819f}.bre-block-wrapper.bre-selected{border-left:1px solid #92819f;margin-left:-6px;padding-left:5px}.bre-block-wrapper.bre-selected>.bre-block-tools{display:block}.bre-block-wrapper.bre-selected.bre-active{outline:0 dotted #92819f}.bre-block-wrapper .bre-block-tools{background:rgba(255,255,255,.85);border-radius:1rem;width:36px;margin-left:-42px;position:absolute;display:none;z-index:101}@media (max-width:767px){.bre-block-wrapper .bre-block-tools{margin-left:0;margin-top:-42px}.bre-block-wrapper.bre-selected{border-top:1px solid #92819f;margin-top:-6px;padding-top:5px;border-left-width:0;margin-left:0;padding-left:0}}.bre-btn{width:2rem;height:2rem;cursor:pointer;border-width:0;background:#fff;border:1px solid #92819f;color:#92819f;text-align:center;font-size:1rem;line-height:2rem;-webkit-transition:all .25s ease-in 0s;-moz-transition:all .25s ease-in 0s;transition:all .25s ease-in 0s}.bre-btn:hover{color:#fff;background:#92819f}.bre-btn:focus{outline-style:none}.bre-btn-primary{color:#fff;background-color:#92819f}.bre-btn-primary:hover{background-color:#796687}.bre-btns{text-align:right}.bre-btns .bre-btn{width:auto;text-transform:uppercase;padding:0 1rem;margin-right:.25rem;font-size:.7rem}.bre-btns .bre-btn:last-child{margin-right:0}.bre-btn-group .bre-btn{float:left;border-radius:0;border-left:0;padding:0}.bre-btn-group .bre-btn:first-child{border-left:1px solid #92819f;border-radius:.5rem 0 0 .5rem}.bre-btn-group .bre-btn:last-child{border-radius:0 .5rem .5rem 0}.bre-btn-deck{position:relative;width:2rem}.bre-btn-deck .bre-btn{padding:0;top:0;left:0;opacity:0;border-radius:2rem;position:absolute;z-index:101}.bre-btn-deck .bre-btn:first-child{opacity:1;z-index:102}.bre-btn-deck .bre-btn-active{background-color:#92819f;color:#fff;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.bre-html-tools{position:absolute;z-index:101}.bre label.bre-label{display:block;font-weight:700;font-size:.8rem;color:#333;margin-bottom:.3rem}.bre input.bre-input,.bre select.bre-select,.bre textarea.bre-textarea{height:2rem;vertical-align:middle;display:inline-block;max-width:100%;width:100%;background:#fff;font-size:.8rem;font-weight:300;color:#555;border:1px solid #ddd;padding:0 .8rem;margin-bottom:.5rem;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bre input.bre-input:focus,.bre select.bre-select:focus,.bre textarea.bre-textarea:focus{outline:0;border-color:#92819f}.bre input.bre-input:-ms-input-placeholder,.bre input.bre-input::-moz-placeholder,.bre input.bre-input::-webkit-input-placeholder,.bre input.bre-input::placeholder,.bre select.bre-select:-ms-input-placeholder,.bre select.bre-select::-moz-placeholder,.bre select.bre-select::-webkit-input-placeholder,.bre select.bre-select::placeholder,.bre textarea.bre-textarea:-ms-input-placeholder,.bre textarea.bre-textarea::-moz-placeholder,.bre textarea.bre-textarea::-webkit-input-placeholder,.bre textarea.bre-textarea::placeholder{color:#eee!important}.bre .bre-image-input{text-align:center}.bre .bre-image-input label{cursor:pointer;background:0 0;vertical-align:middle;overflow:visible;box-sizing:border-box;margin:0;padding:0 2rem;font-size:.7rem;line-height:1.75rem;color:#555;text-align:center;text-decoration:none;text-transform:uppercase;border:1px solid #ddd;min-height:2rem;width:100%;max-width:100%}.bre .bre-image-input label:hover{outline:0;border-color:#92819f;color:#92819f}.bre .bre-image-input img.bre-loaded{max-width:100%;height:300px;margin:.5rem 0}.bre .bre-image-input input[type=file]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.bre-modal{display:none;position:fixed;z-index:102;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.bre-modal .bre-modal-placeholder{background-color:#fefefe;margin:20px auto;min-width:400px;max-width:800px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3)}.bre-modal .bre-modal-placeholder .bre-modal-close{text-align:right;padding:.5rem 1.5rem 0 0}.bre-modal .bre-modal-placeholder .bre-modal-close a{text-decoration:none;color:#000;font-weight:700;font-size:.8rem}.bre-modal .bre-modal-placeholder form{padding:0 1.5rem 1.5rem 1.5rem}.bre-tools{position:fixed;width:30%;max-width:245px;height:100%;top:0;right:0;z-index:101;background:rgba(238,238,238,.5);-webkit-transition:all .15s ease-in 0s;-moz-transition:all .15s ease-in 0s;transition:all .15s ease-in 0s}.bre-tools.bre-tools-templates-compact{width:100%}.bre-tools.bre-tools-templates-compact.bre-tools-collapsed{right:-245px}.bre-tools .bre-tools-toggle{border:0;cursor:pointer;border-radius:.5rem 0 0 .5rem;position:fixed;background:rgba(238,238,238,.5);width:2rem;height:2rem;margin-left:-2rem;margin-top:2rem;padding:0}.bre-tools .bre-tools-toggle:hover{color:#fff}.bre-tools .bre-tools-toggle:focus{outline-style:none}.bre-tools .bre-tools-toggle>div{color:#92819f;line-height:2rem;font-weight:700;-webkit-transition:all .15s ease-in 0s;-moz-transition:all .15s ease-in 0s;transition:all .15s ease-in 0s}.bre-tools .bre-tools-toggle-collapsed div{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.bre-tools .bre-tools-templates{width:100%;height:99%;overflow:auto}.bre-tools .bre-tools-templates .bre-template-group{color:#92819f;font-size:.5rem;padding:.5rem .5rem 0 .5rem;font-weight:500;text-transform:uppercase;cursor:pointer}.bre-tools .bre-tools-templates .bre-template{cursor:pointer;background:#fff;user-select:none;padding:.5rem;margin:.5rem;-webkit-box-shadow:0 1px 5px 0 rgba(115,115,115,.2);-moz-box-shadow:0 1px 5px 0 rgba(115,115,115,.2);box-shadow:0 1px 5px 0 rgba(115,115,115,.2)}.bre-tools .bre-tools-templates .bre-template>*,.bre-tools .bre-tools-templates .bre-template>*>*{zoom:.2}.bre-tools .bre-tools-templates .bre-template:hover{background:#f2f2f2}.bre-tools .bre-tools-templates .bre-template .bre-field-container{padding:1rem;border:1px solid #ddd;border-right-width:0;text-align:center;font-weight:700;font-size:1rem;color:#92819f}.bre-tools .bre-tools-templates .bre-template .bre-field-container::after{content:'\2295'}.bre-tools .bre-tools-templates .bre-template .bre-field-container:last-child{border-right-width:1px}@media (min-width:576px) and (max-width:1023px){.bre-tools .bre-tools-templates .bre-template>*{zoom:.3}}@media (min-width:1024px){.bre-tools .bre-tools-templates .bre-template>*{zoom:.4}}.bre-tools-collapsed{right:-196px}.bre-field-selected{outline:dotted 1px #ddd}.bre *{font-family:sans-serif}.bre-editor{position:relative}
\ No newline at end of file
diff --git a/dist/jquery.brickyeditor.min.js b/dist/jquery.brickyeditor.min.js
index d46d163..66e749d 100644
--- a/dist/jquery.brickyeditor.min.js
+++ b/dist/jquery.brickyeditor.min.js
@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))(function(n,r){function l(t){try{c(i.next(t))}catch(t){r(t)}}function s(t){try{c(i.throw(t))}catch(t){r(t)}}function c(t){t.done?n(t.value):new o(function(e){e(t.value)}).then(l,s)}c((i=i.apply(t,e||[])).next())})},__generator=this&&this.__generator||function(t,e){function o(t){return function(e){return i([t,e])}}function i(o){if(n)throw new TypeError("Generator is already executing.");for(;c;)try{if(n=1,r&&(l=r[2&o[0]?"return":o[0]?"throw":"next"])&&!(l=l.call(r,o[1])).done)return l;switch(r=0,l&&(o=[0,l.value]),o[0]){case 0:case 1:l=o;break;case 4:return c.label++,{value:o[1],done:!1};case 5:c.label++,r=o[1],o=[0];continue;case 7:o=c.ops.pop(),c.trys.pop();continue;default:if(l=c.trys,!(l=l.length>0&&l[l.length-1])&&(6===o[0]||2===o[0])){c=0;continue}if(3===o[0]&&(!l||o[1]>l[0]&&o[1]<l[3])){c.label=o[1];break}if(6===o[0]&&c.label<l[1]){c.label=l[1],l=o;break}if(l&&c.label<l[2]){c.label=l[2],c.ops.push(o);break}l[2]&&c.ops.pop(),c.trys.pop();continue}o=e.call(t,c)}catch(t){o=[6,t],r=0}finally{n=l=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}var n,r,l,s,c={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]};return s={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s},__extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])};return function(e,o){function i(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(i.prototype=o.prototype,new i)}}();String.prototype.breContains=function(t){return this.indexOf(t)>=0},String.prototype.breStartsWith=function(t){return 0==this.indexOf(t)},String.prototype.breTotalTrim=function(){return this?this.replace(/\s\s+/g," ").trim():""},String.prototype.breEqualsInvariant=function(t){return this.toLowerCase()===t.toLowerCase()},Array.prototype.find||(Array.prototype.find=function(t){if(null==this)throw new TypeError("Array.prototype.find called on null or undefined");if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var e,o=Object(this),i=o.length>>>0,n=arguments[1],r=0;r<i;r++)if(e=o[r],t.call(n,e,r,o))return e});var BrickyEditor;!function(t){var e=function(){function t(){}return t.getSelectedText=function(){var t="",e=document;return window.getSelection?t=window.getSelection().toString():e.selection&&"Control"!=e.selection.type&&(t=e.selection.createRange().text),t},t.propsEach=function(t,e){for(var o in t)if(t.hasOwnProperty(o)){var i=t[o];e(o,i)}},t.propsFilterKeys=function(e,o,i){var n=[];return t.propsEach(e,function(t,e){o(t,e)&&n.push(t)}),i&&n.push(i),n},t}();t.Common=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(o,i){this.blocks=[],this.compactTools=null,t.Fields.BaseField.registerCommonFields(),this.$editor=o,this.$editor.addClass("bre-editor"),this.options=new t.EditorOptions(i),e.UI=new t.UI(this)}return Object.defineProperty(e.prototype,"selectedBlockIndex",{get:function(){return this.selectedBlock?this.blocks.indexOf(this.selectedBlock):-1},enumerable:!0,configurable:!0}),e.prototype.initAsync=function(){return __awaiter(this,void 0,void 0,function(){var o,i;return __generator(this,function(n){switch(n.label){case 0:return e.UI.toggleToolsLoader(!0),[4,t.Services.TemplateService.loadTemplatesAsync(this)];case 1:return o=n.sent(),e.UI.toggleToolsLoader(!1),e.UI.setTemplates(o),[4,this.tryLoadInitialBlocksAsync()];case 2:return i=n.sent(),this.loadBlocks(i),this.isLoaded=!0,this.trigger(t.Events.onLoad,this),[2]}})})},e.prototype.tryLoadInitialBlocksAsync=function(){return __awaiter(this,void 0,void 0,function(){var t,e=this;return __generator(this,function(o){return t=this.options.blocksUrl,[2,new Promise(function(o,i){return __awaiter(e,void 0,void 0,function(){var e,n;return __generator(this,function(r){switch(r.label){case 0:if(!t)return[3,5];r.label=1;case 1:return r.trys.push([1,3,,4]),[4,$.get(t)];case 2:return e=r.sent(),o(e),[3,4];case 3:return n=r.sent(),console.log("Blocks file not found."),i(n),[3,4];case 4:return[3,6];case 5:o(this.options.blocks?this.options.blocks:null),r.label=6;case 6:return[2]}})})})]})})},e.prototype.tryBindFormSubmit=function(){var t=this,e=this.options.formSelector?$(this.options.formSelector):null,o=this.options.inputSelector?$(this.options.inputSelector):null;e&&o&&0!=e.length&&0!=o.length&&e.on("submit",function(){return o.val(JSON.stringify(t.getData())),!0})},e.prototype.bindFormSubmit=function(){var t=this,e=this.options.formSelector?$(this.options.formSelector):null,o=this.options.inputSelector?$(this.options.inputSelector):null;e&&o&&0!=e.length&&0!=o.length&&e.on("submit",function(){return o.val(JSON.stringify(t.getData())),!0})},e.prototype.getData=function(){var t=this,e=[];return this.blocks.forEach(function(o){e.push(o.getData(t.options.ignoreHtml))}),e},e.prototype.getHtml=function(){var t=[];return this.blocks.forEach(function(e){t.push(e.getHtml(!0))}),t.join("\n")},e.prototype.loadBlocks=function(e){var o=this;e&&e.length&&e.forEach(function(e){var i=t.Services.TemplateService.getTemplate(e.template);i?o.addBlock(i,e.fields,null,!1):console.log("Template "+e.template+" not found.")})},e.prototype.addBlock=function(e,o,i,n){var r=this;void 0===n&&(n=!0);var l=function(e,o,i,n){r.trigger(t.Events.onBlockUpdate,{block:e,property:o,oldValue:i,newValue:n}),r.trigger(t.Events.onChange,{blocks:r.getData(),html:r.getHtml()})},s=new t.Block(e,!1,o,function(t){return r.deleteBlock(t)},function(t){return r.selectBlock(t)},function(t){return r.deselectBlock(t)},function(t){return r.copyBlock(t)},function(t,e){return r.moveBlock(t,e)},l);this.insertBlock(s,i),n&&(s.select(),s.scrollTo())},e.prototype.insertBlock=function(e,o){o=o||this.blocks.length,this.selectedBlock&&(o=this.selectedBlockIndex+1),this.blocks.splice(o,0,e),0==o?this.$editor.append(e.ui.$editor):this.blocks[o-1].ui.$editor.after(e.ui.$editor),this.isLoaded&&(this.trigger(t.Events.onBlockAdd,{block:e,idx:o}),this.trigger(t.Events.onChange,{blocks:this.getData(),html:this.getHtml()}))},e.prototype.deleteBlock=function(e){var o=this.blocks.indexOf(e);this.blocks.splice(o,1),e=null,o<this.blocks.length?this.blocks[o].select():this.blocks.length>0?this.blocks[o-1].select():this.selectedBlock=null,this.trigger(t.Events.onBlockDelete,{block:e,idx:o}),this.trigger(t.Events.onChange,{blocks:this.getData(),html:this.getHtml()})},e.prototype.moveBlock=function(e,o){var i=this.blocks.indexOf(e),n=i+o;if(!(n>=this.blocks.length||n<0)){var r=this.blocks[n].ui.$editor;o>0?r.after(e.ui.$editor):o<0&&r.before(e.ui.$editor),this.blocks.splice(i,1),this.blocks.splice(n,0,e),this.trigger(t.Events.onBlockMove,{block:e,from:i,to:n}),this.trigger(t.Events.onChange,{blocks:this.getData(),html:this.getHtml()}),e.scrollTo()}},e.prototype.copyBlock=function(t){var e=this.blocks.indexOf(t)+1;this.addBlock(t.template,t.getData().fields,e,!0)},e.prototype.selectBlock=function(e){this.selectedBlock!==e&&(this.selectedBlock&&this.selectedBlock.deselect(),this.selectedBlock=e,this.trigger(t.Events.onBlockSelect,{block:e}))},e.prototype.deselectBlock=function(e){this.selectedBlock=null,this.trigger(t.Events.onBlockDeselect,{block:e})},e.prototype.trigger=function(e,o){var i=this;this.$editor.trigger("bre."+e,o),t.Common.propsEach(i.options,function(t,i){t.breEqualsInvariant(e)&&i&&i(o)})},e}();t.Editor=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t){this.templatesUrl="templates/bootstrap4.html",this.compactTools=null,this.compactToolsWidth=768,this.ignoreHtml=null,this.htmlToolsButtons=null,this.templatesUrl=t.templatesUrl||this.templatesUrl,this.onLoad=t.onLoad||t.onload,this.onChange=t.onChange,this.onBlockAdd=t.onBlockAdd,this.onBlockDelete=t.onBlockDelete,this.onBlockMove=t.onBlockMove,this.onBlockSelect=t.onBlockSelect,this.onBlockDeselect=t.onBlockDeselect,this.onBlockUpdate=t.onBlockUpdate,this.blocksUrl=t.blocksUrl||null,this.blocks=t.blocks||null,this.compactTools=t.compactTools,this.ignoreHtml=t.ignoreHtml||!1,this.htmlToolsButtons=t.htmlToolsButtons||null,this.formSelector=t.formSelector||null,this.inputSelector=t.inputSelector||null}return t}();t.EditorOptions=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.onLoad="onLoad",t.onChange="onChange",t.onBlockAdd="onBlockAdd",t.onBlockDelete="onBlockDelete",t.onBlockMove="onBlockMove",t.onBlockSelect="onBlockSelect",t.onBlockDeselect="onBlockDeselect",t.onBlockUpdate="onBlockUpdate",t}();t.Events=e}(BrickyEditor||(BrickyEditor={})),function(t){t.fn.brickyeditor=function(e){var o=new BrickyEditor.Editor(t(this),e);return o.initAsync(),o}}(jQuery);var BrickyEditor;!function(t){var e=function(){function e(e){var o=$(e),i=o.data();if(this.name=i.name,this.category=i.cactegory||[],this.$html=o.contents().not(".bre-template-preview"),this.$preview=$(".bre-template-preview",o).contents(),!this.$preview.length){var n=new t.Block(this,!0),r=n.getHtml(!0);this.$preview=$(r)}}return e.prototype.getPreview=function(){var t=$("<div class='bre-template'></div>");return t.append(this.$preview),t},e}();t.Template=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(e,o,i,n,r,l,s,c,a){var u=this;this.template=e,this.onDelete=n,this.onSelect=r,this.onDeselect=l,this.onCopy=s,this.onMove=c,this.onUpdate=a,this.fields=[],this.template=e;var d=this,h=e.$html.clone();d.bindFields(h,i);var p=this.getActions();this.ui=new t.BlockUI(h,o,p,function(){return u.select()})}return e.prototype.bindFields=function(e,o){var i=this,n=this;e.find(t.Selectors.selectorField).addBack(t.Selectors.selectorField).each(function(e,r){var l=function(t,e,o){i.onUpdate&&i.onUpdate(n,t,e,o)},s=$(r),c=t.Fields.BaseField.createField(s,o,function(){return n.select()},l);i.fields.push(c)})},e.prototype.getActions=function(){var e=this;return[new t.BlockUIAction("ellipsis-h"),new t.BlockUIAction("trash-o",function(){return e.delete()}),new t.BlockUIAction("copy",function(){return e.clone()}),new t.BlockUIAction("angle-up",function(){return e.move(-1)}),new t.BlockUIAction("angle-down",function(){return e.move(1)})]},e.prototype.delete=function(){this.ui.delete(),this.onDelete(this)},e.prototype.move=function(t){this.onMove(this,t)},e.prototype.clone=function(){this.onCopy(this)},e.prototype.select=function(){this.ui.toggleSelection(!0),this.onSelect(this)},e.prototype.deselect=function(){this.ui.toggleSelection(!1),this.onDeselect(this)},e.prototype.scrollTo=function(){var t=this.ui.$editor.offset().top-100;t=t>0?t:0,$("html, body").animate({scrollTop:t},"fast")},e.prototype.getData=function(t){var e=[];this.fields.forEach(function(t){e.push(t.data)});var o={template:this.template.name,fields:e};return t||(o.html=this.getHtml(!0)),o},e.prototype.getHtml=function(t,e){void 0===e&&(e=!1);var o=this.ui.$block.clone(!1,!1).wrap("<div></div>").parent();return $(".bre-temp-container",o).each(function(t,e){var o=$(e);o.replaceWith(o.children())}),["contenteditable","data-bre-field"].forEach(function(t){$("["+t+"]",o).each(function(e,o){o.removeAttribute(t)})}),t?o.html().breTotalTrim():o.html()},e}();t.Block=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t,e,o){this.icon=t,this.action=e,this.title=o}return t}();t.BlockAction=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t,e,o,i){this.$block=t,this.onSelect=i,e||this.buildEditorUI(o)}return e.prototype.delete=function(){this.$editor.remove()},e.prototype.toggleSelection=function(t){this.$editor.toggleClass("bre-selected",t)},e.prototype.buildEditorUI=function(e){var o=this;this.$tools=$('<div class="bre-block-tools bre-btn-deck"></div>'),e.forEach(function(t){var e=o.buildButton(t);o.$tools.append(e)}),t.UI.initBtnDeck(this.$tools),this.$editor=$('<div class="bre-block-wrapper"></div>'),this.$editor.append(this.$tools),this.$editor.append(this.$block),this.$editor.hover(function(){o.$editor.addClass("bre-active")},function(){o.$editor.removeClass("bre-active")}),this.$block.on("click",function(){return o.onSelect()})},e.prototype.buildButton=function(t){var e=$('<button type="button" class="bre-btn"><i class="fa fa-'+t.icon+'"></i></button>');return t.action&&e.on("click",function(){return t.action()}),e},e}();t.BlockUI=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t,e,o){this.icon=t,this.action=e,this.title=o}return t}();t.BlockUIAction=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function e(t,e,o,i){this.$field=t,this.data=e,this.onSelect=o,this.onUpdate=i,this.bind()}return Object.defineProperty(e,"type",{get:function(){var t=this.name;return t=t.replace("Field",""),t=t.substring(0,1).toLowerCase()+t.substring(1)},enumerable:!0,configurable:!0}),e.prototype.getSettingsEl=function(){return null},e.registerCommonFields=function(){t.HtmlField.registerField(),t.ImageField.registerField(),t.EmbedField.registerField()},e.registerField=function(){this._fields.hasOwnProperty(this.type)&&delete this._fields[this.type],this._fields[this.type]=this},e.createField=function(t,e,o,i){var n=t.data().breField;if(!n)throw"There is no any data in field "+t.html();if("string"==typeof n&&(n=JSON.parse(n.replace(/'/g,'"'))),!n.name)throw"There is no name in data of field "+t.html();if(e){for(var r={},l=0;l<e.length;l++){var s=e[l];if(s.name.toLowerCase()===n.name.toLowerCase()){r=s;break}}r&&(n=$.extend(n,r))}var c=n.type;if(null!=c){if(this._fields.hasOwnProperty(c)){var s=this._fields[c];return new s(t,n,o,i)}throw c+" field not found"}throw"Field type not defined in data-bre-field attribute"},e.prototype.bind=function(){},e.prototype.selectBlock=function(){this.onSelect()},e.prototype.updateProperty=function(t,e,o){void 0===o&&(o=!0);var i=this.data[t];i!==e&&(this.data[t]=e,o&&this.onUpdate(t,i,e))},e._fields={},e}();t.BaseField=e}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.getSettingsEl=function(){var t=$('<div style="position: absolute;width: 100%; height: 100px;;text-align: center;font-weight: bold;vertical-align: middle;background: #333;opacity: 0.2;">Change embed element link</div>');return this.$field.before(t),t},Object.defineProperty(o.prototype,"settings",{get:function(){return function(t){var e=prompt("Link to embed media","http://instagr.am/p/BO9VX2Vj4fF/");t.setUrl(e),t.loadMedia(!0)}},enumerable:!0,configurable:!0}),o.prototype.bind=function(){var t=this,e=this;this.$field.on("click",function(){return __awaiter(t,void 0,void 0,function(){var t;return __generator(this,function(o){switch(o.label){case 0:return t=prompt("Link to embed media","http://instagr.am/p/BO9VX2Vj4fF/"),e.setUrl(t),[4,e.loadMedia(!0)];case 1:return o.sent(),[2]}})})}),e.loadMedia(!1)},o.prototype.loadMedia=function(e){return __awaiter(this,void 0,void 0,function(){var o,i,n,r,l;return __generator(this,function(s){switch(s.label){case 0:return o=this,o.data&&o.data.url?[4,t.Services.EmbedService.getEmbedAsync(o.data.url)]:[2];case 1:return i=s.sent(),o.setEmbed(i,e),n=$(i.html),r=n.filter("script"),r.length>0&&(r.remove(),l=r.attr("src"),l.breStartsWith("//")&&(l="https:"+l,$.getScript(l).done(function(e){t.Services.EmbedService.processEmbed(i.provider_name)}).fail(function(t){}))),o.$field.empty(),o.$field.removeAttr("class"),o.$field.removeAttr("style"),o.$field.append(n),o.selectBlock(),[2]}})})},o.prototype.setEmbed=function(t,e){void 0===e&&(e=!0),this.updateProperty("embed",t,e)},o.prototype.setUrl=function(t){this.updateProperty("url",t)},o}(e.BaseField);e.EmbedField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.bind=function(){var e=this,o=this,i=this.$field;i.is("[contenteditable]")||i.attr("contenteditable","true");var n=this.data.html||this.$field.html();this.setHtml(n,!1),i.html(this.data.html),t.SelectionUtils.bindTextSelection(i,function(e){t.Editor.UI.htmlTools.show(e)}),i.on("blur keyup paste input",function(){e.setHtml(i.html())}).on("paste",function(t){t.preventDefault();var e=t.originalEvent,o=e.clipboardData.getData("text/plain");document.execCommand("insertHTML",!1,o)}).on("click",function(t){return o.selectBlock(),t.stopPropagation(),!1})},o.prototype.setHtml=function(t,e){void 0===e&&(e=!0),t=t.trim(),this.$field.html()!==t&&this.$field.html(t),this.updateProperty("html",t,e)},o}(e.BaseField);e.HtmlField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.bind=function(){var e=this,o=this,i=this.$field;this.data;this.setSrc(this.data.src,!1),i.on("click",function(){return __awaiter(e,void 0,void 0,function(){var e,i,n,r;return __generator(this,function(l){switch(l.label){case 0:return[4,t.Editor.UI.modal.promptAsync(o.getPromptParams())];case 1:return e=l.sent(),i=e.getValue("file"),n=e.getValue("src"),i?(o.setFile(i),o.setSrc(null)):n&&(o.setSrc(n),o.setFile(null)),r=e.getValue("alt"),o.setAlt(r),o.selectBlock(),[2]}})})})},o.prototype.getPromptParams=function(){return[new t.Prompt.PromptParameter("src","Image Link",this.data.url,"image url"),new t.Prompt.PromptParameterImage("file","or Upload file",this.data.file,"select file"),new t.Prompt.PromptParameter("alt","Alt",this.data.alt,"alt attribute value ")]},o.prototype.setSrc=function(t,e){void 0===e&&(e=!0),t&&(this.isImg?this.$field.attr("src",t):this.$field.css("background-image","url("+t)),this.updateProperty("src",t,e)},o.prototype.setAlt=function(t){this.$field.attr(this.isImg?"alt":"title",t),this.updateProperty("alt",t)},o.prototype.setFile=function(t){t&&(this.isImg?this.$field.attr("src",t.fileContent):this.$field.css("background-image","url("+t.fileContent+")")),this.updateProperty("file",t)},Object.defineProperty(o.prototype,"isImg",{get:function(){return this._isImg=this._isImg||"img"===this.$field.prop("tagName").toLowerCase()},enumerable:!0,configurable:!0}),o}(e.BaseField);e.ImageField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t,e,o,i){this.key=t,this.title=e,this.placeholder=i||"",this.value=o}return t.prototype.parseValue=function(){this.value=this.$input.val(),this.$control=null,delete this._$control},Object.defineProperty(t.prototype,"$control",{get:function(){return this._$control||(this._$control=$('<div class="bre-prompt-field">\n                            <label class="bre-label" for="'+this.key+'">'+(this.title?this.title:"Select file...")+"</label>\n                        </div>"),this.$input=this.getEditor(),this._$control.append(this.$input)),this._$control},set:function(t){this._$control=t},enumerable:!0,configurable:!0}),t.prototype.getEditor=function(){this.value;return $('<input type="text" id="'+this.key+'" class="bre-input" placeholder="'+this.placeholder+'" value="'+(this.value?this.value:"")+'">')},t}();t.PromptParameter=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(e){function o(t,o,i,n){var r=e.call(this,t,o,i,n)||this;return i&&(r._value=i),r}return __extends(o,e),o.prototype.parseValue=function(){this.value=this._value,this.$control=null,delete this._$control,this._value=null,delete this._value},o.prototype.getEditor=function(){var e=this,o=this.value&&this.value.fileContent?this.value.fileContent:"",i=$("\n                <div class='bre-image-input'>\n                    <label for=\""+this.key+'">\n                        Select file...\n                    </label>                        \n                    <img src="'+o+'"/>                    \n                    <input type="file" id="'+this.key+'" class="bre-input" placeholder="'+this.placeholder+"\">\n                </div>\n                <small class='bre-image-input-filename'></small>"),n=$("input",i),r=$("img",i),l=$(".bre-image-input-filename",i),s=this.value;return s&&(r.attr("src",s.fileContent),r.addClass("bre-loaded"),l.text(s.fileInfo.name)),n.change(function(){var o=this;if(o.files&&o.files[0]){var i=new FileReader;i.onload=function(i){var n=i.target;e._value=new t.PromptParameterImageResult,e._value.fileContent=n.result,e._value.fileInfo=new t.PromptParameterImageResultFile(o.files[0]),r.attr("src",e._value.fileContent),r.addClass("bre-loaded"),l.text(e._value.fileInfo.name)},i.readAsDataURL(o.files[0])}}),i},o}(t.PromptParameter);t.PromptParameterImage=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(){}return t}();t.PromptParameterImageResult=e;var o=function(){function t(t){this.name=t.name,this.size=t.size,this.type=t.type,this.lastModified=t.lastModified,this.lastModifiedDate=t.lastModifiedDate}return t}();t.PromptParameterImageResultFile=o}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t){this.params=t}return t.prototype.getValue=function(t){var e=this.params.find(function(e){return e.key===t});return e?e.value:null},t}();t.PromptParameterList=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t,e,o){void 0===o&&(o=!1),this.title=t,this.value=e,this.selected=o}return t}();t.PromptParameterOption=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(e){function o(o,i,n,r,l){var s=e.call(this,o,i,r,l)||this;return s.options=[],n.forEach(function(e){s.options.push(new t.PromptParameterOption(e[0],e[1],e[1]==r))}),s}return __extends(o,e),o.prototype.getEditor=function(){var t=this.options.map(function(t){return'<option value="'+t.value+'" '+(t.selected?"selected":"")+">"+(t.title?t.title:t.value)+"</option>"});return $('<select type="text" id="'+this.key+'" class="brickyeditor-input" placeholder="'+this.placeholder+'">'+t+"</select>")},o}(t.PromptParameter);t.PromptParameterOptions=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t){this.editor=t,this.buttons=[{icon:"bold",command:"Bold",range:!0,aValueArgument:null},{icon:"italic",command:"Italic",range:!0,aValueArgument:null},{icon:"link",command:"CreateLink",range:!0,aValueArgument:null},{icon:"list-ul",command:"insertUnorderedList",range:!0,aValueArgument:null},{icon:"list-ol",command:"insertOrderedList",range:!0,aValueArgument:null},{icon:"undo",command:"Undo",range:!1,aValueArgument:null},{icon:"repeat",command:"Redo",range:!1,aValueArgument:null}],t.options.htmlToolsButtons&&(this.buttons=t.options.htmlToolsButtons),this.setControl()}return e.prototype.setControl=function(){var t=this,e=$('<div class="bre-html-tools-panel"></div>');this.buttons.forEach(function(o){var i=t.getButtonElement(o.icon,o.command,o.range,o.aValueArgument);e.append(i)}),this.$control=$('<div class="bre-html-tools bre-btn-group"></div>'),this.$control.append(e).hide(),this.editor.$editor.append(this.$control)},e.prototype.getButtonElement=function(e,o,i,n){var r=this;void 0===i&&(i=!0),void 0===n&&(n=null);var l=$('<button type="button" class="bre-btn"><i class="fa fa-'+e+'"></i></button>');return l.on("click",function(){return __awaiter(r,void 0,void 0,function(){var e,r,l,s,c,a,u,d;return __generator(this,function(h){switch(h.label){case 0:return e=window.getSelection(),(r=e.rangeCount>0?e.getRangeAt(0):null,i&&!r)?[2]:"CreateLink"!=o?[3,2]:(l=this.getLinkPromptParams(e),[4,t.Editor.UI.modal.promptAsync(l)]);case 1:return s=h.sent(),c=s.getValue("href"),c&&(document.execCommand(o,!1,c),a=s.getValue("target"),a&&e.anchorNode.parentElement.setAttribute("target",a),(u=s.getValue("title"))&&e.anchorNode.parentElement.setAttribute("title",u)),[3,3];case 2:"string"==typeof n&&(d=n.replace("%%SELECTION%%",e.toString()));try{document.execCommand(o,!1,d)}catch(t){this.wrapSelectionToContainer(e),document.execCommand(o,!1,d)}h.label=3;case 3:return[2,!1]}})})}),l},e.prototype.wrapSelectionToContainer=function(t){var e=$('<div class="bre-temp-container" contenteditable="true"></div>'),o=$(t.anchorNode.parentElement);e.html(o.html()),o.empty().append(e).removeAttr("contenteditable");var i=document.createRange();i.selectNodeContents(e[0]),t.removeAllRanges(),t.addRange(i)},e.prototype.show=function(t){if(t&&t.width>1){var e=this.editor.$editor.offset(),o=this.editor.$editor.width(),i=t.top-e.top+$(window).scrollTop()+t.height,n=this.$control.width(),r=t.left-e.left+t.width/2-n/2;r<0?r=0:r+n>o&&(r=o-n),this.$control.css({top:i+"px",left:r+"px"}),this.$control.show()}else this.$control.hide()},e.prototype.getLinkPromptParams=function(e){var o="",i="",n="";if(e.anchorNode&&e.anchorNode.parentNode.nodeName.breEqualsInvariant("a")){var r=$(e.anchorNode.parentNode);o=r.attr("href"),i=r.attr("title"),n=r.attr("target")}return[new t.Prompt.PromptParameter("href","Url",o,"Url"),new t.Prompt.PromptParameter("title","Title",i,"Title"),new t.Prompt.PromptParameterOptions("target","Target",[["",""],["Blank","_blank"],["Self","_self"],["Parent","_parent"],["Top","_top"]],n)]},e}();t.HtmlTools=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t,e,o,i,n,r){this.$control=t,this.$closeBtn=e,this.$form=o,this.$btns=i,this.$okBtn=n,this.$cancelBtn=r;var l=this;e.on("click",function(){l.hideModal()})}return e.prototype.hideModal=function(){this.restoreSelection(),this.$control.fadeOut()},e.prototype.showModal=function(t,e){void 0===e&&(e=!0),this.saveSelection(),this.$btns.toggle(e),t&&(this.$form.append(t),t.is(":visible")||t.show()),this.$control.fadeIn()},e.prototype.promptAsync=function(e){var o=this,i=this;return new Promise(function(n,r){i.$form.children().not(o.$btns).remove(),e.forEach(function(t){o.$btns.before(t.$control)}),i.$okBtn.on("click",function(){e.forEach(function(t){return t.parseValue()}),i.hideModal();var o=new t.Prompt.PromptParameterList(e);n(o)}),i.$cancelBtn.on("click",function(){i.hideModal(),r(e)}),i.showModal()})},e.prototype.saveSelection=function(){var t=window.getSelection();this.selectionRanges=[];for(var e=0;e<t.rangeCount;e++)this.selectionRanges.push(t.getRangeAt(e))},e.prototype.restoreSelection=function(){if(this.selectionRanges&&0!=this.selectionRanges.length){var t=window.getSelection();t.removeAllRanges(),this.selectionRanges.forEach(function(e){return t.addRange(e)})}},e}();t.Modal=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.getSelectedText=function(){return window.getSelection().getRangeAt(0).toString()},t.replaceSelectedText=function(t){var e,o;window.getSelection&&(e=window.getSelection(),e.rangeCount&&(o=e.getRangeAt(0),o.deleteContents(),o.insertNode(document.createTextNode(t))))},t}();t.SelectionHelper=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.bindTextSelection=function(t,e){var o=this;t.is("[contenteditable]")&&(t.on("mouseup",function(){setTimeout(function(){var t=o.getSelectionRect();e(t)},0)}),t.on("keyup",function(t){var i=o.getSelectionRect();e(i)}))},t.getSelectionRect=function(){var t=window.getSelection(),e=t.getRangeAt(0);if(e){var o=e.getBoundingClientRect();if(o)return o}return null},t}();t.SelectionUtils=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.attr=function(t){return"["+t+"]"},t.field="data-bre-field",t.selectorField="["+t.field+"]",t.classMobile="brickyeditor-tools-mobile",t.htmlToolsCommand="data-bre-doc-command",t.htmlToolsCommandRange="data-bre-doc-command-range",t.selectorHtmlToolsCommand=t.attr(t.htmlToolsCommand),t.selectorHtmlToolsCommandRange=t.attr(t.htmlToolsCommandRange),t}();t.Selectors=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(e){this.editor=e,this.editor=e,this.setTools(),this.setModal(),this.htmlTools=new t.HtmlTools(this.editor)}return Object.defineProperty(e.prototype,"isCompactTools",{get:function(){var t=this.editor.options.compactTools;return null==t?window.innerWidth<this.editor.options.compactToolsWidth:t.valueOf()},enumerable:!0,configurable:!0}),e.prototype.setTools=function(){var t=this;this.$tools=$('<div class="bre bre-tools" data-bricky-tools></div>'),this.$toolsTemplates=$('<div class="bre-tools-templates"></div>'),this.$toolsLoader=$('<div class="bre-tools-loader"><b>Loading...</b></div>'),this.$toolsHideBtn=$('<button type="button" class="bre-tools-toggle"><div>►</div></button>'),this.$tools.append([this.$toolsHideBtn,this.$toolsLoader,this.$toolsTemplates]),this.$toolsHideBtn.on("click",function(){return t.toggleTools()}),this.editor.$editor.append(this.$tools),this.isCompactTools&&(this.$tools.addClass("bre-tools-templates-compact"),this.toggleTools())},e.prototype.toggleTools=function(){this.$tools.toggleClass("bre-tools-collapsed",!this.$toolsHideBtn.hasClass("bre-tools-toggle-collapsed")),this.$toolsHideBtn.toggleClass("bre-tools-toggle-collapsed")},e.prototype.setModal=function(){var e=$('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>'),o=$('<div class="bre-modal-close"><a href="#">close ✖</a></div>'),i=$('<div class="bre-modal-content"></div>'),n=$("<form></form>"),r=$('<div class="bre-btns"></div>'),l=$('<button type="button" class="bre-btn bre-btn-primary">Ok</button>'),s=$('<button type="button" class="bre-btn">Cancel</button>');r.append(l),r.append(s),n.append(r),i.append(n);var c=$(".bre-modal-placeholder",e);c.append(o),c.append(i),this.modal=new t.Modal(e,o,n,r,l,s),this.editor.$editor.append(e)},e.prototype.toggleToolsLoader=function(t){this.$toolsLoader.toggle(t)},e.prototype.setTemplates=function(t){var e=this,o=this.editor;t.forEach(function(t){var i=t.getPreview();i.on("click",function(){o.addBlock(t)}),e.$toolsTemplates.append(i)})},e.initBtnDeck=function(t){$(".bre-btn",t).eq(0).on("click",function(){e.toggleBtnDeck(t)})},e.toggleBtnDeck=function(t,e){var o=$(".bre-btn",t);if(o&&0!=o.length){var i=o.eq(0);e=e||t.data().isOn||!1,e?(t.css({height:0,width:0}),o.not(":first").css({opacity:0,top:0,left:0})):(o.not(":first").each(function(t,e){$(e).css({opacity:1,left:(t+1)*(32+32/6)})}),t.css({height:32,width:(32+32/6)*o.length-32/6})),i.toggleClass("bre-btn-active",!e),t.data("isOn",!e)}},e}();t.UI=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(){}return t.getEmbedAsync=function(t){var e=this,o="https://noembed.com/embed?url="+t;return new Promise(function(t,i){return __awaiter(e,void 0,void 0,function(){var e,n,r;return __generator(this,function(l){switch(l.label){case 0:e={url:o,type:"get",dataType:"jsonp"},l.label=1;case 1:return l.trys.push([1,3,,4]),[4,$.ajax(e)];case 2:return n=l.sent(),t(n),[3,4];case 3:return r=l.sent(),i(r),[3,4];case 4:return[2]}})})})},t.processEmbed=function(e){switch(e){case t.Instagram:instgrm&&instgrm.Embeds.process()}},t.Instagram="Instagram",t}();t.EmbedService=e}(t.Services||(t.Services={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(){function e(){}return e.loadTemplatesAsync=function(e){return __awaiter(this,void 0,void 0,function(){var o,i,n=this;return __generator(this,function(r){return this.templates=[],
-o=this.templates,i=e.options.templatesUrl,[2,new Promise(function(o,r){return __awaiter(n,void 0,void 0,function(){var n,l,s,c,a=this;return __generator(this,function(u){switch(u.label){case 0:return u.trys.push([0,2,,3]),[4,$.get(i)];case 1:return n=u.sent(),l=$(n).filter("style"),l&&l.length>0&&e.$editor.prepend(l),s=$(n).filter(".bre-template"),s.each(function(e,o){var i=new t.Template(o);a.templates.push(i)}),o(this.templates),[3,3];case 2:return c=u.sent(),console.log("Templates file not found."),r(c),[3,3];case 3:return[2]}})})})]})})},e.getTemplate=function(t){for(var e=0;e<this.templates.length;e++){var o=this.templates[e];if(o.name.toLowerCase()===t.toLowerCase())return o}return null},e}();e.TemplateService=o}(t.Services||(t.Services={}))}(BrickyEditor||(BrickyEditor={}));
\ No newline at end of file
+var __awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))(function(n,r){function l(t){try{a(i.next(t))}catch(t){r(t)}}function s(t){try{a(i.throw(t))}catch(t){r(t)}}function a(t){t.done?n(t.value):new o(function(e){e(t.value)}).then(l,s)}a((i=i.apply(t,e||[])).next())})},__generator=this&&this.__generator||function(t,e){function o(t){return function(e){return i([t,e])}}function i(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(l=r[2&o[0]?"return":o[0]?"throw":"next"])&&!(l=l.call(r,o[1])).done)return l;switch(r=0,l&&(o=[0,l.value]),o[0]){case 0:case 1:l=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(l=a.trys,!(l=l.length>0&&l[l.length-1])&&(6===o[0]||2===o[0])){a=0;continue}if(3===o[0]&&(!l||o[1]>l[0]&&o[1]<l[3])){a.label=o[1];break}if(6===o[0]&&a.label<l[1]){a.label=l[1],l=o;break}if(l&&a.label<l[2]){a.label=l[2],a.ops.push(o);break}l[2]&&a.ops.pop(),a.trys.pop();continue}o=e.call(t,a)}catch(t){o=[6,t],r=0}finally{n=l=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}var n,r,l,s,a={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]};return s={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s},__extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])};return function(e,o){function i(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(i.prototype=o.prototype,new i)}}(),BrickyEditor;!function(t){var e=function(){function e(t,e,o,i,n,r,l,s){void 0===s&&(s=!1),this.$element=t,this.onAddBlock=e,this.onDeleteBlock=o,this.onSelectBlock=i,this.onDeselectBlock=n,this.onMoveBlock=r,this.onUpdateBlock=l,this.usePlaceholder=s,this.blocks=[],this.isContainer=!0,this.togglePlaceholderIfNeed()}return e.prototype.getData=function(t){var e=[];return this.blocks.forEach(function(o){e.push(o.getData(t))}),e},e.prototype.getHtml=function(){var t=[];this.blocks.forEach(function(e){t.push(e.getHtml(!0))});var e=t.join("\n"),o=this.$element.clone(!1,!1).html(e).wrap("<div></div>");return $("<div></div>").append(o).html()},e.prototype.addBlock=function(e,o,i,n){var r=this;void 0===n&&(n=!0);var l=new t.Block(e,!1,o,function(t){return r.deleteBlock(t)},function(t){return r.selectBlock(t)},function(t){return r.deselectBlock(t)},function(t){return r.copyBlock(t)},function(t,e){return r.moveBlock(t,e)},this.onUpdateBlock);this.insertBlock(l,i),n&&(l.select(),l.scrollTo())},e.prototype.insertBlock=function(t,e){e=e||this.blocks.length,this.selectedBlock&&(e=this.blocks.indexOf(this.selectedBlock)+1),this.blocks.splice(e,0,t),0==e?this.$element.append(t.ui.$editor):this.blocks[e-1].ui.$editor.after(t.ui.$editor),this.onAddBlock(t,e),t.select(null),this.togglePlaceholderIfNeed()},e.prototype.deleteBlock=function(t){var e=this.blocks.indexOf(t);this.blocks.splice(e,1),t=null,e<this.blocks.length?this.blocks[e].select():this.blocks.length>0?this.blocks[e-1].select():this.selectedBlock=null,this.onDeleteBlock(t,e),this.togglePlaceholderIfNeed()},e.prototype.moveBlock=function(t,e){var o=this.blocks.indexOf(t),i=o+e;if(!(i>=this.blocks.length||i<0)){var n=this.blocks[i].ui.$editor;e>0?n.after(t.ui.$editor):e<0&&n.before(t.ui.$editor),this.blocks.splice(o,1),this.blocks.splice(i,0,t),this.onMoveBlock(t,o,i),t.scrollTo()}},e.prototype.copyBlock=function(t){var e=this.blocks.indexOf(t)+1;this.addBlock(t.template,t.getData().fields,e,!0)},e.prototype.selectBlock=function(t){this.selectedBlock!==t&&(this.selectedBlock&&this.selectedBlock.deselect(),this.selectedBlock=t,this.onSelectBlock(t))},e.prototype.deselectBlock=function(t){this.selectedBlock=null,this.onDeselectBlock(t)},e.prototype.togglePlaceholderIfNeed=function(){this.usePlaceholder&&(0===this.blocks.length?this.$placeholder||(this.$placeholder=$('<i data-bre-placeholder="true">Click here to select this container...</i>'),this.$element.append(this.$placeholder)):this.$placeholder&&(this.$placeholder.remove(),this.$placeholder=null))},e}();t.BlocksContainer=e}(BrickyEditor||(BrickyEditor={})),String.prototype.breContains=function(t){return this.indexOf(t)>=0},String.prototype.breStartsWith=function(t){return 0==this.indexOf(t)},String.prototype.breTotalTrim=function(){return this?this.replace(/\s\s+/g," ").trim():""},String.prototype.breEqualsInvariant=function(t){return this.toLowerCase()===t.toLowerCase()},Array.prototype.find||(Array.prototype.find=function(t){if(null==this)throw new TypeError("Array.prototype.find called on null or undefined");if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var e,o=Object(this),i=o.length>>>0,n=arguments[1],r=0;r<i;r++)if(e=o[r],t.call(n,e,r,o))return e});var BrickyEditor;!function(t){var e=function(){function t(){}return t.getSelectedText=function(){var t="",e=document;return window.getSelection?t=window.getSelection().toString():e.selection&&"Control"!=e.selection.type&&(t=e.selection.createRange().text),t},t.propsEach=function(t,e){for(var o in t)if(t.hasOwnProperty(o)){var i=t[o];e(o,i)}},t.propsFilterKeys=function(e,o,i){var n=[];return t.propsEach(e,function(t,e){o(t,e)&&n.push(t)}),i&&n.push(i),n},t}();t.Common=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(o,i){t.Fields.BaseField.registerCommonFields(),this.$editor=o,this.$editor.addClass(t.Selectors.classEditor),this.options=new t.EditorOptions(i),this.container=this.createContainer(),e.UI=new t.UI(this)}return e.prototype.createContainer=function(){var e=this,o=function(o,i){e.isLoaded&&(e.trigger(t.Events.onBlockAdd,{block:o,idx:i}),e.trigger(t.Events.onChange,{blocks:e.getData(),html:e.getHtml()}))},i=function(o,i){e.trigger(t.Events.onBlockDelete,{block:o,idx:i}),e.trigger(t.Events.onChange,{blocks:e.getData(),html:e.getHtml()})},n=function(o,i,n,r){e.trigger(t.Events.onBlockUpdate,{block:o,property:i,oldValue:n,newValue:r}),e.trigger(t.Events.onChange,{blocks:e.getData(),html:e.getHtml()})};return new t.BlocksContainer(this.$editor,o,i,function(o){e.trigger(t.Events.onBlockSelect,{block:o})},function(o){e.trigger(t.Events.onBlockDeselect,{block:o})},function(o,i,n){e.trigger(t.Events.onBlockMove,{block:o,from:i,to:n}),e.trigger(t.Events.onChange,{blocks:e.getData(),html:e.getHtml()})},n)},e.prototype.initAsync=function(){return __awaiter(this,void 0,void 0,function(){var o,i;return __generator(this,function(n){switch(n.label){case 0:return e.UI.toggleToolsLoader(!0),[4,t.Services.TemplateService.loadTemplatesAsync(this.options.templatesUrl,this.$editor,this.onError)];case 1:return o=n.sent(),e.UI.toggleToolsLoader(!1),e.UI.setTemplates(o),[4,this.tryLoadInitialBlocksAsync()];case 2:return i=n.sent(),this.loadBlocks(i),this.isLoaded=!0,this.trigger(t.Events.onLoad,this),[2]}})})},e.prototype.tryLoadInitialBlocksAsync=function(){return __awaiter(this,void 0,void 0,function(){var e,o=this;return __generator(this,function(i){return e=this.options.blocksUrl,[2,new Promise(function(i,n){return __awaiter(o,void 0,void 0,function(){var o,r;return __generator(this,function(l){switch(l.label){case 0:if(!e)return[3,5];l.label=1;case 1:return l.trys.push([1,3,,4]),[4,$.get(e)];case 2:return o=l.sent(),i(o),[3,4];case 3:return r=l.sent(),this.onError(t.EditorStrings.errorBlocksFileNotFound(e)),n(r),[3,4];case 4:return[3,6];case 5:i(this.options.blocks?this.options.blocks:null),l.label=6;case 6:return[2]}})})})]})})},e.prototype.tryBindFormSubmit=function(){var t=this,e=this.options.formSelector?$(this.options.formSelector):null,o=this.options.inputSelector?$(this.options.inputSelector):null;e&&o&&0!=e.length&&0!=o.length&&e.on("submit",function(){return o.val(JSON.stringify(t.getData())),!0})},e.prototype.bindFormSubmit=function(){var t=this,e=this.options.formSelector?$(this.options.formSelector):null,o=this.options.inputSelector?$(this.options.inputSelector):null;e&&o&&0!=e.length&&0!=o.length&&e.on("submit",function(){return o.val(JSON.stringify(t.getData())),!0})},e.prototype.getData=function(){return this.container.getData(this.options.ignoreHtml)},e.prototype.getHtml=function(){return this.container.getHtml()},e.prototype.loadBlocks=function(e){var o=this;e&&e.length&&e.forEach(function(e){var i=t.Services.TemplateService.getTemplate(e.template);if(i)o.container.addBlock(i,e.fields,null,!1);else{var n=t.EditorStrings.errorBlockTemplateNotFound(e.template);o.onError(n)}})},e.prototype.addBlock=function(t){this.getContainer(this.container).addBlock(t,null,null,!0)},e.prototype.getContainer=function(t){if(t.selectedBlock&&t.selectedBlock.isContainer()){var e=t.selectedBlock.selectedField;if(e)return this.getContainer(e.container)}return t},e.prototype.onError=function(t,e){void 0===e&&(e=0),this.options.onError({message:t,code:e})},e.prototype.trigger=function(e,o){var i=this;this.$editor.trigger("bre."+e,o),t.Common.propsEach(i.options,function(t,i){t.breEqualsInvariant(e)&&i&&i(o)})},e}();t.Editor=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t){this.templatesUrl="templates/bootstrap4.html",this.onError=function(t){console.log(t.message)},this.compactTools=null,this.compactToolsWidth=768,this.ignoreHtml=null,this.htmlToolsButtons=null,this.templatesUrl=t.templatesUrl||this.templatesUrl,this.onLoad=t.onLoad||t.onload,this.onChange=t.onChange,this.onBlockAdd=t.onBlockAdd,this.onBlockDelete=t.onBlockDelete,this.onBlockMove=t.onBlockMove,this.onBlockSelect=t.onBlockSelect,this.onBlockDeselect=t.onBlockDeselect,this.onBlockUpdate=t.onBlockUpdate,this.onError=t.onError||this.onError,this.blocksUrl=t.blocksUrl||null,this.blocks=t.blocks||null,this.compactTools=t.compactTools,this.ignoreHtml=t.ignoreHtml||!1,this.htmlToolsButtons=t.htmlToolsButtons||null,this.formSelector=t.formSelector||null,this.inputSelector=t.inputSelector||null}return t}();t.EditorOptions=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.errorBlocksFileNotFound=function(t){return"Blocks file not found. Requested file: "+t+"."},t.errorTemplatesFileNotFound=function(t){return"Templates file not found. Requested file: "+t+"."},t.errorBlockTemplateNotFound=function(t){return'Template "'+t+'" not found.'},t.embedFieldLinkTitle="Link to embed media",t.embedFieldLinkPlaceholder="Link to instagram, youtube and etc.",t.imageFieldLinkTitle="Image link",t.imageFieldLinkPlaceholder="http://url-to-image.png",t.imageFieldUploadTitle="or Upload a file",t.imageFieldUploadButton="Select file",t.imageFieldAltTitle="Alt",t.imageFieldAltPlaceholder="Image 'alt' attribute value",t.htmlEditorLinkUrlTitle="Url",t.htmlEditorLinkUrlPlaceholder="http://put-your-link.here",t.htmlEditorLinkTitleTitle="Title",t.htmlEditorLinkTitlePlaceholder="Title attribute for link",t.htmlEditorLinkTargetTitle="Target",t.htmlEditorLinkTargetBlank="Blank",t.htmlEditorLinkTargetSelf="Self",t.htmlEditorLinkTargetParent="Parent",t.htmlEditorLinkTargetTop="Top",t.buttonClose="close",t.buttonOk="Ok",t.buttonCancel="Cancel",t.defaultTemplatesGroupName="Other templates",t}();t.EditorStrings=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.onLoad="onLoad",t.onChange="onChange",t.onBlockAdd="onBlockAdd",t.onBlockDelete="onBlockDelete",t.onBlockMove="onBlockMove",t.onBlockSelect="onBlockSelect",t.onBlockDeselect="onBlockDeselect",t.onBlockUpdate="onBlockUpdate",t}();t.Events=e}(BrickyEditor||(BrickyEditor={})),function(t){t.fn.brickyeditor=function(e){var o=new BrickyEditor.Editor(t(this),e);return o.initAsync(),o}}(jQuery);var BrickyEditor;!function(t){var e=function(){function e(e,o,i,n,r,l,s,a,c){var d=this;this.template=e,this.onDelete=n,this.onSelect=r,this.onDeselect=l,this.onCopy=s,this.onMove=a,this.onUpdate=c,this.fields=[],this.template=e;var u=this,h=e.$html.clone();u.bindFields(h,i);var p=this.getActions();this.ui=new t.BlockUI(h,o,p,function(){return d.select()})}return e.prototype.isContainer=function(){return!!this.selectedField&&this.selectedField instanceof t.Fields.ContainerField},e.prototype.bindFields=function(e,o){var i=this,n=this;e.find(t.Selectors.selectorField).addBack(t.Selectors.selectorField).each(function(e,r){var l=function(t,e,o){i.onUpdate&&i.onUpdate(n,t,e,o)},s=function(t){n.select(t)},a=$(r),c=t.Fields.BaseField.createField(a,o,s,l);i.fields.push(c)})},e.prototype.getActions=function(){var e=this;return[new t.BlockUIAction("ellipsis-h"),new t.BlockUIAction("trash-o",function(){return e.delete()}),new t.BlockUIAction("copy",function(){return e.clone()}),new t.BlockUIAction("angle-up",function(){return e.move(-1)}),new t.BlockUIAction("angle-down",function(){return e.move(1)})]},e.prototype.delete=function(){this.ui.delete(),this.onDelete(this)},e.prototype.move=function(t){this.onMove(this,t)},e.prototype.clone=function(){this.onCopy(this)},e.prototype.select=function(t){t!==this.selectedField&&(null===t&&(t=this.fields[0]),this.selectedField&&this.selectedField.deselect(),this.selectedField=t,this.ui.toggleSelection(!0),this.onSelect(this))},e.prototype.deselect=function(){this.selectedField=null,this.fields.forEach(function(t){t.deselect()}),this.ui.toggleSelection(!1),this.onDeselect(this)},e.prototype.scrollTo=function(){var t=this.ui.$editor.offset().top-100;t=t>0?t:0,$("html, body").animate({scrollTop:t},"fast")},e.prototype.getData=function(t){var e=[];this.fields.forEach(function(t){e.push(t.data)});var o={template:this.template.name,fields:e};return t||(o.html=this.getHtml(!0)),o},e.prototype.getHtml=function(e){var o=this.template.$html.clone(!1,!1).wrap("<div></div>").parent(),i={};return this.fields.forEach(function(t){var e=t.name||t.data.name;i[e]=t.getEl()}),o.find(t.Selectors.selectorField).addBack(t.Selectors.selectorField).each(function(t,e){var o=$(e).data().breField;"string"==typeof o&&(o=JSON.parse(o.replace(/'/g,'"')));var n=o.name,r=i[n];$(e).replaceWith(r)}),e?o.html().breTotalTrim():o.html()},e}();t.Block=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t,e,o){this.icon=t,this.action=e,this.title=o}return t}();t.BlockAction=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t,e,o,i){this.$block=t,this.onSelect=i,e||this.buildEditorUI(o)}return e.prototype.delete=function(){this.$editor.remove()},e.prototype.toggleSelection=function(t){this.$editor.toggleClass("bre-selected",t)},e.prototype.buildEditorUI=function(e){var o=this;this.$tools=$('<div class="bre-block-tools bre-btn-deck"></div>'),e.forEach(function(t){var e=o.buildButton(t);o.$tools.append(e)}),t.UI.initBtnDeck(this.$tools),this.$editor=$('<div class="bre-block-wrapper"></div>'),this.$editor.append(this.$tools),this.$editor.append(this.$block),this.$editor.hover(function(){o.$editor.addClass("bre-active")},function(){o.$editor.removeClass("bre-active")}),this.$block.on("click",function(){return o.onSelect()})},e.prototype.buildButton=function(t){var e=$('<button type="button" class="bre-btn"><i class="fa fa-'+t.icon+'"></i></button>');return t.action&&e.on("click",function(e){return t.action(),e.stopPropagation(),!1}),e},e}();t.BlockUI=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t,e,o){this.icon=t,this.action=e,this.title=o}return t}();t.BlockUIAction=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(){function o(t,e,o,i){this.$field=t,this.data=e,this.onSelect=o,this.onUpdate=i,this.bind()}return Object.defineProperty(o,"type",{get:function(){var t=this.name;return t=t.replace("Field",""),t=t.substring(0,1).toLowerCase()+t.substring(1)},enumerable:!0,configurable:!0}),o.prototype.getSettingsEl=function(){return null},o.registerCommonFields=function(){e.HtmlField.registerField(),e.ImageField.registerField(),e.EmbedField.registerField(),e.ContainerField.registerField()},o.registerField=function(){this._fields.hasOwnProperty(this.type)&&delete this._fields[this.type],this._fields[this.type]=this},o.createField=function(t,e,o,i){var n=t.data().breField;if(!n)throw"There is no any data in field "+t.html();if("string"==typeof n&&(n=JSON.parse(n.replace(/'/g,'"'))),!n.name)throw"There is no name in data of field "+t.html();if(e){for(var r={},l=0;l<e.length;l++){var s=e[l];if(s.name.toLowerCase()===n.name.toLowerCase()){r=s;break}}r&&(n=$.extend(n,r))}var a=n.type;if(null!=a){if(this._fields.hasOwnProperty(a)){var s=this._fields[a];return new s(t,n,o,i)}throw a+" field not found"}throw"Field type not defined in data-bre-field attribute"},o.prototype.bind=function(){},o.prototype.select=function(){this.$field.addClass(t.Selectors.selectorFieldSelected),this.onSelect(this)},o.prototype.deselect=function(){this.$field.removeClass(t.Selectors.selectorFieldSelected)},o.prototype.getEl=function(){var e=this.$field.clone(!1);return e.removeAttr(t.Selectors.attrField),e},o.prototype.updateProperty=function(t,e,o){void 0===o&&(o=!0);var i=this.data[t];i!==e&&(this.data[t]=e,o&&this.onUpdate(t,i,e))},o._fields={},o}();e.BaseField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.bind=function(){var e=this,o=this,i=this.$field;this.container=new t.BlocksContainer(i,function(t){o.updateBlocks()},function(t){o.updateBlocks()},function(t){e.select()},function(t){},function(t){o.updateBlocks()},function(t){o.updateBlocks()},!0),i.addClass(t.Selectors.selectorFieldContainer),i.on("click",function(t){return o.select(),t.stopPropagation(),!1})},o.prototype.updateBlocks=function(){this.updateProperty("blocks",this.container.getData(!0),!0),this.updateProperty("html",this.container.getHtml(),!0)},o.prototype.deselect=function(){this.container.blocks.forEach(function(t){return t.deselect()}),this.$field.removeClass(t.Selectors.selectorFieldSelected)},o.prototype.getEl=function(){var t=this.container.getHtml();return $(t)},o}(e.BaseField);e.ContainerField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.getSettingsEl=function(){var t=$('<div style="position: absolute;width: 100%; height: 100px;;text-align: center;font-weight: bold;vertical-align: middle;background: #333;opacity: 0.2;">Change embed element link</div>');return this.$field.before(t),t},Object.defineProperty(o.prototype,"settings",{get:function(){var t=this;return function(e){t.showEmbedLoaderAsync(e)}},enumerable:!0,configurable:!0}),o.prototype.bind=function(){var t=this,e=this;this.$field.on("click",function(){return __awaiter(t,void 0,void 0,function(){return __generator(this,function(t){return this.showEmbedLoaderAsync(e),[2]})})}),e.loadMedia(!1)},o.prototype.showEmbedLoaderAsync=function(e){return __awaiter(this,void 0,void 0,function(){var o,i;return __generator(this,function(n){switch(n.label){case 0:return[4,t.Editor.UI.modal.promptAsync(e.getPromptParams())];case 1:return null==(o=n.sent())?[3,3]:(i=o.getValue("url"))?(e.setUrl(i),[4,e.loadMedia(!0)]):[3,3];case 2:n.sent(),n.label=3;case 3:return[2]}})})},o.prototype.getPromptParams=function(){return[new t.Prompt.PromptParameter("url",t.EditorStrings.embedFieldLinkTitle,this.data.url||"http://instagr.am/p/BO9VX2Vj4fF/",t.EditorStrings.embedFieldLinkPlaceholder)]},o.prototype.loadMedia=function(e){return __awaiter(this,void 0,void 0,function(){var o,i,n,r,l;return __generator(this,function(s){switch(s.label){case 0:return o=this,o.data&&o.data.url?[4,t.Services.EmbedService.getEmbedAsync(o.data.url)]:[2];case 1:return i=s.sent(),o.setEmbed(i,e),n=$(i.html),r=n.filter("script"),r.length>0&&(r.remove(),l=r.attr("src"),l.breStartsWith("//")&&(l="https:"+l,$.getScript(l).done(function(e){t.Services.EmbedService.processEmbed(i.provider_name)}).fail(function(t){}))),o.$field.empty(),o.$field.removeAttr("class"),o.$field.removeAttr("style"),o.$field.append(n),o.select(),[2]}})})},o.prototype.setEmbed=function(t,e){void 0===e&&(e=!0),this.updateProperty("embed",t,e)},o.prototype.setUrl=function(t){this.updateProperty("url",t)},o}(e.BaseField);e.EmbedField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.bind=function(){var e=this,o=this,i=this.$field;i.is(t.Selectors.selectorContentEditable)||i.attr(t.Selectors.attrContentEditable,"true");var n=this.data.html||this.$field.html();this.setHtml(n,!1),i.html(this.data.html),t.SelectionUtils.bindTextSelection(i,function(e){t.Editor.UI.htmlTools.show(e)}),i.on("blur keyup paste input",function(){e.setHtml(i.html())}).on("paste",function(t){t.preventDefault();var e=t.originalEvent,o=e.clipboardData.getData("text/plain");document.execCommand("insertHTML",!1,o)}).on("click",function(t){return o.select(),t.stopPropagation(),!1})},o.prototype.setHtml=function(t,e){void 0===e&&(e=!0),t=t.trim(),this.$field.html()!==t&&this.$field.html(t),this.updateProperty("html",t,e)},o.prototype.getEl=function(){var o=e.prototype.getEl.call(this);return o.removeAttr(t.Selectors.attrContentEditable),o},o}(e.BaseField);e.HtmlField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return __extends(o,e),o.prototype.bind=function(){var e=this,o=this,i=this.$field;this.data;this.setSrc(this.data.src,!1),i.on("click",function(){return __awaiter(e,void 0,void 0,function(){var e,i,n,r;return __generator(this,function(l){switch(l.label){case 0:return[4,t.Editor.UI.modal.promptAsync(o.getPromptParams())];case 1:return e=l.sent(),null!=e&&(i=e.getValue("file"),n=e.getValue("src"),i?(o.setFile(i),o.setSrc(null)):n&&(o.setSrc(n),o.setFile(null)),r=e.getValue("alt"),o.setAlt(r)),o.select(),[2]}})})})},o.prototype.getPromptParams=function(){return[new t.Prompt.PromptParameter("src",t.EditorStrings.imageFieldLinkTitle,this.data.url,t.EditorStrings.imageFieldLinkPlaceholder),new t.Prompt.PromptParameterImage("file",t.EditorStrings.imageFieldUploadTitle,this.data.file,t.EditorStrings.imageFieldUploadButton),new t.Prompt.PromptParameter("alt",t.EditorStrings.imageFieldAltTitle,this.data.alt,t.EditorStrings.imageFieldAltPlaceholder)]},o.prototype.setSrc=function(t,e){void 0===e&&(e=!0),t&&(this.isImg?this.$field.attr("src",t):this.$field.css("background-image","url("+t)),this.updateProperty("src",t,e)},o.prototype.setAlt=function(t){this.$field.attr(this.isImg?"alt":"title",t),this.updateProperty("alt",t)},o.prototype.setFile=function(t){t&&(this.isImg?this.$field.attr("src",t.fileContent):this.$field.css("background-image","url("+t.fileContent+")")),this.updateProperty("file",t)},Object.defineProperty(o.prototype,"isImg",{get:function(){return this._isImg=this._isImg||"img"===this.$field.prop("tagName").toLowerCase()},enumerable:!0,configurable:!0}),o}(e.BaseField);e.ImageField=o}(t.Fields||(t.Fields={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t,e,o,i){this.key=t,this.title=e,this.placeholder=i||"",this.value=o}return t.prototype.parseValue=function(){this.value=this.$input.val(),this.$control=null,delete this._$control},Object.defineProperty(t.prototype,"$control",{get:function(){return this._$control||(this._$control=$('<div class="bre-prompt-field">\n                            <label class="bre-label" for="'+this.key+'">'+(this.title?this.title:"Select file...")+"</label>\n                        </div>"),this.$input=this.getEditor(),this._$control.append(this.$input)),this._$control},set:function(t){this._$control=t},enumerable:!0,configurable:!0}),t.prototype.getEditor=function(){this.value;return $('<input type="text" id="'+this.key+'" class="bre-input" placeholder="'+this.placeholder+'" value="'+(this.value?this.value:"")+'">')},t}();t.PromptParameter=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(e){function o(t,o,i,n){var r=e.call(this,t,o,i,n)||this;return i&&(r._value=i),r}return __extends(o,e),o.prototype.parseValue=function(){this.value=this._value,this.$control=null,delete this._$control,this._value=null,delete this._value},o.prototype.getEditor=function(){var e=this,o=this.value&&this.value.fileContent?this.value.fileContent:"",i=$("\n                <div class='bre-image-input'>\n                    <label for=\""+this.key+'">\n                        '+this.placeholder+'\n                    </label>                        \n                    <img src="'+o+'"/>                    \n                    <input type="file" id="'+this.key+'" class="bre-input" placeholder="'+this.placeholder+"\">\n                </div>\n                <small class='bre-image-input-filename'></small>"),n=$("input",i),r=$("img",i),l=$(".bre-image-input-filename",i),s=this.value;return s&&(r.attr("src",s.fileContent),r.addClass("bre-loaded"),l.text(s.fileInfo.name)),n.change(function(){var o=this;if(o.files&&o.files[0]){var i=new FileReader;i.onload=function(i){var n=i.target;e._value=new t.PromptParameterImageResult,e._value.fileContent=n.result,e._value.fileInfo=new t.PromptParameterImageResultFile(o.files[0]),r.attr("src",e._value.fileContent),r.addClass("bre-loaded"),l.text(e._value.fileInfo.name)},i.readAsDataURL(o.files[0])}}),i},o}(t.PromptParameter);t.PromptParameterImage=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(){}return t}();t.PromptParameterImageResult=e;var o=function(){function t(t){this.name=t.name,this.size=t.size,this.type=t.type,this.lastModified=t.lastModified,this.lastModifiedDate=t.lastModifiedDate}return t}();t.PromptParameterImageResultFile=o}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t){this.params=t}return t.prototype.getValue=function(t){var e=this.params.find(function(e){return e.key===t});return e?e.value:null},t}();t.PromptParameterList=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(t,e,o){void 0===o&&(o=!1),this.title=t,this.value=e,this.selected=o}return t}();t.PromptParameterOption=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(e){function o(o,i,n,r,l){var s=e.call(this,o,i,r,l)||this;return s.options=[],n.forEach(function(e){s.options.push(new t.PromptParameterOption(e[0],e[1],e[1]==r))}),s}return __extends(o,e),o.prototype.getEditor=function(){var t=this.options.map(function(t){return'<option value="'+t.value+'" '+(t.selected?"selected":"")+">"+(t.title?t.title:t.value)+"</option>"});return $('<select type="text" id="'+this.key+'" class="brickyeditor-input" placeholder="'+this.placeholder+'">'+t+"</select>")},o}(t.PromptParameter);t.PromptParameterOptions=e}(t.Prompt||(t.Prompt={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(t){var e=function(){function t(){}return t.getEmbedAsync=function(t){var e=this,o="https://noembed.com/embed?url="+t;return new Promise(function(t,i){return __awaiter(e,void 0,void 0,function(){var e,n,r;return __generator(this,function(l){switch(l.label){case 0:e={url:o,type:"get",dataType:"jsonp"},l.label=1;case 1:return l.trys.push([1,3,,4]),[4,$.ajax(e)];case 2:return n=l.sent(),t(n),[3,4];case 3:return r=l.sent(),i(r),[3,4];case 4:return[2]}})})})},t.processEmbed=function(e){switch(e){case t.Instagram:instgrm&&instgrm.Embeds.process()}},t.Instagram="Instagram",t}();t.EmbedService=e}(t.Services||(t.Services={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){!function(e){var o=function(){function e(){}return e.loadTemplatesAsync=function(e,o,i){return __awaiter(this,void 0,void 0,function(){var n,r=this;return __generator(this,function(l){return this.templates=[],n=this.templates,[2,new Promise(function(n,l){return __awaiter(r,void 0,void 0,function(){var r,s,a,c,d,u,h,p,f=this;return __generator(this,function(m){switch(m.label){case 0:return m.trys.push([0,2,,3]),[4,$.get(e)];case 1:return r=m.sent(),s=$(r).filter("style"),s&&s.length>0&&o.prepend(s),a=$("<div>"+r+"</div>"),c=$(t.Selectors.selectorTemplateGroup,a),c.each(function(e,o){var i=$(o),n=f.getTemplates(i);f.templates.push(new t.TemplateGroup(i.attr("title"),n)),i.remove()}),d=this.getTemplates(a),u=this.templates.length>0?t.EditorStrings.defaultTemplatesGroupName:"",h=new t.TemplateGroup(u,d),this.templates.push(h),n(this.templates),[3,3];case 2:return p=m.sent(),i(t.EditorStrings.errorTemplatesFileNotFound(e)),l(p),[3,3];case 3:return[2]}})})})]})})},e.getTemplates=function(e){var o=[];return $(t.Selectors.selectorTemplate,e).each(function(e,i){var n=new t.Template(i);o.push(n)}),o},e.getTemplate=function(t){for(var e=0;e<this.templates.length;e++)for(var o=this.templates[e],i=0;i<o.templates.length;i++){var n=o.templates[i];if(n.name.breEqualsInvariant(t))return n}return null},e}();e.TemplateService=o}(t.Services||(t.Services={}))}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(e){var o=t.Selectors.selectorTemplatePreview,i=$(e),n=i.data();if(this.name=n.name,this.category=n.cactegory||[],this.$html=i.contents().not(o),this.$preview=$(o,i).contents(),!this.$preview.length){var r=new t.Block(this,!0),l=r.getHtml(!0);this.$preview=$(l)}}return e.prototype.getPreview=function(){var e=$("<div class='"+t.Selectors.classTemplate+"'></div>");return e.append(this.$preview),e},e}();t.Template=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(t,e){this.name=t,this.templates=e}return t}();t.TemplateGroup=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t){this.editor=t,this.buttons=[{icon:"bold",command:"Bold",range:!0,aValueArgument:null},{icon:"italic",command:"Italic",range:!0,aValueArgument:null},{icon:"link",command:"CreateLink",range:!0,aValueArgument:null},{icon:"list-ul",command:"insertUnorderedList",range:!0,aValueArgument:null},{icon:"list-ol",command:"insertOrderedList",range:!0,aValueArgument:null},{icon:"undo",command:"Undo",range:!1,aValueArgument:null},{icon:"repeat",command:"Redo",range:!1,aValueArgument:null}],t.options.htmlToolsButtons&&(this.buttons=t.options.htmlToolsButtons),this.setControl()}return e.prototype.setControl=function(){var t=this,e=$('<div class="bre-html-tools-panel"></div>');this.buttons.forEach(function(o){var i=t.getButtonElement(o.icon,o.command,o.range,o.aValueArgument);e.append(i)}),this.$control=$('<div class="bre-html-tools bre-btn-group"></div>'),this.$control.append(e).hide(),this.editor.$editor.append(this.$control)},e.prototype.getButtonElement=function(e,o,i,n){var r=this;void 0===i&&(i=!0),void 0===n&&(n=null);var l=$('<button type="button" class="bre-btn"><i class="fa fa-'+e+'"></i></button>');return l.on("click",function(){return __awaiter(r,void 0,void 0,function(){var e,r,l,s,a,c,d,u;return __generator(this,function(h){switch(h.label){case 0:return e=window.getSelection(),(r=e.rangeCount>0?e.getRangeAt(0):null,i&&!r)?[2]:"CreateLink"!=o?[3,2]:(l=this.getLinkPromptParams(e),[4,t.Editor.UI.modal.promptAsync(l)]);case 1:return s=h.sent(),a=s.getValue("href"),a&&(document.execCommand(o,!1,a),c=s.getValue("target"),c&&e.anchorNode.parentElement.setAttribute("target",c),
+(d=s.getValue("title"))&&e.anchorNode.parentElement.setAttribute("title",d)),[3,3];case 2:"string"==typeof n&&(u=n.replace("%%SELECTION%%",e.toString()));try{document.execCommand(o,!1,u)}catch(t){this.wrapSelectionToContainer(e),document.execCommand(o,!1,u)}h.label=3;case 3:return[2,!1]}})})}),l},e.prototype.wrapSelectionToContainer=function(t){var e=$('<div class="bre-temp-container" contenteditable="true"></div>'),o=$(t.anchorNode.parentElement);e.html(o.html()),o.empty().append(e).removeAttr("contenteditable");var i=document.createRange();i.selectNodeContents(e[0]),t.removeAllRanges(),t.addRange(i)},e.prototype.show=function(t){if(t&&t.width>1){var e=this.editor.$editor.offset(),o=this.editor.$editor.width(),i=t.top-e.top+$(window).scrollTop()+t.height,n=this.$control.width(),r=t.left-e.left+t.width/2-n/2;r<0?r=0:r+n>o&&(r=o-n),this.$control.css({top:i+"px",left:r+"px"}),this.$control.show()}else this.$control.hide()},e.prototype.getLinkPromptParams=function(e){var o="",i="",n="";if(e.anchorNode&&e.anchorNode.parentNode.nodeName.breEqualsInvariant("a")){var r=$(e.anchorNode.parentNode);o=r.attr("href"),i=r.attr("title"),n=r.attr("target")}return[new t.Prompt.PromptParameter("href",t.EditorStrings.htmlEditorLinkUrlTitle,o,t.EditorStrings.htmlEditorLinkUrlPlaceholder),new t.Prompt.PromptParameter("title",t.EditorStrings.htmlEditorLinkTitleTitle,i,t.EditorStrings.htmlEditorLinkTitlePlaceholder),new t.Prompt.PromptParameterOptions("target",t.EditorStrings.htmlEditorLinkTargetTitle,[["",""],[t.EditorStrings.htmlEditorLinkTargetBlank,"_blank"],[t.EditorStrings.htmlEditorLinkTargetSelf,"_self"],[t.EditorStrings.htmlEditorLinkTargetParent,"_parent"],[t.EditorStrings.htmlEditorLinkTargetTop,"_top"]],n)]},e}();t.HtmlTools=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(t,e,o,i,n,r){this.$control=t,this.$closeBtn=e,this.$form=o,this.$btns=i,this.$okBtn=n,this.$cancelBtn=r;var l=this;e.on("click",function(){l.hideModal()})}return e.prototype.hideModal=function(){this.restoreSelection(),this.$control.fadeOut()},e.prototype.showModal=function(t,e){void 0===e&&(e=!0),this.saveSelection(),this.$btns.toggle(e),t&&(this.$form.append(t),t.is(":visible")||t.show()),this.$control.fadeIn()},e.prototype.promptAsync=function(e){var o=this,i=this;return new Promise(function(n,r){i.$form.children().not(o.$btns).remove(),e.forEach(function(t){o.$btns.before(t.$control)}),i.$okBtn.on("click",function(){e.forEach(function(t){return t.parseValue()}),i.hideModal();var o=new t.Prompt.PromptParameterList(e);n(o)}),i.$cancelBtn.on("click",function(){i.hideModal(),n(null)}),i.showModal()})},e.prototype.saveSelection=function(){var t=window.getSelection();this.selectionRanges=[];for(var e=0;e<t.rangeCount;e++)this.selectionRanges.push(t.getRangeAt(e))},e.prototype.restoreSelection=function(){if(this.selectionRanges&&0!=this.selectionRanges.length){var t=window.getSelection();t.removeAllRanges(),this.selectionRanges.forEach(function(e){return t.addRange(e)})}},e}();t.Modal=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.getSelectedText=function(){return window.getSelection().getRangeAt(0).toString()},t.replaceSelectedText=function(t){var e,o;window.getSelection&&(e=window.getSelection(),e.rangeCount&&(o=e.getRangeAt(0),o.deleteContents(),o.insertNode(document.createTextNode(t))))},t}();t.SelectionHelper=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.bindTextSelection=function(t,e){var o=this;t.is("[contenteditable]")&&(t.on("mouseup",function(){setTimeout(function(){var t=o.getSelectionRect();e(t)},0)}),t.on("keyup",function(t){var i=o.getSelectionRect();e(i)}))},t.getSelectionRect=function(){var t=window.getSelection(),e=t.getRangeAt(0);if(e){var o=e.getBoundingClientRect();if(o)return o}return null},t}();t.SelectionUtils=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function t(){}return t.attr=function(t){return"["+t+"]"},t.attrContentEditable="contenteditable",t.selectorContentEditable="contenteditable",t.attrField="data-bre-field",t.selectorField="["+t.attrField+"]",t.classEditor="bre-editor",t.classTemplate="bre-template",t.selectorTemplate="."+t.classTemplate,t.classTemplateGroup="bre-template-group",t.selectorTemplateGroup="."+t.classTemplateGroup,t.selectorTemplatePreview=".bre-template-preview",t.classMobile="brickyeditor-tools-mobile",t.htmlToolsCommand="data-bre-doc-command",t.htmlToolsCommandRange="data-bre-doc-command-range",t.selectorFieldSelected="bre-field-selected",t.selectorFieldContainer="bre-field-container",t.selectorHtmlToolsCommand=t.attr(t.htmlToolsCommand),t.selectorHtmlToolsCommandRange=t.attr(t.htmlToolsCommandRange),t}();t.Selectors=e}(BrickyEditor||(BrickyEditor={}));var BrickyEditor;!function(t){var e=function(){function e(e){this.editor=e,this.editor=e,this.setTools(),this.setModal(),this.htmlTools=new t.HtmlTools(this.editor)}return Object.defineProperty(e.prototype,"isCompactTools",{get:function(){var t=this.editor.options.compactTools;return null==t?window.innerWidth<this.editor.options.compactToolsWidth:t.valueOf()},enumerable:!0,configurable:!0}),e.prototype.setTools=function(){var t=this;this.$tools=$('<div class="bre bre-tools" data-bricky-tools></div>'),this.$toolsTemplates=$('<div class="bre-tools-templates"></div>'),this.$toolsLoader=$('<div class="bre-tools-loader"><b>Loading...</b></div>'),this.$toolsHideBtn=$('<button type="button" class="bre-tools-toggle"><div>►</div></button>'),this.$tools.append([this.$toolsHideBtn,this.$toolsLoader,this.$toolsTemplates]),this.$toolsHideBtn.on("click",function(){return t.toggleTools()}),this.editor.$editor.append(this.$tools),this.isCompactTools&&(this.$tools.addClass("bre-tools-templates-compact"),this.toggleTools())},e.prototype.toggleTools=function(){this.$tools.toggleClass("bre-tools-collapsed",!this.$toolsHideBtn.hasClass("bre-tools-toggle-collapsed")),this.$toolsHideBtn.toggleClass("bre-tools-toggle-collapsed")},e.prototype.setModal=function(){var e=$('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>'),o=$('<div class="bre-modal-close"><a href="#">'+t.EditorStrings.buttonClose+" ✖</a></div>"),i=$('<div class="bre-modal-content"></div>'),n=$("<form></form>"),r=$('<div class="bre-btns"></div>'),l=$('<button type="button" class="bre-btn bre-btn-primary">'+t.EditorStrings.buttonOk+"</button>"),s=$('<button type="button" class="bre-btn">'+t.EditorStrings.buttonCancel+"</button>");r.append(l),r.append(s),n.append(r),i.append(n);var a=$(".bre-modal-placeholder",e);a.append(o),a.append(i),this.modal=new t.Modal(e,o,n,r,l,s),this.editor.$editor.append(e)},e.prototype.toggleToolsLoader=function(t){this.$toolsLoader.toggle(t)},e.prototype.setTemplates=function(e){var o=this,i=this.editor;e.forEach(function(e){if(0!==e.templates.length){var n=$("<div class='"+t.Selectors.classTemplateGroup+"'>"+e.name+"</div>");o.$toolsTemplates.append(n);var r=$("<div></div>");e.templates.forEach(function(t){var e=t.getPreview();e.attr("title",t.name),e.on("click",function(e){return i.addBlock(t),e.stopPropagation(),!1}),r.append(e)}),n.on("click",function(){r.toggle()}),o.$toolsTemplates.append(r)}})},e.initBtnDeck=function(t){$(".bre-btn",t).eq(0).on("click",function(o){return e.toggleBtnDeck(t),o.stopPropagation(),!1})},e.toggleBtnDeck=function(t,e){var o=$(".bre-btn",t);if(o&&0!=o.length){var i=o.eq(0);e=e||t.data().isOn||!1,e?(t.css({height:0,width:0}),o.not(":first").css({opacity:0,top:0,left:0})):(o.not(":first").each(function(t,e){$(e).css({opacity:1,left:(t+1)*(32+32/6)})}),t.css({height:32,width:(32+32/6)*o.length-32/6})),i.toggleClass("bre-btn-active",!e),t.data("isOn",!e)}},e}();t.UI=e}(BrickyEditor||(BrickyEditor={}));
\ No newline at end of file
diff --git a/dist/locales/jquery.brickyeditor.en.js b/dist/locales/jquery.brickyeditor.en.js
new file mode 100644
index 0000000..e429dff
--- /dev/null
+++ b/dist/locales/jquery.brickyeditor.en.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Blocks file not found. Requested file: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Templates file not found. Requested file:' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Template "' + templateName + '" not found.'; },
+
+    embedFieldLinkTitle: 'Link to embed media',
+
+    imageFieldLinkTitle: 'Image link',
+    imageFieldLinkPlaceholder: 'http://url-to-image.png',
+    
+    imageFieldUploadTitle: 'or Upload a file',
+    imageFieldUploadButton: 'Select file',
+
+    imageFieldAltTitle: 'Alt',
+    imageFieldAltPlaceholder: 'Image \'alt\' attribute value',
+
+    htmlEditorLinkUrlTitle: 'Url',
+    htmlEditorLinkUrlPlaceholder: 'http://put-your-link.here',
+
+    htmlEditorLinkTitleTitle: 'Title',
+    htmlEditorLinkTitlePlaceholder: 'Title attribute for link',
+
+    htmlEditorLinkTargetTitle: 'Target',
+    htmlEditorLinkTargetBlank: 'Blank',
+    htmlEditorLinkTargetSelf: 'Self',
+    htmlEditorLinkTargetParent: 'Parent',
+    htmlEditorLinkTargetTop: 'Top',
+
+    buttonClose: 'close',
+    buttonOk: 'Ok',
+    buttonCancel: 'Cancel',
+
+    defaultTemplatesGroupName: 'Other templates',
+});
\ No newline at end of file
diff --git a/dist/locales/jquery.brickyeditor.ru.js b/dist/locales/jquery.brickyeditor.ru.js
new file mode 100644
index 0000000..4210a7b
--- /dev/null
+++ b/dist/locales/jquery.brickyeditor.ru.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Не найден запрошенный файл с блоками. Указанный путь: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Не найден файл с шаблонами блоков. Указанный путь: ' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Шаблон блока "' + templateName + '" не найден.'; },
+
+    embedFieldLinkTitle: 'Ссылка на встраиваемый элемент',
+
+    imageFieldLinkTitle: 'Ссылка на картинку',
+    imageFieldLinkPlaceholder: 'http://ссылка-на-картинку.png',
+    
+    imageFieldUploadTitle: 'или Загрузите файл',
+    imageFieldUploadButton: 'Выбрать файл',
+
+    imageFieldAltTitle: 'Альтернативный текст (alt)',
+    imageFieldAltPlaceholder: 'Аттрибут \'alt\' для картинки',
+
+    htmlEditorLinkUrlTitle: 'Ссылка',
+    htmlEditorLinkUrlPlaceholder: 'http://ваша-ссылка.здесь',
+
+    htmlEditorLinkTitleTitle: 'Заголовок',
+    htmlEditorLinkTitlePlaceholder: 'Значение атрибута title',
+
+    htmlEditorLinkTargetTitle: 'Цель',
+    htmlEditorLinkTargetBlank: 'В новом окне (_blank)',
+    htmlEditorLinkTargetSelf: 'В текущем окне (_self)',
+    htmlEditorLinkTargetParent: 'Во фрейме-родителе (_parent)',
+    htmlEditorLinkTargetTop: 'В полном окне, игнорируя фреймы (_top)',
+
+    buttonClose: 'закрыть',
+    buttonOk: 'Ok',
+    buttonCancel: 'Отмена',
+
+    defaultTemplatesGroupName: 'Прочие шаблоны',
+});
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 6537401..6c060e9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -11,25 +11,30 @@ const srcTypescriptFolder = './src/tsc',
     srcTypescriptConfig = srcTypescriptFolder + '/tsconfig.json',
     srcTypescriptConfigES6 = srcTypescriptFolder + '/tsconfig.es6.json',
     srcTypescript = srcTypescriptFolder + '/**/*.ts',
+    srcJsFolder = './src/js',
+    srcJsLocales = srcJsFolder + '/locales/*.js',
 
     srcSassFolder = './src/scss',
     srcSass = srcSassFolder + '/**/*.scss',
     srcSassMain = srcSassFolder + '/main.scss',
 
     distFolder = './dist',
+    distLocalesFolder = distFolder + '/locales',
 
     demoFolder = './demo',
     demoJs = demoFolder + '/js',
+    demoJsLocales = demoJs + '/locales',
     demoCss = demoFolder + '/css',
 
     taskBrowserSync = 'browserSync',
     taskCompileTypescript = 'ts',
     taskCompileTypescriptES6 = 'ts_es6',
-    taskCompileSass = 'sass',
+    taskCopyLocales = 'copy_locales',
+    taskCompileSass = 'sass',    
     taskWatcher = 'watch';
 
 // Browser-sync task
-gulp.task(taskBrowserSync, function () {
+gulp.task(taskBrowserSync, () => {
     browserSync({
         server: {
             baseDir: demoFolder,
@@ -38,7 +43,7 @@ gulp.task(taskBrowserSync, function () {
 });
 
 // Typescript task
-gulp.task(taskCompileTypescript, function () {
+gulp.task(taskCompileTypescript, () => {
     const tsProject = ts.createProject(srcTypescriptConfig);
     const tsResult = gulp.src(srcTypescript)
         .pipe(tsProject());
@@ -61,7 +66,7 @@ gulp.task(taskCompileTypescript, function () {
 });
 
 // Typescript ES6 compilation task
-gulp.task(taskCompileTypescriptES6, function () {
+gulp.task(taskCompileTypescriptES6, () => {
     const tsProject = ts.createProject(srcTypescriptConfigES6);
     const tsResult = gulp.src(srcTypescript)
         .pipe(tsProject());
@@ -75,8 +80,15 @@ gulp.task(taskCompileTypescriptES6, function () {
     ];
 });
 
+// Copy locales task
+gulp.task(taskCopyLocales, () => {
+    return gulp.src(srcJsLocales)
+        .pipe(gulp.dest(demoJsLocales))
+        .pipe(gulp.dest(distLocalesFolder));
+})
+
 // Sass task
-gulp.task(taskCompileSass, function () {
+gulp.task(taskCompileSass, () => {
     return gulp.src(srcSassMain)
         .pipe(sass())
         .pipe(rename('jquery.brickyeditor.css'))
@@ -93,7 +105,7 @@ gulp.task(taskCompileSass, function () {
 });
 
 // Changes tracking task 
-gulp.task(taskWatcher, function () {
+gulp.task(taskWatcher, () => {
     gulp.watch(srcTypescript, [taskCompileTypescript]);
     gulp.watch(srcSass, [taskCompileSass]);
 });
@@ -101,6 +113,7 @@ gulp.task(taskWatcher, function () {
 gulp.task('default', [
     taskCompileTypescript,
     taskCompileTypescriptES6,
+    taskCopyLocales,
     taskCompileSass,
     taskWatcher,
     taskBrowserSync
@@ -109,5 +122,6 @@ gulp.task('default', [
 gulp.task('build', [
     taskCompileTypescript,
     taskCompileTypescriptES6,
+    taskCopyLocales,
     taskCompileSass
 ]);
diff --git a/package.json b/package.json
index a906daf..c941aa8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "brickyeditor",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "author": {
     "name": "George Yakovlev", 
     "email" : "yakovlev.ga@gmail.com", 
diff --git a/src/fields/TestField.js b/src/fields/TestField.js
index b33bd95..2f201a9 100644
--- a/src/fields/TestField.js
+++ b/src/fields/TestField.js
@@ -8,7 +8,7 @@ BrickyEditor.Fields.TestField = (function (baseField) {
         var _this = this;
         var $field = this.$field;
         if (!$field.is('[contenteditable]')) {
-            $field.attr('contenteditable', 'true');
+            $field.attr(Selectors.attrContentEditable, 'true');
         }
         var html = this.data.html || this.$field.html() || this.block.template.name;
         this.setHtml(html);
diff --git a/src/js/locales/jquery.brickyeditor.en.js b/src/js/locales/jquery.brickyeditor.en.js
new file mode 100644
index 0000000..e429dff
--- /dev/null
+++ b/src/js/locales/jquery.brickyeditor.en.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Blocks file not found. Requested file: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Templates file not found. Requested file:' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Template "' + templateName + '" not found.'; },
+
+    embedFieldLinkTitle: 'Link to embed media',
+
+    imageFieldLinkTitle: 'Image link',
+    imageFieldLinkPlaceholder: 'http://url-to-image.png',
+    
+    imageFieldUploadTitle: 'or Upload a file',
+    imageFieldUploadButton: 'Select file',
+
+    imageFieldAltTitle: 'Alt',
+    imageFieldAltPlaceholder: 'Image \'alt\' attribute value',
+
+    htmlEditorLinkUrlTitle: 'Url',
+    htmlEditorLinkUrlPlaceholder: 'http://put-your-link.here',
+
+    htmlEditorLinkTitleTitle: 'Title',
+    htmlEditorLinkTitlePlaceholder: 'Title attribute for link',
+
+    htmlEditorLinkTargetTitle: 'Target',
+    htmlEditorLinkTargetBlank: 'Blank',
+    htmlEditorLinkTargetSelf: 'Self',
+    htmlEditorLinkTargetParent: 'Parent',
+    htmlEditorLinkTargetTop: 'Top',
+
+    buttonClose: 'close',
+    buttonOk: 'Ok',
+    buttonCancel: 'Cancel',
+
+    defaultTemplatesGroupName: 'Other templates',
+});
\ No newline at end of file
diff --git a/src/js/locales/jquery.brickyeditor.ru.js b/src/js/locales/jquery.brickyeditor.ru.js
new file mode 100644
index 0000000..4210a7b
--- /dev/null
+++ b/src/js/locales/jquery.brickyeditor.ru.js
@@ -0,0 +1,34 @@
+$.extend(BrickyEditor.EditorStrings, {
+    errorBlocksFileNotFound: function(url) { return 'Не найден запрошенный файл с блоками. Указанный путь: ' + url; },
+    errorTemplatesFileNotFound: function(url) { return 'Не найден файл с шаблонами блоков. Указанный путь: ' + url; },
+    errorBlockTemplateNotFound: function (templateName) { return 'Шаблон блока "' + templateName + '" не найден.'; },
+
+    embedFieldLinkTitle: 'Ссылка на встраиваемый элемент',
+
+    imageFieldLinkTitle: 'Ссылка на картинку',
+    imageFieldLinkPlaceholder: 'http://ссылка-на-картинку.png',
+    
+    imageFieldUploadTitle: 'или Загрузите файл',
+    imageFieldUploadButton: 'Выбрать файл',
+
+    imageFieldAltTitle: 'Альтернативный текст (alt)',
+    imageFieldAltPlaceholder: 'Аттрибут \'alt\' для картинки',
+
+    htmlEditorLinkUrlTitle: 'Ссылка',
+    htmlEditorLinkUrlPlaceholder: 'http://ваша-ссылка.здесь',
+
+    htmlEditorLinkTitleTitle: 'Заголовок',
+    htmlEditorLinkTitlePlaceholder: 'Значение атрибута title',
+
+    htmlEditorLinkTargetTitle: 'Цель',
+    htmlEditorLinkTargetBlank: 'В новом окне (_blank)',
+    htmlEditorLinkTargetSelf: 'В текущем окне (_self)',
+    htmlEditorLinkTargetParent: 'Во фрейме-родителе (_parent)',
+    htmlEditorLinkTargetTop: 'В полном окне, игнорируя фреймы (_top)',
+
+    buttonClose: 'закрыть',
+    buttonOk: 'Ok',
+    buttonCancel: 'Отмена',
+
+    defaultTemplatesGroupName: 'Прочие шаблоны',
+});
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index c32fd8c..af90b9f 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -4,6 +4,7 @@
 @import "partials/_input";
 @import "partials/_modal";
 @import "partials/_tools";
+@import "partials/_field";
 
 .bre {
     * {
diff --git a/src/scss/partials/_field.scss b/src/scss/partials/_field.scss
new file mode 100644
index 0000000..ef11904
--- /dev/null
+++ b/src/scss/partials/_field.scss
@@ -0,0 +1,5 @@
+@import '_base';
+
+.bre-field-selected {
+    outline: dotted 1px $border-color;  
+}
\ No newline at end of file
diff --git a/src/scss/partials/_tools.scss b/src/scss/partials/_tools.scss
index 662c9cd..905ef80 100644
--- a/src/scss/partials/_tools.scss
+++ b/src/scss/partials/_tools.scss
@@ -70,6 +70,15 @@
         height: 99%;
         overflow: auto;    
     
+        .bre-template-group {
+            color: $accent-color;
+            font-size: .5rem;
+            padding: .5rem .5rem 0rem .5rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+
         .bre-template {
 
             > *,
@@ -90,6 +99,24 @@
             &:hover {
                 background: darken(#fff, 5%);
             }
+
+            .bre-field-container {
+                padding: 1rem;
+                border: 1px solid $border-color;
+                border-right-width: 0px;
+                text-align: center;     
+                font-weight: bold;
+                font-size: 1rem;
+                color: $accent-color;
+
+                &::after {
+                    content: '\2295';
+                }
+            }
+
+            .bre-field-container:last-child {
+                border-right-width: 1px;
+            }
         }        
 
         @media (min-width: 576px) and (max-width: 1023px) { 
diff --git a/src/tsc/Block/Block.ts b/src/tsc/Block/Block.ts
index 6ed1f8f..027f6fe 100644
--- a/src/tsc/Block/Block.ts
+++ b/src/tsc/Block/Block.ts
@@ -2,6 +2,7 @@ namespace BrickyEditor {
     export class Block {
         public fields: Array<Fields.BaseField> = [];
         public ui: BlockUI;
+        public selectedField: Fields.BaseField;
 
         constructor(
             public template: Template,
@@ -27,6 +28,13 @@ namespace BrickyEditor {
             this.ui = new BlockUI($block, preview, actions, () => this.select());
         }
 
+        public isContainer() : boolean {
+            if(!this.selectedField)
+                return false;
+
+            return this.selectedField instanceof Fields.ContainerField;
+        }
+
         /**
          * Finds and binds block fields
          *
@@ -44,8 +52,11 @@ namespace BrickyEditor {
                         this.onUpdate(block, property, oldValue, newValue);
                     }
                 };
+                const onSelect = (field: Fields.BaseField) => {
+                    block.select(field);
+                };
                 let $field = $(elem);                
-                let field = Fields.BaseField.createField($field, data, () => block.select(), onUpdate);
+                let field = Fields.BaseField.createField($field, data, onSelect, onUpdate);
                 this.fields.push(field);
             });
         }
@@ -75,12 +86,28 @@ namespace BrickyEditor {
             this.onCopy(this);
         }
 
-        public select() {
+        public select(field?: Fields.BaseField) {
+            if(field === this.selectedField)
+                return;
+                
+            if(field === null) {
+                field = this.fields[0];
+            }
+
+            if(this.selectedField) {
+                this.selectedField.deselect();
+            }
+
+            this.selectedField = field;
             this.ui.toggleSelection(true);
             this.onSelect(this);
         }
 
         public deselect() {
+            this.selectedField = null;
+            this.fields.forEach(f => {
+                f.deselect()
+            });
             this.ui.toggleSelection(false);
             this.onDeselect(this);
         }
@@ -108,23 +135,30 @@ namespace BrickyEditor {
             return data;
         }
 
-        public getHtml(trim: Boolean, skipAttrRemoving: Boolean = false): string {
-            let $html = this.ui.$block.clone(false, false)
+        public getHtml(trim: Boolean): string {
+            let $html = this.template.$html.clone(false, false)
                 .wrap('<div></div>')
                 .parent();
 
-            // Firefox execCommand hack
-            $('.bre-temp-container', $html).each((idx, el) => {
-                let $el = $(el);
-                $el.replaceWith($el.children());
-            });
+            let fieldsHtml = {};
+            this.fields.forEach(field => {
+                const name = field.name || field.data.name;
+                fieldsHtml[name] = field.getEl();
+            });    
 
-            ['contenteditable', 'data-bre-field'].forEach((attr) => {
-                $(`[${attr}]`, $html).each((idx, el) => {
-                    el.removeAttribute(attr);
+            $html
+                .find(Selectors.selectorField)
+                .addBack(Selectors.selectorField)
+                .each((idx, elem) => {
+                    let fieldData = $(elem).data().breField;
+                    if(typeof fieldData === 'string') {
+                        fieldData = JSON.parse(fieldData.replace(/'/g, '"'));
+                    }
+                    const name = fieldData.name;
+                    const $field = fieldsHtml[name];
+                    $(elem).replaceWith($field);
                 });
-            });            
-
+                
             return trim ? $html.html().breTotalTrim() : $html.html();
         }
     }
diff --git a/src/tsc/Block/BlockUI.ts b/src/tsc/Block/BlockUI.ts
index 13cc994..f1c7753 100644
--- a/src/tsc/Block/BlockUI.ts
+++ b/src/tsc/Block/BlockUI.ts
@@ -60,7 +60,11 @@ namespace BrickyEditor {
         private buildButton(action: BlockUIAction): JQuery {
             let $el = $(`<button type="button" class="bre-btn"><i class="fa fa-${action.icon}"></i></button>`);
             if (action.action) {
-                $el.on('click', () => action.action());
+                $el.on('click', (ev) => {
+                    action.action()
+                    ev.stopPropagation();
+                    return false;
+                });
             }
             return $el;
         }
diff --git a/src/tsc/BlocksContainer.ts b/src/tsc/BlocksContainer.ts
new file mode 100644
index 0000000..dd65eb8
--- /dev/null
+++ b/src/tsc/BlocksContainer.ts
@@ -0,0 +1,171 @@
+namespace BrickyEditor {
+    export class BlocksContainer {
+
+        public blocks: Array<Block> = [];
+        public selectedBlock: Block;
+        public isContainer: boolean = true;
+        public $placeholder: JQuery;
+
+        constructor(
+            private $element: JQuery,
+            private onAddBlock: (block: Block, idx: number) => any,
+            private onDeleteBlock: (block: Block, idx: number) => any,
+            private onSelectBlock: (block: Block) => any,
+            private onDeselectBlock: (block: Block) => any,
+            private onMoveBlock: (block: Block, from: number, to: number) => any,
+            private onUpdateBlock: (block: Block, property: string, oldValue: any, newValue: any) => any,
+            private usePlaceholder: boolean = false) {
+
+            this.togglePlaceholderIfNeed();
+        }
+
+        public getData(ignoreHtml?: Boolean): any {
+            var blocksData = [];
+            this.blocks.forEach(block => {
+                blocksData.push(block.getData(ignoreHtml));
+            });
+            return blocksData;
+        }
+
+        public getHtml(): string {
+            var blocksHtml = [];
+            this.blocks.forEach(block => {
+                blocksHtml.push(block.getHtml(true));
+            });
+
+            var blocksHtmlJoined = blocksHtml.join('\n');
+            let $el = this.$element.clone(false, false).html(blocksHtmlJoined).wrap('<div></div>');
+            const html = $('<div></div>').append($el).html();
+            return html;
+        }
+
+        public addBlock(
+            template: Template,
+            data?: Array<Fields.BaseField>,
+            idx?: number,
+            select: boolean = true) {
+
+            let block = new Block(
+                template,
+                false,
+                data,
+                block => this.deleteBlock(block),
+                block => this.selectBlock(block),
+                block => this.deselectBlock(block),
+                block => this.copyBlock(block),
+                (block, offset) => this.moveBlock(block, offset),
+                this.onUpdateBlock);
+
+            this.insertBlock(block, idx);
+
+            if (select) {
+                block.select();
+                block.scrollTo();
+            }
+        }
+
+        private insertBlock(block: Block, idx?: number) {
+            idx = idx || this.blocks.length;
+            if (this.selectedBlock) {
+                idx = this.blocks.indexOf(this.selectedBlock) + 1;
+            }
+
+            this.blocks.splice(idx, 0, block);
+            if (idx == 0) {  // todo: move to block ui
+                this.$element.append(block.ui.$editor);
+            }
+            else { // todo: move to block ui
+                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
+            }
+
+            this.onAddBlock(block, idx);
+            block.select(null);
+
+            this.togglePlaceholderIfNeed();
+        }
+
+        private deleteBlock(block: Block) {
+            const idx = this.blocks.indexOf(block);
+            this.blocks.splice(idx, 1);
+            block = null;
+
+            if (idx < this.blocks.length) {
+                this.blocks[idx].select();
+            }
+            else if (this.blocks.length > 0) {
+                this.blocks[idx - 1].select();
+            }
+            else {
+                this.selectedBlock = null;
+            }
+
+            // Trigger event
+            this.onDeleteBlock(block, idx);
+
+            this.togglePlaceholderIfNeed();
+        }
+
+        private moveBlock(block: Block, offset: number) {
+            const idx = this.blocks.indexOf(block);
+            const new_idx = idx + offset;
+
+            if (new_idx >= this.blocks.length || new_idx < 0)
+                return;
+
+            var $anchorBlock = this.blocks[new_idx].ui.$editor;
+            if (offset > 0) {
+                $anchorBlock.after(block.ui.$editor);
+            }
+            else if (offset < 0) {
+                $anchorBlock.before(block.ui.$editor);
+            }
+
+            this.blocks.splice(idx, 1);
+            this.blocks.splice(new_idx, 0, block);
+
+            this.onMoveBlock(block, idx, new_idx);
+
+            // Scroll to block
+            block.scrollTo();
+        }
+
+        private copyBlock(block: Block) {
+            const idx = this.blocks.indexOf(block) + 1;
+            const copy = this.addBlock(block.template, block.getData().fields, idx, true);
+        }
+
+        private selectBlock(block: Block) {
+            if (this.selectedBlock === block)
+                return;
+
+            if (this.selectedBlock) {
+                this.selectedBlock.deselect();
+            }
+
+            this.selectedBlock = block;
+            this.onSelectBlock(block);
+        }
+
+        private deselectBlock(block: Block) {
+            this.selectedBlock = null;
+            this.onDeselectBlock(block);
+        }
+
+        private togglePlaceholderIfNeed() {
+            if(!this.usePlaceholder) {
+                return;
+            }
+
+            if(this.blocks.length === 0) {
+                if(!this.$placeholder) {
+                    this.$placeholder = $('<i data-bre-placeholder="true">Click here to select this container...</i>');
+                    this.$element.append(this.$placeholder);
+                }
+            }
+            else if (this.$placeholder) {
+                this.$placeholder.remove();
+                this.$placeholder = null;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/tsc/Editor.ts b/src/tsc/Editor.ts
index 44a014f..112d861 100644
--- a/src/tsc/Editor.ts
+++ b/src/tsc/Editor.ts
@@ -4,38 +4,67 @@
 namespace BrickyEditor {
     export class Editor {
         private isLoaded: boolean;
+        private container: BlocksContainer;
 
         public $editor: JQuery
         public static UI: UI;        
         public options: EditorOptions;
-        public blocks: Array<Block> = [];
-        public selectedBlock: Block;
-        public get selectedBlockIndex() {
-            if (this.selectedBlock) {
-                return this.blocks.indexOf(this.selectedBlock);
-            }
-            return -1;
-        }
-
-        private compactTools?: boolean = null;
 
         constructor(
             $editor: JQuery,
             options: EditorOptions) {
             Fields.BaseField.registerCommonFields();
-
+            
             this.$editor = $editor;
-            this.$editor.addClass('bre-editor');            
+            this.$editor.addClass(Selectors.classEditor);            
             this.options = new EditorOptions(options);
+            this.container = this.createContainer();
 
-            Editor.UI = new UI(this);
+            Editor.UI = new UI(this);            
+        }
+
+        private createContainer(): BlocksContainer {
+            const onAdd = (block: Block, idx: number) => {
+                if(this.isLoaded) {
+                    this.trigger(Events.onBlockAdd, { block: block, idx: idx});
+                    this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+                }
+            };
+
+            const onDelete = (block: Block, idx: number) => {
+                this.trigger(Events.onBlockDelete, { block: block, idx: idx});
+                this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+            }
+
+            const onUpdate = (block, property, oldValue, newValue) => { 
+                this.trigger(Events.onBlockUpdate, {
+                    block : block, 
+                    property: property, 
+                    oldValue: oldValue, 
+                    newValue: newValue
+                });
+                this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+            };
+
+            return new BlocksContainer(
+                this.$editor,
+                onAdd,
+                onDelete,
+                (block: Block) => { this.trigger(Events.onBlockSelect, { block: block }); },
+                (block: Block) => { this.trigger(Events.onBlockDeselect, { block: block }); },
+                (block: Block, from: number, to: number) => {
+                    this.trigger(Events.onBlockMove, { block: block, from: from, to: to });
+                    this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
+                },
+                onUpdate
+            );
         }
 
         public async initAsync() {
             /// Load templates
             Editor.UI.toggleToolsLoader(true);
 
-            const templates = await Services.TemplateService.loadTemplatesAsync(this);    
+            const templates = await Services.TemplateService.loadTemplatesAsync(this.options.templatesUrl, this.$editor, this.onError);    
             Editor.UI.toggleToolsLoader(false);
             Editor.UI.setTemplates(templates);
 
@@ -56,8 +85,8 @@ namespace BrickyEditor {
                     try {
                         const blocks = await $.get(url);
                         resolve(blocks);
-                    } catch (error) {
-                        console.log('Blocks file not found.');
+                    } catch (error) {    
+                        this.onError(EditorStrings.errorBlocksFileNotFound(url));
                         reject(error);
                     }
                 }
@@ -99,19 +128,11 @@ namespace BrickyEditor {
         }
 
         public getData(): any {
-            var blocksData = [];
-            this.blocks.forEach(block => {
-                blocksData.push(block.getData(this.options.ignoreHtml));
-            });
-            return blocksData;
+            return this.container.getData(this.options.ignoreHtml);
         }
 
         public getHtml(): string {
-            var blocksData = [];
-            this.blocks.forEach(block => {
-                blocksData.push(block.getHtml(true));
-            });
-            return blocksData.join('\n');
+            return this.container.getHtml();
         }
 
         /// BLOCKS
@@ -120,141 +141,33 @@ namespace BrickyEditor {
                 blocks.forEach(block => {
                     let template = Services.TemplateService.getTemplate(block.template);
                     if (template) {
-                        this.addBlock(template, block.fields, null, false);
+                        this.container.addBlock(template, block.fields, null, false);
                     }
                     else {
-                        console.log(`Template ${block.template} not found.`);
+                        const message = EditorStrings.errorBlockTemplateNotFound(block.template);
+                        this.onError(message);
                     }
                 });
             }
         }
 
-        public addBlock(
-            template: Template,
-            data?: Array<Fields.BaseField>,
-            idx?: number,
-            select: boolean = true) {
-
-            const onUpdate = (block, property, oldValue, newValue) => { 
-                this.trigger(Events.onBlockUpdate, {
-                    block : block, 
-                    property: property, 
-                    oldValue: oldValue, 
-                    newValue: newValue
-                });
-                this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            };
-
-            let block = new Block(
-                template, 
-                false, 
-                data,
-                block => this.deleteBlock(block),
-                block => this.selectBlock(block),
-                block => this.deselectBlock(block),
-                block => this.copyBlock(block),
-                (block, offset) => this.moveBlock(block, offset),
-                onUpdate);
-
-            this.insertBlock(block, idx);
-
-            if (select) {
-                block.select();
-                block.scrollTo();
-            }
+        public addBlock(template: Template) {
+            const container = this.getContainer(this.container);
+            container.addBlock(template, null, null, true);
         }
 
-        private insertBlock(block: Block, idx?: number) {
-            idx = idx || this.blocks.length;
-            if (this.selectedBlock) {
-                idx = this.selectedBlockIndex + 1;
+        private getContainer(container: BlocksContainer) {
+            if(container.selectedBlock && container.selectedBlock.isContainer()) {
+                const field = container.selectedBlock.selectedField as Fields.ContainerField;
+                if(field) {
+                    return this.getContainer(field.container);
+                }                
             }
-
-            this.blocks.splice(idx, 0, block);
-            if (idx == 0) {  // todo: move to block ui
-                this.$editor.append(block.ui.$editor);
-            }
-            else { // todo: move to block ui
-                this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
-            }
-
-            // Trigger jQuery event
-            if(this.isLoaded) {
-                this.trigger(Events.onBlockAdd, { block: block, idx: idx});
-                this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-            }
-        }
-
-        private deleteBlock(block: Block) {
-            const idx = this.blocks.indexOf(block);
-            this.blocks.splice(idx, 1);
-            block = null;
-
-            if (idx < this.blocks.length) {
-                this.blocks[idx].select();
-            }
-            else if (this.blocks.length > 0) {
-                this.blocks[idx - 1].select();
-            }
-            else {
-                this.selectedBlock = null;
-            }
-
-            // Trigger jQuery event
-            this.trigger(Events.onBlockDelete, { block: block, idx: idx});
-            this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-        }
-
-        private moveBlock(block: Block, offset: number) {
-            const idx = this.blocks.indexOf(block);
-            const new_idx = idx + offset;
-
-            if (new_idx >= this.blocks.length || new_idx < 0)
-                return;
-
-            var $anchorBlock = this.blocks[new_idx].ui.$editor;
-            if (offset > 0) {
-                $anchorBlock.after(block.ui.$editor);
-            }
-            else if (offset < 0) {
-                $anchorBlock.before(block.ui.$editor);
-            }
-
-            this.blocks.splice(idx, 1);
-            this.blocks.splice(new_idx, 0, block);
-
-            // Trigger jQuery event
-            this.trigger(Events.onBlockMove, { block: block, from: idx, to: new_idx });
-            this.trigger(Events.onChange, { blocks: this.getData(), html: this.getHtml() });
-
-            // Scroll to block
-            block.scrollTo();
+            return container;
         }
 
-        private copyBlock(block: Block) {
-            const idx = this.blocks.indexOf(block) + 1;
-            const copy = this.addBlock(block.template, block.getData().fields, idx, true);
-        }
-
-        private selectBlock(block: Block) {
-            if (this.selectedBlock === block)
-                return;
-
-            if (this.selectedBlock) {
-                this.selectedBlock.deselect();
-            }
-
-            this.selectedBlock = block;
-
-            // Trigger jQuery event
-            this.trigger(Events.onBlockSelect, { block: block });
-        }
-
-        private deselectBlock(block: Block) {
-            this.selectedBlock = null;
-
-            // Trigger jQuery event
-            this.trigger(Events.onBlockDeselect, { block: block });
+        public onError(message: string, code: number = 0) {
+            this.options.onError({ message: message, code: code});
         }
 
         private trigger(event: string, data: any) {
diff --git a/src/tsc/EditorOptions.ts b/src/tsc/EditorOptions.ts
index bf49904..b85b051 100644
--- a/src/tsc/EditorOptions.ts
+++ b/src/tsc/EditorOptions.ts
@@ -7,6 +7,11 @@ namespace BrickyEditor {
         public onload: any; // depricated callback
         public onLoad: any;
 
+        /** OnError callback */
+        public onError: any = (data: any) => {
+            console.log(data.message);
+        }
+
         /** OnChange callback */
         public onChange: any;
         /** onBlockAdd callback */
@@ -50,6 +55,7 @@ namespace BrickyEditor {
             this.onBlockSelect = options.onBlockSelect;
             this.onBlockDeselect = options.onBlockDeselect;
             this.onBlockUpdate = options.onBlockUpdate;
+            this.onError = options.onError || this.onError;
 
             this.blocksUrl = options.blocksUrl || null;
             this.blocks = options.blocks || null;
diff --git a/src/tsc/EditorStrings.ts b/src/tsc/EditorStrings.ts
new file mode 100644
index 0000000..ed11782
--- /dev/null
+++ b/src/tsc/EditorStrings.ts
@@ -0,0 +1,37 @@
+namespace BrickyEditor {
+    export class EditorStrings {
+        static errorBlocksFileNotFound = function(url: string) { return `Blocks file not found. Requested file: ${url}.`; }
+        static errorTemplatesFileNotFound = function(url: string) { return `Templates file not found. Requested file: ${url}.`; }
+        static errorBlockTemplateNotFound = function(templateName: string) { return `Template "${templateName}" not found.`; }
+        
+        static embedFieldLinkTitle = 'Link to embed media';
+        static embedFieldLinkPlaceholder = 'Link to instagram, youtube and etc.';
+
+        static imageFieldLinkTitle = 'Image link';
+        static imageFieldLinkPlaceholder = 'http://url-to-image.png';
+        
+        static imageFieldUploadTitle = 'or Upload a file';
+        static imageFieldUploadButton = 'Select file';
+
+        static imageFieldAltTitle = 'Alt';
+        static imageFieldAltPlaceholder = 'Image \'alt\' attribute value';
+
+        static htmlEditorLinkUrlTitle = 'Url';
+        static htmlEditorLinkUrlPlaceholder = 'http://put-your-link.here';
+
+        static htmlEditorLinkTitleTitle = 'Title';
+        static htmlEditorLinkTitlePlaceholder = 'Title attribute for link';
+
+        static htmlEditorLinkTargetTitle = 'Target';
+        static htmlEditorLinkTargetBlank = 'Blank';
+        static htmlEditorLinkTargetSelf = 'Self';
+        static htmlEditorLinkTargetParent = 'Parent';
+        static htmlEditorLinkTargetTop = 'Top';
+
+        static buttonClose = 'close';
+        static buttonOk = 'Ok';
+        static buttonCancel = 'Cancel';
+        
+        static defaultTemplatesGroupName = 'Other templates';
+    }
+}
\ No newline at end of file
diff --git a/src/tsc/Fields/BaseField.ts b/src/tsc/Fields/BaseField.ts
index e265ed8..6a361bc 100644
--- a/src/tsc/Fields/BaseField.ts
+++ b/src/tsc/Fields/BaseField.ts
@@ -13,7 +13,7 @@ namespace BrickyEditor {
             public $field: JQuery;
             public name: string;
             public data: any;
-            private onSelect: () => void;
+            private onSelect: (field: BaseField) => void;
             private onUpdate: (property, oldValue, newValue) => void;
 
             protected settings: (field: BaseField) => void;
@@ -21,7 +21,12 @@ namespace BrickyEditor {
                 return null;
             }
 
-            constructor($field: JQuery, data: any, onSelect: () => void, onUpdate: (property, oldValue, newValue) => void) {
+            constructor(
+                $field: JQuery, 
+                data: any, 
+                onSelect: (field: BaseField) => void, 
+                onUpdate: (property, oldValue, newValue) => void) {
+
                 this.$field = $field;
                 this.data = data;
                 this.onSelect = onSelect;
@@ -36,6 +41,7 @@ namespace BrickyEditor {
                 HtmlField.registerField();
                 ImageField.registerField();
                 EmbedField.registerField();
+                ContainerField.registerField();
             };
 
             private static registerField() {
@@ -51,7 +57,7 @@ namespace BrickyEditor {
             public static createField(
                 $field: JQuery, 
                 data: any, 
-                onSelect: () => void, 
+                onSelect: (field: BaseField) => void, 
                 onUpdate: (property, oldValue, newValue) => void): BaseField {
 
                 let fieldData = $field.data().breField;
@@ -104,8 +110,19 @@ namespace BrickyEditor {
 
             protected bind() { }
 
-            protected selectBlock() {
-                this.onSelect();
+            protected select() {
+                this.$field.addClass(Selectors.selectorFieldSelected);
+                this.onSelect(this);
+            }
+
+            public deselect() {
+                this.$field.removeClass(Selectors.selectorFieldSelected);
+            }
+
+            public getEl() : JQuery {
+                let $el = this.$field.clone(false);
+                $el.removeAttr(Selectors.attrField);
+                return $el;
             }
 
             protected updateProperty(prop: string, value: any, fireUpdate:boolean = true) {                
diff --git a/src/tsc/Fields/ContainerField.ts b/src/tsc/Fields/ContainerField.ts
new file mode 100644
index 0000000..fe50a61
--- /dev/null
+++ b/src/tsc/Fields/ContainerField.ts
@@ -0,0 +1,48 @@
+namespace BrickyEditor {
+    export namespace Fields {
+        export class ContainerField extends BaseField {
+
+            public container: BlocksContainer;
+            private $placeholder: JQuery;
+
+            bind() {
+                let field = this;
+                let $field = this.$field;
+
+                this.container = new BlocksContainer($field,
+                    (block: Block) => { 
+                        field.updateBlocks(); 
+                    },
+                    (block: Block) => { field.updateBlocks(); },
+                    (block: Block) => { this.select(); },
+                    (block: Block) => { },
+                    (block: Block) => { field.updateBlocks(); },
+                    (block: Block) => { field.updateBlocks(); },
+                    true);
+
+                $field.addClass(Selectors.selectorFieldContainer);
+                $field
+                    .on('click', (ev) => {                        
+                        field.select();
+                        ev.stopPropagation();
+                        return false;
+                    });
+            }
+
+            updateBlocks() {
+                this.updateProperty('blocks', this.container.getData(true), true);
+                this.updateProperty('html', this.container.getHtml(), true);
+            }
+
+            public deselect() {
+                this.container.blocks.forEach(b => b.deselect());
+                this.$field.removeClass(Selectors.selectorFieldSelected);
+            }
+
+            public getEl(): JQuery {
+                let html = this.container.getHtml();
+                return $(html);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/tsc/Fields/EmbedField.ts b/src/tsc/Fields/EmbedField.ts
index 0d3be9b..8571f09 100644
--- a/src/tsc/Fields/EmbedField.ts
+++ b/src/tsc/Fields/EmbedField.ts
@@ -10,9 +10,7 @@ namespace BrickyEditor {
 
             get settings(): (field: BaseField) => void {
                 return (field: EmbedField) => {
-                    const url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                    field.setUrl(url);
-                    field.loadMedia(true);
+                    this.showEmbedLoaderAsync(field);
                 }
             }
 
@@ -20,15 +18,30 @@ namespace BrickyEditor {
                 let field = this;
                 let $field = this.$field;
                 
-                $field.on('click', async () => {                    
-                    const url = prompt('Link to embed media', 'http://instagr.am/p/BO9VX2Vj4fF/');
-                    field.setUrl(url);
-                    await field.loadMedia(true);
+                $field.on('click', async () => {
+                    this.showEmbedLoaderAsync(field);
                 });
 
                 field.loadMedia(false);
             }
 
+            private async showEmbedLoaderAsync(field) {
+                const fields = await Editor.UI.modal.promptAsync(field.getPromptParams());
+                if(fields != null) {
+                    const url = fields.getValue('url');
+                    if (url) {
+                        field.setUrl(url);
+                        await field.loadMedia(true);
+                    }
+                }
+            }
+
+            private getPromptParams(): Array<Prompt.PromptParameter> {
+                return [
+                    new Prompt.PromptParameter('url', EditorStrings.embedFieldLinkTitle, this.data.url || 'http://instagr.am/p/BO9VX2Vj4fF/', EditorStrings.embedFieldLinkPlaceholder)
+                ];
+            }
+
             async loadMedia(fireUpdate: boolean) {
                 let field = this;
                 if (!field.data || !field.data.url)
@@ -57,7 +70,7 @@ namespace BrickyEditor {
                 field.$field.removeAttr('class');
                 field.$field.removeAttr('style');
                 field.$field.append($embed);
-                field.selectBlock();
+                field.select();
             }
 
             setEmbed(value: any, fireUpdate: boolean = true) {
diff --git a/src/tsc/Fields/HtmlField.ts b/src/tsc/Fields/HtmlField.ts
index 4a3f90d..67f0d4b 100644
--- a/src/tsc/Fields/HtmlField.ts
+++ b/src/tsc/Fields/HtmlField.ts
@@ -6,8 +6,8 @@ namespace BrickyEditor {
                 let field = this;
                 let $field = this.$field;
 
-                if (!$field.is('[contenteditable]')) {
-                    $field.attr('contenteditable', 'true');
+                if (!$field.is(Selectors.selectorContentEditable)) {
+                    $field.attr(Selectors.attrContentEditable, 'true');
                 }
 
                 var html = this.data.html || this.$field.html();
@@ -30,7 +30,7 @@ namespace BrickyEditor {
                     })
                     .on('click', (ev) => {
                         // Prevents the event from bubbling up the DOM tree
-                        field.selectBlock();
+                        field.select();
                         ev.stopPropagation();
                         return false;
                     });
@@ -43,6 +43,12 @@ namespace BrickyEditor {
                 }
                 this.updateProperty('html', value, fireUpdate);
             }
+
+            public getEl(): JQuery {
+                let $el = super.getEl();
+                $el.removeAttr(Selectors.attrContentEditable);
+                return $el;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/tsc/Fields/ImageField.ts b/src/tsc/Fields/ImageField.ts
index c46acbb..aee58c9 100644
--- a/src/tsc/Fields/ImageField.ts
+++ b/src/tsc/Fields/ImageField.ts
@@ -9,29 +9,31 @@ namespace BrickyEditor {
 
                 this.setSrc(this.data.src, false);
                 $field.on('click', async () => {
-                    const fields = await Editor.UI.modal.promptAsync(field.getPromptParams());                    
-                    const file = fields.getValue('file');
-                    const src = fields.getValue('src');
-                    if (file) {
-                        field.setFile(file);
-                        field.setSrc(null);
-                    }
-                    else if (src) {
-                        field.setSrc(src);
-                        field.setFile(null);
-                    }
+                    const fields = await Editor.UI.modal.promptAsync(field.getPromptParams());
+                    if(fields != null) {
+                        const file = fields.getValue('file');
+                        const src = fields.getValue('src');
+                        if (file) {
+                            field.setFile(file);
+                            field.setSrc(null);
+                        }
+                        else if (src) {
+                            field.setSrc(src);
+                            field.setFile(null);
+                        }
 
-                    let alt = fields.getValue('alt');
-                    field.setAlt(alt);
-                    field.selectBlock();
+                        let alt = fields.getValue('alt');
+                        field.setAlt(alt);
+                    }
+                    field.select();
                 });
             }
 
             private getPromptParams(): Array<Prompt.PromptParameter> {
                 return [
-                    new Prompt.PromptParameter('src', 'Image Link', this.data.url, 'image url'),
-                    new Prompt.PromptParameterImage('file', 'or Upload file', this.data.file, 'select file'),
-                    new Prompt.PromptParameter('alt', 'Alt', this.data.alt, 'alt attribute value '),
+                    new Prompt.PromptParameter('src', EditorStrings.imageFieldLinkTitle, this.data.url, EditorStrings.imageFieldLinkPlaceholder),
+                    new Prompt.PromptParameterImage('file', EditorStrings.imageFieldUploadTitle, this.data.file, EditorStrings.imageFieldUploadButton),
+                    new Prompt.PromptParameter('alt', EditorStrings.imageFieldAltTitle, this.data.alt, EditorStrings.imageFieldAltPlaceholder),
                 ];
             }
 
diff --git a/src/tsc/Prompt/PromptParameterImage.ts b/src/tsc/Prompt/PromptParameterImage.ts
index 236628c..fcbd7ac 100644
--- a/src/tsc/Prompt/PromptParameterImage.ts
+++ b/src/tsc/Prompt/PromptParameterImage.ts
@@ -25,7 +25,7 @@ namespace BrickyEditor {
                 var $editor = $(`
                 <div class='bre-image-input'>
                     <label for="${this.key}">
-                        Select file...
+                        ${this.placeholder}
                     </label>                        
                     <img src="${img}"/>                    
                     <input type="file" id="${this.key}" class="bre-input" placeholder="${this.placeholder}">
diff --git a/src/tsc/Services/TemplateService.ts b/src/tsc/Services/TemplateService.ts
index 2f9fa74..3220ce0 100644
--- a/src/tsc/Services/TemplateService.ts
+++ b/src/tsc/Services/TemplateService.ts
@@ -2,14 +2,17 @@ namespace BrickyEditor {
     export namespace Services {
         export class TemplateService {
             
-            static templates: Template[];
+            static templates: TemplateGroup[];
 
-            static async loadTemplatesAsync(editor: Editor): Promise<Template[]> {
+            static async loadTemplatesAsync(
+                url: string, 
+                $editor: JQuery, 
+                onError: (message: string, code?: number) => any): Promise<TemplateGroup[]> {
+                
                 this.templates = [];
                 const templates = this.templates;
-                const url = editor.options.templatesUrl;
                 
-                return new Promise<Template[]>(async (resolve, reject) => {
+                return new Promise<TemplateGroup[]>(async (resolve, reject) => {
                     
                     try {
                         const data = await $.get(url);
@@ -17,29 +20,53 @@ namespace BrickyEditor {
                         // set custom templates style
                         const $style = $(data).filter('style');
                         if ($style && $style.length > 0) {
-                            editor.$editor.prepend($style);
+                            $editor.prepend($style);
                         }
 
-                        const $templates = $(data).filter('.bre-template');
-                        $templates.each((idx, t) => {
-                            let template = new Template(t);
-                            this.templates.push(template);
-                        });
+                        let $data = $(`<div>${data}</div>`);
+                        const $groups = $(Selectors.selectorTemplateGroup, $data);
+                        $groups.each((idx, el) => {
+                            let $group = $(el);     
+                            let templates = this.getTemplates($group);
+                            this.templates.push(new TemplateGroup($group.attr('title'), templates));
+                            $group.remove();
+                        })
+                                                    
+                        // the rest ungroupped templates
+                        let templates = this.getTemplates($data);
+                        let defaultGroupName = this.templates.length > 0 ? EditorStrings.defaultTemplatesGroupName : '';
+                        let group = new TemplateGroup(defaultGroupName, templates);
+                        this.templates.push(group);
 
                         resolve(this.templates);
                     }
                     catch (err) {
-                        console.log('Templates file not found.');
+                        onError(EditorStrings.errorTemplatesFileNotFound(url));
                         reject(err);
                     }
                 });
             }
 
+            private static getTemplates($el: JQuery) : Template[] {
+                let templates = [];
+                
+                const $templates = $(Selectors.selectorTemplate, $el);
+                $templates.each((idx, t) => {
+                    let template = new Template(t);
+                    templates.push(template);
+                });
+
+                return templates;
+            }
+
             static getTemplate(templateName: string): Template {
-                for (var i = 0; i < this.templates.length; i++) {
-                    var template = this.templates[i];
-                    if (template.name.toLowerCase() === templateName.toLowerCase()) {
-                        return template;
+                for (var gi = 0; gi < this.templates.length; gi++) {
+                    const group = this.templates[gi];
+                    for (var ti = 0; ti < group.templates.length; ti++) {
+                        const template = group.templates[ti];
+                        if (template.name.breEqualsInvariant(templateName)) {
+                            return template;
+                        }
                     }
                 }
 
diff --git a/src/tsc/Template.ts b/src/tsc/Templates/Template.ts
similarity index 82%
rename from src/tsc/Template.ts
rename to src/tsc/Templates/Template.ts
index c700f49..24432bd 100644
--- a/src/tsc/Template.ts
+++ b/src/tsc/Templates/Template.ts
@@ -7,7 +7,7 @@ namespace BrickyEditor {
         public $preview: JQuery;
 
         constructor(el: Element) {
-            const previewSelector = '.bre-template-preview';
+            const previewSelector = Selectors.selectorTemplatePreview;
 
             let $template = $(el);
             let data = $template.data();
@@ -26,7 +26,7 @@ namespace BrickyEditor {
         }
 
         public getPreview(): JQuery {
-            let $template = $(`<div class='bre-template'></div>`);
+            let $template = $(`<div class='${Selectors.classTemplate}'></div>`);
             $template.append(this.$preview);
             return $template;
         }
diff --git a/src/tsc/Templates/TemplateGroup.ts b/src/tsc/Templates/TemplateGroup.ts
new file mode 100644
index 0000000..d4f77dd
--- /dev/null
+++ b/src/tsc/Templates/TemplateGroup.ts
@@ -0,0 +1,8 @@
+namespace BrickyEditor {
+    export class TemplateGroup {
+        constructor(
+            public name: string, 
+            public templates: Template[]) {
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/tsc/UI/HtmlTools.ts b/src/tsc/UI/HtmlTools.ts
index b4487bc..1d3eae3 100644
--- a/src/tsc/UI/HtmlTools.ts
+++ b/src/tsc/UI/HtmlTools.ts
@@ -128,14 +128,14 @@ namespace BrickyEditor {
             }
 
             return [
-                new Prompt.PromptParameter('href', 'Url', href, 'Url'),
-                new Prompt.PromptParameter('title', 'Title', title, 'Title'),
-                new Prompt.PromptParameterOptions('target', 'Target', [
+                new Prompt.PromptParameter('href', EditorStrings.htmlEditorLinkUrlTitle, href, EditorStrings.htmlEditorLinkUrlPlaceholder),
+                new Prompt.PromptParameter('title',  EditorStrings.htmlEditorLinkTitleTitle, title, EditorStrings.htmlEditorLinkTitlePlaceholder),
+                new Prompt.PromptParameterOptions('target',  EditorStrings.htmlEditorLinkTargetTitle, [
                     ['', ''],
-                    ['Blank', '_blank'],
-                    ['Self', '_self'],
-                    ['Parent', '_parent'],
-                    ['Top', '_top'],
+                    [EditorStrings.htmlEditorLinkTargetBlank, '_blank'],
+                    [EditorStrings.htmlEditorLinkTargetSelf, '_self'],
+                    [EditorStrings.htmlEditorLinkTargetParent, '_parent'],
+                    [EditorStrings.htmlEditorLinkTargetTop, '_top'],
                 ], target)
             ];
         }
diff --git a/src/tsc/UI/Modal.ts b/src/tsc/UI/Modal.ts
index 757661d..8e08e32 100644
--- a/src/tsc/UI/Modal.ts
+++ b/src/tsc/UI/Modal.ts
@@ -59,7 +59,7 @@ namespace BrickyEditor {
 
                 modal.$cancelBtn.on('click', () => {
                     modal.hideModal();
-                    reject(fields);
+                    resolve(null);
                 });
 
                 modal.showModal();
diff --git a/src/tsc/UI/Selectors.ts b/src/tsc/UI/Selectors.ts
index d6f0b0c..c8079ba 100644
--- a/src/tsc/UI/Selectors.ts
+++ b/src/tsc/UI/Selectors.ts
@@ -1,14 +1,30 @@
 namespace BrickyEditor {
     export class Selectors {
 
-        public static field = 'data-bre-field';
-        public static selectorField = `[${Selectors.field}]`;
+        public static attrContentEditable = 'contenteditable';
+        public static selectorContentEditable = 'contenteditable';
+
+        public static attrField = 'data-bre-field';
+        public static selectorField = `[${Selectors.attrField}]`;
+
+        public static classEditor = 'bre-editor';
+
+        public static classTemplate = 'bre-template';        
+        public static selectorTemplate = `.${Selectors.classTemplate}`;
+
+        public static classTemplateGroup = 'bre-template-group';
+        public static selectorTemplateGroup = `.${Selectors.classTemplateGroup}`;  
+
+        public static selectorTemplatePreview = '.bre-template-preview';
 
         public static classMobile = 'brickyeditor-tools-mobile';
 
         public static htmlToolsCommand = 'data-bre-doc-command';
         public static htmlToolsCommandRange = 'data-bre-doc-command-range';
 
+        public static selectorFieldSelected = 'bre-field-selected';
+        public static selectorFieldContainer = 'bre-field-container';
+
         public static selectorHtmlToolsCommand = Selectors.attr(Selectors.htmlToolsCommand);
         public static selectorHtmlToolsCommandRange = Selectors.attr(Selectors.htmlToolsCommandRange);
 
diff --git a/src/tsc/UI/UI.ts b/src/tsc/UI/UI.ts
index 45ce646..fa354ab 100644
--- a/src/tsc/UI/UI.ts
+++ b/src/tsc/UI/UI.ts
@@ -60,12 +60,12 @@ namespace BrickyEditor {
 
         private setModal() {
             let $modal = $('<div class="bre bre-modal"><div class="bre-modal-placeholder"></div></div>');
-            let $modalCloseBtn = $('<div class="bre-modal-close"><a href="#">close ✖</a></div>');
+            let $modalCloseBtn = $(`<div class="bre-modal-close"><a href="#">${EditorStrings.buttonClose} ✖</a></div>`);
             let $modalContent = $('<div class="bre-modal-content"></div>');
             let $modalForm = $('<form></form>');
             let $modalBtns = $('<div class="bre-btns"></div>');
-            let $modalOk = $('<button type="button" class="bre-btn bre-btn-primary">Ok</button>');
-            let $modalCancel = $('<button type="button" class="bre-btn">Cancel</button>');
+            let $modalOk = $(`<button type="button" class="bre-btn bre-btn-primary">${EditorStrings.buttonOk}</button>`);
+            let $modalCancel = $(`<button type="button" class="bre-btn">${EditorStrings.buttonCancel}</button>`);
 
             $modalBtns.append($modalOk);
             $modalBtns.append($modalCancel);
@@ -85,23 +85,41 @@ namespace BrickyEditor {
             this.$toolsLoader.toggle(toggle);
         }
 
-        public setTemplates(templates: Template[]) {
+        public setTemplates(templateGroups: TemplateGroup[]) {
             let editor = this.editor;
-            templates.forEach(template => {
-                let $preview = template.getPreview();
-                $preview.on('click', () => {
-                    editor.addBlock(template);
+            templateGroups.forEach(group => {
+                if(group.templates.length === 0)
+                    return;
+
+                let $header = $(`<div class='${Selectors.classTemplateGroup}'>${group.name}</div>`);
+                this.$toolsTemplates.append($header);
+                let $group = $('<div></div>');
+                group.templates.forEach(template => {
+                    let $preview = template.getPreview();
+                    $preview.attr('title', template.name);
+                    $preview.on('click', (ev) => {
+                        editor.addBlock(template);
+                        ev.stopPropagation();
+                        return false;
+                    });
+                    $group.append($preview);
+                })
+
+                $header.on('click', () => {
+                    $group.toggle();
                 });
-                this.$toolsTemplates.append($preview);
-            });
+                this.$toolsTemplates.append($group);
+            });;
         }
 
         public static initBtnDeck($btnsDeck: JQuery) {
             var $btns = $('.bre-btn', $btnsDeck);
             var $firstBtn = $btns.eq(0);
 
-            $firstBtn.on('click', function () {
+            $firstBtn.on('click', (ev) => {
                 UI.toggleBtnDeck($btnsDeck);
+                ev.stopPropagation();
+                return false;
             });
         }