how can I create and use unique custom_id for any element of laravel-grapesjs?

Question

In laravel 8 app with "jd-dotlogics/laravel-grapesjs": "^3.3.0", I need to extend its functionality :

1. To add new custom button at toolbar

2. By clicking on this custom button to open JS prompt method

3. If prompt method was closed with success to save entered value(external url) with unique id of selected element in db with request to server.

4. For any element on the form I need some unique custom_id and sending saving request save unique custom_id/Entered value

Next time when editor is opened by manager request to db must be send and these Entered value created prior sessions must be tied to any element by these unique custom_id. Can I create somehow these unique custom_id ?

Manually editing public/vendor/laravel-grapesjs/assets/editor.js file I made 3 first points(last without posting request to server). https://prnt.sc/rhIrgNpV_JS7 I know usually it is supposed that this file is not edited manually, but I do not see any other way to implement it.

Unpacked version is 37 K lines of code, so I pasted it in : https://zerobin.net/?bf6a96ac404ac3b1#oVMCXPuQUJVxzm9kuLAa/7tAQ9Kj1Gjhw0y/4aGR+BE=

Any ideas how can I create and use these unique custom_id ?

I need something like when html element is located on some element to assign unique custom_id = "parent_el_type_id=>parent_el_type_id=>this_el_type_id=>" - to be sure that this custom_id is unique

UPDATED BLOCK # 1;

I have got the common idea. I try to implement it as :

In config file config/laravel-grapesjs.php(which has links to all js files) I made changes :

'scripts' => [
    'https://www.jsdelivr.com/package/npm/fs.promises', // I tried to import fs.promises - but that does not work
    'vendor/laravel-grapesjs/assets/editor_control.js', // I added new file
    'vendor/laravel-grapesjs/assets/editor-config.js',
    'vendor/laravel-grapesjs/assets/modified_editor.js', // modified editor.js must be used
],

And new file vendor/laravel-grapesjs/assets/editor_control.js with lines :

import fs from "fs/promises";
import { v4 as uuidv4 } from 'uuid';

(async () => {


  let code = await fs.readFile("editor.js", "utf-8");  // source js file
  let regexp = /(document\.createElement\("[a-z]*"\))/gi;
  let match;

  while ((match = regexp.exec(code)) !== null) {
    let createElementString = match[0];
    let tagName = createElementString.split('"')[1];
    let startIdx = match.index;
    let endIdx = regexp.lastIndex;
    code = [code.slice(0, startIdx), `createElement("${tagName}","${uuidv4()}")`, code.slice(endIdx)].join('');
  }

  await fs.writeFile("modified_editor.js", code); // modified js file

})();

But I got 2 errors in console :

GET http://landigator.test/vendor/laravel-grapesjs/assets/modified_editor.js net::ERR_ABORTED 404 (Not Found)
and
Uncaught SyntaxError: Cannot use import statement outside a module (at editor.js:1:1)

The reason is that I can not use import function in plain js file. I know how to use fetch function and it could be replacement of "fs/promises", but what can I use instead of uuidv4?

I think I must open modified_editor.js AFTER editor_control.js was run and created modified_editor.js file

How that can be fixed ?

UPDATED BLOCK # 2: I failed to upload fs/promises, so I create table in db with 2 fields try to save source_code - with source of js file and generated_code - in I want to save converted file.

I made control method for converting from source_code into generated_code :

$jsSourceFile = JsSourceFile
    ::getByCodeKey('editor.js')
    ->first();
return view('pages.editor-modify-script', [
    'jsSourceFile'=> $jsSourceFile
]);

and in blade file I try to use this value from db :

            console.log('-BEFORE code::')
{{--            let code = "{{ htmlspecialchars($jsSourceFile->source_code) }}";--}}
            let code = '{{ $jsSourceFile->source_code }}';
            console.log(code)

            let regexp = /(document\.createElement\("[a-z]*"\))/gi;
            let match;

            while ((match = regexp.exec(code)) !== null) {
                let createElementString = match[0];
                let tagName = createElementString.split('"')[1];
                let startIdx = match.index;
                let endIdx = regexp.lastIndex;
                code = [code.slice(0, startIdx), `createElement("${tagName}","${window.v4()}")`, code.slice(endIdx)].join('');
            }
            console.log('-AFTER code::')
            console.log(code)

But I got error :

Uncaught SyntaxError: Invalid or unexpected token (at

and I see in browser : https://prnt.sc/ool9YWp85uWH If there is a safe way to pass laravel var $jsSourceFile->source_code into JS var ? I tried several ways, but failed.

Thanks!

Answer 1

Well if I understood correctly, this is actually a somewhat of a metaprogramming issue.

So we want to do something to all document.createElement instances in the huge chunk of code, mainly, to add some id to all of those created elements.

The first problem here is that there actually is no meaningful way to do something like:

document.createElement("div", { id: "uuid" });

And we also can't do:

document.createElement("div").setAttribute("id", "uuid");

Because setAttribute returns undefined instead of the element.

But first things first. Our approach here is to make a simple node.js script which loads the code file in as texts, finds all instances of document.createElement and replaces them with something that adds the id information.

But what that something is then? Well I figured the easiest approach would probably be to just make our own createElement function which accepts an id on top of the element tagname:

const createElement = (el, id) => {
    let element = document.createElement(el);
    element.setAttribute("id", id);
    return element;
}

All we have to do now is to replace all of the document.createElement calls with our own createElement(tagName, id) calls. As our custom function also returns the element, just like document.createElement does, everything should work fine.

Here's that code:

import fs from "fs/promises";
import { v4 as uuidv4 } from 'uuid';

(async () => {

    let code = await fs.readFile("file.txt", "utf-8");
    let regexp = /(document\.createElement\("[a-z]*"\))/gi;
    let match;

    while ((match = regexp.exec(code)) !== null) {
        let createElementString = match[0];
        let tagName = createElementString.split('"')[1];
        let startIdx = match.index;
        let endIdx = regexp.lastIndex;
        code = [code.slice(0, startIdx), `createElement("${tagName}","${uuidv4()}")`, code.slice(endIdx)].join('');
    }

    await fs.writeFile("id_file.txt", code);

})();

Given the massive code file named file.txt, it outputs a new file named id_file.txt, which looks like this:

These ids will only change if the file is generated again.

Now the important thing here is to add the createElement function into the generated file, or otherwise the code won't work. I think this will do: