Skip to content

I
Ifar-Xml-Edtor
Commit 0f82ec2b by pangchong
Options

fix(editor): 优化多处文本编辑行为，支持安全的换行和换行样式 

- 为多个编辑区域添加 whitespace-pre-wrap 样式，解决换行显示问题
- 新增 handleEnterKey 函数，拦截 Enter 键实现安全换行，避免生成多余节点
- 编辑模式中使用 v-text 确保文本内容在失焦后正确刷新 DOM
- 多处文本编辑元素添加 @keydown.enter.prevent，防止默认换行行为
- 对比模式下展示词级差异时保持文本单行预格式化显示
- ListEditor、TableEditor、TextBlockEditor 组件中同步改进换行和按键行为
parent 4114f00e
Showing with 115 additions and 25 deletions
src/views/editor/components/DocNodeRenderer/functionals/index.ts
...@@ -345,6 +345,33 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu ...@@ -345,6 +345,33 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu
return props.node.children.find((c) => c.id === childId) return props.node.children.find((c) => c.id === childId)
} }
// 拦截 Enter 键以使用安全的文本换行，避免浏览器生成多余的嵌套 div/br 节点
const handleEnterKey = (e: KeyboardEvent) => {
e.preventDefault()
try {
if (document.queryCommandSupported && document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, '\n')
return
}
} catch (err) {
// 忽略报错，回退到 Range 插入
}
const selection = window.getSelection()
if (!selection || !selection.rangeCount) return
const range = selection.getRangeAt(0)
range.deleteContents()
const textNode = document.createTextNode('\n')
range.insertNode(textNode)
range.setStartAfter(textNode)
range.setEndAfter(textNode)
selection.removeAllRanges()
selection.addRange(range)
const el = e.target as HTMLElement
el.dispatchEvent(new Event('input', { bubbles: true }))
}
// 文本框值修改同步 // 文本框值修改同步
const handleTextBlur = (e: FocusEvent) => { const handleTextBlur = (e: FocusEvent) => {
const el = e.target as HTMLElement const el = e.target as HTMLElement
...@@ -448,6 +475,7 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu ...@@ -448,6 +475,7 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu
getTopicContentNodes, getTopicContentNodes,
getChildNode, getChildNode,
handleTextBlur, handleTextBlur,
handleEnterKey,
handleChildTextBlur, handleChildTextBlur,
handleMixedTextBlur, handleMixedTextBlur,
getGraphicTitle, getGraphicTitle,
......
src/views/editor/components/DocNodeRenderer/index.vue
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
<template v-else-if="node.tagName === 'TITLEC'"> <template v-else-if="node.tagName === 'TITLEC'">
<div <div
:contenteditable="!isDiffMode" :contenteditable="!isDiffMode"
class="font-bold text-base text-color1 py-1 focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors" class="font-bold text-base text-color1 py-1 focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors whitespace-pre-wrap"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent @keydown.enter.prevent
> >
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
<template v-else-if="node.tagName === 'TITLE'"> <template v-else-if="node.tagName === 'TITLE'">
<div <div
:contenteditable="!isDiffMode" :contenteditable="!isDiffMode"
class="font-bold italic text-sm text-color2 py-1 focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors" class="font-bold italic text-sm text-color2 py-1 focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors whitespace-pre-wrap"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent @keydown.enter.prevent
> >
...@@ -132,25 +132,42 @@ ...@@ -132,25 +132,42 @@
> >
<template v-if="node.mixedContent && node.mixedContent.length > 0"> <template v-if="node.mixedContent && node.mixedContent.length > 0">
<template v-for="(item, index) in node.mixedContent" :key="index"> <template v-for="(item, index) in node.mixedContent" :key="index">
<span <template v-if="item.type === 'text'">
v-if="item.type === 'text'" <!-- 编辑与非对比模式：使用 v-text 确保编辑完 blur 时干净刷新真实 DOM -->
:data-node-id="`${node.id}-txt-${index}`" <span
:contenteditable="!isDiffMode" v-if="!isDiffMode"
class="focus:outline-none px-0.5 rounded inline transition-all" :data-node-id="`${node.id}-txt-${index}`"
:class="[ contenteditable="true"
!isDiffMode && editorStore.selectedNodeId === `${node.id}-txt-${index}` class="focus:outline-none px-0.5 rounded inline transition-all whitespace-pre-wrap focus:bg-fill-3"
? 'ring-2 ring-primary ring-offset-1 bg-primary/10' :class="[
: '', editorStore.selectedNodeId === `${node.id}-txt-${index}`
isDiffMode ? '' : 'focus:bg-fill-3' ? 'ring-2 ring-primary ring-offset-1 bg-primary/10'
]" : ''
@click.stop="isDiffMode ? null : editorStore.setSelectedNodeId(`${node.id}-txt-${index}`)" ]"
@blur="handleMixedTextBlur(index, $event)" @click.stop="editorStore.setSelectedNodeId(`${node.id}-txt-${index}`)"
> @blur="handleMixedTextBlur(index, $event)"
<template v-if="isDiffMode && item.diffWords && item.diffWords.length > 0"> @keydown.enter="handleEnterKey"
<span v-for="(w, idx) in item.diffWords" :key="idx" :class="getDiffWordClass(w)">{{ w.value }}</span> v-text="item.text"
</template> ></span>
<template v-else>{{ item.text }}</template> <!-- 对比模式：展示词级差异 -->
</span> <span
v-else
:data-node-id="`${node.id}-txt-${index}`"
:contenteditable="false"
class="focus:outline-none px-0.5 rounded inline transition-all whitespace-pre-wrap"
:class="[
editorStore.selectedNodeId === `${node.id}-txt-${index}`
? 'ring-2 ring-primary ring-offset-1 bg-primary/10'
: ''
]"
@click.stop="editorStore.setSelectedNodeId(`${node.id}-txt-${index}`)"
>
<template v-if="item.diffWords && item.diffWords.length > 0">
<span v-for="(w, idx) in item.diffWords" :key="idx" :class="getDiffWordClass(w)">{{ w.value }}</span>
</template>
<template v-else>{{ item.text }}</template>
</span>
</template>
<DocNodeRenderer <DocNodeRenderer
v-else-if="item.type === 'element' && getChildNode(item.nodeId!)" v-else-if="item.type === 'element' && getChildNode(item.nodeId!)"
:node="getChildNode(item.nodeId!)!" :node="getChildNode(item.nodeId!)!"
...@@ -173,14 +190,26 @@ ...@@ -173,14 +190,26 @@
</template> </template>
<!-- 否则，如果是一个纯文本的段落，直接展示和编辑文本 --> <!-- 否则，如果是一个纯文本的段落，直接展示和编辑文本 -->
<template v-else> <template v-else>
<!-- 编辑与非对比模式：使用 v-text 确保编辑完 blur 时干净刷新真实 DOM -->
<component <component
v-if="!isDiffMode"
:is="renderInline ? 'span' : 'div'" :is="renderInline ? 'span' : 'div'"
:contenteditable="!isDiffMode" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors" class="focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors whitespace-pre-wrap"
:class="[renderInline ? 'inline mx-0.5' : 'w-full']" :class="[renderInline ? 'inline mx-0.5' : 'w-full']"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter="handleEnterKey"
v-text="node.textContent"
></component>
<!-- 对比模式：展示词级差异 -->
<component
v-else
:is="renderInline ? 'span' : 'div'"
:contenteditable="false"
class="focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors whitespace-pre-wrap"
:class="[renderInline ? 'inline mx-0.5' : 'w-full']"
> >
<template v-if="isDiffMode && node.mixedContent?.[0]?.diffWords && node.mixedContent[0].diffWords.length > 0"> <template v-if="node.mixedContent?.[0]?.diffWords && node.mixedContent[0].diffWords.length > 0">
<span v-for="(w, idx) in node.mixedContent[0].diffWords" :key="idx" :class="getDiffWordClass(w)">{{ w.value }}</span> <span v-for="(w, idx) in node.mixedContent[0].diffWords" :key="idx" :class="getDiffWordClass(w)">{{ w.value }}</span>
</template> </template>
<template v-else>{{ node.textContent }}</template> <template v-else>{{ node.textContent }}</template>
...@@ -207,6 +236,7 @@ ...@@ -207,6 +236,7 @@
" "
@click.stop="editorStore.setSelectedNodeId(`${node.id}-txt-${index}`)" @click.stop="editorStore.setSelectedNodeId(`${node.id}-txt-${index}`)"
@blur="handleMixedTextBlur(index, $event)" @blur="handleMixedTextBlur(index, $event)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></span> ></span>
<DocNodeRenderer <DocNodeRenderer
...@@ -226,6 +256,7 @@ ...@@ -226,6 +256,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -250,6 +281,7 @@ ...@@ -250,6 +281,7 @@
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
style="color: blue" style="color: blue"
@blur="handleMixedTextBlur(index, $event)" @blur="handleMixedTextBlur(index, $event)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></span> ></span>
<DocNodeRenderer <DocNodeRenderer
...@@ -276,6 +308,7 @@ ...@@ -276,6 +308,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFID || '—'" v-text="node.textContent || node.attributes.REFID || '—'"
></span> ></span>
</template> </template>
...@@ -290,6 +323,7 @@ ...@@ -290,6 +323,7 @@
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
style="color: blue" style="color: blue"
@blur="handleMixedTextBlur(index, $event)" @blur="handleMixedTextBlur(index, $event)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></span> ></span>
<DocNodeRenderer <DocNodeRenderer
...@@ -316,6 +350,7 @@ ...@@ -316,6 +350,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFID || '—'" v-text="node.textContent || node.attributes.REFID || '—'"
></span> ></span>
</template> </template>
...@@ -336,6 +371,7 @@ ...@@ -336,6 +371,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFLOC || '—'" v-text="node.textContent || node.attributes.REFLOC || '—'"
></span> ></span>
{{ ')' }} {{ ')' }}
...@@ -345,6 +381,7 @@ ...@@ -345,6 +381,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFLOC || '—'" v-text="node.textContent || node.attributes.REFLOC || '—'"
></span> ></span>
</template> </template>
...@@ -368,6 +405,7 @@ ...@@ -368,6 +405,7 @@
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
style="color: blue" style="color: blue"
@blur="handleMixedTextBlur(index, $event)" @blur="handleMixedTextBlur(index, $event)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></span> ></span>
<DocNodeRenderer <DocNodeRenderer
...@@ -394,6 +432,7 @@ ...@@ -394,6 +432,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFID || node.attributes.STRUCTID || '—'" v-text="node.textContent || node.attributes.REFID || node.attributes.STRUCTID || '—'"
></span> ></span>
</template> </template>
...@@ -409,6 +448,7 @@ ...@@ -409,6 +448,7 @@
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
style="color: blue" style="color: blue"
@blur="handleMixedTextBlur(index, $event)" @blur="handleMixedTextBlur(index, $event)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></span> ></span>
<DocNodeRenderer <DocNodeRenderer
...@@ -435,6 +475,7 @@ ...@@ -435,6 +475,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.attributes.REFID || node.attributes.STRUCTID || '—'" v-text="node.textContent || node.attributes.REFID || node.attributes.STRUCTID || '—'"
></span> ></span>
</template> </template>
...@@ -455,6 +496,7 @@ ...@@ -455,6 +496,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</span> </span>
...@@ -466,6 +508,7 @@ ...@@ -466,6 +508,7 @@
contenteditable="true" contenteditable="true"
class="text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -476,6 +519,7 @@ ...@@ -476,6 +519,7 @@
contenteditable="true" contenteditable="true"
class="text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -486,6 +530,7 @@ ...@@ -486,6 +530,7 @@
contenteditable="true" contenteditable="true"
class="font-mono text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="font-mono text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -564,6 +609,7 @@ ...@@ -564,6 +609,7 @@
contenteditable="true" contenteditable="true"
class="font-mono text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="font-mono text-color1 cursor-pointer focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -676,9 +722,10 @@ ...@@ -676,9 +722,10 @@
<template v-else> <template v-else>
<div <div
contenteditable="true" contenteditable="true"
class="text-sm leading-relaxed focus:outline-none focus:bg-fill-3 px-1 rounded" class="text-sm leading-relaxed focus:outline-none focus:bg-fill-3 px-1 rounded whitespace-pre-wrap"
:class="[isInsideAlert ? 'text-inherit' : 'text-color2']" :class="[isInsideAlert ? 'text-inherit' : 'text-color2']"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter="handleEnterKey"
v-text="node.textContent" v-text="node.textContent"
></div> ></div>
</template> </template>
...@@ -754,6 +801,7 @@ ...@@ -754,6 +801,7 @@
class="focus:outline-none focus:bg-fill-3 px-1 rounded min-h-[1.5em] transition-colors" class="focus:outline-none focus:bg-fill-3 px-1 rounded min-h-[1.5em] transition-colors"
style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important" style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter="handleEnterKey"
v-text="node.textContent" v-text="node.textContent"
></div> ></div>
</template> </template>
...@@ -770,6 +818,7 @@ ...@@ -770,6 +818,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -792,6 +841,7 @@ ...@@ -792,6 +841,7 @@
minWidth: node.attributes.WIDTH ? '0' : '80px' minWidth: node.attributes.WIDTH ? '0' : '80px'
}" }"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -805,6 +855,7 @@ ...@@ -805,6 +855,7 @@
contenteditable="true" contenteditable="true"
class="flex-1 text-sm text-color2 font-medium focus:outline-none focus:bg-fill-2 px-1 rounded" class="flex-1 text-sm text-color2 font-medium focus:outline-none focus:bg-fill-2 px-1 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></div> ></div>
</div> </div>
...@@ -829,6 +880,7 @@ ...@@ -829,6 +880,7 @@
contenteditable="true" contenteditable="true"
class="text-xs text-color2 focus:outline-none focus:bg-fill-3 px-1 rounded" class="text-xs text-color2 focus:outline-none focus:bg-fill-3 px-1 rounded"
@blur="(e) => handleChildTextBlur(item.id, e)" @blur="(e) => handleChildTextBlur(item.id, e)"
@keydown.enter.prevent
v-text="item.textContent" v-text="item.textContent"
></span> ></span>
</div> </div>
...@@ -1008,6 +1060,7 @@ ...@@ -1008,6 +1060,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent" v-text="node.textContent"
></span> ></span>
</template> </template>
...@@ -1060,6 +1113,7 @@ ...@@ -1060,6 +1113,7 @@
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded" class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.tagName" v-text="node.textContent || node.tagName"
></span> ></span>
<div <div
...@@ -1067,6 +1121,7 @@ ...@@ -1067,6 +1121,7 @@
contenteditable="true" contenteditable="true"
class="text-sm text-color2 leading-relaxed focus:outline-none focus:bg-fill-3 px-1 rounded" class="text-sm text-color2 leading-relaxed focus:outline-none focus:bg-fill-3 px-1 rounded"
@blur="handleTextBlur" @blur="handleTextBlur"
@keydown.enter.prevent
v-text="node.textContent || node.tagName" v-text="node.textContent || node.tagName"
></div> ></div>
</template> </template>
...@@ -1151,6 +1206,7 @@ const { ...@@ -1151,6 +1206,7 @@ const {
getTopicContentNodes, getTopicContentNodes,
getChildNode, getChildNode,
handleTextBlur, handleTextBlur,
handleEnterKey,
handleChildTextBlur, handleChildTextBlur,
handleMixedTextBlur, handleMixedTextBlur,
hasNonCbDataChildren, hasNonCbDataChildren,
......
src/views/editor/components/ListEditor/index.vue
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
contenteditable="true" contenteditable="true"
class="flex-1 min-h-[32px] px-2 py-1.5 rounded border border-divider focus:outline-none focus:ring-1 focus:ring-primary text-sm bg-fill-3 text-color2 leading-relaxed" class="flex-1 min-h-[32px] px-2 py-1.5 rounded border border-divider focus:outline-none focus:ring-1 focus:ring-primary text-sm bg-fill-3 text-color2 leading-relaxed"
@blur="(e) => handleTextBlur(item.id, e)" @blur="(e) => handleTextBlur(item.id, e)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></div> ></div>
</div> </div>
......
src/views/editor/components/TableEditor/index.vue
...@@ -101,6 +101,7 @@ ...@@ -101,6 +101,7 @@
:data-node-id="para.id" :data-node-id="para.id"
data-tag-name="PARA" data-tag-name="PARA"
:contenteditable="!isDiffMode" :contenteditable="!isDiffMode"
class="whitespace-pre-wrap"
:class="[ :class="[
isNodeSelected(para.id) isNodeSelected(para.id)
? 'ring-2 ring-primary bg-primary/5 font-bold' ? 'ring-2 ring-primary bg-primary/5 font-bold'
...@@ -111,6 +112,7 @@ ...@@ -111,6 +112,7 @@
:style="para.attributes?.MERGED === 'TRUE' ? { backgroundColor: 'yellow' } : {}" :style="para.attributes?.MERGED === 'TRUE' ? { backgroundColor: 'yellow' } : {}"
@click.stop="isDiffMode ? null : handleParaClick(para, cell, $event)" @click.stop="isDiffMode ? null : handleParaClick(para, cell, $event)"
@blur="(e) => handleCellBlur(para.id, e)" @blur="(e) => handleCellBlur(para.id, e)"
@keydown.enter.prevent
v-text="para.text" v-text="para.text"
></div> ></div>
</template> </template>
...@@ -211,6 +213,7 @@ ...@@ -211,6 +213,7 @@
:data-node-id="para.id" :data-node-id="para.id"
data-tag-name="PARA" data-tag-name="PARA"
:contenteditable="!isDiffMode" :contenteditable="!isDiffMode"
class="whitespace-pre-wrap"
:class="[ :class="[
isNodeSelected(para.id) isNodeSelected(para.id)
? 'ring-2 ring-primary bg-primary/5' ? 'ring-2 ring-primary bg-primary/5'
...@@ -221,6 +224,7 @@ ...@@ -221,6 +224,7 @@
:style="para.attributes?.MERGED === 'TRUE' ? { backgroundColor: 'yellow' } : {}" :style="para.attributes?.MERGED === 'TRUE' ? { backgroundColor: 'yellow' } : {}"
@click.stop="isDiffMode ? null : handleParaClick(para, cell, $event)" @click.stop="isDiffMode ? null : handleParaClick(para, cell, $event)"
@blur="(e) => handleCellBlur(para.id, e)" @blur="(e) => handleCellBlur(para.id, e)"
@keydown.enter.prevent
v-text="para.text" v-text="para.text"
></div> ></div>
</template> </template>
......
src/views/editor/components/TextBlockEditor/index.vue
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
contenteditable="true" contenteditable="true"
class="flex-1 min-h-[32px] px-2 py-1.5 rounded border border-divider focus:outline-none focus:ring-1 focus:ring-primary text-sm bg-fill-3 text-color2" class="flex-1 min-h-[32px] px-2 py-1.5 rounded border border-divider focus:outline-none focus:ring-1 focus:ring-primary text-sm bg-fill-3 text-color2"
@blur="(e) => handleSliceTextBlur(index, e)" @blur="(e) => handleSliceTextBlur(index, e)"
@keydown.enter.prevent
v-text="item.text" v-text="item.text"
></div> ></div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment