]\n const ancestors = listAncestor(point.node, func.eq(root));\n\n if (!ancestors.length) {\n return null;\n } else if (ancestors.length === 1) {\n return splitNode(point, options);\n }\n\n return ancestors.reduce(function(node, parent) {\n if (node === point.node) {\n node = splitNode(point, options);\n }\n\n return splitNode({\n node: parent,\n offset: node ? position(node) : nodeLength(parent),\n }, options);\n });\n}\n\n/**\n * split point\n *\n * @param {Point} point\n * @param {Boolean} isInline\n * @return {Object}\n */\nfunction splitPoint(point, isInline) {\n // find splitRoot, container\n // - inline: splitRoot is a child of paragraph\n // - block: splitRoot is a child of bodyContainer\n const pred = isInline ? isPara : isBodyContainer;\n const ancestors = listAncestor(point.node, pred);\n const topAncestor = lists.last(ancestors) || point.node;\n\n let splitRoot, container;\n if (pred(topAncestor)) {\n splitRoot = ancestors[ancestors.length - 2];\n container = topAncestor;\n } else {\n splitRoot = topAncestor;\n container = splitRoot.parentNode;\n }\n\n // if splitRoot is exists, split with splitTree\n let pivot = splitRoot && splitTree(splitRoot, point, {\n isSkipPaddingBlankHTML: isInline,\n isNotSplitEdgePoint: isInline,\n });\n\n // if container is point.node, find pivot with point.offset\n if (!pivot && container === point.node) {\n pivot = point.node.childNodes[point.offset];\n }\n\n return {\n rightNode: pivot,\n container: container,\n };\n}\n\nfunction create(nodeName) {\n return document.createElement(nodeName);\n}\n\nfunction createText(text) {\n return document.createTextNode(text);\n}\n\n/**\n * @method remove\n *\n * remove node, (isRemoveChild: remove child or not)\n *\n * @param {Node} node\n * @param {Boolean} isRemoveChild\n */\nfunction remove(node, isRemoveChild) {\n if (!node || !node.parentNode) { return; }\n if (node.removeNode) { return node.removeNode(isRemoveChild); }\n\n const parent = node.parentNode;\n if (!isRemoveChild) {\n const nodes = [];\n for (let i = 0, len = node.childNodes.length; i < len; i++) {\n nodes.push(node.childNodes[i]);\n }\n\n for (let i = 0, len = nodes.length; i < len; i++) {\n parent.insertBefore(nodes[i], node);\n }\n }\n\n parent.removeChild(node);\n}\n\n/**\n * @method removeWhile\n *\n * @param {Node} node\n * @param {Function} pred\n */\nfunction removeWhile(node, pred) {\n while (node) {\n if (isEditable(node) || !pred(node)) {\n break;\n }\n\n const parent = node.parentNode;\n remove(node);\n node = parent;\n }\n}\n\n/**\n * @method replace\n *\n * replace node with provided nodeName\n *\n * @param {Node} node\n * @param {String} nodeName\n * @return {Node} - new node\n */\nfunction replace(node, nodeName) {\n if (node.nodeName.toUpperCase() === nodeName.toUpperCase()) {\n return node;\n }\n\n const newNode = create(nodeName);\n\n if (node.style.cssText) {\n newNode.style.cssText = node.style.cssText;\n }\n\n appendChildNodes(newNode, lists.from(node.childNodes));\n insertAfter(newNode, node);\n remove(node);\n\n return newNode;\n}\n\nconst isTextarea = makePredByNodeName('TEXTAREA');\n\n/**\n * @param {jQuery} $node\n * @param {Boolean} [stripLinebreaks] - default: false\n */\nfunction value($node, stripLinebreaks) {\n const val = isTextarea($node[0]) ? $node.val() : $node.html();\n if (stripLinebreaks) {\n return val.replace(/[\\n\\r]/g, '');\n }\n return val;\n}\n\n/**\n * @method html\n *\n * get the HTML contents of node\n *\n * @param {jQuery} $node\n * @param {Boolean} [isNewlineOnBlock]\n */\nfunction html($node, isNewlineOnBlock) {\n let markup = value($node);\n\n if (isNewlineOnBlock) {\n const regexTag = /<(\\/?)(\\b(?!!)[^>\\s]*)(.*?)(\\s*\\/?>)/g;\n markup = markup.replace(regexTag, function(match, endSlash, name) {\n name = name.toUpperCase();\n const isEndOfInlineContainer = /^DIV|^TD|^TH|^P|^LI|^H[1-7]/.test(name) &&\n !!endSlash;\n const isBlockNode = /^BLOCKQUOTE|^TABLE|^TBODY|^TR|^HR|^UL|^OL/.test(name);\n\n return match + ((isEndOfInlineContainer || isBlockNode) ? '\\n' : '');\n });\n markup = markup.trim();\n }\n\n return markup;\n}\n\nfunction posFromPlaceholder(placeholder) {\n const $placeholder = $(placeholder);\n const pos = $placeholder.offset();\n const height = $placeholder.outerHeight(true); // include margin\n\n return {\n left: pos.left,\n top: pos.top + height,\n };\n}\n\nfunction attachEvents($node, events) {\n Object.keys(events).forEach(function(key) {\n $node.on(key, events[key]);\n });\n}\n\nfunction detachEvents($node, events) {\n Object.keys(events).forEach(function(key) {\n $node.off(key, events[key]);\n });\n}\n\n/**\n * @method isCustomStyleTag\n *\n * assert if a node contains a \"note-styletag\" class,\n * which implies that's a custom-made style tag node\n *\n * @param {Node} an HTML DOM node\n */\nfunction isCustomStyleTag(node) {\n return node && !isText(node) && lists.contains(node.classList, 'note-styletag');\n}\n\nexport default {\n /** @property {String} NBSP_CHAR */\n NBSP_CHAR,\n /** @property {String} ZERO_WIDTH_NBSP_CHAR */\n ZERO_WIDTH_NBSP_CHAR,\n /** @property {String} blank */\n blank: blankHTML,\n /** @property {String} emptyPara */\n emptyPara: `
${blankHTML}
`,\n makePredByNodeName,\n isEditable,\n isControlSizing,\n isText,\n isElement,\n isVoid,\n isPara,\n isPurePara,\n isHeading,\n isInline,\n isBlock: func.not(isInline),\n isBodyInline,\n isBody,\n isParaInline,\n isPre,\n isList,\n isTable,\n isData,\n isCell,\n isBlockquote,\n isBodyContainer,\n isAnchor,\n isDiv: makePredByNodeName('DIV'),\n isLi,\n isBR: makePredByNodeName('BR'),\n isSpan: makePredByNodeName('SPAN'),\n isB: makePredByNodeName('B'),\n isU: makePredByNodeName('U'),\n isS: makePredByNodeName('S'),\n isI: makePredByNodeName('I'),\n isImg: makePredByNodeName('IMG'),\n isTextarea,\n deepestChildIsEmpty,\n isEmpty,\n isEmptyAnchor: func.and(isAnchor, isEmpty),\n isClosestSibling,\n withClosestSiblings,\n nodeLength,\n isLeftEdgePoint,\n isRightEdgePoint,\n isEdgePoint,\n isLeftEdgeOf,\n isRightEdgeOf,\n isLeftEdgePointOf,\n isRightEdgePointOf,\n prevPoint,\n nextPoint,\n isSamePoint,\n isVisiblePoint,\n prevPointUntil,\n nextPointUntil,\n isCharPoint,\n isSpacePoint,\n walkPoint,\n ancestor,\n singleChildAncestor,\n listAncestor,\n lastAncestor,\n listNext,\n listPrev,\n listDescendant,\n commonAncestor,\n wrap,\n insertAfter,\n appendChildNodes,\n position,\n hasChildren,\n makeOffsetPath,\n fromOffsetPath,\n splitTree,\n splitPoint,\n create,\n createText,\n remove,\n removeWhile,\n replace,\n html,\n value,\n posFromPlaceholder,\n attachEvents,\n detachEvents,\n isCustomStyleTag,\n};\n","import $ from 'jquery';\nimport func from './core/func';\nimport lists from './core/lists';\nimport dom from './core/dom';\n\nexport default class Context {\n /**\n * @param {jQuery} $note\n * @param {Object} options\n */\n constructor($note, options) {\n this.$note = $note;\n\n this.memos = {};\n this.modules = {};\n this.layoutInfo = {};\n this.options = $.extend(true, {}, options);\n\n // init ui with options\n $.summernote.ui = $.summernote.ui_template(this.options);\n this.ui = $.summernote.ui;\n\n this.initialize();\n }\n\n /**\n * create layout and initialize modules and other resources\n */\n initialize() {\n this.layoutInfo = this.ui.createLayout(this.$note);\n this._initialize();\n this.$note.hide();\n return this;\n }\n\n /**\n * destroy modules and other resources and remove layout\n */\n destroy() {\n this._destroy();\n this.$note.removeData('summernote');\n this.ui.removeLayout(this.$note, this.layoutInfo);\n }\n\n /**\n * destory modules and other resources and initialize it again\n */\n reset() {\n const disabled = this.isDisabled();\n this.code(dom.emptyPara);\n this._destroy();\n this._initialize();\n\n if (disabled) {\n this.disable();\n }\n }\n\n _initialize() {\n // set own id\n this.options.id = func.uniqueId($.now());\n // set default container for tooltips, popovers, and dialogs\n this.options.container = this.options.container || this.layoutInfo.editor;\n\n // add optional buttons\n const buttons = $.extend({}, this.options.buttons);\n Object.keys(buttons).forEach((key) => {\n this.memo('button.' + key, buttons[key]);\n });\n\n const modules = $.extend({}, this.options.modules, $.summernote.plugins || {});\n\n // add and initialize modules\n Object.keys(modules).forEach((key) => {\n this.module(key, modules[key], true);\n });\n\n Object.keys(this.modules).forEach((key) => {\n this.initializeModule(key);\n });\n }\n\n _destroy() {\n // destroy modules with reversed order\n Object.keys(this.modules).reverse().forEach((key) => {\n this.removeModule(key);\n });\n\n Object.keys(this.memos).forEach((key) => {\n this.removeMemo(key);\n });\n // trigger custom onDestroy callback\n this.triggerEvent('destroy', this);\n }\n\n code(html) {\n const isActivated = this.invoke('codeview.isActivated');\n\n if (html === undefined) {\n this.invoke('codeview.sync');\n return isActivated ? this.layoutInfo.codable.val() : this.layoutInfo.editable.html();\n } else {\n if (isActivated) {\n this.layoutInfo.codable.val(html);\n } else {\n this.layoutInfo.editable.html(html);\n }\n this.$note.val(html);\n this.triggerEvent('change', html, this.layoutInfo.editable);\n }\n }\n\n isDisabled() {\n return this.layoutInfo.editable.attr('contenteditable') === 'false';\n }\n\n enable() {\n this.layoutInfo.editable.attr('contenteditable', true);\n this.invoke('toolbar.activate', true);\n this.triggerEvent('disable', false);\n this.options.editing = true;\n }\n\n disable() {\n // close codeview if codeview is opend\n if (this.invoke('codeview.isActivated')) {\n this.invoke('codeview.deactivate');\n }\n this.layoutInfo.editable.attr('contenteditable', false);\n this.options.editing = false;\n this.invoke('toolbar.deactivate', true);\n\n this.triggerEvent('disable', true);\n }\n\n triggerEvent() {\n const namespace = lists.head(arguments);\n const args = lists.tail(lists.from(arguments));\n\n const callback = this.options.callbacks[func.namespaceToCamel(namespace, 'on')];\n if (callback) {\n callback.apply(this.$note[0], args);\n }\n this.$note.trigger('summernote.' + namespace, args);\n }\n\n initializeModule(key) {\n const module = this.modules[key];\n module.shouldInitialize = module.shouldInitialize || func.ok;\n if (!module.shouldInitialize()) {\n return;\n }\n\n // initialize module\n if (module.initialize) {\n module.initialize();\n }\n\n // attach events\n if (module.events) {\n dom.attachEvents(this.$note, module.events);\n }\n }\n\n module(key, ModuleClass, withoutIntialize) {\n if (arguments.length === 1) {\n return this.modules[key];\n }\n\n this.modules[key] = new ModuleClass(this);\n\n if (!withoutIntialize) {\n this.initializeModule(key);\n }\n }\n\n removeModule(key) {\n const module = this.modules[key];\n if (module.shouldInitialize()) {\n if (module.events) {\n dom.detachEvents(this.$note, module.events);\n }\n\n if (module.destroy) {\n module.destroy();\n }\n }\n\n delete this.modules[key];\n }\n\n memo(key, obj) {\n if (arguments.length === 1) {\n return this.memos[key];\n }\n this.memos[key] = obj;\n }\n\n removeMemo(key) {\n if (this.memos[key] && this.memos[key].destroy) {\n this.memos[key].destroy();\n }\n\n delete this.memos[key];\n }\n\n /**\n * Some buttons need to change their visual style immediately once they get pressed\n */\n createInvokeHandlerAndUpdateState(namespace, value) {\n return (event) => {\n this.createInvokeHandler(namespace, value)(event);\n this.invoke('buttons.updateCurrentStyle');\n };\n }\n\n createInvokeHandler(namespace, value) {\n return (event) => {\n event.preventDefault();\n const $target = $(event.target);\n this.invoke(namespace, value || $target.closest('[data-value]').data('value'), $target);\n };\n }\n\n invoke() {\n const namespace = lists.head(arguments);\n const args = lists.tail(lists.from(arguments));\n\n const splits = namespace.split('.');\n const hasSeparator = splits.length > 1;\n const moduleName = hasSeparator && lists.head(splits);\n const methodName = hasSeparator ? lists.last(splits) : lists.head(splits);\n\n const module = this.modules[moduleName || 'editor'];\n if (!moduleName && this[methodName]) {\n return this[methodName].apply(this, args);\n } else if (module && module[methodName] && module.shouldInitialize()) {\n return module[methodName].apply(module, args);\n }\n }\n}\n","import $ from 'jquery';\nimport env from './env';\nimport func from './func';\nimport lists from './lists';\nimport dom from './dom';\n\n/**\n * return boundaryPoint from TextRange, inspired by Andy Na's HuskyRange.js\n *\n * @param {TextRange} textRange\n * @param {Boolean} isStart\n * @return {BoundaryPoint}\n *\n * @see http://msdn.microsoft.com/en-us/library/ie/ms535872(v=vs.85).aspx\n */\nfunction textRangeToPoint(textRange, isStart) {\n let container = textRange.parentElement();\n let offset;\n\n const tester = document.body.createTextRange();\n let prevContainer;\n const childNodes = lists.from(container.childNodes);\n for (offset = 0; offset < childNodes.length; offset++) {\n if (dom.isText(childNodes[offset])) {\n continue;\n }\n tester.moveToElementText(childNodes[offset]);\n if (tester.compareEndPoints('StartToStart', textRange) >= 0) {\n break;\n }\n prevContainer = childNodes[offset];\n }\n\n if (offset !== 0 && dom.isText(childNodes[offset - 1])) {\n const textRangeStart = document.body.createTextRange();\n let curTextNode = null;\n textRangeStart.moveToElementText(prevContainer || container);\n textRangeStart.collapse(!prevContainer);\n curTextNode = prevContainer ? prevContainer.nextSibling : container.firstChild;\n\n const pointTester = textRange.duplicate();\n pointTester.setEndPoint('StartToStart', textRangeStart);\n let textCount = pointTester.text.replace(/[\\r\\n]/g, '').length;\n\n while (textCount > curTextNode.nodeValue.length && curTextNode.nextSibling) {\n textCount -= curTextNode.nodeValue.length;\n curTextNode = curTextNode.nextSibling;\n }\n\n // [workaround] enforce IE to re-reference curTextNode, hack\n const dummy = curTextNode.nodeValue; // eslint-disable-line\n\n if (isStart && curTextNode.nextSibling && dom.isText(curTextNode.nextSibling) &&\n textCount === curTextNode.nodeValue.length) {\n textCount -= curTextNode.nodeValue.length;\n curTextNode = curTextNode.nextSibling;\n }\n\n container = curTextNode;\n offset = textCount;\n }\n\n return {\n cont: container,\n offset: offset,\n };\n}\n\n/**\n * return TextRange from boundary point (inspired by google closure-library)\n * @param {BoundaryPoint} point\n * @return {TextRange}\n */\nfunction pointToTextRange(point) {\n const textRangeInfo = function(container, offset) {\n let node, isCollapseToStart;\n\n if (dom.isText(container)) {\n const prevTextNodes = dom.listPrev(container, func.not(dom.isText));\n const prevContainer = lists.last(prevTextNodes).previousSibling;\n node = prevContainer || container.parentNode;\n offset += lists.sum(lists.tail(prevTextNodes), dom.nodeLength);\n isCollapseToStart = !prevContainer;\n } else {\n node = container.childNodes[offset] || container;\n if (dom.isText(node)) {\n return textRangeInfo(node, 0);\n }\n\n offset = 0;\n isCollapseToStart = false;\n }\n\n return {\n node: node,\n collapseToStart: isCollapseToStart,\n offset: offset,\n };\n };\n\n const textRange = document.body.createTextRange();\n const info = textRangeInfo(point.node, point.offset);\n\n textRange.moveToElementText(info.node);\n textRange.collapse(info.collapseToStart);\n textRange.moveStart('character', info.offset);\n return textRange;\n}\n\n/**\n * Wrapped Range\n *\n * @constructor\n * @param {Node} sc - start container\n * @param {Number} so - start offset\n * @param {Node} ec - end container\n * @param {Number} eo - end offset\n */\nclass WrappedRange {\n constructor(sc, so, ec, eo) {\n this.sc = sc;\n this.so = so;\n this.ec = ec;\n this.eo = eo;\n\n // isOnEditable: judge whether range is on editable or not\n this.isOnEditable = this.makeIsOn(dom.isEditable);\n // isOnList: judge whether range is on list node or not\n this.isOnList = this.makeIsOn(dom.isList);\n // isOnAnchor: judge whether range is on anchor node or not\n this.isOnAnchor = this.makeIsOn(dom.isAnchor);\n // isOnCell: judge whether range is on cell node or not\n this.isOnCell = this.makeIsOn(dom.isCell);\n // isOnData: judge whether range is on data node or not\n this.isOnData = this.makeIsOn(dom.isData);\n }\n\n // nativeRange: get nativeRange from sc, so, ec, eo\n nativeRange() {\n if (env.isW3CRangeSupport) {\n const w3cRange = document.createRange();\n w3cRange.setStart(this.sc, this.sc.data && this.so > this.sc.data.length ? 0 : this.so);\n w3cRange.setEnd(this.ec, this.sc.data ? Math.min(this.eo, this.sc.data.length) : this.eo);\n\n return w3cRange;\n } else {\n const textRange = pointToTextRange({\n node: this.sc,\n offset: this.so,\n });\n\n textRange.setEndPoint('EndToEnd', pointToTextRange({\n node: this.ec,\n offset: this.eo,\n }));\n\n return textRange;\n }\n }\n\n getPoints() {\n return {\n sc: this.sc,\n so: this.so,\n ec: this.ec,\n eo: this.eo,\n };\n }\n\n getStartPoint() {\n return {\n node: this.sc,\n offset: this.so,\n };\n }\n\n getEndPoint() {\n return {\n node: this.ec,\n offset: this.eo,\n };\n }\n\n /**\n * select update visible range\n */\n select() {\n const nativeRng = this.nativeRange();\n if (env.isW3CRangeSupport) {\n const selection = document.getSelection();\n if (selection.rangeCount > 0) {\n selection.removeAllRanges();\n }\n selection.addRange(nativeRng);\n } else {\n nativeRng.select();\n }\n\n return this;\n }\n\n /**\n * Moves the scrollbar to start container(sc) of current range\n *\n * @return {WrappedRange}\n */\n scrollIntoView(container) {\n const height = $(container).height();\n if (container.scrollTop + height < this.sc.offsetTop) {\n container.scrollTop += Math.abs(container.scrollTop + height - this.sc.offsetTop);\n }\n\n return this;\n }\n\n /**\n * @return {WrappedRange}\n */\n normalize() {\n /**\n * @param {BoundaryPoint} point\n * @param {Boolean} isLeftToRight - true: prefer to choose right node\n * - false: prefer to choose left node\n * @return {BoundaryPoint}\n */\n const getVisiblePoint = function(point, isLeftToRight) {\n if (!point) {\n return point;\n }\n\n // Just use the given point [XXX:Adhoc]\n // - case 01. if the point is on the middle of the node\n // - case 02. if the point is on the right edge and prefer to choose left node\n // - case 03. if the point is on the left edge and prefer to choose right node\n // - case 04. if the point is on the right edge and prefer to choose right node but the node is void\n // - case 05. if the point is on the left edge and prefer to choose left node but the node is void\n // - case 06. if the point is on the block node and there is no children\n if (dom.isVisiblePoint(point)) {\n if (!dom.isEdgePoint(point) ||\n (dom.isRightEdgePoint(point) && !isLeftToRight) ||\n (dom.isLeftEdgePoint(point) && isLeftToRight) ||\n (dom.isRightEdgePoint(point) && isLeftToRight && dom.isVoid(point.node.nextSibling)) ||\n (dom.isLeftEdgePoint(point) && !isLeftToRight && dom.isVoid(point.node.previousSibling)) ||\n (dom.isBlock(point.node) && dom.isEmpty(point.node))) {\n return point;\n }\n }\n\n // point on block's edge\n const block = dom.ancestor(point.node, dom.isBlock);\n let hasRightNode = false;\n\n if (!hasRightNode) {\n const prevPoint = dom.prevPoint(point) || { node: null };\n hasRightNode = (dom.isLeftEdgePointOf(point, block) || dom.isVoid(prevPoint.node)) && !isLeftToRight;\n }\n\n let hasLeftNode = false;\n if (!hasLeftNode) {\n const nextPoint = dom.nextPoint(point) || { node: null };\n hasLeftNode = (dom.isRightEdgePointOf(point, block) || dom.isVoid(nextPoint.node)) && isLeftToRight;\n }\n\n if (hasRightNode || hasLeftNode) {\n // returns point already on visible point\n if (dom.isVisiblePoint(point)) {\n return point;\n }\n // reverse direction\n isLeftToRight = !isLeftToRight;\n }\n\n const nextPoint = isLeftToRight ? dom.nextPointUntil(dom.nextPoint(point), dom.isVisiblePoint)\n : dom.prevPointUntil(dom.prevPoint(point), dom.isVisiblePoint);\n return nextPoint || point;\n };\n\n const endPoint = getVisiblePoint(this.getEndPoint(), false);\n const startPoint = this.isCollapsed() ? endPoint : getVisiblePoint(this.getStartPoint(), true);\n\n return new WrappedRange(\n startPoint.node,\n startPoint.offset,\n endPoint.node,\n endPoint.offset\n );\n }\n\n /**\n * returns matched nodes on range\n *\n * @param {Function} [pred] - predicate function\n * @param {Object} [options]\n * @param {Boolean} [options.includeAncestor]\n * @param {Boolean} [options.fullyContains]\n * @return {Node[]}\n */\n nodes(pred, options) {\n pred = pred || func.ok;\n\n const includeAncestor = options && options.includeAncestor;\n const fullyContains = options && options.fullyContains;\n\n // TODO compare points and sort\n const startPoint = this.getStartPoint();\n const endPoint = this.getEndPoint();\n\n const nodes = [];\n const leftEdgeNodes = [];\n\n dom.walkPoint(startPoint, endPoint, function(point) {\n if (dom.isEditable(point.node)) {\n return;\n }\n\n let node;\n if (fullyContains) {\n if (dom.isLeftEdgePoint(point)) {\n leftEdgeNodes.push(point.node);\n }\n if (dom.isRightEdgePoint(point) && lists.contains(leftEdgeNodes, point.node)) {\n node = point.node;\n }\n } else if (includeAncestor) {\n node = dom.ancestor(point.node, pred);\n } else {\n node = point.node;\n }\n\n if (node && pred(node)) {\n nodes.push(node);\n }\n }, true);\n\n return lists.unique(nodes);\n }\n\n /**\n * returns commonAncestor of range\n * @return {Element} - commonAncestor\n */\n commonAncestor() {\n return dom.commonAncestor(this.sc, this.ec);\n }\n\n /**\n * returns expanded range by pred\n *\n * @param {Function} pred - predicate function\n * @return {WrappedRange}\n */\n expand(pred) {\n const startAncestor = dom.ancestor(this.sc, pred);\n const endAncestor = dom.ancestor(this.ec, pred);\n\n if (!startAncestor && !endAncestor) {\n return new WrappedRange(this.sc, this.so, this.ec, this.eo);\n }\n\n const boundaryPoints = this.getPoints();\n\n if (startAncestor) {\n boundaryPoints.sc = startAncestor;\n boundaryPoints.so = 0;\n }\n\n if (endAncestor) {\n boundaryPoints.ec = endAncestor;\n boundaryPoints.eo = dom.nodeLength(endAncestor);\n }\n\n return new WrappedRange(\n boundaryPoints.sc,\n boundaryPoints.so,\n boundaryPoints.ec,\n boundaryPoints.eo\n );\n }\n\n /**\n * @param {Boolean} isCollapseToStart\n * @return {WrappedRange}\n */\n collapse(isCollapseToStart) {\n if (isCollapseToStart) {\n return new WrappedRange(this.sc, this.so, this.sc, this.so);\n } else {\n return new WrappedRange(this.ec, this.eo, this.ec, this.eo);\n }\n }\n\n /**\n * splitText on range\n */\n splitText() {\n const isSameContainer = this.sc === this.ec;\n const boundaryPoints = this.getPoints();\n\n if (dom.isText(this.ec) && !dom.isEdgePoint(this.getEndPoint())) {\n this.ec.splitText(this.eo);\n }\n\n if (dom.isText(this.sc) && !dom.isEdgePoint(this.getStartPoint())) {\n boundaryPoints.sc = this.sc.splitText(this.so);\n boundaryPoints.so = 0;\n\n if (isSameContainer) {\n boundaryPoints.ec = boundaryPoints.sc;\n boundaryPoints.eo = this.eo - this.so;\n }\n }\n\n return new WrappedRange(\n boundaryPoints.sc,\n boundaryPoints.so,\n boundaryPoints.ec,\n boundaryPoints.eo\n );\n }\n\n /**\n * delete contents on range\n * @return {WrappedRange}\n */\n deleteContents() {\n if (this.isCollapsed()) {\n return this;\n }\n\n const rng = this.splitText();\n const nodes = rng.nodes(null, {\n fullyContains: true,\n });\n\n // find new cursor point\n const point = dom.prevPointUntil(rng.getStartPoint(), function(point) {\n return !lists.contains(nodes, point.node);\n });\n\n const emptyParents = [];\n $.each(nodes, function(idx, node) {\n // find empty parents\n const parent = node.parentNode;\n if (point.node !== parent && dom.nodeLength(parent) === 1) {\n emptyParents.push(parent);\n }\n dom.remove(node, false);\n });\n\n // remove empty parents\n $.each(emptyParents, function(idx, node) {\n dom.remove(node, false);\n });\n\n return new WrappedRange(\n point.node,\n point.offset,\n point.node,\n point.offset\n ).normalize();\n }\n\n /**\n * makeIsOn: return isOn(pred) function\n */\n makeIsOn(pred) {\n return function() {\n const ancestor = dom.ancestor(this.sc, pred);\n return !!ancestor && (ancestor === dom.ancestor(this.ec, pred));\n };\n }\n\n /**\n * @param {Function} pred\n * @return {Boolean}\n */\n isLeftEdgeOf(pred) {\n if (!dom.isLeftEdgePoint(this.getStartPoint())) {\n return false;\n }\n\n const node = dom.ancestor(this.sc, pred);\n return node && dom.isLeftEdgeOf(this.sc, node);\n }\n\n /**\n * returns whether range was collapsed or not\n */\n isCollapsed() {\n return this.sc === this.ec && this.so === this.eo;\n }\n\n /**\n * wrap inline nodes which children of body with paragraph\n *\n * @return {WrappedRange}\n */\n wrapBodyInlineWithPara() {\n if (dom.isBodyContainer(this.sc) && dom.isEmpty(this.sc)) {\n this.sc.innerHTML = dom.emptyPara;\n return new WrappedRange(this.sc.firstChild, 0, this.sc.firstChild, 0);\n }\n\n /**\n * [workaround] firefox often create range on not visible point. so normalize here.\n * - firefox: |text
|\n * - chrome:|text|
\n */\n const rng = this.normalize();\n if (dom.isParaInline(this.sc) || dom.isPara(this.sc)) {\n return rng;\n }\n\n // find inline top ancestor\n let topAncestor;\n if (dom.isInline(rng.sc)) {\n const ancestors = dom.listAncestor(rng.sc, func.not(dom.isInline));\n topAncestor = lists.last(ancestors);\n if (!dom.isInline(topAncestor)) {\n topAncestor = ancestors[ancestors.length - 2] || rng.sc.childNodes[rng.so];\n }\n } else {\n topAncestor = rng.sc.childNodes[rng.so > 0 ? rng.so - 1 : 0];\n }\n\n if (topAncestor) {\n // siblings not in paragraph\n let inlineSiblings = dom.listPrev(topAncestor, dom.isParaInline).reverse();\n inlineSiblings = inlineSiblings.concat(dom.listNext(topAncestor.nextSibling, dom.isParaInline));\n\n // wrap with paragraph\n if (inlineSiblings.length) {\n const para = dom.wrap(lists.head(inlineSiblings), 'p');\n dom.appendChildNodes(para, lists.tail(inlineSiblings));\n }\n }\n\n return this.normalize();\n }\n\n /**\n * insert node at current cursor\n *\n * @param {Node} node\n * @return {Node}\n */\n insertNode(node) {\n let rng = this;\n\n if (dom.isText(node) || dom.isInline(node)) {\n rng = this.wrapBodyInlineWithPara().deleteContents();\n }\n\n const info = dom.splitPoint(rng.getStartPoint(), dom.isInline(node));\n if (info.rightNode) {\n info.rightNode.parentNode.insertBefore(node, info.rightNode);\n } else {\n info.container.appendChild(node);\n }\n\n return node;\n }\n\n /**\n * insert html at current cursor\n */\n pasteHTML(markup) {\n markup = $.trim(markup);\n\n const contentsContainer = $('').html(markup)[0];\n let childNodes = lists.from(contentsContainer.childNodes);\n\n // const rng = this.wrapBodyInlineWithPara().deleteContents();\n const rng = this;\n\n if (rng.so >= 0) {\n childNodes = childNodes.reverse();\n }\n childNodes = childNodes.map(function(childNode) {\n return rng.insertNode(childNode);\n });\n if (rng.so > 0) {\n childNodes = childNodes.reverse();\n }\n return childNodes;\n }\n\n /**\n * returns text in range\n *\n * @return {String}\n */\n toString() {\n const nativeRng = this.nativeRange();\n return env.isW3CRangeSupport ? nativeRng.toString() : nativeRng.text;\n }\n\n /**\n * returns range for word before cursor\n *\n * @param {Boolean} [findAfter] - find after cursor, default: false\n * @return {WrappedRange}\n */\n getWordRange(findAfter) {\n let endPoint = this.getEndPoint();\n\n if (!dom.isCharPoint(endPoint)) {\n return this;\n }\n\n const startPoint = dom.prevPointUntil(endPoint, function(point) {\n return !dom.isCharPoint(point);\n });\n\n if (findAfter) {\n endPoint = dom.nextPointUntil(endPoint, function(point) {\n return !dom.isCharPoint(point);\n });\n }\n\n return new WrappedRange(\n startPoint.node,\n startPoint.offset,\n endPoint.node,\n endPoint.offset\n );\n }\n\n /**\n * returns range for words before cursor\n *\n * @param {Boolean} [findAfter] - find after cursor, default: false\n * @return {WrappedRange}\n */\n getWordsRange(findAfter) {\n var endPoint = this.getEndPoint();\n\n var isNotTextPoint = function(point) {\n return !dom.isCharPoint(point) && !dom.isSpacePoint(point);\n };\n\n if (isNotTextPoint(endPoint)) {\n return this;\n }\n\n var startPoint = dom.prevPointUntil(endPoint, isNotTextPoint);\n\n if (findAfter) {\n endPoint = dom.nextPointUntil(endPoint, isNotTextPoint);\n }\n\n return new WrappedRange(\n startPoint.node,\n startPoint.offset,\n endPoint.node,\n endPoint.offset\n );\n }\n\n /**\n * returns range for words before cursor that match with a Regex\n *\n * example:\n * range: 'hi @Peter Pan'\n * regex: '/@[a-z ]+/i'\n * return range: '@Peter Pan'\n *\n * @param {RegExp} [regex]\n * @return {WrappedRange|null}\n */\n getWordsMatchRange(regex) {\n var endPoint = this.getEndPoint();\n\n var startPoint = dom.prevPointUntil(endPoint, function(point) {\n if (!dom.isCharPoint(point) && !dom.isSpacePoint(point)) {\n return true;\n }\n var rng = new WrappedRange(\n point.node,\n point.offset,\n endPoint.node,\n endPoint.offset\n );\n var result = regex.exec(rng.toString());\n return result && result.index === 0;\n });\n\n var rng = new WrappedRange(\n startPoint.node,\n startPoint.offset,\n endPoint.node,\n endPoint.offset\n );\n\n var text = rng.toString();\n var result = regex.exec(text);\n\n if (result && result[0].length === text.length) {\n return rng;\n } else {\n return null;\n }\n }\n\n /**\n * create offsetPath bookmark\n *\n * @param {Node} editable\n */\n bookmark(editable) {\n return {\n s: {\n path: dom.makeOffsetPath(editable, this.sc),\n offset: this.so,\n },\n e: {\n path: dom.makeOffsetPath(editable, this.ec),\n offset: this.eo,\n },\n };\n }\n\n /**\n * create offsetPath bookmark base on paragraph\n *\n * @param {Node[]} paras\n */\n paraBookmark(paras) {\n return {\n s: {\n path: lists.tail(dom.makeOffsetPath(lists.head(paras), this.sc)),\n offset: this.so,\n },\n e: {\n path: lists.tail(dom.makeOffsetPath(lists.last(paras), this.ec)),\n offset: this.eo,\n },\n };\n }\n\n /**\n * getClientRects\n * @return {Rect[]}\n */\n getClientRects() {\n const nativeRng = this.nativeRange();\n return nativeRng.getClientRects();\n }\n}\n\n/**\n * Data structure\n * * BoundaryPoint: a point of dom tree\n * * BoundaryPoints: two boundaryPoints corresponding to the start and the end of the Range\n *\n * See to http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Position\n */\nexport default {\n /**\n * create Range Object From arguments or Browser Selection\n *\n * @param {Node} sc - start container\n * @param {Number} so - start offset\n * @param {Node} ec - end container\n * @param {Number} eo - end offset\n * @return {WrappedRange}\n */\n create: function(sc, so, ec, eo) {\n if (arguments.length === 4) {\n return new WrappedRange(sc, so, ec, eo);\n } else if (arguments.length === 2) { // collapsed\n ec = sc;\n eo = so;\n return new WrappedRange(sc, so, ec, eo);\n } else {\n let wrappedRange = this.createFromSelection();\n\n if (!wrappedRange && arguments.length === 1) {\n let bodyElement = arguments[0];\n if (dom.isEditable(bodyElement)) {\n bodyElement = bodyElement.lastChild;\n }\n return this.createFromBodyElement(bodyElement, dom.emptyPara === arguments[0].innerHTML);\n }\n return wrappedRange;\n }\n },\n\n createFromBodyElement: function(bodyElement, isCollapseToStart = false) {\n var wrappedRange = this.createFromNode(bodyElement);\n return wrappedRange.collapse(isCollapseToStart);\n },\n\n createFromSelection: function() {\n let sc, so, ec, eo;\n if (env.isW3CRangeSupport) {\n const selection = document.getSelection();\n if (!selection || selection.rangeCount === 0) {\n return null;\n } else if (dom.isBody(selection.anchorNode)) {\n // Firefox: returns entire body as range on initialization.\n // We won't never need it.\n return null;\n }\n\n const nativeRng = selection.getRangeAt(0);\n sc = nativeRng.startContainer;\n so = nativeRng.startOffset;\n ec = nativeRng.endContainer;\n eo = nativeRng.endOffset;\n } else { // IE8: TextRange\n const textRange = document.selection.createRange();\n const textRangeEnd = textRange.duplicate();\n textRangeEnd.collapse(false);\n const textRangeStart = textRange;\n textRangeStart.collapse(true);\n\n let startPoint = textRangeToPoint(textRangeStart, true);\n let endPoint = textRangeToPoint(textRangeEnd, false);\n\n // same visible point case: range was collapsed.\n if (dom.isText(startPoint.node) && dom.isLeftEdgePoint(startPoint) &&\n dom.isTextNode(endPoint.node) && dom.isRightEdgePoint(endPoint) &&\n endPoint.node.nextSibling === startPoint.node) {\n startPoint = endPoint;\n }\n\n sc = startPoint.cont;\n so = startPoint.offset;\n ec = endPoint.cont;\n eo = endPoint.offset;\n }\n\n return new WrappedRange(sc, so, ec, eo);\n },\n\n /**\n * @method\n *\n * create WrappedRange from node\n *\n * @param {Node} node\n * @return {WrappedRange}\n */\n createFromNode: function(node) {\n let sc = node;\n let so = 0;\n let ec = node;\n let eo = dom.nodeLength(ec);\n\n // browsers can't target a picture or void node\n if (dom.isVoid(sc)) {\n so = dom.listPrev(sc).length - 1;\n sc = sc.parentNode;\n }\n if (dom.isBR(ec)) {\n eo = dom.listPrev(ec).length - 1;\n ec = ec.parentNode;\n } else if (dom.isVoid(ec)) {\n eo = dom.listPrev(ec).length;\n ec = ec.parentNode;\n }\n\n return this.create(sc, so, ec, eo);\n },\n\n /**\n * create WrappedRange from node after position\n *\n * @param {Node} node\n * @return {WrappedRange}\n */\n createFromNodeBefore: function(node) {\n return this.createFromNode(node).collapse(true);\n },\n\n /**\n * create WrappedRange from node after position\n *\n * @param {Node} node\n * @return {WrappedRange}\n */\n createFromNodeAfter: function(node) {\n return this.createFromNode(node).collapse();\n },\n\n /**\n * @method\n *\n * create WrappedRange from bookmark\n *\n * @param {Node} editable\n * @param {Object} bookmark\n * @return {WrappedRange}\n */\n createFromBookmark: function(editable, bookmark) {\n const sc = dom.fromOffsetPath(editable, bookmark.s.path);\n const so = bookmark.s.offset;\n const ec = dom.fromOffsetPath(editable, bookmark.e.path);\n const eo = bookmark.e.offset;\n return new WrappedRange(sc, so, ec, eo);\n },\n\n /**\n * @method\n *\n * create WrappedRange from paraBookmark\n *\n * @param {Object} bookmark\n * @param {Node[]} paras\n * @return {WrappedRange}\n */\n createFromParaBookmark: function(bookmark, paras) {\n const so = bookmark.s.offset;\n const eo = bookmark.e.offset;\n const sc = dom.fromOffsetPath(lists.head(paras), bookmark.s.path);\n const ec = dom.fromOffsetPath(lists.last(paras), bookmark.e.path);\n\n return new WrappedRange(sc, so, ec, eo);\n },\n};\n","import $ from 'jquery';\nimport env from './base/core/env';\nimport lists from './base/core/lists';\nimport Context from './base/Context';\n\n$.fn.extend({\n /**\n * Summernote API\n *\n * @param {Object|String}\n * @return {this}\n */\n summernote: function() {\n const type = $.type(lists.head(arguments));\n const isExternalAPICalled = type === 'string';\n const hasInitOptions = type === 'object';\n\n const options = $.extend({}, $.summernote.options, hasInitOptions ? lists.head(arguments) : {});\n\n // Update options\n options.langInfo = $.extend(true, {}, $.summernote.lang['en-US'], $.summernote.lang[options.lang]);\n options.icons = $.extend(true, {}, $.summernote.options.icons, options.icons);\n options.tooltip = options.tooltip === 'auto' ? !env.isSupportTouch : options.tooltip;\n\n this.each((idx, note) => {\n const $note = $(note);\n if (!$note.data('summernote')) {\n const context = new Context($note, options);\n $note.data('summernote', context);\n $note.data('summernote').triggerEvent('init', context.layoutInfo);\n }\n });\n\n const $note = this.first();\n if ($note.length) {\n const context = $note.data('summernote');\n if (isExternalAPICalled) {\n return context.invoke.apply(context, lists.from(arguments));\n } else if (options.focus) {\n context.invoke('editor.focus');\n }\n }\n\n return this;\n },\n});\n","import lists from './lists';\nimport func from './func';\n\nconst KEY_MAP = {\n 'BACKSPACE': 8,\n 'TAB': 9,\n 'ENTER': 13,\n 'SPACE': 32,\n 'DELETE': 46,\n\n // Arrow\n 'LEFT': 37,\n 'UP': 38,\n 'RIGHT': 39,\n 'DOWN': 40,\n\n // Number: 0-9\n 'NUM0': 48,\n 'NUM1': 49,\n 'NUM2': 50,\n 'NUM3': 51,\n 'NUM4': 52,\n 'NUM5': 53,\n 'NUM6': 54,\n 'NUM7': 55,\n 'NUM8': 56,\n\n // Alphabet: a-z\n 'B': 66,\n 'E': 69,\n 'I': 73,\n 'J': 74,\n 'K': 75,\n 'L': 76,\n 'R': 82,\n 'S': 83,\n 'U': 85,\n 'V': 86,\n 'Y': 89,\n 'Z': 90,\n\n 'SLASH': 191,\n 'LEFTBRACKET': 219,\n 'BACKSLASH': 220,\n 'RIGHTBRACKET': 221,\n\n // Navigation\n 'HOME': 36,\n 'END': 35,\n 'PAGEUP': 33,\n 'PAGEDOWN': 34,\n};\n\n/**\n * @class core.key\n *\n * Object for keycodes.\n *\n * @singleton\n * @alternateClassName key\n */\nexport default {\n /**\n * @method isEdit\n *\n * @param {Number} keyCode\n * @return {Boolean}\n */\n isEdit: (keyCode) => {\n return lists.contains([\n KEY_MAP.BACKSPACE,\n KEY_MAP.TAB,\n KEY_MAP.ENTER,\n KEY_MAP.SPACE,\n KEY_MAP.DELETE,\n ], keyCode);\n },\n /**\n * @method isMove\n *\n * @param {Number} keyCode\n * @return {Boolean}\n */\n isMove: (keyCode) => {\n return lists.contains([\n KEY_MAP.LEFT,\n KEY_MAP.UP,\n KEY_MAP.RIGHT,\n KEY_MAP.DOWN,\n ], keyCode);\n },\n /**\n * @method isNavigation\n *\n * @param {Number} keyCode\n * @return {Boolean}\n */\n isNavigation: (keyCode) => {\n return lists.contains([\n KEY_MAP.HOME,\n KEY_MAP.END,\n KEY_MAP.PAGEUP,\n KEY_MAP.PAGEDOWN,\n ], keyCode);\n },\n /**\n * @property {Object} nameFromCode\n * @property {String} nameFromCode.8 \"BACKSPACE\"\n */\n nameFromCode: func.invertObject(KEY_MAP),\n code: KEY_MAP,\n};\n","import range from '../core/range';\n\nexport default class History {\n constructor(context) {\n this.stack = [];\n this.stackOffset = -1;\n this.context = context;\n this.$editable = context.layoutInfo.editable;\n this.editable = this.$editable[0];\n }\n\n makeSnapshot() {\n const rng = range.create(this.editable);\n const emptyBookmark = { s: { path: [], offset: 0 }, e: { path: [], offset: 0 } };\n\n return {\n contents: this.$editable.html(),\n bookmark: ((rng && rng.isOnEditable()) ? rng.bookmark(this.editable) : emptyBookmark),\n };\n }\n\n applySnapshot(snapshot) {\n if (snapshot.contents !== null) {\n this.$editable.html(snapshot.contents);\n }\n if (snapshot.bookmark !== null) {\n range.createFromBookmark(this.editable, snapshot.bookmark).select();\n }\n }\n\n /**\n * @method rewind\n * Rewinds the history stack back to the first snapshot taken.\n * Leaves the stack intact, so that \"Redo\" can still be used.\n */\n rewind() {\n // Create snap shot if not yet recorded\n if (this.$editable.html() !== this.stack[this.stackOffset].contents) {\n this.recordUndo();\n }\n\n // Return to the first available snapshot.\n this.stackOffset = 0;\n\n // Apply that snapshot.\n this.applySnapshot(this.stack[this.stackOffset]);\n }\n\n /**\n * @method commit\n * Resets history stack, but keeps current editor's content.\n */\n commit() {\n // Clear the stack.\n this.stack = [];\n\n // Restore stackOffset to its original value.\n this.stackOffset = -1;\n\n // Record our first snapshot (of nothing).\n this.recordUndo();\n }\n\n /**\n * @method reset\n * Resets the history stack completely; reverting to an empty editor.\n */\n reset() {\n // Clear the stack.\n this.stack = [];\n\n // Restore stackOffset to its original value.\n this.stackOffset = -1;\n\n // Clear the editable area.\n this.$editable.html('');\n\n // Record our first snapshot (of nothing).\n this.recordUndo();\n }\n\n /**\n * undo\n */\n undo() {\n // Create snap shot if not yet recorded\n if (this.$editable.html() !== this.stack[this.stackOffset].contents) {\n this.recordUndo();\n }\n\n if (this.stackOffset > 0) {\n this.stackOffset--;\n this.applySnapshot(this.stack[this.stackOffset]);\n }\n }\n\n /**\n * redo\n */\n redo() {\n if (this.stack.length - 1 > this.stackOffset) {\n this.stackOffset++;\n this.applySnapshot(this.stack[this.stackOffset]);\n }\n }\n\n /**\n * recorded undo\n */\n recordUndo() {\n this.stackOffset++;\n\n // Wash out stack after stackOffset\n if (this.stack.length > this.stackOffset) {\n this.stack = this.stack.slice(0, this.stackOffset);\n }\n\n // Create new snapshot and push it to the end\n this.stack.push(this.makeSnapshot());\n\n // If the stack size reachs to the limit, then slice it\n if (this.stack.length > this.context.options.historyLimit) {\n this.stack.shift();\n this.stackOffset -= 1;\n }\n }\n}\n","import $ from 'jquery';\nimport env from '../core/env';\nimport func from '../core/func';\nimport lists from '../core/lists';\nimport dom from '../core/dom';\n\nexport default class Style {\n /**\n * @method jQueryCSS\n *\n * [workaround] for old jQuery\n * passing an array of style properties to .css()\n * will result in an object of property-value pairs.\n * (compability with version < 1.9)\n *\n * @private\n * @param {jQuery} $obj\n * @param {Array} propertyNames - An array of one or more CSS properties.\n * @return {Object}\n */\n jQueryCSS($obj, propertyNames) {\n if (env.jqueryVersion < 1.9) {\n const result = {};\n $.each(propertyNames, (idx, propertyName) => {\n result[propertyName] = $obj.css(propertyName);\n });\n return result;\n }\n return $obj.css(propertyNames);\n }\n\n /**\n * returns style object from node\n *\n * @param {jQuery} $node\n * @return {Object}\n */\n fromNode($node) {\n const properties = ['font-family', 'font-size', 'text-align', 'list-style-type', 'line-height'];\n const styleInfo = this.jQueryCSS($node, properties) || {};\n\n const fontSize = $node[0].style.fontSize || styleInfo['font-size'];\n\n styleInfo['font-size'] = parseInt(fontSize, 10);\n styleInfo['font-size-unit'] = fontSize.match(/[a-z%]+$/);\n\n return styleInfo;\n }\n\n /**\n * paragraph level style\n *\n * @param {WrappedRange} rng\n * @param {Object} styleInfo\n */\n stylePara(rng, styleInfo) {\n $.each(rng.nodes(dom.isPara, {\n includeAncestor: true,\n }), (idx, para) => {\n $(para).css(styleInfo);\n });\n }\n\n /**\n * insert and returns styleNodes on range.\n *\n * @param {WrappedRange} rng\n * @param {Object} [options] - options for styleNodes\n * @param {String} [options.nodeName] - default: `SPAN`\n * @param {Boolean} [options.expandClosestSibling] - default: `false`\n * @param {Boolean} [options.onlyPartialContains] - default: `false`\n * @return {Node[]}\n */\n styleNodes(rng, options) {\n rng = rng.splitText();\n\n const nodeName = (options && options.nodeName) || 'SPAN';\n const expandClosestSibling = !!(options && options.expandClosestSibling);\n const onlyPartialContains = !!(options && options.onlyPartialContains);\n\n if (rng.isCollapsed()) {\n return [rng.insertNode(dom.create(nodeName))];\n }\n\n let pred = dom.makePredByNodeName(nodeName);\n const nodes = rng.nodes(dom.isText, {\n fullyContains: true,\n }).map((text) => {\n return dom.singleChildAncestor(text, pred) || dom.wrap(text, nodeName);\n });\n\n if (expandClosestSibling) {\n if (onlyPartialContains) {\n const nodesInRange = rng.nodes();\n // compose with partial contains predication\n pred = func.and(pred, (node) => {\n return lists.contains(nodesInRange, node);\n });\n }\n\n return nodes.map((node) => {\n const siblings = dom.withClosestSiblings(node, pred);\n const head = lists.head(siblings);\n const tails = lists.tail(siblings);\n $.each(tails, (idx, elem) => {\n dom.appendChildNodes(head, elem.childNodes);\n dom.remove(elem);\n });\n return lists.head(siblings);\n });\n } else {\n return nodes;\n }\n }\n\n /**\n * get current style on cursor\n *\n * @param {WrappedRange} rng\n * @return {Object} - object contains style properties.\n */\n current(rng) {\n const $cont = $(!dom.isElement(rng.sc) ? rng.sc.parentNode : rng.sc);\n let styleInfo = this.fromNode($cont);\n\n // document.queryCommandState for toggle state\n // [workaround] prevent Firefox nsresult: \"0x80004005 (NS_ERROR_FAILURE)\"\n try {\n styleInfo = $.extend(styleInfo, {\n 'font-bold': document.queryCommandState('bold') ? 'bold' : 'normal',\n 'font-italic': document.queryCommandState('italic') ? 'italic' : 'normal',\n 'font-underline': document.queryCommandState('underline') ? 'underline' : 'normal',\n 'font-subscript': document.queryCommandState('subscript') ? 'subscript' : 'normal',\n 'font-superscript': document.queryCommandState('superscript') ? 'superscript' : 'normal',\n 'font-strikethrough': document.queryCommandState('strikethrough') ? 'strikethrough' : 'normal',\n 'font-family': document.queryCommandValue('fontname') || styleInfo['font-family'],\n });\n } catch (e) {\n // eslint-disable-next-line\n }\n\n // list-style-type to list-style(unordered, ordered)\n if (!rng.isOnList()) {\n styleInfo['list-style'] = 'none';\n } else {\n const orderedTypes = ['circle', 'disc', 'disc-leading-zero', 'square'];\n const isUnordered = orderedTypes.indexOf(styleInfo['list-style-type']) > -1;\n styleInfo['list-style'] = isUnordered ? 'unordered' : 'ordered';\n }\n\n const para = dom.ancestor(rng.sc, dom.isPara);\n if (para && para.style['line-height']) {\n styleInfo['line-height'] = para.style.lineHeight;\n } else {\n const lineHeight = parseInt(styleInfo['line-height'], 10) / parseInt(styleInfo['font-size'], 10);\n styleInfo['line-height'] = lineHeight.toFixed(1);\n }\n\n styleInfo.anchor = rng.isOnAnchor() && dom.ancestor(rng.sc, dom.isAnchor);\n styleInfo.ancestors = dom.listAncestor(rng.sc, dom.isEditable);\n styleInfo.range = rng;\n\n return styleInfo;\n }\n}\n","import $ from 'jquery';\nimport lists from '../core/lists';\nimport func from '../core/func';\nimport dom from '../core/dom';\nimport range from '../core/range';\n\nexport default class Bullet {\n /**\n * toggle ordered list\n */\n insertOrderedList(editable) {\n this.toggleList('OL', editable);\n }\n\n /**\n * toggle unordered list\n */\n insertUnorderedList(editable) {\n this.toggleList('UL', editable);\n }\n\n /**\n * indent\n */\n indent(editable) {\n const rng = range.create(editable).wrapBodyInlineWithPara();\n\n const paras = rng.nodes(dom.isPara, { includeAncestor: true });\n const clustereds = lists.clusterBy(paras, func.peq2('parentNode'));\n\n $.each(clustereds, (idx, paras) => {\n const head = lists.head(paras);\n if (dom.isLi(head)) {\n const previousList = this.findList(head.previousSibling);\n if (previousList) {\n paras\n .map(para => previousList.appendChild(para));\n } else {\n this.wrapList(paras, head.parentNode.nodeName);\n paras\n .map((para) => para.parentNode)\n .map((para) => this.appendToPrevious(para));\n }\n } else {\n $.each(paras, (idx, para) => {\n $(para).css('marginLeft', (idx, val) => {\n return (parseInt(val, 10) || 0) + 25;\n });\n });\n }\n });\n\n rng.select();\n }\n\n /**\n * outdent\n */\n outdent(editable) {\n const rng = range.create(editable).wrapBodyInlineWithPara();\n\n const paras = rng.nodes(dom.isPara, { includeAncestor: true });\n const clustereds = lists.clusterBy(paras, func.peq2('parentNode'));\n\n $.each(clustereds, (idx, paras) => {\n const head = lists.head(paras);\n if (dom.isLi(head)) {\n this.releaseList([paras]);\n } else {\n $.each(paras, (idx, para) => {\n $(para).css('marginLeft', (idx, val) => {\n val = (parseInt(val, 10) || 0);\n return val > 25 ? val - 25 : '';\n });\n });\n }\n });\n\n rng.select();\n }\n\n /**\n * toggle list\n *\n * @param {String} listName - OL or UL\n */\n toggleList(listName, editable) {\n const rng = range.create(editable).wrapBodyInlineWithPara();\n\n let paras = rng.nodes(dom.isPara, { includeAncestor: true });\n const bookmark = rng.paraBookmark(paras);\n const clustereds = lists.clusterBy(paras, func.peq2('parentNode'));\n\n // paragraph to list\n if (lists.find(paras, dom.isPurePara)) {\n let wrappedParas = [];\n $.each(clustereds, (idx, paras) => {\n wrappedParas = wrappedParas.concat(this.wrapList(paras, listName));\n });\n paras = wrappedParas;\n // list to paragraph or change list style\n } else {\n const diffLists = rng.nodes(dom.isList, {\n includeAncestor: true,\n }).filter((listNode) => {\n return !$.nodeName(listNode, listName);\n });\n\n if (diffLists.length) {\n $.each(diffLists, (idx, listNode) => {\n dom.replace(listNode, listName);\n });\n } else {\n paras = this.releaseList(clustereds, true);\n }\n }\n\n range.createFromParaBookmark(bookmark, paras).select();\n }\n\n /**\n * @param {Node[]} paras\n * @param {String} listName\n * @return {Node[]}\n */\n wrapList(paras, listName) {\n const head = lists.head(paras);\n const last = lists.last(paras);\n\n const prevList = dom.isList(head.previousSibling) && head.previousSibling;\n const nextList = dom.isList(last.nextSibling) && last.nextSibling;\n\n const listNode = prevList || dom.insertAfter(dom.create(listName || 'UL'), last);\n\n // P to LI\n paras = paras.map((para) => {\n return dom.isPurePara(para) ? dom.replace(para, 'LI') : para;\n });\n\n // append to list(- ,
- )\n dom.appendChildNodes(listNode, paras);\n\n if (nextList) {\n dom.appendChildNodes(listNode, lists.from(nextList.childNodes));\n dom.remove(nextList);\n }\n\n return paras;\n }\n\n /**\n * @method releaseList\n *\n * @param {Array[]} clustereds\n * @param {Boolean} isEscapseToBody\n * @return {Node[]}\n */\n releaseList(clustereds, isEscapseToBody) {\n let releasedParas = [];\n\n $.each(clustereds, (idx, paras) => {\n const head = lists.head(paras);\n const last = lists.last(paras);\n\n const headList = isEscapseToBody ? dom.lastAncestor(head, dom.isList) : head.parentNode;\n const parentItem = headList.parentNode;\n\n if (headList.parentNode.nodeName === 'LI') {\n paras.map(para => {\n const newList = this.findNextSiblings(para);\n\n if (parentItem.nextSibling) {\n parentItem.parentNode.insertBefore(\n para,\n parentItem.nextSibling\n );\n } else {\n parentItem.parentNode.appendChild(para);\n }\n\n if (newList.length) {\n this.wrapList(newList, headList.nodeName);\n para.appendChild(newList[0].parentNode);\n }\n });\n\n if (headList.children.length === 0) {\n parentItem.removeChild(headList);\n }\n\n if (parentItem.childNodes.length === 0) {\n parentItem.parentNode.removeChild(parentItem);\n }\n } else {\n const lastList = headList.childNodes.length > 1 ? dom.splitTree(headList, {\n node: last.parentNode,\n offset: dom.position(last) + 1,\n }, {\n isSkipPaddingBlankHTML: true,\n }) : null;\n\n const middleList = dom.splitTree(headList, {\n node: head.parentNode,\n offset: dom.position(head),\n }, {\n isSkipPaddingBlankHTML: true,\n });\n\n paras = isEscapseToBody ? dom.listDescendant(middleList, dom.isLi)\n : lists.from(middleList.childNodes).filter(dom.isLi);\n\n // LI to P\n if (isEscapseToBody || !dom.isList(headList.parentNode)) {\n paras = paras.map((para) => {\n return dom.replace(para, 'P');\n });\n }\n\n $.each(lists.from(paras).reverse(), (idx, para) => {\n dom.insertAfter(para, headList);\n });\n\n // remove empty lists\n const rootLists = lists.compact([headList, middleList, lastList]);\n $.each(rootLists, (idx, rootList) => {\n const listNodes = [rootList].concat(dom.listDescendant(rootList, dom.isList));\n $.each(listNodes.reverse(), (idx, listNode) => {\n if (!dom.nodeLength(listNode)) {\n dom.remove(listNode, true);\n }\n });\n });\n }\n\n releasedParas = releasedParas.concat(paras);\n });\n\n return releasedParas;\n }\n\n /**\n * @method appendToPrevious\n *\n * Appends list to previous list item, if\n * none exist it wraps the list in a new list item.\n *\n * @param {HTMLNode} ListItem\n * @return {HTMLNode}\n */\n appendToPrevious(node) {\n return node.previousSibling\n ? dom.appendChildNodes(node.previousSibling, [node])\n : this.wrapList([node], 'LI');\n }\n\n /**\n * @method findList\n *\n * Finds an existing list in list item\n *\n * @param {HTMLNode} ListItem\n * @return {Array[]}\n */\n findList(node) {\n return node\n ? lists.find(node.children, child => ['OL', 'UL'].indexOf(child.nodeName) > -1)\n : null;\n }\n\n /**\n * @method findNextSiblings\n *\n * Finds all list item siblings that follow it\n *\n * @param {HTMLNode} ListItem\n * @return {HTMLNode}\n */\n findNextSiblings(node) {\n const siblings = [];\n while (node.nextSibling) {\n siblings.push(node.nextSibling);\n node = node.nextSibling;\n }\n return siblings;\n }\n}\n","import $ from 'jquery';\nimport dom from '../core/dom';\nimport range from '../core/range';\nimport Bullet from '../editing/Bullet';\n\n/**\n * @class editing.Typing\n *\n * Typing\n *\n */\nexport default class Typing {\n constructor(context) {\n // a Bullet instance to toggle lists off\n this.bullet = new Bullet();\n this.options = context.options;\n }\n\n /**\n * insert tab\n *\n * @param {WrappedRange} rng\n * @param {Number} tabsize\n */\n insertTab(rng, tabsize) {\n const tab = dom.createText(new Array(tabsize + 1).join(dom.NBSP_CHAR));\n rng = rng.deleteContents();\n rng.insertNode(tab, true);\n\n rng = range.create(tab, tabsize);\n rng.select();\n }\n\n /**\n * insert paragraph\n *\n * @param {jQuery} $editable\n * @param {WrappedRange} rng Can be used in unit tests to \"mock\" the range\n *\n * blockquoteBreakingLevel\n * 0 - No break, the new paragraph remains inside the quote\n * 1 - Break the first blockquote in the ancestors list\n * 2 - Break all blockquotes, so that the new paragraph is not quoted (this is the default)\n */\n insertParagraph(editable, rng) {\n rng = rng || range.create(editable);\n\n // deleteContents on range.\n rng = rng.deleteContents();\n\n // Wrap range if it needs to be wrapped by paragraph\n rng = rng.wrapBodyInlineWithPara();\n\n // finding paragraph\n const splitRoot = dom.ancestor(rng.sc, dom.isPara);\n\n let nextPara;\n // on paragraph: split paragraph\n if (splitRoot) {\n // if it is an empty line with li\n if (dom.isLi(splitRoot) && (dom.isEmpty(splitRoot) || dom.deepestChildIsEmpty(splitRoot))) {\n // toogle UL/OL and escape\n this.bullet.toggleList(splitRoot.parentNode.nodeName);\n return;\n } else {\n let blockquote = null;\n if (this.options.blockquoteBreakingLevel === 1) {\n blockquote = dom.ancestor(splitRoot, dom.isBlockquote);\n } else if (this.options.blockquoteBreakingLevel === 2) {\n blockquote = dom.lastAncestor(splitRoot, dom.isBlockquote);\n }\n\n if (blockquote) {\n // We're inside a blockquote and options ask us to break it\n nextPara = $(dom.emptyPara)[0];\n // If the split is right before a
, remove it so that there's no \"empty line\"\n // after the split in the new blockquote created\n if (dom.isRightEdgePoint(rng.getStartPoint()) && dom.isBR(rng.sc.nextSibling)) {\n $(rng.sc.nextSibling).remove();\n }\n const split = dom.splitTree(blockquote, rng.getStartPoint(), { isDiscardEmptySplits: true });\n if (split) {\n split.parentNode.insertBefore(nextPara, split);\n } else {\n dom.insertAfter(nextPara, blockquote); // There's no split if we were at the end of the blockquote\n }\n } else {\n nextPara = dom.splitTree(splitRoot, rng.getStartPoint());\n\n // not a blockquote, just insert the paragraph\n let emptyAnchors = dom.listDescendant(splitRoot, dom.isEmptyAnchor);\n emptyAnchors = emptyAnchors.concat(dom.listDescendant(nextPara, dom.isEmptyAnchor));\n\n $.each(emptyAnchors, (idx, anchor) => {\n dom.remove(anchor);\n });\n\n // replace empty heading, pre or custom-made styleTag with P tag\n if ((dom.isHeading(nextPara) || dom.isPre(nextPara) || dom.isCustomStyleTag(nextPara)) && dom.isEmpty(nextPara)) {\n nextPara = dom.replace(nextPara, 'p');\n }\n }\n }\n // no paragraph: insert empty paragraph\n } else {\n const next = rng.sc.childNodes[rng.so];\n nextPara = $(dom.emptyPara)[0];\n if (next) {\n rng.sc.insertBefore(nextPara, next);\n } else {\n rng.sc.appendChild(nextPara);\n }\n }\n\n range.create(nextPara, 0).normalize().select().scrollIntoView(editable);\n }\n}\n","import $ from 'jquery';\nimport dom from '../core/dom';\nimport range from '../core/range';\nimport lists from '../core/lists';\n\n/**\n * @class Create a virtual table to create what actions to do in change.\n * @param {object} startPoint Cell selected to apply change.\n * @param {enum} where Where change will be applied Row or Col. Use enum: TableResultAction.where\n * @param {enum} action Action to be applied. Use enum: TableResultAction.requestAction\n * @param {object} domTable Dom element of table to make changes.\n */\nconst TableResultAction = function(startPoint, where, action, domTable) {\n const _startPoint = { 'colPos': 0, 'rowPos': 0 };\n const _virtualTable = [];\n const _actionCellList = [];\n\n /// ///////////////////////////////////////////\n // Private functions\n /// ///////////////////////////////////////////\n\n /**\n * Set the startPoint of action.\n */\n function setStartPoint() {\n if (!startPoint || !startPoint.tagName || (startPoint.tagName.toLowerCase() !== 'td' && startPoint.tagName.toLowerCase() !== 'th')) {\n // Impossible to identify start Cell point\n return;\n }\n _startPoint.colPos = startPoint.cellIndex;\n if (!startPoint.parentElement || !startPoint.parentElement.tagName || startPoint.parentElement.tagName.toLowerCase() !== 'tr') {\n // Impossible to identify start Row point\n return;\n }\n _startPoint.rowPos = startPoint.parentElement.rowIndex;\n }\n\n /**\n * Define virtual table position info object.\n *\n * @param {int} rowIndex Index position in line of virtual table.\n * @param {int} cellIndex Index position in column of virtual table.\n * @param {object} baseRow Row affected by this position.\n * @param {object} baseCell Cell affected by this position.\n * @param {bool} isSpan Inform if it is an span cell/row.\n */\n function setVirtualTablePosition(rowIndex, cellIndex, baseRow, baseCell, isRowSpan, isColSpan, isVirtualCell) {\n const objPosition = {\n 'baseRow': baseRow,\n 'baseCell': baseCell,\n 'isRowSpan': isRowSpan,\n 'isColSpan': isColSpan,\n 'isVirtual': isVirtualCell,\n };\n if (!_virtualTable[rowIndex]) {\n _virtualTable[rowIndex] = [];\n }\n _virtualTable[rowIndex][cellIndex] = objPosition;\n }\n\n /**\n * Create action cell object.\n *\n * @param {object} virtualTableCellObj Object of specific position on virtual table.\n * @param {enum} resultAction Action to be applied in that item.\n */\n function getActionCell(virtualTableCellObj, resultAction, virtualRowPosition, virtualColPosition) {\n return {\n 'baseCell': virtualTableCellObj.baseCell,\n 'action': resultAction,\n 'virtualTable': {\n 'rowIndex': virtualRowPosition,\n 'cellIndex': virtualColPosition,\n },\n };\n }\n\n /**\n * Recover free index of row to append Cell.\n *\n * @param {int} rowIndex Index of row to find free space.\n * @param {int} cellIndex Index of cell to find free space in table.\n */\n function recoverCellIndex(rowIndex, cellIndex) {\n if (!_virtualTable[rowIndex]) {\n return cellIndex;\n }\n if (!_virtualTable[rowIndex][cellIndex]) {\n return cellIndex;\n }\n\n let newCellIndex = cellIndex;\n while (_virtualTable[rowIndex][newCellIndex]) {\n newCellIndex++;\n if (!_virtualTable[rowIndex][newCellIndex]) {\n return newCellIndex;\n }\n }\n }\n\n /**\n * Recover info about row and cell and add information to virtual table.\n *\n * @param {object} row Row to recover information.\n * @param {object} cell Cell to recover information.\n */\n function addCellInfoToVirtual(row, cell) {\n const cellIndex = recoverCellIndex(row.rowIndex, cell.cellIndex);\n const cellHasColspan = (cell.colSpan > 1);\n const cellHasRowspan = (cell.rowSpan > 1);\n const isThisSelectedCell = (row.rowIndex === _startPoint.rowPos && cell.cellIndex === _startPoint.colPos);\n setVirtualTablePosition(row.rowIndex, cellIndex, row, cell, cellHasRowspan, cellHasColspan, false);\n\n // Add span rows to virtual Table.\n const rowspanNumber = cell.attributes.rowSpan ? parseInt(cell.attributes.rowSpan.value, 10) : 0;\n if (rowspanNumber > 1) {\n for (let rp = 1; rp < rowspanNumber; rp++) {\n const rowspanIndex = row.rowIndex + rp;\n adjustStartPoint(rowspanIndex, cellIndex, cell, isThisSelectedCell);\n setVirtualTablePosition(rowspanIndex, cellIndex, row, cell, true, cellHasColspan, true);\n }\n }\n\n // Add span cols to virtual table.\n const colspanNumber = cell.attributes.colSpan ? parseInt(cell.attributes.colSpan.value, 10) : 0;\n if (colspanNumber > 1) {\n for (let cp = 1; cp < colspanNumber; cp++) {\n const cellspanIndex = recoverCellIndex(row.rowIndex, (cellIndex + cp));\n adjustStartPoint(row.rowIndex, cellspanIndex, cell, isThisSelectedCell);\n setVirtualTablePosition(row.rowIndex, cellspanIndex, row, cell, cellHasRowspan, true, true);\n }\n }\n }\n\n /**\n * Process validation and adjust of start point if needed\n *\n * @param {int} rowIndex\n * @param {int} cellIndex\n * @param {object} cell\n * @param {bool} isSelectedCell\n */\n function adjustStartPoint(rowIndex, cellIndex, cell, isSelectedCell) {\n if (rowIndex === _startPoint.rowPos && _startPoint.colPos >= cell.cellIndex && cell.cellIndex <= cellIndex && !isSelectedCell) {\n _startPoint.colPos++;\n }\n }\n\n /**\n * Create virtual table of cells with all cells, including span cells.\n */\n function createVirtualTable() {\n const rows = domTable.rows;\n for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {\n const cells = rows[rowIndex].cells;\n for (let cellIndex = 0; cellIndex < cells.length; cellIndex++) {\n addCellInfoToVirtual(rows[rowIndex], cells[cellIndex]);\n }\n }\n }\n\n /**\n * Get action to be applied on the cell.\n *\n * @param {object} cell virtual table cell to apply action\n */\n function getDeleteResultActionToCell(cell) {\n switch (where) {\n case TableResultAction.where.Column:\n if (cell.isColSpan) {\n return TableResultAction.resultAction.SubtractSpanCount;\n }\n break;\n case TableResultAction.where.Row:\n if (!cell.isVirtual && cell.isRowSpan) {\n return TableResultAction.resultAction.AddCell;\n } else if (cell.isRowSpan) {\n return TableResultAction.resultAction.SubtractSpanCount;\n }\n break;\n }\n return TableResultAction.resultAction.RemoveCell;\n }\n\n /**\n * Get action to be applied on the cell.\n *\n * @param {object} cell virtual table cell to apply action\n */\n function getAddResultActionToCell(cell) {\n switch (where) {\n case TableResultAction.where.Column:\n if (cell.isColSpan) {\n return TableResultAction.resultAction.SumSpanCount;\n } else if (cell.isRowSpan && cell.isVirtual) {\n return TableResultAction.resultAction.Ignore;\n }\n break;\n case TableResultAction.where.Row:\n if (cell.isRowSpan) {\n return TableResultAction.resultAction.SumSpanCount;\n } else if (cell.isColSpan && cell.isVirtual) {\n return TableResultAction.resultAction.Ignore;\n }\n break;\n }\n return TableResultAction.resultAction.AddCell;\n }\n\n function init() {\n setStartPoint();\n createVirtualTable();\n }\n\n /// ///////////////////////////////////////////\n // Public functions\n /// ///////////////////////////////////////////\n\n /**\n * Recover array os what to do in table.\n */\n this.getActionList = function() {\n const fixedRow = (where === TableResultAction.where.Row) ? _startPoint.rowPos : -1;\n const fixedCol = (where === TableResultAction.where.Column) ? _startPoint.colPos : -1;\n\n let actualPosition = 0;\n let canContinue = true;\n while (canContinue) {\n const rowPosition = (fixedRow >= 0) ? fixedRow : actualPosition;\n const colPosition = (fixedCol >= 0) ? fixedCol : actualPosition;\n const row = _virtualTable[rowPosition];\n if (!row) {\n canContinue = false;\n return _actionCellList;\n }\n const cell = row[colPosition];\n if (!cell) {\n canContinue = false;\n return _actionCellList;\n }\n\n // Define action to be applied in this cell\n let resultAction = TableResultAction.resultAction.Ignore;\n switch (action) {\n case TableResultAction.requestAction.Add:\n resultAction = getAddResultActionToCell(cell);\n break;\n case TableResultAction.requestAction.Delete:\n resultAction = getDeleteResultActionToCell(cell);\n break;\n }\n _actionCellList.push(getActionCell(cell, resultAction, rowPosition, colPosition));\n actualPosition++;\n }\n\n return _actionCellList;\n };\n\n init();\n};\n/**\n*\n* Where action occours enum.\n*/\nTableResultAction.where = { 'Row': 0, 'Column': 1 };\n/**\n*\n* Requested action to apply enum.\n*/\nTableResultAction.requestAction = { 'Add': 0, 'Delete': 1 };\n/**\n*\n* Result action to be executed enum.\n*/\nTableResultAction.resultAction = { 'Ignore': 0, 'SubtractSpanCount': 1, 'RemoveCell': 2, 'AddCell': 3, 'SumSpanCount': 4 };\n\n/**\n *\n * @class editing.Table\n *\n * Table\n *\n */\nexport default class Table {\n /**\n * handle tab key\n *\n * @param {WrappedRange} rng\n * @param {Boolean} isShift\n */\n tab(rng, isShift) {\n const cell = dom.ancestor(rng.commonAncestor(), dom.isCell);\n const table = dom.ancestor(cell, dom.isTable);\n const cells = dom.listDescendant(table, dom.isCell);\n\n const nextCell = lists[isShift ? 'prev' : 'next'](cells, cell);\n if (nextCell) {\n range.create(nextCell, 0).select();\n }\n }\n\n /**\n * Add a new row\n *\n * @param {WrappedRange} rng\n * @param {String} position (top/bottom)\n * @return {Node}\n */\n addRow(rng, position) {\n const cell = dom.ancestor(rng.commonAncestor(), dom.isCell);\n\n const currentTr = $(cell).closest('tr');\n const trAttributes = this.recoverAttributes(currentTr);\n const html = $('
' + this.lang.output.noSelection + '
');\n setTimeout(function() { $('#note-status-output-' + noteStatusOutput).remove(); }, 5000);\n }\n }\n\n /**\n * unlink\n *\n * @type command\n */\n unlink() {\n let rng = this.getLastRange();\n if (rng.isOnAnchor()) {\n const anchor = dom.ancestor(rng.sc, dom.isAnchor);\n rng = range.createFromNode(anchor);\n rng.select();\n this.setLastRange();\n\n this.beforeCommand();\n document.execCommand('unlink');\n this.afterCommand();\n }\n }\n\n /**\n * returns link info\n *\n * @return {Object}\n * @return {WrappedRange} return.range\n * @return {String} return.text\n * @return {Boolean} [return.isNewWindow=true]\n * @return {String} [return.url=\"\"]\n */\n getLinkInfo() {\n const rng = this.getLastRange().expand(dom.isAnchor);\n // Get the first anchor on range(for edit).\n const $anchor = $(lists.head(rng.nodes(dom.isAnchor)));\n const linkInfo = {\n range: rng,\n text: rng.toString(),\n url: $anchor.length ? $anchor.attr('href') : '',\n };\n\n // When anchor exists,\n if ($anchor.length) {\n // Set isNewWindow by checking its target.\n linkInfo.isNewWindow = $anchor.attr('target') === '_blank';\n }\n\n return linkInfo;\n }\n\n addRow(position) {\n const rng = this.getLastRange(this.$editable);\n if (rng.isCollapsed() && rng.isOnCell()) {\n this.beforeCommand();\n this.table.addRow(rng, position);\n this.afterCommand();\n }\n }\n\n addCol(position) {\n const rng = this.getLastRange(this.$editable);\n if (rng.isCollapsed() && rng.isOnCell()) {\n this.beforeCommand();\n this.table.addCol(rng, position);\n this.afterCommand();\n }\n }\n\n deleteRow() {\n const rng = this.getLastRange(this.$editable);\n if (rng.isCollapsed() && rng.isOnCell()) {\n this.beforeCommand();\n this.table.deleteRow(rng);\n this.afterCommand();\n }\n }\n\n deleteCol() {\n const rng = this.getLastRange(this.$editable);\n if (rng.isCollapsed() && rng.isOnCell()) {\n this.beforeCommand();\n this.table.deleteCol(rng);\n this.afterCommand();\n }\n }\n\n deleteTable() {\n const rng = this.getLastRange(this.$editable);\n if (rng.isCollapsed() && rng.isOnCell()) {\n this.beforeCommand();\n this.table.deleteTable(rng);\n this.afterCommand();\n }\n }\n\n /**\n * @param {Position} pos\n * @param {jQuery} $target - target element\n * @param {Boolean} [bKeepRatio] - keep ratio\n */\n resizeTo(pos, $target, bKeepRatio) {\n let imageSize;\n if (bKeepRatio) {\n const newRatio = pos.y / pos.x;\n const ratio = $target.data('ratio');\n imageSize = {\n width: ratio > newRatio ? pos.x : pos.y / ratio,\n height: ratio > newRatio ? pos.x * ratio : pos.y,\n };\n } else {\n imageSize = {\n width: pos.x,\n height: pos.y,\n };\n }\n\n $target.css(imageSize);\n }\n\n /**\n * returns whether editable area has focus or not.\n */\n hasFocus() {\n return this.$editable.is(':focus');\n }\n\n /**\n * set focus\n */\n focus() {\n // [workaround] Screen will move when page is scolled in IE.\n // - do focus when not focused\n if (!this.hasFocus()) {\n this.$editable.focus();\n }\n }\n\n /**\n * returns whether contents is empty or not.\n * @return {Boolean}\n */\n isEmpty() {\n return dom.isEmpty(this.$editable[0]) || dom.emptyPara === this.$editable.html();\n }\n\n /**\n * Removes all contents and restores the editable instance to an _emptyPara_.\n */\n empty() {\n this.context.invoke('code', dom.emptyPara);\n }\n\n /**\n * normalize content\n */\n normalizeContent() {\n this.$editable[0].normalize();\n }\n}\n","import $ from 'jquery';\n\n/**\n * @method readFileAsDataURL\n *\n * read contents of file as representing URL\n *\n * @param {File} file\n * @return {Promise} - then: dataUrl\n */\nexport function readFileAsDataURL(file) {\n return $.Deferred((deferred) => {\n $.extend(new FileReader(), {\n onload: (e) => {\n const dataURL = e.target.result;\n deferred.resolve(dataURL);\n },\n onerror: (err) => {\n deferred.reject(err);\n },\n }).readAsDataURL(file);\n }).promise();\n}\n\n/**\n * @method createImage\n *\n * create `',\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 $ 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 ].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 '',\n '',\n '',\n '',\n '',\n (this.options.disableResizeImage ? '' : ''),\n '
',\n '');\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 '
',\n '',\n '
',\n '',\n '',\n '
',\n '',\n '
',\n ].join('') : '') +\n (foreColor ? [\n '',\n '
' + this.lang.color.foreground + '
',\n '',\n '',\n '
',\n '',\n '
',\n '',\n '',\n '
', // Fix missing Div, Commented to find easily if it's wrong\n '',\n '
',\n ].join('') : ''),\n callback: ($dropdown) => {\n $dropdown.find('.note-holder').each((idx, item) => {\n const $holder = $(item);\n $holder.append(this.ui.palette({\n colors: this.options.colors,\n colorsName: this.options.colorsName,\n eventName: $holder.data('event'),\n container: this.options.container,\n tooltip: this.options.tooltip,\n }).render());\n });\n /* TODO: do we have to record recent custom colors within cookies? */\n var customColors = [\n ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'],\n ];\n $dropdown.find('.note-holder-custom').each((idx, item) => {\n const $holder = $(item);\n $holder.append(this.ui.palette({\n colors: customColors,\n colorsName: customColors,\n eventName: $holder.data('event'),\n container: this.options.container,\n tooltip: this.options.tooltip,\n }).render());\n });\n $dropdown.find('input[type=color]').each((idx, item) => {\n $(item).change(function() {\n const $chip = $dropdown.find('#' + $(this).data('event')).find('.note-color-btn').first();\n const color = this.value.toUpperCase();\n $chip.css('background-color', color)\n .attr('aria-label', color)\n .attr('data-value', color)\n .attr('data-original-title', color);\n $chip.click();\n });\n });\n },\n click: (event) => {\n event.stopPropagation();\n\n const $parent = $('.' + className).find('.note-dropdown-menu');\n const $button = $(event.target);\n const eventName = $button.data('event');\n const value = $button.attr('data-value');\n\n if (eventName === 'openPalette') {\n const $picker = $parent.find('#' + value);\n const $palette = $($parent.find('#' + $picker.data('event')).find('.note-color-row')[0]);\n\n // Shift palette chips\n const $chip = $palette.find('.note-color-btn').last().detach();\n\n // Set chip attributes\n const color = $picker.val();\n $chip.css('background-color', color)\n .attr('aria-label', color)\n .attr('data-value', color)\n .attr('data-original-title', color);\n $palette.prepend($chip);\n $picker.click();\n } else {\n if (lists.contains(['backColor', 'foreColor'], eventName)) {\n const key = eventName === 'backColor' ? 'background-color' : 'color';\n const $color = $button.closest('.note-color').find('.note-recent-color');\n const $currentButton = $button.closest('.note-color').find('.note-current-color-button');\n\n $color.css(key, value);\n $currentButton.attr('data-' + eventName, value);\n }\n this.context.invoke('editor.' + eventName, value);\n }\n },\n }),\n ],\n }).render();\n }\n\n addToolbarButtons() {\n this.context.memo('button.style', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents(\n this.ui.icon(this.options.icons.magic), this.options\n ),\n tooltip: this.lang.style.style,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdown({\n className: 'dropdown-style',\n items: this.options.styleTags,\n title: this.lang.style.style,\n template: (item) => {\n // TBD: need to be simplified\n if (typeof item === 'string') {\n item = {\n tag: item,\n title: (Object.prototype.hasOwnProperty.call(this.lang.style, item) ? this.lang.style[item] : item),\n };\n }\n\n const tag = item.tag;\n const title = item.title;\n const style = item.style ? ' style=\"' + item.style + '\" ' : '';\n const className = item.className ? ' class=\"' + item.className + '\"' : '';\n\n return '<' + tag + style + className + '>' + title + '';\n },\n click: this.context.createInvokeHandler('editor.formatBlock'),\n }),\n ]).render();\n });\n\n for (let styleIdx = 0, styleLen = this.options.styleTags.length; styleIdx < styleLen; styleIdx++) {\n const item = this.options.styleTags[styleIdx];\n\n this.context.memo('button.style.' + item, () => {\n return this.button({\n className: 'note-btn-style-' + item,\n contents: '' + item.toUpperCase() + '
',\n tooltip: this.lang.style[item],\n click: this.context.createInvokeHandler('editor.formatBlock'),\n }).render();\n });\n }\n\n this.context.memo('button.bold', () => {\n return this.button({\n className: 'note-btn-bold',\n contents: this.ui.icon(this.options.icons.bold),\n tooltip: this.lang.font.bold + this.representShortcut('bold'),\n click: this.context.createInvokeHandlerAndUpdateState('editor.bold'),\n }).render();\n });\n\n this.context.memo('button.italic', () => {\n return this.button({\n className: 'note-btn-italic',\n contents: this.ui.icon(this.options.icons.italic),\n tooltip: this.lang.font.italic + this.representShortcut('italic'),\n click: this.context.createInvokeHandlerAndUpdateState('editor.italic'),\n }).render();\n });\n\n this.context.memo('button.underline', () => {\n return this.button({\n className: 'note-btn-underline',\n contents: this.ui.icon(this.options.icons.underline),\n tooltip: this.lang.font.underline + this.representShortcut('underline'),\n click: this.context.createInvokeHandlerAndUpdateState('editor.underline'),\n }).render();\n });\n\n this.context.memo('button.clear', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.eraser),\n tooltip: this.lang.font.clear + this.representShortcut('removeFormat'),\n click: this.context.createInvokeHandler('editor.removeFormat'),\n }).render();\n });\n\n this.context.memo('button.strikethrough', () => {\n return this.button({\n className: 'note-btn-strikethrough',\n contents: this.ui.icon(this.options.icons.strikethrough),\n tooltip: this.lang.font.strikethrough + this.representShortcut('strikethrough'),\n click: this.context.createInvokeHandlerAndUpdateState('editor.strikethrough'),\n }).render();\n });\n\n this.context.memo('button.superscript', () => {\n return this.button({\n className: 'note-btn-superscript',\n contents: this.ui.icon(this.options.icons.superscript),\n tooltip: this.lang.font.superscript,\n click: this.context.createInvokeHandlerAndUpdateState('editor.superscript'),\n }).render();\n });\n\n this.context.memo('button.subscript', () => {\n return this.button({\n className: 'note-btn-subscript',\n contents: this.ui.icon(this.options.icons.subscript),\n tooltip: this.lang.font.subscript,\n click: this.context.createInvokeHandlerAndUpdateState('editor.subscript'),\n }).render();\n });\n\n this.context.memo('button.fontname', () => {\n const styleInfo = this.context.invoke('editor.currentStyle');\n\n if (this.options.addDefaultFonts) {\n // Add 'default' fonts into the fontnames array if not exist\n $.each(styleInfo['font-family'].split(','), (idx, fontname) => {\n fontname = fontname.trim().replace(/['\"]+/g, '');\n if (this.isFontDeservedToAdd(fontname)) {\n if (this.options.fontNames.indexOf(fontname) === -1) {\n this.options.fontNames.push(fontname);\n }\n }\n });\n }\n\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents(\n '', this.options\n ),\n tooltip: this.lang.font.name,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdownCheck({\n className: 'dropdown-fontname',\n checkClassName: this.options.icons.menuCheck,\n items: this.options.fontNames.filter(this.isFontInstalled.bind(this)),\n title: this.lang.font.name,\n template: (item) => {\n return '' + item + '';\n },\n click: this.context.createInvokeHandlerAndUpdateState('editor.fontName'),\n }),\n ]).render();\n });\n\n this.context.memo('button.fontsize', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents('', this.options),\n tooltip: this.lang.font.size,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdownCheck({\n className: 'dropdown-fontsize',\n checkClassName: this.options.icons.menuCheck,\n items: this.options.fontSizes,\n title: this.lang.font.size,\n click: this.context.createInvokeHandlerAndUpdateState('editor.fontSize'),\n }),\n ]).render();\n });\n\n this.context.memo('button.fontsizeunit', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents('', this.options),\n tooltip: this.lang.font.sizeunit,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdownCheck({\n className: 'dropdown-fontsizeunit',\n checkClassName: this.options.icons.menuCheck,\n items: this.options.fontSizeUnits,\n title: this.lang.font.sizeunit,\n click: this.context.createInvokeHandlerAndUpdateState('editor.fontSizeUnit'),\n }),\n ]).render();\n });\n\n this.context.memo('button.color', () => {\n return this.colorPalette('note-color-all', this.lang.color.recent, true, true);\n });\n\n this.context.memo('button.forecolor', () => {\n return this.colorPalette('note-color-fore', this.lang.color.foreground, false, true);\n });\n\n this.context.memo('button.backcolor', () => {\n return this.colorPalette('note-color-back', this.lang.color.background, true, false);\n });\n\n this.context.memo('button.ul', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.unorderedlist),\n tooltip: this.lang.lists.unordered + this.representShortcut('insertUnorderedList'),\n click: this.context.createInvokeHandler('editor.insertUnorderedList'),\n }).render();\n });\n\n this.context.memo('button.ol', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.orderedlist),\n tooltip: this.lang.lists.ordered + this.representShortcut('insertOrderedList'),\n click: this.context.createInvokeHandler('editor.insertOrderedList'),\n }).render();\n });\n\n const justifyLeft = this.button({\n contents: this.ui.icon(this.options.icons.alignLeft),\n tooltip: this.lang.paragraph.left + this.representShortcut('justifyLeft'),\n click: this.context.createInvokeHandler('editor.justifyLeft'),\n });\n\n const justifyCenter = this.button({\n contents: this.ui.icon(this.options.icons.alignCenter),\n tooltip: this.lang.paragraph.center + this.representShortcut('justifyCenter'),\n click: this.context.createInvokeHandler('editor.justifyCenter'),\n });\n\n const justifyRight = this.button({\n contents: this.ui.icon(this.options.icons.alignRight),\n tooltip: this.lang.paragraph.right + this.representShortcut('justifyRight'),\n click: this.context.createInvokeHandler('editor.justifyRight'),\n });\n\n const justifyFull = this.button({\n contents: this.ui.icon(this.options.icons.alignJustify),\n tooltip: this.lang.paragraph.justify + this.representShortcut('justifyFull'),\n click: this.context.createInvokeHandler('editor.justifyFull'),\n });\n\n const outdent = this.button({\n contents: this.ui.icon(this.options.icons.outdent),\n tooltip: this.lang.paragraph.outdent + this.representShortcut('outdent'),\n click: this.context.createInvokeHandler('editor.outdent'),\n });\n\n const indent = this.button({\n contents: this.ui.icon(this.options.icons.indent),\n tooltip: this.lang.paragraph.indent + this.representShortcut('indent'),\n click: this.context.createInvokeHandler('editor.indent'),\n });\n\n this.context.memo('button.justifyLeft', func.invoke(justifyLeft, 'render'));\n this.context.memo('button.justifyCenter', func.invoke(justifyCenter, 'render'));\n this.context.memo('button.justifyRight', func.invoke(justifyRight, 'render'));\n this.context.memo('button.justifyFull', func.invoke(justifyFull, 'render'));\n this.context.memo('button.outdent', func.invoke(outdent, 'render'));\n this.context.memo('button.indent', func.invoke(indent, 'render'));\n\n this.context.memo('button.paragraph', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.alignLeft), this.options),\n tooltip: this.lang.paragraph.paragraph,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdown([\n this.ui.buttonGroup({\n className: 'note-align',\n children: [justifyLeft, justifyCenter, justifyRight, justifyFull],\n }),\n this.ui.buttonGroup({\n className: 'note-list',\n children: [outdent, indent],\n }),\n ]),\n ]).render();\n });\n\n this.context.memo('button.height', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.textHeight), this.options),\n tooltip: this.lang.font.height,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdownCheck({\n items: this.options.lineHeights,\n checkClassName: this.options.icons.menuCheck,\n className: 'dropdown-line-height',\n title: this.lang.font.height,\n click: this.context.createInvokeHandler('editor.lineHeight'),\n }),\n ]).render();\n });\n\n this.context.memo('button.table', () => {\n return this.ui.buttonGroup([\n this.button({\n className: 'dropdown-toggle',\n contents: this.ui.dropdownButtonContents(this.ui.icon(this.options.icons.table), this.options),\n tooltip: this.lang.table.table,\n data: {\n toggle: 'dropdown',\n },\n }),\n this.ui.dropdown({\n title: this.lang.table.table,\n className: 'note-table',\n items: [\n '',\n '
',\n '
',\n '
',\n '
',\n '1 x 1
',\n ].join(''),\n }),\n ], {\n callback: ($node) => {\n const $catcher = $node.find('.note-dimension-picker-mousecatcher');\n $catcher.css({\n width: this.options.insertTableMaxSize.col + 'em',\n height: this.options.insertTableMaxSize.row + 'em',\n }).mousedown(this.context.createInvokeHandler('editor.insertTable'))\n .on('mousemove', this.tableMoveHandler.bind(this));\n },\n }).render();\n });\n\n this.context.memo('button.link', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.link),\n tooltip: this.lang.link.link + this.representShortcut('linkDialog.show'),\n click: this.context.createInvokeHandler('linkDialog.show'),\n }).render();\n });\n\n this.context.memo('button.picture', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.picture),\n tooltip: this.lang.image.image,\n click: this.context.createInvokeHandler('imageDialog.show'),\n }).render();\n });\n\n this.context.memo('button.video', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.video),\n tooltip: this.lang.video.video,\n click: this.context.createInvokeHandler('videoDialog.show'),\n }).render();\n });\n\n this.context.memo('button.hr', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.minus),\n tooltip: this.lang.hr.insert + this.representShortcut('insertHorizontalRule'),\n click: this.context.createInvokeHandler('editor.insertHorizontalRule'),\n }).render();\n });\n\n this.context.memo('button.fullscreen', () => {\n return this.button({\n className: 'btn-fullscreen',\n contents: this.ui.icon(this.options.icons.arrowsAlt),\n tooltip: this.lang.options.fullscreen,\n click: this.context.createInvokeHandler('fullscreen.toggle'),\n }).render();\n });\n\n this.context.memo('button.codeview', () => {\n return this.button({\n className: 'btn-codeview',\n contents: this.ui.icon(this.options.icons.code),\n tooltip: this.lang.options.codeview,\n click: this.context.createInvokeHandler('codeview.toggle'),\n }).render();\n });\n\n this.context.memo('button.redo', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.redo),\n tooltip: this.lang.history.redo + this.representShortcut('redo'),\n click: this.context.createInvokeHandler('editor.redo'),\n }).render();\n });\n\n this.context.memo('button.undo', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.undo),\n tooltip: this.lang.history.undo + this.representShortcut('undo'),\n click: this.context.createInvokeHandler('editor.undo'),\n }).render();\n });\n\n this.context.memo('button.help', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.question),\n tooltip: this.lang.options.help,\n click: this.context.createInvokeHandler('helpDialog.show'),\n }).render();\n });\n }\n\n /**\n * image: [\n * ['imageResize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],\n * ['float', ['floatLeft', 'floatRight', 'floatNone']],\n * ['remove', ['removeMedia']],\n * ],\n */\n addImagePopoverButtons() {\n // Image Size Buttons\n this.context.memo('button.resizeFull', () => {\n return this.button({\n contents: '100%',\n tooltip: this.lang.image.resizeFull,\n click: this.context.createInvokeHandler('editor.resize', '1'),\n }).render();\n });\n this.context.memo('button.resizeHalf', () => {\n return this.button({\n contents: '50%',\n tooltip: this.lang.image.resizeHalf,\n click: this.context.createInvokeHandler('editor.resize', '0.5'),\n }).render();\n });\n this.context.memo('button.resizeQuarter', () => {\n return this.button({\n contents: '25%',\n tooltip: this.lang.image.resizeQuarter,\n click: this.context.createInvokeHandler('editor.resize', '0.25'),\n }).render();\n });\n this.context.memo('button.resizeNone', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.rollback),\n tooltip: this.lang.image.resizeNone,\n click: this.context.createInvokeHandler('editor.resize', '0'),\n }).render();\n });\n\n // Float Buttons\n this.context.memo('button.floatLeft', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.floatLeft),\n tooltip: this.lang.image.floatLeft,\n click: this.context.createInvokeHandler('editor.floatMe', 'left'),\n }).render();\n });\n\n this.context.memo('button.floatRight', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.floatRight),\n tooltip: this.lang.image.floatRight,\n click: this.context.createInvokeHandler('editor.floatMe', 'right'),\n }).render();\n });\n\n this.context.memo('button.floatNone', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.rollback),\n tooltip: this.lang.image.floatNone,\n click: this.context.createInvokeHandler('editor.floatMe', 'none'),\n }).render();\n });\n\n // Remove Buttons\n this.context.memo('button.removeMedia', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.trash),\n tooltip: this.lang.image.remove,\n click: this.context.createInvokeHandler('editor.removeMedia'),\n }).render();\n });\n }\n\n addLinkPopoverButtons() {\n this.context.memo('button.linkDialogShow', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.link),\n tooltip: this.lang.link.edit,\n click: this.context.createInvokeHandler('linkDialog.show'),\n }).render();\n });\n\n this.context.memo('button.unlink', () => {\n return this.button({\n contents: this.ui.icon(this.options.icons.unlink),\n tooltip: this.lang.link.unlink,\n click: this.context.createInvokeHandler('editor.unlink'),\n }).render();\n });\n }\n\n /**\n * table : [\n * ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],\n * ['delete', ['deleteRow', 'deleteCol', 'deleteTable']]\n * ],\n */\n addTablePopoverButtons() {\n this.context.memo('button.addRowUp', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.rowAbove),\n tooltip: this.lang.table.addRowAbove,\n click: this.context.createInvokeHandler('editor.addRow', 'top'),\n }).render();\n });\n this.context.memo('button.addRowDown', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.rowBelow),\n tooltip: this.lang.table.addRowBelow,\n click: this.context.createInvokeHandler('editor.addRow', 'bottom'),\n }).render();\n });\n this.context.memo('button.addColLeft', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.colBefore),\n tooltip: this.lang.table.addColLeft,\n click: this.context.createInvokeHandler('editor.addCol', 'left'),\n }).render();\n });\n this.context.memo('button.addColRight', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.colAfter),\n tooltip: this.lang.table.addColRight,\n click: this.context.createInvokeHandler('editor.addCol', 'right'),\n }).render();\n });\n this.context.memo('button.deleteRow', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.rowRemove),\n tooltip: this.lang.table.delRow,\n click: this.context.createInvokeHandler('editor.deleteRow'),\n }).render();\n });\n this.context.memo('button.deleteCol', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.colRemove),\n tooltip: this.lang.table.delCol,\n click: this.context.createInvokeHandler('editor.deleteCol'),\n }).render();\n });\n this.context.memo('button.deleteTable', () => {\n return this.button({\n className: 'btn-md',\n contents: this.ui.icon(this.options.icons.trash),\n tooltip: this.lang.table.delTable,\n click: this.context.createInvokeHandler('editor.deleteTable'),\n }).render();\n });\n }\n\n build($container, groups) {\n for (let groupIdx = 0, groupLen = groups.length; groupIdx < groupLen; groupIdx++) {\n const group = groups[groupIdx];\n const groupName = Array.isArray(group) ? group[0] : group;\n const buttons = Array.isArray(group) ? ((group.length === 1) ? [group[0]] : group[1]) : [group];\n\n const $group = this.ui.buttonGroup({\n className: 'note-' + groupName,\n }).render();\n\n for (let idx = 0, len = buttons.length; idx < len; idx++) {\n const btn = this.context.memo('button.' + buttons[idx]);\n if (btn) {\n $group.append(typeof btn === 'function' ? btn(this.context) : btn);\n }\n }\n $group.appendTo($container);\n }\n }\n\n /**\n * @param {jQuery} [$container]\n */\n updateCurrentStyle($container) {\n const $cont = $container || this.$toolbar;\n\n const styleInfo = this.context.invoke('editor.currentStyle');\n this.updateBtnStates($cont, {\n '.note-btn-bold': () => {\n return styleInfo['font-bold'] === 'bold';\n },\n '.note-btn-italic': () => {\n return styleInfo['font-italic'] === 'italic';\n },\n '.note-btn-underline': () => {\n return styleInfo['font-underline'] === 'underline';\n },\n '.note-btn-subscript': () => {\n return styleInfo['font-subscript'] === 'subscript';\n },\n '.note-btn-superscript': () => {\n return styleInfo['font-superscript'] === 'superscript';\n },\n '.note-btn-strikethrough': () => {\n return styleInfo['font-strikethrough'] === 'strikethrough';\n },\n });\n\n if (styleInfo['font-family']) {\n const fontNames = styleInfo['font-family'].split(',').map((name) => {\n return name.replace(/[\\'\\\"]/g, '')\n .replace(/\\s+$/, '')\n .replace(/^\\s+/, '');\n });\n const fontName = lists.find(fontNames, this.isFontInstalled.bind(this));\n\n $cont.find('.dropdown-fontname a').each((idx, item) => {\n const $item = $(item);\n // always compare string to avoid creating another func.\n const isChecked = ($item.data('value') + '') === (fontName + '');\n $item.toggleClass('checked', isChecked);\n });\n $cont.find('.note-current-fontname').text(fontName).css('font-family', fontName);\n }\n\n if (styleInfo['font-size']) {\n const fontSize = styleInfo['font-size'];\n $cont.find('.dropdown-fontsize a').each((idx, item) => {\n const $item = $(item);\n // always compare with string to avoid creating another func.\n const isChecked = ($item.data('value') + '') === (fontSize + '');\n $item.toggleClass('checked', isChecked);\n });\n $cont.find('.note-current-fontsize').text(fontSize);\n\n const fontSizeUnit = styleInfo['font-size-unit'];\n $cont.find('.dropdown-fontsizeunit a').each((idx, item) => {\n const $item = $(item);\n const isChecked = ($item.data('value') + '') === (fontSizeUnit + '');\n $item.toggleClass('checked', isChecked);\n });\n $cont.find('.note-current-fontsizeunit').text(fontSizeUnit);\n }\n\n if (styleInfo['line-height']) {\n const lineHeight = styleInfo['line-height'];\n $cont.find('.dropdown-line-height li a').each((idx, item) => {\n // always compare with string to avoid creating another func.\n const isChecked = ($(item).data('value') + '') === (lineHeight + '');\n this.className = isChecked ? 'checked' : '';\n });\n }\n }\n\n updateBtnStates($container, infos) {\n $.each(infos, (selector, pred) => {\n this.ui.toggleBtnActive($container.find(selector), pred());\n });\n }\n\n tableMoveHandler(event) {\n const PX_PER_EM = 18;\n const $picker = $(event.target.parentNode); // target is mousecatcher\n const $dimensionDisplay = $picker.next();\n const $catcher = $picker.find('.note-dimension-picker-mousecatcher');\n const $highlighted = $picker.find('.note-dimension-picker-highlighted');\n const $unhighlighted = $picker.find('.note-dimension-picker-unhighlighted');\n\n let posOffset;\n // HTML5 with jQuery - e.offsetX is undefined in Firefox\n if (event.offsetX === undefined) {\n const posCatcher = $(event.target).offset();\n posOffset = {\n x: event.pageX - posCatcher.left,\n y: event.pageY - posCatcher.top,\n };\n } else {\n posOffset = {\n x: event.offsetX,\n y: event.offsetY,\n };\n }\n\n const dim = {\n c: Math.ceil(posOffset.x / PX_PER_EM) || 1,\n r: Math.ceil(posOffset.y / PX_PER_EM) || 1,\n };\n\n $highlighted.css({ width: dim.c + 'em', height: dim.r + 'em' });\n $catcher.data('value', dim.c + 'x' + dim.r);\n\n if (dim.c > 3 && dim.c < this.options.insertTableMaxSize.col) {\n $unhighlighted.css({ width: dim.c + 1 + 'em' });\n }\n\n if (dim.r > 3 && dim.r < this.options.insertTableMaxSize.row) {\n $unhighlighted.css({ height: dim.r + 1 + 'em' });\n }\n\n $dimensionDisplay.html(dim.c + ' x ' + dim.r);\n }\n}\n","import $ from 'jquery';\nexport default class Toolbar {\n constructor(context) {\n this.context = context;\n\n this.$window = $(window);\n this.$document = $(document);\n\n this.ui = $.summernote.ui;\n this.$note = context.layoutInfo.note;\n this.$editor = context.layoutInfo.editor;\n this.$toolbar = context.layoutInfo.toolbar;\n this.$editable = context.layoutInfo.editable;\n this.$statusbar = context.layoutInfo.statusbar;\n this.options = context.options;\n\n this.isFollowing = false;\n this.followScroll = this.followScroll.bind(this);\n }\n\n shouldInitialize() {\n return !this.options.airMode;\n }\n\n initialize() {\n this.options.toolbar = this.options.toolbar || [];\n\n if (!this.options.toolbar.length) {\n this.$toolbar.hide();\n } else {\n this.context.invoke('buttons.build', this.$toolbar, this.options.toolbar);\n }\n\n if (this.options.toolbarContainer) {\n this.$toolbar.appendTo(this.options.toolbarContainer);\n }\n\n this.changeContainer(false);\n\n this.$note.on('summernote.keyup summernote.mouseup summernote.change', () => {\n this.context.invoke('buttons.updateCurrentStyle');\n });\n\n this.context.invoke('buttons.updateCurrentStyle');\n if (this.options.followingToolbar) {\n this.$window.on('scroll resize', this.followScroll);\n }\n }\n\n destroy() {\n this.$toolbar.children().remove();\n\n if (this.options.followingToolbar) {\n this.$window.off('scroll resize', this.followScroll);\n }\n }\n\n followScroll() {\n if (this.$editor.hasClass('fullscreen')) {\n return false;\n }\n\n const editorHeight = this.$editor.outerHeight();\n const editorWidth = this.$editor.width();\n const toolbarHeight = this.$toolbar.height();\n const statusbarHeight = this.$statusbar.height();\n\n // check if the web app is currently using another static bar\n let otherBarHeight = 0;\n if (this.options.otherStaticBar) {\n otherBarHeight = $(this.options.otherStaticBar).outerHeight();\n }\n\n const currentOffset = this.$document.scrollTop();\n const editorOffsetTop = this.$editor.offset().top;\n const editorOffsetBottom = editorOffsetTop + editorHeight;\n const activateOffset = editorOffsetTop - otherBarHeight;\n const deactivateOffsetBottom = editorOffsetBottom - otherBarHeight - toolbarHeight - statusbarHeight;\n\n if (!this.isFollowing &&\n (currentOffset > activateOffset) && (currentOffset < deactivateOffsetBottom - toolbarHeight)) {\n this.isFollowing = true;\n this.$editable.css({\n marginTop: this.$toolbar.outerHeight(),\n });\n this.$toolbar.css({\n position: 'fixed',\n top: otherBarHeight,\n width: editorWidth,\n zIndex: 1000,\n });\n } else if (this.isFollowing &&\n ((currentOffset < activateOffset) || (currentOffset > deactivateOffsetBottom))) {\n this.isFollowing = false;\n this.$toolbar.css({\n position: 'relative',\n top: 0,\n width: '100%',\n zIndex: 'auto',\n });\n this.$editable.css({\n marginTop: '',\n });\n }\n }\n\n changeContainer(isFullscreen) {\n if (isFullscreen) {\n this.$toolbar.prependTo(this.$editor);\n } else {\n if (this.options.toolbarContainer) {\n this.$toolbar.appendTo(this.options.toolbarContainer);\n }\n }\n if (this.options.followingToolbar) {\n this.followScroll();\n }\n }\n\n updateFullscreen(isFullscreen) {\n this.ui.toggleBtnActive(this.$toolbar.find('.btn-fullscreen'), isFullscreen);\n\n this.changeContainer(isFullscreen);\n }\n\n updateCodeview(isCodeview) {\n this.ui.toggleBtnActive(this.$toolbar.find('.btn-codeview'), isCodeview);\n if (isCodeview) {\n this.deactivate();\n } else {\n this.activate();\n }\n }\n\n activate(isIncludeCodeview) {\n let $btn = this.$toolbar.find('button');\n if (!isIncludeCodeview) {\n $btn = $btn.not('.btn-codeview').not('.btn-fullscreen');\n }\n this.ui.toggleBtn($btn, true);\n }\n\n deactivate(isIncludeCodeview) {\n let $btn = this.$toolbar.find('button');\n if (!isIncludeCodeview) {\n $btn = $btn.not('.btn-codeview').not('.btn-fullscreen');\n }\n this.ui.toggleBtn($btn, false);\n }\n}\n","import $ from 'jquery';\nimport env from '../core/env';\nimport key from '../core/key';\nimport func from '../core/func';\n\nexport default class LinkDialog {\n constructor(context) {\n this.context = context;\n\n this.ui = $.summernote.ui;\n this.$body = $(document.body);\n this.$editor = context.layoutInfo.editor;\n this.options = context.options;\n this.lang = this.options.langInfo;\n\n context.memo('help.linkDialog.show', this.options.langInfo.help['linkDialog.show']);\n }\n\n initialize() {\n const $container = this.options.dialogsInBody ? this.$body : this.options.container;\n const body = [\n '',\n ``,\n ``,\n '
',\n '',\n ``,\n ``,\n '
',\n !this.options.disableLinkTarget\n ? $('').append(this.ui.checkbox({\n className: 'sn-checkbox-open-in-new-window',\n text: this.lang.link.openInNewWindow,\n checked: true,\n }).render()).html()\n : '',\n $('').append(this.ui.checkbox({\n className: 'sn-checkbox-use-protocol',\n text: this.lang.link.useProtocol,\n checked: true,\n }).render()).html(),\n ].join('');\n\n const buttonClass = 'btn btn-primary note-btn note-btn-primary note-link-btn';\n const footer = ``;\n\n this.$dialog = this.ui.dialog({\n className: 'link-dialog',\n title: this.lang.link.insert,\n fade: this.options.dialogsFade,\n body: body,\n footer: footer,\n }).render().appendTo($container);\n }\n\n destroy() {\n this.ui.hideDialog(this.$dialog);\n this.$dialog.remove();\n }\n\n bindEnterKey($input, $btn) {\n $input.on('keypress', (event) => {\n if (event.keyCode === key.code.ENTER) {\n event.preventDefault();\n $btn.trigger('click');\n }\n });\n }\n\n /**\n * toggle update button\n */\n toggleLinkBtn($linkBtn, $linkText, $linkUrl) {\n this.ui.toggleBtn($linkBtn, $linkText.val() && $linkUrl.val());\n }\n\n /**\n * Show link dialog and set event handlers on dialog controls.\n *\n * @param {Object} linkInfo\n * @return {Promise}\n */\n showLinkDialog(linkInfo) {\n return $.Deferred((deferred) => {\n const $linkText = this.$dialog.find('.note-link-text');\n const $linkUrl = this.$dialog.find('.note-link-url');\n const $linkBtn = this.$dialog.find('.note-link-btn');\n const $openInNewWindow = this.$dialog\n .find('.sn-checkbox-open-in-new-window input[type=checkbox]');\n const $useProtocol = this.$dialog\n .find('.sn-checkbox-use-protocol input[type=checkbox]');\n\n this.ui.onDialogShown(this.$dialog, () => {\n this.context.triggerEvent('dialog.shown');\n\n // If no url was given and given text is valid URL then copy that into URL Field\n if (!linkInfo.url && func.isValidUrl(linkInfo.text)) {\n linkInfo.url = linkInfo.text;\n }\n\n $linkText.on('input paste propertychange', () => {\n // If linktext was modified by input events,\n // cloning text from linkUrl will be stopped.\n linkInfo.text = $linkText.val();\n this.toggleLinkBtn($linkBtn, $linkText, $linkUrl);\n }).val(linkInfo.text);\n\n $linkUrl.on('input paste propertychange', () => {\n // Display same text on `Text to display` as default\n // when linktext has no text\n if (!linkInfo.text) {\n $linkText.val($linkUrl.val());\n }\n this.toggleLinkBtn($linkBtn, $linkText, $linkUrl);\n }).val(linkInfo.url);\n\n if (!env.isSupportTouch) {\n $linkUrl.trigger('focus');\n }\n\n this.toggleLinkBtn($linkBtn, $linkText, $linkUrl);\n this.bindEnterKey($linkUrl, $linkBtn);\n this.bindEnterKey($linkText, $linkBtn);\n\n const isNewWindowChecked = linkInfo.isNewWindow !== undefined\n ? linkInfo.isNewWindow : this.context.options.linkTargetBlank;\n\n $openInNewWindow.prop('checked', isNewWindowChecked);\n\n const useProtocolChecked = linkInfo.url\n ? false : this.context.options.useProtocol;\n\n $useProtocol.prop('checked', useProtocolChecked);\n\n $linkBtn.one('click', (event) => {\n event.preventDefault();\n\n deferred.resolve({\n range: linkInfo.range,\n url: $linkUrl.val(),\n text: $linkText.val(),\n isNewWindow: $openInNewWindow.is(':checked'),\n checkProtocol: $useProtocol.is(':checked'),\n });\n this.ui.hideDialog(this.$dialog);\n });\n });\n\n this.ui.onDialogHidden(this.$dialog, () => {\n // detach events\n $linkText.off();\n $linkUrl.off();\n $linkBtn.off();\n\n if (deferred.state() === 'pending') {\n deferred.reject();\n }\n });\n\n this.ui.showDialog(this.$dialog);\n }).promise();\n }\n\n /**\n * @param {Object} layoutInfo\n */\n show() {\n const linkInfo = this.context.invoke('editor.getLinkInfo');\n\n this.context.invoke('editor.saveRange');\n this.showLinkDialog(linkInfo).then((linkInfo) => {\n this.context.invoke('editor.restoreRange');\n this.context.invoke('editor.createLink', linkInfo);\n }).fail(() => {\n this.context.invoke('editor.restoreRange');\n });\n }\n}\n","import $ from 'jquery';\nimport lists from '../core/lists';\nimport dom from '../core/dom';\n\nexport default class LinkPopover {\n constructor(context) {\n this.context = context;\n\n this.ui = $.summernote.ui;\n this.options = context.options;\n this.events = {\n 'summernote.keyup summernote.mouseup summernote.change summernote.scroll': () => {\n this.update();\n },\n 'summernote.disable summernote.dialog.shown summernote.blur': () => {\n this.hide();\n },\n };\n }\n\n shouldInitialize() {\n return !lists.isEmpty(this.options.popover.link);\n }\n\n initialize() {\n this.$popover = this.ui.popover({\n className: 'note-link-popover',\n callback: ($node) => {\n const $content = $node.find('.popover-content,.note-popover-content');\n $content.prepend(' ');\n },\n }).render().appendTo(this.options.container);\n const $content = this.$popover.find('.popover-content,.note-popover-content');\n\n this.context.invoke('buttons.build', $content, this.options.popover.link);\n\n this.$popover.on('mousedown', (e) => { e.preventDefault(); });\n }\n\n destroy() {\n this.$popover.remove();\n }\n\n update() {\n // Prevent focusing on editable when invoke('code') is executed\n if (!this.context.invoke('editor.hasFocus')) {\n this.hide();\n return;\n }\n\n const rng = this.context.invoke('editor.getLastRange');\n if (rng.isCollapsed() && rng.isOnAnchor()) {\n const anchor = dom.ancestor(rng.sc, dom.isAnchor);\n const href = $(anchor).attr('href');\n this.$popover.find('a').attr('href', href).text(href);\n\n const pos = dom.posFromPlaceholder(anchor);\n const containerOffset = $(this.options.container).offset();\n pos.top -= containerOffset.top;\n pos.left -= containerOffset.left;\n\n this.$popover.css({\n display: 'block',\n left: pos.left,\n top: pos.top,\n });\n } else {\n this.hide();\n }\n }\n\n hide() {\n this.$popover.hide();\n }\n}\n","import $ from 'jquery';\nimport env from '../core/env';\nimport key from '../core/key';\n\nexport default class ImageDialog {\n constructor(context) {\n this.context = context;\n this.ui = $.summernote.ui;\n this.$body = $(document.body);\n this.$editor = context.layoutInfo.editor;\n this.options = context.options;\n this.lang = this.options.langInfo;\n }\n\n initialize() {\n let imageLimitation = '';\n if (this.options.maximumImageFileSize) {\n const unit = Math.floor(Math.log(this.options.maximumImageFileSize) / Math.log(1024));\n const readableSize = (this.options.maximumImageFileSize / Math.pow(1024, unit)).toFixed(2) * 1 +\n ' ' + ' KMGTP'[unit] + 'B';\n imageLimitation = `${this.lang.image.maximumFileSize + ' : ' + readableSize}`;\n }\n\n const $container = this.options.dialogsInBody ? this.$body : this.options.container;\n const body = [\n '',\n '',\n '',\n imageLimitation,\n '
',\n '',\n '',\n '',\n '
',\n ].join('');\n const buttonClass = 'btn btn-primary note-btn note-btn-primary note-image-btn';\n const footer = ``;\n\n this.$dialog = this.ui.dialog({\n title: this.lang.image.insert,\n fade: this.options.dialogsFade,\n body: body,\n footer: footer,\n }).render().appendTo($container);\n }\n\n destroy() {\n this.ui.hideDialog(this.$dialog);\n this.$dialog.remove();\n }\n\n bindEnterKey($input, $btn) {\n $input.on('keypress', (event) => {\n if (event.keyCode === key.code.ENTER) {\n event.preventDefault();\n $btn.trigger('click');\n }\n });\n }\n\n show() {\n this.context.invoke('editor.saveRange');\n this.showImageDialog().then((data) => {\n // [workaround] hide dialog before restore range for IE range focus\n this.ui.hideDialog(this.$dialog);\n this.context.invoke('editor.restoreRange');\n\n if (typeof data === 'string') { // image url\n // If onImageLinkInsert set,\n if (this.options.callbacks.onImageLinkInsert) {\n this.context.triggerEvent('image.link.insert', data);\n } else {\n this.context.invoke('editor.insertImage', data);\n }\n } else { // array of files\n this.context.invoke('editor.insertImagesOrCallback', data);\n }\n }).fail(() => {\n this.context.invoke('editor.restoreRange');\n });\n }\n\n /**\n * show image dialog\n *\n * @param {jQuery} $dialog\n * @return {Promise}\n */\n showImageDialog() {\n return $.Deferred((deferred) => {\n const $imageInput = this.$dialog.find('.note-image-input');\n const $imageUrl = this.$dialog.find('.note-image-url');\n const $imageBtn = this.$dialog.find('.note-image-btn');\n\n this.ui.onDialogShown(this.$dialog, () => {\n this.context.triggerEvent('dialog.shown');\n\n // Cloning imageInput to clear element.\n $imageInput.replaceWith($imageInput.clone().on('change', (event) => {\n deferred.resolve(event.target.files || event.target.value);\n }).val(''));\n\n $imageUrl.on('input paste propertychange', () => {\n this.ui.toggleBtn($imageBtn, $imageUrl.val());\n }).val('');\n\n if (!env.isSupportTouch) {\n $imageUrl.trigger('focus');\n }\n\n $imageBtn.click((event) => {\n event.preventDefault();\n deferred.resolve($imageUrl.val());\n });\n\n this.bindEnterKey($imageUrl, $imageBtn);\n });\n\n this.ui.onDialogHidden(this.$dialog, () => {\n $imageInput.off();\n $imageUrl.off();\n $imageBtn.off();\n\n if (deferred.state() === 'pending') {\n deferred.reject();\n }\n });\n\n this.ui.showDialog(this.$dialog);\n });\n }\n}\n","import $ from 'jquery';\nimport lists from '../core/lists';\nimport dom from '../core/dom';\n\n/**\n * Image popover module\n * mouse events that show/hide popover will be handled by Handle.js.\n * Handle.js will receive the events and invoke 'imagePopover.update'.\n */\nexport default class ImagePopover {\n constructor(context) {\n this.context = context;\n this.ui = $.summernote.ui;\n\n this.editable = context.layoutInfo.editable[0];\n this.options = context.options;\n\n this.events = {\n 'summernote.disable summernote.blur': () => {\n this.hide();\n },\n };\n }\n\n shouldInitialize() {\n return !lists.isEmpty(this.options.popover.image);\n }\n\n initialize() {\n this.$popover = this.ui.popover({\n className: 'note-image-popover',\n }).render().appendTo(this.options.container);\n const $content = this.$popover.find('.popover-content,.note-popover-content');\n this.context.invoke('buttons.build', $content, this.options.popover.image);\n\n this.$popover.on('mousedown', (e) => { e.preventDefault(); });\n }\n\n destroy() {\n this.$popover.remove();\n }\n\n update(target, event) {\n if (dom.isImg(target)) {\n const position = $(target).offset();\n const containerOffset = $(this.options.container).offset();\n let pos = {};\n if (this.options.popatmouse) {\n pos.left = event.pageX - 20;\n pos.top = event.pageY;\n } else {\n pos = position;\n }\n pos.top -= containerOffset.top;\n pos.left -= containerOffset.left;\n\n this.$popover.css({\n display: 'block',\n left: pos.left,\n top: pos.top,\n });\n } else {\n this.hide();\n }\n }\n\n hide() {\n this.$popover.hide();\n }\n}\n","import $ from 'jquery';\nimport env from '../core/env';\nimport lists from '../core/lists';\nimport dom from '../core/dom';\n\nexport default class TablePopover {\n constructor(context) {\n this.context = context;\n\n this.ui = $.summernote.ui;\n this.options = context.options;\n this.events = {\n 'summernote.mousedown': (we, e) => {\n this.update(e.target);\n },\n 'summernote.keyup summernote.scroll summernote.change': () => {\n this.update();\n },\n 'summernote.disable summernote.blur': () => {\n this.hide();\n },\n };\n }\n\n shouldInitialize() {\n return !lists.isEmpty(this.options.popover.table);\n }\n\n initialize() {\n this.$popover = this.ui.popover({\n className: 'note-table-popover',\n }).render().appendTo(this.options.container);\n const $content = this.$popover.find('.popover-content,.note-popover-content');\n\n this.context.invoke('buttons.build', $content, this.options.popover.table);\n\n // [workaround] Disable Firefox's default table editor\n if (env.isFF) {\n document.execCommand('enableInlineTableEditing', false, false);\n }\n\n this.$popover.on('mousedown', (e) => { e.preventDefault(); });\n }\n\n destroy() {\n this.$popover.remove();\n }\n\n update(target) {\n if (this.context.isDisabled()) {\n return false;\n }\n\n const isCell = dom.isCell(target);\n\n if (isCell) {\n const pos = dom.posFromPlaceholder(target);\n const containerOffset = $(this.options.container).offset();\n pos.top -= containerOffset.top;\n pos.left -= containerOffset.left;\n\n this.$popover.css({\n display: 'block',\n left: pos.left,\n top: pos.top,\n });\n } else {\n this.hide();\n }\n\n return isCell;\n }\n\n hide() {\n this.$popover.hide();\n }\n}\n","import $ from 'jquery';\nimport env from '../core/env';\nimport key from '../core/key';\n\nexport default class VideoDialog {\n constructor(context) {\n this.context = context;\n\n this.ui = $.summernote.ui;\n this.$body = $(document.body);\n this.$editor = context.layoutInfo.editor;\n this.options = context.options;\n this.lang = this.options.langInfo;\n }\n\n initialize() {\n const $container = this.options.dialogsInBody ? this.$body : this.options.container;\n const body = [\n '',\n ``,\n ``,\n '
',\n ].join('');\n const buttonClass = 'btn btn-primary note-btn note-btn-primary note-video-btn';\n const footer = ``;\n\n this.$dialog = this.ui.dialog({\n title: this.lang.video.insert,\n fade: this.options.dialogsFade,\n body: body,\n footer: footer,\n }).render().appendTo($container);\n }\n\n destroy() {\n this.ui.hideDialog(this.$dialog);\n this.$dialog.remove();\n }\n\n bindEnterKey($input, $btn) {\n $input.on('keypress', (event) => {\n if (event.keyCode === key.code.ENTER) {\n event.preventDefault();\n $btn.trigger('click');\n }\n });\n }\n\n createVideoNode(url) {\n // video url patterns(youtube, instagram, vimeo, dailymotion, youku, mp4, ogg, webm)\n const ytRegExp = /\\/\\/(?:www\\.)?(?:youtu\\.be\\/|youtube\\.com\\/(?:embed\\/|v\\/|watch\\?v=|watch\\?.+&v=))([\\w|-]{11})(?:(?:[\\?&]t=)(\\S+))?$/;\n const ytRegExpForStart = /^(?:(\\d+)h)?(?:(\\d+)m)?(?:(\\d+)s)?$/;\n const ytMatch = url.match(ytRegExp);\n\n const igRegExp = /(?:www\\.|\\/\\/)instagram\\.com\\/p\\/(.[a-zA-Z0-9_-]*)/;\n const igMatch = url.match(igRegExp);\n\n const vRegExp = /\\/\\/vine\\.co\\/v\\/([a-zA-Z0-9]+)/;\n const vMatch = url.match(vRegExp);\n\n const vimRegExp = /\\/\\/(player\\.)?vimeo\\.com\\/([a-z]*\\/)*(\\d+)[?]?.*/;\n const vimMatch = url.match(vimRegExp);\n\n const dmRegExp = /.+dailymotion.com\\/(video|hub)\\/([^_]+)[^#]*(#video=([^_&]+))?/;\n const dmMatch = url.match(dmRegExp);\n\n const youkuRegExp = /\\/\\/v\\.youku\\.com\\/v_show\\/id_(\\w+)=*\\.html/;\n const youkuMatch = url.match(youkuRegExp);\n\n const qqRegExp = /\\/\\/v\\.qq\\.com.*?vid=(.+)/;\n const qqMatch = url.match(qqRegExp);\n\n const qqRegExp2 = /\\/\\/v\\.qq\\.com\\/x?\\/?(page|cover).*?\\/([^\\/]+)\\.html\\??.*/;\n const qqMatch2 = url.match(qqRegExp2);\n\n const mp4RegExp = /^.+.(mp4|m4v)$/;\n const mp4Match = url.match(mp4RegExp);\n\n const oggRegExp = /^.+.(ogg|ogv)$/;\n const oggMatch = url.match(oggRegExp);\n\n const webmRegExp = /^.+.(webm)$/;\n const webmMatch = url.match(webmRegExp);\n\n const fbRegExp = /(?:www\\.|\\/\\/)facebook\\.com\\/([^\\/]+)\\/videos\\/([0-9]+)/;\n const fbMatch = url.match(fbRegExp);\n\n let $video;\n if (ytMatch && ytMatch[1].length === 11) {\n const youtubeId = ytMatch[1];\n var start = 0;\n if (typeof ytMatch[2] !== 'undefined') {\n const ytMatchForStart = ytMatch[2].match(ytRegExpForStart);\n if (ytMatchForStart) {\n for (var n = [3600, 60, 1], i = 0, r = n.length; i < r; i++) {\n start += (typeof ytMatchForStart[i + 1] !== 'undefined' ? n[i] * parseInt(ytMatchForStart[i + 1], 10) : 0);\n }\n }\n }\n $video = $('