Fix bugs related to redactor focus

CHANGELOG.md

@@ -1,8 +1,16 @@
 # Redactor Split Changelog
 
-## Unreleased
+## 1.1.1 - 2021-04-17
+
+### Changed
+- If the split button is clicked when the field doesn't have focus, the first node will be split by default
+- When a split is initialized, if the selected node is empty, we'll split at the next meaningful node, skipping empty nodes, such as `<p></p>` and `\nl`
+- Improved plugin loading behavior to ensure Redactor is actually enabled before trying to load
+- We no longer try to split when the redactor field is a single node, empty, or the selected node is the last node.
+
 ### Fixed
-- Improved plugin loading behavior
+- Fix errors that could occur when the split button is clicked without focus on redactor
+- Fix errors that could occur if trying to split when the current selected node is a child node (e.g. `<li></li>`)
 
 ## 1.1.0 - 2020-04-10
 ### Fixed

README.md

@@ -1,17 +1,17 @@
 # Redactor Split plugin for Craft CMS 3
 
 This plugin adds a button to redactor fields that are nested within matrix 
-blocks. When clicked, it spawns a new matrix block of the same type and moves 
+blocks that when clicked, spawns a new matrix block of the same type and moves 
 the current paragraph/tag on your cursor to the same field in the new block.
- 
+
 Best paired with a [Matrix Content builder](https://nystudio107.com/blog/creating-a-content-builder-in-craft-cms)
 
-[Watch a Demo](https://venveo.d.pr/RtWDxb)
+[Watch a Demo](https://venveo.d.pr/3ENrS5)
 
 ## Requirements
 
-- Craft CMS 3.1.x
-- Redactor Craft CMS plugin 2.3.x
+- Craft CMS 3.1.x - 3.7.x
+- Redactor for Craft CMS
 
 ## Installation
 
@@ -27,7 +27,7 @@ To install the plugin, follow these instructions.
 
 3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Redactor Split.
 
-4. Add the plugin to your Redactor configurations:
+4. Add the plugin to your Redactor configurations in the "plugins" array:
 ```json
 {
     "buttons": [

composer.json

@@ -2,7 +2,7 @@
     "name": "venveo/craft-redactor-split",
     "description": "Split a Redactor field within Matrix blocks into additional blocks",
     "type": "craft-plugin",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "keywords": [
         "craft",
         "cms",

src/resources/redactor-split.js

@@ -3,6 +3,37 @@
     var nextRedactorFieldId = null;
     var redactorElementNodesToMigrate = null;
 
+    /**
+     * When the split button is clicked, we'll look at the currently selected node and determine if it should be skipped
+     * in favor of the next sibling node.
+     * @param node
+     * @returns {boolean}
+     */
+    var shouldSkipNode = function(node) {
+        // Nothing to skip to
+        if (!node.nextElementSibling) {
+            return false
+        }
+
+        return node.nodeValue === '\n' ||
+            (node.tagName === 'P' && node.textContent === '')
+    }
+
+    /**
+     * When the split button is clicked, we need to find the upper-most node to avoid splitting within nested nodes,
+     * such as lists.
+     * @param editor
+     * @param node
+     * @returns {*}
+     */
+    var resolveSelectedNode = function(editor, node) {
+        var $editor = editor.$editor.nodes[0]
+        while(node.parentNode !== $editor) {
+            node = node.parentNode
+        }
+        return node
+    }
+
     $R.add('plugin', 'redactor-split', {
         translations: {
             en: {
@@ -40,9 +71,13 @@
         },
         onstarted: function()
         {
+            // Don't try to do anything if we're not in a matrix block for some reason.
             if (!this.shouldMount) {
                 return;
             }
+
+            // If this plugin was just initialized on a block that was just spawned from a split, we need to add those
+            // elements to this block
             var myId = this.$root.attr('id');
             if (myId == nextRedactorFieldId && redactorElementNodesToMigrate.length) {
                 var fragment = new DocumentFragment();
@@ -57,14 +92,13 @@
                 redactorElementNodesToMigrate = [];
             }
         },
-        // public
         start: function()
         {
             if (!this.shouldMount) {
                 return;
             }
-            var $button = this.toolbar.addButton('Matrix Split', { title: this.lang.get('split'), api: 'plugin.redactor-split.split' });
-            $button.setIcon('<i class="venveo icon redactor-split"></i>');
+            var button = this.toolbar.addButton('Matrix Split', { title: this.lang.get('split'), api: 'plugin.redactor-split.split' });
+            button.setIcon('<i class="venveo icon redactor-split"></i>');
         },
         _splitMatrix: function() {
             if (!this.matrix.canAddMoreBlocks()) {
@@ -75,7 +109,37 @@
             // Get all nodes (elements) through the one we have selected
             redactorElementNodesToMigrate = [];
             var firstNode = this.editor.getFirstNode();
-            var selectedNode = this.selection.getElement();
+            var lastNode = this.editor.getLastNode();
+            var selectedNode = this.selection.getBlock();
+
+            // Editor is completely empty
+            if (!firstNode) {
+                return;
+            }
+
+            // Can't split a single node
+            if (firstNode === lastNode) {
+                return;
+            }
+
+            // If there isn't a node selected, just use the first one
+            if (!selectedNode) {
+                selectedNode = firstNode
+            } else {
+                // If an explicit node is selected, we need to ensure its the parent most element so we don't try to split
+                // non-splittable nodes (e.g. <li></li>)
+                selectedNode = resolveSelectedNode(this.editor, selectedNode)
+            }
+
+            // Don't split at newline characters
+            while (shouldSkipNode(selectedNode)) {
+                selectedNode = selectedNode.nextElementSibling
+            }
+
+            // Pointless
+            if (selectedNode === lastNode) {
+                return;
+            }
 
             redactorElementNodesToMigrate.push(firstNode);
 
@@ -89,7 +153,6 @@
             var cb = function(e) {
                 var $block = e.$block;
                 self.matrix.off('blockAdded', cb);
-                console.log(self.field)
                 var fieldId = self.field.attr('id');
                 var split = fieldId.split('-')
                 var fieldHandle = split[split.length - 2]; // Get the field handle
@@ -100,7 +163,6 @@
                 nextRedactorFieldId = id;
             }
 
-
             this.matrix.on('blockAdded', cb)
             this.matrix.addBlock(this.matrixblocktype, this.$matrixblock)
         },