Merge pull request #15 from seankwilliams/feature/14-gutenberg-issue-…

…with-tags

Feature/14 gutenberg issue with tags

modern-footnotes/modern-footnotes.php

@@ -3,7 +3,7 @@
 Plugin Name: Modern Footnotes
 Plugin URI:  http://prismtechstudios.com/modern-footnotes
 Description: Add inline footnotes to your post via the footnote icon on the toolbar for editing posts and pages. Or, use the [mfn] or [modern_footnote] shortcodes [mfn]like this[/mfn].
-Version:     1.3.2
+Version:     1.3.3
 Author:      Prism Tech Studios
 Author URI:  http://prismtechstudios.com/
 License:     GPL2
@@ -13,6 +13,8 @@
 //don't let users call this file directly
 defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
 
+$modern_footnotes_version = '1.3.3';
+
 $modern_footnotes_options = get_option('modern_footnotes_settings');
 
 $modern_footnotes_used_reference_numbers = array(); //keeps track of what reference numbers have been used
@@ -61,20 +63,53 @@ function modern_footnotes_reset_count() {
 add_filter('the_post', 'modern_footnotes_reset_count');
 
 // replace <mfn> HTML tags added by Gutenberg/block editor to [mfn] shortcodes
-
+// When multiple formats are applied, Gutenberg can have multiple <mfn> tags for one footnote, so we'll have to iterate through the text and group sibling tags together (see https://github.com/seankwilliams/modern-footnotes/issues/14)
 function modern_footnotes_replace_mfn_tag_with_shortcode( $content ) {
-  $content = str_replace('<mfn>','[mfn]',$content);
-  $content = str_replace('</mfn>','[/mfn]',$content);
-  return $content;
+  $content = str_replace('</mfn>','<mfn>',$content); //using [mfn] instead of [/mfn] is intentional here
+  $contentParts = explode('<mfn>', $content);
+  $contentData = array();
+  //$tagsFromPreviousSegment = array();
+  $inFootnote = FALSE;
+  foreach ($contentParts as $c) {
+    $contentData[] = array(
+      "content" => $c,
+      "inFootnote" => $inFootnote
+    );    
+    $inFootnote = !$inFootnote;
+  }
+  for ($i = 0; $i < count($contentData); $i++) {
+    //if this is only opening tags or only closing tags, place it in the footnote
+    $replacedString = preg_replace("/<\/?\\w+\\s?\\w?.*?>/ms", "", $contentData[$i]['content']);
+    if (strlen($replacedString) === 0 && !$contentData[$i]['inFootnote']) {
+      $contentData[$i]['inFootnote'] = TRUE;
+    }
+  }
+  $finalContent = '';
+  $inFootnote = FALSE;
+  foreach ($contentData as $cd) {
+    if ($cd['inFootnote'] && !$inFootnote) {
+      $inFootnote = TRUE;
+      $finalContent .= '[mfn]';
+    } else if ($inFootnote && !$cd['inFootnote']) {
+      $inFootnote = FALSE;
+      $finalContent .= '[/mfn]';
+    }
+
+    $finalContent .= $cd['content'];
+  }
+  if ($inFootnote) {
+    $finalContent .= '[/mfn]';
+  }
+  return $finalContent;
 }
 add_filter( 'the_content', 'modern_footnotes_replace_mfn_tag_with_shortcode' );
 
 
 
 function modern_footnotes_enqueue_scripts_styles() {
-	global $modern_footnotes_options;
-	wp_enqueue_style('modern_footnotes', plugin_dir_url(__FILE__) . 'styles.min.css', array(), '1.3.2');
-	wp_enqueue_script('modern_footnotes', plugin_dir_url(__FILE__) . 'modern-footnotes.min.js', array('jquery'), '1.3.2', TRUE); 
+	global $modern_footnotes_options, $modern_footnotes_version;
+	wp_enqueue_style('modern_footnotes', plugin_dir_url(__FILE__) . 'styles.min.css', array(), $modern_footnotes_version);
+	wp_enqueue_script('modern_footnotes', plugin_dir_url(__FILE__) . 'modern-footnotes.min.js', array('jquery'), $modern_footnotes_version, TRUE); 
 
 	if (!is_admin() && isset($modern_footnotes_options['modern_footnotes_custom_css']) && !empty($modern_footnotes_options['modern_footnotes_custom_css'])) {
 		wp_add_inline_style( 'modern_footnotes', $modern_footnotes_options['modern_footnotes_custom_css'] );
@@ -227,7 +262,8 @@ function modern_footnotes_add_container_button() {
   add_filter('init', 'modern_footnotes_add_container_button');
 
   function modern_footnotes_enqueue_admin_scripts() {
-    wp_enqueue_style('modern_footnotes', plugin_dir_url(__FILE__) . 'styles.mce-button.min.css', array(), '1.3.2');
+    global $modern_footnotes_version;
+    wp_enqueue_style('modern_footnotes', plugin_dir_url(__FILE__) . 'styles.mce-button.min.css', array(), $modern_footnotes_version);
   }
 
   add_action('admin_enqueue_scripts', 'modern_footnotes_enqueue_admin_scripts'); 
@@ -251,12 +287,13 @@ function modern_footnotes_add_container_plugin($plugin_array) {
 // Gutenberg / Block Editor 
 //
 function modern_footnotes_block_editor_button() {
+    global $modern_footnotes_version;
     wp_enqueue_script( 'modern_footnotes_block_editor_js',
         plugin_dir_url(__FILE__) . 'modern-footnotes.block-editor.min.js',
         array( 'wp-rich-text', 'wp-element', 'wp-editor' ),
-        '1.3.2'    
+        $modern_footnotes_version
     );
-    wp_enqueue_style('modern_footnotes_block_editor_css', plugin_dir_url(__FILE__) . 'styles.block-editor-button.min.css', array(), '1.3.2');
+    wp_enqueue_style('modern_footnotes_block_editor_css', plugin_dir_url(__FILE__) . 'styles.block-editor-button.min.css', array(), $modern_footnotes_version);
 }
 add_action( 'enqueue_block_editor_assets', 'modern_footnotes_block_editor_button' );
 //

modern-footnotes/readme.txt

@@ -2,8 +2,8 @@
 Contributors: Sean Williams
 Tags: footnotes, citations, inline footnotes, inline citations, mobile-friendly citations, mobile-friendly footnotes
 Requires at least: 4.4.8
-Tested up to: 5.2.3
-Stable tag: 1.3.2
+Tested up to: 5.2.4
+Stable tag: 1.3.3
 License: GNU General Public License v2
 License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
 
@@ -51,12 +51,16 @@ If you want to customize the styles, you can do so by overriding the following s
 =Is there support for the Block Editor/Gutenberg Editor?=
 Yes. You can use the Modern Footnotes button in the toolbar of the Block Editor to move the selected text into a footnote. However, if you want to customize the reference numbers output by the plugin, you'll have to type out the shortcode instead.
 
+=Why isn't the word "footnote" appearing by all of my footnotes in the Block Editor/Gutenberg Editor?=
+The word "footnote" only shows up by the first footnote in each paragraph in the editor, but all footnotes are highlighted gray. This is to work around a technical limitation of Gutenberg's editor, though hopefully we can come up with a better solution in the future. Don't worry, your footnotes will show up correctly when viewing the page/blog post though!
+
 == Screenshots ==
 1. http://prismtechstudios.com/modern-footnotes/modern-footnotes-1.png
 2. http://prismtechstudios.com/modern-footnotes/modern-footnotes-2.png
 3. http://prismtechstudios.com/modern-footnotes/modern-footnotes-3.png
 
 == Changelog ==
+1.3.3 - 10/16/19 - Fix issue where applying multiple formats in conjunction with footnotes in the Gutenberg editor would mess up footnote formatting
 1.3.2 - 9/18/19 - Fix issue where links inside footnotes wouldn't appear inline with other text
 1.3.1 - 9/18/19 - Updated style so that long links are truncated with ellipsis in tooltips
 1.3.0 - 2/19/19 - Fixed problem where Classic Editor button did not appear in WP 5.x. Added Gutenberg button. Allow shortcode within footnotes.