Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling new emojis shortcodes

Browse Source
This commit is contained in:
Antoine M 2024-08-19 16:24:09 +02:00
parent 9f02e553cb
commit 895ec61059
3 changed files with 73 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/editor-content/gutenberg.css
View File

@ -52,6 +52,7 @@ article > *:not(.entry-content, .chapter-header-block),
.table-cell-icon--checked {
@apply bg-green-600;
}
.table-cell-icon--dashed,
.table-cell-icon--crossed {
@apply bg-white border-2 border-neutral-800;
}

3
resources/img/graphic-assets/table-cell--dash.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.05" height="14.05" viewBox="0 0 14.05 14.05">
<path id="Tracé_3612" data-name="Tracé 3612" d="M-3933.656,6205.491l-7.117-7.1" transform="translate(-1594.38 -7162.442) rotate(-45)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

91
resources/js/editor.js
View File

@ -1,25 +1,72 @@
export default function editorInit() {
const tablesCells = document.querySelectorAll('.wp-block-table td');
function filterCells(element, stringToParse) {
return element.textContent.trim() === stringToParse;
/**
* Gestion des shortcodes dans l'éditeur
* Les shortcodes pris en charge et leurs remplacements sont les suivants :
* - `((v))` : Remplacé par une image avec une icône de vérification.
* - `((x))` : Remplacé par une image avec une icône de croix.
* - `((-))` : Remplacé par une image avec une icône tiret.
* - `(:-))` : Remplacé par une image avec une icône de croix.
* - `(:-|)` : Remplacé par une image avec une icône de croix.
* - `(:-()` : Remplacé par une image avec une icône de croix.
*
* @function
* @returns {void}
*/
function handleEditorShortCodes() {
// Sélectionnez tous les éléments avec la classe 'entry-content'
const editorContent = document.querySelector('.entry-content');
if (!editorContent) return;
const replacements = {
// ((v))
'\\(\\(v\\)\\)': `
<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
alt="${mainAppJsDynamicDatas.yes}"/></div>
`,
// ((x))
'\\(\\(x\\)\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="Alternative"/>
`,
// ((-))
'\\(\\(-\\)\\)': `
<img class="table-cell-icon table-cell-icon--dashed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--dash.svg"
alt="Alternative"/>
`,
// (:-))
'\\(:-\\)\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="Possible"/>
`,
// (:-|)
'\\(:-\\|\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="Alternative"/>
`,
// (:-()
'\\(:-\\(\\)': `
<img class="table-cell-icon table-cell-icon--crossed"
src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="Alternative"/>
`,
};
// Fonction pour remplacer les shortcodes dans le contenu
function replaceShortcodes(content) {
for (const [shortcodePattern, replacementHTML] of Object.entries(replacements)) {
const regex = new RegExp(shortcodePattern, 'g');
content = content.replace(regex, replacementHTML);
}
return content;
}
const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))'));
const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))'));
checkedCells.forEach((cell) => {
cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
alt="${mainAppJsDynamicDatas.yes}"/></div>`;
});
crossedCells.forEach((cell) => {
cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="${mainAppJsDynamicDatas.no}"/>`;
});
// tables.forEach((table) => {
// const tableCells = contains('td', '((v))');
// console.log(tableRows);
// tableRows.forEach((row) => {
// console.log(row);
// });
// });
editorContent.innerHTML = replaceShortcodes(editorContent.innerHTML);
}
export default function editorInit() {
handleEditorShortCodes();
}