',\n '

',\n ].join('')).prependTo(this.$editor);\n }\n\n /**\n * attach Drag and Drop Events\n */\n initialize() {\n if (this.options.disableDragAndDrop) {\n // prevent default drop event\n this.documentEventHandlers.onDrop = (e) => {\n e.preventDefault();\n };\n // do not consider outside of dropzone\n this.$eventListener = this.$dropzone;\n this.$eventListener.on('drop', this.documentEventHandlers.onDrop);\n } else {\n this.attachDragAndDropEvent();\n }\n }\n\n /**\n * attach Drag and Drop Events\n */\n attachDragAndDropEvent() {\n let collection = $();\n const $dropzoneMessage = this.$dropzone.find('.note-dropzone-message');\n\n this.documentEventHandlers.onDragenter = (e) => {\n const isCodeview = this.context.invoke('codeview.isActivated');\n const hasEditorSize = this.$editor.width() > 0 && this.$editor.height() > 0;\n if (!isCodeview && !collection.length && hasEditorSize) {\n this.$editor.addClass('dragover');\n this.$dropzone.width(this.$editor.width());\n this.$dropzone.height(this.$editor.height());\n $dropzoneMessage.text(this.lang.image.dragImageHere);\n }\n collection = collection.add(e.target);\n };\n\n this.documentEventHandlers.onDragleave = (e) => {\n collection = collection.not(e.target);\n\n // If nodeName is BODY, then just make it over (fix for IE)\n if (!collection.length || e.target.nodeName === 'BODY') {\n collection = $();\n this.$editor.removeClass('dragover');\n }\n };\n\n this.documentEventHandlers.onDrop = () => {\n collection = $();\n this.$editor.removeClass('dragover');\n };\n\n // show dropzone on dragenter when dragging a object to document\n // -but only if the editor is visible, i.e. has a positive width and height\n this.$eventListener.on('dragenter', this.documentEventHandlers.onDragenter)\n .on('dragleave', this.documentEventHandlers.onDragleave)\n .on('drop', this.documentEventHandlers.onDrop);\n\n // change dropzone's message on hover.\n this.$dropzone.on('dragenter', () => {\n this.$dropzone.addClass('hover');\n $dropzoneMessage.text(this.lang.image.dropImage);\n }).on('dragleave', () => {\n this.$dropzone.removeClass('hover');\n $dropzoneMessage.text(this.lang.image.dragImageHere);\n });\n\n // attach dropImage\n this.$dropzone.on('drop', (event) => {\n const dataTransfer = event.originalEvent.dataTransfer;\n\n // stop the browser from opening the dropped content\n event.preventDefault();\n\n if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {\n this.$editable.focus();\n this.context.invoke('editor.insertImagesOrCallback', dataTransfer.files);\n } else {\n $.each(dataTransfer.types, (idx, type) => {\n // skip moz-specific types\n if (type.toLowerCase().indexOf('_moz_') > -1) {\n return;\n }\n const content = dataTransfer.getData(type);\n\n if (type.toLowerCase().indexOf('text') > -1) {\n this.context.invoke('editor.pasteHTML', content);\n } else {\n $(content).each((idx, item) => {\n this.context.invoke('editor.insertNode', item);\n });\n }\n });\n }\n }).on('dragover', false); // prevent default dragover event\n }\n\n destroy() {\n Object.keys(this.documentEventHandlers).forEach((key) => {\n this.$eventListener.off(key.substr(2).toLowerCase(), this.documentEventHandlers[key]);\n });\n this.documentEventHandlers = {};\n }\n}\n","import env from '../core/env';\nimport dom from '../core/dom';\n\nlet CodeMirror;\nif (env.hasCodeMirror) {\n CodeMirror = window.CodeMirror;\n}\n\n/**\n * @class Codeview\n */\nexport default class CodeView {\n constructor(context) {\n this.context = context;\n this.$editor = context.layoutInfo.editor;\n this.$editable = context.layoutInfo.editable;\n this.$codable = context.layoutInfo.codable;\n this.options = context.options;\n }\n\n sync() {\n const isCodeview = this.isActivated();\n if (isCodeview && env.hasCodeMirror) {\n this.$codable.data('cmEditor').save();\n }\n }\n\n /**\n * @return {Boolean}\n */\n isActivated() {\n return this.$editor.hasClass('codeview');\n }\n\n /**\n * toggle codeview\n */\n toggle() {\n if (this.isActivated()) {\n this.deactivate();\n } else {\n this.activate();\n }\n this.context.triggerEvent('codeview.toggled');\n }\n\n /**\n * purify input value\n * @param value\n * @returns {*}\n */\n purify(value) {\n if (this.options.codeviewFilter) {\n // filter code view regex\n value = value.replace(this.options.codeviewFilterRegex, '');\n // allow specific iframe tag\n if (this.options.codeviewIframeFilter) {\n const whitelist = this.options.codeviewIframeWhitelistSrc.concat(this.options.codeviewIframeWhitelistSrcBase);\n value = value.replace(/(.*?(?:<\\/iframe>)?)/gi, function(tag) {\n // remove if src attribute is duplicated\n if (/<.+src(?==?('|\"|\\s)?)[\\s\\S]+src(?=('|\"|\\s)?)[^>]*?>/i.test(tag)) {\n return '';\n }\n for (const src of whitelist) {\n // pass if src is trusted\n if ((new RegExp('src=\"(https?:)?\\/\\/' + src.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&') + '\\/(.+)\"')).test(tag)) {\n return tag;\n }\n }\n return '';\n });\n }\n }\n return value;\n }\n\n /**\n * activate code view\n */\n activate() {\n this.$codable.val(dom.html(this.$editable, this.options.prettifyHtml));\n this.$codable.height(this.$editable.height());\n\n this.context.invoke('toolbar.updateCodeview', true);\n this.$editor.addClass('codeview');\n this.$codable.focus();\n\n // activate CodeMirror as codable\n if (env.hasCodeMirror) {\n const cmEditor = CodeMirror.fromTextArea(this.$codable[0], this.options.codemirror);\n\n // CodeMirror TernServer\n if (this.options.codemirror.tern) {\n const server = new CodeMirror.TernServer(this.options.codemirror.tern);\n cmEditor.ternServer = server;\n cmEditor.on('cursorActivity', (cm) => {\n server.updateArgHints(cm);\n });\n }\n\n cmEditor.on('blur', (event) => {\n this.context.triggerEvent('blur.codeview', cmEditor.getValue(), event);\n });\n cmEditor.on('change', () => {\n this.context.triggerEvent('change.codeview', cmEditor.getValue(), cmEditor);\n });\n\n // CodeMirror hasn't Padding.\n cmEditor.setSize(null, this.$editable.outerHeight());\n this.$codable.data('cmEditor', cmEditor);\n } else {\n this.$codable.on('blur', (event) => {\n this.context.triggerEvent('blur.codeview', this.$codable.val(), event);\n });\n this.$codable.on('input', () => {\n this.context.triggerEvent('change.codeview', this.$codable.val(), this.$codable);\n });\n }\n }\n\n /**\n * deactivate code view\n */\n deactivate() {\n // deactivate CodeMirror as codable\n if (env.hasCodeMirror) {\n const cmEditor = this.$codable.data('cmEditor');\n this.$codable.val(cmEditor.getValue());\n cmEditor.toTextArea();\n }\n\n const value = this.purify(dom.value(this.$codable, this.options.prettifyHtml) || dom.emptyPara);\n const isChange = this.$editable.html() !== value;\n\n this.$editable.html(value);\n this.$editable.height(this.options.height ? this.$codable.height() : 'auto');\n this.$editor.removeClass('codeview');\n\n if (isChange) {\n this.context.triggerEvent('change', this.$editable.html(), this.$editable);\n }\n\n this.$editable.focus();\n\n this.context.invoke('toolbar.updateCodeview', false);\n }\n\n destroy() {\n if (this.isActivated()) {\n this.deactivate();\n }\n }\n}\n","import $ from 'jquery';\nconst EDITABLE_PADDING = 24;\n\nexport default class Statusbar {\n constructor(context) {\n this.$document = $(document);\n this.$statusbar = context.layoutInfo.statusbar;\n this.$editable = context.layoutInfo.editable;\n this.options = context.options;\n }\n\n initialize() {\n if (this.options.airMode || this.options.disableResizeEditor) {\n this.destroy();\n return;\n }\n\n this.$statusbar.on('mousedown', (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const editableTop = this.$editable.offset().top - this.$document.scrollTop();\n const onMouseMove = (event) => {\n let height = event.clientY - (editableTop + EDITABLE_PADDING);\n\n height = (this.options.minheight > 0) ? Math.max(height, this.options.minheight) : height;\n height = (this.options.maxHeight > 0) ? Math.min(height, this.options.maxHeight) : height;\n\n this.$editable.height(height);\n };\n\n this.$document.on('mousemove', onMouseMove).one('mouseup', () => {\n this.$document.off('mousemove', onMouseMove);\n });\n });\n }\n\n destroy() {\n this.$statusbar.off();\n this.$statusbar.addClass('locked');\n }\n}\n","import $ from 'jquery';\n\nexport default class Fullscreen {\n constructor(context) {\n this.context = context;\n\n this.$editor = context.layoutInfo.editor;\n this.$toolbar = context.layoutInfo.toolbar;\n this.$editable = context.layoutInfo.editable;\n this.$codable = context.layoutInfo.codable;\n\n this.$window = $(window);\n this.$scrollbar = $('html, body');\n\n this.onResize = () => {\n this.resizeTo({\n h: this.$window.height() - this.$toolbar.outerHeight(),\n });\n };\n }\n\n resizeTo(size) {\n this.$editable.css('height', size.h);\n this.$codable.css('height', size.h);\n if (this.$codable.data('cmeditor')) {\n this.$codable.data('cmeditor').setsize(null, size.h);\n }\n }\n\n /**\n * toggle fullscreen\n */\n toggle() {\n this.$editor.toggleClass('fullscreen');\n if (this.isFullscreen()) {\n this.$editable.data('orgHeight', this.$editable.css('height'));\n this.$editable.data('orgMaxHeight', this.$editable.css('maxHeight'));\n this.$editable.css('maxHeight', '');\n this.$window.on('resize', this.onResize).trigger('resize');\n this.$scrollbar.css('overflow', 'hidden');\n } else {\n this.$window.off('resize', this.onResize);\n this.resizeTo({ h: this.$editable.data('orgHeight') });\n this.$editable.css('maxHeight', this.$editable.css('orgMaxHeight'));\n this.$scrollbar.css('overflow', 'visible');\n }\n\n this.context.invoke('toolbar.updateFullscreen', this.isFullscreen());\n }\n\n isFullscreen() {\n return this.$editor.hasClass('fullscreen');\n }\n}\n","import $ from 'jquery';\nimport dom from '../core/dom';\n\nexport default class Handle {\n constructor(context) {\n this.context = context;\n this.$document = $(document);\n this.$editingArea = context.layoutInfo.editingArea;\n this.options = context.options;\n this.lang = this.options.langInfo;\n\n this.events = {\n 'summernote.mousedown': (we, e) => {\n if (this.update(e.target, e)) {\n e.preventDefault();\n }\n },\n 'summernote.keyup summernote.scroll summernote.change summernote.dialog.shown': () => {\n this.update();\n },\n 'summernote.disable summernote.blur': () => {\n this.hide();\n },\n 'summernote.codeview.toggled': () => {\n this.update();\n },\n };\n }\n\n initialize() {\n this.$handle = $([\n '

',\n '

',\n (this.options.disableResizeImage ? '' : '

'),\n '

',\n '

',\n ].join('')).prependTo(this.$editingArea);\n\n this.$handle.on('mousedown', (event) => {\n if (dom.isControlSizing(event.target)) {\n event.preventDefault();\n event.stopPropagation();\n\n const $target = this.$handle.find('.note-control-selection').data('target');\n const posStart = $target.offset();\n const scrollTop = this.$document.scrollTop();\n\n const onMouseMove = (event) => {\n this.context.invoke('editor.resizeTo', {\n x: event.clientX - posStart.left,\n y: event.clientY - (posStart.top - scrollTop),\n }, $target, !event.shiftKey);\n\n this.update($target[0], event);\n };\n\n this.$document\n .on('mousemove', onMouseMove)\n .one('mouseup', (e) => {\n e.preventDefault();\n this.$document.off('mousemove', onMouseMove);\n this.context.invoke('editor.afterCommand');\n });\n\n if (!$target.data('ratio')) { // original ratio.\n $target.data('ratio', $target.height() / $target.width());\n }\n }\n });\n\n // Listen for scrolling on the handle overlay.\n this.$handle.on('wheel', (e) => {\n e.preventDefault();\n this.update();\n });\n }\n\n destroy() {\n this.$handle.remove();\n }\n\n update(target, event) {\n if (this.context.isDisabled()) {\n return false;\n }\n\n const isImage = dom.isImg(target);\n const $selection = this.$handle.find('.note-control-selection');\n\n this.context.invoke('imagePopover.update', target, event);\n\n if (isImage) {\n const $image = $(target);\n const position = $image.position();\n const pos = {\n left: position.left + parseInt($image.css('marginLeft'), 10),\n top: position.top + parseInt($image.css('marginTop'), 10),\n };\n\n // exclude margin\n const imageSize = {\n w: $image.outerWidth(false),\n h: $image.outerHeight(false),\n };\n\n $selection.css({\n display: 'block',\n left: pos.left,\n top: pos.top,\n width: imageSize.w,\n height: imageSize.h,\n }).data('target', $image); // save current image element.\n\n const origImageObj = new Image();\n origImageObj.src = $image.attr('src');\n\n const sizingText = imageSize.w + 'x' + imageSize.h + ' (' + this.lang.image.original + ': ' + origImageObj.width + 'x' + origImageObj.height + ')';\n $selection.find('.note-control-selection-info').text(sizingText);\n this.context.invoke('editor.saveTarget', target);\n } else {\n this.hide();\n }\n\n return isImage;\n }\n\n /**\n * hide\n *\n * @param {jQuery} $handle\n */\n hide() {\n this.context.invoke('editor.clearTarget');\n this.$handle.children().hide();\n }\n}\n","import $ from 'jquery';\nimport lists from '../core/lists';\nimport key from '../core/key';\n\nconst defaultScheme = 'http://';\nconst linkPattern = /^([A-Za-z][A-Za-z0-9+-.]*\\:[\\/]{2}|tel:|mailto:[A-Z0-9._%+-]+@)?(www\\.)?(.+)$/i;\n\nexport default class AutoLink {\n constructor(context) {\n this.context = context;\n this.events = {\n 'summernote.keyup': (we, e) => {\n if (!e.isDefaultPrevented()) {\n this.handleKeyup(e);\n }\n },\n 'summernote.keydown': (we, e) => {\n this.handleKeydown(e);\n },\n };\n }\n\n initialize() {\n this.lastWordRange = null;\n }\n\n destroy() {\n this.lastWordRange = null;\n }\n\n replace() {\n if (!this.lastWordRange) {\n return;\n }\n\n const keyword = this.lastWordRange.toString();\n const match = keyword.match(linkPattern);\n\n if (match && (match[1] || match[2])) {\n const link = match[1] ? keyword : defaultScheme + keyword;\n const urlText = keyword.replace(/^(?:https?:\\/\\/)?(?:tel?:?)?(?:mailto?:?)?(?:www\\.)?/i, '').split('/')[0];\n const node = $('').html(urlText).attr('href', link)[0];\n if (this.context.options.linkTargetBlank) {\n $(node).attr('target', '_blank');\n }\n\n this.lastWordRange.insertNode(node);\n this.lastWordRange = null;\n this.context.invoke('editor.focus');\n }\n }\n\n handleKeydown(e) {\n if (lists.contains([key.code.ENTER, key.code.SPACE], e.keyCode)) {\n const wordRange = this.context.invoke('editor.createRange').getWordRange();\n this.lastWordRange = wordRange;\n }\n }\n\n handleKeyup(e) {\n if (lists.contains([key.code.ENTER, key.code.SPACE], e.keyCode)) {\n this.replace();\n }\n }\n}\n","import dom from '../core/dom';\n\n/**\n * textarea auto sync.\n */\nexport default class AutoSync {\n constructor(context) {\n this.$note = context.layoutInfo.note;\n this.events = {\n 'summernote.change': () => {\n this.$note.val(context.invoke('code'));\n },\n };\n }\n\n shouldInitialize() {\n return dom.isTextarea(this.$note[0]);\n }\n}\n","import lists from '../core/lists';\nimport dom from '../core/dom';\nimport key from '../core/key';\n\nexport default class AutoReplace {\n constructor(context) {\n this.context = context;\n this.options = context.options.replace || {};\n\n this.keys = [key.code.ENTER, key.code.SPACE, key.code.PERIOD, key.code.COMMA, key.code.SEMICOLON, key.code.SLASH];\n this.previousKeydownCode = null;\n\n this.events = {\n 'summernote.keyup': (we, e) => {\n if (!e.isDefaultPrevented()) {\n this.handleKeyup(e);\n }\n },\n 'summernote.keydown': (we, e) => {\n this.handleKeydown(e);\n },\n };\n }\n\n shouldInitialize() {\n return !!this.options.match;\n }\n\n initialize() {\n this.lastWord = null;\n }\n\n destroy() {\n this.lastWord = null;\n }\n\n replace() {\n if (!this.lastWord) {\n return;\n }\n\n const self = this;\n const keyword = this.lastWord.toString();\n this.options.match(keyword, function(match) {\n if (match) {\n let node = '';\n\n if (typeof match === 'string') {\n node = dom.createText(match);\n } else if (match instanceof jQuery) {\n node = match[0];\n } else if (match instanceof Node) {\n node = match;\n }\n\n if (!node) return;\n self.lastWord.insertNode(node);\n self.lastWord = null;\n self.context.invoke('editor.focus');\n }\n });\n }\n\n handleKeydown(e) {\n // this forces it to remember the last whole word, even if multiple termination keys are pressed\n // before the previous key is let go.\n if (this.previousKeydownCode && lists.contains(this.keys, this.previousKeydownCode)) {\n this.previousKeydownCode = e.keyCode;\n return;\n }\n\n if (lists.contains(this.keys, e.keyCode)) {\n const wordRange = this.context.invoke('editor.createRange').getWordRange();\n this.lastWord = wordRange;\n }\n this.previousKeydownCode = e.keyCode;\n }\n\n handleKeyup(e) {\n if (lists.contains(this.keys, e.keyCode)) {\n this.replace();\n }\n }\n}\n","import $ from 'jquery';\nexport default class Placeholder {\n constructor(context) {\n this.context = context;\n\n this.$editingArea = context.layoutInfo.editingArea;\n this.options = context.options;\n\n if (this.options.inheritPlaceholder === true) {\n // get placeholder value from the original element\n this.options.placeholder = this.context.$note.attr('placeholder') || this.options.placeholder;\n }\n\n this.events = {\n 'summernote.init summernote.change': () => {\n this.update();\n },\n 'summernote.codeview.toggled': () => {\n this.update();\n },\n };\n }\n\n shouldInitialize() {\n return !!this.options.placeholder;\n }\n\n initialize() {\n this.$placeholder = $('

');\n this.$placeholder.on('click', () => {\n this.context.invoke('focus');\n }).html(this.options.placeholder).prependTo(this.$editingArea);\n\n this.update();\n }\n\n destroy() {\n this.$placeholder.remove();\n }\n\n update() {\n const isShow = !this.context.invoke('codeview.isActivated') && this.context.invoke('editor.isEmpty');\n this.$placeholder.toggle(isShow);\n }\n}\n","import $ from 'jquery';\nimport func from '../core/func';\nimport lists from '../core/lists';\nimport env from '../core/env';\n\nexport default class Buttons {\n constructor(context) {\n this.ui = $.summernote.ui;\n this.context = context;\n this.$toolbar = context.layoutInfo.toolbar;\n this.options = context.options;\n this.lang = this.options.langInfo;\n this.invertedKeyMap = func.invertObject(\n this.options.keyMap[env.isMac ? 'mac' : 'pc']\n );\n }\n\n representShortcut(editorMethod) {\n let shortcut = this.invertedKeyMap[editorMethod];\n if (!this.options.shortcuts || !shortcut) {\n return '';\n }\n\n if (env.isMac) {\n shortcut = shortcut.replace('CMD', '⌘').replace('SHIFT', '⇧');\n }\n\n shortcut = shortcut.replace('BACKSLASH', '\\\\')\n .replace('SLASH', '/')\n .replace('LEFTBRACKET', '[')\n .replace('RIGHTBRACKET', ']');\n\n return ' (' + shortcut + ')';\n }\n\n button(o) {\n if (!this.options.tooltip && o.tooltip) {\n delete o.tooltip;\n }\n o.container = this.options.container;\n return this.ui.button(o);\n }\n\n initialize() {\n this.addToolbarButtons();\n this.addImagePopoverButtons();\n this.addLinkPopoverButtons();\n this.addTablePopoverButtons();\n this.fontInstalledMap = {};\n }\n\n destroy() {\n delete this.fontInstalledMap;\n }\n\n isFontInstalled(name) {\n if (!Object.prototype.hasOwnProperty.call(this.fontInstalledMap, name)) {\n this.fontInstalledMap[name] = env.isFontInstalled(name) ||\n lists.contains(this.options.fontNamesIgnoreCheck, name);\n }\n return this.fontInstalledMap[name];\n }\n\n isFontDeservedToAdd(name) {\n name = name.toLowerCase();\n return (name !== '' && this.isFontInstalled(name) && env.genericFontFamilies.indexOf(name) === -1);\n }\n\n colorPalette(className, tooltip, backColor, foreColor) {\n return this.ui.buttonGroup({\n className: 'note-color ' + className,\n children: [\n this.button({\n className: 'note-current-color-button',\n contents: this.ui.icon(this.options.icons.font + ' note-recent-color'),\n tooltip: tooltip,\n click: (e) => {\n const $button = $(e.currentTarget);\n if (backColor && foreColor) {\n this.context.invoke('editor.color', {\n backColor: $button.attr('data-backColor'),\n foreColor: $button.attr('data-foreColor'),\n });\n } else if (backColor) {\n this.context.invoke('editor.color', {\n backColor: $button.attr('data-backColor'),\n });\n } else if (foreColor) {\n this.context.invoke('editor.color', {\n foreColor: $button.attr('data-foreColor'),\n });\n }\n },\n callback: ($button) => {\n const $recentColor = $button.find('.note-recent-color');\n if (backColor) {\n $recentColor.css('background-color', this.options.colorButton.backColor);\n $button.attr('data-backColor', this.options.colorButton.backColor);\n }\n if (foreColor) {\n $recentColor.css('color', this.options.colorButton.foreColor);\n $button.attr('data-foreColor', this.options.colorButton.foreColor);\n } else {\n $recentColor.css('color', 'transparent');\n }\n },\n }),\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents('', this.options),\n tooltip: this.lang.color.more,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdown({\n items: (backColor ? [\n '

',\n '

' + this.lang.color.background + '

',\n '

',\n '',\n '