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 }); }, }, };