:bug: fix #76

CHANGELOG.md

@@ -44,12 +44,13 @@
 * [80](https://github.com/Vanessa219/vditor/issues/80) ctrl+z
 * [81](https://github.com/Vanessa219/vditor/issues/81) 链接和图片嵌套问题 `修复缺陷`
 
-### v2.1.2 / 2020-01-20
+### v2.1.2 / 2020-01-21
 
 * [82](https://github.com/Vanessa219/vditor/issues/82) 文字拖动 `修复缺陷`
 * [74](https://github.com/Vanessa219/vditor/issues/74) anchor 中移除 . `改进功能`
 * [75](https://github.com/Vanessa219/vditor/issues/75) 表格输入自动完成优化 `改进功能`
 * [73](https://github.com/Vanessa219/vditor/issues/73) 添加链接卡片样式 `引入特性`
+* [76](https://github.com/Vanessa219/vditor/issues/76) 菜单选择图片类 Emoji 无法直接显示 `修复缺陷`
 * [70](https://github.com/Vanessa219/vditor/issues/70) 所见即所得模式下Table按钮重复点击会导致table嵌套，另外希望标题支持快捷键调整大小 `引入特性`
 * [69](https://github.com/Vanessa219/vditor/issues/69) 渲染块按 esc 可以进行退出代码块进行预览 `改进功能`
 * [68](https://github.com/Vanessa219/vditor/issues/68) 列表标记符自动优化 `改进功能`

src/ts/hint/index.ts

@@ -3,8 +3,9 @@ import {getSelectPosition} from "../editor/getSelectPosition";
 import {setSelectionFocus} from "../editor/setSelection";
 import {code160to32} from "../util/code160to32";
 import {getMarkdown} from "../util/getMarkdown";
-import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByClassName} from "../util/hasClosest";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
+import {insertHTML} from "../wysiwyg/insertHTML";
 import {processCodeRender} from "../wysiwyg/processCodeRender";
 import {getCursorPosition} from "./getCursorPosition";
 
@@ -87,7 +88,12 @@ export class Hint {
         if (vditor.currentMode === "wysiwyg") {
             range.setStart(range.startContainer, range.startContainer.textContent.lastIndexOf(splitChar));
             range.deleteContents();
-            range.insertNode(document.createTextNode(value));
+            if (value.indexOf(":") > -1) {
+                insertHTML(vditor.lute.SpinVditorDOM(value), vditor);
+                range.insertNode(document.createTextNode(" "));
+            } else {
+                range.insertNode(document.createTextNode(value));
+            }
             range.collapse(false);
             setSelectionFocus(range);
 

src/ts/toolbar/Emoji.ts

@@ -2,6 +2,7 @@ import emojiSVG from "../../assets/icons/emoji.svg";
 import {insertText} from "../editor/insertText";
 import {setSelectionFocus} from "../editor/setSelection";
 import {getEventName} from "../util/getEventName";
+import {insertHTML} from "../wysiwyg/insertHTML";
 import {MenuItem} from "./MenuItem";
 
 export class Emoji extends MenuItem {
@@ -63,7 +64,12 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 const value = element.getAttribute("data-value");
                 if (vditor.currentMode === "wysiwyg") {
                     const range = getSelection().getRangeAt(0);
-                    range.insertNode(document.createTextNode(value));
+                    if (value.indexOf(":") > -1) {
+                        insertHTML(vditor.lute.SpinVditorDOM(value), vditor);
+                        range.insertNode(document.createTextNode(" "));
+                    } else {
+                        range.insertNode(document.createTextNode(value));
+                    }
                     range.collapse(false);
                     setSelectionFocus(range);
                 } else {

src/ts/wysiwyg/highlightToolbar.ts

@@ -374,9 +374,14 @@ export const highlightToolbar = (vditor: IVditor) => {
 
         // img popover
         let imgElement: HTMLImageElement;
-        if (range.startContainer.nodeType !== 3 && range.startContainer.childNodes.length > range.startOffset &&
-            range.startContainer.childNodes[range.startOffset].nodeName === "IMG") {
-            imgElement = range.startContainer.childNodes[range.startOffset] as HTMLImageElement;
+        if ((range.startContainer.nodeType !== 3 && range.startContainer.childNodes.length > range.startOffset &&
+            range.startContainer.childNodes[range.startOffset].nodeName === "IMG") ||
+            (range.startContainer.nodeType === 3 && range.startContainer.textContent.length === range.startOffset &&
+                range.startContainer.nextSibling.nodeType !== 3 &&
+                (range.startContainer as HTMLElement).nextElementSibling.tagName === "IMG")) {
+            // 光标在图片前面，或在文字后面
+            imgElement = range.startContainer.childNodes[range.startOffset] as HTMLImageElement ||
+                range.startContainer.nextSibling as HTMLImageElement;
             vditor.wysiwyg.popover.innerHTML = "";
             const updateImg = () => {
                 imgElement.setAttribute("src", input.value);

src/ts/wysiwyg/processKeydown.ts

@@ -532,4 +532,4 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     }
 
     return false;
-}
+};