javascript - 在draft-js中选择后实体内的光标

标签 javascript reactjs styled-components draftjs draft-js-plugins

我正在努力使实体样式按照我希望使用 Draft-js 的方式工作。我通过选择自动完成组件中的项目将样式实体添加到我的输入中。当我选择一个时,它可以工作,但插入符号会留在实体内,直到我添加另一个字符。有没有办法在实际实体之后移动插入符号而不添加空格?

我正在使用一个名为 draft-js-autocomplete 的库,如有必要,我不介意提出拉取请求。

为了显示:

Autocomplete selection
After the selection

最佳答案

您必须在此处添加一个空字符。

 const newContentState = Modifier.insertText(
contentStateWithEntity,
currentSelection,
`...` + '\u200A',
null,
entityKey);
此外,您将不得不调整您的策略如下:
    function placeholderFieldStrategy(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        contentState.getEntity(entityKey).getType() === 'PLACEHOLDER_FIELD'
      );
    },
    (start, end) => callback(start, end - 1)
  );
}

关于javascript - 在draft-js中选择后实体内的光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58650389/

相关文章:

css - 如何用 emotionJS 正确覆盖现有的类名

javascript - emberjs 与 hash 绑定(bind)

javascript - 不确定如何从子组件更新父状态

javascript - 为什么下面的 React 代码可以工作?

javascript - TypeScript:如何将 DefaultTheme 与样式组件结合起来?

css - 将 Styled-Component 与 Selenium 定位器集成

javascript - 在 JavaScript 中描述成员和容器之间关系的最佳术语

javascript - 通过带引号的 Javascript 字符串传递变量

javascript - 基于 javascript 的 Web 应用程序的文件结构

javascript - 如何在 React 中使用 Bootstrap npm 包