From b5b7ec155b9b37053ffebfc941ffbc71de10471f Mon Sep 17 00:00:00 2001
From: Luis Miguel <ktecho@ktecho.com>
Date: Fri, 2 Feb 2024 16:20:09 +0100
Subject: [PATCH] CMS UI/UX improvements (#393)

* Left Arrow to go back from the page editor

* Make content for small screens (desktop) a bit wider

* Improve margins in Setup and CMS screens for different screen sizes

* Moving Lexical icons again to a better place
---
 .../lib/components/settings/PageEditor.svelte |  12 +-
 web/frontoffice/src/routes/+layout.svelte     |   2 +-
 web/frontoffice/src/routes/cms/+page.svelte   |   2 +-
 .../src/routes/settings/+page.svelte          |   2 +-
 .../images/icons}/arrow-clockwise.svg         |   0
 .../images/icons}/arrow-counterclockwise.svg  |   0
 .../lexical-editor/images/icons}/bg-color.svg |   0
 .../lexical-editor/images/icons}/camera.svg   |   0
 .../images/icons}/card-checklist.svg          |   0
 .../images/icons}/caret-right-fill.svg        |   0
 .../images/icons}/chat-left-text.svg          |   0
 .../images/icons}/chat-right-dots.svg         |   0
 .../images/icons}/chat-right-text.svg         |   0
 .../images/icons}/chat-right.svg              |   0
 .../images/icons}/chat-square-quote.svg       |   0
 .../images/icons}/chevron-down.svg            |   0
 .../images/icons}/clipboard.svg               |   0
 .../lexical-editor/images/icons}/close.svg    |   0
 .../lexical-editor/images/icons}/code.svg     |   0
 .../lexical-editor/images/icons}/comments.svg |   0
 .../lexical-editor/images/icons}/copy.svg     |   0
 .../images/icons}/diagram-2.svg               |   0
 .../lexical-editor/images/icons}/download.svg |   0
 .../images/icons}/draggable-block-menu.svg    |   0
 .../images/icons}/dropdown-more.svg           |   0
 .../lexical-editor/images/icons}/figma.svg    |   0
 .../images/icons}/file-earmark-text.svg       |   0
 .../images/icons}/file-image.svg              |   0
 .../images/icons}/filetype-gif.svg            |   0
 .../images/icons}/font-color.svg              |   0
 .../images/icons}/font-family.svg             |   0
 .../lexical-editor/images/icons}/gear.svg     |   0
 .../images/icons}/horizontal-rule.svg         |   0
 .../lexical-editor/images/icons}/indent.svg   |   0
 .../images/icons}/journal-code.svg            |   0
 .../images/icons}/journal-text.svg            |   0
 .../lexical-editor/images/icons}/justify.svg  |   0
 .../lexical-editor/images/icons}/link.svg     |   0
 .../lexical-editor/images/icons}/list-ol.svg  |   0
 .../lexical-editor/images/icons}/list-ul.svg  |   0
 .../images/icons}/lock-fill.svg               |   0
 .../lexical-editor/images/icons}/lock.svg     |   0
 .../lexical-editor/images/icons}/markdown.svg |   0
 .../lexical-editor/images/icons}/mic.svg      |   0
 .../lexical-editor/images/icons}/outdent.svg  |   0
 .../images/icons}/paint-bucket.svg            |   0
 .../lexical-editor/images/icons}/palette.svg  |   0
 .../images/icons}/pencil-fill.svg             |   0
 .../images/icons}/plug-fill.svg               |   0
 .../lexical-editor/images/icons}/plug.svg     |   0
 .../images/icons}/plus-slash-minus.svg        |   0
 .../lexical-editor/images/icons}/plus.svg     |   0
 .../images/icons}/prettier-error.svg          |   0
 .../lexical-editor/images/icons}/prettier.svg |   0
 .../lexical-editor/images/icons}/send.svg     |   0
 .../images/icons}/square-check.svg            |   0
 .../lexical-editor/images/icons}/sticky.svg   |   0
 .../images/icons}/success-alt.svg             |   0
 .../lexical-editor/images/icons}/success.svg  |   0
 .../lexical-editor/images/icons}/table.svg    |   0
 .../images/icons}/text-center.svg             |   0
 .../images/icons}/text-left.svg               |   0
 .../images/icons}/text-paragraph.svg          |   0
 .../images/icons}/text-right.svg              |   0
 .../lexical-editor/images/icons}/trash.svg    |   0
 .../lexical-editor/images/icons}/trash3.svg   |   0
 .../lexical-editor/images/icons}/tweet.svg    |   0
 .../images/icons}/type-bold.svg               |   0
 .../lexical-editor/images/icons}/type-h1.svg  |   0
 .../lexical-editor/images/icons}/type-h2.svg  |   0
 .../lexical-editor/images/icons}/type-h3.svg  |   0
 .../lexical-editor/images/icons}/type-h4.svg  |   0
 .../lexical-editor/images/icons}/type-h5.svg  |   0
 .../lexical-editor/images/icons}/type-h6.svg  |   0
 .../images/icons}/type-italic.svg             |   0
 .../images/icons}/type-strikethrough.svg      |   0
 .../images/icons}/type-subscript.svg          |   0
 .../images/icons}/type-superscript.svg        |   0
 .../images/icons}/type-underline.svg          |   0
 .../lexical-editor/images/icons}/upload.svg   |   0
 .../lexical-editor/images/icons}/user.svg     |   0
 .../lexical-editor/images/icons}/youtube.svg  |   0
 .../pagebuilder/lexical-editor/lexical.css    | 176 +++++++++---------
 83 files changed, 101 insertions(+), 93 deletions(-)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/arrow-clockwise.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/arrow-counterclockwise.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/bg-color.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/camera.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/card-checklist.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/caret-right-fill.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chat-left-text.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chat-right-dots.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chat-right-text.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chat-right.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chat-square-quote.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/chevron-down.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/clipboard.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/close.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/code.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/comments.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/copy.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/diagram-2.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/download.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/draggable-block-menu.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/dropdown-more.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/figma.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/file-earmark-text.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/file-image.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/filetype-gif.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/font-color.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/font-family.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/gear.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/horizontal-rule.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/indent.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/journal-code.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/journal-text.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/justify.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/link.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/list-ol.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/list-ul.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/lock-fill.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/lock.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/markdown.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/mic.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/outdent.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/paint-bucket.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/palette.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/pencil-fill.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/plug-fill.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/plug.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/plus-slash-minus.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/plus.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/prettier-error.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/prettier.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/send.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/square-check.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/sticky.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/success-alt.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/success.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/table.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/text-center.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/text-left.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/text-paragraph.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/text-right.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/trash.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/trash3.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/tweet.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-bold.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h1.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h2.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h3.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h4.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h5.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-h6.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-italic.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-strikethrough.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-subscript.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-superscript.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/type-underline.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/upload.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/user.svg (100%)
 rename web/{frontoffice/static/images/icons/lexical => shared/src/lib/components/pagebuilder/lexical-editor/images/icons}/youtube.svg (100%)

diff --git a/web/frontoffice/src/lib/components/settings/PageEditor.svelte b/web/frontoffice/src/lib/components/settings/PageEditor.svelte
index 617f0f95..a0cd4472 100644
--- a/web/frontoffice/src/lib/components/settings/PageEditor.svelte
+++ b/web/frontoffice/src/lib/components/settings/PageEditor.svelte
@@ -21,6 +21,7 @@
     import BuilderSectionSetup from "$sharedLib/components/pagebuilder/BuilderSectionSetup.svelte";
     import {onMount} from "svelte";
     import AlertInfo from "$sharedLib/components/icons/AlertInfo.svelte";
+    import ArrowLeft from "$sharedLib/components/icons/ArrowLeft.svelte";
 
     // General
     let logoURL = '';
@@ -134,7 +135,14 @@
             {/if}
 
             {#if selectedPageId}
-                <a class="underline" on:click={() => selectedPageId = null} href={null}>- Back -</a>
+                <div class="flex items-start justify-start text-left align-middle ml-4 lg:ml-14 2xl:ml-28 3xl:ml-32">
+                    <div class="w-10 mr-2 cursor-pointer" on:click={() => selectedPageId = null}>
+                        <ArrowLeft />
+                    </div>
+                    <div class="w-10 cursor-pointer" on:click={() => selectedPageId = null}>
+                        <span class="inline-block align-middle text-lg mt-1">Back</span>
+                    </div>
+                </div>
                 <h2>Editing <span class="font-bold">{getPage(selectedPageId, $NostrGlobalConfig).title}</span> page content.</h2>
 
                 {#if selectedPageId && selectedPageId !== '0'}
@@ -163,7 +171,7 @@
                     <p>Add sections here, and set them up to display what you need to show in each of them.</p>
                 </div>
 
-                <div class="mt-5 2xl:w-11/12 3xl:w-9/12 mx-auto text-xs md:text-base">
+                <div class="mt-5 mx-auto text-xs md:text-base">
                     <div class="mb-4">
                         <input type="text" bind:value={newSection} placeholder="Title of the new section" class="input input-bordered input-success w-full max-w-xs input-sm" />
                         <button class="btn btn-sm btn-success ml-1" class:btn-disabled={!newSection}
diff --git a/web/frontoffice/src/routes/+layout.svelte b/web/frontoffice/src/routes/+layout.svelte
index 6ec32b36..d6a8f31a 100644
--- a/web/frontoffice/src/routes/+layout.svelte
+++ b/web/frontoffice/src/routes/+layout.svelte
@@ -119,7 +119,7 @@
 <div class="h-screen pt-12 lg:pt-20 pb-20 { $page.url.pathname === '/messages' ? '' : 'mt-2' }">
     <Navbar />
 
-    <div class="mx-auto mb-6 min-h-[80%] { $page.url.pathname === '/messages' ? 'h-full' : '' } { $page.url.pathname === '/' ? 'w-screen' : 'w-11/12 lg:w-10/12' }">
+    <div class="mx-auto mb-6 min-h-[80%] { $page.url.pathname === '/messages' ? 'h-full' : '' } { $page.url.pathname === '/' ? 'w-screen' : 'w-11/12 xl:w-10/12' }">
         <Notifications />
 
         <slot />
diff --git a/web/frontoffice/src/routes/cms/+page.svelte b/web/frontoffice/src/routes/cms/+page.svelte
index 4034052f..50219414 100644
--- a/web/frontoffice/src/routes/cms/+page.svelte
+++ b/web/frontoffice/src/routes/cms/+page.svelte
@@ -37,7 +37,7 @@
 
 <Titleh1>CMS</Titleh1>
 
-<div class="lg:grid lg:grid-cols-4 2xl:w-11/12 3xl:w-9/12 w-full p-0 md:p-4 pb-8 mx-auto">
+<div class="lg:grid lg:grid-cols-4 w-full 2xl:w-11/12 3xl:w-10/12 p-0 md:p-4 pb-8 mx-auto">
     <div class="md:grow-0 pb-10">
         <ul class="md:w-52 mt-3 p-2 menu menu-compact bg-base-300 rounded-box">
             {#each pages as page}
diff --git a/web/frontoffice/src/routes/settings/+page.svelte b/web/frontoffice/src/routes/settings/+page.svelte
index 054a236a..96ed7a44 100644
--- a/web/frontoffice/src/routes/settings/+page.svelte
+++ b/web/frontoffice/src/routes/settings/+page.svelte
@@ -35,7 +35,7 @@
 
 <Titleh1>Settings</Titleh1>
 
-<div class="lg:grid lg:grid-cols-4 2xl:w-11/12 3xl:w-9/12 w-full p-0 md:p-4 pb-8 mx-auto">
+<div class="lg:grid lg:grid-cols-4 w-full 2xl:w-11/12 3xl:w-10/12 p-0 md:p-4 pb-8 mx-auto">
     <div class="md:grow-0 pb-10">
         <ul class="md:w-52 mt-3 p-2 menu menu-compact bg-base-300 rounded-box">
             {#each pages as page}
diff --git a/web/frontoffice/static/images/icons/lexical/arrow-clockwise.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/arrow-clockwise.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/arrow-clockwise.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/arrow-clockwise.svg
diff --git a/web/frontoffice/static/images/icons/lexical/arrow-counterclockwise.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/arrow-counterclockwise.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/arrow-counterclockwise.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/arrow-counterclockwise.svg
diff --git a/web/frontoffice/static/images/icons/lexical/bg-color.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/bg-color.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/bg-color.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/bg-color.svg
diff --git a/web/frontoffice/static/images/icons/lexical/camera.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/camera.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/camera.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/camera.svg
diff --git a/web/frontoffice/static/images/icons/lexical/card-checklist.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/card-checklist.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/card-checklist.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/card-checklist.svg
diff --git a/web/frontoffice/static/images/icons/lexical/caret-right-fill.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/caret-right-fill.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/caret-right-fill.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/caret-right-fill.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chat-left-text.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-left-text.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chat-left-text.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-left-text.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chat-right-dots.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right-dots.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chat-right-dots.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right-dots.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chat-right-text.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right-text.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chat-right-text.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right-text.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chat-right.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chat-right.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-right.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chat-square-quote.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-square-quote.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chat-square-quote.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chat-square-quote.svg
diff --git a/web/frontoffice/static/images/icons/lexical/chevron-down.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chevron-down.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/chevron-down.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/chevron-down.svg
diff --git a/web/frontoffice/static/images/icons/lexical/clipboard.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/clipboard.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/clipboard.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/clipboard.svg
diff --git a/web/frontoffice/static/images/icons/lexical/close.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/close.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/close.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/close.svg
diff --git a/web/frontoffice/static/images/icons/lexical/code.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/code.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/code.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/code.svg
diff --git a/web/frontoffice/static/images/icons/lexical/comments.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/comments.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/comments.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/comments.svg
diff --git a/web/frontoffice/static/images/icons/lexical/copy.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/copy.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/copy.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/copy.svg
diff --git a/web/frontoffice/static/images/icons/lexical/diagram-2.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/diagram-2.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/diagram-2.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/diagram-2.svg
diff --git a/web/frontoffice/static/images/icons/lexical/download.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/download.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/download.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/download.svg
diff --git a/web/frontoffice/static/images/icons/lexical/draggable-block-menu.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/draggable-block-menu.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/draggable-block-menu.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/draggable-block-menu.svg
diff --git a/web/frontoffice/static/images/icons/lexical/dropdown-more.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/dropdown-more.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/dropdown-more.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/dropdown-more.svg
diff --git a/web/frontoffice/static/images/icons/lexical/figma.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/figma.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/figma.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/figma.svg
diff --git a/web/frontoffice/static/images/icons/lexical/file-earmark-text.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/file-earmark-text.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/file-earmark-text.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/file-earmark-text.svg
diff --git a/web/frontoffice/static/images/icons/lexical/file-image.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/file-image.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/file-image.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/file-image.svg
diff --git a/web/frontoffice/static/images/icons/lexical/filetype-gif.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/filetype-gif.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/filetype-gif.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/filetype-gif.svg
diff --git a/web/frontoffice/static/images/icons/lexical/font-color.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/font-color.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/font-color.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/font-color.svg
diff --git a/web/frontoffice/static/images/icons/lexical/font-family.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/font-family.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/font-family.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/font-family.svg
diff --git a/web/frontoffice/static/images/icons/lexical/gear.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/gear.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/gear.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/gear.svg
diff --git a/web/frontoffice/static/images/icons/lexical/horizontal-rule.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/horizontal-rule.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/horizontal-rule.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/horizontal-rule.svg
diff --git a/web/frontoffice/static/images/icons/lexical/indent.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/indent.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/indent.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/indent.svg
diff --git a/web/frontoffice/static/images/icons/lexical/journal-code.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/journal-code.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/journal-code.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/journal-code.svg
diff --git a/web/frontoffice/static/images/icons/lexical/journal-text.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/journal-text.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/journal-text.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/journal-text.svg
diff --git a/web/frontoffice/static/images/icons/lexical/justify.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/justify.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/justify.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/justify.svg
diff --git a/web/frontoffice/static/images/icons/lexical/link.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/link.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/link.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/link.svg
diff --git a/web/frontoffice/static/images/icons/lexical/list-ol.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/list-ol.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/list-ol.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/list-ol.svg
diff --git a/web/frontoffice/static/images/icons/lexical/list-ul.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/list-ul.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/list-ul.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/list-ul.svg
diff --git a/web/frontoffice/static/images/icons/lexical/lock-fill.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/lock-fill.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/lock-fill.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/lock-fill.svg
diff --git a/web/frontoffice/static/images/icons/lexical/lock.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/lock.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/lock.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/lock.svg
diff --git a/web/frontoffice/static/images/icons/lexical/markdown.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/markdown.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/markdown.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/markdown.svg
diff --git a/web/frontoffice/static/images/icons/lexical/mic.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/mic.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/mic.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/mic.svg
diff --git a/web/frontoffice/static/images/icons/lexical/outdent.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/outdent.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/outdent.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/outdent.svg
diff --git a/web/frontoffice/static/images/icons/lexical/paint-bucket.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/paint-bucket.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/paint-bucket.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/paint-bucket.svg
diff --git a/web/frontoffice/static/images/icons/lexical/palette.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/palette.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/palette.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/palette.svg
diff --git a/web/frontoffice/static/images/icons/lexical/pencil-fill.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/pencil-fill.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/pencil-fill.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/pencil-fill.svg
diff --git a/web/frontoffice/static/images/icons/lexical/plug-fill.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plug-fill.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/plug-fill.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plug-fill.svg
diff --git a/web/frontoffice/static/images/icons/lexical/plug.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plug.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/plug.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plug.svg
diff --git a/web/frontoffice/static/images/icons/lexical/plus-slash-minus.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plus-slash-minus.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/plus-slash-minus.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plus-slash-minus.svg
diff --git a/web/frontoffice/static/images/icons/lexical/plus.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plus.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/plus.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/plus.svg
diff --git a/web/frontoffice/static/images/icons/lexical/prettier-error.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/prettier-error.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/prettier-error.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/prettier-error.svg
diff --git a/web/frontoffice/static/images/icons/lexical/prettier.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/prettier.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/prettier.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/prettier.svg
diff --git a/web/frontoffice/static/images/icons/lexical/send.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/send.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/send.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/send.svg
diff --git a/web/frontoffice/static/images/icons/lexical/square-check.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/square-check.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/square-check.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/square-check.svg
diff --git a/web/frontoffice/static/images/icons/lexical/sticky.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/sticky.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/sticky.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/sticky.svg
diff --git a/web/frontoffice/static/images/icons/lexical/success-alt.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/success-alt.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/success-alt.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/success-alt.svg
diff --git a/web/frontoffice/static/images/icons/lexical/success.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/success.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/success.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/success.svg
diff --git a/web/frontoffice/static/images/icons/lexical/table.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/table.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/table.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/table.svg
diff --git a/web/frontoffice/static/images/icons/lexical/text-center.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-center.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/text-center.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-center.svg
diff --git a/web/frontoffice/static/images/icons/lexical/text-left.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-left.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/text-left.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-left.svg
diff --git a/web/frontoffice/static/images/icons/lexical/text-paragraph.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-paragraph.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/text-paragraph.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-paragraph.svg
diff --git a/web/frontoffice/static/images/icons/lexical/text-right.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-right.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/text-right.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/text-right.svg
diff --git a/web/frontoffice/static/images/icons/lexical/trash.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/trash.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/trash.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/trash.svg
diff --git a/web/frontoffice/static/images/icons/lexical/trash3.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/trash3.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/trash3.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/trash3.svg
diff --git a/web/frontoffice/static/images/icons/lexical/tweet.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/tweet.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/tweet.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/tweet.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-bold.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-bold.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-bold.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-bold.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h1.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h1.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h1.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h1.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h2.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h2.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h2.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h2.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h3.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h3.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h3.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h3.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h4.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h4.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h4.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h4.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h5.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h5.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h5.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h5.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-h6.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h6.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-h6.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-h6.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-italic.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-italic.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-italic.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-italic.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-strikethrough.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-strikethrough.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-strikethrough.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-strikethrough.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-subscript.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-subscript.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-subscript.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-subscript.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-superscript.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-superscript.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-superscript.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-superscript.svg
diff --git a/web/frontoffice/static/images/icons/lexical/type-underline.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-underline.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/type-underline.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/type-underline.svg
diff --git a/web/frontoffice/static/images/icons/lexical/upload.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/upload.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/upload.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/upload.svg
diff --git a/web/frontoffice/static/images/icons/lexical/user.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/user.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/user.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/user.svg
diff --git a/web/frontoffice/static/images/icons/lexical/youtube.svg b/web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/youtube.svg
similarity index 100%
rename from web/frontoffice/static/images/icons/lexical/youtube.svg
rename to web/shared/src/lib/components/pagebuilder/lexical-editor/images/icons/youtube.svg
diff --git a/web/shared/src/lib/components/pagebuilder/lexical-editor/lexical.css b/web/shared/src/lib/components/pagebuilder/lexical-editor/lexical.css
index fa8a46cc..0a14bb62 100644
--- a/web/shared/src/lib/components/pagebuilder/lexical-editor/lexical.css
+++ b/web/shared/src/lib/components/pagebuilder/lexical-editor/lexical.css
@@ -230,19 +230,19 @@
   }
 
   #options-button::after {
-    background-image: url(images/icons/lexical/gear.svg);
+    background-image: url(images/icons/gear.svg);
   }
 
   #test-recorder-button::after {
-    background-image: url(images/icons/lexical/journal-code.svg);
+    background-image: url(images/icons/journal-code.svg);
   }
 
   #paste-log-button::after {
-    background-image: url(images/icons/lexical/clipboard.svg);
+    background-image: url(images/icons/clipboard.svg);
   }
 
   #docs-button::after {
-    background-image: url(images/icons/lexical/file-earmark-text.svg);
+    background-image: url(images/icons/file-earmark-text.svg);
   }
 
   #test-recorder-button-snapshot {
@@ -250,15 +250,15 @@
   }
 
   #test-recorder-button-snapshot::after {
-    background-image: url(images/icons/lexical/camera.svg);
+    background-image: url(images/icons/camera.svg);
   }
 
   #test-recorder-button-copy::after {
-    background-image: url(images/icons/lexical/clipboard.svg);
+    background-image: url(images/icons/clipboard.svg);
   }
 
   #test-recorder-button-download::after {
-    background-image: url(images/icons/lexical/download.svg);
+    background-image: url(images/icons/download.svg);
   }
 
   .typeahead-popover {
@@ -370,188 +370,188 @@
   }
 
   i.palette {
-    background-image: url(images/icons/lexical/palette.svg);
+    background-image: url(images/icons/palette.svg);
   }
 
   i.bucket {
-    background-image: url(images/icons/lexical/paint-bucket.svg);
+    background-image: url(images/icons/paint-bucket.svg);
   }
 
   i.bold {
-    background-image: url(images/icons/lexical/type-bold.svg);
+    background-image: url(images/icons/type-bold.svg);
   }
 
   i.italic {
-    background-image: url(images/icons/lexical/type-italic.svg);
+    background-image: url(images/icons/type-italic.svg);
   }
 
   i.clear {
-    background-image: url(images/icons/lexical/trash.svg);
+    background-image: url(images/icons/trash.svg);
   }
 
   i.code {
-    background-image: url(images/icons/lexical/code.svg);
+    background-image: url(images/icons/code.svg);
   }
 
   i.underline {
-    background-image: url(images/icons/lexical/type-underline.svg);
+    background-image: url(images/icons/type-underline.svg);
   }
 
   i.strikethrough {
-    background-image: url(images/icons/lexical/type-strikethrough.svg);
+    background-image: url(images/icons/type-strikethrough.svg);
   }
 
   i.subscript {
-    background-image: url(images/icons/lexical/type-subscript.svg);
+    background-image: url(images/icons/type-subscript.svg);
   }
 
   i.superscript {
-    background-image: url(images/icons/lexical/type-superscript.svg);
+    background-image: url(images/icons/type-superscript.svg);
   }
 
   i.link {
-    background-image: url(images/icons/lexical/link.svg);
+    background-image: url(images/icons/link.svg);
   }
 
   i.horizontal-rule {
-    background-image: url(images/icons/lexical/horizontal-rule.svg);
+    background-image: url(images/icons/horizontal-rule.svg);
   }
 
   .icon.plus {
-    background-image: url(images/icons/lexical/plus.svg);
+    background-image: url(images/icons/plus.svg);
   }
 
   .icon.caret-right {
-    background-image: url(images/icons/lexical/caret-right-fill.svg);
+    background-image: url(images/icons/caret-right-fill.svg);
   }
 
   .icon.dropdown-more {
-    background-image: url(images/icons/lexical/dropdown-more.svg);
+    background-image: url(images/icons/dropdown-more.svg);
   }
 
   .icon.font-color {
-    background-image: url(images/icons/lexical/font-color.svg);
+    background-image: url(images/icons/font-color.svg);
   }
 
   .icon.font-family {
-    background-image: url(images/icons/lexical/font-family.svg);
+    background-image: url(images/icons/font-family.svg);
   }
 
   .icon.bg-color {
-    background-image: url(images/icons/lexical/bg-color.svg);
+    background-image: url(images/icons/bg-color.svg);
   }
 
   i.image {
-    background-image: url(images/icons/lexical/file-image.svg);
+    background-image: url(images/icons/file-image.svg);
   }
 
   i.table {
-    background-image: url(images/icons/lexical/table.svg);
+    background-image: url(images/icons/table.svg);
   }
 
   i.close {
-    background-image: url(images/icons/lexical/close.svg);
+    background-image: url(images/icons/close.svg);
   }
 
   i.figma {
-    background-image: url(images/icons/lexical/figma.svg);
+    background-image: url(images/icons/figma.svg);
   }
 
   i.poll {
-    background-image: url(images/icons/lexical/card-checklist.svg);
+    background-image: url(images/icons/card-checklist.svg);
   }
 
   i.tweet {
-    background-image: url(images/icons/lexical/tweet.svg);
+    background-image: url(images/icons/tweet.svg);
   }
 
   i.youtube {
-    background-image: url(images/icons/lexical/youtube.svg);
+    background-image: url(images/icons/youtube.svg);
   }
 
   .icon.left-align,
   i.left-align {
-    background-image: url(images/icons/lexical/text-left.svg);
+    background-image: url(images/icons/text-left.svg);
   }
 
   i.center-align {
-    background-image: url(images/icons/lexical/text-center.svg);
+    background-image: url(images/icons/text-center.svg);
   }
 
   i.right-align {
-    background-image: url(images/icons/lexical/text-right.svg);
+    background-image: url(images/icons/text-right.svg);
   }
 
   i.justify-align {
-    background-image: url(images/icons/lexical/justify.svg);
+    background-image: url(images/icons/justify.svg);
   }
 
   i.indent {
-    background-image: url(images/icons/lexical/indent.svg);
+    background-image: url(images/icons/indent.svg);
   }
 
   i.markdown {
-    background-image: url(images/icons/lexical/markdown.svg);
+    background-image: url(images/icons/markdown.svg);
   }
 
   i.outdent {
-    background-image: url(images/icons/lexical/outdent.svg);
+    background-image: url(images/icons/outdent.svg);
   }
 
   i.undo {
-    background-image: url(images/icons/lexical/arrow-counterclockwise.svg);
+    background-image: url(images/icons/arrow-counterclockwise.svg);
   }
 
   i.redo {
-    background-image: url(images/icons/lexical/arrow-clockwise.svg);
+    background-image: url(images/icons/arrow-clockwise.svg);
   }
 
   i.sticky {
-    background-image: url(images/icons/lexical/sticky.svg);
+    background-image: url(images/icons/sticky.svg);
   }
 
   i.mic {
-    background-image: url(images/icons/lexical/mic.svg);
+    background-image: url(images/icons/mic.svg);
   }
 
   i.import {
-    background-image: url(images/icons/lexical/upload.svg);
+    background-image: url(images/icons/upload.svg);
   }
 
   i.export {
-    background-image: url(images/icons/lexical/download.svg);
+    background-image: url(images/icons/download.svg);
   }
 
   i.diagram-2 {
-    background-image: url(images/icons/lexical/diagram-2.svg);
+    background-image: url(images/icons/diagram-2.svg);
   }
 
   i.user {
-    background-image: url(images/icons/lexical/user.svg);
+    background-image: url(images/icons/user.svg);
   }
 
   i.equation {
-    background-image: url(images/icons/lexical/plus-slash-minus.svg);
+    background-image: url(images/icons/plus-slash-minus.svg);
   }
 
   i.gif {
-    background-image: url(images/icons/lexical/filetype-gif.svg);
+    background-image: url(images/icons/filetype-gif.svg);
   }
 
   i.copy {
-    background-image: url(images/icons/lexical/copy.svg);
+    background-image: url(images/icons/copy.svg);
   }
 
   i.success {
-    background-image: url(images/icons/lexical/success.svg);
+    background-image: url(images/icons/success.svg);
   }
 
   i.prettier {
-    background-image: url(images/icons/lexical/prettier.svg);
+    background-image: url(images/icons/prettier.svg);
   }
 
   i.prettier-error {
-    background-image: url(images/icons/lexical/prettier-error.svg);
+    background-image: url(images/icons/prettier-error.svg);
   }
 
   .link-editor .button.active,
@@ -596,7 +596,7 @@
   }
 
   .link-editor div.link-edit {
-    background-image: url(images/icons/lexical/pencil-fill.svg);
+    background-image: url(images/icons/pencil-fill.svg);
     background-size: 16px;
     background-position: center;
     background-repeat: no-repeat;
@@ -610,7 +610,7 @@
   }
 
   .link-editor div.link-cancel {
-    background-image: url(images/icons/lexical/close.svg);
+    background-image: url(images/icons/close.svg);
     background-size: 16px;
     background-position: center;
     background-repeat: no-repeat;
@@ -625,7 +625,7 @@
   }
 
   .link-editor div.link-confirm {
-    background-image: url(images/icons/lexical/success-alt.svg);
+    background-image: url(images/icons/success-alt.svg);
     background-size: 16px;
     background-position: center;
     background-repeat: no-repeat;
@@ -718,31 +718,31 @@
   }
 
   #block-controls span.block-type.paragraph {
-    background-image: url(images/icons/lexical/text-paragraph.svg);
+    background-image: url(images/icons/text-paragraph.svg);
   }
 
   #block-controls span.block-type.h1 {
-    background-image: url(images/icons/lexical/type-h1.svg);
+    background-image: url(images/icons/type-h1.svg);
   }
 
   #block-controls span.block-type.h2 {
-    background-image: url(images/icons/lexical/type-h2.svg);
+    background-image: url(images/icons/type-h2.svg);
   }
 
   #block-controls span.block-type.quote {
-    background-image: url(images/icons/lexical/chat-square-quote.svg);
+    background-image: url(images/icons/chat-square-quote.svg);
   }
 
   #block-controls span.block-type.ul {
-    background-image: url(images/icons/lexical/list-ul.svg);
+    background-image: url(images/icons/list-ul.svg);
   }
 
   #block-controls span.block-type.ol {
-    background-image: url(images/icons/lexical/list-ol.svg);
+    background-image: url(images/icons/list-ol.svg);
   }
 
   #block-controls span.block-type.code {
-    background-image: url(images/icons/lexical/code.svg);
+    background-image: url(images/icons/code.svg);
   }
 
   .characters-limit {
@@ -854,54 +854,54 @@
   }
 
   .icon.paragraph {
-    background-image: url(images/icons/lexical/text-paragraph.svg);
+    background-image: url(images/icons/text-paragraph.svg);
   }
 
   .icon.h1 {
-    background-image: url(images/icons/lexical/type-h1.svg);
+    background-image: url(images/icons/type-h1.svg);
   }
 
   .icon.h2 {
-    background-image: url(images/icons/lexical/type-h2.svg);
+    background-image: url(images/icons/type-h2.svg);
   }
 
   .icon.h3 {
-    background-image: url(images/icons/lexical/type-h3.svg);
+    background-image: url(images/icons/type-h3.svg);
   }
 
   .icon.h4 {
-    background-image: url(images/icons/lexical/type-h4.svg);
+    background-image: url(images/icons/type-h4.svg);
   }
 
   .icon.h5 {
-    background-image: url(images/icons/lexical/type-h5.svg);
+    background-image: url(images/icons/type-h5.svg);
   }
 
   .icon.h6 {
-    background-image: url(images/icons/lexical/type-h6.svg);
+    background-image: url(images/icons/type-h6.svg);
   }
 
   .icon.bullet-list,
   .icon.bullet {
-    background-image: url(images/icons/lexical/list-ul.svg);
+    background-image: url(images/icons/list-ul.svg);
   }
 
   .icon.check-list,
   .icon.check {
-    background-image: url(images/icons/lexical/square-check.svg);
+    background-image: url(images/icons/square-check.svg);
   }
 
   .icon.numbered-list,
   .icon.number {
-    background-image: url(images/icons/lexical/list-ol.svg);
+    background-image: url(images/icons/list-ol.svg);
   }
 
   .icon.quote {
-    background-image: url(images/icons/lexical/chat-square-quote.svg);
+    background-image: url(images/icons/chat-square-quote.svg);
   }
 
   .icon.code {
-    background-image: url(images/icons/lexical/code.svg);
+    background-image: url(images/icons/code.svg);
   }
 
   .switches {
@@ -1173,51 +1173,51 @@
   }
 
   .actions i.indent {
-    background-image: url(images/icons/lexical/indent.svg);
+    background-image: url(images/icons/indent.svg);
   }
 
   .actions i.outdent {
-    background-image: url(images/icons/lexical/outdent.svg);
+    background-image: url(images/icons/outdent.svg);
   }
 
   .actions i.lock {
-    background-image: url(images/icons/lexical/lock-fill.svg);
+    background-image: url(images/icons/lock-fill.svg);
   }
 
   .actions i.image {
-    background-image: url(images/icons/lexical/file-image.svg);
+    background-image: url(images/icons/file-image.svg);
   }
 
   .actions i.table {
-    background-image: url(images/icons/lexical/table.svg);
+    background-image: url(images/icons/table.svg);
   }
 
   .actions i.unlock {
-    background-image: url(images/icons/lexical/lock.svg);
+    background-image: url(images/icons/lock.svg);
   }
 
   .actions i.left-align {
-    background-image: url(images/icons/lexical/text-left.svg);
+    background-image: url(images/icons/text-left.svg);
   }
 
   .actions i.center-align {
-    background-image: url(images/icons/lexical/text-center.svg);
+    background-image: url(images/icons/text-center.svg);
   }
 
   .actions i.right-align {
-    background-image: url(images/icons/lexical/text-right.svg);
+    background-image: url(images/icons/text-right.svg);
   }
 
   .actions i.justify-align {
-    background-image: url(images/icons/lexical/justify.svg);
+    background-image: url(images/icons/justify.svg);
   }
 
   .actions i.disconnect {
-    background-image: url(images/icons/lexical/plug.svg);
+    background-image: url(images/icons/plug.svg);
   }
 
   .actions i.connect {
-    background-image: url(images/icons/lexical/plug-fill.svg);
+    background-image: url(images/icons/plug-fill.svg);
   }
 
   table.disable-selection {
@@ -1263,7 +1263,7 @@
     display: inline-block;
     height: 8px;
     width: 8px;
-    background-image: url(images/icons/lexical/chevron-down.svg);
+    background-image: url(images/icons/chevron-down.svg);
   }
 
   .action-button {