zazu zazu - 10 days ago 5
Javascript Question

Change case of text with hotkey (like Shift+F3 in MS-Word)

I am using tinymce plugin & I am trying to do a change letter case functionality on a hotkey as like in MS Word (shift + f3).

I have managed to do it with selections, but MS Word works even if a word isn't selected.

It takes cursor's current position separates out a word at that position and applies functionality to that word. I need the same for tinymce.

So far I have this:

editor.addShortcut("ctrl+e", "ll", function () {
var sel = editor.dom.decode(editor.selection.getContent());
if (/^[a-zа-я]+$/g.test(sel)) {
sel = sel.substr(0, 1).toUpperCase() + sel.substr(1);
}
else if (/^[А-ЯA-Z]+$/g.test(sel)) {
sel = sel.toLowerCase();
}
else {
sel = sel.toUpperCase();
}
editor.selection.setContent(sel);
console.log(editor.selection);
editor.save();
editor.isNotDirty = true;
});

Answer

The following code may give you the result that you want. It should work in these situations :

  • One or more words are fully selected
  • One or more words are partially selected
  • No text is selected
  • The selected text belongs to more than one paragraph
  • Various text attributes are set inside words
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {

        editor.addShortcut("ctrl+e", "ll", function () {

            var isWordChar = function (chr) {
                return /\w/.test(chr);
            };

            var isTextNode = function (node) {
                return node.nodeType == 3;
            };

            var getAllTextNodes = function (result, node) {
                if (isTextNode(node)) {
                    result.push(node);
                }
                else if (node.childNodes) {
                    if (node.tagName == 'P') {
                        result.push(node);
                    }
                    var children = node.childNodes;
                    for (var i = 0; i < children.length; i++) {
                        getAllTextNodes(result, children[i]);
                    }
                }
                return result;
            }

            // Get current selection parameters
            var range = editor.selection.getRng();
            var isCollapsed = editor.selection.isCollapsed();
            var selStartChildNode = range.startContainer;
            var selEndChildNode = range.endContainer;
            var selStartOffset = range.startOffset;
            var selEndOffset = range.endOffset;

            // Retrieve all the text nodes in the editor
            var textNodes = [];
            getAllTextNodes(textNodes, editor.dom.getRoot());

            var selStartNodeIndex = textNodes.indexOf(selStartChildNode);
            var selEndNodeIndex = textNodes.indexOf(selEndChildNode);
            var wordStartNodeIndex, wordEndNodeIndex;
            var wordStartOffset, wordEndOffset;
            var wordTextContent = '';
            var found = false;
            var node, chr, lastCharIndex;
            var i, j;

            // Find the start of the first selected word
            for (i = selStartNodeIndex; i >= 0 && !found; i--)
            {
                node = textNodes[i];
                if (isTextNode(node)) {
                    wordStartNodeIndex = i;
                    lastCharIndex = node.textContent.length - 1;
                    wordStartOffset = Math.max(0, Math.min(lastCharIndex, node == selStartChildNode ? selStartOffset - 1 : lastCharIndex));
                    for (; wordStartOffset >= 0; wordStartOffset--) {
                        chr = node.textContent[wordStartOffset];
                        if (isWordChar(chr)) {
                            wordTextContent = chr + wordTextContent;
                        } else {
                            found = true;
                            break;
                        }
                    }
                } else {
                    found = true;
                    break;
                }
            }

            wordStartOffset = Math.max(0, wordStartOffset);

            var endNodeFound = false;
            var pastEndNode = false;
            var isAfterSelection = false;
            found = false;

            // Find the end of the last selected word
            for (i = selStartNodeIndex; i < textNodes.length && !found; i++) {
                node = textNodes[i];
                pastEndNode = endNodeFound;
                if (isTextNode(node)) {
                    wordEndNodeIndex = i;
                    wordEndOffset = Math.min(node == selStartChildNode ? selStartOffset : 0, node.textContent.length - 1);
                    endNodeFound = endNodeFound || node == selEndChildNode;

                    for (; wordEndOffset < node.textContent.length; wordEndOffset++) {
                        chr = node.textContent[wordEndOffset];
                        isAfterSelection = pastEndNode || (endNodeFound && wordEndOffset >= selEndOffset - (isCollapsed ? 0 : 1));
                        if (isWordChar(chr) || !isAfterSelection) {
                            wordTextContent = wordTextContent + chr;
                        } else {
                            found = true;
                            break;
                        }
                    }
                } else if (pastEndNode) {
                    found = true;
                    break;
                }
            }

            // Determine the case style to be applied
            var caseMode = '';
            if (/^([a-z0-9]|\W)+$/g.test(wordTextContent)) {
                caseMode = 'CapitalizeWords';
            }
            else if (/^([A-Z0-9]|\W)+$/g.test(wordTextContent)) {
                caseMode = 'LowerCase';
            }
            else {
                caseMode = 'UpperCase';
            }

            var startCharIndex, endCharIndex, currentIsWordChar;
            var prevIsWordChar = false;
            var content = '';

            // Apply the new case style to the selected nodes
            for (i = wordStartNodeIndex; i <= wordEndNodeIndex; i++) {
                node = textNodes[i];
                if (isTextNode(node)) {
                    startCharIndex = (i == wordStartNodeIndex ? wordStartOffset : 0);
                    endCharIndex = (i == wordEndNodeIndex ? wordEndOffset : node.textContent.length);
                    content = node.textContent.substring(0, startCharIndex);
                    switch (caseMode) {
                        case 'CapitalizeWords':
                            for (j = startCharIndex; j < endCharIndex; j++) {
                                chr = node.textContent[j];
                                currentIsWordChar = /\w/.test(chr);
                                content += (currentIsWordChar && !prevIsWordChar ? chr.toUpperCase() : chr);
                                prevIsWordChar = currentIsWordChar;
                            }
                            break;
                        case 'LowerCase':
                            content += node.textContent.substring(startCharIndex, endCharIndex).toLowerCase();
                            break;
                        case 'UpperCase':
                            content += node.textContent.substring(startCharIndex, endCharIndex).toUpperCase();
                            break;
                    }
                    content += node.textContent.substring(endCharIndex);
                    node.textContent = content;
                } else {
                    prevIsWordChar = false;
                }
            }

            // Restore the selection range
            range.setStart(selStartChildNode, selStartOffset);
            range.setEnd(selEndChildNode, selEndOffset);
            editor.selection.setRng(range);

            editor.save();
            editor.isNotDirty = true;
        });
    }
});

You can try it in this jsfiddle. In order to simplify testing, the regular expressions consider only the standard US characters; you may want to put back the special characters that appear in your own code.