" element as soon as some rich text is
+ // written in a content editable div (for example, if a new line
+ // is added the div content will be "
"), so the emoji
+ // has to be added before the last " " (if any).
+ if (this.text.endsWith(' ')) {
+ this.text = this.text.substr(0, this.text.lastIndexOf(' ')) + emoji + ' '
+ } else {
+ this.text += emoji
+ }
+
+ return
+ }
+
+ // Although due to legacy reasons the API allows several ranges the
+ // specification requires the selection to always have a single
+ // range.
+ // https://developer.mozilla.org/en-US/docs/Web/API/Selection#Multiple_ranges_in_a_selection
+ const range = selection.getRangeAt(0)
+
+ // Deleting the contents also collapses the range to the start.
+ range.deleteContents()
+
+ const emojiTextNode = document.createTextNode(emoji)
+ range.insertNode(emojiTextNode)
+
+ this.text = contentEditable.innerHTML
+
+ range.setStartAfter(emojiTextNode)
+ },
+
},
}
@@ -286,6 +353,17 @@ export default {
background-color: transparent;
border: none;
}
+
+ // put a grey round background when popover is opened
+ // or hover-focused
+ &__icon:hover,
+ &__icon:focus,
+ &__icon:active {
+ opacity: $opacity_full;
+ // good looking on dark AND white bg
+ background-color: $icon-focus-bg;
+ }
+
}
}