For maintenance purpose you can create a folder inside your theme : templates/ckeditor_templates, and create each file template inside this folder (for exemple : table.html.twig).
Create a file call ckeditor-watcher.js with this code :
const fs = require("fs");
const chokidar = require("chokidar");
const util = require("util");
const minify = require("html-minifier").minify;
const folderPath = "./templates/ckeditor_template";
const watcher = chokidar.watch(folderPath, {
ignored: /(^|[\/\\])\../,
persistent: true,
});
const readFile = util.promisify(fs.readFile);
async function generateJSON() {
let data = [];
fs.readdir(folderPath, async (err, files) => {
if (err) {
console.error(`Erreur lors de la lecture du dossier :`, err);
return;
}
for (let file of files) {
if (file.endsWith(".html.twig")) {
try {
let content = await readFile(`${folderPath}/${file}`, "utf8");
let minifiedContent = minify(content, {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
});
data.push({
title: file
.replace("ckeditor5-", "")
.replace(".html.twig", "")
.split("-")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" "),
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>',
html: minifiedContent,
});
} catch (err) {
console.error(`Erreur lors de la lecture du fichier :`, err);
}
}
}
fs.writeFile(
"./ckeditor5_template.json",
JSON.stringify(data, null, 4),
(err) => {
if (err) {
console.error(`Erreur lors de l'écriture du fichier JSON :`, err);
} else {
console.log(`Fichier JSON généré`);
}
}
);
});
}
watcher.on("change", async (path) => {
if (path.endsWith(".html.twig")) {
await generateJSON();
}
});
This will auto generate the json needed.