Cursor not going into the node span

[thegaoqi]

This has been bugging me for a while.

I have this Editor with a customized nodes in it, within the node there is a content-editable span where users can edit the content there. The issue I'm having is when I use the keyborad to move the cursor, it always jump through the whole node and not going into the span as I wanted.

This is the node-view I'm currently having:
<template> <node-view-wrapper as="span" contenteditable="true"> <span class="selectionResultText" @input="inputContent"> {{ node.attrs.resultText }} </span> <el-popover ref="popover" placement="bottom" trigger="click" width="auto" max-width="300px" transition="none"> <template #reference> <el-button style="background-color: blue; color: white; padding: 0 15px; height: 20px;"> <el-icon :size="12"> <ArrowRight /> </el-icon></el-button> </template> <div> <el-table class="singleSelectionTable" :data="node.attrs.options" :showHeader="false" stripe :row-style="{ cursor: 'pointer' }" :cell-style="{ padding: '3px 0' }" @row-click="optionSelected"> <el-table-column width="40px"> <template v-slot="scope"> <div>{{ scope.$index + 1 }}</div> </template> </el-table-column> <el-table-column :width="getMaxColumnWidth()"> <template v-slot="scope"> <div style="font-family:Microsoft YaHei; font-size: 14px;">{{ scope.row }}</div> </template> </el-table-column> </el-table> </div> </el-popover> </node-view-wrapper> </template>

And this is how it looks like:

The blue ones are my customized nodes, and the blue text are the ones I want to let users to edit. (The button can trigger a popover for users to select option and replace the blue text.)

Can really use some help out here. Thanks!

[noobmaster19]

Hi, I'm facing the same issue, did you manage to resolve this?