Snippets whose properties contain HTML tags are not reliably recognised
grwllrnc opened this issue · comments
Hi,
We have the use case that we want to allow HTML tags (especially line breaks <br>) for a snippet property such as image captions.
If more than one <br> tag is contained in the caption string, the snippet is no longer recognized as such by the Inetis SnippetParser.
The problem does not occur with the snippet parser of the Rainlab Pages plugin, but only if the Inetis parser is used.
While searching for the problem, I came across differences in the regex pattern:
Rainlab-Plugin (https://github.com/rainlab/pages-plugin/blob/v1.5.6/classes/Snippet.php#L582):
if (preg_match_all('/\<figure\s+[^\>]+\>.*\<\/figure\>/i', $markup, $matches)) { ...Inetis parser (https://github.com/inetis-ch/oc-richeditorsnippets-plugin/blob/dev/classes/SnippetParser.php#L76):
if (preg_match_all('/\<figure\s+[^\>]+\>[^\<]*\<\/figure\>/i', $markup, $matches)) {Why does the Inetis parser uses [^\<]* instead of .* ?
Here is an example of the <figure> tag that is not recognized by the Inetis SnippetParser:
<figure data-inspector-id="inspectorid-1159503151444" data-property-caption="Erster Teil von Heinrich Bullingers Reformationsgeschichte, geschrieben 1594 von Johannes Ochsner in Zürich.<br>Im Vergleich zu der gedruckten Ausgabe von 1838, welche die Basler Handschrift nicht berücksichtigt, enthält der Text eine Reihe von Liedern, teilweise in bis dahin unbekannter Überlieferung.<br>Quelle: ZB" data-property-caption_align="center" data-property-manifest="https://www.e-manuscripta.ch/i3f/v20/1485594/manifest" data-property-zoomcontrols="1" data-snippet="miradorViewer"> </figure>Thank you in advance for your reply.
Hi, thanks for reporting this. Looks like the RainLab.Pages regex was updated a long time ago (rainlab/pages-plugin@a938a54), but the one is this plugin was copied earlier.
I've updated the regex, but slightly reinterpreted it (5361e46). IMO the .* should be before the > as it is supposed to target the figure's attributes.
Note that as of October 3.4, it looks like they reverted the regex to the old one (in modules/cms/classes/PageManager.php), not sure why. So maybe there are other issues with HTML in properties, but at least basic tags should work with this plugin.
I will publish v2.2.1 with this fix soon.
Hi @Fl0Cri,
Many thanks for the adjustments. During our tests we realised that the new regex expression does not work correctly with several snippets in the same markup. The expression <figure\s+.+> seems to be too greedy, so that multiple snippets are matched as one.
Here is an illustration of this problem:
This is the markup:
<p>Moby Dick beginnt mit einem der berühmtesten ersten Sätze der Weltliteratur: „Call me Ishmael“ („So nennt mich denn Ismael“). Es folgt die Ich-Erzählung des Matrosen Ismael (sein richtiger Name wird nie genannt), der ursprünglich aus einer guten Familie stammt, sich aber aus Gründen, die nie ganz klar werden, dazu entschlossen hat, als einfacher Matrose zur See zu fahren. Er selbst spricht von einem unbändigen Drang in ihm, der ihn überkomme, wenn er des Festlands überdrüssig sei. Ismael hat bereits einige Fahrten auf Handelsschiffen hinter sich, will nun aber auf einem Walfänger anheuern.</p>
<p>Auf dem Weg auf die Walfängerinsel Nantucket an der amerikanischen Ostküste lernt er in New Bedford den Harpunier Queequeg kennen. Queequeg ist ein über und über tätowierter Südseeinsulaner, trotz seines furchteinflößenden Äußeren jedoch das Idealbild eines „edlen Wilden“ oder, in Melvilles Worten, „ein George Washington im Gewand eines Kannibalen“. Ismael und Queequeg werden quasi zu Blutsbrüdern.</p>
<figure data-property-caption="Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>sed diam nonumy eirmod <span style='color:red;'>tempor invidunt</span> ut labore et<br>dolore magna aliquyam erat, sed diam voluptua." data-property-caption_align="left" data-property-manifest="https://www.e-rara.ch/i3f/v20/21309127/manifest" data-property-zoomcontrols="0" data-snippet="miradorViewer"> </figure>
<p>In Nantucket heuern beide auf dem bizarr dekorierten Walfänger Pequod, benannt nach den Pequot-Indianern, an – und das obwohl ein möglicherweise Verrückter, der sich nach dem Propheten Elias nennt, sie wiederholt davor warnt. Die Fahrt beginnt zu Weihnachten. Der Kapitän Ahab lässt sich anfangs nicht an Bord blicken. Erst nach einiger Zeit auf See kommt er aus seiner Kabine und erklärt der Mannschaft das Ziel der Fahrt. Er will Moby Dick, den weißen Wal, der ihm das Bein abriss, jagen und erlegen. Als Anreiz für die Mannschaft nagelt er eine Golddublone an den Hauptmast, die derjenige erhalten soll, der den Wal als erster sichtet. Die Mannschaft, aufgeheizt durch den charismatischen und wahnsinnigen Kapitän, schwört sich auf Ahab und dessen Ziel ein. </p>
<figure data-property-caption="Lorem ipsum dolor sit amet,<br>consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." data-property-caption_align="center" data-property-path="/assets/audio/mobydick.mp3" data-property-player_align="block" data-snippet="audioSnippet"> </figure>Here is the match $parsedSnippets returned by the extractSnippetsFromMarkup() method:
array (
'<figure data-property-caption="Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>sed diam nonumy eirmod <span style=\'color:red;\'>tempor invidunt</span> ut labore et<br>dolore magna aliquyam erat, sed diam voluptua." data-property-caption_align="left" data-property-manifest="https://www.e-rara.ch/i3f/v20/21309127/manifest" data-property-zoomcontrols="0" data-snippet="miradorViewer"> </figure><p>In Nantucket heuern beide auf dem bizarr dekorierten Walfänger Pequod, benannt nach den Pequot-Indianern, an – und das obwohl ein möglicherweise Verrückter, der sich nach dem Propheten Elias nennt, sie wiederholt davor warnt. Die Fahrt beginnt zu Weihnachten. Der Kapitän Ahab lässt sich anfangs nicht an Bord blicken. Erst nach einiger Zeit auf See kommt er aus seiner Kabine und erklärt der Mannschaft das Ziel der Fahrt. Er will Moby Dick, den weißen Wal, der ihm das Bein abriss, jagen und erlegen. Als Anreiz für die Mannschaft nagelt er eine Golddublone an den Hauptmast, die derjenige erhalten soll, der den Wal als erster sichtet. Die Mannschaft, aufgeheizt durch den charismatischen und wahnsinnigen Kapitän, schwört sich auf Ahab und dessen Ziel ein. </p><figure data-property-caption="Lorem ipsum dolor sit amet,<br>consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." data-property-caption_align="center" data-property-path="/assets/audio/mobydick.mp3" data-property-player_align="block" data-snippet="audioSnippet"> </figure>' =>
array (
'code' => 'miradorViewer',
'useAjax' => false,
'component' => NULL,
'properties' =>
array (
'path' => '/assets/audio/mobydick.mp3',
'player_align' => 'block',
'manifest' => 'https://www.e-rara.ch/i3f/v20/21309127/manifest',
'caption' => 'Lorem ipsum dolor sit amet,<br>consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
'caption_align' => 'center',
'zoomControls' => '0',
),
),
)As you can see, the first snippet will be rendered with its properties, but the second and everything in between the two snippets is not visible or rendered.
My colleague @annalauraw and I discussed it a bit and we figured out that when we change this line:
if (preg_match_all('#<figure\s+.+>[^<>]*</figure>#i', $markup, $matches)) { ...to
if (preg_match_all('#<figure\s+.+?>[^<>]*</figure>#i', $markup, $matches)) { ...by adding a ? to <figure\s+.+?> the expression matches correctly.
Would that also be an option from your point of view to solve the problem? Or do you have a better solution?
Thanks in advance!
Nice catch, I wasn't aware of this +? thing in regexes (which fits nice for this case, as it doesn't require to mark the whole regex as ungreedy).
I will release v2.2.2 with this fix.
Note that in the testings I did last time, the richeditor allways inserted newlines (\n) around <figure>s. As the regex doesn't have the "s" flag, .+ should not match the newlines and so should not span across multiple figures.
Did you do anything special to have multiple figures on the same line ?
Hi @Fl0Cri
Many thanks for fixing this issue so quickly. I tested v2.2.2 on our website and everything works fine!
In our backend the richeditor does not insert newlines around <figure> tags. Even if I use the UI return flash for inserting a line break, when I insert a snippet afterwards there is no newline in the code. Only if I insert text it gets wrapped in <p> tags.