promethee 1.4.8 → 1.4.9

data/node_modules/summernote/src/js/base/editing/Typing.js

@@ -0,0 +1,90 @@
+import $ from 'jquery';
+import dom from '../core/dom';
+import range from '../core/range';
+import Bullet from '../editing/Bullet';
+
+/**
+ * @class editing.Typing
+ *
+ * Typing
+ *
+ */
+export default class Typing {
+  constructor() {
+    // a Bullet instance to toggle lists off
+    this.bullet = new Bullet();
+  }
+
+  /**
+   * insert tab
+   *
+   * @param {WrappedRange} rng
+   * @param {Number} tabsize
+   */
+  insertTab(rng, tabsize) {
+    const tab = dom.createText(new Array(tabsize + 1).join(dom.NBSP_CHAR));
+    rng = rng.deleteContents();
+    rng.insertNode(tab, true);
+
+    rng = range.create(tab, tabsize);
+    rng.select();
+  }
+
+  /**
+   * insert paragraph
+   */
+  insertParagraph(editable) {
+    let rng = range.create(editable);
+
+    // deleteContents on range.
+    rng = rng.deleteContents();
+
+    // Wrap range if it needs to be wrapped by paragraph
+    rng = rng.wrapBodyInlineWithPara();
+
+    // finding paragraph
+    const splitRoot = dom.ancestor(rng.sc, dom.isPara);
+
+    let nextPara;
+    // on paragraph: split paragraph
+    if (splitRoot) {
+      // if it is an empty line with li
+      if (dom.isEmpty(splitRoot) && dom.isLi(splitRoot)) {
+        // toogle UL/OL and escape
+        this.bullet.toggleList(splitRoot.parentNode.nodeName);
+        return;
+      // if it is an empty line with para on blockquote
+      } else if (dom.isEmpty(splitRoot) && dom.isPara(splitRoot) && dom.isBlockquote(splitRoot.parentNode)) {
+        // escape blockquote
+        dom.insertAfter(splitRoot, splitRoot.parentNode);
+        nextPara = splitRoot;
+      // if new line has content (not a line break)
+      } else {
+        nextPara = dom.splitTree(splitRoot, rng.getStartPoint());
+
+        let emptyAnchors = dom.listDescendant(splitRoot, dom.isEmptyAnchor);
+        emptyAnchors = emptyAnchors.concat(dom.listDescendant(nextPara, dom.isEmptyAnchor));
+
+        $.each(emptyAnchors, (idx, anchor) => {
+          dom.remove(anchor);
+        });
+
+        // replace empty heading, pre or custom-made styleTag with P tag
+        if ((dom.isHeading(nextPara) || dom.isPre(nextPara) || dom.isCustomStyleTag(nextPara)) && dom.isEmpty(nextPara)) {
+          nextPara = dom.replace(nextPara, 'p');
+        }
+      }
+    // no paragraph: insert empty paragraph
+    } else {
+      const next = rng.sc.childNodes[rng.so];
+      nextPara = $(dom.emptyPara)[0];
+      if (next) {
+        rng.sc.insertBefore(nextPara, next);
+      } else {
+        rng.sc.appendChild(nextPara);
+      }
+    }
+
+    range.create(nextPara, 0).normalize().select().scrollIntoView(editable);
+  }
+}

data/node_modules/summernote/src/js/base/module/AirPopover.js

@@ -0,0 +1,73 @@
+import $ from 'jquery';
+import env from '../core/env';
+import func from '../core/func';
+import lists from '../core/lists';
+import dom from '../core/dom';
+
+const AIR_MODE_POPOVER_X_OFFSET = 20;
+
+export default class AirPopover {
+  constructor(context) {
+    this.context = context;
+    this.ui = $.summernote.ui;
+    this.options = context.options;
+    this.events = {
+      'summernote.keyup summernote.mouseup summernote.scroll': () => {
+        this.update();
+      },
+      'summernote.disable summernote.change summernote.dialog.shown': () => {
+        this.hide();
+      },
+      'summernote.focusout': (we, e) => {
+        // [workaround] Firefox doesn't support relatedTarget on focusout
+        //  - Ignore hide action on focus out in FF.
+        if (env.isFF) {
+          return;
+        }
+
+        if (!e.relatedTarget || !dom.ancestor(e.relatedTarget, func.eq(this.$popover[0]))) {
+          this.hide();
+        }
+      }
+    };
+  }
+
+  shouldInitialize() {
+    return this.options.airMode && !lists.isEmpty(this.options.popover.air);
+  }
+
+  initialize() {
+    this.$popover = this.ui.popover({
+      className: 'note-air-popover'
+    }).render().appendTo(this.options.container);
+    const $content = this.$popover.find('.popover-content');
+
+    this.context.invoke('buttons.build', $content, this.options.popover.air);
+  }
+
+  destroy() {
+    this.$popover.remove();
+  }
+
+  update() {
+    const styleInfo = this.context.invoke('editor.currentStyle');
+    if (styleInfo.range && !styleInfo.range.isCollapsed()) {
+      const rect = lists.last(styleInfo.range.getClientRects());
+      if (rect) {
+        const bnd = func.rect2bnd(rect);
+        this.$popover.css({
+          display: 'block',
+          left: Math.max(bnd.left + bnd.width / 2, 0) - AIR_MODE_POPOVER_X_OFFSET,
+          top: bnd.top + bnd.height
+        });
+        this.context.invoke('buttons.updateCurrentStyle', this.$popover);
+      }
+    } else {
+      this.hide();
+    }
+  }
+
+  hide() {
+    this.$popover.hide();
+  }
+}

data/node_modules/summernote/src/js/base/module/AutoLink.js

@@ -0,0 +1,61 @@
+import $ from 'jquery';
+import lists from '../core/lists';
+import key from '../core/key';
+
+const defaultScheme = 'http://';
+const linkPattern = /^([A-Za-z][A-Za-z0-9+-.]*\:[\/\/]?|mailto:[A-Z0-9._%+-]+@)?(www\.)?(.+)$/i;
+
+export default class AutoLink {
+  constructor(context) {
+    this.context = context;
+    this.events = {
+      'summernote.keyup': (we, e) => {
+        if (!e.isDefaultPrevented()) {
+          this.handleKeyup(e);
+        }
+      },
+      'summernote.keydown': (we, e) => {
+        this.handleKeydown(e);
+      }
+    };
+  }
+
+  initialize() {
+    this.lastWordRange = null;
+  }
+
+  destroy() {
+    this.lastWordRange = null;
+  }
+
+  replace() {
+    if (!this.lastWordRange) {
+      return;
+    }
+
+    const keyword = this.lastWordRange.toString();
+    const match = keyword.match(linkPattern);
+
+    if (match && (match[1] || match[2])) {
+      const link = match[1] ? keyword : defaultScheme + keyword;
+      const node = $('<a />').html(keyword).attr('href', link)[0];
+
+      this.lastWordRange.insertNode(node);
+      this.lastWordRange = null;
+      this.context.invoke('editor.focus');
+    }
+  }
+
+  handleKeydown(e) {
+    if (lists.contains([key.code.ENTER, key.code.SPACE], e.keyCode)) {
+      const wordRange = this.context.invoke('editor.createRange').getWordRange();
+      this.lastWordRange = wordRange;
+    }
+  }
+
+  handleKeyup(e) {
+    if (lists.contains([key.code.ENTER, key.code.SPACE], e.keyCode)) {
+      this.replace();
+    }
+  }
+}

data/node_modules/summernote/src/js/base/module/AutoSync.js

@@ -0,0 +1,19 @@
+import dom from '../core/dom';
+
+/**
+ * textarea auto sync.
+ */
+export default class AutoSync {
+  constructor(context) {
+    this.$note = context.layoutInfo.note;
+    this.events = {
+      'summernote.change': () => {
+        this.$note.val(context.invoke('code'));
+      }
+    };
+  }
+
+  shouldInitialize() {
+    return dom.isTextarea(this.$note[0]);
+  }
+}

data/node_modules/summernote/src/js/base/module/Buttons.js

@@ -0,0 +1,813 @@
+import $ from 'jquery';
+import func from '../core/func';
+import lists from '../core/lists';
+import env from '../core/env';
+
+export default class Buttons {
+  constructor(context) {
+    this.ui = $.summernote.ui;
+    this.context = context;
+    this.$toolbar = context.layoutInfo.toolbar;
+    this.options = context.options;
+    this.lang = this.options.langInfo;
+    this.invertedKeyMap = func.invertObject(
+      this.options.keyMap[env.isMac ? 'mac' : 'pc']
+    );
+  }
+
+  representShortcut(editorMethod) {
+    let shortcut = this.invertedKeyMap[editorMethod];
+    if (!this.options.shortcuts || !shortcut) {
+      return '';
+    }
+
+    if (env.isMac) {
+      shortcut = shortcut.replace('CMD', '⌘').replace('SHIFT', '⇧');
+    }
+
+    shortcut = shortcut.replace('BACKSLASH', '\\')
+      .replace('SLASH', '/')
+      .replace('LEFTBRACKET', '[')
+      .replace('RIGHTBRACKET', ']');
+
+    return ' (' + shortcut + ')';
+  }
+
+  button(o) {
+    if (!this.options.tooltip && o.tooltip) {
+      delete o.tooltip;
+    }
+    o.container = this.options.container;
+    return this.ui.button(o);
+  }
+
+  initialize() {
+    this.addToolbarButtons();
+    this.addImagePopoverButtons();
+    this.addLinkPopoverButtons();
+    this.addTablePopoverButtons();
+    this.fontInstalledMap = {};
+  }
+
+  destroy() {
+    delete this.fontInstalledMap;
+  }
+
+  isFontInstalled(name) {
+    if (!this.fontInstalledMap.hasOwnProperty(name)) {
+      this.fontInstalledMap[name] = env.isFontInstalled(name) ||
+        lists.contains(this.options.fontNamesIgnoreCheck, name);
+    }
+
+    return this.fontInstalledMap[name];
+  }
+
+  isFontDeservedToAdd(name) {
+    const genericFamilies = ['sans-serif', 'serif', 'monospace', 'cursive', 'fantasy'];
+    name = name.toLowerCase();
+
+    return ((name !== '') && this.isFontInstalled(name) && ($.inArray(name, genericFamilies) === -1));
+  }
+
+  addToolbarButtons() {
+    this.context.memo('button.style', () => {
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents(
+            this.ui.icon(this.options.icons.magic), this.options
+          ),
+          tooltip: this.lang.style.style,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdown({
+          className: 'dropdown-style',
+          items: this.options.styleTags,
+          title: this.lang.style.style,
+          template: (item) => {
+            if (typeof item === 'string') {
+              item = { tag: item, title: (this.lang.style.hasOwnProperty(item) ? this.lang.style[item] : item) };
+            }
+
+            const tag = item.tag;
+            const title = item.title;
+            const style = item.style ? ' style="' + item.style + '" ' : '';
+            const className = item.className ? ' class="' + item.className + '"' : '';
+
+            return '<' + tag + style + className + '>' + title + '</' + tag + '>';
+          },
+          click: this.context.createInvokeHandler('editor.formatBlock')
+        })
+      ]).render();
+    });
+
+    for (let styleIdx = 0, styleLen = this.options.styleTags.length; styleIdx < styleLen; styleIdx++) {
+      const item = this.options.styleTags[styleIdx];
+
+      this.context.memo('button.style.' + item, () => {
+        return this.button({
+          className: 'note-btn-style-' + item,
+          contents: '<div data-value="' + item + '">' + item.toUpperCase() + '</div>',
+          tooltip: this.lang.style[item],
+          click: this.context.createInvokeHandler('editor.formatBlock')
+        }).render();
+      });
+    }
+
+    this.context.memo('button.bold', () => {
+      return this.button({
+        className: 'note-btn-bold',
+        contents: this.ui.icon(this.options.icons.bold),
+        tooltip: this.lang.font.bold + this.representShortcut('bold'),
+        click: this.context.createInvokeHandlerAndUpdateState('editor.bold')
+      }).render();
+    });
+
+    this.context.memo('button.italic', () => {
+      return this.button({
+        className: 'note-btn-italic',
+        contents: this.ui.icon(this.options.icons.italic),
+        tooltip: this.lang.font.italic + this.representShortcut('italic'),
+        click: this.context.createInvokeHandlerAndUpdateState('editor.italic')
+      }).render();
+    });
+
+    this.context.memo('button.underline', () => {
+      return this.button({
+        className: 'note-btn-underline',
+        contents: this.ui.icon(this.options.icons.underline),
+        tooltip: this.lang.font.underline + this.representShortcut('underline'),
+        click: this.context.createInvokeHandlerAndUpdateState('editor.underline')
+      }).render();
+    });
+
+    this.context.memo('button.clear', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.eraser),
+        tooltip: this.lang.font.clear + this.representShortcut('removeFormat'),
+        click: this.context.createInvokeHandler('editor.removeFormat')
+      }).render();
+    });
+
+    this.context.memo('button.strikethrough', () => {
+      return this.button({
+        className: 'note-btn-strikethrough',
+        contents: this.ui.icon(this.options.icons.strikethrough),
+        tooltip: this.lang.font.strikethrough + this.representShortcut('strikethrough'),
+        click: this.context.createInvokeHandlerAndUpdateState('editor.strikethrough')
+      }).render();
+    });
+
+    this.context.memo('button.superscript', () => {
+      return this.button({
+        className: 'note-btn-superscript',
+        contents: this.ui.icon(this.options.icons.superscript),
+        tooltip: this.lang.font.superscript,
+        click: this.context.createInvokeHandlerAndUpdateState('editor.superscript')
+      }).render();
+    });
+
+    this.context.memo('button.subscript', () => {
+      return this.button({
+        className: 'note-btn-subscript',
+        contents: this.ui.icon(this.options.icons.subscript),
+        tooltip: this.lang.font.subscript,
+        click: this.context.createInvokeHandlerAndUpdateState('editor.subscript')
+      }).render();
+    });
+
+    this.context.memo('button.fontname', () => {
+      const styleInfo = this.context.invoke('editor.currentStyle');
+
+      // Add 'default' fonts into the fontnames array if not exist
+      $.each(styleInfo['font-family'].split(','), (idx, fontname) => {
+        fontname = fontname.trim().replace(/['"]+/g, '');
+        if (this.isFontDeservedToAdd(fontname)) {
+          if ($.inArray(fontname, this.options.fontNames) === -1) {
+            this.options.fontNames.push(fontname);
+          }
+        }
+      });
+
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents(
+            '<span class="note-current-fontname"/>', this.options
+          ),
+          tooltip: this.lang.font.name,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdownCheck({
+          className: 'dropdown-fontname',
+          checkClassName: this.options.icons.menuCheck,
+          items: this.options.fontNames.filter(this.isFontInstalled.bind(this)),
+          title: this.lang.font.name,
+          template: (item) => {
+            return '<span style="font-family: \'' + item + '\'">' + item + '</span>';
+          },
+          click: this.context.createInvokeHandlerAndUpdateState('editor.fontName')
+        })
+      ]).render();
+    });
+
+    this.context.memo('button.fontsize', () => {
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents('<span class="note-current-fontsize"/>', this.options),
+          tooltip: this.lang.font.size,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdownCheck({
+          className: 'dropdown-fontsize',
+          checkClassName: this.options.icons.menuCheck,
+          items: this.options.fontSizes,
+          title: this.lang.font.size,
+          click: this.context.createInvokeHandlerAndUpdateState('editor.fontSize')
+        })
+      ]).render();
+    });
+
+    this.context.memo('button.color', () => {
+      return this.ui.buttonGroup({
+        className: 'note-color',
+        children: [
+          this.button({
+            className: 'note-current-color-button',
+            contents: this.ui.icon(this.options.icons.font + ' note-recent-color'),
+            tooltip: this.lang.color.recent,
+            click: (e) => {
+              const $button = $(e.currentTarget);
+              this.context.invoke('editor.color', {
+                backColor: $button.attr('data-backColor'),
+                foreColor: $button.attr('data-foreColor')
+              });
+            },
+            callback: ($button) => {
+              const $recentColor = $button.find('.note-recent-color');
+              $recentColor.css('background-color', '#FFFF00');
+              $button.attr('data-backColor', '#FFFF00');
+            }
+          }),
+          this.button({
+            className: 'dropdown-toggle',
+            contents: this.ui.dropdownButtonContents('', this.options),
+            tooltip: this.lang.color.more,
+            data: {
+              toggle: 'dropdown'
+            }
+          }),
+          this.ui.dropdown({
+            items: [
+              '<div class="note-palette">',
+              '  <div class="note-palette-title">' + this.lang.color.background + '</div>',
+              '  <div>',
+              '    <button type="button" class="note-color-reset btn btn-light" data-event="backColor" data-value="inherit">',
+              this.lang.color.transparent,
+              '    </button>',
+              '  </div>',
+              '  <div class="note-holder" data-event="backColor"/>',
+              '</div>',
+              '<div class="note-palette">',
+              '  <div class="note-palette-title">' + this.lang.color.foreground + '</div>',
+              '  <div>',
+              '    <button type="button" class="note-color-reset btn btn-light" data-event="removeFormat" data-value="foreColor">',
+              this.lang.color.resetToDefault,
+              '    </button>',
+              '  </div>',
+              '  <div class="note-holder" data-event="foreColor"/>',
+              '</div>'
+            ].join(''),
+            callback: ($dropdown) => {
+              $dropdown.find('.note-holder').each((idx, item) => {
+                const $holder = $(item);
+                $holder.append(this.ui.palette({
+                  colors: this.options.colors,
+                  colorsName: this.options.colorsName,
+                  eventName: $holder.data('event'),
+                  container: this.options.container,
+                  tooltip: this.options.tooltip
+                }).render());
+              });
+            },
+            click: (event) => {
+              const $button = $(event.target);
+              const eventName = $button.data('event');
+              const value = $button.data('value');
+
+              if (eventName && value) {
+                const key = eventName === 'backColor' ? 'background-color' : 'color';
+                const $color = $button.closest('.note-color').find('.note-recent-color');
+                const $currentButton = $button.closest('.note-color').find('.note-current-color-button');
+
+                $color.css(key, value);
+                $currentButton.attr('data-' + eventName, value);
+                this.context.invoke('editor.' + eventName, value);
+              }
+            }
+          })
+        ]
+      }).render();
+    });
+
+    this.context.memo('button.ul', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.unorderedlist),
+        tooltip: this.lang.lists.unordered + this.representShortcut('insertUnorderedList'),
+        click: this.context.createInvokeHandler('editor.insertUnorderedList')
+      }).render();
+    });
+
+    this.context.memo('button.ol', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.orderedlist),
+        tooltip: this.lang.lists.ordered + this.representShortcut('insertOrderedList'),
+        click: this.context.createInvokeHandler('editor.insertOrderedList')
+      }).render();
+    });
+
+    const justifyLeft = this.button({
+      contents: this.ui.icon(this.options.icons.alignLeft),
+      tooltip: this.lang.paragraph.left + this.representShortcut('justifyLeft'),
+      click: this.context.createInvokeHandler('editor.justifyLeft')
+    });
+
+    const justifyCenter = this.button({
+      contents: this.ui.icon(this.options.icons.alignCenter),
+      tooltip: this.lang.paragraph.center + this.representShortcut('justifyCenter'),
+      click: this.context.createInvokeHandler('editor.justifyCenter')
+    });
+
+    const justifyRight = this.button({
+      contents: this.ui.icon(this.options.icons.alignRight),
+      tooltip: this.lang.paragraph.right + this.representShortcut('justifyRight'),
+      click: this.context.createInvokeHandler('editor.justifyRight')
+    });
+
+    const justifyFull = this.button({
+      contents: this.ui.icon(this.options.icons.alignJustify),
+      tooltip: this.lang.paragraph.justify + this.representShortcut('justifyFull'),
+      click: this.context.createInvokeHandler('editor.justifyFull')
+    });
+
+    const outdent = this.button({
+      contents: this.ui.icon(this.options.icons.outdent),
+      tooltip: this.lang.paragraph.outdent + this.representShortcut('outdent'),
+      click: this.context.createInvokeHandler('editor.outdent')
+    });
+
+    const indent = this.button({
+      contents: this.ui.icon(this.options.icons.indent),
+      tooltip: this.lang.paragraph.indent + this.representShortcut('indent'),
+      click: this.context.createInvokeHandler('editor.indent')
+    });
+
+    this.context.memo('button.justifyLeft', func.invoke(justifyLeft, 'render'));
+    this.context.memo('button.justifyCenter', func.invoke(justifyCenter, 'render'));
+    this.context.memo('button.justifyRight', func.invoke(justifyRight, 'render'));
+    this.context.memo('button.justifyFull', func.invoke(justifyFull, 'render'));
+    this.context.memo('button.outdent', func.invoke(outdent, 'render'));
+    this.context.memo('button.indent', func.invoke(indent, 'render'));
+
+    this.context.memo('button.paragraph', () => {
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.alignLeft), this.options),
+          tooltip: this.lang.paragraph.paragraph,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdown([
+          this.ui.buttonGroup({
+            className: 'note-align',
+            children: [justifyLeft, justifyCenter, justifyRight, justifyFull]
+          }),
+          this.ui.buttonGroup({
+            className: 'note-list',
+            children: [outdent, indent]
+          })
+        ])
+      ]).render();
+    });
+
+    this.context.memo('button.height', () => {
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.textHeight), this.options),
+          tooltip: this.lang.font.height,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdownCheck({
+          items: this.options.lineHeights,
+          checkClassName: this.options.icons.menuCheck,
+          className: 'dropdown-line-height',
+          title: this.lang.font.height,
+          click: this.context.createInvokeHandler('editor.lineHeight')
+        })
+      ]).render();
+    });
+
+    this.context.memo('button.table', () => {
+      return this.ui.buttonGroup([
+        this.button({
+          className: 'dropdown-toggle',
+          contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.table), this.options),
+          tooltip: this.lang.table.table,
+          data: {
+            toggle: 'dropdown'
+          }
+        }),
+        this.ui.dropdown({
+          title: this.lang.table.table,
+          className: 'note-table',
+          items: [
+            '<div class="note-dimension-picker">',
+            '  <div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1"/>',
+            '  <div class="note-dimension-picker-highlighted"/>',
+            '  <div class="note-dimension-picker-unhighlighted"/>',
+            '</div>',
+            '<div class="note-dimension-display">1 x 1</div>'
+          ].join('')
+        })
+      ], {
+        callback: ($node) => {
+          const $catcher = $node.find('.note-dimension-picker-mousecatcher');
+          $catcher.css({
+            width: this.options.insertTableMaxSize.col + 'em',
+            height: this.options.insertTableMaxSize.row + 'em'
+          }).mousedown(this.context.createInvokeHandler('editor.insertTable'))
+            .on('mousemove', this.tableMoveHandler.bind(this));
+        }
+      }).render();
+    });
+
+    this.context.memo('button.link', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.link),
+        tooltip: this.lang.link.link + this.representShortcut('linkDialog.show'),
+        click: this.context.createInvokeHandler('linkDialog.show')
+      }).render();
+    });
+
+    this.context.memo('button.picture', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.picture),
+        tooltip: this.lang.image.image,
+        click: this.context.createInvokeHandler('imageDialog.show')
+      }).render();
+    });
+
+    this.context.memo('button.video', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.video),
+        tooltip: this.lang.video.video,
+        click: this.context.createInvokeHandler('videoDialog.show')
+      }).render();
+    });
+
+    this.context.memo('button.hr', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.minus),
+        tooltip: this.lang.hr.insert + this.representShortcut('insertHorizontalRule'),
+        click: this.context.createInvokeHandler('editor.insertHorizontalRule')
+      }).render();
+    });
+
+    this.context.memo('button.fullscreen', () => {
+      return this.button({
+        className: 'btn-fullscreen',
+        contents: this.ui.icon(this.options.icons.arrowsAlt),
+        tooltip: this.lang.options.fullscreen,
+        click: this.context.createInvokeHandler('fullscreen.toggle')
+      }).render();
+    });
+
+    this.context.memo('button.codeview', () => {
+      return this.button({
+        className: 'btn-codeview',
+        contents: this.ui.icon(this.options.icons.code),
+        tooltip: this.lang.options.codeview,
+        click: this.context.createInvokeHandler('codeview.toggle')
+      }).render();
+    });
+
+    this.context.memo('button.redo', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.redo),
+        tooltip: this.lang.history.redo + this.representShortcut('redo'),
+        click: this.context.createInvokeHandler('editor.redo')
+      }).render();
+    });
+
+    this.context.memo('button.undo', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.undo),
+        tooltip: this.lang.history.undo + this.representShortcut('undo'),
+        click: this.context.createInvokeHandler('editor.undo')
+      }).render();
+    });
+
+    this.context.memo('button.help', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.question),
+        tooltip: this.lang.options.help,
+        click: this.context.createInvokeHandler('helpDialog.show')
+      }).render();
+    });
+  }
+
+  /**
+   * image : [
+   *   ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
+   *   ['float', ['floatLeft', 'floatRight', 'floatNone' ]],
+   *   ['remove', ['removeMedia']]
+   * ],
+   */
+  addImagePopoverButtons() {
+    // Image Size Buttons
+    this.context.memo('button.imageSize100', () => {
+      return this.button({
+        contents: '<span class="note-fontsize-10">100%</span>',
+        tooltip: this.lang.image.resizeFull,
+        click: this.context.createInvokeHandler('editor.resize', '1')
+      }).render();
+    });
+    this.context.memo('button.imageSize50', () => {
+      return this.button({
+        contents: '<span class="note-fontsize-10">50%</span>',
+        tooltip: this.lang.image.resizeHalf,
+        click: this.context.createInvokeHandler('editor.resize', '0.5')
+      }).render();
+    });
+    this.context.memo('button.imageSize25', () => {
+      return this.button({
+        contents: '<span class="note-fontsize-10">25%</span>',
+        tooltip: this.lang.image.resizeQuarter,
+        click: this.context.createInvokeHandler('editor.resize', '0.25')
+      }).render();
+    });
+
+    // Float Buttons
+    this.context.memo('button.floatLeft', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.alignLeft),
+        tooltip: this.lang.image.floatLeft,
+        click: this.context.createInvokeHandler('editor.floatMe', 'left')
+      }).render();
+    });
+
+    this.context.memo('button.floatRight', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.alignRight),
+        tooltip: this.lang.image.floatRight,
+        click: this.context.createInvokeHandler('editor.floatMe', 'right')
+      }).render();
+    });
+
+    this.context.memo('button.floatNone', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.alignJustify),
+        tooltip: this.lang.image.floatNone,
+        click: this.context.createInvokeHandler('editor.floatMe', 'none')
+      }).render();
+    });
+
+    // Remove Buttons
+    this.context.memo('button.removeMedia', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.trash),
+        tooltip: this.lang.image.remove,
+        click: this.context.createInvokeHandler('editor.removeMedia')
+      }).render();
+    });
+  }
+
+  addLinkPopoverButtons() {
+    this.context.memo('button.linkDialogShow', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.link),
+        tooltip: this.lang.link.edit,
+        click: this.context.createInvokeHandler('linkDialog.show')
+      }).render();
+    });
+
+    this.context.memo('button.unlink', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.unlink),
+        tooltip: this.lang.link.unlink,
+        click: this.context.createInvokeHandler('editor.unlink')
+      }).render();
+    });
+  }
+
+  /**
+   * table : [
+   *  ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
+   *  ['delete', ['deleteRow', 'deleteCol', 'deleteTable']]
+   * ],
+   */
+  addTablePopoverButtons() {
+    this.context.memo('button.addRowUp', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.rowAbove),
+        tooltip: this.lang.table.addRowAbove,
+        click: this.context.createInvokeHandler('editor.addRow', 'top')
+      }).render();
+    });
+    this.context.memo('button.addRowDown', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.rowBelow),
+        tooltip: this.lang.table.addRowBelow,
+        click: this.context.createInvokeHandler('editor.addRow', 'bottom')
+      }).render();
+    });
+    this.context.memo('button.addColLeft', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.colBefore),
+        tooltip: this.lang.table.addColLeft,
+        click: this.context.createInvokeHandler('editor.addCol', 'left')
+      }).render();
+    });
+    this.context.memo('button.addColRight', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.colAfter),
+        tooltip: this.lang.table.addColRight,
+        click: this.context.createInvokeHandler('editor.addCol', 'right')
+      }).render();
+    });
+    this.context.memo('button.deleteRow', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.rowRemove),
+        tooltip: this.lang.table.delRow,
+        click: this.context.createInvokeHandler('editor.deleteRow')
+      }).render();
+    });
+    this.context.memo('button.deleteCol', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.colRemove),
+        tooltip: this.lang.table.delCol,
+        click: this.context.createInvokeHandler('editor.deleteCol')
+      }).render();
+    });
+    this.context.memo('button.deleteTable', () => {
+      return this.button({
+        className: 'btn-md',
+        contents: this.ui.icon(this.options.icons.trash),
+        tooltip: this.lang.table.delTable,
+        click: this.context.createInvokeHandler('editor.deleteTable')
+      }).render();
+    });
+  }
+
+  build($container, groups) {
+    for (let groupIdx = 0, groupLen = groups.length; groupIdx < groupLen; groupIdx++) {
+      const group = groups[groupIdx];
+      const groupName = $.isArray(group) ? group[0] : group;
+      const buttons = $.isArray(group) ? ((group.length === 1) ? [group[0]] : group[1]) : [group];
+
+      const $group = this.ui.buttonGroup({
+        className: 'note-' + groupName
+      }).render();
+
+      for (let idx = 0, len = buttons.length; idx < len; idx++) {
+        const btn = this.context.memo('button.' + buttons[idx]);
+        if (btn) {
+          $group.append(typeof btn === 'function' ? btn(this.context) : btn);
+        }
+      }
+      $group.appendTo($container);
+    }
+  }
+
+  /**
+   * @param {jQuery} [$container]
+   */
+  updateCurrentStyle($container) {
+    const $cont = $container || this.$toolbar;
+
+    const styleInfo = this.context.invoke('editor.currentStyle');
+    this.updateBtnStates($cont, {
+      '.note-btn-bold': () => {
+        return styleInfo['font-bold'] === 'bold';
+      },
+      '.note-btn-italic': () => {
+        return styleInfo['font-italic'] === 'italic';
+      },
+      '.note-btn-underline': () => {
+        return styleInfo['font-underline'] === 'underline';
+      },
+      '.note-btn-subscript': () => {
+        return styleInfo['font-subscript'] === 'subscript';
+      },
+      '.note-btn-superscript': () => {
+        return styleInfo['font-superscript'] === 'superscript';
+      },
+      '.note-btn-strikethrough': () => {
+        return styleInfo['font-strikethrough'] === 'strikethrough';
+      }
+    });
+
+    if (styleInfo['font-family']) {
+      const fontNames = styleInfo['font-family'].split(',').map((name) => {
+        return name.replace(/[\'\"]/g, '')
+          .replace(/\s+$/, '')
+          .replace(/^\s+/, '');
+      });
+      const fontName = lists.find(fontNames, this.isFontInstalled.bind(this));
+
+      $cont.find('.dropdown-fontname a').each((idx, item) => {
+        const $item = $(item);
+        // always compare string to avoid creating another func.
+        const isChecked = ($item.data('value') + '') === (fontName + '');
+        $item.toggleClass('checked', isChecked);
+      });
+      $cont.find('.note-current-fontname').text(fontName).css('font-family', fontName);
+    }
+
+    if (styleInfo['font-size']) {
+      const fontSize = styleInfo['font-size'];
+      $cont.find('.dropdown-fontsize a').each((idx, item) => {
+        const $item = $(item);
+        // always compare with string to avoid creating another func.
+        const isChecked = ($item.data('value') + '') === (fontSize + '');
+        $item.toggleClass('checked', isChecked);
+      });
+      $cont.find('.note-current-fontsize').text(fontSize);
+    }
+
+    if (styleInfo['line-height']) {
+      const lineHeight = styleInfo['line-height'];
+      $cont.find('.dropdown-line-height li a').each((idx, item) => {
+        // always compare with string to avoid creating another func.
+        const isChecked = ($(item).data('value') + '') === (lineHeight + '');
+        this.className = isChecked ? 'checked' : '';
+      });
+    }
+  }
+
+  updateBtnStates($container, infos) {
+    $.each(infos, (selector, pred) => {
+      this.ui.toggleBtnActive($container.find(selector), pred());
+    });
+  }
+
+  tableMoveHandler(event) {
+    const PX_PER_EM = 18;
+    const $picker = $(event.target.parentNode); // target is mousecatcher
+    const $dimensionDisplay = $picker.next();
+    const $catcher = $picker.find('.note-dimension-picker-mousecatcher');
+    const $highlighted = $picker.find('.note-dimension-picker-highlighted');
+    const $unhighlighted = $picker.find('.note-dimension-picker-unhighlighted');
+
+    let posOffset;
+    // HTML5 with jQuery - e.offsetX is undefined in Firefox
+    if (event.offsetX === undefined) {
+      const posCatcher = $(event.target).offset();
+      posOffset = {
+        x: event.pageX - posCatcher.left,
+        y: event.pageY - posCatcher.top
+      };
+    } else {
+      posOffset = {
+        x: event.offsetX,
+        y: event.offsetY
+      };
+    }
+
+    const dim = {
+      c: Math.ceil(posOffset.x / PX_PER_EM) || 1,
+      r: Math.ceil(posOffset.y / PX_PER_EM) || 1
+    };
+
+    $highlighted.css({ width: dim.c + 'em', height: dim.r + 'em' });
+    $catcher.data('value', dim.c + 'x' + dim.r);
+
+    if (dim.c > 3 && dim.c < this.options.insertTableMaxSize.col) {
+      $unhighlighted.css({ width: dim.c + 1 + 'em' });
+    }
+
+    if (dim.r > 3 && dim.r < this.options.insertTableMaxSize.row) {
+      $unhighlighted.css({ height: dim.r + 1 + 'em' });
+    }
+
+    $dimensionDisplay.html(dim.c + ' x ' + dim.r);
+  }
+}