Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/contentco/quill-emoji in…
Browse files Browse the repository at this point in the history 
…to develop
  • Loading branch information
@himynameistimli
himynameistimli committed Oct 7, 2018
2 parents f14d5a6 + 717bcf7 commit 042f95e
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 110 deletions.
2 changes: 1 addition & 1 deletion dist/quill-emoji.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/quill-emoji.js
View file

Large diffs are not rendered by default.

61 changes: 18 additions & 43 deletions src/format-emoji-blot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,28 @@ import Quill from 'quill';
const Embed = Quill.import('blots/embed');

class EmojiBlot extends Embed {
static create(value) {
let node = super.create();
if (typeof value === 'object') {
node.classList.add("emoji");
node.classList.add("ap");
node.classList.add("ap-"+value.name);
let dataUrl = 'data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
node.setAttribute('src',dataUrl);
node.setAttribute('data-resize', 'no');
}
else if(typeof value === 'string'){
node.setAttribute('src',value);
}
return node;
}

static formats(node) {
// We still need to report unregistered src formats
let format = {};
if (node.hasAttribute('class')) {
format.class = node.getAttribute('class');
}
if (node.hasAttribute('alt')) {
format.width = node.getAttribute('alt');
}
return format;
}

static value(node) {
return node.getAttribute('src');
static create(value) {
let node = super.create();
if (typeof value === 'object') {
node.setAttribute('data-name', value.name);
let emojiSpan = document.createElement('span');
emojiSpan.classList.add(this.emojiClass);
emojiSpan.classList.add(this.emojiPrefix + value.name);
emojiSpan.innerText = String.fromCodePoint('0x' + value.unicode);
node.appendChild(emojiSpan);
}
return node;
}

format(name, value) {

if (name === 'class' || name === 'alt') {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name, value);
}
} else {
super.format(name, value);
}
}
static value(node) {
return node.contentText;
}
}

EmojiBlot.blotName = 'emoji';
EmojiBlot.tagName = 'img';
EmojiBlot.className = 'ql-emojiblot';
EmojiBlot.tagName = 'span';
EmojiBlot.emojiClass = 'ap';
EmojiBlot.emojiPrefix = 'ap-';

export default EmojiBlot;
94 changes: 32 additions & 62 deletions src/module-emoji.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import Quill from 'quill';
import Fuse from 'fuse.js';
import emojiList from './emoji-list.js';

const Delta = Quill.import('delta');
const Module = Quill.import('core/module');

class ShortNameEmoji extends Module {
Expand Down Expand Up @@ -64,8 +63,9 @@ class ShortNameEmoji extends Module {

triggerPicker(range, context) {
if (this.open) return true;
if (range.length > 0)
if (range.length > 0) {
this.quill.deleteText(range.index, range.length, Quill.sources.USER);
}

this.quill.insertText(range.index, ":", "emoji-shortname", Quill.sources.USER);
const atSignBounds = this.quill.getBounds(range.index);
Expand All @@ -76,18 +76,15 @@ class ShortNameEmoji extends Module {
let paletteMaxPos = atSignBounds.left + 250;
if (paletteMaxPos > this.quill.container.offsetWidth) {
this.container.style.left = (atSignBounds.left - 250)+ "px";
}
else{
} else{
this.container.style.left = atSignBounds.left + "px";
}


this.container.style.top = atSignBounds.top + atSignBounds.height + "px",
this.open = true;
this.container.style.top = atSignBounds.top + atSignBounds.height + "px";
this.open = true;

this.quill.on('text-change', this.onTextChange);
this.quill.once('selection-change', this.onSelectionChange);
this.update();
this.onOpen && this.onOpen();
}

Expand All @@ -107,10 +104,13 @@ class ShortNameEmoji extends Module {
}
//Using: fuse.js
this.query = this.quill.getText(this.atIndex + 1, sel - this.atIndex - 1);
if(!event && this.isWhiteSpace(this.query)){
this.close(null);
return;
}

try {
if(event && this.isWhiteSpace(this.query)){
this.close(null);
return;
}
} catch(e) { console.warn(e); }

this.query = this.query.trim();

Expand All @@ -135,20 +135,23 @@ class ShortNameEmoji extends Module {
}

renderCompletions(emojis) {
if (event) {
if (event.key === "Enter" || event.keyCode === 13) {
this.enterEmoji(emojis[0]);
this.container.style.display = "none";
return;
}
else if (event.key === 'Tab' || event.keyCode === 9) {
this.quill.disable();
this.buttons[0].classList.remove('emoji-active');
this.buttons[1].focus();
return;
try {
if (event) {
if (event.key === "Enter" || event.keyCode === 13) {
this.close(emojis[0], 1);
this.container.style.display = "none";
return;
}
else if (event.key === 'Tab' || event.keyCode === 9) {
this.quill.disable();
this.buttons[0].classList.remove('emoji-active');
this.buttons[1].focus();
return;
}
}
}
if (event) {return;}
if (event) {return;}
} catch(e) { console.warn(e); }

while (this.container.firstChild){
this.container.removeChild(this.container.firstChild);
}
Expand Down Expand Up @@ -194,7 +197,7 @@ class ShortNameEmoji extends Module {
'li', {},
makeElement(
'button', {type: "button"},
makeElement("span", {className: "emoji ap ap-" + emoji.name, innerHTML: emoji.code_decimal }),
makeElement("span", {className: "button-emoji ap ap-" + emoji.name, innerHTML: emoji.code_decimal }),
//makeElement('span', {className: "matched"}, this.query),
//makeElement('span', {className: "unmatched"}, emoji.shortname.slice(this.query.length+1))
makeElement('span', {className: "unmatched"}, emoji.shortname)
Expand Down Expand Up @@ -228,54 +231,21 @@ class ShortNameEmoji extends Module {
buttons[0].classList.add('emoji-active');
}

close(value) {
close(value, trailingDelete = 0) {
this.quill.enable();
this.container.style.display = "none";
while (this.container.firstChild) this.container.removeChild(this.container.firstChild);
this.quill.off('selection-change', this.onSelectionChange);
this.quill.off('text-change', this.onTextChange);
if (value) {
const {name, unicode, shortname, code_decimal} = value;
this.quill.deleteText(this.atIndex, this.query.length + 1, Quill.sources.USER);
this.quill.deleteText(this.atIndex, this.query.length + 1 + trailingDelete, Quill.sources.USER);
this.quill.insertEmbed(this.atIndex, 'emoji', value);
setTimeout(() => this.quill.setSelection(this.atIndex + 1), 0);
}
this.quill.focus();
this.open = false;
this.onClose && this.onClose(value);
}

enterEmoji(value){
if (value) {
const {name, unicode, shortname,code_decimal} = value;
let emoji_icon_html = makeElement("span", { className: "ico", innerHTML: ' ' + code_decimal + ' ' });
let emoji_icon = emoji_icon_html.innerHTML;
let delta = new Delta();
let currentText = this.quill.getSelection();
let ops = [];
if (this.atIndex > 0) {
let endRetain = currentText.index - this.query.length;
if (endRetain > 2) {
endRetain = endRetain - 2;
}
ops.push({ retain: endRetain});
}
ops = ops.concat([
{ delete: this.query.length + 1},
{
"insert": { "emoji":"data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" },
"attributes": { "class": "emoji ap ap-" + value.name + ""}
},
{ delete: 1},
]);
this.quill.updateContents({
ops: ops
});
}

this.quill.blur();
this.open = false;
this.onClose && this.onClose(value);
}
}

ShortNameEmoji.DEFAULTS = {
Expand Down
5 changes: 3 additions & 2 deletions src/scss/core/_emoji.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

.ap {
display: inline-block;
display: inline-flex;
height: 20px;
width: 20px;
background-image: url('../../sheet_apple_64.png');
Expand All @@ -18,8 +18,9 @@
box-sizing: border-box;
// For emoji fallback
font-size: 20px;
line-height: 25px;
line-height: 1;
overflow: hidden;
margin-top: -3px;
}

.ap-copyright {
Expand Down
7 changes: 6 additions & 1 deletion src/scss/core/_styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,11 @@ button.ql-table[value="append-col"]::after { content: "COLS+"; }
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><g fill="%236F6D70" fill-rule="nonzero"><path d="M25.46 11.2s-2.67 2.58-3.94 3.95l-10.6-2.13c-.12-.02-.25.04-.3.15l-.8 1.6c-.07.13 0 .3.12.37l7.75 3.88L13.4 24c-.5-.16-1.1-.33-1.66-.3-.3 0-.6.06-.85.25-.3.2-.4.5-.4.9s.1.74.3.98l3.2 3.23c.3.23.7.34 1 .34.4 0 .7-.13.9-.37.2-.23.24-.53.25-.84 0-.6-.15-1.2-.3-1.7l4.97-4.3 3.9 7.76c.06.13.23.2.36.12l1.6-.8c.13-.07.2-.2.17-.3l-2.12-10.6c1.4-1.28 3.95-3.95 3.96-3.96.86-.88 1.4-1.93 1.4-2.87 0-.5-.17-1-.5-1.33-.37-.36-.87-.5-1.38-.5-.95 0-2 .52-2.88 1.4zm2.87-4.4c1.28 0 2.54.44 3.5 1.4.93.93 1.38 2.2 1.38 3.47 0 1.8-.8 3.54-2.2 4.94-.4.5-1.7 1.8-2.8 2.9l1.8 9c.3 1.5-.4 2.9-1.7 3.6l-1.62.8c-1.62.8-3.6.1-4.36-1.4L20 27.1l-.7.6v.62c-.03.92-.28 1.8-.92 2.6-.8 1-1.98 1.5-3.22 1.5-1.03 0-2.12-.37-2.96-1.1l-.16-.14-3.22-3.22-.1-.12c-.75-.83-1.12-1.9-1.12-3 0-1.24.5-2.43 1.48-3.22.8-.6 1.68-.9 2.62-.9h.62l.6-.7-4.27-2.1c-1.65-.8-2.33-2.8-1.52-4.4l.8-1.64c.67-1.3 2.14-2.02 3.57-1.73l9 1.8 1.36-1.33 1.5-1.48c1.42-1.4 3.17-2.27 4.97-2.27z"/></g></g></svg>');
}

.emoji{
.button-emoji {
margin-bottom: -5px;
}

.ql-emojiblot {
display: inline-flex;
align-items: center;
}

0 comments on commit 042f95e

Please sign in to comment.