Plugin Development: Problems creating a simple text replacement plugin

[Vinc26]

Hi,

Based on the plugin development documentation (#1359), I'm trying to create a simple text replacement plugin:
In a block based page, if it find __STARTDIV__, it replace by <div>
In a block based page, if it find __ENDDIV__, it replace by </div>
(Here is why I need that in my website: #1714)

Here's, the code of main.js of the plugin:

class ExternalLinksPlugin {
	constructor(API, name, config) {
		this.API = API;
		this.name = name;
		this.config = config;
	}

	addModifiers() {
			this.API.addModifier('pageText', this.textToBeReplaced.bind(this), 1, this);
	}

	textToBeReplaced(rendererInstance, text) {
		return text.replace("__STARTDIV__","<div>");
  }
  
}

module.exports = ExternalLinksPlugin;

It partially works, but I have actually 3 problems:

1 - I only know how to replace one specific text. Not more than one. I need the same plugin replace also __ENDDIV__
2 - If __STARTDIV__ appears several times in the same page, it replace only the first occurrence.
3 - Probably because of Publii rendering order, it automatically adds </div> after <div>. I would like the plugin to act not on the raw text (the source text), but on the html code after rendering.

If you can help me solve the three problems above, I will need help with a fourth problem: I don't know how to use RegExp correctly. How would you replace:
__STARTDIV__id="cadre1"_data-version="10"__ by <div id="id1" data-version="10">

Here is what I'll create in Page Blocks:

Here is the output I want:

<div id="id1" data-version="10">
<h1>Title</h1>
<p>Text here</p>
</div>

Thanks :D

[bjazmoore]

Hey @Vinc26 - I have a plugin for you that will do exactly what you want to do. I will be announcing it in minutes. It is located in my GitHub and it will replace AAA with BBB - what ever you want to replace. I tested your specific use case and it works great. Get it here.

[dziudek]

@Vinc26 - your problem is with lack of usage regexps in .replace function - by default .replace if param is a string will replace only first occurence. The plugin suggested by @bjazmoore - sounds like a solution for your case. If you need a more complex approach, you can consider this plugin: https://marketplace.getpublii.com/plugins/smart-replacer/ - it also allows to do replacements outside the post content and only on specific subpages (it supports regexps too)

[Vinc26]

Hey, thanks both!

@bjazmoore, your plugin does almost everything I need!!! Thanks! Do you will publish on the Publii Products page?

It stay only my need to paste a variable to the result. Like [div__style="background-color:blue;"__] become <div style="background-color:blue;">. Where __ represent the start and the end point of what to reproduce.
An another sample: [div__id="cadre1" data-version="10"__] become <div id="id1" data-version="10">

More generic:
Key [AAA__%1__]
Replacment 123456 %1 123456
In text [AAA__B C DE__]
Result 123456 B C DE 123456

Possible? I would have tried to contribute to your plugin by adding this feature myself, but unfortunately I don't know the regexps. I understand that using ( ) create a back reference. But... I don't know really how to use it. Sorry

[bjazmoore]

@Vinc26 as @dziudek suggested - if you need more advanced replacement tools including Regex support you should look into the Smart Replacer. I do not plan to extend this plugin to the point that would do everything that Smart Replacer does.

I do not have a problem with you cloning the repo and trying to adapt the tool as needed. The MIT license permits this. Good luck.

[Vinc26]

Yes I totally understand. Thanks!

[Vinc26]

Hi again @bjazmoore , just tried your plugin, and I thing I found a bug:

Here is the Publii website:
my-new-website.zip

I've tried to understand the bug, but I not enough experiment.

[bjazmoore]

Hi again @bjazmoore , just tried your plugin, and I thing I found a bug...

I will look at it tonight. Don't be afraid to report bugs on the GitHub page - issues tab. Thanks.

[bjazmoore]

I will be updating the documentation - the replacer really struggle with double quotes. I was sure it was working before release, but it is not. I have fiddled with it, slowly breaking it without a lot of improvement. I hate regex! Anyway - here is the new rule:

DON'T USE DOUBLE QUOTES. Use single quotes. The following rule work fine:

If you need to have a double quote between the single quotes then use the code " where you want it to be. This rule does not result in a working CSS statement, but it makes the point:

It looks like this in the source code structure:

I will be adjusting the documentation. Sorry for the problem.

I recommend that you use classes and do your styling in Publii in Tools&Plugins -> Custom CSS.

P.S. - when sharing a site please share a backup file. Thanks

[Vinc26]

Oh thanks for all! And yes, the next time, I'll use backup file, and directly in Github issues pan. I'm really novice with all that... only one week :D