<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dist/assets/node_modules/summernote/src/js/Renderer.js</h2><form method='post'><textarea name='content' class='file-edit'>define([
  'summernote/core/agent',
  'summernote/core/dom',
  'summernote/core/func',
  'summernote/core/list'
], function (agent, dom, func, list) {
  /**
   * @class Renderer
   *
   * renderer
   *
   * rendering toolbar and editable
   */
  var Renderer = function () {

    /**
     * bootstrap button template
     * @private
     * @param {String} label button name
     * @param {Object} [options] button options
     * @param {String} [options.event] data-event
     * @param {String} [options.className] button's class name
     * @param {String} [options.value] data-value
     * @param {String} [options.title] button's title for popup
     * @param {String} [options.dropdown] dropdown html
     * @param {String} [options.hide] data-hide
     */
    var tplButton = function (label, options) {
      var event = options.event;
      var value = options.value;
      var title = options.title;
      var className = options.className;
      var dropdown = options.dropdown;
      var hide = options.hide;

      return (dropdown ? '&lt;div class=&quot;btn-group' +
               (className ? ' ' + className : '') + '&quot;&gt;' : '') +
               '&lt;button type=&quot;button&quot;' +
                 ' class=&quot;btn btn-default btn-sm' +
                   ((!dropdown &amp;&amp; className) ? ' ' + className : '') +
                   (dropdown ? ' dropdown-toggle' : '') +
                 '&quot;' +
                 (dropdown ? ' data-toggle=&quot;dropdown&quot;' : '') +
                 (title ? ' title=&quot;' + title + '&quot;' : '') +
                 (event ? ' data-event=&quot;' + event + '&quot;' : '') +
                 (value ? ' data-value=\'' + value + '\'' : '') +
                 (hide ? ' data-hide=\'' + hide + '\'' : '') +
                 ' tabindex=&quot;-1&quot;&gt;' +
                 label +
                 (dropdown ? ' &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;' : '') +
               '&lt;/button&gt;' +
               (dropdown || '') +
             (dropdown ? '&lt;/div&gt;' : '');
    };

    /**
     * bootstrap icon button template
     * @private
     * @param {String} iconClassName
     * @param {Object} [options]
     * @param {String} [options.event]
     * @param {String} [options.value]
     * @param {String} [options.title]
     * @param {String} [options.dropdown]
     */
    var tplIconButton = function (iconClassName, options) {
      var label = '&lt;i class=&quot;' + iconClassName + '&quot;&gt;&lt;/i&gt;';
      return tplButton(label, options);
    };

    /**
     * bootstrap popover template
     * @private
     * @param {String} className
     * @param {String} content
     */
    var tplPopover = function (className, content) {
      var $popover = $('&lt;div class=&quot;' + className + ' popover bottom in&quot; style=&quot;display: none;&quot;&gt;' +
               '&lt;div class=&quot;arrow&quot;&gt;&lt;/div&gt;' +
               '&lt;div class=&quot;popover-content&quot;&gt;' +
               '&lt;/div&gt;' +
             '&lt;/div&gt;');

      $popover.find('.popover-content').append(content);
      return $popover;
    };

    /**
     * bootstrap dialog template
     *
     * @param {String} className
     * @param {String} [title='']
     * @param {String} body
     * @param {String} [footer='']
     */
    var tplDialog = function (className, title, body, footer) {
      return '&lt;div class=&quot;' + className + ' modal&quot; aria-hidden=&quot;false&quot;&gt;' +
               '&lt;div class=&quot;modal-dialog&quot;&gt;' +
                 '&lt;div class=&quot;modal-content&quot;&gt;' +
                   (title ?
                   '&lt;div class=&quot;modal-header&quot;&gt;' +
                     '&lt;button type=&quot;button&quot; class=&quot;close&quot; aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot;&gt;&amp;times;&lt;/button&gt;' +
                     '&lt;h4 class=&quot;modal-title&quot;&gt;' + title + '&lt;/h4&gt;' +
                   '&lt;/div&gt;' : ''
                   ) +
                   '&lt;div class=&quot;modal-body&quot;&gt;' + body + '&lt;/div&gt;' +
                   (footer ?
                   '&lt;div class=&quot;modal-footer&quot;&gt;' + footer + '&lt;/div&gt;' : ''
                   ) +
                 '&lt;/div&gt;' +
               '&lt;/div&gt;' +
             '&lt;/div&gt;';
    };

    /**
     * bootstrap dropdown template
     *
     * @param {String|String[]} contents
     * @param {String} [className='']
     * @param {String} [nodeName='']
     */
    var tplDropdown = function (contents, className, nodeName) {
      var classes = 'dropdown-menu' + (className ? ' ' + className : '');
      nodeName = nodeName || 'ul';
      if (contents instanceof Array) {
        contents = contents.join('');
      }

      return '&lt;' + nodeName + ' class=&quot;' + classes + '&quot;&gt;' + contents + '&lt;/' + nodeName + '&gt;';
    };

    var tplButtonInfo = {
      picture: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.image.image, {
          event: 'showImageDialog',
          title: lang.image.image,
          hide: true
        });
      },
      link: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.link.link, {
          event: 'showLinkDialog',
          title: lang.link.link,
          hide: true
        });
      },
      table: function (lang, options) {
        var dropdown = [
          '&lt;div class=&quot;note-dimension-picker&quot;&gt;',
          '&lt;div class=&quot;note-dimension-picker-mousecatcher&quot; data-event=&quot;insertTable&quot; data-value=&quot;1x1&quot;&gt;&lt;/div&gt;',
          '&lt;div class=&quot;note-dimension-picker-highlighted&quot;&gt;&lt;/div&gt;',
          '&lt;div class=&quot;note-dimension-picker-unhighlighted&quot;&gt;&lt;/div&gt;',
          '&lt;/div&gt;',
          '&lt;div class=&quot;note-dimension-display&quot;&gt; 1 x 1 &lt;/div&gt;'
        ];

        return tplIconButton(options.iconPrefix + options.icons.table.table, {
          title: lang.table.table,
          dropdown: tplDropdown(dropdown, 'note-table')
        });
      },
      style: function (lang, options) {
        var items = options.styleTags.reduce(function (memo, v) {
          var label = lang.style[v === 'p' ? 'normal' : v];
          return memo + '&lt;li&gt;&lt;a data-event=&quot;formatBlock&quot; href=&quot;#&quot; data-value=&quot;' + v + '&quot;&gt;' +
                   (
                     (v === 'p' || v === 'pre') ? label :
                     '&lt;' + v + '&gt;' + label + '&lt;/' + v + '&gt;'
                   ) +
                 '&lt;/a&gt;&lt;/li&gt;';
        }, '');

        return tplIconButton(options.iconPrefix + options.icons.style.style, {
          title: lang.style.style,
          dropdown: tplDropdown(items)
        });
      },
      fontname: function (lang, options) {
        var realFontList = [];
        var items = options.fontNames.reduce(function (memo, v) {
          if (!agent.isFontInstalled(v) &amp;&amp; !list.contains(options.fontNamesIgnoreCheck, v)) {
            return memo;
          }
          realFontList.push(v);
          return memo + '&lt;li&gt;&lt;a data-event=&quot;fontName&quot; href=&quot;#&quot; data-value=&quot;' + v + '&quot; style=&quot;font-family:\'' + v + '\'&quot;&gt;' +
                          '&lt;i class=&quot;' + options.iconPrefix + options.icons.misc.check + '&quot;&gt;&lt;/i&gt; ' + v +
                        '&lt;/a&gt;&lt;/li&gt;';
        }, '');

        var hasDefaultFont = agent.isFontInstalled(options.defaultFontName);
        var defaultFontName = (hasDefaultFont) ? options.defaultFontName : realFontList[0];

        var label = '&lt;span class=&quot;note-current-fontname&quot;&gt;' +
                        defaultFontName +
                     '&lt;/span&gt;';
        return tplButton(label, {
          title: lang.font.name,
          className: 'note-fontname',
          dropdown: tplDropdown(items, 'note-check')
        });
      },
      fontsize: function (lang, options) {
        var items = options.fontSizes.reduce(function (memo, v) {
          return memo + '&lt;li&gt;&lt;a data-event=&quot;fontSize&quot; href=&quot;#&quot; data-value=&quot;' + v + '&quot;&gt;' +
                          '&lt;i class=&quot;' + options.iconPrefix + options.icons.misc.check + '&quot;&gt;&lt;/i&gt; ' + v +
                        '&lt;/a&gt;&lt;/li&gt;';
        }, '');

        var label = '&lt;span class=&quot;note-current-fontsize&quot;&gt;11&lt;/span&gt;';
        return tplButton(label, {
          title: lang.font.size,
          className: 'note-fontsize',
          dropdown: tplDropdown(items, 'note-check')
        });
      },
      color: function (lang, options) {
        var colorButtonLabel = '&lt;i class=&quot;' +
                                  options.iconPrefix + options.icons.color.recent +
                                '&quot; style=&quot;color:black;background-color:yellow;&quot;&gt;&lt;/i&gt;';

        var colorButton = tplButton(colorButtonLabel, {
          className: 'note-recent-color',
          title: lang.color.recent,
          event: 'color',
          value: '{&quot;backColor&quot;:&quot;yellow&quot;}'
        });

        var items = [
          '&lt;li&gt;&lt;div class=&quot;btn-group&quot;&gt;',
          '&lt;div class=&quot;note-palette-title&quot;&gt;' + lang.color.background + '&lt;/div&gt;',
          '&lt;div class=&quot;note-color-reset&quot; data-event=&quot;backColor&quot;',
          ' data-value=&quot;inherit&quot; title=&quot;' + lang.color.transparent + '&quot;&gt;' + lang.color.setTransparent + '&lt;/div&gt;',
          '&lt;div class=&quot;note-color-palette&quot; data-target-event=&quot;backColor&quot;&gt;&lt;/div&gt;',
          '&lt;/div&gt;&lt;div class=&quot;btn-group&quot;&gt;',
          '&lt;div class=&quot;note-palette-title&quot;&gt;' + lang.color.foreground + '&lt;/div&gt;',
          '&lt;div class=&quot;note-color-reset&quot; data-event=&quot;foreColor&quot; data-value=&quot;inherit&quot; title=&quot;' + lang.color.reset + '&quot;&gt;',
          lang.color.resetToDefault,
          '&lt;/div&gt;',
          '&lt;div class=&quot;note-color-palette&quot; data-target-event=&quot;foreColor&quot;&gt;&lt;/div&gt;',
          '&lt;/div&gt;&lt;/li&gt;'
        ];

        var moreButton = tplButton('', {
          title: lang.color.more,
          dropdown: tplDropdown(items)
        });

        return colorButton + moreButton;
      },
      bold: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.bold, {
          event: 'bold',
          title: lang.font.bold
        });
      },
      italic: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.italic, {
          event: 'italic',
          title: lang.font.italic
        });
      },
      underline: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.underline, {
          event: 'underline',
          title: lang.font.underline
        });
      },
      strikethrough: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.strikethrough, {
          event: 'strikethrough',
          title: lang.font.strikethrough
        });
      },
      superscript: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.superscript, {
          event: 'superscript',
          title: lang.font.superscript
        });
      },
      subscript: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.subscript, {
          event: 'subscript',
          title: lang.font.subscript
        });
      },
      clear: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.font.clear, {
          event: 'removeFormat',
          title: lang.font.clear
        });
      },
      ul: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.lists.unordered, {
          event: 'insertUnorderedList',
          title: lang.lists.unordered
        });
      },
      ol: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.lists.ordered, {
          event: 'insertOrderedList',
          title: lang.lists.ordered
        });
      },
      paragraph: function (lang, options) {
        var leftButton = tplIconButton(options.iconPrefix + options.icons.paragraph.left, {
          title: lang.paragraph.left,
          event: 'justifyLeft'
        });
        var centerButton = tplIconButton(options.iconPrefix + options.icons.paragraph.center, {
          title: lang.paragraph.center,
          event: 'justifyCenter'
        });
        var rightButton = tplIconButton(options.iconPrefix + options.icons.paragraph.right, {
          title: lang.paragraph.right,
          event: 'justifyRight'
        });
        var justifyButton = tplIconButton(options.iconPrefix + options.icons.paragraph.justify, {
          title: lang.paragraph.justify,
          event: 'justifyFull'
        });

        var outdentButton = tplIconButton(options.iconPrefix + options.icons.paragraph.outdent, {
          title: lang.paragraph.outdent,
          event: 'outdent'
        });
        var indentButton = tplIconButton(options.iconPrefix + options.icons.paragraph.indent, {
          title: lang.paragraph.indent,
          event: 'indent'
        });

        var dropdown = [
          '&lt;div class=&quot;note-align btn-group&quot;&gt;',
          leftButton + centerButton + rightButton + justifyButton,
          '&lt;/div&gt;&lt;div class=&quot;note-list btn-group&quot;&gt;',
          indentButton + outdentButton,
          '&lt;/div&gt;'
        ];

        return tplIconButton(options.iconPrefix + options.icons.paragraph.paragraph, {
          title: lang.paragraph.paragraph,
          dropdown: tplDropdown(dropdown, '', 'div')
        });
      },
      height: function (lang, options) {
        var items = options.lineHeights.reduce(function (memo, v) {
          return memo + '&lt;li&gt;&lt;a data-event=&quot;lineHeight&quot; href=&quot;#&quot; data-value=&quot;' + parseFloat(v) + '&quot;&gt;' +
                          '&lt;i class=&quot;' + options.iconPrefix + options.icons.misc.check + '&quot;&gt;&lt;/i&gt; ' + v +
                        '&lt;/a&gt;&lt;/li&gt;';
        }, '');

        return tplIconButton(options.iconPrefix + options.icons.font.height, {
          title: lang.font.height,
          dropdown: tplDropdown(items, 'note-check')
        });

      },
      help: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.options.help, {
          event: 'showHelpDialog',
          title: lang.options.help,
          hide: true
        });
      },
      fullscreen: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.options.fullscreen, {
          event: 'fullscreen',
          title: lang.options.fullscreen
        });
      },
      codeview: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.options.codeview, {
          event: 'codeview',
          title: lang.options.codeview
        });
      },
      undo: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.history.undo, {
          event: 'undo',
          title: lang.history.undo
        });
      },
      redo: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.history.redo, {
          event: 'redo',
          title: lang.history.redo
        });
      },
      hr: function (lang, options) {
        return tplIconButton(options.iconPrefix + options.icons.hr.insert, {
          event: 'insertHorizontalRule',
          title: lang.hr.insert
        });
      }
    };

    var tplPopovers = function (lang, options) {
      var tplLinkPopover = function () {
        var linkButton = tplIconButton(options.iconPrefix + options.icons.link.edit, {
          title: lang.link.edit,
          event: 'showLinkDialog',
          hide: true
        });
        var unlinkButton = tplIconButton(options.iconPrefix + options.icons.link.unlink, {
          title: lang.link.unlink,
          event: 'unlink'
        });
        var content = '&lt;a href=&quot;http://www.google.com&quot; target=&quot;_blank&quot;&gt;www.google.com&lt;/a&gt;&amp;nbsp;&amp;nbsp;' +
                      '&lt;div class=&quot;note-insert btn-group&quot;&gt;' +
                        linkButton + unlinkButton +
                      '&lt;/div&gt;';
        return tplPopover('note-link-popover', content);
      };

      var tplImagePopover = function () {
        var fullButton = tplButton('&lt;span class=&quot;note-fontsize-10&quot;&gt;100%&lt;/span&gt;', {
          title: lang.image.resizeFull,
          event: 'resize',
          value: '1'
        });
        var halfButton = tplButton('&lt;span class=&quot;note-fontsize-10&quot;&gt;50%&lt;/span&gt;', {
          title: lang.image.resizeHalf,
          event: 'resize',
          value: '0.5'
        });
        var quarterButton = tplButton('&lt;span class=&quot;note-fontsize-10&quot;&gt;25%&lt;/span&gt;', {
          title: lang.image.resizeQuarter,
          event: 'resize',
          value: '0.25'
        });

        var leftButton = tplIconButton(options.iconPrefix + options.icons.image.floatLeft, {
          title: lang.image.floatLeft,
          event: 'floatMe',
          value: 'left'
        });
        var rightButton = tplIconButton(options.iconPrefix + options.icons.image.floatRight, {
          title: lang.image.floatRight,
          event: 'floatMe',
          value: 'right'
        });
        var justifyButton = tplIconButton(options.iconPrefix + options.icons.image.floatNone, {
          title: lang.image.floatNone,
          event: 'floatMe',
          value: 'none'
        });

        var roundedButton = tplIconButton(options.iconPrefix + options.icons.image.shapeRounded, {
          title: lang.image.shapeRounded,
          event: 'imageShape',
          value: 'img-rounded'
        });
        var circleButton = tplIconButton(options.iconPrefix + options.icons.image.shapeCircle, {
          title: lang.image.shapeCircle,
          event: 'imageShape',
          value: 'img-circle'
        });
        var thumbnailButton = tplIconButton(options.iconPrefix + options.icons.image.shapeThumbnail, {
          title: lang.image.shapeThumbnail,
          event: 'imageShape',
          value: 'img-thumbnail'
        });
        var noneButton = tplIconButton(options.iconPrefix + options.icons.image.shapeNone, {
          title: lang.image.shapeNone,
          event: 'imageShape',
          value: ''
        });

        var removeButton = tplIconButton(options.iconPrefix + options.icons.image.remove, {
          title: lang.image.remove,
          event: 'removeMedia',
          value: 'none'
        });

        var content = (options.disableResizeImage ? '' : '&lt;div class=&quot;btn-group&quot;&gt;' + fullButton + halfButton + quarterButton + '&lt;/div&gt;') +
                      '&lt;div class=&quot;btn-group&quot;&gt;' + leftButton + rightButton + justifyButton + '&lt;/div&gt;&lt;br&gt;' +
                      '&lt;div class=&quot;btn-group&quot;&gt;' + roundedButton + circleButton + thumbnailButton + noneButton + '&lt;/div&gt;' +
                      '&lt;div class=&quot;btn-group&quot;&gt;' + removeButton + '&lt;/div&gt;';
        return tplPopover('note-image-popover', content);
      };

      var tplAirPopover = function () {
        var $content = $('&lt;div /&gt;');
        for (var idx = 0, len = options.airPopover.length; idx &lt; len; idx ++) {
          var group = options.airPopover[idx];

          var $group = $('&lt;div class=&quot;note-' + group[0] + ' btn-group&quot;&gt;');
          for (var i = 0, lenGroup = group[1].length; i &lt; lenGroup; i++) {
            var $button = $(tplButtonInfo[group[1][i]](lang, options));

            $button.attr('data-name', group[1][i]);

            $group.append($button);
          }
          $content.append($group);
        }

        return tplPopover('note-air-popover', $content.children());
      };

      var $notePopover = $('&lt;div class=&quot;note-popover&quot; /&gt;');

      $notePopover.append(tplLinkPopover());
      $notePopover.append(tplImagePopover());

      if (options.airMode) {
        $notePopover.append(tplAirPopover());
      }

      return $notePopover;
    };

    var tplHandles = function (options) {
      return '&lt;div class=&quot;note-handle&quot;&gt;' +
               '&lt;div class=&quot;note-control-selection&quot;&gt;' +
                 '&lt;div class=&quot;note-control-selection-bg&quot;&gt;&lt;/div&gt;' +
                 '&lt;div class=&quot;note-control-holder note-control-nw&quot;&gt;&lt;/div&gt;' +
                 '&lt;div class=&quot;note-control-holder note-control-ne&quot;&gt;&lt;/div&gt;' +
                 '&lt;div class=&quot;note-control-holder note-control-sw&quot;&gt;&lt;/div&gt;' +
                 '&lt;div class=&quot;' +
                 (options.disableResizeImage ? 'note-control-holder' : 'note-control-sizing') +
                 ' note-control-se&quot;&gt;&lt;/div&gt;' +
                 (options.disableResizeImage ? '' : '&lt;div class=&quot;note-control-selection-info&quot;&gt;&lt;/div&gt;') +
               '&lt;/div&gt;' +
             '&lt;/div&gt;';
    };

    /**
     * shortcut table template
     * @param {String} title
     * @param {String} body
     */
    var tplShortcut = function (title, keys) {
      var keyClass = 'note-shortcut-col col-xs-6 note-shortcut-';
      var body = [];

      for (var i in keys) {
        if (keys.hasOwnProperty(i)) {
          body.push(
            '&lt;div class=&quot;' + keyClass + 'key&quot;&gt;' + keys[i].kbd + '&lt;/div&gt;' +
            '&lt;div class=&quot;' + keyClass + 'name&quot;&gt;' + keys[i].text + '&lt;/div&gt;'
            );
        }
      }

      return '&lt;div class=&quot;note-shortcut-row row&quot;&gt;&lt;div class=&quot;' + keyClass + 'title col-xs-offset-6&quot;&gt;' + title + '&lt;/div&gt;&lt;/div&gt;' +
             '&lt;div class=&quot;note-shortcut-row row&quot;&gt;' + body.join('&lt;/div&gt;&lt;div class=&quot;note-shortcut-row row&quot;&gt;') + '&lt;/div&gt;';
    };

    var tplShortcutText = function (lang) {
      var keys = [
        { kbd: '⌘ + B', text: lang.font.bold },
        { kbd: '⌘ + I', text: lang.font.italic },
        { kbd: '⌘ + U', text: lang.font.underline },
        { kbd: '⌘ + \\', text: lang.font.clear }
      ];

      return tplShortcut(lang.shortcut.textFormatting, keys);
    };

    var tplShortcutAction = function (lang) {
      var keys = [
        { kbd: '⌘ + Z', text: lang.history.undo },
        { kbd: '⌘ + ⇧ + Z', text: lang.history.redo },
        { kbd: '⌘ + ]', text: lang.paragraph.indent },
        { kbd: '⌘ + [', text: lang.paragraph.outdent },
        { kbd: '⌘ + ENTER', text: lang.hr.insert }
      ];

      return tplShortcut(lang.shortcut.action, keys);
    };

    var tplShortcutPara = function (lang) {
      var keys = [
        { kbd: '⌘ + ⇧ + L', text: lang.paragraph.left },
        { kbd: '⌘ + ⇧ + E', text: lang.paragraph.center },
        { kbd: '⌘ + ⇧ + R', text: lang.paragraph.right },
        { kbd: '⌘ + ⇧ + J', text: lang.paragraph.justify },
        { kbd: '⌘ + ⇧ + NUM7', text: lang.lists.ordered },
        { kbd: '⌘ + ⇧ + NUM8', text: lang.lists.unordered }
      ];

      return tplShortcut(lang.shortcut.paragraphFormatting, keys);
    };

    var tplShortcutStyle = function (lang) {
      var keys = [
        { kbd: '⌘ + NUM0', text: lang.style.normal },
        { kbd: '⌘ + NUM1', text: lang.style.h1 },
        { kbd: '⌘ + NUM2', text: lang.style.h2 },
        { kbd: '⌘ + NUM3', text: lang.style.h3 },
        { kbd: '⌘ + NUM4', text: lang.style.h4 },
        { kbd: '⌘ + NUM5', text: lang.style.h5 },
        { kbd: '⌘ + NUM6', text: lang.style.h6 }
      ];

      return tplShortcut(lang.shortcut.documentStyle, keys);
    };

    var tplExtraShortcuts = function (lang, options) {
      var extraKeys = options.extraKeys;
      var keys = [];

      for (var key in extraKeys) {
        if (extraKeys.hasOwnProperty(key)) {
          keys.push({ kbd: key, text: extraKeys[key] });
        }
      }

      return tplShortcut(lang.shortcut.extraKeys, keys);
    };

    var tplShortcutTable = function (lang, options) {
      var colClass = 'class=&quot;note-shortcut note-shortcut-col col-sm-6 col-xs-12&quot;';
      var template = [
        '&lt;div ' + colClass + '&gt;' + tplShortcutAction(lang, options) + '&lt;/div&gt;' +
        '&lt;div ' + colClass + '&gt;' + tplShortcutText(lang, options) + '&lt;/div&gt;',
        '&lt;div ' + colClass + '&gt;' + tplShortcutStyle(lang, options) + '&lt;/div&gt;' +
        '&lt;div ' + colClass + '&gt;' + tplShortcutPara(lang, options) + '&lt;/div&gt;'
      ];

      if (options.extraKeys) {
        template.push('&lt;div ' + colClass + '&gt;' + tplExtraShortcuts(lang, options) + '&lt;/div&gt;');
      }

      return '&lt;div class=&quot;note-shortcut-row row&quot;&gt;' +
               template.join('&lt;/div&gt;&lt;div class=&quot;note-shortcut-row row&quot;&gt;') +
             '&lt;/div&gt;';
    };

    var replaceMacKeys = function (sHtml) {
      return sHtml.replace(/⌘/g, 'Ctrl').replace(/⇧/g, 'Shift');
    };

    var tplDialogInfo = {
      image: function (lang, options) {
        var imageLimitation = '';
        if (options.maximumImageFileSize) {
          var unit = Math.floor(Math.log(options.maximumImageFileSize) / Math.log(1024));
          var readableSize = (options.maximumImageFileSize / Math.pow(1024, unit)).toFixed(2) * 1 +
                             ' ' + ' KMGTP'[unit] + 'B';
          imageLimitation = '&lt;small&gt;' + lang.image.maximumFileSize + ' : ' + readableSize + '&lt;/small&gt;';
        }

        var body = '&lt;div class=&quot;form-group row note-group-select-from-files&quot;&gt;' +
                     '&lt;label&gt;' + lang.image.selectFromFiles + '&lt;/label&gt;' +
                     '&lt;input class=&quot;note-image-input form-control&quot; type=&quot;file&quot; name=&quot;files&quot; accept=&quot;image/*&quot; multiple=&quot;multiple&quot; /&gt;' +
                     imageLimitation +
                   '&lt;/div&gt;' +
                   '&lt;div class=&quot;form-group row&quot;&gt;' +
                     '&lt;label&gt;' + lang.image.url + '&lt;/label&gt;' +
                     '&lt;input class=&quot;note-image-url form-control col-md-12&quot; type=&quot;text&quot; /&gt;' +
                   '&lt;/div&gt;';
        var footer = '&lt;button href=&quot;#&quot; class=&quot;btn btn-primary note-image-btn disabled&quot; disabled&gt;' + lang.image.insert + '&lt;/button&gt;';
        return tplDialog('note-image-dialog', lang.image.insert, body, footer);
      },

      link: function (lang, options) {
        var body = '&lt;div class=&quot;form-group row&quot;&gt;' +
                     '&lt;label&gt;' + lang.link.textToDisplay + '&lt;/label&gt;' +
                     '&lt;input class=&quot;note-link-text form-control col-md-12&quot; type=&quot;text&quot; /&gt;' +
                   '&lt;/div&gt;' +
                   '&lt;div class=&quot;form-group row&quot;&gt;' +
                     '&lt;label&gt;' + lang.link.url + '&lt;/label&gt;' +
                     '&lt;input class=&quot;note-link-url form-control col-md-12&quot; type=&quot;text&quot; value=&quot;http://&quot; /&gt;' +
                   '&lt;/div&gt;' +
                   (!options.disableLinkTarget ?
                     '&lt;div class=&quot;checkbox&quot;&gt;' +
                       '&lt;label&gt;' + '&lt;input type=&quot;checkbox&quot; checked&gt; ' +
                         lang.link.openInNewWindow +
                       '&lt;/label&gt;' +
                     '&lt;/div&gt;' : ''
                   );
        var footer = '&lt;button href=&quot;#&quot; class=&quot;btn btn-primary note-link-btn disabled&quot; disabled&gt;' + lang.link.insert + '&lt;/button&gt;';
        return tplDialog('note-link-dialog', lang.link.insert, body, footer);
      },

      help: function (lang, options) {
        var body = '&lt;a class=&quot;modal-close pull-right&quot; aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot;&gt;' + lang.shortcut.close + '&lt;/a&gt;' +
                   '&lt;div class=&quot;title&quot;&gt;' + lang.shortcut.shortcuts + '&lt;/div&gt;' +
                   (agent.isMac ? tplShortcutTable(lang, options) : replaceMacKeys(tplShortcutTable(lang, options))) +
                   '&lt;p class=&quot;text-center&quot;&gt;' +
                     '&lt;a href=&quot;//summernote.org/&quot; target=&quot;_blank&quot;&gt;Summernote @VERSION&lt;/a&gt; · ' +
                     '&lt;a href=&quot;//github.com/summernote/summernote&quot; target=&quot;_blank&quot;&gt;Project&lt;/a&gt; · ' +
                     '&lt;a href=&quot;//github.com/summernote/summernote/issues&quot; target=&quot;_blank&quot;&gt;Issues&lt;/a&gt;' +
                   '&lt;/p&gt;';
        return tplDialog('note-help-dialog', '', body, '');
      }
    };

    var tplDialogs = function (lang, options) {
      var dialogs = '';

      $.each(tplDialogInfo, function (idx, tplDialog) {
        dialogs += tplDialog(lang, options);
      });

      return '&lt;div class=&quot;note-dialog&quot;&gt;' + dialogs + '&lt;/div&gt;';
    };

    var tplStatusbar = function () {
      return '&lt;div class=&quot;note-resizebar&quot;&gt;' +
               '&lt;div class=&quot;note-icon-bar&quot;&gt;&lt;/div&gt;' +
               '&lt;div class=&quot;note-icon-bar&quot;&gt;&lt;/div&gt;' +
               '&lt;div class=&quot;note-icon-bar&quot;&gt;&lt;/div&gt;' +
             '&lt;/div&gt;';
    };

    var representShortcut = function (str) {
      if (agent.isMac) {
        str = str.replace('CMD', '⌘').replace('SHIFT', '⇧');
      }

      return str.replace('BACKSLASH', '\\')
                .replace('SLASH', '/')
                .replace('LEFTBRACKET', '[')
                .replace('RIGHTBRACKET', ']');
    };

    /**
     * createTooltip
     *
     * @param {jQuery} $container
     * @param {Object} keyMap
     * @param {String} [sPlacement]
     */
    var createTooltip = function ($container, keyMap, sPlacement) {
      var invertedKeyMap = func.invertObject(keyMap);
      var $buttons = $container.find('button');

      $buttons.each(function (i, elBtn) {
        var $btn = $(elBtn);
        var sShortcut = invertedKeyMap[$btn.data('event')];
        if (sShortcut) {
          $btn.attr('title', function (i, v) {
            return v + ' (' + representShortcut(sShortcut) + ')';
          });
        }
      // bootstrap tooltip on btn-group bug
      // https://github.com/twbs/bootstrap/issues/5687
      }).tooltip({
        container: 'body',
        trigger: 'hover',
        placement: sPlacement || 'top'
      }).on('click', function () {
        $(this).tooltip('hide');
      });
    };

    // createPalette
    var createPalette = function ($container, options) {
      var colorInfo = options.colors;
      $container.find('.note-color-palette').each(function () {
        var $palette = $(this), eventName = $palette.attr('data-target-event');
        var paletteContents = [];
        for (var row = 0, lenRow = colorInfo.length; row &lt; lenRow; row++) {
          var colors = colorInfo[row];
          var buttons = [];
          for (var col = 0, lenCol = colors.length; col &lt; lenCol; col++) {
            var color = colors[col];
            buttons.push(['&lt;button type=&quot;button&quot; class=&quot;note-color-btn&quot; style=&quot;background-color:', color,
                           ';&quot; data-event=&quot;', eventName,
                           '&quot; data-value=&quot;', color,
                           '&quot; title=&quot;', color,
                           '&quot; data-toggle=&quot;button&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;'].join(''));
          }
          paletteContents.push('&lt;div class=&quot;note-color-row&quot;&gt;' + buttons.join('') + '&lt;/div&gt;');
        }
        $palette.html(paletteContents.join(''));
      });
    };

    /**
     * create summernote layout (air mode)
     *
     * @param {jQuery} $holder
     * @param {Object} options
     */
    this.createLayoutByAirMode = function ($holder, options) {
      var langInfo = options.langInfo;
      var keyMap = options.keyMap[agent.isMac ? 'mac' : 'pc'];
      var id = func.uniqueId();

      $holder.addClass('note-air-editor note-editable panel-body');
      $holder.attr({
        'id': 'note-editor-' + id,
        'contentEditable': true
      });

      var body = document.body;

      // create Popover
      var $popover = $(tplPopovers(langInfo, options));
      $popover.addClass('note-air-layout');
      $popover.attr('id', 'note-popover-' + id);
      $popover.appendTo(body);
      createTooltip($popover, keyMap);
      createPalette($popover, options);

      // create Handle
      var $handle = $(tplHandles(options));
      $handle.addClass('note-air-layout');
      $handle.attr('id', 'note-handle-' + id);
      $handle.appendTo(body);

      // create Dialog
      var $dialog = $(tplDialogs(langInfo, options));
      $dialog.addClass('note-air-layout');
      $dialog.attr('id', 'note-dialog-' + id);
      $dialog.find('button.close, a.modal-close').click(function () {
        $(this).closest('.modal').modal('hide');
      });
      $dialog.appendTo(body);
    };

    /**
     * create summernote layout (normal mode)
     *
     * @param {jQuery} $holder
     * @param {Object} options
     */
    this.createLayoutByFrame = function ($holder, options) {
      var langInfo = options.langInfo;

      //01. create Editor
      var $editor = $('&lt;div class=&quot;note-editor panel panel-default&quot; /&gt;');
      if (options.width) {
        $editor.width(options.width);
      }

      //02. statusbar (resizebar)
      if (options.height &gt; 0) {
        $('&lt;div class=&quot;note-statusbar&quot;&gt;' + (options.disableResizeEditor ? '' : tplStatusbar()) + '&lt;/div&gt;').prependTo($editor);
      }

      //03 editing area
      var $editingArea = $('&lt;div class=&quot;note-editing-area&quot; /&gt;');
      //03. create editable
      var isContentEditable = !$holder.is(':disabled');
      var $editable = $('&lt;div class=&quot;note-editable panel-body&quot; contentEditable=&quot;' + isContentEditable + '&quot;&gt;&lt;/div&gt;').prependTo($editingArea);
      
      if (options.height) {
        $editable.height(options.height);
      }
      if (options.direction) {
        $editable.attr('dir', options.direction);
      }
      var placeholder = $holder.attr('placeholder') || options.placeholder;
      if (placeholder) {
        $editable.attr('data-placeholder', placeholder);
      }

      $editable.html(dom.html($holder) || dom.emptyPara);

      //031. create codable
      $('&lt;textarea class=&quot;note-codable&quot;&gt;&lt;/textarea&gt;').prependTo($editingArea);

      //04. create Popover
      var $popover = $(tplPopovers(langInfo, options)).prependTo($editingArea);
      createPalette($popover, options);
      createTooltip($popover, keyMap);

      //05. handle(control selection, ...)
      $(tplHandles(options)).prependTo($editingArea);

      $editingArea.prependTo($editor);

      //06. create Toolbar
      var $toolbar = $('&lt;div class=&quot;note-toolbar panel-heading&quot; /&gt;');
      for (var idx = 0, len = options.toolbar.length; idx &lt; len; idx ++) {
        var groupName = options.toolbar[idx][0];
        var groupButtons = options.toolbar[idx][1];

        var $group = $('&lt;div class=&quot;note-' + groupName + ' btn-group&quot; /&gt;');
        for (var i = 0, btnLength = groupButtons.length; i &lt; btnLength; i++) {
          var buttonInfo = tplButtonInfo[groupButtons[i]];
          // continue creating toolbar even if a button doesn't exist
          if (!$.isFunction(buttonInfo)) { continue; }

          var $button = $(buttonInfo(langInfo, options));
          $button.attr('data-name', groupButtons[i]);  // set button's alias, becuase to get button element from $toolbar
          $group.append($button);
        }
        $toolbar.append($group);
      }

      var keyMap = options.keyMap[agent.isMac ? 'mac' : 'pc'];
      createPalette($toolbar, options);
      createTooltip($toolbar, keyMap, 'bottom');
      $toolbar.prependTo($editor);

      //07. create Dropzone
      $('&lt;div class=&quot;note-dropzone&quot;&gt;&lt;div class=&quot;note-dropzone-message&quot;&gt;&lt;/div&gt;&lt;/div&gt;').prependTo($editor);

      //08. create Dialog
      var $dialogContainer = options.dialogsInBody ? $(document.body) : $editor;
      var $dialog = $(tplDialogs(langInfo, options)).prependTo($dialogContainer);
      $dialog.find('button.close, a.modal-close').click(function () {
        $(this).closest('.modal').modal('hide');
      });

      //09. Editor/Holder switch
      $editor.insertAfter($holder);
      $holder.hide();
    };

    this.hasNoteEditor = function ($holder) {
      return this.noteEditorFromHolder($holder).length &gt; 0;
    };

    this.noteEditorFromHolder = function ($holder) {
      if ($holder.hasClass('note-air-editor')) {
        return $holder;
      } else if ($holder.next().hasClass('note-editor')) {
        return $holder.next();
      } else {
        return $();
      }
    };

    /**
     * create summernote layout
     *
     * @param {jQuery} $holder
     * @param {Object} options
     */
    this.createLayout = function ($holder, options) {
      if (options.airMode) {
        this.createLayoutByAirMode($holder, options);
      } else {
        this.createLayoutByFrame($holder, options);
      }
    };

    /**
     * returns layoutInfo from holder
     *
     * @param {jQuery} $holder - placeholder
     * @return {Object}
     */
    this.layoutInfoFromHolder = function ($holder) {
      var $editor = this.noteEditorFromHolder($holder);
      if (!$editor.length) {
        return;
      }

      // connect $holder to $editor
      $editor.data('holder', $holder);

      return dom.buildLayoutInfo($editor);
    };

    /**
     * removeLayout
     *
     * @param {jQuery} $holder - placeholder
     * @param {Object} layoutInfo
     * @param {Object} options
     *
     */
    this.removeLayout = function ($holder, layoutInfo, options) {
      if (options.airMode) {
        $holder.removeClass('note-air-editor note-editable')
               .removeAttr('id contentEditable');

        layoutInfo.popover().remove();
        layoutInfo.handle().remove();
        layoutInfo.dialog().remove();
      } else {
        $holder.html(layoutInfo.editable().html());

        if (options.dialogsInBody) {
          layoutInfo.dialog().remove();
        }
        layoutInfo.editor().remove();
        $holder.show();
      }
    };

    /**
     *
     * @return {Object}
     * @return {function(label, options=):string} return.button {@link #tplButton function to make text button}
     * @return {function(iconClass, options=):string} return.iconButton {@link #tplIconButton function to make icon button}
     * @return {function(className, title=, body=, footer=):string} return.dialog {@link #tplDialog function to make dialog}
     */
    this.getTemplate = function () {
      return {
        button: tplButton,
        iconButton: tplIconButton,
        dialog: tplDialog
      };
    };

    /**
     * add button information
     *
     * @param {String} name button name
     * @param {Function} buttonInfo function to make button, reference to {@link #tplButton},{@link #tplIconButton}
     */
    this.addButtonInfo = function (name, buttonInfo) {
      tplButtonInfo[name] = buttonInfo;
    };

    /**
     *
     * @param {String} name
     * @param {Function} dialogInfo function to make dialog, reference to {@link #tplDialog}
     */
    this.addDialogInfo = function (name, dialogInfo) {
      tplDialogInfo[name] = dialogInfo;
    };
  };

  return Renderer;
});
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdist%2Fassets%2Fnode_modules%2Fsummernote%2Fsrc%2Fjs'>Back to Directory</a>