Applications aka plugins, modules v2.0

This plugin structure is a typical example of a project organization with a separation of functionality and usage areas. Let’s break it down:

Root Structure
At the root level, there are three main folders:

admin — files related to the plugin's administrative functionality.
iframe — files for rendering content within an iframe planner.
react — files associated with using React.js (possibly for the user interface or other components).

admin Folder
This folder handles the administrative part of the plugin. It includes:

config.json — a configuration file for the admin interface. Typically, it contains settings like interface parameters or initialization data.

{
  "button": {
    "text": "Multi link",
    "class": "btn btn-primary",
    "icon": "fa fa-link"
  }
}

index.html — an HTML file for rendering the admin interface.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script>
        const config = JSON.parse(atob('config.json'));
    </script>
    <script src="index.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" onclick="addRow()">Add</button>
<button type="button" class="btn btn-success" onclick="saveData()">Save</button>
    <div class="container">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>

index.js — a JavaScript file providing functionality for the admin interface.

let productId = null;
let metadata = null;

window.addEventListener("message", messageListener, false);

function messageListener(e) {
    try {
        var messageObj = JSON.parse(e.data);
    } catch (error) {
        console.error("Error parse JSON string!");
        return;
    }

    if (messageObj.action == 'set_data') {
        // debugger;

        if (messageObj.product_id) {
            productId = messageObj.product_id;
        }
        if (messageObj.metadata) {
            metadata = messageObj.metadata;
        }

        prepareData(metadata);
    }
}

function prepareData(metadata) {
    const pluginData = metadata ? metadata[config.name.toLowerCase()] : [];

    const {config: dataConfig, data} = pluginData;

    if (data && data.length) {
        data.forEach(item => {
            addRow(item);
        });
    } else {

    }
}

if (document.readyState === "complete") {
    window.parent.postMessage(JSON.stringify({action: 'app_ready'}), '*');
} else {
    document.addEventListener("DOMContentLoaded", function () {
        window.parent.postMessage(JSON.stringify({action: 'app_ready'}), '*');
    });
}

const saveData = () => {
    const data = [];
    const rows = document.querySelectorAll('.row');
    rows.forEach(row => {
        const country = row.querySelector('select').value;
        const url = row.querySelector('input').value;
        data.push({country, url});
    });
    window.parent.postMessage(JSON.stringify({
        action: 'app_save',
        data,
        config,
        productId,
        appName: config.name
    }), '*');
}

iframe Folder
This folder contains files required to display content within an iframe:

index.html — the main HTML file for the iframe content.
The iframe might be used to display content isolated from the plugin's main environment.

react Folder
This folder relates to the use of React.js. It includes:

index.js — the main JavaScript file, likely containing React components or the entry point for the React application.

config.json — a main configuration file for the application holding settings specific to the project.

{
    "name": "MultiLinkWithIp",
    "start": "immediately"
}

Description of Fields

name (String):

Represents the name or identifier of the entity, feature, or module.
In this case, "MultiLinkWithIp" is likely the name of the plugin, a feature, or a configuration component.

start (String):

Specifies when or how the process, feature, or module should start.
"immediately" indicates that the action should occur after the product is shown on the right part of the Planner
Other possible values could be "on-demand" - when the user clicks on the Configurate button

Administrative Interface:
Files in the admin folder are intended for administrators or developers to configure or manage the plugin via a dedicated interface.

Iframe Content:
The iframe folder is used to load content in an isolated environment (e.g., to prevent styles or scripts from affecting the main site).

React Components:
The react folder may contain functional elements of the user interface or other interactive components implemented in React.js.