cherry-muse 1.0.1

package/src/core/hooks/Suggester.js

@@ -0,0 +1,759 @@
+// @ts-nocheck
+/**
+ * Tencent is pleased to support the open source community by making CherryMarkdown available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ * The below software in this distribution may have been modified by THL A29 Limited ("Tencent Modifications").
+ *
+ * All Tencent Modifications are Copyright (C) THL A29 Limited.
+ *
+ * CherryMarkdown is licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import escapeRegExp from 'lodash/escapeRegExp';
+import SyntaxBase from '@/core/SyntaxBase';
+import { systemSuggests } from '@/core/hooks/SuggestList';
+import { Pass } from 'codemirror/src/util/misc';
+import { isLookbehindSupported } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+import { isBrowser } from '@/utils/env';
+import mergeWith from 'lodash/mergeWith';
+import { Theme } from '@/Theme';
+
+/**
+ * @typedef {import('codemirror')} CodeMirror
+ */
+
+/**
+ * @typedef { Object } SuggestListItemObject 推荐列表项对象
+ * @property { string } icon 图标
+ * @property { string } label 候选列表回显的内容
+ * @property { string } value 点击候选项的时候回填的值
+ * @property { string } keyword 关键词，通过关键词控制候选项的显隐
+ * @typedef { SuggestListItemObject | string } SuggestListItem 推荐列表项
+ * @typedef { Array<SuggestListItem> } SuggestList 推荐列表
+ */
+
+/**
+ * @typedef {object} SuggesterConfigItem
+ * @property {function(string, function(SuggestList): void): void} suggestList
+ * @property {string} keyword
+ * @property {function} suggestListRender
+ * @property {function} echo
+ * @typedef {object} SuggesterConfig
+ * @property {Array<SuggesterConfigItem>} suggester
+ */
+
+export default class Suggester extends SyntaxBase {
+  static HOOK_NAME = 'suggester';
+
+  constructor({ config }) {
+    /**
+     * config.suggester 内容
+     * [{
+     *     keyword:':'  # 唤醒关键字,
+     *     data(keywords,callback){ #自己处理候选列表h
+     *         callback([
+     *             {
+     *                 icon:'',
+     *                 key:'',显示名称
+     *                 value:'',设置的值
+     *             }
+     *         ]);
+     *         //callback(false)则表示终止
+     *     }
+     * },
+     * {
+     *     keyword:'@'  # 唤醒关键字,
+     *     data:[ //静态列表
+     *             {
+     *                 icon:'',
+     *                 key:'',显示名称
+     *                 keyword:'',二次匹配的关键字
+     *                 value:'',设置的值
+     *             }
+     *         ]
+     * }]
+     *
+     */
+
+    super({ needCache: true });
+
+    this.config = config;
+    this.RULE = this.rule();
+    this.suggesterPanel = new SuggesterPanel();
+  }
+
+  afterInit(callback) {
+    // node环境下直接跳过输入联想
+    if (!isBrowser()) {
+      return;
+    }
+    if (typeof callback === 'function') {
+      callback();
+    }
+    this.initConfig(this.config);
+  }
+
+  /**
+   * 初始化配置
+   * @param {SuggesterConfig} config
+   */
+  initConfig(config) {
+    let { suggester } = config;
+
+    this.suggester = [];
+    if (!suggester) {
+      suggester = [];
+    }
+    for (const suggest of mergeWith(systemSuggests, suggester)) {
+      for (const keyword of suggest.keyword) {
+        suggester.push({
+          keyword,
+          data: suggest.data,
+        });
+      }
+    }
+    suggester.forEach((configItem) => {
+      if (!configItem.data) {
+        console.warn('[cherry-suggester]: the suggestList of config is missing.');
+        return;
+      }
+
+      if (!configItem.keyword) {
+        configItem.keyword = '@';
+      }
+
+      this.suggester[configItem.keyword] = configItem;
+    });
+
+    // 反复初始化时， 缓存还在， dom 已更新情况
+    if (this.suggesterPanel.hasEditor()) {
+      this.suggesterPanel.editor = null;
+    }
+  }
+
+  makeHtml(str) {
+    if (!this.RULE.reg) return str;
+    if (!this.suggesterPanel.hasEditor() && isBrowser()) {
+      const { editor } = this.$engine.$cherry;
+      this.suggesterPanel.setEditor(editor);
+      this.suggesterPanel.setSuggester(this.suggester);
+      this.suggesterPanel.bindEvent();
+    }
+    if (isLookbehindSupported()) {
+      return str.replace(this.RULE.reg, this.toHtml.bind(this));
+    }
+    return replaceLookbehind(str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+  }
+
+  toHtml(wholeMatch, leadingChar, keyword, text) {
+    if (text) {
+      return (
+        this.suggester[keyword]?.echo?.call(this, text) ||
+        `${leadingChar}<span class="cherry-suggestion">${keyword}${text}</span>`
+      );
+    }
+    if (this.suggester[keyword]?.echo === false) {
+      return `${leadingChar}`;
+    }
+    if (!this.suggester[keyword]) {
+      return leadingChar + text;
+    }
+    return text ? leadingChar + text : `${leadingChar}`;
+  }
+
+  rule() {
+    if (!this.suggester || Object.keys(this.suggester).length <= 0) {
+      return {};
+    }
+    const keys = Object.keys(this.suggester)
+      .map((key) => escapeRegExp(key))
+      .join('|');
+    const reg = new RegExp(
+      `${isLookbehindSupported() ? '((?<!\\\\))[ ]' : '(^|[^\\\\])[ ]'}(${keys})(([^${keys}\\s])+)`,
+      'g',
+    );
+    return /** @type {any} */ ({
+      reg,
+    });
+  }
+
+  mounted() {
+    if (!this.suggesterPanel.hasEditor() && isBrowser()) {
+      const { editor } = this.$engine.$cherry;
+      this.suggesterPanel.setEditor(editor);
+      this.suggesterPanel.setSuggester(this.suggester);
+      this.suggesterPanel.bindEvent();
+      this.suggesterPanel.setCherry(this.$engine.$cherry);
+    }
+  }
+}
+
+export function getSuggestList(_list, _key, _word, callback) {
+  // 将word全转成小写
+  const word = _word.toLowerCase();
+  // 加个空格就直接退出联想
+  if (/^\s$/.test(word)) {
+    callback(false);
+    return;
+  }
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& 表示整个匹配到的字符串
+  }
+  const keyword = word
+    .replace(/\s+/g, '') // 删掉空格，避免产生不必要的空数组元素
+    .replace(new RegExp(`^${escapeRegExp(_key)}`, 'g'), '') // 删掉word当中suggesterKeywords出现的字符
+    .split('')
+    .map((item) => escapeRegExp(item))
+    .join('.*?');
+
+  const test = new RegExp(`^.*?${keyword}.*?$`, 'i');
+
+  const suggestList = _list.filter((item) => {
+    return !word || test.test(item.keyword);
+  });
+
+  // 当没有候选项时直接推出联想
+  callback(suggestList.length === 0 ? false : suggestList);
+}
+
+/**
+ *
+ * @param {Cherry} $cherry
+ * @param {array} list
+ * @returns {*[]}
+ */
+export function expandList($cherry, list) {
+  const retList = [];
+  list.forEach(function (suggest) {
+    if (suggest.toolbar) {
+      const toolbar = $cherry.toolbar.menus.hooks[suggest.toolbar];
+      if (toolbar) {
+        if (toolbar.subMenuConfig && toolbar.subMenuConfig.length > 0) {
+          toolbar.subMenuConfig.forEach(function (menu) {
+            const menuItem = {};
+            menuItem.icon = menu.iconName;
+            menuItem.key = $cherry.locale[menu.name] ?? menu.name;
+            menuItem.keyword = `${suggest.keyword} ${menu.name}`;
+            menuItem.goLeft = menu.goLeft;
+            menuItem.goTop = menu.goTop;
+            menuItem.value = function (event, dom) {
+              menu.dom = dom;
+              return menu.onclick();
+            };
+            retList.push(menuItem);
+          });
+        } else {
+          suggest.icon = toolbar.iconName;
+          suggest.goLeft = toolbar.goLeft;
+          suggest.goTop = toolbar.goTop;
+          suggest.key = $cherry.locale[toolbar.name] ?? toolbar.name;
+          suggest.value = function (event, dom) {
+            toolbar.dom = dom;
+            toolbar.fire(event, toolbar);
+            return '';
+          };
+          retList.push(suggest);
+        }
+      }
+    } else {
+      suggest.key = $cherry.locale[suggest.key] ?? suggest.key;
+      retList.push(suggest);
+    }
+  });
+  return retList;
+}
+class SuggesterPanel {
+  constructor() {
+    this.searchCache = false;
+    this.searchKeyCache = [];
+    this.optionList = [];
+    this.cursorMove = true;
+    this.suggesterConfig = {};
+    this.$cherry = null;
+  }
+  setCherry($cherry) {
+    this.$cherry = $cherry;
+  }
+
+  /**
+   * 如果没有panel，则尝试初始化一个，在node模式不初始化
+   */
+  tryCreatePanel() {
+    if (!this.$suggesterPanel && isBrowser() && document) {
+      document?.body?.appendChild(this.createDom(this.panelWrap));
+      this.$suggesterPanel = document?.querySelector('.cherry-suggester-panel');
+    }
+  }
+
+  panelWrap = `<div class="cherry-suggester-panel cherry__theme__${Theme.getTheme()}"></div>`;
+
+  hasEditor() {
+    return !!this.editor && !!this.editor.editor.display && !!this.editor.editor.display.wrapper;
+  }
+
+  /**
+   * 设置编辑器
+   * @param {import('@/Editor').default} editor
+   */
+  setEditor(editor) {
+    this.editor = editor;
+  }
+
+  setSuggester(suggester) {
+    this.suggesterConfig = suggester;
+  }
+
+  bindEvent() {
+    let keyAction = false;
+    this.editor.editor.on('change', (codemirror, evt) => {
+      keyAction = true;
+      this.onCodeMirrorChange(codemirror, evt);
+    });
+
+    this.editor.editor.on('keydown', (codemirror, evt) => {
+      keyAction = true;
+      if (this.enableRelate()) {
+        this.onKeyDown(codemirror, evt);
+      }
+    });
+
+    this.editor.editor.on('cursorActivity', () => {
+      // 当编辑区光标位置改变时触发
+      if (!keyAction) {
+        this.stopRelate();
+      }
+      keyAction = false;
+    });
+
+    const extraKeys = this.editor.editor.getOption('extraKeys');
+    const decorateKeys = ['Up', 'Down', 'Enter'];
+    decorateKeys.forEach((key) => {
+      if (typeof extraKeys[key] === 'function') {
+        const proxyTarget = extraKeys[key];
+        extraKeys[key] = (codemirror) => {
+          if (this.cursorMove) {
+            const res = proxyTarget.call(codemirror, codemirror);
+
+            if (res) {
+              return res;
+            }
+            // logic to decide whether to move up or not
+            // return Pass.toString();
+          }
+        };
+      } else if (!extraKeys[key]) {
+        extraKeys[key] = () => {
+          if (this.cursorMove) {
+            // logic to decide whether to move up or not
+            return Pass.toString();
+          }
+        };
+      } else if (typeof extraKeys[key] === 'string') {
+        const command = extraKeys[key];
+        extraKeys[key] = (codemirror) => {
+          if (this.cursorMove) {
+            this.editor.editor.execCommand(command);
+
+            // logic to decide whether to move up or not
+            // return Pass.toString();
+          }
+        };
+      }
+    });
+
+    this.editor.editor.setOption('extraKeys', extraKeys);
+
+    this.editor.editor.on('scroll', (codemirror, evt) => {
+      if (!this.searchCache) {
+        return;
+      }
+      // 当编辑器滚动时触发
+      this.relocatePanel(this.editor.editor);
+    });
+
+    this.onClickPanelItem();
+  }
+
+  onClickPanelItem() {
+    this.tryCreatePanel();
+    this.$suggesterPanel.addEventListener(
+      'click',
+      (evt) => {
+        const idx = isChildNode(this.$suggesterPanel, evt.target);
+        if (idx > -1) {
+          this.pasteSelectResult(idx, evt, evt.target);
+        }
+        this.stopRelate();
+      },
+      false,
+    );
+
+    function isChildNode(parent, node) {
+      let res = -1;
+      parent.childNodes.forEach((item, idx) => (item === node ? (res = idx) : ''));
+      return res;
+    }
+  }
+
+  showSuggesterPanel({ left, top, items }) {
+    this.tryCreatePanel();
+    if (!this.$suggesterPanel && isBrowser()) {
+      document.body.appendChild(this.createDom(this.panelWrap));
+      this.$suggesterPanel = document.querySelector('.cherry-suggester-panel');
+    }
+    this.updatePanel(items);
+    this.$suggesterPanel.style.left = `${left}px`;
+    this.$suggesterPanel.style.top = `${top}px`;
+    this.$suggesterPanel.style.display = 'block';
+    this.$suggesterPanel.style.position = 'absolute';
+    this.$suggesterPanel.style.zIndex = '100';
+  }
+
+  hideSuggesterPanel() {
+    this.tryCreatePanel();
+    // const $suggesterPanel = document.querySelector('.cherry-suggester-panel');
+    if (this.$suggesterPanel) {
+      this.$suggesterPanel.style.display = 'none';
+    }
+  }
+
+  /**
+   * 更新suggesterPanel
+   * @param {SuggestList} suggestList
+   */
+  updatePanel(suggestList) {
+    this.tryCreatePanel();
+    let defaultValue = suggestList
+      .map((suggest, idx) => {
+        if (typeof suggest === 'object' && suggest !== null) {
+          let renderContent = suggest.key;
+          if (suggest?.icon) {
+            renderContent = `<span class="material-symbols-outlined" style="transform: translateY(0%);top: 0;vertical-align: middle;">${suggest.icon}</span>${renderContent}`;
+          }
+          return this.renderPanelItem(renderContent, idx === 0);
+        }
+        return this.renderPanelItem(suggest, idx === 0);
+      })
+      .join('');
+    /**
+     * @type { SuggesterConfigItem }
+     */
+    const suggesterConfig = this.suggesterConfig[this.keyword];
+    // 用户自定义渲染逻辑 suggestListRender
+    if (suggesterConfig && typeof suggesterConfig.suggestListRender === 'function') {
+      defaultValue = suggesterConfig.suggestListRender.call(this, suggestList) || defaultValue;
+    }
+
+    this.$suggesterPanel.innerHTML = ''; // 清空
+    if (typeof defaultValue === 'string') {
+      this.$suggesterPanel.innerHTML = defaultValue;
+    } else if (Array.isArray(defaultValue) && defaultValue.length > 0) {
+      defaultValue.forEach((item) => {
+        this.$suggesterPanel.appendChild(item);
+      });
+    } else if (typeof defaultValue === 'object' && defaultValue.nodeType === 1) {
+      this.$suggesterPanel.appendChild(defaultValue);
+    }
+  }
+
+  /**
+   * 渲染suggesterPanel item
+   * @param {string} item 渲染内容
+   * @param {boolean} selected 是否选中
+   * @returns {string} html
+   */
+  renderPanelItem(item, selected) {
+    if (selected) {
+      return `<div class="cherry-suggester-panel__item cherry-suggester-panel__item--selected">${item}</div>`;
+    }
+    return `<div class="cherry-suggester-panel__item">${item}</div>`;
+  }
+
+  createDom(string = '') {
+    if (!this.template) {
+      this.template = document.createElement('div');
+    }
+
+    this.template.innerHTML = string.trim();
+
+    // Change this to div.childNodes to support multiple top-level nodes
+    const frag = document.createDocumentFragment();
+    Array.prototype.map.call(this.template.childNodes, (item, idx) => {
+      frag.appendChild(item);
+    });
+    return frag;
+  }
+
+  // 面板重定位
+  relocatePanel(codemirror) {
+    // 找到光标位置来确定候选框位置
+    let $cursor = document.querySelector('.CodeMirror-cursors .CodeMirror-cursor');
+    // 当editor选中某一内容时，".CodeMirror-cursor"会消失，此时通过定位".selected"来确定候选框位置
+    if (!$cursor) {
+      $cursor = document.querySelector('.CodeMirror-selected');
+    }
+    if (!$cursor) {
+      return false;
+    }
+    const pos = codemirror.getCursor();
+    const lineHeight = codemirror.lineInfo(pos.line).handle.height;
+    const rect = $cursor.getBoundingClientRect();
+    const top = rect.top + lineHeight;
+    const { left } = rect;
+    this.showSuggesterPanel({ left, top, items: this.optionList });
+  }
+
+  /**
+   * 获取光标位置
+   * @param {CodeMirror} codemirror
+   * @returns {{ left: number, top: number }}
+   */
+  getCursorPos(codemirror) {
+    const $cursor = document.querySelector('.CodeMirror-cursors .CodeMirror-cursor');
+    if (!$cursor) return null;
+    const pos = codemirror.getCursor();
+    const lineHeight = codemirror.lineInfo(pos.line).handle.height;
+    const rect = $cursor.getBoundingClientRect();
+    const top = rect.top + lineHeight;
+    const { left } = rect;
+    return { left, top };
+  }
+
+  // 开启关联
+  startRelate(codemirror, keyword, from) {
+    this.cursorFrom = from;
+    this.keyword = keyword;
+    this.searchCache = true;
+    this.relocatePanel(codemirror);
+  }
+
+  // 关闭关联
+  stopRelate() {
+    this.hideSuggesterPanel();
+    this.cursorFrom = null;
+    this.cursorTo = null;
+    this.keyword = '';
+    this.searchKeyCache = [];
+    this.searchCache = false;
+    this.cursorMove = true;
+    this.optionList = [];
+  }
+
+  /**
+   * 粘贴选择结果
+   * @param {number} idx 选择的结果索引
+   * @param {KeyboardEvent} evt 键盘事件
+   * @param dom
+   */
+  pasteSelectResult(idx, evt, dom) {
+    if (!this.cursorTo) {
+      this.cursorTo = JSON.parse(JSON.stringify(this.cursorFrom));
+    }
+    if (!this.cursorTo) {
+      return;
+    }
+    this.cursorTo.ch += 1;
+    const { cursorFrom, cursorTo } = this; // 缓存光标位置
+    if (this.optionList[idx]) {
+      let result = '';
+      if (
+        typeof this.optionList[idx] === 'object' &&
+        this.optionList[idx] !== null &&
+        typeof this.optionList[idx].value === 'string'
+      ) {
+        result = this.optionList[idx].value;
+      }
+      if (
+        typeof this.optionList[idx] === 'object' &&
+        this.optionList[idx] !== null &&
+        typeof this.optionList[idx].value === 'function'
+      ) {
+        this.editor.editor.replaceRange('', cursorFrom, cursorTo);
+        result = this.optionList[idx].value(evt, dom);
+      }
+      if (typeof this.optionList[idx] === 'string') {
+        result = ` ${this.keyword}${this.optionList[idx]} `;
+      }
+      if (result) {
+        this.editor.editor.replaceRange(result, cursorFrom, cursorTo);
+      }
+      // 控制光标左移一位或者选中某个范围
+      if (this.optionList[idx].goLeft) {
+        const cursor = this.editor.editor.getCursor();
+        this.editor.editor.setCursor(cursor.line, cursor.ch - this.optionList[idx].goLeft);
+      }
+      // 控制光标上移若干位
+      if (this.optionList[idx].goTop) {
+        const cursor = this.editor.editor.getCursor();
+        this.editor.editor.setCursor(cursor.line - this.optionList[idx].goTop, cursor.ch);
+      }
+      if (this.optionList[idx].selection) {
+        const { line } = this.editor.editor.getCursor();
+        const { ch } = this.editor.editor.getCursor();
+        this.editor.editor.setSelection(
+          { line, ch: ch - this.optionList[idx].selection.from },
+          { line, ch: ch - this.optionList[idx].selection.to },
+        );
+      }
+    }
+  }
+
+  /**
+   * 寻找当前选中项的索引
+   * @returns {number}
+   */
+  findSelectedItemIndex() {
+    return Array.prototype.findIndex.call(this.$suggesterPanel.childNodes, (item) =>
+      item.classList.contains('cherry-suggester-panel__item--selected'),
+    );
+  }
+
+  findSelectedItem() {
+    return Array.prototype.find.call(this.$suggesterPanel.childNodes, (item) =>
+      item.classList.contains('cherry-suggester-panel__item--selected'),
+    );
+  }
+
+  enableRelate() {
+    return this.searchCache;
+  }
+
+  /**
+   *  codeMirror change事件
+   * @param {CodeMirror.Editor} codemirror
+   * @param {CodeMirror.EditorChange} evt
+   * @returns
+   */
+  onCodeMirrorChange(codemirror, evt) {
+    const { text, from, to, origin } = evt;
+    const changeValue = text.length === 1 ? text[0] : '';
+
+    // 首次输入命中关键词的时候开启联想
+    if (!this.enableRelate() && this.suggesterConfig[changeValue]) {
+      this.startRelate(codemirror, changeValue, from);
+    }
+    if (this.enableRelate() && (changeValue || origin === '+delete')) {
+      this.cursorTo = JSON.parse(JSON.stringify(to));
+      if (changeValue) {
+        this.searchKeyCache.push(changeValue);
+      } else if (origin === '+delete') {
+        this.searchKeyCache.pop();
+        if (this.searchKeyCache.length === 0) {
+          this.stopRelate();
+          return;
+        }
+      }
+      const that = this;
+      function callbackResult(res) {
+        if (res === false) {
+          that.stopRelate();
+          return;
+        }
+        // 回显命中的结果
+        that.optionList = !res || !res.length ? [] : res.slice(0, 200); // 只要前200个，太多影响性能
+        that.updatePanel(expandList(that.$cherry, that.optionList));
+      }
+      // 展示推荐列表
+      if (typeof this.suggesterConfig[this.keyword]?.data === 'function') {
+        // 请求api 返回结果拼凑
+        this.suggesterConfig[this.keyword].data(
+          this.searchKeyCache.join('').slice(1),
+          (res) => {
+            // 如果返回了false，则强制退出联想
+            callbackResult(res);
+          },
+          this.$cherry,
+          this.keyword,
+        );
+      } else if (typeof this.suggesterConfig[this.keyword]?.data === 'object') {
+        getSuggestList(
+          expandList(this.$cherry, this.suggesterConfig[this.keyword]?.data),
+          this.keyword,
+          this.searchKeyCache.join('').slice(1),
+          (res) => {
+            callbackResult(res);
+          },
+        );
+      }
+    }
+  }
+
+  /**
+   * 监听方向键选择 options
+   * @param {CodeMirror.Editor} codemirror
+   * @param {KeyboardEvent} evt
+   */
+  onKeyDown(codemirror, evt) {
+    this.tryCreatePanel();
+    if (!this.$suggesterPanel) {
+      return false;
+    }
+    const { keyCode } = evt;
+    // up down
+    if ([38, 40].includes(keyCode)) {
+      // issue 558
+      if (this.optionList.length === 0) {
+        setTimeout(() => {
+          this.stopRelate();
+        }, 0);
+        return;
+      }
+
+      this.cursorMove = false;
+
+      const selectedItem = this.$suggesterPanel.querySelector('.cherry-suggester-panel__item--selected');
+      let nextElement = null;
+      if (keyCode === 38 && !selectedItem.previousElementSibling) {
+        nextElement = this.$suggesterPanel.lastElementChild;
+        // codemirror.focus();
+      } else if (keyCode === 40 && !selectedItem.nextElementSibling) {
+        nextElement = this.$suggesterPanel.firstElementChild;
+        // codemirror.focus();
+      } else {
+        if (keyCode === 38) {
+          nextElement = selectedItem.previousElementSibling;
+        } else if (keyCode === 40) {
+          nextElement = selectedItem.nextElementSibling;
+        }
+      }
+
+      selectedItem.classList.remove('cherry-suggester-panel__item--selected');
+
+      if (nextElement === null) return;
+      nextElement.classList.add('cherry-suggester-panel__item--selected');
+      nextElement.scrollIntoView();
+    } else if (keyCode === 13) {
+      evt.stopPropagation();
+      this.cursorMove = false;
+      const dom = this.findSelectedItem();
+      this.pasteSelectResult(this.findSelectedItemIndex(), evt, dom);
+      //
+      codemirror.focus();
+      // const cache = JSON.parse(JSON.stringify(this.cursorTo));
+      // setTimeout(() => {
+      //   codemirror.setCursor(cache);
+      // }, 100);
+      setTimeout(() => {
+        this.stopRelate();
+      }, 0);
+    } else if (keyCode === 27 || keyCode === 0x25 || keyCode === 0x27) {
+      // 按下esc或者←、→键的时候退出联想
+      evt.stopPropagation();
+      codemirror.focus();
+      setTimeout(() => {
+        this.stopRelate();
+      }, 0);
+    }
+  }
+}