diff --git a/src/rich_text_editor/model/RichTextEditor.js b/src/rich_text_editor/model/RichTextEditor.js
index 6db3c01f5..7b0edf41d 100644
--- a/src/rich_text_editor/model/RichTextEditor.js
+++ b/src/rich_text_editor/model/RichTextEditor.js
@@ -11,11 +11,11 @@ const btnState = {
INACTIVE: 0,
DISABLED: -1,
};
-const isValidAnchor = rte => {
- const anchor = rte.selection().anchorNode;
- const parentNode = anchor && anchor.parentNode;
- const nextSibling = anchor && anchor.nextSibling;
- return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A');
+const isValidTag = (rte, tagName = 'A') => {
+ const { anchorNode, focusNode } = rte.selection();
+ const parentAnchor = anchorNode?.parentNode;
+ const parentFocus = focusNode?.parentNode;
+ return parentAnchor?.nodeName == tagName || parentFocus?.nodeName == tagName;
};
const customElAttr = 'data-selectme';
@@ -55,10 +55,10 @@ const defActions = {
title: 'Link',
},
state: rte => {
- return rte && rte.selection() && isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
+ return rte && rte.selection() && isValidTag(rte) ? btnState.ACTIVE : btnState.INACTIVE;
},
result: rte => {
- if (isValidAnchor(rte)) {
+ if (isValidTag(rte)) {
rte.exec('unlink');
} else {
rte.insertHTML(`${rte.selection()}`, { select: true });
@@ -70,8 +70,11 @@ const defActions = {
`,
attributes: { title: 'Wrap for style' },
+ state: rte => {
+ return rte?.selection() && isValidTag(rte, 'SPAN') ? btnState.DISABLED : btnState.INACTIVE;
+ },
result: rte => {
- rte.insertHTML(`${rte.selection()}`, { select: true });
+ !isValidTag(rte, 'SPAN') && rte.insertHTML(`${rte.selection()}`, { select: true });
},
},
};