From 263d9202e317d2655f3c1f6376b440ce76f5cf44 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 10 Sep 2026 18:39:17 +0300
Subject: [PATCH 01/17] Movie simple inline text editor to angular

---
 _api_app/app/Shop/shoppingCart.twig           |  66 +--
 .../Entries/SectionEntryRenderService.php     |   3 +
 .../Sections/Entries/_entryContents.twig      |   2 +-
 .../Sites/Sections/Entries/_entryTitle.twig   |   2 +-
 .../Sections/Entries/shop/_cartTitle.twig     |   2 +-
 .../shop/_productAttributesEditor.twig        |   4 +-
 .../Sections/SectionTemplateRenderService.php |  10 +-
 .../app/Sites/SitesHeaderRenderService.php    |   4 +-
 _api_app/app/Sites/sitesHeader.twig           |   2 +-
 editor/angular.json                           |  10 +-
 editor/src/app/app.module.ts                  |   4 +
 .../inline-edit-overlay.component.ts          | 157 ++++++
 .../inline-edit/inline-edit-path.resolver.ts  |  39 ++
 .../inline-edit/inline-edit.service.ts        | 493 ++++++++++++++++++
 editor/src/app/preview/preview.component.ts   |   3 +
 .../src/app/render/template-render.service.ts |   8 +-
 .../render/twig-template-render.service.ts    |   7 +-
 editor/src/app/render/twig-templates.ts       |  78 +--
 .../src/app/shop/shop-cart-render.service.ts  | 102 ++--
 .../app/sites/sites-header-render.service.ts  |   4 +-
 engine/css/editor.css.php                     |   4 +
 engine/js/BertaEditorBase.js                  | 113 ----
 engine/js/ng/templates/multisite.html         |  26 -
 engine/js/ng/templates/sections.html          |  35 --
 24 files changed, 883 insertions(+), 295 deletions(-)
 create mode 100644 editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
 create mode 100644 editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
 create mode 100644 editor/src/app/preview/inline-edit/inline-edit.service.ts
 delete mode 100644 engine/js/ng/templates/multisite.html
 delete mode 100644 engine/js/ng/templates/sections.html

diff --git a/_api_app/app/Shop/shoppingCart.twig b/_api_app/app/Shop/shoppingCart.twig
index 810b5e676..e3063483d 100644
--- a/_api_app/app/Shop/shoppingCart.twig
+++ b/_api_app/app/Shop/shoppingCart.twig
@@ -18,7 +18,7 @@
       <div class="column column-half padded title">
         {% if isEditMode %}
           <div{{ tableHeadTitle.attributes|raw }}>
-            {{ tableHeadTitle.content }}
+            {% if tableHeadTitle.content %}{{ tableHeadTitle.content }}{% else %}<span class="xEmpty">&nbsp;title&nbsp;</span>{% endif %}
           </div>
         {% else %}
             {{ tableHeadTitle.content }}
@@ -30,7 +30,7 @@
           <div class="column column-half padded qty">
             {% if isEditMode %}
               <div{{ tableHeadQuantity.attributes|raw }}>
-                {{ tableHeadQuantity.content }}
+                {% if tableHeadQuantity.content %}{{ tableHeadQuantity.content }}{% else %}<span class="xEmpty">&nbsp;quantity&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadQuantity.content }}
@@ -39,7 +39,7 @@
           <div class="column column-fourth padded price">
             {% if isEditMode %}
               <div{{ tableHeadPrice.attributes|raw }}>
-                {{ tableHeadPrice.content }}
+                {% if tableHeadPrice.content %}{{ tableHeadPrice.content }}{% else %}<span class="xEmpty">&nbsp;price&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadPrice.content }}
@@ -48,7 +48,7 @@
           <div class="column column-fourth padded sum">
             {% if isEditMode %}
               <div{{ tableHeadSum.attributes|raw }}>
-                {{ tableHeadSum.content }}
+                {% if tableHeadSum.content %}{{ tableHeadSum.content }}{% else %}<span class="xEmpty">&nbsp;sum&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadSum.content }}
@@ -78,7 +78,7 @@
           <div id="promoCodeEntry">
             {% if isEditMode %}
               <div{{ promoCode.attributes|raw }}>
-                {{ promoCode.content }}
+                {% if promoCode.content %}{{ promoCode.content }}{% else %}<span class="xEmpty">&nbsp;Promo code&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ promoCode.content }}
@@ -87,7 +87,7 @@
               <input type="text" name="promo_code" id="promo_code" />
               {% if isEditMode %}
                 <div{{ promoButton.attributes|raw }}>
-                  {{ promoButton.content }}
+                  {% if promoButton.content %}{{ promoButton.content }}{% else %}<span class="xEmpty">&nbsp;OK&nbsp;</span>{% endif %}
                 </div>
               {% else %}
                   <input type="button" value="{{ promoButton.content }}" />
@@ -131,7 +131,7 @@
           <input type="hidden" id="discount_applied" value="0" />
           {% if isEditMode %}
             <div{{ discount.attributes|raw }}>
-              {{ discount.content }}
+              {% if discount.content %}{{ discount.content }}{% else %}<span class="xEmpty">&nbsp;discount&nbsp;</span>{% endif %}
             </div>
           {% else %}
               {{ discount.content }}
@@ -146,7 +146,7 @@
         <div class="padded shoppingCartTotal">
           {% if isEditMode %}
             <div{{ total.attributes|raw }}>
-              {{ total.content }}
+              {% if total.content %}{{ total.content }}{% else %}<span class="xEmpty">&nbsp;total&nbsp;</span>{% endif %}
             </div>
           {% else %}
               {{ total.content }}
@@ -154,7 +154,7 @@
 
           {% if isEditMode %}
             <div{{ includedVat.attributes|raw }}>
-              {{ includedVat.content }}
+              {% if includedVat.content %}{{ includedVat.content }}{% else %}<span class="xEmpty">&nbsp;incl vat&nbsp;</span>{% endif %}
             </div>
           {% endif %}
           <div class="vatprice hidden">{{ includedVat.content }} (<span></span>%)</div>
@@ -177,7 +177,7 @@
             <p class="checkbox">
               {% if isEditMode %}
                 <div{{ legalPerson.attributes|raw }}>
-                  {{ legalPerson.content }}
+                  {% if legalPerson.content %}{{ legalPerson.content }}{% else %}<span class="xEmpty">&nbsp;legal person&nbsp;</span>{% endif %}
                 </div>
               {% else %}
                 <input type="checkbox" id="cartTextLegalPerson" value="1" /> <label for="cartTextLegalPerson" class="auto-width"> {{ legalPerson.content }}</label>
@@ -188,7 +188,7 @@
               <label for="cartTextCompany">
                 {% if isEditMode %}
                   <div{{ company.attributes|raw }}>
-                    {{ company.content }}
+                    {% if company.content %}{{ company.content }}{% else %}<span class="xEmpty">&nbsp;Company&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ company.content }}
@@ -203,7 +203,7 @@
               <label for="cartTextCompanyRegNo">
                 {% if isEditMode %}
                   <div{{ companyRegistrationNumber.attributes|raw }}>
-                    {{ companyRegistrationNumber.content }}
+                    {% if companyRegistrationNumber.content %}{{ companyRegistrationNumber.content }}{% else %}<span class="xEmpty">&nbsp;Company reg. no.&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ companyRegistrationNumber.content }}
@@ -218,7 +218,7 @@
               <label for="cartTextLegalAddress">
                 {% if isEditMode %}
                   <div{{ legalAddress.attributes|raw }}>
-                    {{ legalAddress.content }}
+                    {% if legalAddress.content %}{{ legalAddress.content }}{% else %}<span class="xEmpty">&nbsp;Legal address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ legalAddress.content }}
@@ -233,7 +233,7 @@
               <label for="nname">
                 {% if isEditMode %}
                   <div{{ nameSurname.attributes|raw }}>
-                    {{ nameSurname.content }}
+                    {% if nameSurname.content %}{{ nameSurname.content }}{% else %}<span class="xEmpty">&nbsp;name surname&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ nameSurname.content }}
@@ -248,7 +248,7 @@
               <label for="address">
                 {% if isEditMode %}
                   <div{{ address.attributes|raw }}>
-                    {{ address.content }}
+                    {% if address.content %}{{ address.content }}{% else %}<span class="xEmpty">&nbsp;address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ address.content }}
@@ -263,7 +263,7 @@
               <label for="phone">
                 {% if isEditMode %}
                   <div{{ phone.attributes|raw }}>
-                    {{ phone.content }}
+                    {% if phone.content %}{{ phone.content }}{% else %}<span class="xEmpty">&nbsp;phone number&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ phone.content }}
@@ -278,7 +278,7 @@
               <label for="email-reg">
                 {% if isEditMode %}
                   <div{{ email.attributes|raw }}>
-                    {{ email.content }}
+                    {% if email.content %}{{ email.content }}{% else %}<span class="xEmpty">&nbsp;email&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ email.content }}
@@ -293,7 +293,7 @@
               <label for="notes">
                 {% if isEditMode %}
                   <div{{ comments.attributes|raw }}>
-                    {{ comments.content }}
+                    {% if comments.content %}{{ comments.content }}{% else %}<span class="xEmpty">&nbsp;comments&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ comments.content }}
@@ -306,7 +306,7 @@
 
             {% if isEditMode %}
               <div{{ deliverToBillingAddress.attributes|raw }}>
-                {{ deliverToBillingAddress.content }}
+                {% if deliverToBillingAddress.content %}{{ deliverToBillingAddress.content }}{% else %}<span class="xEmpty">&nbsp;deliver to billing_address&nbsp;</span>{% endif %}
               </div>
             {% else %}
               <p class="no-margin-bottom">
@@ -318,7 +318,7 @@
 
         <div class="cc-fields{% if not isEditMode %} hidden{% endif %}" id="shipping_address_form">
           <h2{{ shippingAddressHeader.attributes|raw }}>
-            {{ shippingAddressHeader.content }}
+            {% if shippingAddressHeader.content %}{{ shippingAddressHeader.content }}{% else %}<span class="xEmpty">&nbsp;shipping address&nbsp;</span>{% endif %}
           </h2>
 
           <div class="padded">
@@ -326,7 +326,7 @@
               <label for="ship_nname">
                 {% if isEditMode %}
                   <div{{ nameSurname.attributes|raw }}>
-                    {{ nameSurname.content }}
+                    {% if nameSurname.content %}{{ nameSurname.content }}{% else %}<span class="xEmpty">&nbsp;name surname&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ nameSurname.content }}
@@ -341,7 +341,7 @@
               <label for="ship_address">
                 {% if isEditMode %}
                   <div{{ address.attributes|raw }}>
-                    {{ address.content }}
+                    {% if address.content %}{{ address.content }}{% else %}<span class="xEmpty">&nbsp;address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ address.content }}
@@ -356,7 +356,7 @@
               <label for="ship_phone">
                 {% if isEditMode %}
                   <div{{ phone.attributes|raw }}>
-                    {{ phone.content }}
+                    {% if phone.content %}{{ phone.content }}{% else %}<span class="xEmpty">&nbsp;phone number&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ phone.content }}
@@ -371,7 +371,7 @@
               <label for="ship_email-reg">
                 {% if isEditMode %}
                   <div{{ email.attributes|raw }}>
-                    {{ email.content }}
+                    {% if email.content %}{{ email.content }}{% else %}<span class="xEmpty">&nbsp;email&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ email.content }}
@@ -386,7 +386,7 @@
               <label for="ship_notes">
                 {% if isEditMode %}
                   <div{{ comments.attributes|raw }}>
-                    {{ comments.content }}
+                    {% if comments.content %}{{ comments.content }}{% else %}<span class="xEmpty">&nbsp;comments&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ comments.content }}
@@ -402,7 +402,7 @@
         {% if isEditMode %}
           <div class="padded">
             <div{{ receiveNews.attributes|raw }}>
-              {{ receiveNews.content }}
+              {% if receiveNews.content %}{{ receiveNews.content }}{% else %}<span class="xEmpty">&nbsp;receive news and updates&nbsp;</span>{% endif %}
             </div>
           </div>
         {% elseif receiveNews.content %}
@@ -423,7 +423,7 @@
 
           {% if isEditMode or paymentDescription.content %}
             <p{{ paymentDescription.attributes|raw }}>
-              {{ paymentDescription.content }}
+              {% if paymentDescription.content %}{{ paymentDescription.content }}{% else %}<span class="xEmpty">&nbsp;payment description&nbsp;</span>{% endif %}
             </p>
           {% endif %}
 
@@ -445,7 +445,7 @@
               <label for="pm_bank_transfer"><input type="radio" name="pm" id="pm_bank_transfer"{% if config.paymentMethod == 'bank' %} checked="checked"{% endif %}>
                 {% if isEditMode %}
                   <div{{ manualTransfer.attributes|raw }}>
-                    {{ manualTransfer.content }}
+                    {% if manualTransfer.content %}{{ manualTransfer.content }}{% else %}<span class="xEmpty">&nbsp;Manual transfer&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ manualTransfer.content }}
@@ -458,7 +458,7 @@
         <div class="padded checkOut">
           {% if isEditMode or checkoutDescription.content %}
             <p{{ checkoutDescription.attributes|raw }}>
-              {{ checkoutDescription.content }}
+              {% if checkoutDescription.content %}{{ checkoutDescription.content }}{% else %}<span class="xEmpty">&nbsp;checkout description&nbsp;</span>{% endif %}
             </p>
           {% endif %}
 
@@ -467,20 +467,20 @@
           {% if isEditMode %}
             {% if config.termsLink %}
               <div{{ terms.attributes|raw }}>
-                {{ terms.content }}
+                {% if terms.content %}{{ terms.content }}{% else %}<span class="xEmpty">&nbsp;By purchasing our products you agree to the Terms of Service&nbsp;</span>{% endif %}
               </div>
             {% endif %}
 
             <div{{ fillRequiredFields.attributes|raw }}>
-              {{ fillRequiredFields.content }}
+              {% if fillRequiredFields.content %}{{ fillRequiredFields.content }}{% else %}<span class="xEmpty">&nbsp;Please fill in all required fields&nbsp;</span>{% endif %}
             </div>
 
             <div{{ checkoutButton.attributes|raw }}>
-              {{ checkoutButton.content }}
+              {% if checkoutButton.content %}{{ checkoutButton.content }}{% else %}<span class="xEmpty">&nbsp;checkout and pay&nbsp;</span>{% endif %}
             </div>
 
             <div{{ returnToStore.attributes|raw }}>
-              {{ returnToStore.content }}
+              {% if returnToStore.content %}{{ returnToStore.content }}{% else %}<span class="xEmpty">&nbsp;return to store&nbsp;</span>{% endif %}
             </div>
 
           {% else %}
diff --git a/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php b/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
index 8f3d176b6..65e6f4cea 100644
--- a/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
+++ b/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
@@ -62,6 +62,7 @@ public function getViewData(
                 'attributes' => [
                     'title' => Helpers::arrayToHtmlAttributes([
                         'data-path' => $isEditMode ? "{$apiPath}content/title" : null,
+                        'data-empty-caption' => $isEditMode ? 'entry title' : null,
                     ]),
                 ],
             ]));
@@ -112,6 +113,7 @@ public function getViewData(
                     'attributes' => [
                         'cartTitle' => Helpers::arrayToHtmlAttributes([
                             'data-path' => $isEditMode ? "{$apiPath}content/cartTitle" : null,
+                            'data-empty-caption' => $isEditMode ? 'item name' : null,
                         ]),
                     ],
                 ]));
@@ -157,6 +159,7 @@ public function getViewData(
                 ]),
                 'url' => Helpers::arrayToHtmlAttributes([
                     'data-path' => $isEditMode ? "{$apiPath}content/url" : null,
+                    'data-empty-caption' => $isEditMode ? 'url' : null,
                 ]),
             ],
             'showUrl' => $templateName == 'default' && ($isEditMode || (isset($entry['content']['url']) && ! empty($entry['content']['url']))),
diff --git a/_api_app/app/Sites/Sections/Entries/_entryContents.twig b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
index 5a7fe5baa..f6f4b63e1 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryContents.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
@@ -23,7 +23,7 @@
 {% if showUrl %}
   <div class="entryContent">
     {% if isEditMode %}
-      <div class="xEditable xProperty-url"{{ attributes.url|raw }}>{{ content.url }}</div>
+      <div class="xNgEditable xProperty-url"{{ attributes.url|raw }}>{% if content.url %}{{ content.url }}{% else %}<span class="xEmpty">&nbsp;url&nbsp;</span>{% endif %}</div>
     {% else %}
       <div class="xEditable xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
     {% endif %}
diff --git a/_api_app/app/Sites/Sections/Entries/_entryTitle.twig b/_api_app/app/Sites/Sections/Entries/_entryTitle.twig
index 136b0b2de..6ef2828c0 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryTitle.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryTitle.twig
@@ -1 +1 @@
-<h2><span class="xEditable xProperty-title xCaption-entry&nbsp;title"{{ attributes.title|raw }}>{{ content.title }}</span></h2>
+<h2><span class="xNgEditable xProperty-title xCaption-entry&nbsp;title"{{ attributes.title|raw }}>{% if content.title %}{{ content.title }}{% else %}<span class="xEmpty">&nbsp;entry title&nbsp;</span>{% endif %}</span></h2>
diff --git a/_api_app/app/Sites/Sections/Entries/shop/_cartTitle.twig b/_api_app/app/Sites/Sections/Entries/shop/_cartTitle.twig
index ac0078cb0..68675d886 100644
--- a/_api_app/app/Sites/Sections/Entries/shop/_cartTitle.twig
+++ b/_api_app/app/Sites/Sections/Entries/shop/_cartTitle.twig
@@ -1 +1 @@
-<h2><span class="xEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle|raw }}>{{ content.cartTitle }}</span></h2>
+<h2><span class="xNgEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle|raw }}>{% if content.cartTitle %}{{ content.cartTitle }}{% else %}<span class="xEmpty">&nbsp;item name&nbsp;</span>{% endif %}</span></h2>
diff --git a/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig b/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
index 44fd29658..0c595a9f9 100644
--- a/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
+++ b/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
@@ -1,6 +1,6 @@
 <div class="xEntrySeperator"></div>
 <div class="xEntryBoxParams">
   <b>Attribute</b>
-  <div class="xEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes">{{ cartAttributesEdit }}</div>
-  <div class="xEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight">{{ entryWeight }}</div>
+  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
 </div>
diff --git a/_api_app/app/Sites/Sections/SectionTemplateRenderService.php b/_api_app/app/Sites/Sections/SectionTemplateRenderService.php
index cc2a05d4f..b9f8c22e4 100644
--- a/_api_app/app/Sites/Sections/SectionTemplateRenderService.php
+++ b/_api_app/app/Sites/Sections/SectionTemplateRenderService.php
@@ -329,16 +329,22 @@ public function getAdditionalFooterText($siteSlug, $siteSettings, $user, $isEdit
 
     private function getUserCopyright($siteSlug, $siteSettings, $isEditMode)
     {
-        $content = ! empty($siteSettings['siteTexts']['siteFooter']) ? $siteSettings['siteTexts']['siteFooter'] : '';
+        $rawContent = ! empty($siteSettings['siteTexts']['siteFooter']) ? $siteSettings['siteTexts']['siteFooter'] : '';
+        $content = $rawContent;
         $attributes = [];
         $classes = [];
 
         if ($isEditMode) {
             $classes = [
-                'xEditableTA',
+                'xNgEditableTA',
                 'xProperty-siteFooter',
             ];
             $attributes['data-path'] = "{$siteSlug}/settings/siteTexts/siteFooter";
+            $attributes['data-empty-caption'] = 'footer text';
+
+            if (empty($rawContent)) {
+                $content = '<span class="xEmpty">&nbsp;footer text&nbsp;</span>';
+            }
         }
 
         $attributes['class'] = implode(' ', $classes);
diff --git a/_api_app/app/Sites/SitesHeaderRenderService.php b/_api_app/app/Sites/SitesHeaderRenderService.php
index bf3d3609a..f5cf2a764 100644
--- a/_api_app/app/Sites/SitesHeaderRenderService.php
+++ b/_api_app/app/Sites/SitesHeaderRenderService.php
@@ -10,7 +10,7 @@ class SitesHeaderRenderService
 {
     private $DRAGGABLE_HEADING_CLASSES = ['mess', 'xEditableDragXY', 'xProperty-siteHeadingXY'];
 
-    private $EDITABLE_CLASSES = ['xEditable', 'xProperty-siteHeading'];
+    private $EDITABLE_CLASSES = ['xNgEditable', 'xProperty-siteHeading'];
 
     private $HEADER_IMAGE_TEMPLATE_SETTING_GROUP = [
         'default' => 'pageHeading',
@@ -113,6 +113,8 @@ private function getEditableAttributes($isEditMode, $siteName)
         $attributes = [
             'class' => implode(' ', $this->EDITABLE_CLASSES),
             'data-path' => $siteName . '/settings/siteTexts/siteHeading',
+            'data-empty-caption' => 'heading',
+            'data-ng-raw' => '1',
         ];
 
         return Helpers::arrayToHtmlAttributes($attributes);
diff --git a/_api_app/app/Sites/sitesHeader.twig b/_api_app/app/Sites/sitesHeader.twig
index a46626651..ae25c3964 100644
--- a/_api_app/app/Sites/sitesHeader.twig
+++ b/_api_app/app/Sites/sitesHeader.twig
@@ -4,7 +4,7 @@
   {% else %}
     {% if isEditMode %}
       <span{{ editableAttributes|raw }}>
-        {{ title|raw }}
+        {% if title %}{{ title|raw }}{% else %}<span class="xEmpty">&nbsp;heading&nbsp;</span>{% endif %}
       </span>
     {% else %}
       <a href="{{ link }}">{{ title|raw }}</a>
diff --git a/editor/angular.json b/editor/angular.json
index b029953ec..9bec7ffbf 100644
--- a/editor/angular.json
+++ b/editor/angular.json
@@ -49,7 +49,10 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles/styles.scss"],
+            "styles": [
+              "node_modules/@angular/cdk/overlay-prebuilt.css",
+              "src/styles/styles.scss"
+            ],
             "allowedCommonJsDependencies": ["lodash", "webfontloader"],
             "scripts": ["./node_modules/twig/twig.min.js"]
           },
@@ -99,7 +102,10 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles/styles.scss"]
+            "styles": [
+              "node_modules/@angular/cdk/overlay-prebuilt.css",
+              "src/styles/styles.scss"
+            ]
           }
         }
       }
diff --git a/editor/src/app/app.module.ts b/editor/src/app/app.module.ts
index e8dbd31de..dc32e6108 100644
--- a/editor/src/app/app.module.ts
+++ b/editor/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { APP_BASE_HREF } from '@angular/common';
 import { NgxsModule } from '@ngxs/store';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
@@ -25,6 +26,7 @@ import { UserState } from './user/user.state';
 import { UserAccountComponent } from './user/user-account.component';
 import { SitesSharedModule } from './sites/shared/sites-shared.module';
 import { PreviewComponent } from './preview/preview.component';
+import { InlineEditOverlayComponent } from './preview/inline-edit/inline-edit-overlay.component';
 import { PopupComponent } from './popup/popup.component';
 import { ErrorState } from './error-state/error.state';
 import { SharedModule } from './shared/shared.module';
@@ -54,6 +56,7 @@ import { sentryInitFactory } from './sentry/sentry-init.factory';
     UserAccountComponent,
     LoginComponent,
     PreviewComponent,
+    InlineEditOverlayComponent,
     ThemesComponent,
     PopupComponent,
   ],
@@ -82,6 +85,7 @@ import { sentryInitFactory } from './sentry/sentry-init.factory';
     SiteSectionsModule,
     SiteMediaModule,
     AiAssistantModule,
+    OverlayModule,
   ],
   providers: [
     SentryConfigService,
diff --git a/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
new file mode 100644
index 000000000..90553d0b7
--- /dev/null
+++ b/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
@@ -0,0 +1,157 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'berta-inline-edit-overlay',
+  template: `
+    <textarea
+      #textareaEl
+      bertaAutofocus
+      [value]="value"
+      [disabled]="saving"
+      [ngStyle]="fontStyle"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur($event)"
+    ></textarea>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: #fff;
+        color: inherit;
+        resize: none;
+        overflow: hidden;
+        word-break: break-word;
+        outline: 2px solid #0c4dff;
+        outline-offset: 0;
+        border-radius: 3px;
+      }
+
+      textarea:focus {
+        outline: 2px solid #0c4dff;
+      }
+    `,
+  ],
+  standalone: false,
+})
+export class InlineEditOverlayComponent implements AfterViewInit {
+  @Input() value = '';
+  @Input() fontStyle: Record<string, string> = {};
+  @Input() multiline = false;
+  @Output() save = new EventEmitter<string>();
+  @Output() cancel = new EventEmitter<void>();
+  @Output() input = new EventEmitter<string>();
+
+  @ViewChild('textareaEl') private textareaEl!: ElementRef<HTMLTextAreaElement>;
+
+  saving = false;
+  private closed = false;
+  private viewReady = false;
+
+  ngAfterViewInit() {
+    this.viewReady = true;
+  }
+
+  /**
+   * Lets the service trigger the exact same blur flow a user's own blur
+   * would go through (save-if-changed/cancel-if-unchanged via `onBlur`),
+   * for cases where something outside this component needs to end editing
+   * — e.g. the field's container closing/hiding elsewhere in the page,
+   * which wouldn't otherwise blur an overlay living in a different
+   * document.
+   *
+   * Can be called before the view has finished initializing — the
+   * mouseleave this serves can, in rare cases, misfire that early (the
+   * geometric check that decides whether it's spurious runs before the
+   * overlay's pane has been fully sized/positioned). Deliberately a no-op
+   * in that case rather than deferring the blur until the view is ready:
+   * deferring it means it fires moments later on a freshly-opened,
+   * unchanged textarea, which immediately cancels and tears the overlay
+   * back down — turning a rare misfire into the field never appearing to
+   * open at all. Doing nothing risks only the narrower cosmetic case this
+   * mechanism exists to fix (the overlay not closing in sync with the
+   * dropdown) in that same rare window, which is the safer trade-off.
+   */
+  blurNow() {
+    if (!this.viewReady) {
+      return;
+    }
+
+    this.textareaEl.nativeElement.blur();
+  }
+
+  onInput(event: Event) {
+    this.input.emit((event.target as HTMLTextAreaElement).value);
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.closed = true;
+      this.cancel.emit();
+      return;
+    }
+
+    if (event.key === 'Enter' && !this.multiline) {
+      event.preventDefault();
+      (event.target as HTMLTextAreaElement).blur();
+    }
+  }
+
+  onBlur(event: FocusEvent) {
+    if (this.closed || this.saving) {
+      return;
+    }
+
+    const newValue = this.normalize(
+      (event.target as HTMLTextAreaElement).value,
+    );
+
+    if (newValue === this.value) {
+      this.closed = true;
+      this.cancel.emit();
+      return;
+    }
+
+    this.saving = true;
+    this.save.emit(newValue);
+  }
+
+  /**
+   * Single-line fields are conceptually one line of text that only wraps
+   * visually — pasted or otherwise inserted line breaks are collapsed to
+   * spaces so the persisted value never contains a literal newline.
+   * Multi-line fields keep internal newlines as-is; only outer whitespace
+   * is trimmed.
+   */
+  private normalize(value: string): string {
+    if (this.multiline) {
+      return value.trim();
+    }
+
+    const collapsed = value.replace(/\s*\n+\s*/g, ' ').trim();
+
+    // Matches legacy's `elementEdit_save` (BertaEditorBase.js): a value
+    // ending in " px"/" pt"/" em" drops the space before the unit.
+    return collapsed.replace(/\s(px|pt|em)$/i, '$1');
+  }
+}
diff --git a/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts b/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
new file mode 100644
index 000000000..c4e4d162b
--- /dev/null
+++ b/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
@@ -0,0 +1,39 @@
+import { UpdateSectionEntryAction } from '../../sites/sections/entries/entries-state/section-entries.actions';
+import { UpdateSiteSettingsFromSyncAction } from '../../sites/settings/site-settings.actions';
+
+/**
+ * Mirrors the legacy `path`-branching in `engine/js/BertaEditorBase.js`'s
+ * `elementEdit_save` (site / settings / section / entry), but dispatches
+ * Angular NGXS actions instead of the legacy engine's own redux store.
+ *
+ * Only the `entry` and `settings` branches are implemented so far. The
+ * remaining branches are stubbed to fail loudly rather than silently no-op,
+ * so an `xNgEditable`/`xNgEditableTA` marker accidentally added to an
+ * unmigrated field type is caught immediately instead of quietly doing
+ * nothing.
+ */
+export function resolveInlineEditAction(path: string, value: string): any {
+  const pathParts = path.split('/');
+
+  if (pathParts[1] === 'entry') {
+    return new UpdateSectionEntryAction(path, value);
+  }
+
+  if (pathParts[1] === 'settings') {
+    return new UpdateSiteSettingsFromSyncAction(path, value);
+  }
+
+  if (pathParts[1] === 'section') {
+    throw new Error(
+      `resolveInlineEditAction: section fields are not migrated to Angular inline editing yet (path: "${path}")`,
+    );
+  }
+
+  if (pathParts[0] === 'site') {
+    throw new Error(
+      `resolveInlineEditAction: site-level fields are not migrated to Angular inline editing yet (path: "${path}")`,
+    );
+  }
+
+  throw new Error(`resolveInlineEditAction: unrecognized data-path "${path}"`);
+}
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
new file mode 100644
index 000000000..c6f187264
--- /dev/null
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -0,0 +1,493 @@
+import { Injectable } from '@angular/core';
+import {
+  FlexibleConnectedPositionStrategy,
+  Overlay,
+  OverlayRef,
+} from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Store } from '@ngxs/store';
+
+import { InlineEditOverlayComponent } from './inline-edit-overlay.component';
+import { resolveInlineEditAction } from './inline-edit-path.resolver';
+
+const EDITABLE_SELECTOR = '.xNgEditable, .xNgEditableTA';
+const MULTILINE_CLASS = 'xNgEditableTA';
+const DROPDOWN_BOX_SELECTOR = '.xEntryDropdownBox';
+
+interface OpenEdit {
+  el: HTMLElement;
+  iframe: HTMLIFrameElement;
+  originalHtml: string;
+  overlayRef: OverlayRef;
+  positionStrategy: FlexibleConnectedPositionStrategy;
+  dropdownBox: HTMLElement | null;
+  suppressDropdownClose: (event: Event) => void;
+}
+
+/**
+ * Click-to-edit for `.xNgEditable` (single-line) and `.xNgEditableTA`
+ * (multi-line) elements rendered inside the (same-origin) preview iframe.
+ * This is the Angular-native replacement for the legacy MooTools
+ * `elementEdit_init`/`inlineEdit` mechanism in `engine/js/BertaEditorBase.js`
+ * / `engine/js/inline_edit.js` — adopted one field at a time by swapping a
+ * field's server-rendered class from `xEditable`/`xEditableTA` to the
+ * `xNgEditable`/`xNgEditableTA` markers this service listens for, so
+ * migrated and not-yet-migrated fields can coexist on the same page.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class InlineEditService {
+  private boundDocument: Document | null = null;
+  private openEdit: OpenEdit | null = null;
+
+  constructor(
+    private overlay: Overlay,
+    private store: Store,
+  ) {
+    // The overlay's position is a static snapshot (see `createVirtualOrigin`),
+    // not a live element CDK can re-measure on its own, so scrolling or
+    // resizing anywhere has to explicitly trigger a re-anchor.
+    window.addEventListener('resize', () => this.refreshOpenEditGeometry());
+    window.addEventListener(
+      'scroll',
+      () => this.refreshOpenEditGeometry(),
+      true,
+    );
+  }
+
+  /**
+   * Called every time the preview iframe (re)loads. Binds a single delegated
+   * click listener plus a scroll listener to the new document; safe to call
+   * repeatedly since it skips re-binding an already-bound document, so each
+   * navigation attaches exactly one of each.
+   */
+  attach(iframe: HTMLIFrameElement) {
+    const doc = iframe.contentDocument;
+
+    if (!doc || doc === this.boundDocument) {
+      return;
+    }
+
+    this.closeOpenOverlay();
+    this.boundDocument = doc;
+
+    doc.addEventListener('click', (event) => {
+      const target = (event.target as HTMLElement)?.closest(
+        EDITABLE_SELECTOR,
+      ) as HTMLElement | null;
+
+      if (!target) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      this.openEditor(target, iframe);
+    });
+
+    // The previewed site's own page can scroll independently of the app
+    // shell around it.
+    iframe.contentWindow?.addEventListener('scroll', () =>
+      this.refreshOpenEditGeometry(),
+    );
+  }
+
+  private openEditor(el: HTMLElement, iframe: HTMLIFrameElement) {
+    const path = el.dataset['path'];
+
+    if (!path) {
+      return;
+    }
+
+    this.closeOpenOverlay();
+
+    const multiline = el.classList.contains(MULTILINE_CLASS);
+    const initialValue = this.readFieldValue(el, multiline);
+    const originalHtml = el.innerHTML;
+
+    // Server templates are free to format markup across multiple indented
+    // lines, leaving real leading/trailing whitespace in `el`'s content —
+    // harmless under normal CSS collapsing, but it must be removed before
+    // measuring/editing (not just trimmed from the *string* `readFieldValue`
+    // reads out), otherwise the `pre-wrap` override below turns that
+    // incidental whitespace into a visible line break.
+    el.innerHTML = el.innerHTML.trim();
+
+    // A <textarea> always preserves whitespace and soft-wraps, regardless of
+    // CSS `white-space` on it — that's not something we can override. `el`
+    // normally collapses whitespace instead (default `white-space: normal`),
+    // so while editing, make it match the textarea's actual behavior instead
+    // of the other way around — otherwise a leading/repeated space collapses
+    // in `el`'s measurement but not in the textarea's display, undersizing
+    // the overlay. `pre-wrap` still wraps normally, so the existing
+    // wrap-to-multiple-lines behavior is unaffected. Set *before* the first
+    // measurement below, so the initial overlay size/position already
+    // reflects the same rendering used throughout editing.
+    el.style.whiteSpace = 'pre-wrap';
+
+    // A block-level `el` (e.g. a narrow table-column field) stretches to
+    // fill its container's width regardless of content, unlike an inline
+    // element — so a single unbroken word longer than that container
+    // silently overflows past `el`'s own measured box instead of growing
+    // it. `fit-content` uses the standard shrink-to-fit algorithm: content
+    // that already wraps within the available width is unaffected, but an
+    // overflowing unbroken word is now reflected in the measured width
+    // instead of being invisibly clamped.
+    el.style.width = 'fit-content';
+
+    // Safety net regardless of measurement precision: hide `el`'s own
+    // rendering while editing (dimensions/wrapping are unaffected, so
+    // measurement still works) so nothing it renders — overflow from the
+    // above or any other edge case — can ever show through/around the
+    // overlay. `visibility` (not `opacity`) also stops it receiving pointer
+    // events, in case the overlay's coverage is ever imperfect for a frame.
+    el.style.visibility = 'hidden';
+
+    const origin = this.createVirtualOrigin(el, iframe);
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(origin)
+      .withPositions([
+        {
+          originX: 'start',
+          originY: 'top',
+          overlayX: 'start',
+          overlayY: 'top',
+        },
+      ]);
+    const overlayRef = this.overlay.create({
+      positionStrategy,
+      width: origin.width,
+      height: origin.height,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    });
+
+    const componentRef = overlayRef.attach(
+      new ComponentPortal(InlineEditOverlayComponent),
+    );
+    componentRef.instance.value = initialValue;
+    componentRef.instance.fontStyle = this.readFontStyle(el);
+    componentRef.instance.multiline = multiline;
+
+    // The overlay lives in the parent document, so whenever it covers `el`,
+    // the iframe stops receiving pointer events there — from its own
+    // perspective, the mouse just left whatever was underneath. A field
+    // nested inside `.xEntryDropdownBox` (e.g. cartAttributes/weight) sits
+    // inside a menu that legacy (`BertaEditor.js`) closes on exactly that
+    // `mouseleave`, which never happened before since legacy's own inline
+    // editor replaces content in place, inside the same iframe document —
+    // the mouse never actually left. The overlay's computed bounds can be
+    // fractional/subpixel and don't always cover `el` with pixel-perfect
+    // precision, so moving the cursor within the field can fire more than
+    // one of these spurious events, not just one at open time — classify
+    // each one instead of only eating the first: if the cursor is still
+    // geometrically over the overlay when this fires, it's spurious
+    // (suppress); if the cursor has genuinely moved elsewhere, it's a real
+    // departure — let it through so the menu still closes exactly as before
+    // migration, and also close our own overlay in sync (via a real blur,
+    // running the normal save/cancel logic) since legacy's in-place editor
+    // would have been auto-blurred by its container hiding, which an
+    // overlay in a different document never gets for free.
+    const dropdownBox = el.closest(DROPDOWN_BOX_SELECTOR) as HTMLElement | null;
+    const suppressDropdownClose = (event: MouseEvent) => {
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+      const iframeRect = iframe.getBoundingClientRect();
+      const x = iframeRect.left + event.clientX;
+      const y = iframeRect.top + event.clientY;
+      const stillOverOverlay =
+        x >= overlayRect.left &&
+        x <= overlayRect.right &&
+        y >= overlayRect.top &&
+        y <= overlayRect.bottom;
+
+      if (stillOverOverlay) {
+        event.stopImmediatePropagation();
+      } else {
+        componentRef.instance.blurNow();
+      }
+    };
+
+    if (dropdownBox) {
+      dropdownBox.addEventListener('mouseleave', suppressDropdownClose, true);
+    }
+
+    this.openEdit = {
+      el,
+      iframe,
+      originalHtml,
+      overlayRef,
+      positionStrategy,
+      dropdownBox,
+      suppressDropdownClose,
+    };
+
+    componentRef.instance.input.subscribe((draftValue: string) => {
+      // Write the draft into the real element and re-measure its actual
+      // rendered box: the page's own CSS (container width, wrapping, text
+      // alignment) already knows how to lay this out correctly, so the
+      // overlay can just match it instead of reimplementing text wrapping.
+      if (multiline) {
+        el.innerHTML = this.textToDisplayHtml(draftValue);
+      } else {
+        el.textContent = draftValue.trim().length ? draftValue : '\u00A0';
+      }
+
+      this.refreshOpenEditGeometry();
+    });
+
+    componentRef.instance.cancel.subscribe(() => this.closeOpenOverlay());
+
+    componentRef.instance.save.subscribe((newValue: string) => {
+      let action;
+      let finalValue = newValue;
+      let storedValue: string;
+
+      if (multiline) {
+        storedValue = this.textToHtml(newValue);
+      } else {
+        finalValue = this.applyUnits(el, newValue);
+        storedValue = this.applyRawEncoding(el, finalValue);
+      }
+
+      try {
+        action = resolveInlineEditAction(path, storedValue);
+      } catch (error) {
+        console.error(error);
+        this.closeOpenOverlay();
+        return;
+      }
+
+      this.store.dispatch(action).subscribe({
+        next: () => {
+          this.writeFieldValue(el, finalValue, multiline);
+          this.closeOpenOverlay(false);
+        },
+        error: () => this.closeOpenOverlay(),
+      });
+    });
+  }
+
+  /**
+   * When empty, the server renders a visible `.xEmpty` placeholder span
+   * inside the element (mirroring the legacy `makePlaceholderIfEmpty`
+   * mechanism in `BertaEditorBase.js`) so the field stays visible/clickable.
+   * The placeholder text is not the field's actual value, so it must be
+   * excluded when reading the current value back out.
+   *
+   * Trimmed the same way legacy does (`inline_edit.js`'s
+   * `this.oldContent.trim()`), since server templates are free to format
+   * markup across multiple indented lines — harmless in normal CSS flow
+   * (leading/trailing whitespace collapses), but it would otherwise leak
+   * into the value verbatim once read via `innerHTML`/`textContent`.
+   */
+  private readFieldValue(el: HTMLElement, multiline: boolean): string {
+    const isPlaceholder = !!el.querySelector(':scope > .xEmpty');
+
+    if (isPlaceholder) {
+      return '';
+    }
+
+    return multiline
+      ? this.htmlToText(el.innerHTML.trim())
+      : (el.textContent ?? '').trim();
+  }
+
+  private writeFieldValue(el: HTMLElement, value: string, multiline: boolean) {
+    if (value.trim() !== '') {
+      if (multiline) {
+        el.innerHTML = this.textToHtml(value);
+      } else {
+        el.textContent = value;
+      }
+      return;
+    }
+
+    const caption = el.dataset['emptyCaption'];
+    el.innerHTML = caption
+      ? `<span class="xEmpty">&nbsp;${this.escapeHtml(caption)}&nbsp;</span>`
+      : '';
+  }
+
+  /**
+   * Matches legacy's generic `xUnits-*` handling in `elementEdit_save`
+   * (`BertaEditorBase.js`): a field carrying this class (e.g. `weight` via
+   * `xUnits-{{ weightUnits }}`) stores an integer with the unit suffix
+   * appended (e.g. "5" with units "kg" saves as "5kg"), regardless of what
+   * property it is — detected generically from the class, not hardcoded to
+   * one field, so it covers any other `xUnits-*` field migrated later.
+   */
+  private applyUnits(el: HTMLElement, value: string): string {
+    const match = el.className.match(/xUnits-(\S+)/);
+
+    if (!match) {
+      return value;
+    }
+
+    const numeric = parseInt(value, 10);
+
+    return String(numeric || 0) + match[1];
+  }
+
+  /**
+   * Fields rendered with Twig's `|raw` filter (opted in via `data-ng-raw`,
+   * e.g. site heading) bypass Twig's auto-escaping, so the stored value must
+   * already be safe HTML — matching legacy's universal `addHTMLEntities`
+   * encoding. Fields rendered without `|raw` (the majority) must NOT be
+   * pre-encoded here: Twig already escapes them at render time, so encoding
+   * on top would double-escape (e.g. a saved "&amp;" would render literally
+   * as "&amp;amp;" instead of "&").
+   */
+  private applyRawEncoding(el: HTMLElement, value: string): string {
+    return el.dataset['ngRaw'] ? this.encodeEntities(value) : value;
+  }
+
+  /**
+   * Matches the net effect of legacy's `addHTMLEntities` + `escapeForJSON`
+   * round-trip: `&`/`<`/`>` are encoded, `"` is deliberately left literal.
+   */
+  private encodeEntities(value: string): string {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  /**
+   * General-purpose HTML escaping (quotes included) used for building markup
+   * this service constructs itself — the `.xEmpty` placeholder span and
+   * `.xNgEditableTA` content via `textToHtml`/`textToDisplayHtml`. Distinct
+   * from `encodeEntities`, which intentionally leaves `"` literal to match
+   * legacy's specific saved-value convention.
+   */
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  /**
+   * `.xNgEditableTA` (multi-line) fields store literal `<br />` tags for line
+   * breaks rather than real newlines, matching the legacy `.xEditableTA`
+   * convention (`engine/js/inline_edit.js`'s `onSave`/`initialize`) so
+   * existing stored content and unescaped-HTML template rendering
+   * (`{{ ...|raw }}`) stay compatible. The true inverse of `textToHtml`: `<br>`
+   * tags become newlines first, then parsing the result and reading
+   * `textContent` decodes every HTML entity `escapeHtml` produced back to its
+   * literal character. Reading entities back via `el.innerHTML` (as
+   * `readFieldValue` does for multiline fields) re-serializes them into
+   * escaped form, same as `escapeHtml` would — without this decoding step,
+   * reopening the editor would show raw entities, and re-saving would
+   * escape them a second time.
+   */
+  private htmlToText(html: string): string {
+    const withNewlines = html.replace(/<br\s*\/?>/gi, '\n');
+    const scratch = document.createElement('div');
+    scratch.innerHTML = withNewlines;
+    return scratch.textContent ?? '';
+  }
+
+  private textToHtml(value: string): string {
+    return this.escapeHtml(value).replace(/\n/g, '<br />');
+  }
+
+  /**
+   * Like `textToHtml`, but for the live measurement write only (never for
+   * the persisted value): a trailing or leading blank line, or one between
+   * two `<br>` tags, doesn't reliably get its own line box in
+   * `getBoundingClientRect()` across browsers until there's real content
+   * after it. Padding empty lines with a non-breaking space guarantees each
+   * one always contributes real height while editing.
+   */
+  private textToDisplayHtml(value: string): string {
+    return value
+      .split('\n')
+      .map((line) => (line.length ? this.escapeHtml(line) : '\u00A0'))
+      .join('<br />');
+  }
+
+  /**
+   * Copies the field's computed font styling onto the overlay input so it
+   * doesn't look like a generic browser input.
+   */
+  private readFontStyle(el: HTMLElement): Record<string, string> {
+    const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
+
+    if (!computed) {
+      return {};
+    }
+
+    return {
+      'font-size': computed.fontSize,
+      'font-family': computed.fontFamily,
+      'font-weight': computed.fontWeight,
+      'font-style': computed.fontStyle,
+      'line-height': computed.lineHeight,
+      'text-align': computed.textAlign,
+      'letter-spacing': computed.letterSpacing,
+      'text-transform': computed.textTransform,
+    };
+  }
+
+  private createVirtualOrigin(el: HTMLElement, iframe: HTMLIFrameElement) {
+    const iframeRect = iframe.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+
+    return {
+      x: iframeRect.left + elRect.left,
+      y: iframeRect.top + elRect.top,
+      width: elRect.width,
+      height: elRect.height,
+    };
+  }
+
+  /**
+   * Re-anchors the currently open overlay (if any) to the edited element's
+   * current position/size. Called after every keystroke, and on window/page
+   * scroll and resize, since the overlay's position strategy uses a static
+   * snapshot origin that CDK has no way to re-measure on its own.
+   */
+  private refreshOpenEditGeometry() {
+    if (!this.openEdit) {
+      return;
+    }
+
+    const { el, iframe, overlayRef, positionStrategy } = this.openEdit;
+    const rect = this.createVirtualOrigin(el, iframe);
+
+    positionStrategy.setOrigin(rect);
+    overlayRef.updatePosition();
+    overlayRef.updateSize({ width: rect.width, height: rect.height });
+  }
+
+  /**
+   * Disposes the currently open overlay, if any. By default also restores
+   * the edited element's original content, since it's mutated live on every
+   * keystroke while editing (see `openEditor`'s `input` subscription) — pass
+   * `restore: false` only right after a successful save, where the element
+   * has already been set to its correct final value.
+   */
+  private closeOpenOverlay(restore = true) {
+    if (!this.openEdit) {
+      return;
+    }
+
+    if (restore) {
+      this.openEdit.el.innerHTML = this.openEdit.originalHtml;
+    }
+
+    this.openEdit.el.style.whiteSpace = '';
+    this.openEdit.el.style.width = '';
+    this.openEdit.el.style.visibility = '';
+
+    if (this.openEdit.dropdownBox) {
+      this.openEdit.dropdownBox.removeEventListener(
+        'mouseleave',
+        this.openEdit.suppressDropdownClose,
+        true,
+      );
+    }
+
+    this.openEdit.overlayRef.dispose();
+    this.openEdit = null;
+  }
+}
diff --git a/editor/src/app/preview/preview.component.ts b/editor/src/app/preview/preview.component.ts
index b81947824..97b3f60eb 100644
--- a/editor/src/app/preview/preview.component.ts
+++ b/editor/src/app/preview/preview.component.ts
@@ -11,6 +11,7 @@ import { UserState } from '../user/user.state';
 import { SitesState } from '../sites/sites-state/sites.state';
 import { SiteTemplateSettingsState } from '../sites/template-settings/site-template-settings.state';
 import { PreviewService } from './preview.service';
+import { InlineEditService } from './inline-edit/inline-edit.service';
 import { AppShowLoading, UpdateAppStateAction } from '../app-state/app.actions';
 import { UserLogoutAction } from '../user/user.actions';
 import { StyleService } from './style.service';
@@ -67,6 +68,7 @@ export class PreviewComponent implements OnInit {
     private store: Store,
     private ngZone: NgZone,
     private service: PreviewService,
+    private inlineEditService: InlineEditService,
     private styleService: StyleService,
     private sanitizer: DomSanitizer,
     private http: HttpClient,
@@ -244,6 +246,7 @@ export class PreviewComponent implements OnInit {
         }
 
         this.service.loadRerenderService(iframe);
+        this.inlineEditService.attach(iframe);
 
         const styleElement = iframe.contentDocument.createElement('style');
         iframe.contentDocument.head.appendChild(styleElement);
diff --git a/editor/src/app/render/template-render.service.ts b/editor/src/app/render/template-render.service.ts
index 36340be0e..fee1c7f8a 100644
--- a/editor/src/app/render/template-render.service.ts
+++ b/editor/src/app/render/template-render.service.ts
@@ -58,13 +58,17 @@ export class TemplateRenderService {
   ) {}
 
   getUserCopyright(siteSlug, siteSettings): UserCopyright {
-    const content =
+    const rawContent =
       siteSettings.siteTexts && siteSettings.siteTexts.siteFooter
         ? siteSettings.siteTexts.siteFooter
         : '';
+    const content = rawContent
+      ? rawContent
+      : '<span class="xEmpty">&nbsp;footer text&nbsp;</span>';
     const attributes = {
-      class: 'xEditableTA xProperty-siteFooter',
+      class: 'xNgEditableTA xProperty-siteFooter',
       'data-path': `${siteSlug}/settings/siteTexts/siteFooter`,
+      'data-empty-caption': 'footer text',
     };
 
     return {
diff --git a/editor/src/app/render/twig-template-render.service.ts b/editor/src/app/render/twig-template-render.service.ts
index 43c7aebe5..db7092daa 100644
--- a/editor/src/app/render/twig-template-render.service.ts
+++ b/editor/src/app/render/twig-template-render.service.ts
@@ -34,10 +34,15 @@ export class TwigTemplateRenderService {
       throw new Error(`Template not found: ${templateName}`);
     }
 
-    // Compile the template
+    // Compile the template. Twig.js defaults `autoescape` to false, unlike
+    // PHP Twig (which these bundled templates are also rendered through on
+    // the real site, and defaults it to true) — without this, a non-`|raw`
+    // field's value would render as live, executing HTML here even though
+    // the exact same template renders it safely escaped server-side.
     const template = Twig.twig({
       data: twigContent,
       allowInlineIncludes: false,
+      autoescape: true,
     });
 
     // Cache it
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index a531b3591..7b1ba1171 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -21,7 +21,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
       <div class="column column-half padded title">
         {% if isEditMode %}
           <div{{ tableHeadTitle.attributes|raw }}>
-            {{ tableHeadTitle.content }}
+            {% if tableHeadTitle.content %}{{ tableHeadTitle.content }}{% else %}<span class="xEmpty">&nbsp;title&nbsp;</span>{% endif %}
           </div>
         {% else %}
             {{ tableHeadTitle.content }}
@@ -33,7 +33,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <div class="column column-half padded qty">
             {% if isEditMode %}
               <div{{ tableHeadQuantity.attributes|raw }}>
-                {{ tableHeadQuantity.content }}
+                {% if tableHeadQuantity.content %}{{ tableHeadQuantity.content }}{% else %}<span class="xEmpty">&nbsp;quantity&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadQuantity.content }}
@@ -42,7 +42,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <div class="column column-fourth padded price">
             {% if isEditMode %}
               <div{{ tableHeadPrice.attributes|raw }}>
-                {{ tableHeadPrice.content }}
+                {% if tableHeadPrice.content %}{{ tableHeadPrice.content }}{% else %}<span class="xEmpty">&nbsp;price&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadPrice.content }}
@@ -51,7 +51,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <div class="column column-fourth padded sum">
             {% if isEditMode %}
               <div{{ tableHeadSum.attributes|raw }}>
-                {{ tableHeadSum.content }}
+                {% if tableHeadSum.content %}{{ tableHeadSum.content }}{% else %}<span class="xEmpty">&nbsp;sum&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ tableHeadSum.content }}
@@ -81,7 +81,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <div id="promoCodeEntry">
             {% if isEditMode %}
               <div{{ promoCode.attributes|raw }}>
-                {{ promoCode.content }}
+                {% if promoCode.content %}{{ promoCode.content }}{% else %}<span class="xEmpty">&nbsp;Promo code&nbsp;</span>{% endif %}
               </div>
             {% else %}
                 {{ promoCode.content }}
@@ -90,7 +90,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <input type="text" name="promo_code" id="promo_code" />
               {% if isEditMode %}
                 <div{{ promoButton.attributes|raw }}>
-                  {{ promoButton.content }}
+                  {% if promoButton.content %}{{ promoButton.content }}{% else %}<span class="xEmpty">&nbsp;OK&nbsp;</span>{% endif %}
                 </div>
               {% else %}
                   <input type="button" value="{{ promoButton.content }}" />
@@ -134,7 +134,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <input type="hidden" id="discount_applied" value="0" />
           {% if isEditMode %}
             <div{{ discount.attributes|raw }}>
-              {{ discount.content }}
+              {% if discount.content %}{{ discount.content }}{% else %}<span class="xEmpty">&nbsp;discount&nbsp;</span>{% endif %}
             </div>
           {% else %}
               {{ discount.content }}
@@ -149,7 +149,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
         <div class="padded shoppingCartTotal">
           {% if isEditMode %}
             <div{{ total.attributes|raw }}>
-              {{ total.content }}
+              {% if total.content %}{{ total.content }}{% else %}<span class="xEmpty">&nbsp;total&nbsp;</span>{% endif %}
             </div>
           {% else %}
               {{ total.content }}
@@ -157,7 +157,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 
           {% if isEditMode %}
             <div{{ includedVat.attributes|raw }}>
-              {{ includedVat.content }}
+              {% if includedVat.content %}{{ includedVat.content }}{% else %}<span class="xEmpty">&nbsp;incl vat&nbsp;</span>{% endif %}
             </div>
           {% endif %}
           <div class="vatprice hidden">{{ includedVat.content }} (<span></span>%)</div>
@@ -180,7 +180,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
             <p class="checkbox">
               {% if isEditMode %}
                 <div{{ legalPerson.attributes|raw }}>
-                  {{ legalPerson.content }}
+                  {% if legalPerson.content %}{{ legalPerson.content }}{% else %}<span class="xEmpty">&nbsp;legal person&nbsp;</span>{% endif %}
                 </div>
               {% else %}
                 <input type="checkbox" id="cartTextLegalPerson" value="1" /> <label for="cartTextLegalPerson" class="auto-width"> {{ legalPerson.content }}</label>
@@ -191,7 +191,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="cartTextCompany">
                 {% if isEditMode %}
                   <div{{ company.attributes|raw }}>
-                    {{ company.content }}
+                    {% if company.content %}{{ company.content }}{% else %}<span class="xEmpty">&nbsp;Company&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ company.content }}
@@ -206,7 +206,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="cartTextCompanyRegNo">
                 {% if isEditMode %}
                   <div{{ companyRegistrationNumber.attributes|raw }}>
-                    {{ companyRegistrationNumber.content }}
+                    {% if companyRegistrationNumber.content %}{{ companyRegistrationNumber.content }}{% else %}<span class="xEmpty">&nbsp;Company reg. no.&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ companyRegistrationNumber.content }}
@@ -221,7 +221,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="cartTextLegalAddress">
                 {% if isEditMode %}
                   <div{{ legalAddress.attributes|raw }}>
-                    {{ legalAddress.content }}
+                    {% if legalAddress.content %}{{ legalAddress.content }}{% else %}<span class="xEmpty">&nbsp;Legal address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ legalAddress.content }}
@@ -236,7 +236,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="nname">
                 {% if isEditMode %}
                   <div{{ nameSurname.attributes|raw }}>
-                    {{ nameSurname.content }}
+                    {% if nameSurname.content %}{{ nameSurname.content }}{% else %}<span class="xEmpty">&nbsp;name surname&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ nameSurname.content }}
@@ -251,7 +251,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="address">
                 {% if isEditMode %}
                   <div{{ address.attributes|raw }}>
-                    {{ address.content }}
+                    {% if address.content %}{{ address.content }}{% else %}<span class="xEmpty">&nbsp;address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ address.content }}
@@ -266,7 +266,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="phone">
                 {% if isEditMode %}
                   <div{{ phone.attributes|raw }}>
-                    {{ phone.content }}
+                    {% if phone.content %}{{ phone.content }}{% else %}<span class="xEmpty">&nbsp;phone number&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ phone.content }}
@@ -281,7 +281,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="email-reg">
                 {% if isEditMode %}
                   <div{{ email.attributes|raw }}>
-                    {{ email.content }}
+                    {% if email.content %}{{ email.content }}{% else %}<span class="xEmpty">&nbsp;email&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ email.content }}
@@ -296,7 +296,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="notes">
                 {% if isEditMode %}
                   <div{{ comments.attributes|raw }}>
-                    {{ comments.content }}
+                    {% if comments.content %}{{ comments.content }}{% else %}<span class="xEmpty">&nbsp;comments&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ comments.content }}
@@ -309,7 +309,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 
             {% if isEditMode %}
               <div{{ deliverToBillingAddress.attributes|raw }}>
-                {{ deliverToBillingAddress.content }}
+                {% if deliverToBillingAddress.content %}{{ deliverToBillingAddress.content }}{% else %}<span class="xEmpty">&nbsp;deliver to billing_address&nbsp;</span>{% endif %}
               </div>
             {% else %}
               <p class="no-margin-bottom">
@@ -321,7 +321,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 
         <div class="cc-fields{% if not isEditMode %} hidden{% endif %}" id="shipping_address_form">
           <h2{{ shippingAddressHeader.attributes|raw }}>
-            {{ shippingAddressHeader.content }}
+            {% if shippingAddressHeader.content %}{{ shippingAddressHeader.content }}{% else %}<span class="xEmpty">&nbsp;shipping address&nbsp;</span>{% endif %}
           </h2>
 
           <div class="padded">
@@ -329,7 +329,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="ship_nname">
                 {% if isEditMode %}
                   <div{{ nameSurname.attributes|raw }}>
-                    {{ nameSurname.content }}
+                    {% if nameSurname.content %}{{ nameSurname.content }}{% else %}<span class="xEmpty">&nbsp;name surname&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ nameSurname.content }}
@@ -344,7 +344,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="ship_address">
                 {% if isEditMode %}
                   <div{{ address.attributes|raw }}>
-                    {{ address.content }}
+                    {% if address.content %}{{ address.content }}{% else %}<span class="xEmpty">&nbsp;address&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ address.content }}
@@ -359,7 +359,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="ship_phone">
                 {% if isEditMode %}
                   <div{{ phone.attributes|raw }}>
-                    {{ phone.content }}
+                    {% if phone.content %}{{ phone.content }}{% else %}<span class="xEmpty">&nbsp;phone number&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ phone.content }}
@@ -374,7 +374,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="ship_email-reg">
                 {% if isEditMode %}
                   <div{{ email.attributes|raw }}>
-                    {{ email.content }}
+                    {% if email.content %}{{ email.content }}{% else %}<span class="xEmpty">&nbsp;email&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ email.content }}
@@ -389,7 +389,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="ship_notes">
                 {% if isEditMode %}
                   <div{{ comments.attributes|raw }}>
-                    {{ comments.content }}
+                    {% if comments.content %}{{ comments.content }}{% else %}<span class="xEmpty">&nbsp;comments&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ comments.content }}
@@ -405,7 +405,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
         {% if isEditMode %}
           <div class="padded">
             <div{{ receiveNews.attributes|raw }}>
-              {{ receiveNews.content }}
+              {% if receiveNews.content %}{{ receiveNews.content }}{% else %}<span class="xEmpty">&nbsp;receive news and updates&nbsp;</span>{% endif %}
             </div>
           </div>
         {% elseif receiveNews.content %}
@@ -426,7 +426,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 
           {% if isEditMode or paymentDescription.content %}
             <p{{ paymentDescription.attributes|raw }}>
-              {{ paymentDescription.content }}
+              {% if paymentDescription.content %}{{ paymentDescription.content }}{% else %}<span class="xEmpty">&nbsp;payment description&nbsp;</span>{% endif %}
             </p>
           {% endif %}
 
@@ -448,7 +448,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
               <label for="pm_bank_transfer"><input type="radio" name="pm" id="pm_bank_transfer"{% if config.paymentMethod == 'bank' %} checked="checked"{% endif %}>
                 {% if isEditMode %}
                   <div{{ manualTransfer.attributes|raw }}>
-                    {{ manualTransfer.content }}
+                    {% if manualTransfer.content %}{{ manualTransfer.content }}{% else %}<span class="xEmpty">&nbsp;Manual transfer&nbsp;</span>{% endif %}
                   </div>
                 {% else %}
                     {{ manualTransfer.content }}
@@ -461,7 +461,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
         <div class="padded checkOut">
           {% if isEditMode or checkoutDescription.content %}
             <p{{ checkoutDescription.attributes|raw }}>
-              {{ checkoutDescription.content }}
+              {% if checkoutDescription.content %}{{ checkoutDescription.content }}{% else %}<span class="xEmpty">&nbsp;checkout description&nbsp;</span>{% endif %}
             </p>
           {% endif %}
 
@@ -470,20 +470,20 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           {% if isEditMode %}
             {% if config.termsLink %}
               <div{{ terms.attributes|raw }}>
-                {{ terms.content }}
+                {% if terms.content %}{{ terms.content }}{% else %}<span class="xEmpty">&nbsp;By purchasing our products you agree to the Terms of Service&nbsp;</span>{% endif %}
               </div>
             {% endif %}
 
             <div{{ fillRequiredFields.attributes|raw }}>
-              {{ fillRequiredFields.content }}
+              {% if fillRequiredFields.content %}{{ fillRequiredFields.content }}{% else %}<span class="xEmpty">&nbsp;Please fill in all required fields&nbsp;</span>{% endif %}
             </div>
 
             <div{{ checkoutButton.attributes|raw }}>
-              {{ checkoutButton.content }}
+              {% if checkoutButton.content %}{{ checkoutButton.content }}{% else %}<span class="xEmpty">&nbsp;checkout and pay&nbsp;</span>{% endif %}
             </div>
 
             <div{{ returnToStore.attributes|raw }}>
-              {{ returnToStore.content }}
+              {% if returnToStore.content %}{{ returnToStore.content }}{% else %}<span class="xEmpty">&nbsp;return to store&nbsp;</span>{% endif %}
             </div>
 
           {% else %}
@@ -822,7 +822,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 {% if showUrl %}
   <div class="entryContent">
     {% if isEditMode %}
-      <div class="xEditable xProperty-url"{{ attributes.url|raw }}>{{ content.url }}</div>
+      <div class="xNgEditable xProperty-url"{{ attributes.url|raw }}>{% if content.url %}{{ content.url }}{% else %}<span class="xEmpty">&nbsp;url&nbsp;</span>{% endif %}</div>
     {% else %}
       <div class="xEditable xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
     {% endif %}
@@ -903,7 +903,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   {{ entryContents|raw }}
 </div>
 `,
-  'Sites/Sections/Entries/_entryTitle': `<h2><span class="xEditable xProperty-title xCaption-entry&nbsp;title"{{ attributes.title|raw }}>{{ content.title }}</span></h2>
+  'Sites/Sections/Entries/_entryTitle': `<h2><span class="xNgEditable xProperty-title xCaption-entry&nbsp;title"{{ attributes.title|raw }}>{% if content.title %}{{ content.title }}{% else %}<span class="xEmpty">&nbsp;entry title&nbsp;</span>{% endif %}</span></h2>
 `,
   'Sites/Sections/Entries/entry': `<{{ entryHTMLTag }} id="{{ entryId }}"{{ attributes.entry|raw }}>
   {{ entryContents|raw }}
@@ -982,13 +982,13 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   <span class="outOfStock hidden">{{ outOfStockText }}</span>
 </div>
 `,
-  'Sites/Sections/Entries/shop/_cartTitle': `<h2><span class="xEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle|raw }}>{{ content.cartTitle }}</span></h2>
+  'Sites/Sections/Entries/shop/_cartTitle': `<h2><span class="xNgEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle }}>{% if content.cartTitle %}{{ content.cartTitle }}{% else %}<span class="xEmpty">&nbsp;item name&nbsp;</span>{% endif %}</span></h2>
 `,
   'Sites/Sections/Entries/shop/_productAttributesEditor': `<div class="xEntrySeperator"></div>
 <div class="xEntryBoxParams">
   <b>Attribute</b>
-  <div class="xEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes">{{ cartAttributesEdit }}</div>
-  <div class="xEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight">{{ entryWeight }}</div>
+  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
 </div>
 `,
   'Sites/Sections/additionalFooterText': `<div{{ attributes|raw }}>
@@ -1516,7 +1516,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   {% else %}
     {% if isEditMode %}
       <span{{ editableAttributes|raw }}>
-        {{ title|raw }}
+        {% if title %}{{ title|raw }}{% else %}<span class="xEmpty">&nbsp;heading&nbsp;</span>{% endif %}
       </span>
     {% else %}
       <a href="{{ link }}">{{ title|raw }}</a>
diff --git a/editor/src/app/shop/shop-cart-render.service.ts b/editor/src/app/shop/shop-cart-render.service.ts
index 4986f9935..a826c1767 100644
--- a/editor/src/app/shop/shop-cart-render.service.ts
+++ b/editor/src/app/shop/shop-cart-render.service.ts
@@ -98,11 +98,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextEmpty',
           'xCaption-shopping+cart+empty',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextEmpty`,
+        'data-empty-caption': 'shopping cart empty',
       }),
       content: siteSettings.siteTexts.cartTextEmpty
         ? siteSettings.siteTexts.cartTextEmpty
@@ -114,11 +115,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextExpired',
           'xCaption-shopping+cart+is+expired',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextExpired`,
+        'data-empty-caption': 'shopping cart is expired',
       }),
       content: siteSettings.siteTexts.cartTextExpired
         ? siteSettings.siteTexts.cartTextExpired
@@ -129,11 +131,12 @@ export class ShopCartRenderService {
   getTableHeadTitleData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextTitle', 'xCaption-title'].join(
+        class: ['xNgEditable', 'xProperty-cartTextTitle', 'xCaption-title'].join(
           ' ',
         ),
         style: 'width: 100px',
         'data-path': `${siteSlug}/settings/siteTexts/cartTextTitle`,
+        'data-empty-caption': 'title',
       }),
       content: siteSettings.siteTexts.cartTextTitle
         ? siteSettings.siteTexts.cartTextTitle
@@ -145,11 +148,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextQuantity',
           'xCaption-quantity',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextQuantity`,
+        'data-empty-caption': 'quantity',
       }),
       content: siteSettings.siteTexts.cartTextQuantity
         ? siteSettings.siteTexts.cartTextQuantity
@@ -160,10 +164,11 @@ export class ShopCartRenderService {
   getTableHeadPriceData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextPrice', 'xCaption-price'].join(
+        class: ['xNgEditable', 'xProperty-cartTextPrice', 'xCaption-price'].join(
           ' ',
         ),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextPrice`,
+        'data-empty-caption': 'price',
       }),
       content: siteSettings.siteTexts.cartTextPrice
         ? siteSettings.siteTexts.cartTextPrice
@@ -174,8 +179,9 @@ export class ShopCartRenderService {
   getTableHeadSumData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextSum', 'xCaption-sum'].join(' '),
+        class: ['xNgEditable', 'xProperty-cartTextSum', 'xCaption-sum'].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextSum`,
+        'data-empty-caption': 'sum',
       }),
       content: siteSettings.siteTexts.cartTextSum
         ? siteSettings.siteTexts.cartTextSum
@@ -187,11 +193,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextPromoCode',
           'xCaption-Promo+code',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextPromoCode`,
+        'data-empty-caption': 'Promo code',
       }),
       content: siteSettings.siteTexts.cartTextPromoCode
         ? siteSettings.siteTexts.cartTextPromoCode
@@ -202,10 +209,11 @@ export class ShopCartRenderService {
   getPromoButtonData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextPromoBtn', 'xCaption-OK'].join(
+        class: ['xNgEditable', 'xProperty-cartTextPromoBtn', 'xCaption-OK'].join(
           ' ',
         ),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextPromoBtn`,
+        'data-empty-caption': 'OK',
       }),
       content: siteSettings.siteTexts.cartTextPromoBtn
         ? siteSettings.siteTexts.cartTextPromoBtn
@@ -217,11 +225,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextShippingTo',
           'xCaption-shipping+to',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextShippingTo`,
+        'data-empty-caption': 'shipping to',
       }),
       content: siteSettings.siteTexts.cartTextShippingTo
         ? siteSettings.siteTexts.cartTextShippingTo
@@ -233,11 +242,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-shippingTotalText',
           'xCaption-Shipping',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/shippingTotalText`,
+        'data-empty-caption': 'Shipping',
       }),
       content: siteSettings.siteTexts.shippingTotalText
         ? siteSettings.siteTexts.shippingTotalText
@@ -249,11 +259,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextDiscount',
           'xCaption-discount',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextDiscount`,
+        'data-empty-caption': 'discount',
       }),
       content: siteSettings.siteTexts.cartTextDiscount
         ? siteSettings.siteTexts.cartTextDiscount
@@ -264,10 +275,11 @@ export class ShopCartRenderService {
   getTotalData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextTotal', 'xCaption-total'].join(
+        class: ['xNgEditable', 'xProperty-cartTextTotal', 'xCaption-total'].join(
           ' ',
         ),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextTotal`,
+        'data-empty-caption': 'total',
       }),
       content: siteSettings.siteTexts.cartTextTotal
         ? siteSettings.siteTexts.cartTextTotal
@@ -279,11 +291,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextInclVat',
           'xCaption-incl+vat',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextInclVat`,
+        'data-empty-caption': 'incl vat',
       }),
       content: siteSettings.siteTexts.cartTextInclVat
         ? siteSettings.siteTexts.cartTextInclVat
@@ -295,11 +308,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextBillAddr',
           'xCaption-billing+address',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextBillAddr`,
+        'data-empty-caption': 'billing address',
       }),
       content: siteSettings.siteTexts.cartTextBillAddr
         ? siteSettings.siteTexts.cartTextBillAddr
@@ -311,11 +325,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextLegalPerson',
           'xCaption-legal+person',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextLegalPerson`,
+        'data-empty-caption': 'legal person',
       }),
       content: siteSettings.siteTexts.cartTextLegalPerson
         ? siteSettings.siteTexts.cartTextLegalPerson
@@ -327,11 +342,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextCompany',
           'xCaption-Company',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextCompany`,
+        'data-empty-caption': 'Company',
       }),
       content: siteSettings.siteTexts.cartTextCompany
         ? siteSettings.siteTexts.cartTextCompany
@@ -343,11 +359,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextCompanyRegNo',
           'xCaption-Company+reg.+no.',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextCompanyRegNo`,
+        'data-empty-caption': 'Company reg. no.',
       }),
       content: siteSettings.siteTexts.cartTextCompanyRegNo
         ? siteSettings.siteTexts.cartTextCompanyRegNo
@@ -359,11 +376,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextLegalAddress',
           'xCaption-Legal+address',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextLegalAddress`,
+        'data-empty-caption': 'Legal address',
       }),
       content: siteSettings.siteTexts.cartTextLegalAddress
         ? siteSettings.siteTexts.cartTextLegalAddress
@@ -375,11 +393,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextNameSurname',
           'xCaption-name+surname',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextNameSurname`,
+        'data-empty-caption': 'name surname',
       }),
       content: siteSettings.siteTexts.cartTextNameSurname
         ? siteSettings.siteTexts.cartTextNameSurname
@@ -391,11 +410,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextAddress',
           'xCaption-address',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextAddress`,
+        'data-empty-caption': 'address',
       }),
       content: siteSettings.siteTexts.cartTextAddress
         ? siteSettings.siteTexts.cartTextAddress
@@ -407,11 +427,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextPhoneNumber',
           'xCaption-phone+number',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextPhoneNumber`,
+        'data-empty-caption': 'phone number',
       }),
       content: siteSettings.siteTexts.cartTextPhoneNumber
         ? siteSettings.siteTexts.cartTextPhoneNumber
@@ -422,10 +443,11 @@ export class ShopCartRenderService {
   getEmailData(siteSlug, siteSettings) {
     return {
       attributes: toHtmlAttributes({
-        class: ['xEditable', 'xProperty-cartTextEmail', 'xCaption-email'].join(
+        class: ['xNgEditable', 'xProperty-cartTextEmail', 'xCaption-email'].join(
           ' ',
         ),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextEmail`,
+        'data-empty-caption': 'email',
       }),
       content: siteSettings.siteTexts.cartTextEmail
         ? siteSettings.siteTexts.cartTextEmail
@@ -437,11 +459,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextComments',
           'xCaption-comments',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextComments`,
+        'data-empty-caption': 'comments',
       }),
       content: siteSettings.siteTexts.cartTextComments
         ? siteSettings.siteTexts.cartTextComments
@@ -453,11 +476,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextDeliverBilling',
           'xCaption-deliver+to+billing_address',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextDeliverBilling`,
+        'data-empty-caption': 'deliver to billing_address',
       }),
       content: siteSettings.siteTexts.cartTextDeliverBilling
         ? siteSettings.siteTexts.cartTextDeliverBilling
@@ -469,11 +493,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextShipAddr',
           'xCaption-shipping+address',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextShipAddr`,
+        'data-empty-caption': 'shipping address',
       }),
       content: siteSettings.siteTexts.cartTextShipAddr
         ? siteSettings.siteTexts.cartTextShipAddr
@@ -485,11 +510,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextReceiveNews',
           'xCaption-receive+news+and+updates',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextReceiveNews`,
+        'data-empty-caption': 'receive news and updates',
       }),
       content: siteSettings.siteTexts.cartTextReceiveNews
         ? siteSettings.siteTexts.cartTextReceiveNews
@@ -501,11 +527,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextCPM',
           'xCaption-choose+payment+method',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextCPM`,
+        'data-empty-caption': 'choose payment method',
       }),
       content: siteSettings.siteTexts.cartTextCPM
         ? siteSettings.siteTexts.cartTextCPM
@@ -517,11 +544,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextPaymentDescription',
           'xCaption-payment+description',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextPaymentDescription`,
+        'data-empty-caption': 'payment description',
       }),
       content: siteSettings.siteTexts.cartTextPaymentDescription
         ? siteSettings.siteTexts.cartTextPaymentDescription
@@ -533,11 +561,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartManualTransfer',
           'xCaption-Manual+transfer',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartManualTransfer`,
+        'data-empty-caption': 'Manual transfer',
       }),
       content: siteSettings.siteTexts.cartManualTransfer
         ? siteSettings.siteTexts.cartManualTransfer
@@ -549,11 +578,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextCheckoutDescription',
           'xCaption-checkout+description',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextCheckoutDescription`,
+        'data-empty-caption': 'checkout description',
       }),
       content: siteSettings.siteTexts.cartTextCheckoutDescription
         ? siteSettings.siteTexts.cartTextCheckoutDescription
@@ -565,11 +595,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextTerms',
           'xCaption-By+purchasing+our+products+you+agree+to+the+Terms+of+Service',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextTerms`,
+        'data-empty-caption': 'By purchasing our products you agree to the Terms of Service',
       }),
       content: siteSettings.siteTexts.cartTextTerms
         ? siteSettings.siteTexts.cartTextTerms
@@ -581,11 +612,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextFillRequiredFields',
           'xCaption-Please+fill+in+all+required+fields',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextFillRequiredFields`,
+        'data-empty-caption': 'Please fill in all required fields',
       }),
       content: siteSettings.siteTexts.cartTextFillRequiredFields
         ? siteSettings.siteTexts.cartTextFillRequiredFields
@@ -597,11 +629,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextCheckoutButton',
           'xCaption-checkout+and+pay',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextCheckoutButton`,
+        'data-empty-caption': 'checkout and pay',
       }),
       content: siteSettings.siteTexts.cartTextCheckoutButton
         ? siteSettings.siteTexts.cartTextCheckoutButton
@@ -613,11 +646,12 @@ export class ShopCartRenderService {
     return {
       attributes: toHtmlAttributes({
         class: [
-          'xEditable',
+          'xNgEditable',
           'xProperty-cartTextReturnStore',
           'xCaption-return+to+store',
         ].join(' '),
         'data-path': `${siteSlug}/settings/siteTexts/cartTextReturnStore`,
+        'data-empty-caption': 'return to store',
       }),
       content: siteSettings.siteTexts.cartTextReturnStore
         ? siteSettings.siteTexts.cartTextReturnStore
diff --git a/editor/src/app/sites/sites-header-render.service.ts b/editor/src/app/sites/sites-header-render.service.ts
index 7951ab4a6..a1b3af9b9 100644
--- a/editor/src/app/sites/sites-header-render.service.ts
+++ b/editor/src/app/sites/sites-header-render.service.ts
@@ -11,7 +11,7 @@ export class SitesHeaderRenderService {
     'xEditableDragXY',
     'xProperty-siteHeadingXY',
   ];
-  EDITABLE_CLASSES = ['xEditable', 'xProperty-siteHeading'];
+  EDITABLE_CLASSES = ['xNgEditable', 'xProperty-siteHeading'];
   HEADER_IMAGE_TEMPLATE_SETTING_GROUP = {
     default: 'pageHeading',
     messy: 'heading',
@@ -102,6 +102,8 @@ export class SitesHeaderRenderService {
     return toHtmlAttributes({
       class: this.EDITABLE_CLASSES.join(' '),
       'data-path': `${siteSlug}/settings/siteTexts/siteHeading`,
+      'data-empty-caption': 'heading',
+      'data-ng-raw': '1',
     });
   }
 
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index 0924667c6..ee4a606bd 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -162,6 +162,8 @@
 }
 
 .xEditable,
+.xNgEditable,
+.xNgEditableTA,
 .xEditableSelect,
 .xEditableSelectRC,
 .xEditableFontSelect,
@@ -187,6 +189,8 @@
 }
 
 .xEditable:hover,
+.xNgEditable:hover,
+.xNgEditableTA:hover,
 .xEditableSelect:hover,
 .xEditableSelectRC:hover,
 .xEditableFontSelect:hover,
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index a378d9d08..4f453ad39 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -1066,39 +1066,6 @@ var BertaEditorBase = new Class({
           } else {
             updateAction = Actions.initUpdateSiteSection;
           }
-
-          if (prop === "type") {
-            new_callback = function (resp, respRaw) {
-              var site = getCurrentSite();
-              var state = redux_store.getState();
-              var template =
-                state.siteSettings.toJS()[site].template.template;
-              var sectionTypes =
-                state.siteTemplates.toJS()[template].sectionTypes;
-              var type = resp.section["@attributes"].type
-                ? resp.section["@attributes"].type
-                : "default";
-              var type_params = sectionTypes[type]
-                ? sectionTypes[type].params
-                : sectionTypes["default"].params;
-
-              resp["params"] = this.getTypeHTML(
-                site,
-                resp.order,
-                resp.section,
-                state.siteTemplateSettings.toJS()[site][template],
-                type_params,
-                "xSection-" + resp.section["name"] + " xSectionField"
-              );
-
-              callback(resp, respRaw);
-              // @@@:HACK: Original shit in the above callback doesn't work :(
-              var detailsElement = el.getParent("li").getElement(".csDetails");
-              detailsElement.empty();
-              detailsElement.set("html", resp["params"]);
-              this.editablesInit(detailsElement);
-            }.bind(this);
-          }
         }
 
         if (path_arr[1] === "entry") {
@@ -1482,86 +1449,6 @@ var BertaEditorBase = new Class({
 
     return retString;
   },
-
-  getTypeHTML: function (site, order, section, settings, type_params, params) {
-    var basePath = site + "/section/" + order + "/";
-    var html = "";
-
-    if (type_params) {
-      //remove responsive section settings if needed
-      var isResponsive =
-        settings["pageLayout"] &&
-        settings["pageLayout"]["responsive"] &&
-        settings["pageLayout"]["responsive"] === "yes";
-
-      if (!isResponsive) {
-        if (type_params.columns) {
-          delete type_params.columns;
-        }
-        if (type_params.entryMaxWidth) {
-          delete type_params.entryMaxWidth;
-        }
-        if (type_params.entryPadding) {
-          delete type_params.entryPadding;
-        }
-      }
-
-      params = Object.getOwnPropertyNames(type_params);
-      params.forEach(function (param_name) {
-        var param = type_params[param_name];
-        var values = [];
-        var ctx = {
-          html_before: param.html_before ? param.html_before : "",
-          format: formats[param.format] ? formats[param.format] : "",
-          property: param_name,
-          html_entities: param.html_entities ? "" : "xNoHTMLEntities",
-          css_units: param.css_units ? "1" : "0",
-          link: param.link ? "xLink" : "",
-          allow_blank: "xRequired-" + (param.allow_blank ? "0" : "1"),
-          validation: param.validator ? "xValidator-" + param.validator : "",
-          additional_params: params ? params : "",
-          title: escapeHTML(param.default),
-          path: basePath + param_name,
-          x_options: "",
-          value: section[param_name] ? section[param_name] : "",
-          html_after: param.html_after ? param.html_after : "",
-        };
-
-        ctx.value =
-          !ctx.value && param && param.default ? param.default : ctx.value;
-
-        if (param.format === "select" || param.format === "fontselect") {
-          if (param.values === "templates") {
-            values = getAllTemplates();
-          } else {
-            if (!Array.isArray(param.values)) {
-              Object.getOwnPropertyNames(param.values).forEach(function (
-                value_name
-              ) {
-                values.push(value_name + "|" + param.values[value_name]);
-
-                if (ctx.value === value_name) {
-                  ctx.value = param.values[value_name];
-                }
-              });
-            } else {
-              values = param.values;
-
-              if (values[ctx.value] && !(parseInt(ctx.value, 10) > 0)) {
-                ctx.value = values[ctx.value];
-              }
-            }
-          }
-
-          ctx.x_options = escapeHTML(values.join("||"));
-        }
-
-        html += Templates.get("type_params", Object.assign({}, editables, ctx));
-      });
-    }
-
-    return html;
-  },
 });
 
 BertaEditorBase.EDITABLE_START = "editable_start";
diff --git a/engine/js/ng/templates/multisite.html b/engine/js/ng/templates/multisite.html
deleted file mode 100644
index 2eb6c5f41..000000000
--- a/engine/js/ng/templates/multisite.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<script type="text/template" id="multisite">
-  <div class="csHandle"><span class="handle"></span></div>
-  <div class="csTitle">
-    <span class="<%=xEditable%> xProperty-title xNoHTMLEntities xSite-<%=name%>"
-          data-path="site/<%=order%>/title"><span class="<%=xEmpty%>">&nbsp;title&nbsp;
-      </span>
-    </span>
-  </div>
-  <div class="csName">
-    <%=address%>/<span class="<%=xEditable%> xProperty-name xNoHTMLEntities xSite-<%=name%>"
-          data-path="site/<%=order%>/name"><%=name%>
-    </span>
-  </div>
-  <div class="csPub">
-    <span class="<%=xEditableYesNo%> xProperty-published xSite-<%=name%>"
-          data-path="site/<%=order%>/@attributes/published">
-      0
-    </span>
-  </div>
-  <div class="csClone">
-    <a href="#" class="xSiteClone">clone</a>
-  </div>
-  <div class="csDelete">
-    <a href="#" class="xSiteDelete">delete</a>
-  </div>
-</script>
diff --git a/engine/js/ng/templates/sections.html b/engine/js/ng/templates/sections.html
deleted file mode 100644
index e07bd880f..000000000
--- a/engine/js/ng/templates/sections.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<script type="text/template" id="section">
-  <div class="csHandle"><span class="handle"></span></div>
-  <div class="csTitle">
-    <span class="<%=xEditable%> xProperty-title xNoHTMLEntities xSection-<%=name%>"
-          data-path="<%=site%>/section/<%=order%>/title">
-      <%=title%>
-    </span>
-  </div>
-  <div class="csBehaviour">
-    <span class="<%=xEditableSelectRC%> xProperty-type xSection-<%=name%> xSectionField"
-          data-path="<%=site%>/section/<%=order%>/@attributes/type" x_options="<%=possible_types%>">
-          <%=type_value%>
-    </span>
-  </div>
-  <div class="csDetails">
-    <%=type_html%>
-  </div>
-  <div class="csPub">
-    <span class="<%=xEditableYesNo%> xProperty-published xSection-<%=name%>"
-          data-path="<%=site%>/section/<%=order%>/@attributes/published"><%=published%></span>
-  </div>
-  <div class="csClone"><a href="#" class="xSectionClone">clone</a></div>
-  <div class="csDelete"><a href="#" class="xSectionDelete">delete</a></div>
-</script>
-
-<script type="text/template" id="type_params">
-  <%=html_before%>
-  <div class="value <%=format%> xProperty-<%=property%> <%=html_entities%> xCSSUnits-<%=css_units%> <%=link%> xRequired-<%=allow_blank%> <%=validator%> <%=additional_params%>"
-       title="<%=title%>"
-       data-path="<%=path%>"
-       x_options="<%=x_options%>">
-    <%=value%>
-  </div>
-  <%=html_after%>
-</script>

From 6ba044fe0b1cc831c3493d4a856366949b9b3133 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Fri, 11 Sep 2026 17:34:20 +0300
Subject: [PATCH 02/17] Replace install wizard with Angular modal window one.

---
 INSTALL/includes/wizzard.php                  | 112 --------
 editor/src/app/app-routing.module.ts          |   8 +
 editor/src/app/app.component.ts               |  49 ++--
 editor/src/app/app.module.ts                  |   2 +
 editor/src/app/preview/preview.component.ts   |  34 ++-
 editor/src/app/preview/preview.service.ts     |  10 +
 editor/src/app/render/twig-templates.ts       |   2 +-
 .../app/setup/setup-can-deactivate.guard.ts   |  23 ++
 .../src/app/setup/setup-wizard.component.ts   | 270 ++++++++++++++++++
 .../app/sites/settings/site-settings.state.ts |  28 +-
 editor/src/styles/_forms.scss                 |  14 +
 engine/inc.page.php                           |  21 +-
 engine/inc.settings.php                       |   2 +-
 13 files changed, 417 insertions(+), 158 deletions(-)
 delete mode 100644 INSTALL/includes/wizzard.php
 create mode 100644 editor/src/app/setup/setup-can-deactivate.guard.ts
 create mode 100644 editor/src/app/setup/setup-wizard.component.ts

diff --git a/INSTALL/includes/wizzard.php b/INSTALL/includes/wizzard.php
deleted file mode 100644
index b9c40dc40..000000000
--- a/INSTALL/includes/wizzard.php
+++ /dev/null
@@ -1,112 +0,0 @@
-<?php
-
-if (empty($CHECK_INCLUDED)) {
-    /** @todo
-     * - fix this path:  */
-    define('AUTH_AUTHREQUIRED', true);
-    define('SETTINGS_INSTALLREQUIRED', false);
-    include '../../engine/inc.page.php';
-}
-
-include $ENGINE_ROOT_PATH . 'inc.settings.php';
-$berta->settings = new Settings($settingsDefinition);
-
-include_once $ENGINE_ROOT_PATH . '_classes/class.bertaeditor.php';
-
-$version = $options['version'];
-
-$uriPath = explode('?', $_SERVER['REQUEST_URI'])[0];
-
-?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title><?php echo $berta->settings->get('texts', 'pageTitle') ?> / welcome</title>
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/backend.min.css?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/editor.css.php?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/login.css?<?php echo $version ?>" type="text/css" />
-<?php include $ENGINE_ROOT_PATH . 'inc.head.php'; ?>
-</head><?php
-
-if (! empty($settings['berta']['installed'])) {
-    $redirectURL = strstr($uriPath, '/editor') ? $ENGINE_ROOT_URL . 'editor/' : $SITE_ROOT_URL;
-
-    ?><body class="xLoginPageBody">
-		<div class="xMAlign-container xPanel">
-			<div class="xMAlign-outer">
-				<div class="xMAlign-inner">
-					<p>Berta is already installed.<br />Please delete folder named <strong><code>INSTALL</code></strong> in your Berta's root folder! <br />&nbsp;<br /><input type="button" value="  OK  " onclick="window.location='<?php echo $SITE_ROOT_URL ?>';"></p>
-				</div>
-			</div>
-		</div>
-	</body><?php
-
-} else {
-    $redirectURL = strstr($uriPath, '/editor') ? $ENGINE_ROOT_URL . 'editor/' : $ENGINE_ROOT_URL;
-    $site = empty($options['MULTISITE']) ? '' : $options['MULTISITE'];
-    $basePath = $site . '/settings';
-
-    ?><body class="xLoginPageBody xSetupWizard" x_mode="settings">
-		<div class="xMAlign-container xPanel">
-			<div class="xMAlign-outer">
-				<div class="xMAlign-inner justify">
-					<div id="xFirstTimeWizzard">
-						<h2><?php echo I18n::_('Setup your site') ?></h2>
-
-						<p class="emphasis"><?php echo I18n::_('setup_info_text') ?></p>
-
-						<p>1. <?php echo I18n::_('What is the title of your site?') ?></p>
-						<p class="subInfo"><?php echo I18n::_('Site title will be visible in all sections of your site.') ?></p>
-
-                        <?php
-                            echo BertaEditor::getSettingsItemEditHTML(
-                                'siteTexts/siteHeading',
-                                $berta->settings->getDefinition('siteTexts', 'siteHeading'),
-                                $berta->settings->get('siteTexts', 'siteHeading', false),
-                                ['xCaption' => str_replace(' ', '+', $berta->settings->getDefinitionParam('siteTexts', 'siteHeading', 'title'))],
-                                'p',
-                                $basePath . '/siteTexts/siteHeading'
-                            );
-    ?>
-
-						<p>2. <?php echo I18n::_('What is your name?') ?></p>
-						<p class="subInfo"><?php echo I18n::_('It will appear in the copyright notice in the footer. You may leave it blank.') ?></p>
-
-						<?php echo BertaEditor::getSettingsItemEditHTML(
-						    'texts/ownerName',
-						    $berta->settings->getDefinition('texts', 'ownerName'),
-						    $berta->settings->get('texts', 'ownerName', false),
-						    ['xCaption' => str_replace(' ', '+', $berta->settings->getDefinitionParam('texts', 'ownerName', 'title'))],
-						    'p',
-						    $basePath . '/texts/ownerName'
-						);
-    ?>
-
-						<p>3. <?php echo I18n::_('What is this website about?') ?></p>
-						<p class="subInfo"><?php echo I18n::_('It will appear under your site name in search engine results.') ?></p>
-						<p class="subInfo"><?php echo I18n::_('Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.') ?></p>
-
-						<?php echo BertaEditor::getSettingsItemEditHTML(
-						    'texts/metaDescription',
-						    $berta->settings->getDefinition('texts', 'metaDescription'),
-						    $berta->settings->get('texts', 'metaDescription', false),
-						    ['xCaption' => str_replace(' ', '+', $berta->settings->getDefinitionParam('texts', 'metaDescription', 'title'))],
-						    'p',
-						    $basePath . '/texts/metaDescription'
-						);
-    ?>
-
-                        <p><input type="button" value=" <?php echo I18n::_('Done!') ?> " id="xFinishInstall" data-path="<?php echo $basePath?>/berta/installed"></p>
-					</div>
-					<?php
-
-    ?></div>
-			</div>
-		</div>
-    </body>
-
-<?php
-}
-?>
-
-</html>
diff --git a/editor/src/app/app-routing.module.ts b/editor/src/app/app-routing.module.ts
index bfe742ed1..97e90156d 100644
--- a/editor/src/app/app-routing.module.ts
+++ b/editor/src/app/app-routing.module.ts
@@ -15,8 +15,16 @@ import { SiteMediaComponent } from './sites/media/site-media.component';
 import { EntryGalleryEditorComponent } from './sites/media/entry-gallery-editor.component';
 import { EntryGalleryImageEditorComponent } from './sites/media/entry-gallery-image-editor.component';
 import { BackgroundGalleryEditorComponent } from './sites/sections/background-gallery-editor.component';
+import { SetupWizardComponent } from './setup/setup-wizard.component';
+import { SetupCanDeactivateGuard } from './setup/setup-can-deactivate.guard';
 
 const routes: Routes = [
+  {
+    path: 'setup',
+    component: SetupWizardComponent,
+    canActivate: [AuthGuardService],
+    canDeactivate: [SetupCanDeactivateGuard],
+  },
   {
     path: 'multisite',
     component: SitesComponent,
diff --git a/editor/src/app/app.component.ts b/editor/src/app/app.component.ts
index 20a098fc5..840e7ddd8 100644
--- a/editor/src/app/app.component.ts
+++ b/editor/src/app/app.component.ts
@@ -29,19 +29,21 @@ import { AppStateService } from './app-state/app-state.service';
       >
         <!-- the sidebar -->
         <div class="scroll-wrap"><router-outlet></router-outlet></div>
-        <a href="#" (click)="closeSidebar($event)" class="close">
-          <svg
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m16 12.8754q0 .5387-.377104.9158l-1.83165 1.8317q-.377105.3771-.915825.3771-.538721 0-.915825-.3771l-3.959596-3.9596-3.959596 3.9596q-.3771043.3771-.9158249.3771-.5387205 0-.9158249-.3771l-1.83164982-1.8317q-.37710438-.3771-.37710438-.9158 0-.5387.37710438-.9158l3.95959592-3.9596-3.95959592-3.9596q-.37710438-.3771-.37710438-.9158 0-.5387.37710438-.9158l1.83164982-1.8317q.3771044-.3771.9158249-.3771.5387206 0 .9158249.3771l3.959596 3.9596 3.959596-3.9596q.377104-.3771.915825-.3771.53872 0 .915825.3771l1.83165 1.8317q.377104.3771.377104.9158 0 .5387-.377104.9158l-3.959596 3.9596 3.959596 3.9596q.377104.3771.377104.9158z"
-              stroke-width=".013468"
-            />
-          </svg>
-        </a>
+        @if (!isSetupRoute) {
+          <a href="#" (click)="closeSidebar($event)" class="close">
+            <svg
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m16 12.8754q0 .5387-.377104.9158l-1.83165 1.8317q-.377105.3771-.915825.3771-.538721 0-.915825-.3771l-3.959596-3.9596-3.959596 3.9596q-.3771043.3771-.9158249.3771-.5387205 0-.9158249-.3771l-1.83164982-1.8317q-.37710438-.3771-.37710438-.9158 0-.5387.37710438-.9158l3.95959592-3.9596-3.95959592-3.9596q-.37710438-.3771-.37710438-.9158 0-.5387.37710438-.9158l1.83164982-1.8317q.3771044-.3771.9158249-.3771.5387206 0 .9158249.3771l3.959596 3.9596 3.959596-3.9596q.377104-.3771.915825-.3771.53872 0 .915825.3771l1.83165 1.8317q.377104.3771.377104.9158 0 .5387-.377104.9158l-3.959596 3.9596 3.959596 3.9596q.377104.3771.377104.9158z"
+                stroke-width=".013468"
+              />
+            </svg>
+          </a>
+        }
       </aside>
       <section>
         <berta-preview></berta-preview>
@@ -146,7 +148,8 @@ export class AppComponent implements OnInit, OnDestroy {
   routeIsRoot = true;
   isSidebarFullscreen = false;
   isSidebarFullWidth = false;
-  readonly sidebarFullscreenRoutes = ['/themes'];
+  isSetupRoute = false;
+  readonly sidebarFullscreenRoutes = ['/themes', '/setup'];
   readonly sidebarFullWidthRoutes = ['/media', '/background-gallery'];
 
   user$: Observable<UserStateModel>;
@@ -185,6 +188,7 @@ export class AppComponent implements OnInit, OnDestroy {
           this.currentRouteUrl = url;
           this.isSidebarFullscreen =
             this.sidebarFullscreenRoutes.indexOf(url) > -1;
+          this.isSetupRoute = url === '/setup';
           this.isSidebarFullWidth = this.sidebarFullWidthRoutes.some(
             (route) => url.indexOf(route) === 0,
           );
@@ -240,9 +244,18 @@ export class AppComponent implements OnInit, OnDestroy {
       }
     });
 
-    // Navigate to root if setup mode
+    // Navigate to the setup wizard if setup mode
     this.isSetup$.pipe(filter((isSetup) => isSetup)).subscribe(() => {
-      this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
+      this.router.navigate(['/setup'], { queryParamsHandling: 'preserve' });
+    });
+
+    // Navigate away from the setup wizard once setup mode ends (e.g. after a
+    // reload following "Done!" — the URL still reads `/setup` at boot, since
+    // that's what the browser last navigated to, until this corrects it)
+    this.isSetup$.pipe(filter((isSetup) => !isSetup)).subscribe(() => {
+      if (this.router.url.split('?')[0] === '/setup') {
+        this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
+      }
     });
 
     this.user$.subscribe((user) => {
@@ -277,6 +290,10 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   hideOverlay() {
+    if (this.isSetupRoute) {
+      return;
+    }
+
     this.inputFocus$
       .pipe(
         take(1),
diff --git a/editor/src/app/app.module.ts b/editor/src/app/app.module.ts
index dc32e6108..4dabfc221 100644
--- a/editor/src/app/app.module.ts
+++ b/editor/src/app/app.module.ts
@@ -28,6 +28,7 @@ import { SitesSharedModule } from './sites/shared/sites-shared.module';
 import { PreviewComponent } from './preview/preview.component';
 import { InlineEditOverlayComponent } from './preview/inline-edit/inline-edit-overlay.component';
 import { PopupComponent } from './popup/popup.component';
+import { SetupWizardComponent } from './setup/setup-wizard.component';
 import { ErrorState } from './error-state/error.state';
 import { SharedModule } from './shared/shared.module';
 import { StyleService } from './preview/style.service';
@@ -59,6 +60,7 @@ import { sentryInitFactory } from './sentry/sentry-init.factory';
     InlineEditOverlayComponent,
     ThemesComponent,
     PopupComponent,
+    SetupWizardComponent,
   ],
   bootstrap: [AppComponent],
   imports: [
diff --git a/editor/src/app/preview/preview.component.ts b/editor/src/app/preview/preview.component.ts
index 97b3f60eb..2d3a49c1b 100644
--- a/editor/src/app/preview/preview.component.ts
+++ b/editor/src/app/preview/preview.component.ts
@@ -12,7 +12,7 @@ import { SitesState } from '../sites/sites-state/sites.state';
 import { SiteTemplateSettingsState } from '../sites/template-settings/site-template-settings.state';
 import { PreviewService } from './preview.service';
 import { InlineEditService } from './inline-edit/inline-edit.service';
-import { AppShowLoading, UpdateAppStateAction } from '../app-state/app.actions';
+import { AppShowLoading } from '../app-state/app.actions';
 import { UserLogoutAction } from '../user/user.actions';
 import { StyleService } from './style.service';
 import { SiteSettingsState } from '../sites/settings/site-settings.state';
@@ -131,6 +131,16 @@ export class PreviewComponent implements OnInit {
   onLoad(event) {
     this.waitFullLoad(event.target).subscribe({
       next: (iframe) => {
+        this.service.setCurrentIframe(iframe);
+
+        if (this.store.selectSnapshot(AppState.isSetup)) {
+          // Nothing else real to initialize yet (no sections, no rendered
+          // DOM) — finishSetup() reloads the iframe once install completes
+          // (via the currentIframe reference just above), which fires a
+          // fresh `load` here with real content to wire up.
+          return;
+        }
+
         window.addEventListener('message', (event) => {
           switch (event.data.action) {
             case 'EntryGalleryEditorOpen':
@@ -163,9 +173,6 @@ export class PreviewComponent implements OnInit {
           .replace(/\/$/, '')
           .split('/')
           .pop();
-        const isSetup =
-          iframe.contentDocument.body &&
-          /xSetupWizard/.test(iframe.contentDocument.body.className);
         const urlParams = new URLSearchParams(
           iframe.contentDocument.location.search,
         );
@@ -185,8 +192,6 @@ export class PreviewComponent implements OnInit {
           queryParamsHandling: 'merge',
         });
 
-        this.store.dispatch(new UpdateAppStateAction({ setup: isSetup }));
-
         /*
         Check for iframe login page
         try to login user with existing token
@@ -384,8 +389,22 @@ export class PreviewComponent implements OnInit {
       const maxChecks = 120;
       let intervalCount = 0;
       let lastError = '';
+      let checkInterval: ReturnType<typeof setInterval>;
+
+      // Setup is required (no site to render yet) — resolve as soon as we know
+      // that, instead of waiting for Berta classes a blank pre-install response
+      // will never have. Reactive (not a one-off snapshot) since settings can
+      // still be loading when the iframe's `load` event first fires.
+      const setupSubscription = this.store
+        .select(AppState.isSetup)
+        .pipe(filter((isSetup) => isSetup))
+        .subscribe(() => {
+          clearInterval(checkInterval);
+          observer.next(iframe);
+          observer.complete();
+        });
 
-      const checkInterval = setInterval(() => {
+      checkInterval = setInterval(() => {
         const lastUrlPart = iframe.contentDocument?.location.href
           .replace(/\/$/, '')
           .split('/')
@@ -443,6 +462,7 @@ export class PreviewComponent implements OnInit {
       // Return cleanup function
       return () => {
         clearInterval(checkInterval);
+        setupSubscription.unsubscribe();
       };
     });
   }
diff --git a/editor/src/app/preview/preview.service.ts b/editor/src/app/preview/preview.service.ts
index 86bf264d7..cc03d20d8 100644
--- a/editor/src/app/preview/preview.service.ts
+++ b/editor/src/app/preview/preview.service.ts
@@ -30,6 +30,8 @@ import { SiteSettingsState } from '../sites/settings/site-settings.state';
   providedIn: 'root',
 })
 export class PreviewService {
+  private currentIframe: HTMLIFrameElement | null = null;
+
   constructor(
     private appService: AppStateService,
     private popupService: PopupService,
@@ -37,6 +39,14 @@ export class PreviewService {
     private store: Store,
   ) {}
 
+  setCurrentIframe(iframe: HTMLIFrameElement) {
+    this.currentIframe = iframe;
+  }
+
+  reloadIframe() {
+    this.currentIframe?.contentWindow?.location.reload();
+  }
+
   sync(url, data, method) {
     const urlParts = this.parseSyncUrl(url);
     const urlIdentifier = urlParts.join('/');
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index 7b1ba1171..f67a53a23 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -982,7 +982,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   <span class="outOfStock hidden">{{ outOfStockText }}</span>
 </div>
 `,
-  'Sites/Sections/Entries/shop/_cartTitle': `<h2><span class="xNgEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle }}>{% if content.cartTitle %}{{ content.cartTitle }}{% else %}<span class="xEmpty">&nbsp;item name&nbsp;</span>{% endif %}</span></h2>
+  'Sites/Sections/Entries/shop/_cartTitle': `<h2><span class="xNgEditable xProperty-cartTitle xCaption-item-name cCartTitle"{{ attributes.cartTitle|raw }}>{% if content.cartTitle %}{{ content.cartTitle }}{% else %}<span class="xEmpty">&nbsp;item name&nbsp;</span>{% endif %}</span></h2>
 `,
   'Sites/Sections/Entries/shop/_productAttributesEditor': `<div class="xEntrySeperator"></div>
 <div class="xEntryBoxParams">
diff --git a/editor/src/app/setup/setup-can-deactivate.guard.ts b/editor/src/app/setup/setup-can-deactivate.guard.ts
new file mode 100644
index 000000000..2781c57ff
--- /dev/null
+++ b/editor/src/app/setup/setup-can-deactivate.guard.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { CanDeactivate } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { AppState } from '../app-state/app.state';
+import { SetupWizardComponent } from './setup-wizard.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SetupCanDeactivateGuard
+  implements CanDeactivate<SetupWizardComponent>
+{
+  constructor(private store: Store) {}
+
+  canDeactivate(): Observable<boolean> {
+    return this.store.select(AppState.isSetup).pipe(
+      take(1),
+      map((isSetup) => !isSetup),
+    );
+  }
+}
diff --git a/editor/src/app/setup/setup-wizard.component.ts b/editor/src/app/setup/setup-wizard.component.ts
new file mode 100644
index 000000000..19fa5e6f8
--- /dev/null
+++ b/editor/src/app/setup/setup-wizard.component.ts
@@ -0,0 +1,270 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { Observable, combineLatest, from } from 'rxjs';
+import { concatMap, filter, map } from 'rxjs/operators';
+import { SiteSettingsState } from '../sites/settings/site-settings.state';
+import { UpdateSiteSettingsAction } from '../sites/settings/site-settings.actions';
+import { PreviewService } from '../preview/preview.service';
+import {
+  SettingModel,
+  SettingConfigModel,
+  SettingsGroupModel,
+  SettingGroupConfigModel,
+} from '../shared/interfaces';
+
+interface WizardField {
+  group: string;
+  setting: SettingModel;
+  config: SettingConfigModel;
+}
+
+interface WizardFields {
+  siteHeading: WizardField;
+  ownerName: WizardField;
+  metaDescription: WizardField;
+  metaKeywords: WizardField;
+}
+
+/**
+ * Real Angular replacement for the legacy first-run setup page
+ * (`INSTALL/includes/wizzard.php`), which rendered its 3 fields as
+ * `xEditable`-class inline-edit spans inside the preview iframe. Reuses the
+ * exact same `<berta-setting>` input components and `UpdateSiteSettingsAction`
+ * the normal Settings page (`SiteSettingsComponent`) already uses for these
+ * same fields, so only the presentation changes, not the save mechanism.
+ */
+@Component({
+  selector: 'berta-setup-wizard',
+  template: `
+    <div class="setup-wizard">
+      <h2>Setup your site</h2>
+
+      @if (fields$ | async; as fields) {
+        <div class="setting-group">
+          <berta-setting
+            [setting]="fields.siteHeading.setting"
+            [config]="fields.siteHeading.config"
+            [disabled]="
+              isSaving(
+                fields.siteHeading.group,
+                fields.siteHeading.setting.slug
+              )
+            "
+            (update)="updateSetting(fields.siteHeading.group, $event)"
+          ></berta-setting>
+        </div>
+
+        <div class="setting-group">
+          <berta-setting
+            [setting]="fields.ownerName.setting"
+            [config]="fields.ownerName.config"
+            [disabled]="
+              isSaving(fields.ownerName.group, fields.ownerName.setting.slug)
+            "
+            (update)="updateSetting(fields.ownerName.group, $event)"
+          ></berta-setting>
+        </div>
+
+        <div class="setting-group">
+          <berta-setting
+            [setting]="fields.metaDescription.setting"
+            [config]="fields.metaDescription.config"
+            [disabled]="
+              isSaving(
+                fields.metaDescription.group,
+                fields.metaDescription.setting.slug
+              )
+            "
+            (update)="updateSetting(fields.metaDescription.group, $event)"
+          ></berta-setting>
+        </div>
+
+        <div class="setting-group">
+          <berta-setting
+            [setting]="fields.metaKeywords.setting"
+            [config]="fields.metaKeywords.config"
+            [disabled]="
+              isSaving(
+                fields.metaKeywords.group,
+                fields.metaKeywords.setting.slug
+              )
+            "
+            (update)="updateSetting(fields.metaKeywords.group, $event)"
+          ></berta-setting>
+        </div>
+
+        <p>
+          <button
+            type="button"
+            class="button"
+            [disabled]="saving"
+            (click)="finishSetup(fields)"
+          >
+            Done!
+          </button>
+        </p>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .setup-wizard {
+        padding: 1.5em;
+        display: flex;
+        flex-direction: column;
+        row-gap: 1em;
+      }
+
+      h2 {
+        margin-top: 0;
+      }
+
+      berta-setting {
+        margin: 0;
+      }
+
+      .setup-wizard p:last-child {
+        margin-bottom: 0;
+      }
+    `,
+  ],
+  standalone: false,
+})
+export class SetupWizardComponent implements OnInit {
+  fields$: Observable<WizardFields>;
+  saving = false;
+  private settingUpdate: { [k: string]: boolean } = {};
+
+  constructor(
+    private store: Store,
+    private router: Router,
+    private previewService: PreviewService,
+  ) {}
+
+  ngOnInit() {
+    this.fields$ = combineLatest([
+      this.store.select(SiteSettingsState.getCurrentSiteSettings),
+      this.store.select((state) => state.siteSettingsConfig),
+    ]).pipe(
+      filter(
+        ([settings, config]) =>
+          !!settings &&
+          settings.length > 0 &&
+          !!config &&
+          Object.keys(config).length > 0,
+      ),
+      map(([settings, config]) =>
+        this.buildFields(settings as SettingsGroupModel[], config),
+      ),
+      filter((fields): fields is WizardFields => !!fields),
+    );
+  }
+
+  private buildFields(
+    settings: SettingsGroupModel[],
+    config: { [group: string]: SettingGroupConfigModel },
+  ): WizardFields | null {
+    const siteHeading = this.findField(
+      settings,
+      config,
+      'siteTexts',
+      'siteHeading',
+    );
+    const ownerName = this.findField(settings, config, 'texts', 'ownerName');
+    const metaDescription = this.findField(
+      settings,
+      config,
+      'texts',
+      'metaDescription',
+    );
+    const metaKeywords = this.findField(
+      settings,
+      config,
+      'texts',
+      'metaKeywords',
+    );
+
+    if (!siteHeading || !ownerName || !metaDescription || !metaKeywords) {
+      return null;
+    }
+
+    return { siteHeading, ownerName, metaDescription, metaKeywords };
+  }
+
+  private findField(
+    settings: SettingsGroupModel[],
+    config: { [group: string]: SettingGroupConfigModel },
+    group: string,
+    slug: string,
+  ): WizardField | null {
+    const settingGroup = settings.find((g) => g.slug === group);
+    const setting = settingGroup?.settings.find((s) => s.slug === slug);
+    const settingConfig =
+      config[group] && (config[group][slug] as SettingConfigModel);
+
+    if (!setting || !settingConfig) {
+      return null;
+    }
+
+    return { group, setting, config: settingConfig };
+  }
+
+  isSaving(group: string, slug: string): boolean {
+    return this.settingUpdate[`${group}:${slug}`];
+  }
+
+  updateSetting(group: string, event: { field: string; value: any }) {
+    const key = `${group}:${event.field}`;
+    this.settingUpdate[key] = true;
+
+    this.store
+      .dispatch(
+        new UpdateSiteSettingsAction(group, { [event.field]: event.value }),
+      )
+      .subscribe({
+        next: () => {
+          this.settingUpdate[key] = false;
+        },
+        error: () => {
+          this.settingUpdate[key] = false;
+        },
+      });
+  }
+
+  finishSetup(fields: WizardFields) {
+    this.saving = true;
+
+    const ownerName = fields.ownerName.setting.value;
+    const siteHeading = fields.siteHeading.setting.value;
+    const actions: UpdateSiteSettingsAction[] = [];
+
+    if (ownerName) {
+      actions.push(
+        new UpdateSiteSettingsAction('siteTexts', {
+          siteFooter: `${ownerName} &copy; `,
+        }),
+      );
+    }
+
+    if (siteHeading) {
+      actions.push(
+        new UpdateSiteSettingsAction('texts', { pageTitle: siteHeading }),
+      );
+    }
+
+    actions.push(new UpdateSiteSettingsAction('berta', { installed: 1 }));
+
+    from(actions)
+      .pipe(concatMap((action) => this.store.dispatch(action)))
+      .subscribe({
+        complete: () => {
+          this.previewService.reloadIframe();
+          this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
+        },
+        error: () => {
+          this.saving = false;
+        },
+      });
+  }
+}
diff --git a/editor/src/app/sites/settings/site-settings.state.ts b/editor/src/app/sites/settings/site-settings.state.ts
index 27df297cf..194197780 100644
--- a/editor/src/app/sites/settings/site-settings.state.ts
+++ b/editor/src/app/sites/settings/site-settings.state.ts
@@ -1,5 +1,5 @@
 import { concat } from 'rxjs';
-import { take, switchMap, tap } from 'rxjs/operators';
+import { filter, take, switchMap, tap } from 'rxjs/operators';
 import {
   State,
   Action,
@@ -19,6 +19,7 @@ import { SettingsGroupModel } from '../../shared/interfaces';
 import { FileUploadService } from '../shared/file-upload.service';
 import { AppStateService } from '../../app-state/app-state.service';
 import { AppState } from '../../app-state/app.state';
+import { UpdateAppStateAction } from '../../app-state/app.actions';
 import {
   UpdateSiteSettingsAction,
   DeleteSiteSettingsAction,
@@ -84,6 +85,20 @@ export class SiteSettingsState implements NgxsOnInit {
     return language && language.value;
   }
 
+  @Selector([SiteSettingsState.getCurrentSiteSettings])
+  static getCurrentSiteInstalled(currentSiteSettings): string | undefined {
+    if (!currentSiteSettings) {
+      return undefined;
+    }
+    const bertaSettings = currentSiteSettings.find(
+      (settingGroup) => settingGroup.slug === 'berta',
+    );
+    const installed =
+      bertaSettings &&
+      bertaSettings.settings.find((setting) => setting.slug === 'installed');
+    return installed && installed.value;
+  }
+
   constructor(
     private store: Store,
     private actions$: Actions,
@@ -108,6 +123,13 @@ export class SiteSettingsState implements NgxsOnInit {
       },
       error: (error) => console.error(error),
     });
+
+    this.store
+      .select(SiteSettingsState.getCurrentSiteInstalled)
+      .pipe(filter((installed) => installed !== undefined))
+      .subscribe((installed) => {
+        dispatch(new UpdateAppStateAction({ setup: !Number(installed) }));
+      });
   }
 
   @Action(CreateSiteSettingsAction)
@@ -183,6 +205,10 @@ export class SiteSettingsState implements NgxsOnInit {
               );
               break;
           }
+
+          if (response.section) {
+            dispatch(new AddSiteSectionAction(response.section));
+          }
         }
       }),
     );
diff --git a/editor/src/styles/_forms.scss b/editor/src/styles/_forms.scss
index e9adbf997..a06ac9cb9 100644
--- a/editor/src/styles/_forms.scss
+++ b/editor/src/styles/_forms.scss
@@ -476,3 +476,17 @@ color-picker {
     white-space: nowrap;
   }
 }
+
+.setup-wizard {
+  .form-group {
+    label {
+      align-items: start;
+      flex-direction: column;
+      row-gap: 1em;
+    }
+
+    .text-input-wrapper {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/engine/inc.page.php b/engine/inc.page.php
index 697671745..44a5c51c5 100644
--- a/engine/inc.page.php
+++ b/engine/inc.page.php
@@ -142,20 +142,6 @@ function addSlashesRecursive($var)
 if (! defined('SETTINGS_INSTALLREQUIRED')) {
     define('SETTINGS_INSTALLREQUIRED', true);
 }
-if (! empty($_REQUEST['_berta_install_done'])) {
-    /** @todo: auto-create the first section */
-
-    // final installer adjustments
-    if ($berta->settings->get('texts', 'ownerName')) {
-        $berta->settings->update('siteTexts', 'siteFooter', $berta->settings->get('texts', 'ownerName') . ' &copy; ');
-    }
-    if ($berta->settings->get('siteTexts', 'siteHeading')) {
-        $berta->settings->update('texts', 'pageTitle', $berta->settings->get('siteTexts', 'siteHeading'));
-    }
-
-    $berta->settings->update('berta', 'installed', 1);
-    $berta->settings->save();
-}
 if (SETTINGS_INSTALLREQUIRED && ! $berta->settings->get('berta', 'installed')) {
     if ($berta->security->userLoggedIn) {
         $step = ! empty($_REQUEST['_berta_install_step']) ? (int) $_REQUEST['_berta_install_step'] : 1;
@@ -175,12 +161,7 @@ function addSlashesRecursive($var)
                 }
                 break;
             case 2:
-                if (file_exists($SITE_ROOT_PATH . 'INSTALL/includes/wizzard.php')) {
-                    $CHECK_INCLUDED = true;
-                    include $SITE_ROOT_PATH . 'INSTALL/includes/wizzard.php';
-                    exit;
-                }
-                break;
+                exit;
         }
     } else {
         if (file_exists($SITE_ROOT_PATH . 'INSTALL/includes/first_visit.php')) {
diff --git a/engine/inc.settings.php b/engine/inc.settings.php
index 49aad0a00..e8152d8e7 100644
--- a/engine/inc.settings.php
+++ b/engine/inc.settings.php
@@ -62,7 +62,7 @@
             'allow_blank' => true,
             'default' => null,
             'title' => I18n::_('Site heading'),
-            'description' => '',
+            'description' => 'Name or your site. Visible in all sections.',
         ],
     ],
 

From 661a86d2976ca81f8bc931bf878ed4f5036c1690 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Fri, 11 Sep 2026 19:29:54 +0300
Subject: [PATCH 03/17] Fix "create new entry" button duplicates. Clean legacy
 code.

---
 .../Sections/Entries/_entryContents.twig      |  2 +-
 editor/src/app/render/twig-templates.ts       |  2 +-
 engine/_classes/class.bertaeditor.php         | 52 ----------------
 engine/css/editor.css.php                     | 18 ------
 engine/inc.engineprefs.php                    | 21 -------
 engine/js/BertaEditor.js                      | 17 +-----
 engine/js/BertaEditorBase.js                  | 60 +------------------
 engine/js/ng/shared/constants.js              | 29 ---------
 gulpfile.js                                   |  1 -
 9 files changed, 7 insertions(+), 195 deletions(-)
 delete mode 100644 engine/js/ng/shared/constants.js

diff --git a/_api_app/app/Sites/Sections/Entries/_entryContents.twig b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
index f6f4b63e1..9d40681ca 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryContents.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
@@ -25,7 +25,7 @@
     {% if isEditMode %}
       <div class="xNgEditable xProperty-url"{{ attributes.url|raw }}>{% if content.url %}{{ content.url }}{% else %}<span class="xEmpty">&nbsp;url&nbsp;</span>{% endif %}</div>
     {% else %}
-      <div class="xEditable xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
+      <div class="xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
     {% endif %}
   </div>
 {% endif %}
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index f67a53a23..1453f76bd 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -824,7 +824,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
     {% if isEditMode %}
       <div class="xNgEditable xProperty-url"{{ attributes.url|raw }}>{% if content.url %}{{ content.url }}{% else %}<span class="xEmpty">&nbsp;url&nbsp;</span>{% endif %}</div>
     {% else %}
-      <div class="xEditable xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
+      <div class="xProperty-url"><a href="{{ content.url }}" target="_blank">{{ content.url }}</a></div>
     {% endif %}
   </div>
 {% endif %}
diff --git a/engine/_classes/class.bertaeditor.php b/engine/_classes/class.bertaeditor.php
index 81005b3fa..1b9a50a38 100644
--- a/engine/_classes/class.bertaeditor.php
+++ b/engine/_classes/class.bertaeditor.php
@@ -37,56 +37,4 @@ public static function getXEmpty($property)
         return parent::getXEmpty($property);
     }
 
-    public static function getSettingsItemEditHTML($property, $sDef, $value, $additionalParams = null, $tag = 'div', $path = '')
-    {
-        global $editsForSettings;
-
-        $pStr = '';
-        if ($additionalParams) {
-            foreach ($additionalParams as $pN => $p) {
-                $pStr .= $pN . (! is_null($p) ? ('-' . $p) : '') . ' ';
-            }
-        }
-        $html = '';
-
-        if (! empty($sDef['html_before'])) {
-            $html .= $sDef['html_before'];
-        }
-
-        $html .= '<' . $tag . ' class="value ' . (! empty($editsForSettings[$sDef['format']]) ? $editsForSettings[$sDef['format']] : '') . ' ' .
-            'xProperty-' . $property . ' ' .
-            (empty($sDef['html_entities']) ? 'xNoHTMLEntities' : '') . ' ' .
-            'xCSSUnits-' . (empty($sDef['css_units']) ? '0' : '1') . ' ' .
-            (empty($sDef['link']) ? '' : 'xLink') . ' ' .
-            'xRequired-' . (! empty($sDef['allow_blank']) ? '0' : '1') . ' ' .
-            (! empty($sDef['validator']) ? 'xValidator-' . $sDef['validator'] . ' ' : '') .
-            $pStr .
-            '" title="' . htmlspecialchars($sDef['default'] ?? '') . '"';
-
-        if (! empty($path)) {
-            $html .= ' data-path="' . $path . '"';
-        }
-
-        if ($sDef['format'] == 'select' || $sDef['format'] == 'fontselect') {
-            $values = [];
-            if ($sDef['values'] == 'templates') {
-                $values = BertaTemplate::getAllTemplates();
-            } else {
-                foreach ($sDef['values'] as $vK => $vV) {
-                    $values[$vK] = is_string($vK) ? ($vK . '|' . $vV) : $vV;
-                }
-            }
-            $html .= ' x_options="' . htmlspecialchars(implode('||', $values)) . '"';
-            $value = isset($values[$value]) && ! intval($value) > 0 ? $sDef['values'][$value] : $value;
-        }
-
-        $html .= '>';
-        $html .= $value . '</' . $tag . '>';
-
-        if (! empty($sDef['html_after'])) {
-            $html .= $sDef['html_after'];
-        }
-
-        return $html;
-    }
 }
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index ee4a606bd..331d9004c 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -161,13 +161,11 @@
     padding: 0 4px 0 5px;
 }
 
-.xEditable,
 .xNgEditable,
 .xNgEditableTA,
 .xEditableSelect,
 .xEditableSelectRC,
 .xEditableFontSelect,
-.xEditableTA,
 .xEditableMCE,
 .xEditableRC {
     cursor: default;
@@ -188,13 +186,11 @@
     cursor:pointer;
 }
 
-.xEditable:hover,
 .xNgEditable:hover,
 .xNgEditableTA:hover,
 .xEditableSelect:hover,
 .xEditableSelectRC:hover,
 .xEditableFontSelect:hover,
-.xEditableTA:hover,
 .xEditableMCE:hover,
 .xEditableRC:hover,
 .xEditableYesNo:hover,
@@ -661,20 +657,6 @@
     margin: 10px 0 25px;
 }
 
-#xFirstTimeWizzard {
-
-}
-    #xFirstTimeWizzard p.subInfo { color: #999; margin-top: -6px; font-size: 90%; }
-    #xFirstTimeWizzard p.xEditable {
-        padding: 5px !important;
-        margin-bottom: 20px !important;
-    }
-    #xFirstTimeWizzard p.xEditable:before {
-        content: "› ";
-    }
-    #xFirstTimeWizzard p.xEditable, #xFirstTimeWizzard p.xEditable * { font-size: 16px !important;	}
-
-
     #multisites li.selected {
         font-weight: bold;
     }
diff --git a/engine/inc.engineprefs.php b/engine/inc.engineprefs.php
index e8c1f02a5..a4f735927 100644
--- a/engine/inc.engineprefs.php
+++ b/engine/inc.engineprefs.php
@@ -136,25 +136,4 @@
 /**
  * Editables
  */
-$xEditSelectorSimple = 'xEditable';    // simple input
-$xEditSelectorSelect = 'xEditableSelect';    // select
-$xEditSelectorSelectRC = 'xEditableSelectRC';    // select
-$xEditSelectorFontSelect = 'xEditableFontSelect';    // select
-$xEditSelectorImage = 'xEditableImage';    // image upload
-$xEditSelectorICO = 'xEditableICO';    // ico upload
-$xEditSelectorTA = 'xEditableTA';    // textarea
-$xEditSelectorMCE = 'xEditableMCE';    // textarea
-$xEditSelectorMCESimple = 'xEditableMCESimple';    // textarea
-$xEditSelectorRC = 'xEditableRC';    // with "real" content
-$xEditSelectorYesNo = 'xEditableYesNo';    // the "yes/no" switch
 $xEmpty = 'xEmpty';
-
-$editsForSettings = [
-    'text' => $xEditSelectorSimple,
-    'longtext' => $xEditSelectorTA,
-    'richtext' => $xEditSelectorMCESimple,
-    'image' => $xEditSelectorImage,
-    'icon' => $xEditSelectorICO,
-    'select' => $xEditSelectorSelectRC,
-    'fontselect' => $xEditSelectorFontSelect
-];
diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index f2756694e..de0f02330 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -145,6 +145,9 @@ var BertaEditor = new Class({
             )
               createNewEntryText = this.options.i18n["create new entry here"];
             else createNewEntryText = this.options.i18n["create new entry"];
+            var existingCreateNewEntry =
+              this.entriesList.getNext(".xCreateNewEntry");
+            if (existingCreateNewEntry) existingCreateNewEntry.destroy();
             new Element("A", {
               class: "xCreateNewEntry xPanel xAction-entryCreateNew",
               href: "#",
@@ -322,20 +325,6 @@ var BertaEditor = new Class({
 
   editablesInit: function () {
     // instantiate all xEditable elements in the page
-    // simple text fields ///////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassSimple).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassSimple);
-      }.bind(this)
-    );
-
-    // textareas ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassTA).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassTA);
-      }.bind(this)
-    );
-
     // mce textareas ////////////////////////////////////////////////////////////////////////////////////////////////////////////
     $$(this.options.xBertaEditorClassMCE).each(
       function (el) {
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index 4f453ad39..f9a5817b8 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -31,11 +31,9 @@ var BertaEditorBase = new Class({
   Implements: [Options, Events],
 
   options: {
-    xBertaEditorClassSimple: ".xEditable",
     xBertaEditorClassSelect: ".xEditableSelect",
     xBertaEditorClassSelectRC: ".xEditableSelectRC",
     xBertaEditorClassFontSelect: ".xEditableFontSelect",
-    xBertaEditorClassTA: ".xEditableTA",
     xBertaEditorClassMCE: ".xEditableMCE",
     xBertaEditorClassMCESimple: ".xEditableMCESimple",
     xBertaEditorClassRC: ".xEditableRC",
@@ -137,57 +135,6 @@ var BertaEditorBase = new Class({
       self = this;
 
     switch (editorClass) {
-      case this.options.xBertaEditorClassSimple:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              this.addClass("xEditing");
-              editor.makeEmptyIfEmpty(this);
-              editor.elementEdit_instances.push(
-                this.inlineEdit({
-                  onComplete: editor.elementEdit_save.bind(editor),
-                })
-              );
-              editor.fireEvent(BertaEditorBase.EDITABLE_START, [
-                el,
-                editor.elementEdit_instances[
-                  editor.elementEdit_instances.length - 1
-                ],
-              ]);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
-      case this.options.xBertaEditorClassTA:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              this.addClass("xEditing");
-              if (this.inlineIsEmpty()) this.innerHTML = "&nbsp;";
-              editor.elementEdit_instances.push(
-                this.inlineEdit({
-                  type: "textarea",
-                  onComplete: editor.elementEdit_save.bind(editor),
-                })
-              );
-              editor.fireEvent(BertaEditorBase.EDITABLE_START, [
-                el,
-                editor.elementEdit_instances[
-                  editor.elementEdit_instances.length - 1
-                ],
-              ]);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
       case this.options.xBertaEditorClassMCE:
       case this.options.xBertaEditorClassMCESimple:
         el.store("onElementSave", onElementSave);
@@ -903,10 +850,7 @@ var BertaEditorBase = new Class({
       if (entryInfo.section == "") entryInfo.section = this.sectionName;
 
       // px/em/pt value validator
-      if (
-        el.hasClass(this.options.xBertaEditorClassSimple.substr(1)) ||
-        el.hasClass(this.options.xBertaEditorClassRC.substr(1))
-      ) {
+      if (el.hasClass(this.options.xBertaEditorClassRC.substr(1))) {
         if (/(\spx|\spt|\sem)$/i.test(newContent)) {
           newContent = newContent.replace(
             /(\spx|\spt|\sem)$/i,
@@ -1404,7 +1348,7 @@ var BertaEditorBase = new Class({
   },
 
   escapeForJSON: function (str) {
-    // Replace &quot: xBertaEditorClassSimple editor reads value from element html instead of text
+    // Replace &quot: some editors read value from element html instead of text
     return String(str).replace(/\&quot;/g, '"');
   },
 
diff --git a/engine/js/ng/shared/constants.js b/engine/js/ng/shared/constants.js
deleted file mode 100644
index df9c961a8..000000000
--- a/engine/js/ng/shared/constants.js
+++ /dev/null
@@ -1,29 +0,0 @@
-(function(window) {
-  'use strict';
-
-  window.editables = {
-    xEditable: 'xEditable',                     // simple input
-    xEditableSelect: 'xEditableSelect',         // select
-    xEditableSelectRC: 'xEditableSelectRC',     // select
-    xEditableFontSelect: 'xEditableFontSelect', // select
-    xEditableImage: 'xEditableImage',           // image upload
-    xEditableICO: 'xEditableICO',               // ico upload
-    xEditableTA: 'xEditableTA',                 // textarea
-    xEditableMCE: 'xEditableMCE',               // textarea
-    xEditableMCESimple: 'xEditableMCESimple',   // textarea
-    xEditableRC: 'xEditableRC',                 // with "real" content
-    xEditableYesNo: 'xEditableYesNo',           // the "yes/no" switch
-    xEmpty: 'xEmpty'
-  };
-
-  window.formats = {
-    text: window.editables.xEditable,
-    longtext: window.editables.xEditableTA,
-    richtext: window.editables.xEditableMCESimple,
-    image: window.editables.xEditableImage,
-    icon: window.editables.xEditableICO,
-    select: window.editables.xEditableSelectRC,
-    fontselect: window.editables.xEditableFontSelect
-  };
-
-})(window);
diff --git a/gulpfile.js b/gulpfile.js
index 1420de9a6..cd87ea835 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -99,7 +99,6 @@ const backendJsFiles = [
 var backendNgJsFiles = [
   "engine/js/ng/shared/namespace.js",
   "engine/js/ng/shared/utils.js",
-  "engine/js/ng/shared/constants.js",
   "engine/js/ng/shared/action-types.js",
   "engine/js/ng/state.actions.js",
   "engine/js/ng/sites/sites.actions.js",

From 1918d50a9f6b3469c61bdd40f00948e1e91470cd Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 09:43:03 +0300
Subject: [PATCH 04/17] Moved inline editor checkbox to Angular

---
 .../Sites/Sections/Entries/_entryEditor.twig  |   4 +-
 .../inline-edit/inline-edit.service.ts        | 134 ++++++++++++++++++
 editor/src/app/render/twig-templates.ts       |   4 +-
 engine/css/editor.css.php                     |  15 +-
 4 files changed, 148 insertions(+), 9 deletions(-)

diff --git a/_api_app/app/Sites/Sections/Entries/_entryEditor.twig b/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
index ae84d3fc7..9ecb04ba4 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
@@ -27,7 +27,7 @@
           <a href="#" class="xEntryToBack" title="send to back behind others"><span>Send to back</span></a>
         </li>
         <li>
-          <a><div class="xEntryCheck"><label><span class="xEditableRealCheck xProperty-fixed" data-path="{{apiPath}}content/fixed">{{ entryFixed }}</span>Fixed position</label></div></a>
+          <a><div class="xEntryCheck"><label><span class="xNgEditableCheckBox xProperty-fixed" data-path="{{apiPath}}content/fixed"><input type="button" class="{% if entryFixed == 1 %}checked{% endif %}" value="" /></span>Fixed position</label></div></a>
         </li>
         <li>
           <div class="customWidth">
@@ -36,7 +36,7 @@
         </li>
       {% endif %}
       <li>
-        <a><div class="xEntryCheck"><label><span class="xEditableRealCheck xProperty-marked" data-path="{{apiPath}}marked">{{ entryMarked }}</span>Marked</label></div></a>
+        <a><div class="xEntryCheck"><label><span class="xNgEditableCheckBox xProperty-marked" data-path="{{apiPath}}marked"><input type="button" class="{% if entryMarked == 1 %}checked{% endif %}" value="" /></span>Marked</label></div></a>
       </li>
       <li>
         <a href="#" class="xEntryDelete xAction-entryDelete" title="delete"><span>Delete</span></a>
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index c6f187264..b1bffc2db 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -13,6 +13,14 @@ import { resolveInlineEditAction } from './inline-edit-path.resolver';
 const EDITABLE_SELECTOR = '.xNgEditable, .xNgEditableTA';
 const MULTILINE_CLASS = 'xNgEditableTA';
 const DROPDOWN_BOX_SELECTOR = '.xEntryDropdownBox';
+const CHECKBOX_SELECTOR = '.xNgEditableCheckBox';
+const FIXED_PROPERTY_CLASS = 'xProperty-fixed';
+const SAVING_CLASS = 'xSaving';
+
+interface CheckBoxRollback {
+  entryWasFixed: boolean;
+  entryLeft: string;
+}
 
 interface OpenEdit {
   el: HTMLElement;
@@ -86,6 +94,24 @@ export class InlineEditService {
       this.openEditor(target, iframe);
     });
 
+    // `.xNgEditableCheckBox` fields (e.g. the entry dropdown's "Fixed
+    // position"/"Marked" toggles) save immediately on click — no CDK overlay
+    // or open/edit/blur lifecycle, so this is a separate, simpler delegated
+    // listener from the one above.
+    doc.addEventListener('click', (event) => {
+      const target = (event.target as HTMLElement)?.closest(
+        CHECKBOX_SELECTOR,
+      ) as HTMLElement | null;
+
+      if (!target) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      this.toggleCheckBox(target, iframe);
+    });
+
     // The previewed site's own page can scroll independently of the app
     // shell around it.
     iframe.contentWindow?.addEventListener('scroll', () =>
@@ -93,6 +119,114 @@ export class InlineEditService {
     );
   }
 
+  /**
+   * Click-to-toggle-and-save-immediately handling for `.xNgEditableCheckBox`
+   * fields — the Angular-native replacement for legacy's
+   * `eSup_onRealCheckClick` (`BertaEditorBase.js`). Unlike the text-overlay
+   * fields above, there's no separate open/edit step: the checked state
+   * flips and saves in the same click.
+   */
+  private toggleCheckBox(el: HTMLElement, iframe: HTMLIFrameElement) {
+    if (el.classList.contains(SAVING_CLASS)) {
+      return;
+    }
+
+    const path = el.dataset['path'];
+    const input = el.querySelector('input') as HTMLInputElement | null;
+
+    if (!path || !input) {
+      return;
+    }
+
+    const wasChecked = input.classList.contains('checked');
+    const isFixedProperty = el.classList.contains(FIXED_PROPERTY_CLASS);
+    const entry = isFixedProperty
+      ? (el.closest('.xEntry') as HTMLElement | null)
+      : null;
+    const rollback: CheckBoxRollback | null = entry
+      ? {
+          entryWasFixed: entry.classList.contains('xFixed'),
+          entryLeft: entry.style.left,
+        }
+      : null;
+
+    input.classList.toggle('checked');
+    const value = input.classList.contains('checked') ? '1' : '0';
+
+    if (isFixedProperty && entry) {
+      this.applyFixedPositionSideEffect(entry, value === '1', iframe);
+    }
+
+    el.classList.add(SAVING_CLASS);
+
+    let action;
+    try {
+      action = resolveInlineEditAction(path, value);
+    } catch (error) {
+      console.error(error);
+      this.rollbackCheckBox(el, input, wasChecked, entry, rollback);
+      return;
+    }
+
+    this.store.dispatch(action).subscribe({
+      next: () => el.classList.remove(SAVING_CLASS),
+      error: () => {
+        el.classList.remove(SAVING_CLASS);
+        this.rollbackCheckBox(el, input, wasChecked, entry, rollback);
+      },
+    });
+  }
+
+  /**
+   * Ports legacy's `eSup_onRealCheckClick` fixed-position side effect
+   * (`BertaEditorBase.js`) exactly: toggling `xProperty-fixed` also flips
+   * `.xFixed` on the ancestor `.xEntry` and, when the page layout is
+   * centered, compensates the entry's inline `left` for the coordinate-frame
+   * change `.xFixed` causes (`position: fixed` switches it from
+   * container-relative to viewport-relative). This must match legacy
+   * exactly: the still-legacy drag-and-drop handler reads/re-applies the
+   * same compensation at drag-end, so an uncompensated value here would be
+   * silently corrupted the next time the entry is dragged.
+   */
+  private applyFixedPositionSideEffect(
+    entry: HTMLElement,
+    becomingFixed: boolean,
+    iframe: HTMLIFrameElement,
+  ) {
+    const contentWindow = iframe.contentWindow;
+    const container = iframe.contentDocument?.getElementById(
+      'contentContainer',
+    );
+
+    entry.classList.toggle('xFixed', becomingFixed);
+
+    if (container?.classList.contains('xCentered') && contentWindow) {
+      const currentLeft =
+        parseInt(contentWindow.getComputedStyle(entry).left || '0', 10) || 0;
+      const delta =
+        (contentWindow.innerWidth - container.getBoundingClientRect().width) /
+        2;
+
+      entry.style.left = `${becomingFixed ? currentLeft + delta : currentLeft - delta}px`;
+    }
+  }
+
+  private rollbackCheckBox(
+    el: HTMLElement,
+    input: HTMLInputElement,
+    wasChecked: boolean,
+    entry: HTMLElement | null,
+    rollback: CheckBoxRollback | null,
+  ) {
+    el.classList.remove(SAVING_CLASS);
+    input.classList.toggle('checked', wasChecked);
+
+    if (entry && rollback) {
+      entry.classList.toggle('xFixed', rollback.entryWasFixed);
+      entry.style.left = rollback.entryLeft;
+    }
+  }
+
   private openEditor(el: HTMLElement, iframe: HTMLIFrameElement) {
     const path = el.dataset['path'];
 
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index 1453f76bd..1ec42a367 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -869,7 +869,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
           <a href="#" class="xEntryToBack" title="send to back behind others"><span>Send to back</span></a>
         </li>
         <li>
-          <a><div class="xEntryCheck"><label><span class="xEditableRealCheck xProperty-fixed" data-path="{{apiPath}}content/fixed">{{ entryFixed }}</span>Fixed position</label></div></a>
+          <a><div class="xEntryCheck"><label><span class="xNgEditableCheckBox xProperty-fixed" data-path="{{apiPath}}content/fixed"><input type="button" class="{% if entryFixed == 1 %}checked{% endif %}" value="" /></span>Fixed position</label></div></a>
         </li>
         <li>
           <div class="customWidth">
@@ -878,7 +878,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
         </li>
       {% endif %}
       <li>
-        <a><div class="xEntryCheck"><label><span class="xEditableRealCheck xProperty-marked" data-path="{{apiPath}}marked">{{ entryMarked }}</span>Marked</label></div></a>
+        <a><div class="xEntryCheck"><label><span class="xNgEditableCheckBox xProperty-marked" data-path="{{apiPath}}marked"><input type="button" class="{% if entryMarked == 1 %}checked{% endif %}" value="" /></span>Marked</label></div></a>
       </li>
       <li>
         <a href="#" class="xEntryDelete xAction-entryDelete" title="delete"><span>Delete</span></a>
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index 331d9004c..d3b873f3f 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -204,10 +204,12 @@
     cursor: move;
 }
 
-.xEditableRealCheck {
+.xEditableRealCheck,
+.xNgEditableCheckBox {
 
 }
-    .xEditableRealCheck input {
+    .xEditableRealCheck input,
+    .xNgEditableCheckBox input {
         width: 18px;
         height: 18px;
         border: none;
@@ -215,7 +217,8 @@
         background: url('/engine/layout/icon-checkbox.png') no-repeat 50% 50%;
         outline: none;
     }
-    .xEditableRealCheck input.checked {
+    .xEditableRealCheck input.checked,
+    .xNgEditableCheckBox input.checked {
         background-image: url('/engine/layout/icon-checkbox-checked.png');
     }
 
@@ -421,12 +424,14 @@
         vertical-align: top;
     }
 
-    .xEntryDropdownBox .xEditableRealCheck input {
+    .xEntryDropdownBox .xEditableRealCheck input,
+    .xEntryDropdownBox .xNgEditableCheckBox input {
         background: none;
         width: 18px;
     }
 
-    .xEntryDropdownBox .xEditableRealCheck input.checked {
+    .xEntryDropdownBox .xEditableRealCheck input.checked,
+    .xEntryDropdownBox .xNgEditableCheckBox input.checked {
         background: url('/engine/layout/check.png') no-repeat center 0;
     }
 

From 17ea9c3140421c2ad592ad24e425b6ff4341002c Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 09:46:35 +0300
Subject: [PATCH 05/17] Clean up legacy xEditableRealCheck code

Now unreachable after the checkbox inline editor moved to Angular and
was manually verified.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 engine/css/editor.css.php    |  5 ----
 engine/js/BertaEditor.js     |  7 -----
 engine/js/BertaEditorBase.js | 50 ------------------------------------
 3 files changed, 62 deletions(-)

diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index d3b873f3f..4ff0081c8 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -204,11 +204,9 @@
     cursor: move;
 }
 
-.xEditableRealCheck,
 .xNgEditableCheckBox {
 
 }
-    .xEditableRealCheck input,
     .xNgEditableCheckBox input {
         width: 18px;
         height: 18px;
@@ -217,7 +215,6 @@
         background: url('/engine/layout/icon-checkbox.png') no-repeat 50% 50%;
         outline: none;
     }
-    .xEditableRealCheck input.checked,
     .xNgEditableCheckBox input.checked {
         background-image: url('/engine/layout/icon-checkbox-checked.png');
     }
@@ -424,13 +421,11 @@
         vertical-align: top;
     }
 
-    .xEntryDropdownBox .xEditableRealCheck input,
     .xEntryDropdownBox .xNgEditableCheckBox input {
         background: none;
         width: 18px;
     }
 
-    .xEntryDropdownBox .xEditableRealCheck input.checked,
     .xEntryDropdownBox .xNgEditableCheckBox input.checked {
         background: url('/engine/layout/check.png') no-repeat center 0;
     }
diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index de0f02330..87134d8c3 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -373,13 +373,6 @@ var BertaEditor = new Class({
       }.bind(this)
     );
 
-    // input fields //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xEditableRealCheck).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xEditableRealCheck);
-      }.bind(this)
-    );
-
     // uploads //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     $$(this.options.xBertaEditorClassImage).each(
       function (el) {
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index f9a5817b8..67716bb4d 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -40,7 +40,6 @@ var BertaEditorBase = new Class({
     xBertaEditorClassImage: ".xEditableImage",
     xBertaEditorClassICO: ".xEditableICO",
     xBertaEditorClassYesNo: ".xEditableYesNo",
-    xEditableRealCheck: ".xEditableRealCheck",
     xBertaEditorClassDragXY: ".xEditableDragXY",
 
     xBertaEditorClassAction: ".xAction",
@@ -422,25 +421,6 @@ var BertaEditorBase = new Class({
 
         break;
 
-      case this.options.xEditableRealCheck:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-
-        var value = String(el.get("html"));
-
-        el.empty();
-        var checkEl = new Element("input", {
-          type: "button",
-          class: value == 1 ? "checked" : "",
-          value: "",
-        }).inject(el);
-
-        el.addEvent(
-          "click",
-          this.eSup_onRealCheckClick.bindWithEvent(this, [el, checkEl])
-        );
-        break;
-
       case this.options.xBertaEditorClassDragXY:
         el.store("onElementSave", onElementSave);
         el.addClass(editorClass.substr(1));
@@ -697,36 +677,6 @@ var BertaEditorBase = new Class({
     this.elementEdit_save(null, el, null, null, value, value);
   },
 
-  eSup_onRealCheckClick: function (event, el, checkBoxEl) {
-    if (!el.hasClass("xSaving")) {
-      checkBoxEl.toggleClass("checked");
-      var value = checkBoxEl.hasClass("checked") ? "1" : "0";
-
-      if (el.hasClass("xProperty-fixed")) {
-        var entry = el.getParent(".xEntry");
-        if (value == "1") {
-          entry.addClass("xFixed");
-          if (this.container.hasClass("xCentered")) {
-            var left =
-              parseInt(entry.getStyle("left")) +
-              (window.getSize().x - this.container.getSize().x) / 2;
-            entry.setStyle("left", left + "px");
-          }
-        } else {
-          entry.removeClass("xFixed");
-          if (this.container.hasClass("xCentered")) {
-            var left =
-              parseInt(entry.getStyle("left")) -
-              (window.getSize().x - this.container.getSize().x) / 2;
-            entry.setStyle("left", left + "px");
-          }
-        }
-      }
-
-      this.elementEdit_save(null, el, null, null, value, value);
-    }
-  },
-
   eSup_onImageDeleteClick: function (event) {
     event.stop();
     var target = $(event.target);

From 2eb72476ec63ea77f3dc474232601ab46fca5543 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 09:51:51 +0300
Subject: [PATCH 06/17] Simplify checkbox inline-edit comments, drop migration
 narration

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../inline-edit/inline-edit.service.ts        | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index b1bffc2db..56bbc9d7d 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -121,10 +121,8 @@ export class InlineEditService {
 
   /**
    * Click-to-toggle-and-save-immediately handling for `.xNgEditableCheckBox`
-   * fields — the Angular-native replacement for legacy's
-   * `eSup_onRealCheckClick` (`BertaEditorBase.js`). Unlike the text-overlay
-   * fields above, there's no separate open/edit step: the checked state
-   * flips and saves in the same click.
+   * fields. Unlike the text-overlay fields above, there's no separate
+   * open/edit step: the checked state flips and saves in the same click.
    */
   private toggleCheckBox(el: HTMLElement, iframe: HTMLIFrameElement) {
     if (el.classList.contains(SAVING_CLASS)) {
@@ -178,15 +176,14 @@ export class InlineEditService {
   }
 
   /**
-   * Ports legacy's `eSup_onRealCheckClick` fixed-position side effect
-   * (`BertaEditorBase.js`) exactly: toggling `xProperty-fixed` also flips
-   * `.xFixed` on the ancestor `.xEntry` and, when the page layout is
-   * centered, compensates the entry's inline `left` for the coordinate-frame
-   * change `.xFixed` causes (`position: fixed` switches it from
-   * container-relative to viewport-relative). This must match legacy
-   * exactly: the still-legacy drag-and-drop handler reads/re-applies the
-   * same compensation at drag-end, so an uncompensated value here would be
-   * silently corrupted the next time the entry is dragged.
+   * Toggling `xProperty-fixed` also flips `.xFixed` on the ancestor
+   * `.xEntry` and, when the page layout is centered, compensates the
+   * entry's inline `left` for the coordinate-frame change `.xFixed` causes
+   * (`position: fixed` switches it from container-relative to
+   * viewport-relative). This compensation must stay exact: the
+   * drag-and-drop handler in `BertaEditorBase.js` reads/re-applies the same
+   * formula at drag-end, so an uncompensated value here would be silently
+   * corrupted the next time the entry is dragged.
    */
   private applyFixedPositionSideEffect(
     entry: HTMLElement,

From 269da654b8ae3947ed1c742f7f085b55f23c7986 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 09:55:32 +0300
Subject: [PATCH 07/17] Cleanup code comments

---
 editor/src/app/preview/inline-edit/inline-edit.service.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index 56bbc9d7d..8a20910fb 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -95,9 +95,7 @@ export class InlineEditService {
     });
 
     // `.xNgEditableCheckBox` fields (e.g. the entry dropdown's "Fixed
-    // position"/"Marked" toggles) save immediately on click — no CDK overlay
-    // or open/edit/blur lifecycle, so this is a separate, simpler delegated
-    // listener from the one above.
+    // position"/"Marked" toggles) save immediately on click.
     doc.addEventListener('click', (event) => {
       const target = (event.target as HTMLElement)?.closest(
         CHECKBOX_SELECTOR,

From c7205a12dc36f0ab2837ce0a55e1b90ab4a2c0bd Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 10:49:20 +0300
Subject: [PATCH 08/17] Remove legacy unused code

---
 engine/css/editor.css.php    |  51 +---
 engine/js/BertaEditor.js     |  34 ---
 engine/js/BertaEditorBase.js | 545 +----------------------------------
 3 files changed, 4 insertions(+), 626 deletions(-)

diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index 4ff0081c8..588dc1489 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -163,38 +163,15 @@
 
 .xNgEditable,
 .xNgEditableTA,
-.xEditableSelect,
-.xEditableSelectRC,
-.xEditableFontSelect,
 .xEditableMCE,
 .xEditableRC {
     cursor: default;
 }
 
-.xEditableSelect:before,
-.xEditableSelectRC:before,
-.xEditableFontSelect:before {
-    content: url('/engine/layout/drop-down.gif');
-}
-.xEditing.xEditableSelect:before,
-.xEditing.xEditableSelectRC:before,
-.xEditing.xEditableFontSelect:before {
-    content: "";
-}
-
-.xAction {
-    cursor:pointer;
-}
-
 .xNgEditable:hover,
 .xNgEditableTA:hover,
-.xEditableSelect:hover,
-.xEditableSelectRC:hover,
-.xEditableFontSelect:hover,
 .xEditableMCE:hover,
-.xEditableRC:hover,
-.xEditableYesNo:hover,
-.xAction:hover {
+.xEditableRC:hover {
     background-color: rgba(255, 255, 153, .79);
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
@@ -223,32 +200,6 @@
 /*a.xEditorLink, a.xEditorLink * {
     text-decoration: underline;
 }*/
-.xEditableImage {}
-.xEditableICO {}
-    .xEditableImage span.file, .xEditableICO span.file, .xEditableImage span.name, .xEditableICO span.name {
-        display: block;
-        float: left;
-        margin-right: 10px;
-    }
-    .xEditableImage a, .xEditableICO a {
-        display: block;
-        float: left;
-        margin-right: 10px;
-    }
-  .xEditableImage input[type="file"], .xEditableICO input[type="file"] {
-    display: none;
-  }
-
-.xEditableYesNo {}
-    .xEditableYesNo a {
-        font-weight: normal;
-        outline: none;
-    }
-    .xEditableYesNo a.active {
-        font-weight: bold !important;
-        text-transform: uppercase;
-        text-decoration: none !important;
-    }
 
 .xEditOverlay {
     position: absolute;
diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index 87134d8c3..2214f6d32 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -83,11 +83,6 @@ var BertaEditor = new Class({
           );
         });
 
-        // action links
-        $$(this.options.xActionClass).each(function (el) {
-          this.elementEdit_init(el, this.options.xBertaEditorClassAction);
-        }, this);
-
         break;
 
       case "entries":
@@ -344,23 +339,6 @@ var BertaEditor = new Class({
       }.bind(this)
     );
 
-    // selects and font-selects /////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassFontSelect).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassFontSelect);
-      }.bind(this)
-    );
-    $$(this.options.xBertaEditorClassSelect).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassSelect);
-      }.bind(this)
-    );
-    $$(this.options.xBertaEditorClassSelectRC).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassSelectRC);
-      }.bind(this)
-    );
-
     // dragging /////////////////////////////////////////////////////////////////////////////////////////
     var draggableElements = $$(this.options.xBertaEditorClassDragXY);
     if (draggableElements.length) {
@@ -373,18 +351,6 @@ var BertaEditor = new Class({
       }.bind(this)
     );
 
-    // uploads //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassImage).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassImage);
-      }.bind(this)
-    );
-    $$(this.options.xBertaEditorClassICO).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassICO);
-      }.bind(this)
-    );
-
     this.fireEvent(BertaEditor.EDITABLES_INIT);
   },
 
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index 67716bb4d..881e573f5 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -31,21 +31,11 @@ var BertaEditorBase = new Class({
   Implements: [Options, Events],
 
   options: {
-    xBertaEditorClassSelect: ".xEditableSelect",
-    xBertaEditorClassSelectRC: ".xEditableSelectRC",
-    xBertaEditorClassFontSelect: ".xEditableFontSelect",
     xBertaEditorClassMCE: ".xEditableMCE",
     xBertaEditorClassMCESimple: ".xEditableMCESimple",
     xBertaEditorClassRC: ".xEditableRC",
-    xBertaEditorClassImage: ".xEditableImage",
-    xBertaEditorClassICO: ".xEditableICO",
-    xBertaEditorClassYesNo: ".xEditableYesNo",
     xBertaEditorClassDragXY: ".xEditableDragXY",
-
-    xBertaEditorClassAction: ".xAction",
-    xBertaEditorClassReset: ".xReset",
     xEmptyClass: ".xEmpty",
-    updateUrl: "/engine/update.php",
   },
 
   tinyMCESettings: {
@@ -62,16 +52,8 @@ var BertaEditorBase = new Class({
 
   query: null,
 
-  intialize: function () {
-    this.initConsoleReplacement();
-  },
-
   initConsoleReplacement: function () {
     this.query = window.location.search.replace("?", "").parseQueryString();
-    if (this.query.site) {
-      this.options.updateUrl =
-        this.options.updateUrl + "?site=" + this.query.site;
-    }
     if (!window.console) window.console = {};
     if (!window.console.debug) window.console.debug = function () {};
     if (!window.console.error) window.console.error = function () {};
@@ -130,8 +112,8 @@ var BertaEditorBase = new Class({
     if (el.retrieve("elementEdit_init")) return false; // already initialized
     el.store("elementEdit_init", true);
 
-    var bPlaceholderSet = this.makePlaceholderIfEmpty(el),
-      self = this;
+    this.makePlaceholderIfEmpty(el);
+    var self = this;
 
     switch (editorClass) {
       case this.options.xBertaEditorClassMCE:
@@ -197,230 +179,6 @@ var BertaEditorBase = new Class({
         );
         break;
 
-      case this.options.xBertaEditorClassSelect:
-      case this.options.xBertaEditorClassSelectRC:
-      case this.options.xBertaEditorClassFontSelect:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              this.addClass("xEditing");
-
-              if (this.inlineIsEmpty()) this.innerHTML = "";
-              editor.elementEdit_instances.push(
-                this.inlineEdit({
-                  type: "select",
-                  subtype: this.hasClass(
-                    editor.options.xBertaEditorClassFontSelect.substr(1)
-                  )
-                    ? "font"
-                    : this.hasClass(
-                        editor.options.xBertaEditorClassSelectRC.substr(1)
-                      )
-                    ? "rc"
-                    : "",
-                  selectOptions: this.getProperty("x_options").split("||"),
-                  onComplete: editor.elementEdit_save.bind(editor),
-                })
-              );
-              editor.fireEvent(BertaEditorBase.EDITABLE_START, [
-                el,
-                editor.elementEdit_instances[
-                  editor.elementEdit_instances.length - 1
-                ],
-              ]);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
-      case this.options.xBertaEditorClassYesNo:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        var isSetToYes = bPlaceholderSet
-          ? false
-          : el.get("html") == "1"
-          ? true
-          : false;
-        el.empty();
-        var prop = el.getClassStoredValue("xProperty");
-
-        var aYes = new Element("a", {
-          href: "#",
-          class: (isSetToYes ? "active" : "") + " xValue-1",
-        }).set("html", "yes");
-        var aNo = new Element("a", {
-          href: "#",
-          class: (isSetToYes ? "" : "active") + " xValue-0",
-        }).set("html", "no");
-        el.grab(aYes).appendText(" / ").grab(aNo);
-        aNo.addEvent("click", this.eSup_onYesNoClick.bindWithEvent(this));
-        aYes.addEvent("click", this.eSup_onYesNoClick.bindWithEvent(this));
-        break;
-
-      case this.options.xBertaEditorClassImage:
-      case this.options.xBertaEditorClassICO:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        var currentFile = bPlaceholderSet ? "" : el.get("html");
-        el.empty();
-        var prop = el.getClassStoredValue("xProperty");
-
-        // construct uploader
-        var fileNameContainer = new Element("span", {
-          class: "name",
-        })
-          .set("html", currentFile)
-          .inject(el);
-        var aNew = new Element("a", {
-          href: "#",
-        })
-          .set("html", "choose file")
-          .inject(el);
-        var aDelete = new Element("a", {
-          href: "#",
-        })
-          .set("html", "delete")
-          .inject(el);
-        var fileInput = new Element("input", {
-          type: "file",
-        }).inject(el);
-
-        aNew.addEvent("click", function (e) {
-          e.preventDefault();
-          fileInput.click();
-        });
-
-        if (!currentFile) aDelete.setStyle("display", "none");
-        aDelete.addEvent(
-          "click",
-          this.eSup_onImageDeleteClick.bindWithEvent(this)
-        );
-
-        var params = [];
-        var paramNames = ["xMinWidth", "xMinHeight", "xMaxWidth", "xMaxHeight"],
-          urlParamNames = [
-            "min_width",
-            "min_height",
-            "max_width",
-            "max_height",
-          ],
-          p;
-        for (var i = 0; i < paramNames.length; i++) {
-          p = el.getClassStoredValue(paramNames[i]);
-          if (p) params.push(urlParamNames[i] + "=" + p);
-        }
-        if (this.query.site) {
-          params.push("site=" + this.query.site);
-        }
-
-        params.push("session_id=" + this.options.session_id);
-
-        var allowedExtensions = ["jpg", "jpeg", "gif", "png"];
-
-        if (editorClass == this.options.xBertaEditorClassICO) {
-          allowedExtensions = ["ico"];
-        }
-
-        var xhr = new XMLHttpRequest();
-
-        var updateComplete = function (data) {
-          fileNameContainer.empty();
-          fileNameContainer.set("html", data.value);
-          aDelete.setStyle("display", "block");
-          el.removeClass("xSaving").addClass("xEditing");
-        };
-
-        xhr.addEventListener(
-          "load",
-          function () {
-            var updateAction;
-            var data = JSON.decode(xhr.responseText);
-
-            if (xhr.status == 401) {
-              window.location.href = this.options.paths.engineRoot;
-            } else if (data.status > 0) {
-              var path = el.dataset.path;
-              var path_arr = [];
-
-              if (path) {
-                path_arr = path.split("/");
-
-                if (path_arr[1] === "settings") {
-                  updateAction = Actions.initUpdateSiteSettings;
-                }
-
-                if (path_arr[1] === "site_template_settings") {
-                  updateAction = Actions.initUpdateSiteTemplateSettings;
-                }
-
-                if (typeof updateAction === "function") {
-                  // @TODO Handle file upload in API endpoint,
-                  // currently we are updating only state here
-                  // which calls endpoint and saves value again
-                  redux_store.dispatch(
-                    updateAction(path, data.filename, updateComplete)
-                  );
-                } else {
-                  console.error(
-                    "BertaEditorBase.elementEdit_init xBertaEditorClassImage/xBertaEditorClassICO: Undefined updateAction!"
-                  );
-                }
-              } else {
-                updateComplete({
-                  value: data.filename,
-                });
-              }
-            } else {
-              alert(data.error);
-            }
-          }.bindWithEvent(this),
-          false
-        );
-
-        xhr.addEventListener(
-          "error",
-          function () {
-            el.removeClass("xSaving").addClass("xEditing");
-          },
-          false
-        );
-
-        fileInput.addEvent(
-          "change",
-          function () {
-            var inputFile = $$(fileInput);
-
-            if (inputFile.length) {
-              var formData = new FormData();
-              var fileName = inputFile[0].files[0].name;
-              var fileExtension = fileName.split(".").pop();
-
-              if (allowedExtensions.indexOf(fileExtension) === -1) {
-                alert(
-                  "Allowed file extensions: " + allowedExtensions.join(", ")
-                );
-                return false;
-              }
-
-              formData.append("Filedata", inputFile[0].files[0], fileName);
-              var url =
-                this.options.paths.engineRoot +
-                "upload.php?property=" +
-                prop +
-                "&" +
-                params.join("&");
-              el.removeClass("xEditing").addClass("xSaving");
-              xhr.open("POST", url, true);
-              xhr.send(formData);
-            }
-          }.bindWithEvent(this)
-        );
-
-        break;
-
       case this.options.xBertaEditorClassDragXY:
         el.store("onElementSave", onElementSave);
         el.addClass(editorClass.substr(1));
@@ -602,37 +360,6 @@ var BertaEditorBase = new Class({
         });
         break;
 
-      case this.options.xBertaEditorClassAction:
-        el.store("onActionComplete", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              var action = this.getClassStoredValue("xCommand");
-              var params = this.getClassStoredValue("xParams");
-              if (action) editor.elementEdit_action(el, action, params);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
-      case this.options.xBertaEditorClassReset:
-        el.store("onActionComplete", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            event.stop();
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              var action = this.getClassStoredValue("xCommand");
-              var params = this.getClassStoredValue("xParams");
-              if (action) editor.elementEdit_reset(el, action, params);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
       default:
         break;
     }
@@ -668,80 +395,6 @@ var BertaEditorBase = new Class({
     this.xGuideLineY.setStyle("left", y);
   },
 
-  eSup_onYesNoClick: function (event) {
-    event.stop();
-    var target = $(event.target);
-    var el = target.getParent();
-    var value = target.getClassStoredValue("xValue");
-
-    this.elementEdit_save(null, el, null, null, value, value);
-  },
-
-  eSup_onImageDeleteClick: function (event) {
-    event.stop();
-    var target = $(event.target);
-    var el = target.getParent();
-    var prop = el.getClassStoredValue("xProperty");
-    var data = {
-      property: prop,
-      params: "delete",
-      value: "",
-    };
-    var path = el.dataset.path;
-    var path_arr = [];
-    var updateAction;
-
-    el.removeClass("xEditing");
-    el.addClass("xSaving");
-
-    if (path) {
-      path_arr = path.split("/");
-
-      if (path_arr[1] === "settings") {
-        updateAction = Actions.initUpdateSiteSettings;
-      }
-
-      if (path_arr[1] === "site_template_settings") {
-        updateAction = Actions.initUpdateSiteTemplateSettings;
-      }
-
-      var onComplete = function () {
-        el.getElement("span.name").set("html", "");
-        target.setStyle("display", "none");
-        el.removeClass("xSaving");
-        el.addClass("xEditing");
-      };
-
-      if (typeof updateAction === "function") {
-        redux_store.dispatch(updateAction(path, "", onComplete));
-      } else {
-        console.error(
-          "BertaEditorBase.eSup_onImageDeleteClick: Undefined updateAction!"
-        );
-      }
-    } else {
-      new Request.JSON({
-        url: this.options.updateUrl,
-        data: JSON.stringify(data),
-        urlEncoded: false,
-        onComplete: function (resp, respRaw) {
-          if (resp.error_message) alert(resp.error_message);
-          else {
-            el.getElement("span.name").set("html", "");
-            target.setStyle("display", "none");
-          }
-          el.removeClass("xSaving");
-          el.addClass("xEditing");
-        },
-        /* Called when on JSON conversion error:
-         * Will use this as error handler for now, because server only returns non-JSON on exception */
-        onError: function (responseBody) {
-          console.error(responseBody);
-        },
-      }).post();
-    }
-  },
-
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   ///|  Saving edited element  |////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -795,7 +448,6 @@ var BertaEditorBase = new Class({
       var isCartAttributes = property == "cartAttributes";
       var noHTMLEntities = el.hasClass("xNoHTMLEntities");
       var isLink = el.hasClass("xLink");
-      var editorParams = el.getClassStoredValue("xParam");
       var entryInfo = this.getEntryInfoForElement(el);
       if (entryInfo.section == "") entryInfo.section = this.sectionName;
 
@@ -811,10 +463,7 @@ var BertaEditorBase = new Class({
       }
 
       // check if new content is not empty and revert it to default value, if specified
-      if (
-        !el.hasClass(this.options.xBertaEditorClassYesNo.substr(1)) &&
-        (!newContent || newContent.test("^([s\xA0]|&nbsp;)+$"))
-      ) {
+      if (!newContent || newContent.test("^([s\xA0]|&nbsp;)+$")) {
         var isRequired = el.getClassStoredValue("xRequired");
         newContent = newContentText = isRequired ? el.get("title") : "";
         el.set("html", newContentText);
@@ -909,16 +558,6 @@ var BertaEditorBase = new Class({
       el.removeClass("xEditing");
       el.addClass("xSaving");
 
-      // Get action for Gallery type, Autoplay, Full screen & Image size
-      var action = el.getClassStoredValue("xCommand");
-      if (action) {
-        if (action == "SET_BG_CAPTION_BACK_COLOR") {
-          editorParams = newContentText.hexToRgb(true).join(",");
-        } else {
-          editorParams = this.escapeForJSON(newContentText);
-        }
-      }
-
       var path = el.dataset.path;
       var path_arr = [];
       var prop;
@@ -973,36 +612,6 @@ var BertaEditorBase = new Class({
             "BertaEditorBase.elementEdit_save: Undefined updateAction!"
           );
         }
-      } else {
-        var data = {
-          site: entryInfo.site,
-          section: entryInfo.section,
-          entry: entryInfo.entryId,
-          property: property,
-          params: editorParams,
-          value: value,
-          action: action,
-          before: this.escapeForJSON(
-            el.get("old_content") ? el.get("old_content") : oldContent
-          ),
-          before_real: this.escapeForJSON(
-            el.get("title") ? el.get("title") : oldContent
-          ),
-          format_modifier: el.getClassStoredValue("xFormatModifier"),
-          /*use_css_units: useCSSUnits*/
-        };
-        // @@@:TODO: Remove this when migration to redux is done
-        new Request.JSON({
-          url: this.options.updateUrl,
-          data: JSON.stringify(data),
-          urlEncoded: false,
-          /* Called when on JSON conversion error:
-             Will use this as error handler for now, because server only returns non-JSON on exception */
-          onError: function (responseBody) {
-            console.error(responseBody);
-          },
-          onComplete: callback,
-        }).post();
       }
     }
   },
@@ -1020,63 +629,6 @@ var BertaEditorBase = new Class({
             this.makePlaceholder(el);
             break;
 
-          case el.hasClass(this.options.xBertaEditorClassYesNo.substr(1)):
-            el.getElements("a").removeClass("active");
-            el.getElement("a.xValue-" + resp.update).addClass("active");
-            break;
-
-          case el.hasClass(this.options.xBertaEditorClassSelectRC.substr(1)):
-          case el.hasClass(this.options.xBertaEditorClassFontSelect.substr(1)):
-            var editInitializer =
-                this.elementEdit_instances[
-                  this.elementEdit_instances.length - 1
-                ].editting,
-              oldValue;
-            if (editInitializer.hasClass("xEntrySlideNumberVisibility")) {
-              if (resp.update == "no") oldValue = "yes";
-              else oldValue = "no";
-
-              editInitializer
-                .getParent(".xGalleryContainer")
-                .removeClass("xSlideNumbersVisible-" + oldValue)
-                .addClass("xSlideNumbersVisible-" + resp.update);
-            }
-
-            // for the RC selects we check:
-            // 1) either the returned update equals the newly set content, which means that the saving was successful
-            if (resp.update == newContent) {
-              el.set("html", newContentText);
-
-              // 2) the returned update differs from the newly set content
-              //      => look for the returned "real" value in the select's options
-            } else {
-              var curOption;
-              newContentText = false;
-              for (var i = 0; i < this.options.selectOptions.length; i++) {
-                curOption = this.options.selectOptions[i].split("|");
-                if (curOption[0] == resp.real) {
-                  resp.update = curOption[1];
-                  break;
-                }
-              }
-              el.set("html", resp.update);
-            }
-
-            if (el.hasClass("xEntrySetGalType")) {
-              $$(".galleryTypeSettings").addClass("xHidden");
-            }
-
-            if (newContentText == "slideshow") {
-              el.getSiblings(".xEntrySlideshowSettings").removeClass("xHidden");
-            }
-            if (newContentText == "row") {
-              el.getSiblings(".xEntryRowSettings").removeClass("xHidden");
-            }
-            if (newContentText == "link") {
-              el.getSiblings(".xEntryLinkSettings").removeClass("xHidden");
-            }
-            break;
-
           case el.hasClass(this.options.xBertaEditorClassRC.substr(1)):
             // for simple RC textfields we additionally set the real_content property
             if (
@@ -1127,84 +679,6 @@ var BertaEditorBase = new Class({
     }.bind(this);
   },
 
-  elementEdit_action: function (el, action, params) {
-    el.addClass("xSaving");
-    var entryInfo = this.getEntryInfoForElement(el);
-    if (entryInfo.section == "") entryInfo.section = this.sectionName;
-    var data = {
-      section: entryInfo.section,
-      entry: entryInfo.entryId,
-      action: action,
-      property: null,
-      value: null,
-      params: params,
-    };
-
-    new Request.JSON({
-      url: this.options.updateUrl,
-      data: JSON.stringify(data),
-      urlEncoded: false,
-      onComplete: function (resp) {
-        if (!resp) {
-          alert(
-            "server produced an error while performing the requested action! something went sooooo wrong..."
-          );
-        } else if (resp && !resp.error_message) {
-        } else {
-          alert(resp.error_message);
-        }
-        if (el) {
-          el.removeClass.delay(500, el, "xSaving");
-          var onComplete = el.retrieve("onActionComplete");
-          if (onComplete) onComplete(el, action, params, resp);
-        }
-      }.bind(this),
-      /* Called when on JSON conversion error:
-       * Will use this as error handler for now, because server only returns non-JSON on exception */
-      onError: function (responseBody) {
-        console.error(responseBody);
-      },
-    }).post();
-  },
-
-  elementEdit_reset: function (el, action, params) {
-    if (
-      el.hasClass("xBgColorReset") &&
-      confirm("Berta asks:\n\nAre you sure you want to remove this color?")
-    ) {
-      el.addClass("xSaving");
-      var entryInfo = this.getEntryInfoForElement(el);
-      if (entryInfo.section == "") entryInfo.section = this.sectionName;
-
-      var path = el.dataset.path;
-
-      redux_store.dispatch(
-        Actions.resetSiteSection(
-          path,
-          function (resp) {
-            if (!resp) {
-              alert(
-                "server produced an error while performing the requested action! something went sooooo wrong..."
-              );
-            } else if (resp && !resp.error_message) {
-            } else {
-              alert(resp.error_message);
-            }
-            if (el) {
-              el.removeClass.delay(500, el, "xSaving");
-              elem = el.getSiblings(".xCommand-" + params);
-              if (elem.length == 0)
-                elem = el.getSiblings(".xProperty-" + params);
-              elem.each(function (item) {
-                item.set("title", "#ffffff").set("text", "none");
-              });
-            }
-          }.bind(this)
-        )
-      );
-    }
-  },
-
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   ///  tinyMCE  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -1293,10 +767,6 @@ var BertaEditorBase = new Class({
     return false;
   },
 
-  makeEmptyIfEmpty: function (el) {
-    if (el.inlineIsEmpty()) el.innerHTML = "";
-  },
-
   escapeForJSON: function (str) {
     // Replace &quot: some editors read value from element html instead of text
     return String(str).replace(/\&quot;/g, '"');
@@ -1334,15 +804,6 @@ var BertaEditorBase = new Class({
     return retObj;
   },
 
-  getSectionNameForElement: function (el) {
-    var retString;
-
-    retString = el.getClassStoredValue("xSection")
-      ? el.getClassStoredValue("xSection")
-      : null;
-
-    return retString;
-  },
 });
 
 BertaEditorBase.EDITABLE_START = "editable_start";

From 29f321b1a222950c39c7f4f1ca452817463b808b Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Tue, 22 Sep 2026 11:25:32 +0300
Subject: [PATCH 09/17] Remove legacy unused code

---
 engine/js/BertaEditor.js                      |  16 --
 engine/js/BertaEditorBase.js                  |   9 -
 engine/js/ng/shared/action-types.js           |  30 +--
 .../entries/section-entries.actions.js        |  24 --
 .../entries/section-entries.reducer.js        |  21 --
 .../sites/sections/site-sections.actions.js   |  36 ---
 .../sites/sections/site-sections.reducer.js   |  32 ---
 .../sections/tags/section-tags.actions.js     |  21 --
 .../sections/tags/section-tags.reducer.js     |  21 --
 .../sites/settings/site-settings.actions.js   |  21 --
 .../sites/settings/site-settings.reducer.js   |  21 --
 engine/js/ng/sites/sites.actions.js           | 239 ------------------
 engine/js/ng/sites/sites.reducer.js           |  72 ------
 .../site-template-settings.actions.js         |  23 +-
 .../site-template-settings.reducer.js         |  21 --
 gulpfile.js                                   |   2 -
 16 files changed, 2 insertions(+), 607 deletions(-)
 delete mode 100644 engine/js/ng/sites/sites.actions.js
 delete mode 100644 engine/js/ng/sites/sites.reducer.js

diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index 2214f6d32..c9aa9fd59 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -69,22 +69,6 @@ var BertaEditor = new Class({
       case "multipage":
         break;
 
-      case "settings":
-        this.editablesInit();
-
-        // Finish berta install button
-        $("xFinishInstall").addEvent("click", function (e) {
-          var path = e.target.data("data-path");
-
-          redux_store.dispatch(
-            Actions.initUpdateSiteSettings(path, 1, function () {
-              window.location.reload();
-            })
-          );
-        });
-
-        break;
-
       case "entries":
       default:
         this.container = document.getElementById("contentContainer");
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index 881e573f5..d86a0f58f 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -574,15 +574,6 @@ var BertaEditorBase = new Class({
         var new_callback = callback;
         path_arr = path.split("/");
 
-        if (path_arr[0] === "site") {
-          prop = path_arr[2];
-          if (prop === "name") {
-            updateAction = Actions.renameSite;
-          } else {
-            updateAction = Actions.initUpdateSite;
-          }
-        }
-
         if (path_arr[1] === "settings") {
           updateAction = Actions.initUpdateSiteSettings;
         }
diff --git a/engine/js/ng/shared/action-types.js b/engine/js/ng/shared/action-types.js
index e2a959504..19b293948 100644
--- a/engine/js/ng/shared/action-types.js
+++ b/engine/js/ng/shared/action-types.js
@@ -5,41 +5,21 @@
     GET_STATE: 'GET_STATE',
     SET_STATE: 'SET_STATE',
 
-    INIT_CREATE_SITE: 'INIT_CREATE_SITE',
-    CREATE_SITE: 'CREATE_SITE',
-    INIT_UPDATE_SITE: 'INIT_UPDATE_SITE',
-    UPDATE_SITE: 'UPDATE_SITE',
-    INIT_ORDER_SITES: 'INIT_ORDER_SITES',
-    ORDER_SITES: 'ORDER_SITES',
-    INIT_DELETE_SITE: 'INIT_DELETE_SITE',
-    DELETE_SITE: 'DELETE_SITE',
+    CREATE_SITE_SECTION: 'CREATE_SITE_SECTION',
 
-    CREATE_SITE_SETTINGS: 'CREATE_SITE_SETTINGS',
     INIT_UPDATE_SITE_SETTINGS: 'INIT_UPDATE_SITE_SETTINGS',
     UPDATE_SITE_SETTINGS: 'UPDATE_SITE_SETTINGS',
-    RENAME_SITE_SETTINGS_SITENAME: 'RENAME_SITE_SETTINGS_SITENAME',
-    INIT_DELETE_SITE_SETTINGS: 'INIT_DELETE_SITE_SETTINGS',
-    DELETE_SITE_SETTINGS: 'DELETE_SITE_SETTINGS',
 
-    CREATE_SITE_TEMPLATE_SETTINGS: 'CREATE_SITE_TEMPLATE_SETTINGS',
     INIT_UPDATE_SITE_TEMPLATE_SETTINGS: 'INIT_UPDATE_SITE_TEMPLATE_SETTINGS',
     UPDATE_SITE_TEMPLATE_SETTINGS: 'UPDATE_SITE_TEMPLATE_SETTINGS',
-    RENAME_SITE_TEMPLATE_SETTINGS_SITENAME: 'RENAME_SITE_TEMPLATE_SETTINGS_SITENAME',
-    INIT_DELETE_SITE_TEMPLATE_SETTINGS: 'INIT_DELETE_SITE_TEMPLATE_SETTINGS',
-    DELETE_SITE_TEMPLATE_SETTINGS: 'DELETE_SITE_TEMPLATE_SETTINGS',
 
     INIT_CREATE_SITE_SECTION: 'INIT_CREATE_SITE_SECTION',
-    CREATE_SITE_SECTION: 'CREATE_SITE_SECTION',
     INIT_UPDATE_SITE_SECTION: 'INIT_UPDATE_SITE_SECTION',
     UPDATE_SITE_SECTION: 'UPDATE_SITE_SECTION',
-    RENAME_SITE_SECTIONS_SITENAME: 'RENAME_SITE_SECTIONS_SITENAME',
-    RESET_SITE_SECTION: 'RESET_SITE_SECTION',
     INIT_ORDER_SITE_SECTIONS: 'INIT_ORDER_SITE_SECTIONS',
     ORDER_SITE_SECTIONS: 'ORDER_SITE_SECTIONS',
     INIT_DELETE_SITE_SECTION: 'INIT_DELETE_SITE_SECTION',
     DELETE_SITE_SECTION: 'DELETE_SITE_SECTION',
-    INIT_DELETE_SITE_SECTIONS: 'INIT_DELETE_SITE_SECTIONS',
-    DELETE_SITE_SECTIONS: 'DELETE_SITE_SECTIONS',
 
     INIT_ORDER_SITE_SECTION_BACKGROUNDS: 'INIT_ORDER_SITE_SECTION_BACKGROUNDS',
     ORDER_SITE_SECTION_BACKGROUNDS: 'ORDER_SITE_SECTION_BACKGROUNDS',
@@ -47,25 +27,19 @@
     DELETE_SITE_SECTION_BACKGROUND: 'DELETE_SITE_SECTION_BACKGROUND',
 
     ADD_SECTION_TAGS: 'ADD_SECTION_TAGS',
-    ADD_SITE_SECTIONS_TAGS: 'ADD_SITE_SECTIONS_TAGS',
     INIT_ORDER_SECTION_TAGS: 'INIT_ORDER_SECTION_TAGS',
     ORDER_SECTION_TAGS: 'ORDER_SECTION_TAGS',
     INIT_UPDATE_SECTION_TAGS: 'INIT_UPDATE_SECTION_TAGS',
     UPDATE_SECTION_TAGS: 'UPDATE_SECTION_TAGS',
     RENAME_SECTION_TAGS: 'RENAME_SECTION_TAGS',
-    RENAME_SECTION_TAGS_SITENAME: 'RENAME_SECTION_TAGS_SITENAME',
     DELETE_SECTION_TAGS: 'DELETE_SECTION_TAGS',
-    INIT_DELETE_SITE_SECTIONS_TAGS: 'INIT_DELETE_SITE_SECTIONS_TAGS',
-    DELETE_SITE_SECTIONS_TAGS: 'DELETE_SITE_SECTIONS_TAGS',
 
-    ADD_SITE_SECTIONS_ENTRIES: 'ADD_SITE_SECTIONS_ENTRIES',
     ADD_SECTION_ENTRIES: 'ADD_SECTION_ENTRIES',
     INIT_CREATE_SECTION_ENTRY: 'INIT_CREATE_SECTION_ENTRY',
     INIT_UPDATE_SECTION_ENTRY: 'INIT_UPDATE_SECTION_ENTRY',
     UPDATE_SECTION_ENTRY: 'UPDATE_SECTION_ENTRY',
     INIT_UPDATE_SECTION_ENTRIES: 'INIT_UPDATE_SECTION_ENTRIES',
     INIT_MOVE_ENTRY_TO_SECTION: 'INIT_MOVE_ENTRY_TO_SECTION',
-    RENAME_SECTION_ENTRIES_SITENAME: 'RENAME_SECTION_ENTRIES_SITENAME',
     RENAME_SECTION_ENTRIES: 'RENAME_SECTION_ENTRIES',
     INIT_ORDER_SECTION_ENTRIES: 'INIT_ORDER_SECTION_ENTRIES',
     ORDER_SECTION_ENTRIES: 'ORDER_SECTION_ENTRIES',
@@ -75,8 +49,6 @@
     DELETE_ENTRY_GALLERY_IMAGE: 'DELETE_ENTRY_GALLERY_IMAGE',
     INIT_DELETE_SECTION_ENTRY: 'INIT_DELETE_SECTION_ENTRY',
     DELETE_SECTION_ENTRY: 'DELETE_SECTION_ENTRY',
-    INIT_DELETE_SITE_SECTIONS_ENTRIES: 'INIT_DELETE_SITE_SECTIONS_ENTRIES',
-    DELETE_SITE_SECTIONS_ENTRIES: 'DELETE_SITE_SECTIONS_ENTRIES',
     INIT_DELETE_SECTION_ENTRIES: 'INIT_DELETE_SECTION_ENTRIES',
     DELETE_SECTION_ENTRIES: 'DELETE_SECTION_ENTRIES'
   };
diff --git a/engine/js/ng/sites/sections/entries/section-entries.actions.js b/engine/js/ng/sites/sections/entries/section-entries.actions.js
index 8985fd85f..e4ae5cf81 100644
--- a/engine/js/ng/sites/sections/entries/section-entries.actions.js
+++ b/engine/js/ng/sites/sections/entries/section-entries.actions.js
@@ -25,14 +25,6 @@
     },
 
 
-    addSiteSectionsEntries: function (data) {
-      return {
-        type: ActionTypes.ADD_SITE_SECTIONS_ENTRIES,
-        data: data
-      };
-    },
-
-
     addSectionEntries: function (data) {
       return {
         type: ActionTypes.ADD_SECTION_ENTRIES,
@@ -89,14 +81,6 @@
     },
 
 
-    renameSectionEntriesSitename: function (data) {
-      return {
-        type: ActionTypes.RENAME_SECTION_ENTRIES_SITENAME,
-        data: data
-      };
-    },
-
-
     renameSectionEntries: function (data) {
       return {
         type: ActionTypes.RENAME_SECTION_ENTRIES,
@@ -197,14 +181,6 @@
     },
 
 
-    deleteSiteSectionsEntries: function (data) {
-      return {
-        type: ActionTypes.DELETE_SITE_SECTIONS_ENTRIES,
-        data: data
-      };
-    },
-
-
     deleteSectionEntries: function (data) {
       return {
         type: ActionTypes.DELETE_SECTION_ENTRIES,
diff --git a/engine/js/ng/sites/sections/entries/section-entries.reducer.js b/engine/js/ng/sites/sections/entries/section-entries.reducer.js
index efc5a6d98..324366611 100644
--- a/engine/js/ng/sites/sections/entries/section-entries.reducer.js
+++ b/engine/js/ng/sites/sections/entries/section-entries.reducer.js
@@ -17,10 +17,6 @@
           return Immutable.fromJS(action.state.sectionEntries);
 
 
-        case ActionTypes.ADD_SITE_SECTIONS_ENTRIES:
-          return state.set(action.data.site_name, action.data.entries);
-
-
         case ActionTypes.ADD_SECTION_ENTRIES:
           return state.map(function (site, site_name) {
             if (site_name === action.data.site_name) {
@@ -50,17 +46,6 @@
           );
 
 
-        case ActionTypes.RENAME_SECTION_ENTRIES_SITENAME:
-          var site_old_name = action.data.site.get('name');
-
-          return state.mapKeys(function (site_name) {
-            if (site_name === site_old_name) {
-              return action.data.site_name;
-            }
-            return site_name;
-          });
-
-
         case ActionTypes.RENAME_SECTION_ENTRIES:
           site_name = action.data.site_name === '0' ? '' : action.data.site_name;
 
@@ -115,12 +100,6 @@
           });
 
 
-        case ActionTypes.DELETE_SITE_SECTIONS_ENTRIES:
-          return state.filter(function (entries, site_name) {
-            return site_name !== action.data.site_name;
-          });
-
-
         case ActionTypes.DELETE_SECTION_ENTRIES:
           site_name = action.data.site_name === '0' ? '' : action.data.site_name;
 
diff --git a/engine/js/ng/sites/sections/site-sections.actions.js b/engine/js/ng/sites/sections/site-sections.actions.js
index 1a1d24ca7..7d4c43470 100644
--- a/engine/js/ng/sites/sections/site-sections.actions.js
+++ b/engine/js/ng/sites/sections/site-sections.actions.js
@@ -121,34 +121,6 @@
     },
 
 
-    renameSiteSectionsSitename: function (data) {
-      return {
-        type: ActionTypes.RENAME_SITE_SECTIONS_SITENAME,
-        data: data
-      };
-    },
-
-
-    resetSiteSection: function (path, onComplete) {
-      return function (dispatch) {
-        dispatch({
-          type: ActionTypes.RESET_SITE_SECTION,
-          path: path
-        });
-
-        sync(window.Berta.urls.siteSectionsReset, {
-          path: path
-        })
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            }
-            onComplete(response);
-          });
-      };
-    },
-
-
     initOrderSiteSections: function (site, sections, onComplete) {
       return function (dispatch) {
         dispatch({
@@ -228,14 +200,6 @@
     },
 
 
-    deleteSiteSections: function (data) {
-      return {
-        type: ActionTypes.DELETE_SITE_SECTIONS,
-        data: data
-      };
-    },
-
-
     initOrderSiteSectionBackgrounds: function (site, section, files, onComplete) {
       return function (dispatch) {
         dispatch({
diff --git a/engine/js/ng/sites/sections/site-sections.reducer.js b/engine/js/ng/sites/sections/site-sections.reducer.js
index 5de8865f9..de723c5f2 100644
--- a/engine/js/ng/sites/sections/site-sections.reducer.js
+++ b/engine/js/ng/sites/sections/site-sections.reducer.js
@@ -40,32 +40,6 @@
           });
 
 
-        case ActionTypes.RENAME_SITE_SECTIONS_SITENAME:
-          var old_name = action.data.site.get('name');
-          value = action.data.site_name;
-
-          return state.map(function (section) {
-            if (section.get('site_name') === old_name) {
-              return section.set('site_name', value);
-            }
-            return section;
-          });
-
-
-        case ActionTypes.RESET_SITE_SECTION:
-          path = action.path.split('/');
-          site_name = path[0] === '0' ? '' : path[0];
-          order = parseInt(path[2], 10);
-          prop = path.slice(3);
-
-          return state.map(function (section) {
-            if (section.get('site_name') === site_name && section.get('order') === order) {
-              return section.deleteIn(prop);
-            }
-            return section;
-          });
-
-
         case ActionTypes.ORDER_SITE_SECTIONS:
           return state.map(function (section) {
             if (section.get('site_name') === action.resp.site) {
@@ -99,12 +73,6 @@
           });
 
 
-        case ActionTypes.DELETE_SITE_SECTIONS:
-          return state.filter(function (section) {
-            return section.get('site_name') !== action.data.site_name;
-          });
-
-
         case ActionTypes.ORDER_SITE_SECTION_BACKGROUNDS:
           return state.map(function (section) {
             if (section.get('site_name') === action.resp.site && section.get('name') === action.resp.section) {
diff --git a/engine/js/ng/sites/sections/tags/section-tags.actions.js b/engine/js/ng/sites/sections/tags/section-tags.actions.js
index ccf807407..58c3cc1bb 100644
--- a/engine/js/ng/sites/sections/tags/section-tags.actions.js
+++ b/engine/js/ng/sites/sections/tags/section-tags.actions.js
@@ -5,13 +5,6 @@
 
   Object.assign(window.Actions, {
 
-    addSiteSectionsTags: function (data) {
-      return {
-        type: ActionTypes.ADD_SITE_SECTIONS_TAGS,
-        data: data
-      };
-    },
-
     addSectionTags: function (data) {
       return {
         type: ActionTypes.ADD_SECTION_TAGS,
@@ -63,13 +56,6 @@
       };
     },
 
-    renameSectionTagsSitename: function (data) {
-      return {
-        type: ActionTypes.RENAME_SECTION_TAGS_SITENAME,
-        data: data
-      };
-    },
-
     deleteSectionTags: function (data) {
       return {
         type: ActionTypes.DELETE_SECTION_TAGS,
@@ -77,13 +63,6 @@
       };
     },
 
-    deleteSiteSectionsTags: function (data) {
-      return {
-        type: ActionTypes.DELETE_SITE_SECTIONS_TAGS,
-        data: data
-      };
-    }
-
   });
 
 })(window, window.ActionTypes, window.sync);
diff --git a/engine/js/ng/sites/sections/tags/section-tags.reducer.js b/engine/js/ng/sites/sections/tags/section-tags.reducer.js
index d89aef1ce..b475b2981 100644
--- a/engine/js/ng/sites/sections/tags/section-tags.reducer.js
+++ b/engine/js/ng/sites/sections/tags/section-tags.reducer.js
@@ -16,10 +16,6 @@
           return Immutable.fromJS(action.state.section_tags);
 
 
-        case ActionTypes.ADD_SITE_SECTIONS_TAGS:
-          return state.set(action.data.site_name, action.data.tags);
-
-
         case ActionTypes.ADD_SECTION_TAGS:
           return state.map(function (site, site_name) {
             if (action.data.site_name === site_name) {
@@ -103,17 +99,6 @@
           });
 
 
-        case ActionTypes.RENAME_SECTION_TAGS_SITENAME:
-          var site_old_name = action.data.site.get('name');
-
-          return state.mapKeys(function (site_name) {
-            if (site_name === site_old_name) {
-              return action.data.site_name;
-            }
-            return site_name;
-          });
-
-
         case ActionTypes.DELETE_SECTION_TAGS:
           site_name = action.data.site_name === '0' ? '' : action.data.site_name;
 
@@ -129,12 +114,6 @@
           });
 
 
-        case ActionTypes.DELETE_SITE_SECTIONS_TAGS:
-          return state.filter(function (tags, site_name) {
-            return site_name !== action.data.site_name;
-          });
-
-
         default:
           return state;
       }
diff --git a/engine/js/ng/sites/settings/site-settings.actions.js b/engine/js/ng/sites/settings/site-settings.actions.js
index f1929c14b..eae4e6a87 100644
--- a/engine/js/ng/sites/settings/site-settings.actions.js
+++ b/engine/js/ng/sites/settings/site-settings.actions.js
@@ -5,14 +5,6 @@
 
   Object.assign(window.Actions, {
 
-    createSiteSettings: function (site_name, data) {
-      return {
-        type: ActionTypes.CREATE_SITE_SETTINGS,
-        site_name: site_name,
-        data: data
-      };
-    },
-
     initUpdateSiteSettings: function(path, value, onComplete) {
       return function (dispatch) {
         dispatch({ type: ActionTypes.INIT_UPDATE_SITE_SETTINGS });
@@ -36,19 +28,6 @@
       };
     },
 
-    renameSiteSettingsSitename: function (data) {
-      return {
-        type: ActionTypes.RENAME_SITE_SETTINGS_SITENAME,
-        data: data
-      };
-    },
-
-    deleteSiteSettings: function (data) {
-      return {
-        type: ActionTypes.DELETE_SITE_SETTINGS,
-        data: data
-      };
-    },
   });
 
 })(window, window.ActionTypes, window.sync);
diff --git a/engine/js/ng/sites/settings/site-settings.reducer.js b/engine/js/ng/sites/settings/site-settings.reducer.js
index b42bc1ada..48d60e8ae 100644
--- a/engine/js/ng/sites/settings/site-settings.reducer.js
+++ b/engine/js/ng/sites/settings/site-settings.reducer.js
@@ -15,10 +15,6 @@
           return Immutable.fromJS(action.state.site_settings);
 
 
-        case ActionTypes.CREATE_SITE_SETTINGS:
-          return state.setIn([action.site_name], Immutable.fromJS(action.data));
-
-
         case ActionTypes.UPDATE_SITE_SETTINGS:
           var path = action.resp.path.split('/').slice(2);
           var value = action.resp.value;
@@ -29,23 +25,6 @@
           );
 
 
-        case ActionTypes.RENAME_SITE_SETTINGS_SITENAME:
-          var section_old_name = action.data.site.get('name');
-
-          return state.mapKeys(function (k) {
-            if (k === section_old_name) {
-              return action.data.site_name;
-            }
-            return k;
-          });
-
-
-        case ActionTypes.DELETE_SITE_SETTINGS:
-          return state.filter(function (settings, site_name) {
-            return site_name !== action.data.site_name;
-          });
-
-
         default:
           return state;
       }
diff --git a/engine/js/ng/sites/sites.actions.js b/engine/js/ng/sites/sites.actions.js
deleted file mode 100644
index 881d257f9..000000000
--- a/engine/js/ng/sites/sites.actions.js
+++ /dev/null
@@ -1,239 +0,0 @@
-(function (window, ActionTypes, sync) {
-  'use strict';
-
-  var Actions = window.Actions = window.Actions || {};
-
-  Object.assign(window.Actions, {
-
-    initCreateSite: function (site, onComplete) {
-      return function (dispatch) {
-
-        dispatch({
-          type: ActionTypes.INIT_CREATE_SITE
-        });
-
-        sync(window.Berta.urls.sites, {
-          site: site
-        }, 'POST')
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            } else {
-              dispatch(Actions.createSite(response.site));
-
-              if (response.settings) {
-                dispatch(Actions.createSiteSettings(response.site.name, response.settings));
-              }
-
-              if (response.sections && response.sections.length) {
-                for (var i = 0; i < response.sections.length; i++) {
-                  dispatch(Actions.createSiteSection(response.sections[i]));
-                }
-              }
-
-              if (response.entries && response.entries.length) {
-                dispatch(Actions.addSiteSectionsEntries({
-                  site_name: response.site.name,
-                  entries: response.entries
-                }));
-              }
-
-              if (response.tags && response.tags.section) {
-                dispatch(Actions.addSiteSectionsTags({
-                  site_name: response.site.name,
-                  tags: response.tags
-                }));
-              }
-
-              if (response.siteTemplateSettings) {
-                dispatch(Actions.createSiteTemplateSettings(response.site.name, response.siteTemplateSettings));
-              }
-            }
-            onComplete(response.site);
-          });
-      };
-    },
-
-    createSite: function (data) {
-      return {
-        type: ActionTypes.CREATE_SITE,
-        data: data
-      };
-    },
-
-    initUpdateSite: function (path, value, onComplete) {
-      return function (dispatch) {
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SITE
-        });
-
-        sync(window.Berta.urls.sites, {
-          path: path,
-          value: value
-        })
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            } else {
-              dispatch(Actions.updateSite(response));
-            }
-            onComplete(response);
-          });
-      };
-    },
-
-    updateSite: function (resp) {
-      return {
-        type: ActionTypes.UPDATE_SITE,
-        resp: resp
-      };
-    },
-
-    renameSite: function (path, value, onComplete) {
-      return function (dispatch, getStore) {
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SITE
-        });
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SITE_SECTION
-        });
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SITE_SETTINGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SITE_TEMPLATE_SETTINGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SECTION_TAGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_UPDATE_SECTION_ENTRIES
-        });
-
-        sync(window.Berta.urls.sites, {
-          path: path,
-          value: value
-        })
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            } else {
-              path = path.split('/');
-              var order = parseInt(path[1], 10);
-              var site = getStore().sites.find(function (site) {
-                return site.get('order') === order;
-              });
-
-              dispatch(Actions.updateSite(response));
-              dispatch(Actions.renameSiteSectionsSitename({
-                site: site,
-                site_name: response.value
-              }));
-              dispatch(Actions.renameSiteSettingsSitename({
-                site: site,
-                site_name: response.value
-              }));
-              dispatch(Actions.renameSiteTemplateSettingsSitename({
-                site: site,
-                site_name: response.value
-              }));
-              dispatch(Actions.renameSectionTagsSitename({
-                site: site,
-                site_name: response.value
-              }));
-              dispatch(Actions.renameSectionEntriesSitename({
-                site: site,
-                site_name: response.value
-              }));
-            }
-            onComplete(response);
-          });
-      };
-    },
-
-    initOrderSites: function (sites, onComplete) {
-      return function (dispatch) {
-        dispatch({
-          type: ActionTypes.INIT_ORDER_SITES
-        });
-
-        sync(window.Berta.urls.sites, sites, 'PUT')
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            } else {
-              dispatch(Actions.orderSites(sites));
-            }
-            onComplete(response);
-          });
-      };
-    },
-
-    orderSites: function (resp) {
-      return {
-        type: ActionTypes.ORDER_SITES,
-        resp: resp
-      };
-    },
-
-    initdeleteSite: function (site, onComplete) {
-      return function (dispatch) {
-
-        // @TODO also delete related: entries
-
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE
-        });
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE_SECTIONS
-        });
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE_SETTINGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE_TEMPLATE_SETTINGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE_SECTIONS_TAGS
-        });
-        dispatch({
-          type: ActionTypes.INIT_DELETE_SITE_SECTIONS_ENTRIES
-        });
-
-        sync(window.Berta.urls.sites, {
-          site: site
-        }, 'DELETE')
-          .then(function (response) {
-            if (response.error_message) {
-              // @TODO dispatch error message
-            } else {
-              dispatch(Actions.deleteSite(response));
-              dispatch(Actions.deleteSiteSections({
-                site_name: response.name
-              }));
-              dispatch(Actions.deleteSiteSettings({
-                site_name: response.name
-              }));
-              dispatch(Actions.deleteSiteTemplateSettings({
-                site_name: response.name
-              }));
-              dispatch(Actions.deleteSiteSectionsTags({
-                site_name: response.name
-              }));
-              dispatch(Actions.deleteSiteSectionsEntries({
-                site_name: response.name
-              }));
-            }
-            onComplete(response);
-          });
-      };
-    },
-
-    deleteSite: function (resp) {
-      return {
-        type: ActionTypes.DELETE_SITE,
-        resp: resp
-      };
-    }
-  });
-})(window, window.ActionTypes, window.sync);
diff --git a/engine/js/ng/sites/sites.reducer.js b/engine/js/ng/sites/sites.reducer.js
deleted file mode 100644
index 8cd3e5bad..000000000
--- a/engine/js/ng/sites/sites.reducer.js
+++ /dev/null
@@ -1,72 +0,0 @@
-(function(window, Immutable, ActionTypes) {
-  'use strict';
-
-  window.reducers = window.reducers || {};
-
-  Object.assign(window.reducers, {
-    sites: function(state, action) {
-      var path, value, order;
-
-      if (state === undefined) {
-        state = Immutable.Map();
-      }
-
-      switch (action.type) {
-
-        case ActionTypes.SET_STATE:
-          return Immutable.fromJS(action.state.sites);
-
-
-        case ActionTypes.CREATE_SITE:
-          return state.set(state.size, Immutable.fromJS(action.data));
-
-
-        case ActionTypes.UPDATE_SITE:
-          path = action.resp.path.split('/');
-          order = parseInt(path[1], 10);
-          value = action.resp.value;
-          var prop = path.slice(2);  // example "title" or "@attributes/published"
-
-          return state.map(function (site) {
-            if (site.get('order') === order && site.getIn(prop) !== value) {
-              return site.setIn(prop, value);
-            }
-            return site;
-          });
-
-
-        case ActionTypes.ORDER_SITES:
-          return state.map(function (site) {
-            var name = site.get('name');
-            if (name === '') {
-              name = '0';
-            }
-            var new_order = action.resp.indexOf(name);
-
-            if (site.get('order') !== new_order) {
-              return site.set('order', new_order);
-            }
-            return site;
-          });
-
-
-        case ActionTypes.DELETE_SITE:
-          // Filter out deleted site
-          return state.filter(function (site) {
-            return site.get('name') !== action.resp.name;
-
-          // Update order
-          }).map(function (site, order) {
-            if (site.get('order') !== order) {
-              return site.set('order', order);
-            }
-            return site;
-          });
-
-
-        default:
-          return state;
-      }
-    }
-  });
-})(window, window.Immutable, window.ActionTypes);
diff --git a/engine/js/ng/sites/template-settings/site-template-settings.actions.js b/engine/js/ng/sites/template-settings/site-template-settings.actions.js
index e80791d65..7c93a99b6 100644
--- a/engine/js/ng/sites/template-settings/site-template-settings.actions.js
+++ b/engine/js/ng/sites/template-settings/site-template-settings.actions.js
@@ -5,14 +5,6 @@
 
   Object.assign(window.Actions, {
 
-    createSiteTemplateSettings: function(site_name, data) {
-      return {
-        type: ActionTypes.CREATE_SITE_TEMPLATE_SETTINGS,
-        site_name: site_name,
-        data: data
-      };
-    },
-
     initUpdateSiteTemplateSettings: function(path, value, onComplete) {
       return function (dispatch) {
         dispatch({ type: ActionTypes.INIT_UPDATE_SITE_TEMPLATE_SETTINGS });
@@ -34,21 +26,8 @@
         type: ActionTypes.UPDATE_SITE_TEMPLATE_SETTINGS,
         resp: resp
       };
-    },
-
-    renameSiteTemplateSettingsSitename: function (data) {
-      return {
-        type: ActionTypes.RENAME_SITE_TEMPLATE_SETTINGS_SITENAME,
-        data: data
-      };
-    },
-
-    deleteSiteTemplateSettings: function (data) {
-      return {
-        type: ActionTypes.DELETE_SITE_TEMPLATE_SETTINGS,
-        data: data
-      };
     }
+
   });
 
 })(window, window.ActionTypes, window.sync);
diff --git a/engine/js/ng/sites/template-settings/site-template-settings.reducer.js b/engine/js/ng/sites/template-settings/site-template-settings.reducer.js
index 57c7efad2..7af9025a8 100644
--- a/engine/js/ng/sites/template-settings/site-template-settings.reducer.js
+++ b/engine/js/ng/sites/template-settings/site-template-settings.reducer.js
@@ -15,10 +15,6 @@
           return Immutable.fromJS(action.state.site_template_settings);
 
 
-        case ActionTypes.CREATE_SITE_TEMPLATE_SETTINGS:
-          return state.setIn([action.site_name], Immutable.fromJS(action.data));
-
-
         case ActionTypes.UPDATE_SITE_TEMPLATE_SETTINGS:
           var path = action.resp.path.split('/').slice(2);
           var value = action.resp.value;
@@ -29,23 +25,6 @@
           );
 
 
-        case ActionTypes.RENAME_SITE_TEMPLATE_SETTINGS_SITENAME:
-          var section_old_name = action.data.site.get('name');
-
-          return state.mapKeys(function (k) {
-            if (k === section_old_name) {
-              return action.data.site_name;
-            }
-            return k;
-          });
-
-
-        case ActionTypes.DELETE_SITE_TEMPLATE_SETTINGS:
-          return state.filter(function (site_template_settings, site_name) {
-            return site_name !== action.data.site_name;
-          });
-
-
         default:
           return state;
       }
diff --git a/gulpfile.js b/gulpfile.js
index cd87ea835..5c113e644 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -101,8 +101,6 @@ var backendNgJsFiles = [
   "engine/js/ng/shared/utils.js",
   "engine/js/ng/shared/action-types.js",
   "engine/js/ng/state.actions.js",
-  "engine/js/ng/sites/sites.actions.js",
-  "engine/js/ng/sites/sites.reducer.js",
   "engine/js/ng/sites/settings/site-settings.actions.js",
   "engine/js/ng/sites/settings/site-settings.reducer.js",
   "engine/js/ng/sites/template-settings/site-template-settings.actions.js",

From f66454ca396ef6664475a673af5c9f5106b3144a Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Wed, 23 Sep 2026 12:22:32 +0300
Subject: [PATCH 10/17] Move TinyMCE editor to Angular

---
 .../AdditionalFooterTextRenderService.php     |   4 +-
 .../Sections/AdditionalTextRenderService.php  |   3 +-
 .../Entries/SectionEntryRenderService.php     |   1 +
 .../Sections/Entries/_entryContents.twig      |   2 +-
 .../Sites/Sections/additionalFooterText.twig  |   6 +-
 .../app/Sites/Sections/additionalText.twig    |   6 +-
 .../AdditionalFooterTextRenderServiceTest.php |  30 +++
 editor/package-lock.json                      |  65 +++--
 editor/package.json                           |   1 +
 editor/src/app/app.module.ts                  |   2 +
 ...inline-edit-rich-text-overlay.component.ts | 188 +++++++++++++
 .../inline-edit/inline-edit.service.ts        | 248 +++++++++++++++++-
 editor/src/app/render/twig-templates.ts       |  14 +-
 .../additional-footer-text-render.service.ts  |   3 +-
 .../additional-text-render.service.ts         |   3 +-
 .../entries/section-entry-render.service.ts   |   1 +
 editor/src/styles/styles.scss                 |  22 ++
 editor/src/types/tinymce.d.ts                 |   9 +
 engine/css/editor.css.php                     |  20 ++
 19 files changed, 576 insertions(+), 52 deletions(-)
 create mode 100644 _api_app/tests/Feature/AdditionalFooterTextRenderServiceTest.php
 create mode 100644 editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
 create mode 100644 editor/src/types/tinymce.d.ts

diff --git a/_api_app/app/Sites/Sections/AdditionalFooterTextRenderService.php b/_api_app/app/Sites/Sections/AdditionalFooterTextRenderService.php
index e2b44f2b1..222858ce9 100644
--- a/_api_app/app/Sites/Sections/AdditionalFooterTextRenderService.php
+++ b/_api_app/app/Sites/Sections/AdditionalFooterTextRenderService.php
@@ -10,7 +10,7 @@ class AdditionalFooterTextRenderService
 
     private $USED_IN_TEMPLATES = ['messy', 'default'];
 
-    private $EDITABLE_CLASSES = ['xEditableMCESimple', 'xProperty-additionalFooterText', 'xCaption-additional-footer-text'];
+    private $EDITABLE_CLASSES = ['xNgEditableRTESimple', 'xProperty-additionalFooterText', 'xCaption-additional-footer-text'];
 
     public function __construct($socialMediaLinksRS)
     {
@@ -25,6 +25,7 @@ private function getAttributes($showAdditionalFooterText, $siteSlug, $isEditMode
         if ($isEditMode && $showAdditionalFooterText) {
             $classes = array_merge($classes, $this->EDITABLE_CLASSES);
             $attributes['data-path'] = "{$siteSlug}/settings/siteTexts/additionalFooterText";
+            $attributes['data-empty-caption'] = 'additional footer text';
         }
 
         $attributes['class'] = implode(' ', $classes);
@@ -52,6 +53,7 @@ private function getViewData($siteSlug, $siteSettings, $user, $isEditMode)
         return [
             'content' => $content,
             'attributes' => $attributes,
+            'isEditMode' => $isEditMode,
         ];
     }
 
diff --git a/_api_app/app/Sites/Sections/AdditionalTextRenderService.php b/_api_app/app/Sites/Sections/AdditionalTextRenderService.php
index 69f500376..5581dd4c4 100644
--- a/_api_app/app/Sites/Sections/AdditionalTextRenderService.php
+++ b/_api_app/app/Sites/Sections/AdditionalTextRenderService.php
@@ -10,7 +10,7 @@ class AdditionalTextRenderService
 
     private $DRAGGABLE_CLASSES = ['xEditableDragXY', 'xProperty-additionalTextXY'];
 
-    private $EDITABLE_CLASSES = ['xEditableMCESimple', 'xProperty-additionalText', 'xCaption-additional-text'];
+    private $EDITABLE_CLASSES = ['xNgEditableRTESimple', 'xProperty-additionalText', 'xCaption-additional-text'];
 
     public function __construct($socialMediaLinksRS)
     {
@@ -83,6 +83,7 @@ private function getContentAttributes($siteSlug, $isEditMode)
         if ($isEditMode) {
             $attributes['class'] = implode(' ', $this->EDITABLE_CLASSES);
             $attributes['data-path'] = "{$siteSlug}/settings/siteTexts/additionalText";
+            $attributes['data-empty-caption'] = 'additional text';
         }
 
         return Helpers::arrayToHtmlAttributes($attributes);
diff --git a/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php b/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
index 65e6f4cea..d8829fdf9 100644
--- a/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
+++ b/_api_app/app/Sites/Sections/Entries/SectionEntryRenderService.php
@@ -156,6 +156,7 @@ public function getViewData(
             'attributes' => [
                 'description' => Helpers::arrayToHtmlAttributes([
                     'data-path' => $isEditMode ? "{$apiPath}content/description" : null,
+                    'data-empty-caption' => $isEditMode ? 'description' : null,
                 ]),
                 'url' => Helpers::arrayToHtmlAttributes([
                     'data-path' => $isEditMode ? "{$apiPath}content/url" : null,
diff --git a/_api_app/app/Sites/Sections/Entries/_entryContents.twig b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
index 9d40681ca..dd7298384 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryContents.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryContents.twig
@@ -13,7 +13,7 @@
 {% endif %}
 
 {% if showDescription %}
-  <div class="entryText xEditableMCE xProperty-description"{{ attributes.description|raw }}>{{ content.description|raw }}</div>
+  <div class="entryText xNgEditableRTE xProperty-description"{{ attributes.description|raw }}>{% if content.description %}{{ content.description|raw }}{% else %}<span class="xEmpty">&nbsp;description&nbsp;</span>{% endif %}</div>
 {% endif %}
 
 {% if galleryPosition == 'below description' %}
diff --git a/_api_app/app/Sites/Sections/additionalFooterText.twig b/_api_app/app/Sites/Sections/additionalFooterText.twig
index 6dfceeb4f..7c8bceb59 100644
--- a/_api_app/app/Sites/Sections/additionalFooterText.twig
+++ b/_api_app/app/Sites/Sections/additionalFooterText.twig
@@ -1,3 +1,7 @@
 <div{{ attributes|raw }}>
-  {{ content|raw }}
+  {% if content %}
+    {{ content|raw }}
+  {% elseif isEditMode %}
+    <span class="xEmpty">&nbsp;additional footer text&nbsp;</span>
+  {% endif %}
 </div>
diff --git a/_api_app/app/Sites/Sections/additionalText.twig b/_api_app/app/Sites/Sections/additionalText.twig
index 2955cca3e..e9eef6b5b 100644
--- a/_api_app/app/Sites/Sections/additionalText.twig
+++ b/_api_app/app/Sites/Sections/additionalText.twig
@@ -3,10 +3,8 @@
     <div class="xHandle"></div>
   {% endif %}
   {% if content.attributes %}
-    <div{{ content.attributes|raw }}>
-  {% endif %}
+    <div{{ content.attributes|raw }}>{% if content.html %}{{ content.html|raw }}{% else %}<span class="xEmpty">&nbsp;additional text&nbsp;</span>{% endif %}</div>
+  {% else %}
     {{ content.html|raw }}
-  {% if content.attributes %}
-    </div>
   {% endif %}
 </div>
diff --git a/_api_app/tests/Feature/AdditionalFooterTextRenderServiceTest.php b/_api_app/tests/Feature/AdditionalFooterTextRenderServiceTest.php
new file mode 100644
index 000000000..ee058222c
--- /dev/null
+++ b/_api_app/tests/Feature/AdditionalFooterTextRenderServiceTest.php
@@ -0,0 +1,30 @@
+<?php
+
+use App\Sites\Sections\AdditionalFooterTextRenderService;
+use App\Sites\SocialMediaLinksRenderService;
+
+function renderAdditionalFooterText(bool $isEditMode): string
+{
+    $service = new AdditionalFooterTextRenderService(new SocialMediaLinksRenderService);
+    $user = (object) ['features' => []];
+    $siteSettings = [
+        'template' => ['template' => 'default'],
+        'socialMediaButtons' => ['socialMediaLocation' => 'footer', 'socialMediaHTML' => ''],
+        'socialMediaLinks' => ['location' => 'footer', 'links' => []],
+        'siteTexts' => ['additionalFooterText' => ''],
+    ];
+
+    return (string) $service->render('site-slug', $siteSettings, $user, $isEditMode);
+}
+
+it('does not leak the empty-state placeholder onto the public site', function () {
+    $html = renderAdditionalFooterText(isEditMode: false);
+
+    expect($html)->not->toContain('additional footer text');
+});
+
+it('shows the empty-state placeholder while editing', function () {
+    $html = renderAdditionalFooterText(isEditMode: true);
+
+    expect($html)->toContain('additional footer text');
+});
diff --git a/editor/package-lock.json b/editor/package-lock.json
index a6536205c..dfd7f5e81 100644
--- a/editor/package-lock.json
+++ b/editor/package-lock.json
@@ -27,6 +27,7 @@
         "ngx-image-cropper": "^9.1.5",
         "ngx-tooltip-directives": "^21.0.2",
         "rxjs": "^7.8.2",
+        "tinymce": "^7.9.3",
         "tslib": "^2.0.0",
         "twig": "^2.0.0",
         "webfontloader": "^1.6.28",
@@ -352,6 +353,7 @@
       "integrity": "sha512-d0ZUmLFOkF+ljrENHOURmCbHGS90jo6pRILT6bZbP0K/O3IxBB7hZIPEOpT45WaME939jcc/khJWVkcH8M2qBw==",
       "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -518,6 +520,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.22.tgz",
       "integrity": "sha512-VWvtZL4xfYmXC56q/1BmtW0San8POAuHOADePJV1Hrjt430QTW5xaXuONZA7ujMs/B3u3PBZEWueKl2JH4LznQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -534,6 +537,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.22.tgz",
       "integrity": "sha512-3tdHaE30abvVzGSwtjpK/r4i8gqSZ6Q0Xc79XvLSTB3kuo4HYir9uvvc7L4YmhBLfSE64CkJPW+2tLiyz8U8jw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -547,6 +551,7 @@
       "integrity": "sha512-lbXXz8e8wCVecHNjb4kXiUPPNSrzZPE7WsQ+nNTEgnMDsFIqWJzmf3FagmNaZ5/wX1G2jnSZFjK4rpacmBIn4Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.29.7",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -579,6 +584,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.22.tgz",
       "integrity": "sha512-2pqDzm3T7/h7QF8XfDziVieEOZqNBM95qNgStM8vmJpFzhJEyLtD89xMQ0e365XcgaTOBEaMCWPswq6OuCIEUQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -604,6 +610,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.22.tgz",
       "integrity": "sha512-ogO+VbzAPyjgb0sIXgSET8c9x8ml623kDqUMxXE+W/oCFdDMPx4gom5K6gXtLzd1lVhtHlXBCsFf3UUD734Qvg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "tslib": "^2.3.0"
@@ -633,6 +640,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.22.tgz",
       "integrity": "sha512-+SNwcb/Xg4VjSmlaJ4/RyJLTtRKVMF4VBo5H0WD+ICugSMYiyuiP7AHB9nzuQt0TeLcrv4KY364z43LueA/iwA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -674,6 +682,7 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.22.tgz",
       "integrity": "sha512-S3Fl6jWjm4DfkaY6ikDDcd7d8J0BiDNjB3+rFarqD0t58UP/ER6Jv4kamPIAKAV2DfQvCnYE8ks1dY1xFlf7Hg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -718,6 +727,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -999,31 +1009,6 @@
         "node": ">=0.1.90"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
-      "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.3",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
-      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
@@ -1031,7 +1016,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1745,6 +1729,7 @@
       "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.3.2",
         "@inquirer/confirm": "^5.1.21",
@@ -2590,6 +2575,7 @@
       "resolved": "https://registry.npmjs.org/@ngxs/store/-/store-21.0.0.tgz",
       "integrity": "sha512-zp8BgLNhdj8yDiBQpjjLhHaCv7vGdyCYzG2myj6j/A5XcUv71ikuJZfY7Z9rAibBah2mQCaerdQ3fOA9qG70HA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -4334,6 +4320,7 @@
       "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4686,6 +4673,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.20",
         "caniuse-lite": "^1.0.30001810",
@@ -4884,6 +4872,7 @@
       "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "readdirp": "^5.0.0"
       },
@@ -5749,6 +5738,7 @@
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -6245,6 +6235,7 @@
       "integrity": "sha512-c8/gF9ac8Y78/agExVocyLevgR+JlpNB444Py0FSX8pJoPdYUfUzRcXtYEYGwt6l19qIlVZPN5Mfsw9jFShmQQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -6738,7 +6729,8 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
       "integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jose": {
       "version": "6.2.12",
@@ -6853,6 +6845,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -7321,6 +7314,7 @@
       "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
@@ -8710,6 +8704,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
@@ -9119,6 +9114,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -9765,6 +9761,12 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinymce": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.9.3.tgz",
+      "integrity": "sha512-Mtm54U5YJ6Pyo/GaAx+JSHXTGEuxrg2AowVWCD9zy1eBolp5Ub7S1rTtsyQdxhPegfhLuR3VLiTKGw1tacv09g==",
+      "license": "GPL-2.0-or-later"
+    },
     "node_modules/tmp": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
@@ -9809,7 +9811,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "4.1.0",
@@ -9919,6 +9922,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10071,6 +10075,7 @@
       "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0 || ^0.28.0",
         "fdir": "^6.5.0",
@@ -10431,6 +10436,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -10449,7 +10455,8 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }
diff --git a/editor/package.json b/editor/package.json
index 743219f1b..c52273898 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -34,6 +34,7 @@
     "ngx-image-cropper": "^9.1.5",
     "ngx-tooltip-directives": "^21.0.2",
     "rxjs": "^7.8.2",
+    "tinymce": "^7.9.3",
     "tslib": "^2.0.0",
     "twig": "^2.0.0",
     "webfontloader": "^1.6.28",
diff --git a/editor/src/app/app.module.ts b/editor/src/app/app.module.ts
index 4dabfc221..64e5e9ee0 100644
--- a/editor/src/app/app.module.ts
+++ b/editor/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { UserAccountComponent } from './user/user-account.component';
 import { SitesSharedModule } from './sites/shared/sites-shared.module';
 import { PreviewComponent } from './preview/preview.component';
 import { InlineEditOverlayComponent } from './preview/inline-edit/inline-edit-overlay.component';
+import { InlineEditRichTextOverlayComponent } from './preview/inline-edit/inline-edit-rich-text-overlay.component';
 import { PopupComponent } from './popup/popup.component';
 import { SetupWizardComponent } from './setup/setup-wizard.component';
 import { ErrorState } from './error-state/error.state';
@@ -58,6 +59,7 @@ import { sentryInitFactory } from './sentry/sentry-init.factory';
     LoginComponent,
     PreviewComponent,
     InlineEditOverlayComponent,
+    InlineEditRichTextOverlayComponent,
     ThemesComponent,
     PopupComponent,
     SetupWizardComponent,
diff --git a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
new file mode 100644
index 000000000..d07d1a178
--- /dev/null
+++ b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
@@ -0,0 +1,188 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+// Same floppy-disk icon legacy registers via `engine/_lib/tinymce/icons.js`
+// (`tinymce.IconManager.add("berta", { icons: { save: ... } })`, loaded
+// there via `icons_url`). TinyMCE falls back to the "default" icon pack for
+// any icon a named pack doesn't define, so only `save` needs overriding.
+const BERTA_ICON_PACK = 'berta';
+const BERTA_SAVE_ICON =
+  '<svg width="24" height="24"><path d="m5 2c-1.645 0-3 1.355-3 3v14c0 1.645 1.355 3 3 3h14c1.645 0 3-1.355 3-3v-11a1.0001 1.0001 0 0 0-0.29297-0.70703l-5-5a1.0001 1.0001 0 0 0-0.70703-0.29297h-9zm0 2h1v4a1.0001 1.0001 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-7v-3h7.5859l4.4141 4.4141v10.586c0 0.56413-0.43587 1-1 1h-1v-7a1.0001 1.0001 0 0 0-1-1h-10a1.0001 1.0001 0 0 0-1 1v7h-1c-0.56413 0-1-0.43587-1-1v-14c0-0.56413 0.43587-1 1-1zm3 10h8v6h-8z"/></svg>';
+
+// Content-area floor/cap for the `autoresize` plugin: grows/shrinks to fit
+// what's actually typed instead of always reserving a fixed block (which,
+// combined with `applyContentStyle` painting the surrounding page's
+// background onto the editor body, made short content leave an obvious
+// empty colored block below it). `autoresize_bottom_margin` is TinyMCE's
+// own default breathing room below the content (50px) — reduced here since
+// a compact inline popup doesn't need as much as a full-page editor.
+export const RICH_TEXT_MIN_HEIGHT = 100;
+const RICH_TEXT_MAX_HEIGHT = 500;
+
+const RICH_TEXT_BASE_CONFIG = {
+  menubar: false,
+  branding: false,
+  promotion: false,
+  license_key: 'gpl',
+  min_height: RICH_TEXT_MIN_HEIGHT,
+  max_height: RICH_TEXT_MAX_HEIGHT,
+  autoresize_bottom_margin: 10,
+  invalid_elements: 'script',
+  block_formats: 'Paragraph=p; Heading 2=h2; Heading 3=h3',
+  convert_urls: false,
+  relative_urls: false,
+  // Matches legacy's own MCE config (`BertaEditorBase.js`'s
+  // `tinyMCESettings.Base`): without this, TinyMCE 6+'s default sandboxing
+  // of its own editing iframe changes how embedded content (e.g. a pasted
+  // video embed) behaves while being re-edited.
+  sandbox_iframes: false,
+  icons: BERTA_ICON_PACK,
+};
+
+const RICH_TEXT_FULL_CONFIG = {
+  ...RICH_TEXT_BASE_CONFIG,
+  plugins: 'save code table lists link autoresize',
+  toolbar:
+    'save undo redo bold italic forecolor backcolor bullist numlist link unlink code | fontsize blocks alignleft aligncenter alignright alignjustify outdent indent table removeformat',
+};
+
+const RICH_TEXT_SIMPLE_CONFIG = {
+  ...RICH_TEXT_BASE_CONFIG,
+  plugins: 'save link code autoresize',
+  toolbar: 'save bold italic link unlink removeformat code',
+};
+
+/**
+ * Hosts a TinyMCE instance for `.xNgEditableRTE`/`.xNgEditableRTESimple`
+ * fields. Unlike `InlineEditOverlayComponent`'s plain `<textarea>`, saving
+ * happens via TinyMCE's own toolbar Save button (`save_onsavecallback`) —
+ * matching legacy's MCE fields exactly, which have never had a blur- or
+ * click-away-to-save/cancel mechanism of their own (see
+ * `engine/js/inline_edit.js`'s WYSIWYG branch). `InlineEditService` supplies
+ * the click-away-to-discard behavior instead, via a CDK backdrop.
+ */
+@Component({
+  selector: 'berta-inline-edit-rich-text-overlay',
+  // Not an `[innerHTML]` binding: Angular's built-in HTML sanitizer strips
+  // `style` attributes unconditionally (its attribute allowlist has no
+  // `style` entry at all), which silently drops any forecolor/backcolor
+  // formatting already saved in `value` before TinyMCE ever sees it. Set
+  // via a plain DOM write in `ngAfterViewInit` instead, matching how
+  // `InlineEditService` already writes this same kind of content elsewhere
+  // (`writeRichTextValue`/`writeFieldValue`) without going through Angular's
+  // template bindings.
+  template: `<div #targetEl></div>`,
+  styles: [
+    `
+      /*
+       * The pane (.cdk-overlay-pane) is a flex container with no
+       * flex-direction/align-items override, so browser defaults apply:
+       * align-items: stretch already fills our height to match the pane's
+       * fixed height, but the main axis (width, since direction is row)
+       * does not auto-stretch — without an explicit width here, the host
+       * only takes its content's width (~0 until TinyMCE renders in),
+       * causing the same visible size-jump width had before this rule.
+       */
+      :host {
+        display: block;
+        width: 100%;
+        background: #fff;
+      }
+    `,
+  ],
+  standalone: false,
+})
+export class InlineEditRichTextOverlayComponent
+  implements AfterViewInit, OnDestroy
+{
+  @Input() value = '';
+  @Input() simple = false;
+  @Input() contentStyle: Record<string, string> = {};
+  @Output() save = new EventEmitter<string>();
+  /**
+   * Fires with the editor's current rendered height (toolbar chrome +
+   * autoresized content area) once on TinyMCE's `init` — since the overlay
+   * was first sized against an empty div, before TinyMCE rendered in — and
+   * again on every `autoresize` plugin `ResizeEditor` event as the user
+   * types. The caller resizes/repositions the CDK overlay to match each
+   * time, since CDK has no built-in awareness of its content growing.
+   */
+  @Output() resize = new EventEmitter<number>();
+
+  @ViewChild('targetEl') private targetEl!: ElementRef<HTMLElement>;
+
+  private editor: any = null;
+
+  async ngAfterViewInit() {
+    this.targetEl.nativeElement.innerHTML = this.value;
+
+    const tinymce = (await import('tinymce/tinymce')).default;
+
+    await Promise.all([
+      import('tinymce/icons/default'),
+      import('tinymce/themes/silver'),
+      import('tinymce/models/dom/model'),
+      import('tinymce/plugins/save'),
+      import('tinymce/plugins/code'),
+      import('tinymce/plugins/table'),
+      import('tinymce/plugins/lists'),
+      import('tinymce/plugins/link'),
+      import('tinymce/plugins/autoresize'),
+      import('tinymce/skins/ui/oxide/skin.js'),
+      import('tinymce/skins/ui/oxide/content.js'),
+      import('tinymce/skins/content/default/content.js'),
+    ]);
+
+    tinymce.IconManager.add(BERTA_ICON_PACK, {
+      icons: { save: BERTA_SAVE_ICON },
+    });
+
+    const config = this.simple
+      ? RICH_TEXT_SIMPLE_CONFIG
+      : RICH_TEXT_FULL_CONFIG;
+
+    tinymce.init({
+      target: this.targetEl.nativeElement,
+      ...config,
+      save_onsavecallback: () => this.save.emit(this.editor.getContent()),
+      setup: (editor: any) => {
+        this.editor = editor;
+        const emitHeight = () =>
+          this.resize.emit(editor.getContainer().offsetHeight);
+
+        editor.on('init', () => {
+          this.applyContentStyle(editor);
+          emitHeight();
+        });
+        editor.on('ResizeEditor', emitHeight);
+      },
+    });
+  }
+
+  ngOnDestroy() {
+    this.editor?.remove();
+  }
+
+  /**
+   * `contentStyle` is fully assembled by `InlineEditService` (which has
+   * access to the edited element and its page context) — this just applies
+   * whatever it computed onto the TinyMCE iframe's body.
+   */
+  private applyContentStyle(editor: any) {
+    const body = editor.getBody();
+
+    Object.entries(this.contentStyle).forEach(([prop, value]) => {
+      if (value) {
+        editor.dom.setStyle(body, prop, value);
+      }
+    });
+  }
+}
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index 8a20910fb..58b2b3cce 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -8,14 +8,46 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { Store } from '@ngxs/store';
 
 import { InlineEditOverlayComponent } from './inline-edit-overlay.component';
+import {
+  InlineEditRichTextOverlayComponent,
+  RICH_TEXT_MIN_HEIGHT,
+} from './inline-edit-rich-text-overlay.component';
 import { resolveInlineEditAction } from './inline-edit-path.resolver';
 
 const EDITABLE_SELECTOR = '.xNgEditable, .xNgEditableTA';
 const MULTILINE_CLASS = 'xNgEditableTA';
+const RICH_TEXT_SELECTOR = '.xNgEditableRTE, .xNgEditableRTESimple';
+const RICH_TEXT_SIMPLE_CLASS = 'xNgEditableRTESimple';
 const DROPDOWN_BOX_SELECTOR = '.xEntryDropdownBox';
 const CHECKBOX_SELECTOR = '.xNgEditableCheckBox';
 const FIXED_PROPERTY_CLASS = 'xProperty-fixed';
 const SAVING_CLASS = 'xSaving';
+const RICH_TEXT_STYLES_TO_COPY = [
+  'font-size',
+  'font-family',
+  'font-weight',
+  'font-style',
+  'text-transform',
+  'line-height',
+  'letter-spacing',
+  'color',
+];
+// CDK's flexible-position strategy shrinks the overlay's width to fit
+// whatever space remains near a viewport edge by default — these are the
+// floor it's never allowed to shrink below, so the toolbar doesn't get
+// cramped for a field sitting close to the edge. `width` (below) stays the
+// preferred size; `minWidth` only kicks in when there isn't room for it.
+const RICH_TEXT_MIN_WIDTH_FULL = 560;
+const RICH_TEXT_MIN_WIDTH_SIMPLE = 300;
+// TinyMCE loads/renders asynchronously, so without a starting height the
+// overlay would start at its (empty) natural height and visibly pop once
+// ready. Pre-size to TinyMCE's own `min_height` floor plus a rough
+// single-toolbar-row estimate — close enough that the first `resize`
+// emission (which immediately corrects this to the real measured height)
+// rarely needs to grow it by much.
+const RICH_TEXT_TOOLBAR_CHROME_ESTIMATE = 44;
+const RICH_TEXT_INITIAL_HEIGHT =
+  RICH_TEXT_MIN_HEIGHT + RICH_TEXT_TOOLBAR_CHROME_ESTIMATE;
 
 interface CheckBoxRollback {
   entryWasFixed: boolean;
@@ -30,6 +62,11 @@ interface OpenEdit {
   positionStrategy: FlexibleConnectedPositionStrategy;
   dropdownBox: HTMLElement | null;
   suppressDropdownClose: (event: Event) => void;
+  // Rich-text overlays use a fixed size (matching legacy's own hardcoded
+  // TinyMCE dimensions) rather than tracking the edited element's own
+  // (much smaller) rendered box, so geometry refreshes must reposition
+  // without also resetting the overlay back to that box's size.
+  syncSizeOnRefresh: boolean;
 }
 
 /**
@@ -110,6 +147,20 @@ export class InlineEditService {
       this.toggleCheckBox(target, iframe);
     });
 
+    doc.addEventListener('click', (event) => {
+      const target = (event.target as HTMLElement)?.closest(
+        RICH_TEXT_SELECTOR,
+      ) as HTMLElement | null;
+
+      if (!target) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      this.openRichTextEditor(target, iframe);
+    });
+
     // The previewed site's own page can scroll independently of the app
     // shell around it.
     iframe.contentWindow?.addEventListener('scroll', () =>
@@ -189,9 +240,8 @@ export class InlineEditService {
     iframe: HTMLIFrameElement,
   ) {
     const contentWindow = iframe.contentWindow;
-    const container = iframe.contentDocument?.getElementById(
-      'contentContainer',
-    );
+    const container =
+      iframe.contentDocument?.getElementById('contentContainer');
 
     entry.classList.toggle('xFixed', becomingFixed);
 
@@ -349,6 +399,7 @@ export class InlineEditService {
       positionStrategy,
       dropdownBox,
       suppressDropdownClose,
+      syncSizeOnRefresh: true,
     };
 
     componentRef.instance.input.subscribe((draftValue: string) => {
@@ -397,6 +448,178 @@ export class InlineEditService {
     });
   }
 
+  /**
+   * `.xNgEditableRTE`/`.xNgEditableRTESimple` fields (TinyMCE-backed rich
+   * text). Unlike `openEditor`'s plain-text overlay, the value is raw HTML
+   * (no entity-encoding round-trip), sizing is fixed rather than tracking
+   * the field's own (usually much smaller) rendered box, and there's no
+   * live-draft mirroring into `el` while typing — TinyMCE's own canvas is
+   * the editing surface. Saving only happens via the overlay's TinyMCE
+   * toolbar Save button; a CDK backdrop discards the draft on click-away
+   * (see `InlineEditRichTextOverlayComponent`).
+   */
+  private openRichTextEditor(el: HTMLElement, iframe: HTMLIFrameElement) {
+    const path = el.dataset['path'];
+
+    if (!path) {
+      return;
+    }
+
+    this.closeOpenOverlay();
+
+    const simple = el.classList.contains(RICH_TEXT_SIMPLE_CLASS);
+    const initialValue = this.readRichTextValue(el);
+    const contentStyle = this.readRichTextStyles(el);
+    const originalHtml = el.innerHTML;
+
+    el.style.visibility = 'hidden';
+
+    const origin = this.createVirtualOrigin(el, iframe);
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(origin)
+      .withPositions([
+        {
+          originX: 'start',
+          originY: 'top',
+          overlayX: 'start',
+          overlayY: 'top',
+        },
+      ]);
+    // Full toolbar matches legacy's own hardcoded 563px regardless of the
+    // field's own width; simple toolbar matches the field's width, same as
+    // legacy's "100%" (of the edited element's own box). Kept in a local
+    // since the `resize` subscription below needs to reuse it on every
+    // resize, not just at creation.
+    const overlayWidth = simple ? origin.width : 563;
+    const overlayRef = this.overlay.create({
+      positionStrategy,
+      width: overlayWidth,
+      minWidth: simple ? RICH_TEXT_MIN_WIDTH_SIMPLE : RICH_TEXT_MIN_WIDTH_FULL,
+      // Pre-sized close to TinyMCE's own `min_height` floor so there's no
+      // visible pop for content that fits within it — the `resize`
+      // subscription below immediately corrects this once TinyMCE reports
+      // its actual rendered height, and again on every resize as the user
+      // types (the `autoresize` plugin grows/shrinks the content area to
+      // fit).
+      height: RICH_TEXT_INITIAL_HEIGHT,
+      hasBackdrop: true,
+      // Angular CDK 21 renders overlays via the native Popover API by
+      // default (host gets `popover="manual"`), which promotes them to the
+      // browser's top layer — unconditionally above the entire normal
+      // stacking order, regardless of z-index. TinyMCE's own popups
+      // (dialogs/menus/tooltips) are ordinary CSS-positioned elements, not
+      // top-layer, so a top-layer overlay always renders above them no
+      // matter what z-index either side uses. Opting out here drops back
+      // to classic z-index stacking, where the low z-index on
+      // `.berta-rich-text-overlay-pane`/`-backdrop` (styles.scss) actually
+      // means something: TinyMCE's own default z-index (1100-1300) then
+      // properly outranks it.
+      usePopover: false,
+      backdropClass: [
+        'cdk-overlay-transparent-backdrop',
+        'berta-rich-text-overlay-backdrop',
+      ],
+      panelClass: 'berta-rich-text-overlay-pane',
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    });
+
+    const componentRef = overlayRef.attach(
+      new ComponentPortal(InlineEditRichTextOverlayComponent),
+    );
+    componentRef.instance.value = initialValue;
+    componentRef.instance.simple = simple;
+    componentRef.instance.contentStyle = contentStyle;
+
+    this.openEdit = {
+      el,
+      iframe,
+      originalHtml,
+      overlayRef,
+      positionStrategy,
+      dropdownBox: null,
+      suppressDropdownClose: () => {},
+      syncSizeOnRefresh: false,
+    };
+
+    overlayRef.backdropClick().subscribe(() => this.closeOpenOverlay());
+
+    // TinyMCE loads/renders asynchronously and then grows/shrinks with the
+    // `autoresize` plugin as the user types — CDK has no built-in awareness
+    // of content changing size, so every `resize` emission both resizes the
+    // overlay to match and re-runs positioning (growth could push it
+    // off-screen for a field near a viewport edge).
+    componentRef.instance.resize.subscribe((height: number) => {
+      overlayRef.updateSize({ width: overlayWidth, height });
+      this.refreshOpenEditGeometry();
+    });
+
+    componentRef.instance.save.subscribe((html: string) => {
+      let action;
+
+      try {
+        action = resolveInlineEditAction(path, html);
+      } catch (error) {
+        console.error(error);
+        this.closeOpenOverlay();
+        return;
+      }
+
+      this.store.dispatch(action).subscribe({
+        next: () => {
+          this.writeRichTextValue(el, html);
+          this.closeOpenOverlay(false);
+        },
+        error: () => this.closeOpenOverlay(),
+      });
+    });
+  }
+
+  private readRichTextValue(el: HTMLElement): string {
+    const isPlaceholder = !!el.querySelector(':scope > .xEmpty');
+
+    return isPlaceholder ? '' : el.innerHTML.trim();
+  }
+
+  private writeRichTextValue(el: HTMLElement, html: string) {
+    el.innerHTML = html.trim() !== '' ? html : this.emptyPlaceholderHtml(el);
+  }
+
+  /**
+   * Equivalent of legacy's `setAllStylesMCE` (`engine/js/inline_edit.js`):
+   * copies the field's computed font/color styling onto the TinyMCE body so
+   * the edited text doesn't look like a generic editor. Read before `el` is
+   * hidden, same ordering as `readFontStyle`/`createVirtualOrigin` above.
+   */
+  private readRichTextStyles(el: HTMLElement): Record<string, string> {
+    const view = el.ownerDocument.defaultView;
+
+    if (!view) {
+      return {};
+    }
+
+    const computed = view.getComputedStyle(el);
+    const style: Record<string, string> = {};
+
+    RICH_TEXT_STYLES_TO_COPY.forEach((prop) => {
+      const value = computed.getPropertyValue(prop);
+      if (value) {
+        style[prop] = value;
+      }
+    });
+
+    const body = el.closest('body');
+    const bodyBackground = body
+      ? view.getComputedStyle(body).getPropertyValue('background-color')
+      : '';
+
+    if (bodyBackground) {
+      style['background-color'] = bodyBackground;
+    }
+
+    return style;
+  }
+
   /**
    * When empty, the server renders a visible `.xEmpty` placeholder span
    * inside the element (mirroring the legacy `makePlaceholderIfEmpty`
@@ -432,8 +655,12 @@ export class InlineEditService {
       return;
     }
 
+    el.innerHTML = this.emptyPlaceholderHtml(el);
+  }
+
+  private emptyPlaceholderHtml(el: HTMLElement): string {
     const caption = el.dataset['emptyCaption'];
-    el.innerHTML = caption
+    return caption
       ? `<span class="xEmpty">&nbsp;${this.escapeHtml(caption)}&nbsp;</span>`
       : '';
   }
@@ -476,7 +703,10 @@ export class InlineEditService {
    * round-trip: `&`/`<`/`>` are encoded, `"` is deliberately left literal.
    */
   private encodeEntities(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
   }
 
   /**
@@ -580,12 +810,16 @@ export class InlineEditService {
       return;
     }
 
-    const { el, iframe, overlayRef, positionStrategy } = this.openEdit;
+    const { el, iframe, overlayRef, positionStrategy, syncSizeOnRefresh } =
+      this.openEdit;
     const rect = this.createVirtualOrigin(el, iframe);
 
     positionStrategy.setOrigin(rect);
     overlayRef.updatePosition();
-    overlayRef.updateSize({ width: rect.width, height: rect.height });
+
+    if (syncSizeOnRefresh) {
+      overlayRef.updateSize({ width: rect.width, height: rect.height });
+    }
   }
 
   /**
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index 1ec42a367..b7cc91ecb 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -812,7 +812,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 {% endif %}
 
 {% if showDescription %}
-  <div class="entryText xEditableMCE xProperty-description"{{ attributes.description|raw }}>{{ content.description|raw }}</div>
+  <div class="entryText xNgEditableRTE xProperty-description"{{ attributes.description|raw }}>{% if content.description %}{{ content.description|raw }}{% else %}<span class="xEmpty">&nbsp;description&nbsp;</span>{% endif %}</div>
 {% endif %}
 
 {% if galleryPosition == 'below description' %}
@@ -992,7 +992,11 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 </div>
 `,
   'Sites/Sections/additionalFooterText': `<div{{ attributes|raw }}>
-  {{ content|raw }}
+  {% if content %}
+    {{ content|raw }}
+  {% elseif isEditMode %}
+    <span class="xEmpty">&nbsp;additional footer text&nbsp;</span>
+  {% endif %}
 </div>
 `,
   'Sites/Sections/additionalText': `<div{{ wrapperAttributes|raw }}>
@@ -1000,11 +1004,9 @@ export const TWIG_TEMPLATES: Record<string, string> = {
     <div class="xHandle"></div>
   {% endif %}
   {% if content.attributes %}
-    <div{{ content.attributes|raw }}>
-  {% endif %}
+    <div{{ content.attributes|raw }}>{% if content.html %}{{ content.html|raw }}{% else %}<span class="xEmpty">&nbsp;additional text&nbsp;</span>{% endif %}</div>
+  {% else %}
     {{ content.html|raw }}
-  {% if content.attributes %}
-    </div>
   {% endif %}
 </div>
 `,
diff --git a/editor/src/app/sites/sections/additional-footer-text-render.service.ts b/editor/src/app/sites/sections/additional-footer-text-render.service.ts
index 898512e05..637c3075c 100644
--- a/editor/src/app/sites/sections/additional-footer-text-render.service.ts
+++ b/editor/src/app/sites/sections/additional-footer-text-render.service.ts
@@ -11,7 +11,7 @@ import { TwigTemplateRenderService } from '../../render/twig-template-render.ser
 export class AdditionalFooterTextRenderService {
   USED_IN_TEMPLATES = ['messy', 'default'];
   EDITABLE_CLASSES = [
-    'xEditableMCESimple',
+    'xNgEditableRTESimple',
     'xProperty-additionalFooterText',
     'xCaption-additional-footer-text',
   ];
@@ -32,6 +32,7 @@ export class AdditionalFooterTextRenderService {
       classes = [...classes, ...this.EDITABLE_CLASSES];
       attributes['data-path'] =
         `${siteSlug}/settings/siteTexts/additionalFooterText`;
+      attributes['data-empty-caption'] = 'additional footer text';
     }
 
     attributes['class'] = classes.join(' ');
diff --git a/editor/src/app/sites/sections/additional-text-render.service.ts b/editor/src/app/sites/sections/additional-text-render.service.ts
index 9caac4f2a..0613160dc 100644
--- a/editor/src/app/sites/sections/additional-text-render.service.ts
+++ b/editor/src/app/sites/sections/additional-text-render.service.ts
@@ -9,7 +9,7 @@ import { TwigTemplateRenderService } from '../../render/twig-template-render.ser
 export class AdditionalTextRenderService {
   DRAGGABLE_CLASSES = ['xEditableDragXY', 'xProperty-additionalTextXY'];
   EDITABLE_CLASSES = [
-    'xEditableMCESimple',
+    'xNgEditableRTESimple',
     'xProperty-additionalText',
     'xCaption-additional-text',
   ];
@@ -66,6 +66,7 @@ export class AdditionalTextRenderService {
     return toHtmlAttributes({
       class: this.EDITABLE_CLASSES.join(' '),
       'data-path': `${siteSlug}/settings/siteTexts/additionalText`,
+      'data-empty-caption': 'additional text',
     });
   }
 
diff --git a/editor/src/app/sites/sections/entries/section-entry-render.service.ts b/editor/src/app/sites/sections/entries/section-entry-render.service.ts
index d78808e51..3898a48f3 100644
--- a/editor/src/app/sites/sections/entries/section-entry-render.service.ts
+++ b/editor/src/app/sites/sections/entries/section-entry-render.service.ts
@@ -309,6 +309,7 @@ export class SectionEntryRenderService {
             attributes: {
               description: toHtmlAttributes({
                 'data-path': `${apiPath}content/description`,
+                'data-empty-caption': 'description',
               }),
               url: toHtmlAttributes({
                 'data-path': `${apiPath}content/url`,
diff --git a/editor/src/styles/styles.scss b/editor/src/styles/styles.scss
index 7185c729e..e8a057901 100644
--- a/editor/src/styles/styles.scss
+++ b/editor/src/styles/styles.scss
@@ -133,3 +133,25 @@ berta-profile-dropdown {
 .overlay {
   background: rgba(variables.$black, 0.3);
 }
+
+// TinyMCE (`berta-inline-edit-rich-text-overlay`) renders its own floating
+// UI (dialogs, menus, tooltips) with a default z-index around 1100-1300
+// (its oxide skin CSS). Rather than fighting to push TinyMCE's popups
+// above CDK, this keeps only this editor's own pane/backdrop *below* them.
+// This only works combined with `usePopover: false` on that overlay's
+// config (inline-edit.service.ts): Angular CDK 21 promotes overlays to the
+// browser's native Popover API (top layer) by default, which ignores
+// z-index entirely (CDK's own stylesheet even sets
+// `.cdk-overlay-popover .cdk-overlay-backdrop { z-index: auto }`) — so
+// without opting out, this rule would be a no-op. CDK's own
+// `.cdk-overlay-pane`/`.cdk-overlay-backdrop` z-index rules are wrapped in
+// `@layer cdk-overlay` (see `@angular/cdk/fesm2022/_overlay-module-chunk.mjs`),
+// which always loses to any *unlayered* rule regardless of specificity, so
+// this reliably wins for just these two classes without touching the
+// shared `.cdk-overlay-container` other overlays in the app rely on
+// staying above ordinary page content (nothing else here uses z-index
+// above 11).
+.berta-rich-text-overlay-pane,
+.berta-rich-text-overlay-backdrop {
+  z-index: 50;
+}
diff --git a/editor/src/types/tinymce.d.ts b/editor/src/types/tinymce.d.ts
new file mode 100644
index 000000000..41b3681db
--- /dev/null
+++ b/editor/src/types/tinymce.d.ts
@@ -0,0 +1,9 @@
+// TinyMCE's theme/icon/model/plugin/skin bundles are plain side-effect JS
+// files with no accompanying .d.ts (only the `tinymce/tinymce` entry point
+// ships types) — declared here so TypeScript can resolve the deep imports
+// used to self-host TinyMCE without a CDN.
+declare module 'tinymce/icons/*';
+declare module 'tinymce/themes/*';
+declare module 'tinymce/models/*';
+declare module 'tinymce/plugins/*';
+declare module 'tinymce/skins/*';
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index 588dc1489..130a0058e 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -163,6 +163,8 @@
 
 .xNgEditable,
 .xNgEditableTA,
+.xNgEditableRTE,
+.xNgEditableRTESimple,
 .xEditableMCE,
 .xEditableRC {
     cursor: default;
@@ -170,6 +172,8 @@
 
 .xNgEditable:hover,
 .xNgEditableTA:hover,
+.xNgEditableRTE:hover,
+.xNgEditableRTESimple:hover,
 .xEditableMCE:hover,
 .xEditableRC:hover {
     background-color: rgba(255, 255, 153, .79);
@@ -181,6 +185,22 @@
     cursor: move;
 }
 
+/*
+ * A click that visually lands on an embedded iframe (e.g. a pasted video
+ * embed) never bubbles to the parent document at all — iframes are a
+ * separate browsing context, so InlineEditService's delegated click
+ * listener structurally cannot see it. This makes such a click pass
+ * through to the containing editable element instead of reaching the
+ * iframe's own page, so it bubbles normally and opens the editor like any
+ * other click on the field. Legacy solved the same problem with a
+ * transparent hover-injected overlay element (`.xEditOverlay`); this is a
+ * simpler modern equivalent for the same two field types.
+ */
+.xNgEditableRTE iframe,
+.xNgEditableRTESimple iframe {
+    pointer-events: none;
+}
+
 .xNgEditableCheckBox {
 
 }

From 3dc7fa4174f50bbba2e864ac583b0a61b0703fd4 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Wed, 23 Sep 2026 12:55:58 +0300
Subject: [PATCH 11/17] Remove legacy TinyMCE editor code and unused polyfills

Rich text editing moved to Angular (f66454ca), but the old MooTools
TinyMCE integration in the engine (xEditableMCE/MCESimple handling,
tinyMCE configuration, wmode-transparent iframe hack, vendored icon
pack, and related CSS/gulp/npm wiring) was never deleted. Also drops
whatwg-fetch and promise-polyfill, which only mattered for IE11 and
weren't used by any code in the bundle that shipped them.
---
 engine/_lib/tinymce/icons.js |   5 --
 engine/css/editor.css.php    |  29 --------
 engine/js/BertaEditor.js     |  33 ---------
 engine/js/BertaEditorBase.js | 129 -----------------------------------
 engine/js/inline_edit.js     |  85 +++--------------------
 gulpfile.js                  |  30 --------
 package-lock.json            |  21 +-----
 package.json                 |   5 +-
 8 files changed, 11 insertions(+), 326 deletions(-)
 delete mode 100644 engine/_lib/tinymce/icons.js

diff --git a/engine/_lib/tinymce/icons.js b/engine/_lib/tinymce/icons.js
deleted file mode 100644
index d43f7c4e3..000000000
--- a/engine/_lib/tinymce/icons.js
+++ /dev/null
@@ -1,5 +0,0 @@
-tinymce.IconManager.add("berta", {
-  icons: {
-    save: '<svg width="24" height="24"><path d="m5 2c-1.645 0-3 1.355-3 3v14c0 1.645 1.355 3 3 3h14c1.645 0 3-1.355 3-3v-11a1.0001 1.0001 0 0 0-0.29297-0.70703l-5-5a1.0001 1.0001 0 0 0-0.70703-0.29297h-9zm0 2h1v4a1.0001 1.0001 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-7v-3h7.5859l4.4141 4.4141v10.586c0 0.56413-0.43587 1-1 1h-1v-7a1.0001 1.0001 0 0 0-1-1h-10a1.0001 1.0001 0 0 0-1 1v7h-1c-0.56413 0-1-0.43587-1-1v-14c0-0.56413 0.43587-1 1-1zm3 10h8v6h-8z"/></svg>',
-  },
-});
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index 130a0058e..ba054555b 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -141,31 +141,10 @@
 
 /* editables ---------------------------------------------------------------------------------------------- */
 
-.xEditableMCE {
-    min-height: 1em;
-}
-
-.xEditableMCE .tox-tinymce {
-    border-radius: 0;
-}
-
-body .tox-tinymce-aux {
-    z-index: 100002;
-}
-
-.xEditableMCE .tox:not(.tox-tinymce-inline) .tox-editor-header {
-    padding: 0;
-}
-
-.xEditableMCE .tox .tox-toolbar__group {
-    padding: 0 4px 0 5px;
-}
-
 .xNgEditable,
 .xNgEditableTA,
 .xNgEditableRTE,
 .xNgEditableRTESimple,
-.xEditableMCE,
 .xEditableRC {
     cursor: default;
 }
@@ -174,7 +153,6 @@
 .xNgEditableTA:hover,
 .xNgEditableRTE:hover,
 .xNgEditableRTESimple:hover,
-.xEditableMCE:hover,
 .xEditableRC:hover {
     background-color: rgba(255, 255, 153, .79);
     -moz-border-radius: 5px;
@@ -221,13 +199,6 @@
     text-decoration: underline;
 }*/
 
-.xEditOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-}
-
 
 /* panel css ------------------------------------------------------------------------------------------- */
 
diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index c9aa9fd59..ebb73c328 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -29,7 +29,6 @@ var BertaEditor = new Class({
   initialize: function (options) {
     this.setOptions(options);
     this.initConsoleReplacement();
-    this.tinyMCE_ConfigurationsInit();
 
     this.processHandler = new UnlinearProcessHandler();
     this.processHandler.addObservable(this);
@@ -62,9 +61,6 @@ var BertaEditor = new Class({
     this.edittingMode = $$("body")[0].get("x_mode");
     if (!this.edittingMode) this.edittingMode = "entries";
 
-    //set wmode to transparent
-    this.setWmodeTransparent();
-
     switch (this.edittingMode) {
       case "multipage":
         break;
@@ -304,18 +300,6 @@ var BertaEditor = new Class({
 
   editablesInit: function () {
     // instantiate all xEditable elements in the page
-    // mce textareas ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassMCE).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassMCE);
-      }.bind(this)
-    );
-    $$(this.options.xBertaEditorClassMCESimple).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassMCE);
-      }.bind(this)
-    );
-
     // "real content" fields ////////////////////////////////////////////////////////////////////////////////////////////////////
     $$(this.options.xBertaEditorClassRC).each(
       function (el) {
@@ -356,23 +340,6 @@ var BertaEditor = new Class({
     }
   },
 
-  //sets iframe mode to transparent to allow click and edit in tiny mce
-  setWmodeTransparent: function () {
-    var objects = document.getElements("iframe");
-
-    objects.each(function (obj) {
-      var srcAttr = obj.src;
-      if (srcAttr && !srcAttr.match(/javascript:/gi)) {
-        var uri = new URI(srcAttr);
-        try {
-          uri.setData("wmode", "transparent");
-          uri = uri.toString();
-          obj.set("src", uri);
-        } catch (err) {}
-      }
-    });
-  },
-
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   ///|  Gallery  |//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index d86a0f58f..6c1a6d6fc 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -31,19 +31,11 @@ var BertaEditorBase = new Class({
   Implements: [Options, Events],
 
   options: {
-    xBertaEditorClassMCE: ".xEditableMCE",
-    xBertaEditorClassMCESimple: ".xEditableMCESimple",
     xBertaEditorClassRC: ".xEditableRC",
     xBertaEditorClassDragXY: ".xEditableDragXY",
     xEmptyClass: ".xEmpty",
   },
 
-  tinyMCESettings: {
-    Base: null, // base class
-    simple: null,
-    full: null,
-  },
-
   elementEdit_instances: new Array(),
 
   shiftPressed: false,
@@ -116,42 +108,6 @@ var BertaEditorBase = new Class({
     var self = this;
 
     switch (editorClass) {
-      case this.options.xBertaEditorClassMCE:
-      case this.options.xBertaEditorClassMCESimple:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            $$(".xEditOverlay").destroy();
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              el.addClass("xEditing");
-              if (this.inlineIsEmpty()) this.innerHTML = "";
-              editor.elementEdit_instances.push(
-                this.inlineEdit({
-                  type: "textarea",
-                  WYSIWYGSettings: el.hasClass(
-                    editor.options.xBertaEditorClassMCESimple.substr(1)
-                  )
-                    ? editor.tinyMCESettings.simple.options
-                    : editor.tinyMCESettings.full.options,
-                  onComplete: editor.elementEdit_save.bind(editor),
-                })
-              );
-              editor.fireEvent(BertaEditorBase.EDITABLE_START, [
-                el,
-                editor.elementEdit_instances[
-                  editor.elementEdit_instances.length - 1
-                ],
-              ]);
-            }
-          }.bindWithEvent(el, this)
-        );
-
-        self.initEditOverlay(el);
-        break;
-
       case this.options.xBertaEditorClassRC:
         el.store("onElementSave", onElementSave);
         el.addClass(editorClass.substr(1));
@@ -369,25 +325,6 @@ var BertaEditorBase = new Class({
   ///  Supporting functions for editables  /////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-  initEditOverlay: function (el) {
-    var editButton = new Element("a", {
-      class: "xEditOverlay",
-    });
-
-    el.addEvents({
-      mouseenter: function () {
-        if (!el.hasClass("xEditing")) {
-          editButton.style.width = el.getSize().x + "px";
-          editButton.style.height = el.getSize().y + "px";
-          editButton.inject(el);
-        }
-      },
-      mouseleave: function () {
-        editButton.destroy();
-      },
-    });
-  },
-
   drawGuideLines: function (el) {
     var x = el.getStyle("top");
     var y = el.getStyle("left");
@@ -399,17 +336,6 @@ var BertaEditorBase = new Class({
   ///|  Saving edited element  |////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-  findEditByReplacement: function (replacementElement) {
-    var editToReturn;
-    replacementElement = $(replacementElement);
-    this.elementEdit_instances.each(function (edit) {
-      if (edit.inputBox == replacementElement) {
-        editToReturn = edit;
-      }
-    });
-    return editToReturn;
-  },
-
   elementEdit_save: function (
     elEditor,
     el,
@@ -651,10 +577,6 @@ var BertaEditorBase = new Class({
         el.removeClass("xSaving");
         el.removeClass("xEditing");
         el.removeProperty("old_content");
-
-        try {
-          this.setWmodeTransparent();
-        } catch (e) {}
       }
 
       // if there is a stored onSave event, execute it
@@ -670,57 +592,6 @@ var BertaEditorBase = new Class({
     }.bind(this);
   },
 
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  ///  tinyMCE  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  tinyMCE_onSave: function (mceInstance) {
-    if (mceInstance) {
-      var tAElement = mceInstance.getElement();
-      mceInstance.remove();
-      tAElement.setStyle("visibility", "hidden");
-
-      var elInlineEdit = this.findEditByReplacement(tAElement);
-      elInlineEdit.onSave.delay(100, elInlineEdit);
-    }
-  },
-
-  tinyMCE_ConfigurationsInit: function () {
-    this.tinyMCESettings.Base = new Class({
-      Implements: Options,
-      options: {
-        icons_url: "../_lib/tinymce/icons.js",
-        icons: "berta",
-        license_key: "gpl",
-        promotion: false,
-        branding: false,
-        menubar: false,
-        plugins: "save code table lists link",
-        toolbar:
-          "save undo redo bold italic forecolor backcolor bullist numlist link unlink code | fontsize blocks alignleft aligncenter alignright alignjustify outdent indent table removeformat",
-        width: "563px",
-        height: "300",
-        save_enablewhendirty: false,
-        save_onsavecallback: this.tinyMCE_onSave.bind(this),
-        invalid_elements: "script",
-        block_formats: "Paragraph=p;  Heading 2=h2; Heading 3=h3",
-        convert_urls: false,
-        relative_urls: false,
-        sandbox_iframes: false,
-      },
-      initialize: function (options) {
-        this.setOptions(options);
-      },
-    });
-
-    this.tinyMCESettings.full = new this.tinyMCESettings.Base();
-    this.tinyMCESettings.simple = new this.tinyMCESettings.Base({
-      width: "100%",
-      plugins: "save link code",
-      toolbar: "save bold italic link unlink removeformat code",
-    });
-  },
-
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   ///  Utilities  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/engine/js/inline_edit.js b/engine/js/inline_edit.js
index 54476a199..cba02dab0 100644
--- a/engine/js/inline_edit.js
+++ b/engine/js/inline_edit.js
@@ -4,7 +4,6 @@ var inlineEdit = new Class({
       onComplete: function (el, oldContent, newContent) {},
       type: "input",
       subtype: "", // 'font' for font selector (type = 'select')
-      WYSIWYGSettings: 0,
       selectOptions: new Array(),
       dontHideOnBlur: false,
     };
@@ -41,10 +40,8 @@ var inlineEdit = new Class({
       // get element's content
       this.oldContent = this.oldContentText = element.innerHTML;
       var content = this.oldContent.trim();
-      if (!this.options.WYSIWYGSettings) {
-        content = content.replace(new RegExp("<br.*?/?>", "gi"), "\n");
-        content = this.removeHTMLEntities(content);
-      }
+      content = content.replace(new RegExp("<br.*?/?>", "gi"), "\n");
+      content = this.removeHTMLEntities(content);
 
       var inputBoxId =
         "_replacement" + $random(0, 9999) + $random(0, 9999) + $random(0, 9999);
@@ -125,46 +122,10 @@ var inlineEdit = new Class({
         .bind(this)
         .delay(300);
 
-      if (this.options.WYSIWYGSettings) {
-        var WYSIWYGSettings = this;
-        var ed = new tinymce.Editor(
-          inputBoxId,
-          this.options.WYSIWYGSettings,
-          tinymce.EditorManager
-        );
-        tinymce.EditorManager.add(ed);
-        ed.render();
-
-        // update editor height - this is needed, if desired height is below 100.
-        // tinymce wouldn't allow heights smaller than 100
-        (function () {
-          var e = $(ed.id + "_tbl"),
-            ifr = $(ed.id + "_ifr");
-          if (e) {
-            e.setStyle(
-              "height",
-              WYSIWYGSettings.options.WYSIWYGSettings.height
-            );
-            ifr.setStyle(
-              "height",
-              WYSIWYGSettings.options.WYSIWYGSettings.height
-            );
-          }
-
-          // set styles for the tinymce body element
-          WYSIWYGSettings.setAllStylesMCE(element, ed);
-
-          //correct footer position
-          if (typeof messyMess == "object") {
-            messyMess.copyrightStickToBottom();
-          }
-        }).delay(1000);
-      } else {
-        // add events
-        this.inputBox.addEvent("change", this.onSave.bind(this));
-        if (!this.options.dontHideOnBlur)
-          this.inputBox.addEvent("blur", this.onSave.bind(this));
-      }
+      // add events
+      this.inputBox.addEvent("change", this.onSave.bind(this));
+      if (!this.options.dontHideOnBlur)
+        this.inputBox.addEvent("blur", this.onSave.bind(this));
     }
   },
 
@@ -173,12 +134,9 @@ var inlineEdit = new Class({
 
     this.inputBox.removeEvents();
 
-    this.newContent = this.options.WYSIWYGSettings
-      ? this.inputBox.get("value").trim()
-      : this.addHTMLEntities(this.inputBox.get("value").trim()).replace(
-          new RegExp("\n", "gi"),
-          "<br />"
-        );
+    this.newContent = this.addHTMLEntities(
+      this.inputBox.get("value").trim()
+    ).replace(new RegExp("\n", "gi"), "<br />");
 
     this.newContentText = this.newContent;
     if (
@@ -246,31 +204,6 @@ var inlineEdit = new Class({
       }
     });
   },
-
-  setAllStylesMCE: function (element, mceEditor) {
-    var stylesToCopy = [
-      "font-size",
-      "font-family",
-      "font-weight",
-      "font-style",
-      "text-transform",
-      "line-height",
-      "letter-spacing",
-      "font",
-      "color",
-      "background-color",
-    ];
-    var editorBody = mceEditor.dom.select("body");
-
-    stylesToCopy.map(function (style) {
-      var selector =
-        style === "background-color" ? element.getParent("body") : element;
-      var value = selector.getStyle(style);
-      if (value) {
-        mceEditor.dom.setStyle(editorBody, style, value);
-      }
-    });
-  },
 });
 
 Element.implement({
diff --git a/gulpfile.js b/gulpfile.js
index 5c113e644..6d9b78da2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -37,12 +37,6 @@ const vendorAssets = [
   "node_modules/photoswipe/dist/default-skin/*.{png,gif,svg}",
 ];
 
-const tinymceSkinFiles = [
-  "node_modules/tinymce/skins/ui/oxide/skin.min.css",
-  "node_modules/tinymce/skins/ui/oxide/content.min.css",
-  "node_modules/tinymce/skins/content/default/content.min.css",
-];
-
 const backendCssFiles = [
   "node_modules/swiper/swiper-bundle.min.css",
   "engine/_lib/berta/default.css",
@@ -79,17 +73,6 @@ const backendJsFiles = [
   "engine/js/BertaEditorBase.js",
   "engine/js/inline_edit.js",
   "engine/js/BertaEditor.js",
-  "node_modules/tinymce/tinymce.min.js",
-  "node_modules/tinymce/themes/silver/theme.min.js",
-  "node_modules/tinymce/icons/default/icons.min.js",
-  "node_modules/tinymce/models/dom/model.min.js",
-  "node_modules/tinymce/plugins/save/plugin.min.js",
-  "node_modules/tinymce/plugins/code/plugin.min.js",
-  "node_modules/tinymce/plugins/table/plugin.min.js",
-  "node_modules/tinymce/plugins/lists/plugin.min.js",
-  "node_modules/tinymce/plugins/link/plugin.min.js",
-  "node_modules/promise-polyfill/dist/polyfill.min.js",
-  "node_modules/whatwg-fetch/fetch.js",
   "node_modules/immutable/dist/immutable.min.js",
   "node_modules/redux/dist/redux.min.js",
   "node_modules/redux-thunk/dist/redux-thunk.min.js",
@@ -151,17 +134,6 @@ const copyVendorAssets = () => {
   );
 };
 
-const cleanupTinymceSkinFiles = () => {
-  return src("engine/js/skins", { read: false, allowEmpty: true }).pipe(
-    clean({ force: true })
-  );
-};
-const copyTinymceSkinFiles = () => {
-  return src(tinymceSkinFiles, { base: "./node_modules/tinymce/" }).pipe(
-    dest("engine/js")
-  );
-};
-
 // swiper-bundle.min.css ships pre-minified with native CSS nesting, which
 // gulp-clean-css can't handle correctly (silently mangles `&` selectors, e.g.
 // turning `&:only-child{...}` into a global `&:only-child{...}` rule that
@@ -304,8 +276,6 @@ const backendNgJs = () => {
 const tasks = series(
   cleanupVendorAssets,
   copyVendorAssets,
-  cleanupTinymceSkinFiles,
-  copyTinymceSkinFiles,
   parallel(
     templatesCss,
     backendCss,
diff --git a/package-lock.json b/package-lock.json
index 9eb1ee8be..f4a528351 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,9 @@
       "dependencies": {
         "immutable": "^5.1.9",
         "photoswipe": "^4.1.3",
-        "promise-polyfill": "^7.0.2",
         "redux": "^3.7.2",
         "redux-thunk": "^2.2.0",
-        "swiper": "^14.2.0",
-        "tinymce": "^7.9.3",
-        "whatwg-fetch": "^2.0.3"
+        "swiper": "^14.2.0"
       },
       "devDependencies": {
         "gulp": "^5.0.1",
@@ -4028,11 +4025,6 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
-    "node_modules/promise-polyfill": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-7.1.2.tgz",
-      "integrity": "sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ=="
-    },
     "node_modules/rcfinder": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/rcfinder/-/rcfinder-0.1.9.tgz",
@@ -4676,12 +4668,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/tinymce": {
-      "version": "7.9.3",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.9.3.tgz",
-      "integrity": "sha512-Mtm54U5YJ6Pyo/GaAx+JSHXTGEuxrg2AowVWCD9zy1eBolp5Ub7S1rTtsyQdxhPegfhLuR3VLiTKGw1tacv09g==",
-      "license": "GPL-2.0-or-later"
-    },
     "node_modules/to-through": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/to-through/-/to-through-3.0.0.tgz",
@@ -5003,11 +4989,6 @@
         "source-map": "^0.5.1"
       }
     },
-    "node_modules/whatwg-fetch": {
-      "version": "2.0.4",
-      "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
-      "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
-    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 351988e2d..49616ba85 100644
--- a/package.json
+++ b/package.json
@@ -26,12 +26,9 @@
   "dependencies": {
     "immutable": "^5.1.9",
     "photoswipe": "^4.1.3",
-    "promise-polyfill": "^7.0.2",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
-    "swiper": "^14.2.0",
-    "tinymce": "^7.9.3",
-    "whatwg-fetch": "^2.0.3"
+    "swiper": "^14.2.0"
   },
   "scripts": {
     "dev": "./node_modules/.bin/gulp",

From f0f3cb5ee92c8d4e2a167cfa9ecfd149e5cb2aea Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 24 Sep 2026 07:45:50 +0300
Subject: [PATCH 12/17] Move xEditableRC fields to Angular inline editor

Migrate the remaining legacy "real content" fields (entry tags, entry
width, cart price) from xEditableRC to xNgEditable, reading the raw
value from `title` via data-ng-edit-via-title.

- InlineEditService: add CSS units ("px" suffix, "300 px" -> "300px"),
  price parsing (zero/invalid saves empty), tags formatting and title
  sync; suppress spurious mouseleave on .xEntryEditWrap (tags) as well
  as .xEntryDropdownBox
- Route tags saves through UpdateSectionEntryFromSyncAction so section
  tags, has_direct_content and slugs stay in sync
- Refresh shop products on UpdateSectionEntryAction too, so cart
  title/price/attributes edits reach the Shop panel
- Remove legacy RC code: BertaEditorBase RC init/save/complete branches,
  BertaEditor RC init and tags-input hover guard, inline_edit.js,
  .xEditableRC styles, unused xSkipSetStyles classes
- Clean up inline-edit comments to describe current behavior
- Add unit tests for the field value transforms

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Sites/Sections/Entries/_entryEditor.twig  |   4 +-
 .../Sections/Entries/shop/_addToCart.twig     |   2 +-
 .../shop/_productAttributesEditor.twig        |   4 +-
 .../inline-edit/inline-edit-path.resolver.ts  |  24 +-
 ...inline-edit-rich-text-overlay.component.ts |  22 +-
 .../inline-edit/inline-edit.service.spec.ts   | 141 ++++++++++
 .../inline-edit/inline-edit.service.ts        | 261 +++++++++++++-----
 editor/src/app/render/twig-templates.ts       |  10 +-
 .../app/shop/products/shop-products.state.ts  |   8 +-
 engine/css/editor.css.php                     |   6 +-
 engine/js/BertaEditor.js                      |  14 +-
 engine/js/BertaEditorBase.js                  | 192 +------------
 engine/js/inline_edit.js                      | 219 ---------------
 gulpfile.js                                   |   1 -
 14 files changed, 388 insertions(+), 520 deletions(-)
 create mode 100644 editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
 delete mode 100644 engine/js/inline_edit.js

diff --git a/_api_app/app/Sites/Sections/Entries/_entryEditor.twig b/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
index 9ecb04ba4..4725a202b 100644
--- a/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
+++ b/_api_app/app/Sites/Sections/Entries/_entryEditor.twig
@@ -8,7 +8,7 @@
     {% endif %}
 
     <div class="tagsList">
-      <div title="{{ tagList }}" class="xEditableRC xNoHTMLEntities xProperty-submenu xFormatModifier-toTags xSkipSetStyles-1" data-path="{{apiPath}}tags/tag">{{ tagList }}</div>
+      <div title="{{ tagList }}" class="xNgEditable xNoHTMLEntities xProperty-submenu xFormatModifier-toTags" data-path="{{apiPath}}tags/tag" data-ng-edit-via-title="1" data-empty-caption="tags">{% if tagList %}{{ tagList }}{% else %}<span class="xEmpty">&nbsp;tags&nbsp;</span>{% endif %}</div>
     </div>
     <div class="xEntryDropdown"></div>
     <br class="clear" />
@@ -31,7 +31,7 @@
         </li>
         <li>
           <div class="customWidth">
-            <div title="{{ entryWidth }}" class="xEditableRC xCSSUnits-1 xSkipSetStyles-1 xProperty-width" data-path="{{apiPath}}content/width">{{ entryWidth }}</div>
+            <div title="{{ entryWidth }}" class="xNgEditable xCSSUnits-1 xProperty-width" data-path="{{apiPath}}content/width" data-ng-edit-via-title="1" data-empty-caption="width">{% if entryWidth %}{{ entryWidth }}{% else %}<span class="xEmpty">&nbsp;width&nbsp;</span>{% endif %}</div>
           </div>
         </li>
       {% endif %}
diff --git a/_api_app/app/Sites/Sections/Entries/shop/_addToCart.twig b/_api_app/app/Sites/Sections/Entries/shop/_addToCart.twig
index 3e10c2e32..3bd35b0aa 100644
--- a/_api_app/app/Sites/Sections/Entries/shop/_addToCart.twig
+++ b/_api_app/app/Sites/Sections/Entries/shop/_addToCart.twig
@@ -1,6 +1,6 @@
 <div class="addToCart" data-uniqid="{{ uniqid }}">
   {% if isEditMode %}
-    <div class="cartPrice xEditableRC xProperty-cartPrice xCaption-price xFormatModifier-toPrice" title="{{ content.cartPrice }}"{{ attributes.cartPrice|raw }}>{{ cartPriceFormatted }}</div>
+    <div class="cartPrice xNgEditable xProperty-cartPrice xCaption-price xFormatModifier-toPrice" title="{{ content.cartPrice }}" data-ng-edit-via-title="1" data-empty-caption="price"{{ attributes.cartPrice|raw }}>{% if cartPriceFormatted %}{{ cartPriceFormatted }}{% else %}<span class="xEmpty">&nbsp;price&nbsp;</span>{% endif %}</div>
   {% else %}
     <div class="cartPrice" title="{{ content.cartPrice }}" data-weight="{{ content.weight }}">{{ cartPriceFormatted }}</div>
   {% endif %}
diff --git a/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig b/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
index 0c595a9f9..0401fcf75 100644
--- a/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
+++ b/_api_app/app/Sites/Sections/Entries/shop/_productAttributesEditor.twig
@@ -1,6 +1,6 @@
 <div class="xEntrySeperator"></div>
 <div class="xEntryBoxParams">
   <b>Attribute</b>
-  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
-  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }}" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
 </div>
diff --git a/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts b/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
index c4e4d162b..b3bc8498f 100644
--- a/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit-path.resolver.ts
@@ -1,10 +1,12 @@
-import { UpdateSectionEntryAction } from '../../sites/sections/entries/entries-state/section-entries.actions';
+import {
+  UpdateSectionEntryAction,
+  UpdateSectionEntryFromSyncAction,
+} from '../../sites/sections/entries/entries-state/section-entries.actions';
 import { UpdateSiteSettingsFromSyncAction } from '../../sites/settings/site-settings.actions';
 
 /**
- * Mirrors the legacy `path`-branching in `engine/js/BertaEditorBase.js`'s
- * `elementEdit_save` (site / settings / section / entry), but dispatches
- * Angular NGXS actions instead of the legacy engine's own redux store.
+ * Maps an inline-edited field's `data-path` to the NGXS action that saves
+ * it, branching on the path's type (site / settings / section / entry).
  *
  * Only the `entry` and `settings` branches are implemented so far. The
  * remaining branches are stubbed to fail loudly rather than silently no-op,
@@ -16,6 +18,20 @@ export function resolveInlineEditAction(path: string, value: string): any {
   const pathParts = path.split('/');
 
   if (pathParts[1] === 'entry') {
+    // A tags save needs `UpdateSectionEntryFromSyncAction`'s tags-specific
+    // handling (`section-entries.state.ts`'s `updateSectionEntryFromSync`):
+    // it stores the server's array-shaped `entry.tags` instead of the raw
+    // posted string (which would break the next `entry.tags.tag.join(...)`
+    // render), refreshes `SectionTagsState` (read by the `sectionsMenu` tag
+    // submenu), keeps the section's `has_direct_content` in sync, and
+    // re-saves once to refresh the entry's tag-derived slug. Every other entry field behaves identically under either
+    // action, so this is scoped to tags only.
+    const lastPathPart = pathParts.slice(4).join('/');
+
+    if (lastPathPart === 'tags/tag') {
+      return new UpdateSectionEntryFromSyncAction(path, value);
+    }
+
     return new UpdateSectionEntryAction(path, value);
   }
 
diff --git a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
index d07d1a178..4ebe35678 100644
--- a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
@@ -9,10 +9,9 @@ import {
   ViewChild,
 } from '@angular/core';
 
-// Same floppy-disk icon legacy registers via `engine/_lib/tinymce/icons.js`
-// (`tinymce.IconManager.add("berta", { icons: { save: ... } })`, loaded
-// there via `icons_url`). TinyMCE falls back to the "default" icon pack for
-// any icon a named pack doesn't define, so only `save` needs overriding.
+// Berta's floppy-disk Save icon, registered as a custom icon pack. TinyMCE
+// falls back to the "default" icon pack for any icon a named pack doesn't
+// define, so only `save` needs overriding.
 const BERTA_ICON_PACK = 'berta';
 const BERTA_SAVE_ICON =
   '<svg width="24" height="24"><path d="m5 2c-1.645 0-3 1.355-3 3v14c0 1.645 1.355 3 3 3h14c1.645 0 3-1.355 3-3v-11a1.0001 1.0001 0 0 0-0.29297-0.70703l-5-5a1.0001 1.0001 0 0 0-0.70703-0.29297h-9zm0 2h1v4a1.0001 1.0001 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-7v-3h7.5859l4.4141 4.4141v10.586c0 0.56413-0.43587 1-1 1h-1v-7a1.0001 1.0001 0 0 0-1-1h-10a1.0001 1.0001 0 0 0-1 1v7h-1c-0.56413 0-1-0.43587-1-1v-14c0-0.56413 0.43587-1 1-1zm3 10h8v6h-8z"/></svg>';
@@ -39,10 +38,9 @@ const RICH_TEXT_BASE_CONFIG = {
   block_formats: 'Paragraph=p; Heading 2=h2; Heading 3=h3',
   convert_urls: false,
   relative_urls: false,
-  // Matches legacy's own MCE config (`BertaEditorBase.js`'s
-  // `tinyMCESettings.Base`): without this, TinyMCE 6+'s default sandboxing
-  // of its own editing iframe changes how embedded content (e.g. a pasted
-  // video embed) behaves while being re-edited.
+  // Without this, TinyMCE 6+'s default sandboxing of its own editing iframe
+  // changes how embedded content (e.g. a pasted video embed) behaves while
+  // being re-edited.
   sandbox_iframes: false,
   icons: BERTA_ICON_PACK,
 };
@@ -63,11 +61,9 @@ const RICH_TEXT_SIMPLE_CONFIG = {
 /**
  * Hosts a TinyMCE instance for `.xNgEditableRTE`/`.xNgEditableRTESimple`
  * fields. Unlike `InlineEditOverlayComponent`'s plain `<textarea>`, saving
- * happens via TinyMCE's own toolbar Save button (`save_onsavecallback`) —
- * matching legacy's MCE fields exactly, which have never had a blur- or
- * click-away-to-save/cancel mechanism of their own (see
- * `engine/js/inline_edit.js`'s WYSIWYG branch). `InlineEditService` supplies
- * the click-away-to-discard behavior instead, via a CDK backdrop.
+ * happens only via TinyMCE's own toolbar Save button
+ * (`save_onsavecallback`); there is no blur-to-save. `InlineEditService`
+ * supplies the click-away-to-discard behavior instead, via a CDK backdrop.
  */
 @Component({
   selector: 'berta-inline-edit-rich-text-overlay',
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts b/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
new file mode 100644
index 000000000..57e2291a1
--- /dev/null
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
@@ -0,0 +1,141 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { Store } from '@ngxs/store';
+
+import { InlineEditService } from './inline-edit.service';
+
+/**
+ * Covers the single-line field value-transform/side-effect methods in
+ * isolation. These are pure or near-pure (plain `HTMLElement` in,
+ * string/void out), so a real `Overlay`/`Store` is never exercised — the
+ * constructor only stores the references (plus registering window
+ * resize/scroll listeners), it never calls into them.
+ */
+describe('InlineEditService (field value transforms)', () => {
+  let service: InlineEditService;
+
+  beforeEach(() => {
+    service = new InlineEditService({} as Overlay, {} as Store);
+  });
+
+  function elementWithClasses(classes: string[]): HTMLElement {
+    const el = document.createElement('div');
+    el.className = classes.join(' ');
+    return el;
+  }
+
+  describe('applyCssUnits', () => {
+    it('appends "px" to a pure integer value on an xCSSUnits-1 field', () => {
+      const el = elementWithClasses(['xCSSUnits-1']);
+      expect((service as any).applyCssUnits(el, '300')).toBe('300px');
+    });
+
+    it('leaves "0" as "0" (no "px" appended)', () => {
+      const el = elementWithClasses(['xCSSUnits-1']);
+      expect((service as any).applyCssUnits(el, '0')).toBe('0');
+    });
+
+    it('leaves an empty value untouched', () => {
+      const el = elementWithClasses(['xCSSUnits-1']);
+      expect((service as any).applyCssUnits(el, '')).toBe('');
+    });
+
+    it('collapses a single space before a trailing unit', () => {
+      const el = elementWithClasses(['xCSSUnits-1']);
+      expect((service as any).applyCssUnits(el, '300 px')).toBe('300px');
+      expect((service as any).applyCssUnits(el, '2 em')).toBe('2em');
+    });
+
+    it('leaves non-integer values untouched', () => {
+      const el = elementWithClasses(['xCSSUnits-1']);
+      expect((service as any).applyCssUnits(el, '300px')).toBe('300px');
+      expect((service as any).applyCssUnits(el, '12.5')).toBe('12.5');
+    });
+
+    it('is a no-op for fields without xCSSUnits-1', () => {
+      const el = elementWithClasses(['xNgEditable']);
+      expect((service as any).applyCssUnits(el, '300')).toBe('300');
+    });
+  });
+
+  describe('applyPriceParsing', () => {
+    it('parses to a bare float string on xFormatModifier-toPrice fields', () => {
+      const el = elementWithClasses(['xFormatModifier-toPrice']);
+      expect((service as any).applyPriceParsing(el, '19.990')).toBe('19.99');
+    });
+
+    it('saves a zero/unparseable/empty value as empty', () => {
+      const el = elementWithClasses(['xFormatModifier-toPrice']);
+      expect((service as any).applyPriceParsing(el, '')).toBe('');
+      expect((service as any).applyPriceParsing(el, '0')).toBe('');
+      expect((service as any).applyPriceParsing(el, 'abc')).toBe('');
+    });
+
+    it('is a no-op for fields without xFormatModifier-toPrice', () => {
+      const el = elementWithClasses(['xNgEditable']);
+      expect((service as any).applyPriceParsing(el, '19.990')).toBe('19.990');
+    });
+  });
+
+  describe('formatTags', () => {
+    it('trims, filters empty entries, and dedupes', () => {
+      const result = (service as any).formatTags('a, b,,  b ,c');
+      expect(result).toEqual({ display: 'a / b / c', real: 'a, b, c' });
+    });
+
+    it('handles a single tag', () => {
+      expect((service as any).formatTags('solo')).toEqual({
+        display: 'solo',
+        real: 'solo',
+      });
+    });
+  });
+
+  describe('syncTitle', () => {
+    it('sets title on data-ng-edit-via-title fields', () => {
+      const el = document.createElement('div');
+      el.dataset['ngEditViaTitle'] = '1';
+
+      (service as any).syncTitle(el, '19.99');
+
+      expect(el.title).toBe('19.99');
+    });
+
+    it('is a no-op without data-ng-edit-via-title', () => {
+      const el = document.createElement('div');
+      el.title = 'unchanged';
+
+      (service as any).syncTitle(el, '19.99');
+
+      expect(el.title).toBe('unchanged');
+    });
+  });
+
+  describe('readFieldValue', () => {
+    it('reads from title on single-line data-ng-edit-via-title fields', () => {
+      const el = document.createElement('div');
+      el.dataset['ngEditViaTitle'] = '1';
+      el.title = '19.99';
+      el.textContent = '$19.99';
+
+      expect((service as any).readFieldValue(el, false)).toBe('19.99');
+    });
+
+    it('reads from textContent when data-ng-edit-via-title is absent', () => {
+      const el = document.createElement('div');
+      el.textContent = 'plain text';
+
+      expect((service as any).readFieldValue(el, false)).toBe('plain text');
+    });
+
+    it('ignores data-ng-edit-via-title for multiline fields', () => {
+      const el = document.createElement('div');
+      el.dataset['ngEditViaTitle'] = '1';
+      el.title = 'ignored';
+      el.innerHTML = 'line one<br />line two';
+
+      expect((service as any).readFieldValue(el, true)).toBe(
+        'line one\nline two',
+      );
+    });
+  });
+});
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index 58b2b3cce..9e30b20dc 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -19,6 +19,8 @@ const MULTILINE_CLASS = 'xNgEditableTA';
 const RICH_TEXT_SELECTOR = '.xNgEditableRTE, .xNgEditableRTESimple';
 const RICH_TEXT_SIMPLE_CLASS = 'xNgEditableRTESimple';
 const DROPDOWN_BOX_SELECTOR = '.xEntryDropdownBox';
+const EDIT_WRAP_BUTTONS_SELECTOR = '.xEntryEditWrapButtons';
+const EDIT_WRAP_SELECTOR = '.xEntryEditWrap';
 const CHECKBOX_SELECTOR = '.xNgEditableCheckBox';
 const FIXED_PROPERTY_CLASS = 'xProperty-fixed';
 const SAVING_CLASS = 'xSaving';
@@ -60,24 +62,20 @@ interface OpenEdit {
   originalHtml: string;
   overlayRef: OverlayRef;
   positionStrategy: FlexibleConnectedPositionStrategy;
-  dropdownBox: HTMLElement | null;
-  suppressDropdownClose: (event: Event) => void;
-  // Rich-text overlays use a fixed size (matching legacy's own hardcoded
-  // TinyMCE dimensions) rather than tracking the edited element's own
-  // (much smaller) rendered box, so geometry refreshes must reposition
+  legacyHideContainer: HTMLElement | null;
+  suppressLegacyHideClose: (event: Event) => void;
+  // Rich-text overlays use a fixed toolbar-driven size rather than tracking
+  // the edited element's own (much smaller) rendered box, so geometry refreshes must reposition
   // without also resetting the overlay back to that box's size.
   syncSizeOnRefresh: boolean;
 }
 
 /**
  * Click-to-edit for `.xNgEditable` (single-line) and `.xNgEditableTA`
- * (multi-line) elements rendered inside the (same-origin) preview iframe.
- * This is the Angular-native replacement for the legacy MooTools
- * `elementEdit_init`/`inlineEdit` mechanism in `engine/js/BertaEditorBase.js`
- * / `engine/js/inline_edit.js` — adopted one field at a time by swapping a
- * field's server-rendered class from `xEditable`/`xEditableTA` to the
- * `xNgEditable`/`xNgEditableTA` markers this service listens for, so
- * migrated and not-yet-migrated fields can coexist on the same page.
+ * (multi-line) elements rendered inside the (same-origin) preview iframe,
+ * plus `.xNgEditableRTE`/`.xNgEditableRTESimple` rich-text fields and
+ * `.xNgEditableCheckBox` toggles. Editing happens in a CDK overlay in the
+ * parent document, positioned over the edited element.
  */
 @Injectable({
   providedIn: 'root',
@@ -229,8 +227,8 @@ export class InlineEditService {
    * `.xEntry` and, when the page layout is centered, compensates the
    * entry's inline `left` for the coordinate-frame change `.xFixed` causes
    * (`position: fixed` switches it from container-relative to
-   * viewport-relative). This compensation must stay exact: the
-   * drag-and-drop handler in `BertaEditorBase.js` reads/re-applies the same
+   * viewport-relative). This compensation must stay exact: the engine's
+   * drag-and-drop handler (`BertaEditorBase.js`) reads/re-applies the same
    * formula at drag-end, so an uncompensated value here would be silently
    * corrupted the next time the entry is dragged.
    */
@@ -272,6 +270,44 @@ export class InlineEditService {
     }
   }
 
+  /**
+   * Finds the ancestor element (if any) whose `mouseleave` handler in the
+   * engine's `BertaEditor.js` would prematurely hide `el`'s editor purely
+   * because the CDK overlay covering `el` lives in the parent document, not
+   * the iframe — see `openEditor`'s `suppressLegacyHideClose` for how the
+   * returned element is used. Two distinct hide mechanisms are covered,
+   * each toggling a different CSS-driven visibility class on a different
+   * ancestor:
+   *  - `.xEntryDropdownBox` (width/weight/cartAttributes, nested inside the
+   *    entry's "..." dropdown menu): `mouseleave` is bound directly on this
+   *    element, toggling its own `.xVisible` class.
+   *  - the tags field (nested inside `.xEntryEditWrapButtons`): `mouseleave`
+   *    is bound on `.xEntryEditWrap` — the OUTER wrapper, not
+   *    `.xEntryEditWrapButtons` itself (`BertaEditor.js`'s
+   *    `entryOnHover`/`entryOnUnHover`) — removing `.xEntryHover` from the
+   *    ancestor `.xEntry`, which `.xEntryEditWrapButtons`'s own visibility
+   *    is styled to depend on (`editor.css.php`). `.xEntryEditWrap` also
+   *    contains title/url/description (via `entryContents`), which have no
+   *    such mouseleave-driven hide behavior at all, so this only applies
+   *    when `el` is specifically inside `.xEntryEditWrapButtons` — never
+   *    unconditionally for every field under `.xEntryEditWrap`.
+   */
+  private findLegacyHideContainer(el: HTMLElement): HTMLElement | null {
+    const dropdownBox = el.closest(DROPDOWN_BOX_SELECTOR) as HTMLElement | null;
+
+    if (dropdownBox) {
+      return dropdownBox;
+    }
+
+    const editWrapButtons = el.closest(
+      EDIT_WRAP_BUTTONS_SELECTOR,
+    ) as HTMLElement | null;
+
+    return editWrapButtons
+      ? (editWrapButtons.closest(EDIT_WRAP_SELECTOR) as HTMLElement | null)
+      : null;
+  }
+
   private openEditor(el: HTMLElement, iframe: HTMLIFrameElement) {
     const path = el.dataset['path'];
 
@@ -351,25 +387,28 @@ export class InlineEditService {
 
     // The overlay lives in the parent document, so whenever it covers `el`,
     // the iframe stops receiving pointer events there — from its own
-    // perspective, the mouse just left whatever was underneath. A field
-    // nested inside `.xEntryDropdownBox` (e.g. cartAttributes/weight) sits
-    // inside a menu that legacy (`BertaEditor.js`) closes on exactly that
-    // `mouseleave`, which never happened before since legacy's own inline
-    // editor replaces content in place, inside the same iframe document —
-    // the mouse never actually left. The overlay's computed bounds can be
-    // fractional/subpixel and don't always cover `el` with pixel-perfect
-    // precision, so moving the cursor within the field can fire more than
-    // one of these spurious events, not just one at open time — classify
-    // each one instead of only eating the first: if the cursor is still
-    // geometrically over the overlay when this fires, it's spurious
-    // (suppress); if the cursor has genuinely moved elsewhere, it's a real
-    // departure — let it through so the menu still closes exactly as before
-    // migration, and also close our own overlay in sync (via a real blur,
-    // running the normal save/cancel logic) since legacy's in-place editor
-    // would have been auto-blurred by its container hiding, which an
-    // overlay in a different document never gets for free.
-    const dropdownBox = el.closest(DROPDOWN_BOX_SELECTOR) as HTMLElement | null;
-    const suppressDropdownClose = (event: MouseEvent) => {
+    // perspective, the mouse just left whatever was underneath. Two
+    // different `BertaEditor.js` `mouseleave` handlers can react to
+    // that as if the mouse had genuinely left the field's whole surrounding
+    // area, closing something that should have stayed open while editing:
+    // `.xEntryDropdownBox` (e.g. cartAttributes/weight, nested inside the
+    // entry's dropdown menu) removes its own `.xVisible` on `mouseleave`;
+    // `.xEntryEditWrap` (e.g. the tags field, nested inside
+    // `.xEntryEditWrapButtons`) removes `.xEntryHover` from the ancestor
+    // `.xEntry` on `mouseleave`, which `.xEntryEditWrapButtons`'s own
+    // visibility is styled to depend on. The overlay's computed bounds can be fractional/subpixel and
+    // don't always cover `el` with pixel-perfect precision, so moving the
+    // cursor within the field can fire more than one of these spurious
+    // events, not just one at open time — classify each one instead of only
+    // eating the first: if the cursor is still geometrically over the
+    // overlay when this fires, it's spurious (suppress); if the cursor has
+    // genuinely moved elsewhere, it's a real departure — let it through so
+    // the container still closes/hides, and also close our own overlay in
+    // sync (via a real blur, running the normal save/cancel logic) since an
+    // overlay in a different document never gets auto-blurred by its
+    // container hiding.
+    const legacyHideContainer = this.findLegacyHideContainer(el);
+    const suppressLegacyHideClose = (event: MouseEvent) => {
       const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
       const iframeRect = iframe.getBoundingClientRect();
       const x = iframeRect.left + event.clientX;
@@ -387,8 +426,12 @@ export class InlineEditService {
       }
     };
 
-    if (dropdownBox) {
-      dropdownBox.addEventListener('mouseleave', suppressDropdownClose, true);
+    if (legacyHideContainer) {
+      legacyHideContainer.addEventListener(
+        'mouseleave',
+        suppressLegacyHideClose,
+        true,
+      );
     }
 
     this.openEdit = {
@@ -397,8 +440,8 @@ export class InlineEditService {
       originalHtml,
       overlayRef,
       positionStrategy,
-      dropdownBox,
-      suppressDropdownClose,
+      legacyHideContainer,
+      suppressLegacyHideClose,
       syncSizeOnRefresh: true,
     };
 
@@ -427,6 +470,8 @@ export class InlineEditService {
         storedValue = this.textToHtml(newValue);
       } else {
         finalValue = this.applyUnits(el, newValue);
+        finalValue = this.applyCssUnits(el, finalValue);
+        finalValue = this.applyPriceParsing(el, finalValue);
         storedValue = this.applyRawEncoding(el, finalValue);
       }
 
@@ -440,7 +485,12 @@ export class InlineEditService {
 
       this.store.dispatch(action).subscribe({
         next: () => {
-          this.writeFieldValue(el, finalValue, multiline);
+          const tags = el.classList.contains('xFormatModifier-toTags')
+            ? this.formatTags(finalValue)
+            : null;
+
+          this.writeFieldValue(el, tags ? tags.display : finalValue, multiline);
+          this.syncTitle(el, tags ? tags.real : finalValue);
           this.closeOpenOverlay(false);
         },
         error: () => this.closeOpenOverlay(),
@@ -486,9 +536,8 @@ export class InlineEditService {
           overlayY: 'top',
         },
       ]);
-    // Full toolbar matches legacy's own hardcoded 563px regardless of the
-    // field's own width; simple toolbar matches the field's width, same as
-    // legacy's "100%" (of the edited element's own box). Kept in a local
+    // Full toolbar uses a fixed 563px regardless of the field's own width;
+    // simple toolbar matches the field's width. Kept in a local
     // since the `resize` subscription below needs to reuse it on every
     // resize, not just at creation.
     const overlayWidth = simple ? origin.width : 563;
@@ -531,14 +580,17 @@ export class InlineEditService {
     componentRef.instance.simple = simple;
     componentRef.instance.contentStyle = contentStyle;
 
+    // The only `.xNgEditableRTE` field (`description`, `_entryContents.twig`)
+    // never sits inside `.xEntryEditWrapButtons` or `.xEntryDropdownBox`, so
+    // there's no hide container to suppress here.
     this.openEdit = {
       el,
       iframe,
       originalHtml,
       overlayRef,
       positionStrategy,
-      dropdownBox: null,
-      suppressDropdownClose: () => {},
+      legacyHideContainer: null,
+      suppressLegacyHideClose: () => {},
       syncSizeOnRefresh: false,
     };
 
@@ -586,8 +638,7 @@ export class InlineEditService {
   }
 
   /**
-   * Equivalent of legacy's `setAllStylesMCE` (`engine/js/inline_edit.js`):
-   * copies the field's computed font/color styling onto the TinyMCE body so
+   * Copies the field's computed font/color styling onto the TinyMCE body so
    * the edited text doesn't look like a generic editor. Read before `el` is
    * hidden, same ordering as `readFontStyle`/`createVirtualOrigin` above.
    */
@@ -622,13 +673,11 @@ export class InlineEditService {
 
   /**
    * When empty, the server renders a visible `.xEmpty` placeholder span
-   * inside the element (mirroring the legacy `makePlaceholderIfEmpty`
-   * mechanism in `BertaEditorBase.js`) so the field stays visible/clickable.
+   * inside the element so the field stays visible/clickable.
    * The placeholder text is not the field's actual value, so it must be
    * excluded when reading the current value back out.
    *
-   * Trimmed the same way legacy does (`inline_edit.js`'s
-   * `this.oldContent.trim()`), since server templates are free to format
+   * The value is trimmed, since server templates are free to format
    * markup across multiple indented lines — harmless in normal CSS flow
    * (leading/trailing whitespace collapses), but it would otherwise leak
    * into the value verbatim once read via `innerHTML`/`textContent`.
@@ -640,6 +689,15 @@ export class InlineEditService {
       return '';
     }
 
+    // `data-ng-edit-via-title` fields (entry width, cart price, tags) read
+    // their editable raw value from `title` rather than the displayed
+    // content. For cartPrice/tags the two differ (formatted/joined display
+    // vs. raw value); width's two happen to be identical, but the flag stays
+    // generic rather than special-casing which field needs it.
+    if (!multiline && el.dataset['ngEditViaTitle']) {
+      return (el.title ?? '').trim();
+    }
+
     return multiline
       ? this.htmlToText(el.innerHTML.trim())
       : (el.textContent ?? '').trim();
@@ -666,12 +724,11 @@ export class InlineEditService {
   }
 
   /**
-   * Matches legacy's generic `xUnits-*` handling in `elementEdit_save`
-   * (`BertaEditorBase.js`): a field carrying this class (e.g. `weight` via
+   * A field carrying an `xUnits-*` class (e.g. `weight` via
    * `xUnits-{{ weightUnits }}`) stores an integer with the unit suffix
    * appended (e.g. "5" with units "kg" saves as "5kg"), regardless of what
    * property it is — detected generically from the class, not hardcoded to
-   * one field, so it covers any other `xUnits-*` field migrated later.
+   * one field.
    */
   private applyUnits(el: HTMLElement, value: string): string {
     const match = el.className.match(/xUnits-(\S+)/);
@@ -685,11 +742,91 @@ export class InlineEditService {
     return String(numeric || 0) + match[1];
   }
 
+  /**
+   * A field carrying `xCSSUnits-1` (currently only `content/width`) first
+   * has a single space before a trailing unit collapsed ("300 px" ->
+   * "300px"), then gets "px" appended when the value is a non-zero pure
+   * integer; "0" is left as "0" (no suffix). An empty value fails the
+   * numeric check (`parseInt("")` is `NaN`) and passes through untouched, so
+   * the field is simply cleared. `Number(value) === parseInt(value, 10)` is
+   * true only for values that are wholly an integer (e.g. rejects "12.5"
+   * and "12abc").
+   */
+  private applyCssUnits(el: HTMLElement, value: string): string {
+    if (!el.classList.contains('xCSSUnits-1')) {
+      return value;
+    }
+
+    const normalized = value.replace(/\s(px|pt|em)$/i, '$1');
+
+    if (Number(normalized) !== parseInt(normalized, 10)) {
+      return normalized;
+    }
+
+    return normalized === '0' ? '0' : `${normalized}px`;
+  }
+
+  /**
+   * On `xFormatModifier-toPrice` fields the saved value becomes a bare
+   * `parseFloat` result, dropping any trailing formatting the user typed
+   * (e.g. "19.990" -> "19.99"). A zero or unparseable result saves as
+   * empty, so the field falls back to its `price` placeholder. The
+   * currency-formatted display (`formatPrice`) comes from the entry rerender
+   * that follows every successful entry save
+   * (`TemplateRerenderService.handleSectionEntryUpdateRerender`), not from
+   * the value written back here.
+   */
+  private applyPriceParsing(el: HTMLElement, value: string): string {
+    if (!el.classList.contains('xFormatModifier-toPrice')) {
+      return value;
+    }
+
+    const price = parseFloat(value);
+
+    return price ? String(price) : '';
+  }
+
+  /**
+   * Mirrors `Helpers::toTags` (`_api_app/app/Shared/Helpers.php`) and the two
+   * differently-joined values `SectionEntriesDataService::saveValueByPath`
+   * computes for a tags save: `display` becomes the visible content
+   * (space-slash joined), `real` becomes `title` (comma-space joined).
+   * Computed client-side rather than read out of the save response, so the
+   * write-back can reuse the same success-callback shape as every other
+   * field instead of threading the raw HTTP payload back to the
+   * click-handling code. The entry rerender that follows the save
+   * (`TemplateRerenderService.handleSectionEntryUpdateRerender`) then
+   * replaces both with the state-rendered `tagList`.
+   */
+  private formatTags(value: string): { display: string; real: string } {
+    const tags = Array.from(
+      new Set(
+        value
+          .split(',')
+          .map((tag) => tag.trim())
+          .filter((tag) => tag.length > 0),
+      ),
+    );
+
+    return { display: tags.join(' / '), real: tags.join(', ') };
+  }
+
+  /**
+   * Resyncs `title` after a successful save for `data-ng-edit-via-title`
+   * fields, so the next edit opens with the new raw value. Assigning the DOM
+   * `.title` property stores plain text, so no entity encoding/decoding is
+   * needed. No-op for every other field.
+   */
+  private syncTitle(el: HTMLElement, value: string) {
+    if (el.dataset['ngEditViaTitle']) {
+      el.title = value;
+    }
+  }
+
   /**
    * Fields rendered with Twig's `|raw` filter (opted in via `data-ng-raw`,
    * e.g. site heading) bypass Twig's auto-escaping, so the stored value must
-   * already be safe HTML — matching legacy's universal `addHTMLEntities`
-   * encoding. Fields rendered without `|raw` (the majority) must NOT be
+   * already be safe HTML. Fields rendered without `|raw` (the majority) must NOT be
    * pre-encoded here: Twig already escapes them at render time, so encoding
    * on top would double-escape (e.g. a saved "&amp;" would render literally
    * as "&amp;amp;" instead of "&").
@@ -699,8 +836,8 @@ export class InlineEditService {
   }
 
   /**
-   * Matches the net effect of legacy's `addHTMLEntities` + `escapeForJSON`
-   * round-trip: `&`/`<`/`>` are encoded, `"` is deliberately left literal.
+   * Encodes `&`/`<`/`>` for stored `|raw` values; `"` is deliberately left
+   * literal, matching the existing stored-content convention.
    */
   private encodeEntities(value: string): string {
     return value
@@ -714,7 +851,7 @@ export class InlineEditService {
    * this service constructs itself — the `.xEmpty` placeholder span and
    * `.xNgEditableTA` content via `textToHtml`/`textToDisplayHtml`. Distinct
    * from `encodeEntities`, which intentionally leaves `"` literal to match
-   * legacy's specific saved-value convention.
+   * the stored-content convention.
    */
   private escapeHtml(value: string): string {
     return value
@@ -726,9 +863,7 @@ export class InlineEditService {
 
   /**
    * `.xNgEditableTA` (multi-line) fields store literal `<br />` tags for line
-   * breaks rather than real newlines, matching the legacy `.xEditableTA`
-   * convention (`engine/js/inline_edit.js`'s `onSave`/`initialize`) so
-   * existing stored content and unescaped-HTML template rendering
+   * breaks rather than real newlines, so existing stored content and unescaped-HTML template rendering
    * (`{{ ...|raw }}`) stay compatible. The true inverse of `textToHtml`: `<br>`
    * tags become newlines first, then parsing the result and reading
    * `textContent` decodes every HTML entity `escapeHtml` produced back to its
@@ -842,10 +977,10 @@ export class InlineEditService {
     this.openEdit.el.style.width = '';
     this.openEdit.el.style.visibility = '';
 
-    if (this.openEdit.dropdownBox) {
-      this.openEdit.dropdownBox.removeEventListener(
+    if (this.openEdit.legacyHideContainer) {
+      this.openEdit.legacyHideContainer.removeEventListener(
         'mouseleave',
-        this.openEdit.suppressDropdownClose,
+        this.openEdit.suppressLegacyHideClose,
         true,
       );
     }
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index b7cc91ecb..0d3c4b25d 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -850,7 +850,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
     {% endif %}
 
     <div class="tagsList">
-      <div title="{{ tagList }}" class="xEditableRC xNoHTMLEntities xProperty-submenu xFormatModifier-toTags xSkipSetStyles-1" data-path="{{apiPath}}tags/tag">{{ tagList }}</div>
+      <div title="{{ tagList }}" class="xNgEditable xNoHTMLEntities xProperty-submenu xFormatModifier-toTags" data-path="{{apiPath}}tags/tag" data-ng-edit-via-title="1" data-empty-caption="tags">{% if tagList %}{{ tagList }}{% else %}<span class="xEmpty">&nbsp;tags&nbsp;</span>{% endif %}</div>
     </div>
     <div class="xEntryDropdown"></div>
     <br class="clear" />
@@ -873,7 +873,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
         </li>
         <li>
           <div class="customWidth">
-            <div title="{{ entryWidth }}" class="xEditableRC xCSSUnits-1 xSkipSetStyles-1 xProperty-width" data-path="{{apiPath}}content/width">{{ entryWidth }}</div>
+            <div title="{{ entryWidth }}" class="xNgEditable xCSSUnits-1 xProperty-width" data-path="{{apiPath}}content/width" data-ng-edit-via-title="1" data-empty-caption="width">{% if entryWidth %}{{ entryWidth }}{% else %}<span class="xEmpty">&nbsp;width&nbsp;</span>{% endif %}</div>
           </div>
         </li>
       {% endif %}
@@ -961,7 +961,7 @@ export const TWIG_TEMPLATES: Record<string, string> = {
 `,
   'Sites/Sections/Entries/shop/_addToCart': `<div class="addToCart" data-uniqid="{{ uniqid }}">
   {% if isEditMode %}
-    <div class="cartPrice xEditableRC xProperty-cartPrice xCaption-price xFormatModifier-toPrice" title="{{ content.cartPrice }}"{{ attributes.cartPrice|raw }}>{{ cartPriceFormatted }}</div>
+    <div class="cartPrice xNgEditable xProperty-cartPrice xCaption-price xFormatModifier-toPrice" title="{{ content.cartPrice }}" data-ng-edit-via-title="1" data-empty-caption="price"{{ attributes.cartPrice|raw }}>{% if cartPriceFormatted %}{{ cartPriceFormatted }}{% else %}<span class="xEmpty">&nbsp;price&nbsp;</span>{% endif %}</div>
   {% else %}
     <div class="cartPrice" title="{{ content.cartPrice }}" data-weight="{{ content.weight }}">{{ cartPriceFormatted }}</div>
   {% endif %}
@@ -987,8 +987,8 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   'Sites/Sections/Entries/shop/_productAttributesEditor': `<div class="xEntrySeperator"></div>
 <div class="xEntryBoxParams">
   <b>Attribute</b>
-  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes xSkipSetStyles-1" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
-  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }} xSkipSetStyles-1" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-cartAttributes xCaption-attribute cCartAttributes" data-path="{{apiPath}}content/cartAttributes" data-empty-caption="attribute">{% if cartAttributesEdit %}{{ cartAttributesEdit }}{% else %}<span class="xEmpty">&nbsp;attribute&nbsp;</span>{% endif %}</div>
+  <div class="xNgEditable xProperty-weight xCaption-weight xUnits-{{ weightUnits }}" data-path="{{apiPath}}content/weight" data-empty-caption="weight">{% if entryWeight %}{{ entryWeight }}{% else %}<span class="xEmpty">&nbsp;weight&nbsp;</span>{% endif %}</div>
 </div>
 `,
   'Sites/Sections/additionalFooterText': `<div{{ attributes|raw }}>
diff --git a/editor/src/app/shop/products/shop-products.state.ts b/editor/src/app/shop/products/shop-products.state.ts
index f4fb1815c..04692b175 100644
--- a/editor/src/app/shop/products/shop-products.state.ts
+++ b/editor/src/app/shop/products/shop-products.state.ts
@@ -26,7 +26,10 @@ import {
   ResetShopProductsAction,
   InitShopProductsAction,
 } from './shop-products.actions';
-import { UpdateSectionEntryFromSyncAction } from '../../sites/sections/entries/entries-state/section-entries.actions';
+import {
+  UpdateSectionEntryAction,
+  UpdateSectionEntryFromSyncAction,
+} from '../../sites/sections/entries/entries-state/section-entries.actions';
 import { AppStateService } from '../../app-state/app-state.service';
 import { ShopState } from '../shop.state';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -79,6 +82,7 @@ export class ShopProductsState implements NgxsOnInit {
       this.actions$.pipe(
         ofActionSuccessful(
           UpdateSectionEntryFromSyncAction,
+          UpdateSectionEntryAction,
           SwapContentsSitesAction,
         ),
         filter((action) => {
@@ -86,7 +90,7 @@ export class ShopProductsState implements NgxsOnInit {
           if (action instanceof SwapContentsSitesAction) {
             return true;
           }
-          // Apply filter for UpdateSectionEntryFromSyncAction
+          // Apply filter for entry update actions
           const actions = ['cartTitle', 'cartPrice', 'cartAttributes'];
           const prop = action.path.split('/').pop();
           return actions.indexOf(prop) > -1;
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
index ba054555b..7de700ab0 100644
--- a/engine/css/editor.css.php
+++ b/engine/css/editor.css.php
@@ -144,16 +144,14 @@
 .xNgEditable,
 .xNgEditableTA,
 .xNgEditableRTE,
-.xNgEditableRTESimple,
-.xEditableRC {
+.xNgEditableRTESimple {
     cursor: default;
 }
 
 .xNgEditable:hover,
 .xNgEditableTA:hover,
 .xNgEditableRTE:hover,
-.xNgEditableRTESimple:hover,
-.xEditableRC:hover {
+.xNgEditableRTESimple:hover {
     background-color: rgba(255, 255, 153, .79);
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
index ebb73c328..35ee4554e 100644
--- a/engine/js/BertaEditor.js
+++ b/engine/js/BertaEditor.js
@@ -300,13 +300,6 @@ var BertaEditor = new Class({
 
   editablesInit: function () {
     // instantiate all xEditable elements in the page
-    // "real content" fields ////////////////////////////////////////////////////////////////////////////////////////////////////
-    $$(this.options.xBertaEditorClassRC).each(
-      function (el) {
-        this.elementEdit_init(el, this.options.xBertaEditorClassRC);
-      }.bind(this)
-    );
-
     // dragging /////////////////////////////////////////////////////////////////////////////////////////
     var draggableElements = $$(this.options.xBertaEditorClassDragXY);
     if (draggableElements.length) {
@@ -485,12 +478,7 @@ var BertaEditor = new Class({
       target = target.getParent(".xEntry");
     }
 
-    var tagsListInput = target.getElement(".tagsList input");
-
-    // If submenu input is not focused
-    if (!tagsListInput) {
-      target.removeClass("xEntryHover");
-    }
+    target.removeClass("xEntryHover");
     target.setAttribute("data-hover", "off");
   },
 
diff --git a/engine/js/BertaEditorBase.js b/engine/js/BertaEditorBase.js
index 6c1a6d6fc..be3699e63 100644
--- a/engine/js/BertaEditorBase.js
+++ b/engine/js/BertaEditorBase.js
@@ -31,13 +31,10 @@ var BertaEditorBase = new Class({
   Implements: [Options, Events],
 
   options: {
-    xBertaEditorClassRC: ".xEditableRC",
     xBertaEditorClassDragXY: ".xEditableDragXY",
     xEmptyClass: ".xEmpty",
   },
 
-  elementEdit_instances: new Array(),
-
   shiftPressed: false,
   xGuideLineX: null,
   xGuideLineY: null,
@@ -108,33 +105,6 @@ var BertaEditorBase = new Class({
     var self = this;
 
     switch (editorClass) {
-      case this.options.xBertaEditorClassRC:
-        el.store("onElementSave", onElementSave);
-        el.addClass(editorClass.substr(1));
-        el.addEvent(
-          "click",
-          function (event, editor) {
-            if (!this.hasClass("xSaving") && !this.hasClass("xEditing")) {
-              el.addClass("xEditing");
-              if (this.inlineIsEmpty()) this.innerHTML = "";
-              this.set("old_content", this.innerHTML);
-              this.set("text", this.get("title"));
-              editor.elementEdit_instances.push(
-                this.inlineEdit({
-                  onComplete: editor.elementEdit_save.bind(editor),
-                })
-              );
-              editor.fireEvent(BertaEditorBase.EDITABLE_START, [
-                el,
-                editor.elementEdit_instances[
-                  editor.elementEdit_instances.length - 1
-                ],
-              ]);
-            }
-          }.bindWithEvent(el, this)
-        );
-        break;
-
       case this.options.xBertaEditorClassDragXY:
         el.store("onElementSave", onElementSave);
         el.addClass(editorClass.substr(1));
@@ -344,141 +314,8 @@ var BertaEditorBase = new Class({
     newContent,
     newContentText
   ) {
-    var args = arguments;
-    var params = [
-      "elEditor",
-      "el",
-      "oldContent",
-      "oldContentText",
-      "newContent",
-      "newContentText",
-    ];
-
-    if (oldContent == newContent && !el.hasClass("xBgColor")) {
-      var content = oldContent;
-      if (content.test("^([s\xA0]|&nbsp;)+$")) content = ""; // empty, if contains only rubbish (\xA0 == &nbsp;)
-      if (content) {
-        el.set(
-          "html",
-          el.get("old_content") ? el.get("old_content") : oldContentText
-        );
-      } else {
-        this.makePlaceholder(el);
-      }
-      el.removeClass("xEditing");
-    } else if (oldContent != newContent || el.hasClass("xBgColor")) {
-      var property = el.getClassStoredValue("xProperty");
-      var useCSSUnits = el.getClassStoredValue("xCSSUnits") > 0;
-      var xUnits = el.getClassStoredValue("xUnits");
-      var isToPrice = el.getClassStoredValue("xFormatModifier") == "toPrice";
-      var isCartAttributes = property == "cartAttributes";
-      var noHTMLEntities = el.hasClass("xNoHTMLEntities");
-      var isLink = el.hasClass("xLink");
-      var entryInfo = this.getEntryInfoForElement(el);
-      if (entryInfo.section == "") entryInfo.section = this.sectionName;
-
-      // px/em/pt value validator
-      if (el.hasClass(this.options.xBertaEditorClassRC.substr(1))) {
-        if (/(\spx|\spt|\sem)$/i.test(newContent)) {
-          newContent = newContent.replace(
-            /(\spx|\spt|\sem)$/i,
-            newContent.substr(-2)
-          );
-          newContentText = newContent;
-        }
-      }
-
-      // check if new content is not empty and revert it to default value, if specified
-      if (!newContent || newContent.test("^([s\xA0]|&nbsp;)+$")) {
-        var isRequired = el.getClassStoredValue("xRequired");
-        newContent = newContentText = isRequired ? el.get("title") : "";
-        el.set("html", newContentText);
-      }
-
+    if (oldContent != newContent) {
       newContent = newContent ? newContent.trim() : "";
-      if (noHTMLEntities && elEditor && elEditor.removeHTMLEntities)
-        newContent = elEditor.removeHTMLEntities(newContent);
-      //console.debug(newContent, parseInt(newContent), newContent == parseInt(newContent));
-      if (newContent == parseInt(newContent) && useCSSUnits) {
-        if (!newContent || newContent == "0") newContent = "0";
-        else {
-          newContent = String(newContent) + "px";
-        }
-      }
-
-      //for integer numbers with custom units
-      if (xUnits && xUnits.length) {
-        newContent = parseInt(newContent);
-        newContent = newContent ? newContent : 0;
-        newContent = String(newContent) + xUnits;
-      }
-
-      //create prefix for links
-      if (isLink) {
-        if (newContent.length && newContent.search(":") < 0) {
-          newContent = "http://" + newContent;
-        }
-      }
-
-      if (isToPrice) {
-        //add "add to cart" button
-        var aele = el.getNext(".aele");
-        var cartAttributes = el.getNext(".cartAttributes");
-        if (aele) {
-          newContent = parseFloat(newContent);
-
-          if (newContent) {
-            aele.removeClass("hidden");
-            cartAttributes.removeClass("hidden");
-          } else {
-            aele.addClass("hidden");
-            cartAttributes.addClass("hidden");
-          }
-        }
-      }
-
-      if (isCartAttributes) {
-        var cartAttributes = el
-          .getParent(".xEntry")
-          .getElement(".cartAttributes");
-        var cartPrice = el
-          .getParent(".xEntry")
-          .getElement(".cartPrice")
-          .get("text");
-        var values = newContent.split(",");
-        var isList = !(values.length == 1 && values[0] == "");
-
-        cartAttributes.set("text", "").addClass("hidden");
-
-        //generate select box on the fly - is price is > 0
-        if (isList) {
-          var selectBox = new Element("select", {
-            class: "cart_attributes",
-          });
-          for (var i = 0; i < values.length; i++) {
-            var val = values[i].trim();
-            val = this.unescapeHtml(val);
-            var selectBoxOption = new Element("option", {
-              value: val,
-            });
-            selectBoxOption.set("text", val);
-            selectBoxOption.inject(selectBox);
-          }
-          selectBox.inject(cartAttributes);
-          if (parseInt(cartPrice) > 0) {
-            cartAttributes.removeClass("hidden");
-          }
-        }
-      }
-
-      if (el.hasClass("xProperty-width")) {
-        var entry = el.getParent(".xEntry");
-        if (newContent.length) {
-          entry.setStyle("width", newContent);
-        } else {
-          entry.setStyle("width", null);
-        }
-      }
 
       // SAVE
       el.removeClass("xEditing");
@@ -546,23 +383,6 @@ var BertaEditorBase = new Class({
             this.makePlaceholder(el);
             break;
 
-          case el.hasClass(this.options.xBertaEditorClassRC.substr(1)):
-            // for simple RC textfields we additionally set the real_content property
-            if (
-              (el.hasClass("xEntryAutoPlay") || el.hasClass("xBgAutoPlay")) &&
-              !/^\d+$/.test(newContentText)
-            ) {
-              el.set("title", 0);
-              el.set("text", 0);
-            } else if (el.hasClass("xEntryLinkAddress") && !newContentText) {
-              el.set("title", "http://");
-              el.set("html", "http://");
-            } else {
-              el.set("title", elEditor.removeHTMLEntities(resp.real));
-              el.set("html", resp.update);
-            }
-            break;
-
           default:
             // for all other cases just update the HTML, if the editor instance is present
             // (editor instance is not present, for instance, in real input fields (checkbox, etc..))
@@ -576,7 +396,6 @@ var BertaEditorBase = new Class({
 
         el.removeClass("xSaving");
         el.removeClass("xEditing");
-        el.removeProperty("old_content");
       }
 
       // if there is a stored onSave event, execute it
@@ -596,14 +415,6 @@ var BertaEditorBase = new Class({
   ///  Utilities  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-  unescapeHtml: function (str) {
-    var temp = document.createElement("div");
-    temp.innerHTML = str;
-    var result = temp.childNodes[0].nodeValue;
-    temp.removeChild(temp.firstChild);
-    return result;
-  },
-
   getEmptyPlaceholder: function (property, caption) {
     if (caption) property = caption.replace(/\+/g, " ");
     else {
@@ -668,5 +479,4 @@ var BertaEditorBase = new Class({
 
 });
 
-BertaEditorBase.EDITABLE_START = "editable_start";
 BertaEditorBase.EDITABLE_FINISH = "editable_finish";
diff --git a/engine/js/inline_edit.js b/engine/js/inline_edit.js
deleted file mode 100644
index cba02dab0..000000000
--- a/engine/js/inline_edit.js
+++ /dev/null
@@ -1,219 +0,0 @@
-var inlineEdit = new Class({
-  getOptions: function () {
-    return {
-      onComplete: function (el, oldContent, newContent) {},
-      type: "input",
-      subtype: "", // 'font' for font selector (type = 'select')
-      selectOptions: new Array(),
-      dontHideOnBlur: false,
-    };
-  },
-
-  addHTMLEntities: function (str) {
-    var s = [
-      new RegExp("&", "g"),
-      new RegExp('"', "g"),
-      new RegExp("<", "g"),
-      new RegExp(">", "g"),
-    ];
-    var r = ["&amp;", "&quot;", "&lt;", "&gt;"];
-    for (var i = 0; i < s.length; i++) {
-      str = str.replace(s[i], r[i]);
-    }
-    return str;
-  },
-
-  removeHTMLEntities: function (str) {
-    var ta = new Element("textarea");
-    ta.set("html", str.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
-    var returnValue = ta.value;
-    ta.destroy();
-    return returnValue;
-  },
-
-  initialize: function (element, options) {
-    options.skipSetStyles = element.getClassStoredValue("xSkipSetStyles");
-    this.setOptions(this.getOptions(), options);
-    if (!element.innerHTML.toLowerCase().match("<" + this.options.type)) {
-      this.editting = element;
-
-      // get element's content
-      this.oldContent = this.oldContentText = element.innerHTML;
-      var content = this.oldContent.trim();
-      content = content.replace(new RegExp("<br.*?/?>", "gi"), "\n");
-      content = this.removeHTMLEntities(content);
-
-      var inputBoxId =
-        "_replacement" + $random(0, 9999) + $random(0, 9999) + $random(0, 9999);
-
-      // create the replacement element and set it's value
-      this.inputBox = new Element(this.options.type, {
-        id: inputBoxId,
-        value: content,
-      }).setStyles({
-        margin: "-3px -4px -3px -4px",
-        "border-width": "1px",
-        padding: "2px",
-        width: "80%",
-        "font-size": "100%",
-      });
-
-      //set height for longtext - textarea
-      if (this.options.type == "textarea") {
-        var height = element.getSize().y;
-        this.inputBox.setStyles({
-          height: height + "px",
-        });
-      }
-
-      if (!this.inputBox.value) {
-        try {
-          this.inputBox.set("html", content);
-        } catch (e) {}
-      }
-
-      if (!this.options.skipSetStyles) {
-        this.setAllStyles(element, this.inputBox);
-      }
-
-      // for selects create options and select the right one
-      var curOption;
-      if (this.options.type == "select") {
-        for (var i = 0; i < this.options.selectOptions.length; i++) {
-          curOption = this.options.selectOptions[i].split("|");
-          if (curOption.length == 1)
-            curOption[1] = this.options.selectOptions[i];
-
-          new Element("option", {
-            style:
-              this.options.subtype == "font"
-                ? "font-family: " + curOption[0] + "; font-size: 16px"
-                : "",
-          })
-            .setProperty("value", curOption[0])
-            .setProperty("value_title", curOption[1])
-            .setProperty(
-              "selected",
-              this.options.subtype == "rc" || this.options.subtype == "font"
-                ? curOption[1] == this.oldContentText
-                : curOption[0] == this.oldContent
-            )
-            .set("html", curOption[1])
-            .injectInside(this.inputBox);
-
-          // for RC selects we have to save the current selected value because the editable element contains text which is not the real value
-          if (
-            (this.options.subtype == "rc" || this.options.subtype == "font") &&
-            curOption[1] == this.oldContentText
-          )
-            this.oldContent = curOption[0];
-        }
-      }
-
-      // inject the replacement into the DOM and give it focus
-      this.editting.set("html", "");
-      this.inputBox.injectInside(this.editting);
-      (function () {
-        try {
-          this.inputBox.focus();
-        } catch (e) {}
-        if (this.inputBox.select) this.inputBox.select();
-      })
-        .bind(this)
-        .delay(300);
-
-      // add events
-      this.inputBox.addEvent("change", this.onSave.bind(this));
-      if (!this.options.dontHideOnBlur)
-        this.inputBox.addEvent("blur", this.onSave.bind(this));
-    }
-  },
-
-  onSave: function () {
-    this.entryUnHover(this.editting);
-
-    this.inputBox.removeEvents();
-
-    this.newContent = this.addHTMLEntities(
-      this.inputBox.get("value").trim()
-    ).replace(new RegExp("\n", "gi"), "<br />");
-
-    this.newContentText = this.newContent;
-    if (
-      (this.options.type == "select" && this.options.subtype == "rc") ||
-      this.options.subtype == "font"
-    ) {
-      this.newContentText = this.inputBox.getSelected().get("text");
-
-      if (this.newContentText instanceof Array) {
-        this.newContentText = this.newContentText[0];
-      }
-
-      this.editting.set("html", this.newContentText);
-    } else {
-      this.editting.set("html", this.newContent);
-    }
-
-    this.fireEvent("onComplete", [
-      this,
-      this.editting,
-      this.oldContent,
-      this.oldContentText,
-      this.newContent,
-      this.newContentText,
-    ]);
-  },
-
-  entryUnHover: function (el) {
-    var pathParts = el.data("path").split("/");
-    var isEntryTagField =
-      pathParts.length === 6 &&
-      pathParts.slice(1)[0] === "entry" &&
-      pathParts.slice(-1)[0] === "tag";
-
-    if (!isEntryTagField) {
-      return;
-    }
-
-    var xEntryEl = el.getParent(".xEntry");
-
-    if (xEntryEl.getAttribute("data-hover") === "off") {
-      xEntryEl.removeClass("xEntryHover");
-    }
-  },
-
-  setAllStyles: function (element, editor) {
-    var stylesToCopy = [
-      "font-family",
-      "font-weight",
-      "font-style",
-      "text-transform",
-      "line-height",
-      "letter-spacing",
-      "font",
-      "color",
-      "background-color",
-    ];
-
-    stylesToCopy.map(function (style) {
-      var selector =
-        style === "background-color" ? element.getParent("body") : element;
-      var value = selector.getStyle(style);
-      if (value) {
-        editor.setStyle(style, value);
-      }
-    });
-  },
-});
-
-Element.implement({
-  inlineEdit: function (options) {
-    return new inlineEdit(this, options);
-  },
-  inlineIsEmpty: function () {
-    return this.innerHTML.indexOf('<span class="xEmpty">') == 0;
-  },
-});
-
-inlineEdit.implement(new Events());
-inlineEdit.implement(new Options());
diff --git a/gulpfile.js b/gulpfile.js
index 6d9b78da2..7efd2bd7a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -71,7 +71,6 @@ const backendJsFiles = [
   "engine/js/BertaPortfolio.js",
   "engine/js/Assets.js",
   "engine/js/BertaEditorBase.js",
-  "engine/js/inline_edit.js",
   "engine/js/BertaEditor.js",
   "node_modules/immutable/dist/immutable.min.js",
   "node_modules/redux/dist/redux.min.js",

From 4beebf2b7810d3c2c76b5e31b69311c6bde07e08 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 24 Sep 2026 09:08:23 +0300
Subject: [PATCH 13/17] Drop node v20 support

---
 .github/workflows/tests.yml |  4 +--
 editor/package-lock.json    | 60 ++++++++++++++++++-------------------
 editor/package.json         |  2 +-
 package-lock.json           |  6 +---
 package.json                |  2 +-
 5 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 52591c673..0a2bf0a98 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24"
           cache: "npm"
           cache-dependency-path: editor/package-lock.json
 
@@ -56,7 +56,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24"
           cache: "npm"
           cache-dependency-path: package-lock.json
 
diff --git a/editor/package-lock.json b/editor/package-lock.json
index dfd7f5e81..51ab117f8 100644
--- a/editor/package-lock.json
+++ b/editor/package-lock.json
@@ -55,7 +55,7 @@
         "typescript": "~5.9.3"
       },
       "engines": {
-        "node": "^20.19.0 || ^22.12.0 || ^24.0.0"
+        "node": "^22.12.0 || ^24.0.0"
       }
     },
     "node_modules/@algolia/abtesting": {
@@ -353,7 +353,6 @@
       "integrity": "sha512-d0ZUmLFOkF+ljrENHOURmCbHGS90jo6pRILT6bZbP0K/O3IxBB7hZIPEOpT45WaME939jcc/khJWVkcH8M2qBw==",
       "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -520,7 +519,6 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.22.tgz",
       "integrity": "sha512-VWvtZL4xfYmXC56q/1BmtW0San8POAuHOADePJV1Hrjt430QTW5xaXuONZA7ujMs/B3u3PBZEWueKl2JH4LznQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -537,7 +535,6 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.22.tgz",
       "integrity": "sha512-3tdHaE30abvVzGSwtjpK/r4i8gqSZ6Q0Xc79XvLSTB3kuo4HYir9uvvc7L4YmhBLfSE64CkJPW+2tLiyz8U8jw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -551,7 +548,6 @@
       "integrity": "sha512-lbXXz8e8wCVecHNjb4kXiUPPNSrzZPE7WsQ+nNTEgnMDsFIqWJzmf3FagmNaZ5/wX1G2jnSZFjK4rpacmBIn4Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.29.7",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -584,7 +580,6 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.22.tgz",
       "integrity": "sha512-2pqDzm3T7/h7QF8XfDziVieEOZqNBM95qNgStM8vmJpFzhJEyLtD89xMQ0e365XcgaTOBEaMCWPswq6OuCIEUQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -610,7 +605,6 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.22.tgz",
       "integrity": "sha512-ogO+VbzAPyjgb0sIXgSET8c9x8ml623kDqUMxXE+W/oCFdDMPx4gom5K6gXtLzd1lVhtHlXBCsFf3UUD734Qvg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "tslib": "^2.3.0"
@@ -640,7 +634,6 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.22.tgz",
       "integrity": "sha512-+SNwcb/Xg4VjSmlaJ4/RyJLTtRKVMF4VBo5H0WD+ICugSMYiyuiP7AHB9nzuQt0TeLcrv4KY364z43LueA/iwA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -682,7 +675,6 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.22.tgz",
       "integrity": "sha512-S3Fl6jWjm4DfkaY6ikDDcd7d8J0BiDNjB3+rFarqD0t58UP/ER6Jv4kamPIAKAV2DfQvCnYE8ks1dY1xFlf7Hg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -727,7 +719,6 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -1009,6 +1000,31 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
+      "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
@@ -1016,6 +1032,7 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1729,7 +1746,6 @@
       "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.3.2",
         "@inquirer/confirm": "^5.1.21",
@@ -2575,7 +2591,6 @@
       "resolved": "https://registry.npmjs.org/@ngxs/store/-/store-21.0.0.tgz",
       "integrity": "sha512-zp8BgLNhdj8yDiBQpjjLhHaCv7vGdyCYzG2myj6j/A5XcUv71ikuJZfY7Z9rAibBah2mQCaerdQ3fOA9qG70HA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -4320,7 +4335,6 @@
       "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4673,7 +4687,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.20",
         "caniuse-lite": "^1.0.30001810",
@@ -4872,7 +4885,6 @@
       "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "readdirp": "^5.0.0"
       },
@@ -5738,7 +5750,6 @@
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -6235,7 +6246,6 @@
       "integrity": "sha512-c8/gF9ac8Y78/agExVocyLevgR+JlpNB444Py0FSX8pJoPdYUfUzRcXtYEYGwt6l19qIlVZPN5Mfsw9jFShmQQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -6729,8 +6739,7 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
       "integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/jose": {
       "version": "6.2.12",
@@ -6845,7 +6854,6 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -7314,7 +7322,6 @@
       "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
@@ -8704,7 +8711,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
@@ -9114,7 +9120,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -9811,8 +9816,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
     },
     "node_modules/tuf-js": {
       "version": "4.1.0",
@@ -9922,7 +9926,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10075,7 +10078,6 @@
       "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0 || ^0.28.0",
         "fdir": "^6.5.0",
@@ -10436,7 +10438,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -10455,8 +10456,7 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     }
   }
 }
diff --git a/editor/package.json b/editor/package.json
index c52273898..51bd9201c 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -11,7 +11,7 @@
     "sentry:sourcemaps": "npm run build && sentry-cli sourcemaps inject --org hello-world-ik --project berta-frontend --release $npm_package_version ../engine/dist && sentry-cli sourcemaps upload --org hello-world-ik --project berta-frontend --release $npm_package_version ../engine/dist"
   },
   "engines": {
-    "node": "^20.19.0 || ^22.12.0 || ^24.0.0"
+    "node": "^22.12.0 || ^24.0.0"
   },
   "private": true,
   "dependencies": {
diff --git a/package-lock.json b/package-lock.json
index f4a528351..fe30a6d1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "sass": "^1.90.0"
       },
       "engines": {
-        "node": "^20.19.0 || ^22.12.0 || ^24.0.0"
+        "node": "^22.12.0 || ^24.0.0"
       }
     },
     "node_modules/@gulp-sourcemaps/identity-map": {
@@ -921,7 +921,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.12",
         "caniuse-lite": "^1.0.30001809",
@@ -2241,7 +2240,6 @@
       "integrity": "sha512-PErok3DZSA5WGMd6XXV3IRNO0mlB+wW3OzhFJLEec1jSERg2j1bxJ6e5Fh6N6fn3FH2T9AP4UYNb/pYlADB9sA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-watcher": "^6.0.0",
         "gulp-cli": "^3.1.0",
@@ -3383,7 +3381,6 @@
       "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.13.6.tgz",
       "integrity": "sha512-IVdB4G0NTTeQZrBoM8C5JFVLjV2KtZ9APgybDA1MK73xb09qFs0jCXyQLnCOp1cSZZZbvhq/6mfXHUTaDkffuQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cli": "~1.0.0",
         "console-browserify": "1.1.x",
@@ -3930,7 +3927,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
diff --git a/package.json b/package.json
index 49616ba85..ef55e2920 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "license": "GPL-3.0",
   "version": "2.9.1",
   "engines": {
-    "node": "^20.19.0 || ^22.12.0 || ^24.0.0"
+    "node": "^22.12.0 || ^24.0.0"
   },
   "devDependencies": {
     "gulp": "^5.0.1",

From 3e8c0b67e7f76bac52d7d51ef78f49a61ca77029 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 24 Sep 2026 09:32:28 +0300
Subject: [PATCH 14/17] Remove meta keywords support

Search engines ignore <meta name="keywords">, and the setting's help
text wrongly claimed it improves ranking. Drop the keywords step from
the setup wizard, the site-level metaKeywords setting, the per-section
seoKeywords field, and the rendered meta tag. Meta description stays.

- Editor: remove wizard field, section SEO input and model fields;
  regenerate bundled twig templates
- API: remove schema entries and keywords from section head rendering
- Engine: remove setting definition and its translations
- Update _themes submodule (drops seoKeywords from theme sections)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Sections/SectionHeadRenderService.php     |  1 -
 .../Sections/SiteSectionsDataService.php      |  1 -
 _api_app/app/Sites/Sections/sectionHead.twig  |  1 -
 .../Settings/SiteSettingsDataService.php      |  2 --
 _themes                                       |  2 +-
 editor/src/app/render/twig-templates.ts       |  1 -
 .../src/app/setup/setup-wizard.component.ts   | 26 ++-----------------
 .../sections/section-head-render.service.ts   |  1 -
 .../app/sites/sections/section.component.ts   |  9 -------
 .../site-sections-state.model.ts              |  1 -
 .../sites/settings/site-settings.interface.ts |  1 -
 engine/inc.settings.php                       |  7 -----
 engine/lang/fr.php                            |  4 ---
 engine/lang/lv.php                            |  5 ----
 engine/lang/nl.php                            |  4 ---
 engine/lang/pl.php                            |  4 ---
 engine/lang/ru.php                            |  4 ---
 17 files changed, 3 insertions(+), 71 deletions(-)

diff --git a/_api_app/app/Sites/Sections/SectionHeadRenderService.php b/_api_app/app/Sites/Sections/SectionHeadRenderService.php
index 3d9d3d341..57e750880 100644
--- a/_api_app/app/Sites/Sections/SectionHeadRenderService.php
+++ b/_api_app/app/Sites/Sections/SectionHeadRenderService.php
@@ -285,7 +285,6 @@ private function getViewData(
         $isAutoResponsive = ! $isResponsive && isset($siteTemplateSettings['pageLayout']['autoResponsive']) && $siteTemplateSettings['pageLayout']['autoResponsive'] == 'yes';
 
         $data['title'] = $this->getTitle($siteSettings, $currentSection, $sectionTags, $tagSlug);
-        $data['keywords'] = ! empty($currentSection['seoKeywords']) ? $currentSection['seoKeywords'] : $siteSettings['texts']['metaKeywords'];
         $data['description'] = ! empty($currentSection['seoDescription']) ? $currentSection['seoDescription'] : $siteSettings['texts']['metaDescription'];
         $data['author'] = $siteSettings['texts']['ownerName'];
         $data['baseUrl'] = request()->getSchemeAndHttpHost();
diff --git a/_api_app/app/Sites/Sections/SiteSectionsDataService.php b/_api_app/app/Sites/Sections/SiteSectionsDataService.php
index fbf47fc32..69e9cdc9b 100644
--- a/_api_app/app/Sites/Sections/SiteSectionsDataService.php
+++ b/_api_app/app/Sites/Sections/SiteSectionsDataService.php
@@ -53,7 +53,6 @@ class SiteSectionsDataService extends Storage
                 'name' => ['type' => 'string'],
                 'title' => ['type' => 'string'],
                 'seoTitle' => ['type' => 'string'],
-                'seoKeywords' => ['type' => 'string'],
                 'seoDescription' => ['type' => 'string'],
                 'backgroundVideoEmbed' => ['type' => 'string'],
                 'mediafolder' => ['type' => 'string'],
diff --git a/_api_app/app/Sites/Sections/sectionHead.twig b/_api_app/app/Sites/Sections/sectionHead.twig
index 858c3f1af..e1a1e0b09 100644
--- a/_api_app/app/Sites/Sections/sectionHead.twig
+++ b/_api_app/app/Sites/Sections/sectionHead.twig
@@ -3,7 +3,6 @@
   {% if isResponsive or isAutoResponsive %}
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {% endif %}
-  <meta name="keywords" content="{{ keywords }}">
   <meta name="description" content="{{ description }}">
   <meta name="author" content="{{ author }}">
   <meta property="og:site_name" content="{{ author }}">
diff --git a/_api_app/app/Sites/Settings/SiteSettingsDataService.php b/_api_app/app/Sites/Settings/SiteSettingsDataService.php
index 61c9cadf5..73ed2b4d0 100644
--- a/_api_app/app/Sites/Settings/SiteSettingsDataService.php
+++ b/_api_app/app/Sites/Settings/SiteSettingsDataService.php
@@ -39,7 +39,6 @@
  *   <texts>
  *     <ownerName><![CDATA[John Doe]]></ownerName>
  *     <pageTitle><![CDATA[My site]]></pageTitle>
- *     <metaKeywords><![CDATA[john, doe, portfolio]]></metaKeywords>
  *     <metaDescription><![CDATA[My personal website]]></metaDescription>
  *   </texts>
  *   <settings>
@@ -147,7 +146,6 @@ class SiteSettingsDataService extends Storage
                 'properties' => [
                     'ownerName' => ['type' => 'string'],
                     'pageTitle' => ['type' => 'string'],
-                    'metaKeywords' => ['type' => 'string'],
                     'metaDescription' => ['type' => 'string'],
                 ],
             ],
diff --git a/_themes b/_themes
index a04722c8c..aaf15b34b 160000
--- a/_themes
+++ b/_themes
@@ -1 +1 @@
-Subproject commit a04722c8cc886ddae3a85daa588dd51183a6472d
+Subproject commit aaf15b34b69719adb66f80aa4d8ff434383f289f
diff --git a/editor/src/app/render/twig-templates.ts b/editor/src/app/render/twig-templates.ts
index 0d3c4b25d..a5ac43813 100644
--- a/editor/src/app/render/twig-templates.ts
+++ b/editor/src/app/render/twig-templates.ts
@@ -1332,7 +1332,6 @@ export const TWIG_TEMPLATES: Record<string, string> = {
   {% if isResponsive or isAutoResponsive %}
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {% endif %}
-  <meta name="keywords" content="{{ keywords }}">
   <meta name="description" content="{{ description }}">
   <meta name="author" content="{{ author }}">
   <meta property="og:site_name" content="{{ author }}">
diff --git a/editor/src/app/setup/setup-wizard.component.ts b/editor/src/app/setup/setup-wizard.component.ts
index 19fa5e6f8..3a71683e4 100644
--- a/editor/src/app/setup/setup-wizard.component.ts
+++ b/editor/src/app/setup/setup-wizard.component.ts
@@ -23,7 +23,6 @@ interface WizardFields {
   siteHeading: WizardField;
   ownerName: WizardField;
   metaDescription: WizardField;
-  metaKeywords: WizardField;
 }
 
 /**
@@ -80,20 +79,6 @@ interface WizardFields {
           ></berta-setting>
         </div>
 
-        <div class="setting-group">
-          <berta-setting
-            [setting]="fields.metaKeywords.setting"
-            [config]="fields.metaKeywords.config"
-            [disabled]="
-              isSaving(
-                fields.metaKeywords.group,
-                fields.metaKeywords.setting.slug
-              )
-            "
-            (update)="updateSetting(fields.metaKeywords.group, $event)"
-          ></berta-setting>
-        </div>
-
         <p>
           <button
             type="button"
@@ -178,18 +163,11 @@ export class SetupWizardComponent implements OnInit {
       'texts',
       'metaDescription',
     );
-    const metaKeywords = this.findField(
-      settings,
-      config,
-      'texts',
-      'metaKeywords',
-    );
-
-    if (!siteHeading || !ownerName || !metaDescription || !metaKeywords) {
+    if (!siteHeading || !ownerName || !metaDescription) {
       return null;
     }
 
-    return { siteHeading, ownerName, metaDescription, metaKeywords };
+    return { siteHeading, ownerName, metaDescription };
   }
 
   private findField(
diff --git a/editor/src/app/sites/sections/section-head-render.service.ts b/editor/src/app/sites/sections/section-head-render.service.ts
index 821fcb34b..c5ea8bb00 100644
--- a/editor/src/app/sites/sections/section-head-render.service.ts
+++ b/editor/src/app/sites/sections/section-head-render.service.ts
@@ -24,7 +24,6 @@ export class SectionHeadRenderService {
   ) {
     // skip some template variables, no need for them in editor
     // title
-    // keywords
     // description
     // author
     // noindex
diff --git a/editor/src/app/sites/sections/section.component.ts b/editor/src/app/sites/sections/section.component.ts
index d19b320cc..663ce37f4 100644
--- a/editor/src/app/sites/sections/section.component.ts
+++ b/editor/src/app/sites/sections/section.component.ts
@@ -111,15 +111,6 @@ import { SettingConfigModel } from '../../shared/interfaces';
             ></berta-long-text-input>
           </div>
 
-          <div class="setting">
-            <berta-long-text-input
-              [label]="'Keywords'"
-              [value]="section.seoKeywords"
-              (inputFocus)="updateComponentFocus($event)"
-              (update)="updateTextField('seoKeywords', $event)"
-            ></berta-long-text-input>
-          </div>
-
           <div class="setting">
             <berta-long-text-input
               [label]="'Description'"
diff --git a/editor/src/app/sites/sections/sections-state/site-sections-state.model.ts b/editor/src/app/sites/sections/sections-state/site-sections-state.model.ts
index 7c661a90d..c02e10bde 100644
--- a/editor/src/app/sites/sections/sections-state/site-sections-state.model.ts
+++ b/editor/src/app/sites/sections/sections-state/site-sections-state.model.ts
@@ -6,7 +6,6 @@ export interface SiteSectionStateModel {
   link?: string;
   target?: string;
   seoTitle?: string;
-  seoKeywords?: string;
   seoDescription?: string;
   backgroundVideoEmbed?: string;
   positionXY?: string;
diff --git a/editor/src/app/sites/settings/site-settings.interface.ts b/editor/src/app/sites/settings/site-settings.interface.ts
index 1231bfa14..b92c985f9 100644
--- a/editor/src/app/sites/settings/site-settings.interface.ts
+++ b/editor/src/app/sites/settings/site-settings.interface.ts
@@ -39,7 +39,6 @@ export interface SiteSettingsSiteResponse {
   texts?: {
     ownerName?: string;
     pageTitle?: string;
-    metaKeywords?: string;
     metaDescription?: string;
   };
   settings?: {
diff --git a/engine/inc.settings.php b/engine/inc.settings.php
index e8152d8e7..7226f9a39 100644
--- a/engine/inc.settings.php
+++ b/engine/inc.settings.php
@@ -118,13 +118,6 @@
             'title' => I18n::_('<META> description'),
             'description' => I18n::_('Short site description. It should not be longer than one or two sentences.'),
         ],
-        'metaKeywords' => [
-            'format' => 'text',
-            'allow_blank' => true,
-            'default' => 'berta',
-            'title' => I18n::_('<META> keywords'),
-            'description' => I18n::_('Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.'),
-        ],
     ],
 
     'pageLayout' => [
diff --git a/engine/lang/fr.php b/engine/lang/fr.php
index ec87dfabb..9b1803804 100644
--- a/engine/lang/fr.php
+++ b/engine/lang/fr.php
@@ -119,10 +119,6 @@
     '<META> description' => '<META> description',
     /* help text */
     'Site description. It should not be longer than one or two sentences.' => 'Description du site. Pas plus d’une ou deux phrases.',
-    /* setting name */
-    '<META> keywords' => '<META> mots-clés',
-    /* help text */
-    'Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.' => 'Ces mots-clés ne sont visibles que pour les moteurs de recherche. Associés à la description, ils permettent d’améliorer votre positionnement dans les moteurs.',
 
     /* setting tab */
     'Navigation' => 'Navigation',
diff --git a/engine/lang/lv.php b/engine/lang/lv.php
index 01cf943df..38202df4c 100644
--- a/engine/lang/lv.php
+++ b/engine/lang/lv.php
@@ -117,10 +117,6 @@
     '<META> description' => '<META> apraksts',
     /* help text */
     'Site description. It should not be longer than one or two sentences.' => 'Lapas apraksts. Tam nevajadzētu pārsniegt 2 teikumus.',
-    /* setting name */
-    '<META> keywords' => '<META> atslēgvārdi',
-    /* help text */
-    'Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.' => 'Atslēgvārdi ir redzami tikai meklētājiem, tādiem kā Google. Tie var uzlabot tavas lapas pozīciju meklēšanas rezultātos. Vēlams, lai tie ir atbilstoši lapas saturam.',
 
     /* setting tab */
     'Navigation' => 'Navigācija',
@@ -551,7 +547,6 @@
     'Title' => 'Virsraksts',
     'What is SEO?' => 'Kas ir SEO?',
     'seo_help_text' => 'Search Engine Optimization (SEO) palīdz uzlabot mājaslapas reitingu Google meklēšanas rezultātos. <a href="https://support.google.com/webmasters/answer/35624" target="_blank">Uzzini vairāk, kā tas strādā</a>.',
-    'Keywords' => 'Atslēgvārdi',
     'Content description' => 'Satura apraksts',
     'section_type' => 'Veids',
     'section_type_tip' => 'Nosaka sadaļas funkcionalitāti un satura izklājumu.',
diff --git a/engine/lang/nl.php b/engine/lang/nl.php
index d879fc278..5bee55a8e 100644
--- a/engine/lang/nl.php
+++ b/engine/lang/nl.php
@@ -119,10 +119,6 @@
     '<META> description' => '<META> description',
     /* help text */
     'Short site description. It should not be longer than one or two sentences.' => 'Site beschrijving. Gebruik hiervoor niet meer dan twee regels',
-    /* setting name */
-    '<META> keywords' => '<META> keywords',
-    /* help text */
-    'Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.' => 'Keywords die alleen zichtbaar zijn voor zoekmachines. Het gebruik van keywords, samen met de description (beschrijving) van jouw site kunnen ervoor zorgen dat je beter via zoekmachines vindbaar bent.',
 
     /* setting tab */
     'Navigation' => 'Navigatie',
diff --git a/engine/lang/pl.php b/engine/lang/pl.php
index 00eb1c32e..e07d239ff 100644
--- a/engine/lang/pl.php
+++ b/engine/lang/pl.php
@@ -119,10 +119,6 @@
     '<META> description' => '<META> opis',
     /* help text */
     'Site description. It should not be longer than one or two sentences.' => 'Opis strony. Nie powinien być dłuższy niż 2 zdania.',
-    /* setting name */
-    '<META> keywords' => '<META> słowa kluczowe',
-    /* help text */
-    'Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.' => 'Słowa kluczowe są widoczne tylko dla wyszukiwarek, takich jak Google. Może to poprawić pozycję twojej strony w wynikach wyszukiwania. Powinny odpowiadać treści strony.',
 
     /* setting tab */
     'Navigation' => 'Navigacja',
diff --git a/engine/lang/ru.php b/engine/lang/ru.php
index 63100d5ef..dc775e282 100644
--- a/engine/lang/ru.php
+++ b/engine/lang/ru.php
@@ -119,10 +119,6 @@
     '<META> description' => '<META> описание',
     /* help text */
     'Site description. It should not be longer than one or two sentences.' => 'Описание сайта. Описание не должно превышать одного-двух предложений.',
-    /* setting name */
-    '<META> keywords' => '<META> ключевые слова',
-    /* help text */
-    'Keywords visible only to search engines. Keywords along with the description can improve your site ranking in search results.' => 'Ключевые слова видны только поисковым системам, таким как Google. Они могут улучшить позиции вашего сайта в результатах поиска. Желательно, чтобы они соответствовали содержанию страницы.',
 
     /* setting tab */
     'Navigation' => 'Навигация',

From 61c114662fe46a724e6e6bcec882b9766022c3fc Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 24 Sep 2026 15:41:12 +0300
Subject: [PATCH 15/17] Fix inline editor and setup wizard issues found in
 branch review

Entry saves re-render all of #pageEntries, so an editor already open on
another field was left anchored to a detached element and collapsed.

- InlineEditService: re-attach the open editor to the re-rendered
  element with the same data-path (keeping the draft); end the edit
  for fields in hover/dropdown containers; a save only closes its own
  editor; never size the overlay from a detached element
- InlineEditOverlayComponent: add commit() to end an edit without focus
- Rich text overlay: skip TinyMCE init if closed while still loading
- Setup wizard: wait for in-flight field saves and read fresh values
  before finishing setup
- Fix site heading description typo and wrap it in I18n::_()
- Drop metaKeywords from sample data
- Add unit tests for re-attach

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inline-edit-overlay.component.ts          |  24 +-
 ...inline-edit-rich-text-overlay.component.ts |   9 +
 .../inline-edit/inline-edit.service.spec.ts   |  87 ++++++
 .../inline-edit/inline-edit.service.ts        | 247 +++++++++++++-----
 .../src/app/setup/setup-wizard.component.ts   |  75 ++++--
 engine/inc.settings.php                       |   2 +-
 sample-data/settings.xml                      |   1 -
 7 files changed, 355 insertions(+), 90 deletions(-)

diff --git a/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
index 90553d0b7..8c5196dc4 100644
--- a/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit-overlay.component.ts
@@ -19,7 +19,7 @@ import {
       [ngStyle]="fontStyle"
       (input)="onInput($event)"
       (keydown)="onKeydown($event)"
-      (blur)="onBlur($event)"
+      (blur)="onBlur()"
     ></textarea>
   `,
   styles: [
@@ -117,14 +117,28 @@ export class InlineEditOverlayComponent implements AfterViewInit {
     }
   }
 
-  onBlur(event: FocusEvent) {
+  onBlur() {
+    this.commit();
+  }
+
+  /**
+   * Ends editing exactly like a blur would (save if changed, cancel if
+   * not), but without depending on the textarea currently having focus —
+   * for when the service needs to end the edit because the edited element
+   * vanished from the page (see `InlineEditService.handleDetachedEdit`).
+   */
+  commit() {
     if (this.closed || this.saving) {
       return;
     }
 
-    const newValue = this.normalize(
-      (event.target as HTMLTextAreaElement).value,
-    );
+    if (!this.viewReady) {
+      this.closed = true;
+      this.cancel.emit();
+      return;
+    }
+
+    const newValue = this.normalize(this.textareaEl.nativeElement.value);
 
     if (newValue === this.value) {
       this.closed = true;
diff --git a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
index 4ebe35678..a9bec1d47 100644
--- a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
@@ -116,6 +116,7 @@ export class InlineEditRichTextOverlayComponent
   @ViewChild('targetEl') private targetEl!: ElementRef<HTMLElement>;
 
   private editor: any = null;
+  private destroyed = false;
 
   async ngAfterViewInit() {
     this.targetEl.nativeElement.innerHTML = this.value;
@@ -137,6 +138,13 @@ export class InlineEditRichTextOverlayComponent
       import('tinymce/skins/content/default/content.js'),
     ]);
 
+    // The overlay can be closed (backdrop click) while TinyMCE is still
+    // loading — initializing it then would leave an orphaned editor bound
+    // to a detached element.
+    if (this.destroyed) {
+      return;
+    }
+
     tinymce.IconManager.add(BERTA_ICON_PACK, {
       icons: { save: BERTA_SAVE_ICON },
     });
@@ -164,6 +172,7 @@ export class InlineEditRichTextOverlayComponent
   }
 
   ngOnDestroy() {
+    this.destroyed = true;
     this.editor?.remove();
   }
 
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts b/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
index 57e2291a1..32df83eaf 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.spec.ts
@@ -138,4 +138,91 @@ describe('InlineEditService (field value transforms)', () => {
       );
     });
   });
+
+  describe('re-attach after re-render', () => {
+    const path = 'site/entry/section/1/content/title';
+    let container: HTMLElement;
+
+    function editable(html: string): HTMLElement {
+      const el = document.createElement('span');
+      el.className = 'xNgEditable';
+      el.dataset['path'] = path;
+      el.innerHTML = html;
+      return el;
+    }
+
+    function openEditOn(el: HTMLElement, overrides: object = {}) {
+      const edit = {
+        el,
+        iframe: document.createElement('iframe'),
+        originalHtml: el.innerHTML,
+        overlayRef: jasmine.createSpyObj('OverlayRef', [
+          'updatePosition',
+          'updateSize',
+        ]),
+        positionStrategy: jasmine.createSpyObj('Strategy', ['setOrigin']),
+        legacyHideContainer: null,
+        suppressLegacyHideClose: () => {},
+        syncSizeOnRefresh: true,
+        path,
+        selector: '.xNgEditable, .xNgEditableTA',
+        prepareEl: jasmine.createSpy('prepareEl'),
+        onElementLost: jasmine.createSpy('onElementLost'),
+        lost: false,
+        ...overrides,
+      };
+      (service as any).openEdit = edit;
+      return edit;
+    }
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      (service as any).boundDocument = document;
+    });
+
+    afterEach(() => container.remove());
+
+    it('re-attaches to the replacement with the same data-path', () => {
+      const original = editable('old');
+      container.appendChild(original);
+      const edit = openEditOn(original);
+
+      const replacement = editable('new');
+      container.replaceChildren(replacement);
+      (service as any).handleDetachedEdit();
+
+      expect(edit.el).toBe(replacement);
+      expect(edit.originalHtml).toBe('new');
+      expect(edit.prepareEl).toHaveBeenCalledWith(replacement);
+      expect(edit.onElementLost).not.toHaveBeenCalled();
+    });
+
+    it('ends the edit once when no replacement exists', () => {
+      const original = editable('old');
+      container.appendChild(original);
+      const edit = openEditOn(original);
+
+      container.replaceChildren();
+      (service as any).handleDetachedEdit();
+      (service as any).handleDetachedEdit();
+
+      expect(edit.onElementLost).toHaveBeenCalledTimes(1);
+      expect(edit.prepareEl).not.toHaveBeenCalled();
+    });
+
+    it('ends the edit for fields in a legacy hide container', () => {
+      const original = editable('old');
+      container.appendChild(original);
+      const edit = openEditOn(original, {
+        legacyHideContainer: document.createElement('div'),
+      });
+
+      container.replaceChildren(editable('new'));
+      (service as any).handleDetachedEdit();
+
+      expect(edit.onElementLost).toHaveBeenCalledTimes(1);
+      expect(edit.el).toBe(original);
+    });
+  });
 });
diff --git a/editor/src/app/preview/inline-edit/inline-edit.service.ts b/editor/src/app/preview/inline-edit/inline-edit.service.ts
index 9e30b20dc..bebe6fe3d 100644
--- a/editor/src/app/preview/inline-edit/inline-edit.service.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit.service.ts
@@ -68,6 +68,14 @@ interface OpenEdit {
   // the edited element's own (much smaller) rendered box, so geometry refreshes must reposition
   // without also resetting the overlay back to that box's size.
   syncSizeOnRefresh: boolean;
+  // Re-attach support (see `handleDetachedEdit`): entry saves re-render
+  // whole regions of the preview, which can replace the element being
+  // edited with a fresh copy while its overlay is still open.
+  path: string;
+  selector: string;
+  prepareEl: (el: HTMLElement) => void;
+  onElementLost: () => void;
+  lost: boolean;
 }
 
 /**
@@ -83,6 +91,7 @@ interface OpenEdit {
 export class InlineEditService {
   private boundDocument: Document | null = null;
   private openEdit: OpenEdit | null = null;
+  private replacementObserver: MutationObserver | null = null;
 
   constructor(
     private overlay: Overlay,
@@ -164,6 +173,68 @@ export class InlineEditService {
     iframe.contentWindow?.addEventListener('scroll', () =>
       this.refreshOpenEditGeometry(),
     );
+
+    // Entry saves re-render whole regions of the page (e.g. all of
+    // `#pageEntries`), so the element under an open editor can be swapped
+    // out while the user is still typing in it.
+    this.replacementObserver?.disconnect();
+    this.replacementObserver = new MutationObserver(() => {
+      if (this.openEdit && !this.openEdit.el.isConnected) {
+        this.handleDetachedEdit();
+      }
+    });
+    this.replacementObserver.observe(doc.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  /**
+   * The open edit's element was removed from the page by a re-render.
+   * Re-attaches the editor to the freshly rendered element with the same
+   * `data-path`, keeping the draft. Fields inside a legacy hide container
+   * (tags, width, cart attributes, weight) are ended instead: the re-render
+   * resets the hover/dropdown state their container's visibility depends
+   * on, so the replacement comes back hidden.
+   */
+  private handleDetachedEdit() {
+    const edit = this.openEdit;
+
+    if (!edit || edit.lost) {
+      return;
+    }
+
+    const replacement = edit.legacyHideContainer
+      ? null
+      : this.findReplacement(edit.path, edit.selector);
+
+    if (!replacement) {
+      edit.lost = true;
+      edit.onElementLost();
+      return;
+    }
+
+    edit.el = replacement;
+    edit.originalHtml = replacement.innerHTML;
+    edit.prepareEl(replacement);
+    this.refreshOpenEditGeometry();
+  }
+
+  private findReplacement(path: string, selector: string): HTMLElement | null {
+    if (!this.boundDocument) {
+      return null;
+    }
+
+    const candidates = Array.from(
+      this.boundDocument.querySelectorAll<HTMLElement>('[data-path]'),
+    );
+
+    return (
+      candidates.find(
+        (candidate) =>
+          candidate.dataset['path'] === path && candidate.matches(selector),
+      ) ?? null
+    );
   }
 
   /**
@@ -320,44 +391,69 @@ export class InlineEditService {
     const multiline = el.classList.contains(MULTILINE_CLASS);
     const initialValue = this.readFieldValue(el, multiline);
     const originalHtml = el.innerHTML;
+    let lastDraft: string | null = null;
 
-    // Server templates are free to format markup across multiple indented
-    // lines, leaving real leading/trailing whitespace in `el`'s content —
-    // harmless under normal CSS collapsing, but it must be removed before
-    // measuring/editing (not just trimmed from the *string* `readFieldValue`
-    // reads out), otherwise the `pre-wrap` override below turns that
-    // incidental whitespace into a visible line break.
-    el.innerHTML = el.innerHTML.trim();
-
-    // A <textarea> always preserves whitespace and soft-wraps, regardless of
-    // CSS `white-space` on it — that's not something we can override. `el`
-    // normally collapses whitespace instead (default `white-space: normal`),
-    // so while editing, make it match the textarea's actual behavior instead
-    // of the other way around — otherwise a leading/repeated space collapses
-    // in `el`'s measurement but not in the textarea's display, undersizing
-    // the overlay. `pre-wrap` still wraps normally, so the existing
-    // wrap-to-multiple-lines behavior is unaffected. Set *before* the first
-    // measurement below, so the initial overlay size/position already
-    // reflects the same rendering used throughout editing.
-    el.style.whiteSpace = 'pre-wrap';
-
-    // A block-level `el` (e.g. a narrow table-column field) stretches to
-    // fill its container's width regardless of content, unlike an inline
-    // element — so a single unbroken word longer than that container
-    // silently overflows past `el`'s own measured box instead of growing
-    // it. `fit-content` uses the standard shrink-to-fit algorithm: content
-    // that already wraps within the available width is unaffected, but an
-    // overflowing unbroken word is now reflected in the measured width
-    // instead of being invisibly clamped.
-    el.style.width = 'fit-content';
-
-    // Safety net regardless of measurement precision: hide `el`'s own
-    // rendering while editing (dimensions/wrapping are unaffected, so
-    // measurement still works) so nothing it renders — overflow from the
-    // above or any other edge case — can ever show through/around the
-    // overlay. `visibility` (not `opacity`) also stops it receiving pointer
-    // events, in case the overlay's coverage is ever imperfect for a frame.
-    el.style.visibility = 'hidden';
+    // Writes the draft into the real element so its actual rendered box can
+    // be re-measured: the page's own CSS (container width, wrapping, text
+    // alignment) already knows how to lay this out correctly, so the overlay
+    // can just match it instead of reimplementing text wrapping.
+    const writeDraft = (target: HTMLElement, draftValue: string) => {
+      if (multiline) {
+        target.innerHTML = this.textToDisplayHtml(draftValue);
+      } else {
+        target.textContent = draftValue.trim().length ? draftValue : ' ';
+      }
+    };
+
+    // Puts `target` into its editing state — run on `el` now, and again on
+    // its replacement if a re-render swaps it out (`handleDetachedEdit`).
+    const prepareEl = (target: HTMLElement) => {
+      // Server templates are free to format markup across multiple indented
+      // lines, leaving real leading/trailing whitespace in the content —
+      // harmless under normal CSS collapsing, but it must be removed before
+      // measuring/editing (not just trimmed from the *string*
+      // `readFieldValue` reads out), otherwise the `pre-wrap` override below
+      // turns that incidental whitespace into a visible line break.
+      target.innerHTML = target.innerHTML.trim();
+
+      // A <textarea> always preserves whitespace and soft-wraps, regardless
+      // of CSS `white-space` on it — that's not something we can override.
+      // The field normally collapses whitespace instead (default
+      // `white-space: normal`), so while editing, make it match the
+      // textarea's actual behavior instead of the other way around —
+      // otherwise a leading/repeated space collapses in the field's
+      // measurement but not in the textarea's display, undersizing the
+      // overlay. `pre-wrap` still wraps normally, so the existing
+      // wrap-to-multiple-lines behavior is unaffected. Set *before* the
+      // first measurement, so the initial overlay size/position already
+      // reflects the same rendering used throughout editing.
+      target.style.whiteSpace = 'pre-wrap';
+
+      // A block-level field (e.g. a narrow table-column field) stretches to
+      // fill its container's width regardless of content, unlike an inline
+      // element — so a single unbroken word longer than that container
+      // silently overflows past the field's own measured box instead of
+      // growing it. `fit-content` uses the standard shrink-to-fit
+      // algorithm: content that already wraps within the available width is
+      // unaffected, but an overflowing unbroken word is now reflected in the
+      // measured width instead of being invisibly clamped.
+      target.style.width = 'fit-content';
+
+      // Safety net regardless of measurement precision: hide the field's
+      // own rendering while editing (dimensions/wrapping are unaffected, so
+      // measurement still works) so nothing it renders — overflow from the
+      // above or any other edge case — can ever show through/around the
+      // overlay. `visibility` (not `opacity`) also stops it receiving
+      // pointer events, in case the overlay's coverage is ever imperfect
+      // for a frame.
+      target.style.visibility = 'hidden';
+
+      if (lastDraft !== null) {
+        writeDraft(target, lastDraft);
+      }
+    };
+
+    prepareEl(el);
 
     const origin = this.createVirtualOrigin(el, iframe);
     const positionStrategy = this.overlay
@@ -443,19 +539,17 @@ export class InlineEditService {
       legacyHideContainer,
       suppressLegacyHideClose,
       syncSizeOnRefresh: true,
+      path,
+      selector: EDITABLE_SELECTOR,
+      prepareEl,
+      onElementLost: () => componentRef.instance.commit(),
+      lost: false,
     };
+    const edit = this.openEdit;
 
     componentRef.instance.input.subscribe((draftValue: string) => {
-      // Write the draft into the real element and re-measure its actual
-      // rendered box: the page's own CSS (container width, wrapping, text
-      // alignment) already knows how to lay this out correctly, so the
-      // overlay can just match it instead of reimplementing text wrapping.
-      if (multiline) {
-        el.innerHTML = this.textToDisplayHtml(draftValue);
-      } else {
-        el.textContent = draftValue.trim().length ? draftValue : '\u00A0';
-      }
-
+      lastDraft = draftValue;
+      writeDraft(edit.el, draftValue);
       this.refreshOpenEditGeometry();
     });
 
@@ -469,31 +563,35 @@ export class InlineEditService {
       if (multiline) {
         storedValue = this.textToHtml(newValue);
       } else {
-        finalValue = this.applyUnits(el, newValue);
-        finalValue = this.applyCssUnits(el, finalValue);
-        finalValue = this.applyPriceParsing(el, finalValue);
-        storedValue = this.applyRawEncoding(el, finalValue);
+        finalValue = this.applyUnits(edit.el, newValue);
+        finalValue = this.applyCssUnits(edit.el, finalValue);
+        finalValue = this.applyPriceParsing(edit.el, finalValue);
+        storedValue = this.applyRawEncoding(edit.el, finalValue);
       }
 
       try {
         action = resolveInlineEditAction(path, storedValue);
       } catch (error) {
         console.error(error);
-        this.closeOpenOverlay();
+        this.closeEditIfOpen(edit);
         return;
       }
 
       this.store.dispatch(action).subscribe({
         next: () => {
-          const tags = el.classList.contains('xFormatModifier-toTags')
+          const tags = edit.el.classList.contains('xFormatModifier-toTags')
             ? this.formatTags(finalValue)
             : null;
 
-          this.writeFieldValue(el, tags ? tags.display : finalValue, multiline);
-          this.syncTitle(el, tags ? tags.real : finalValue);
-          this.closeOpenOverlay(false);
+          this.writeFieldValue(
+            edit.el,
+            tags ? tags.display : finalValue,
+            multiline,
+          );
+          this.syncTitle(edit.el, tags ? tags.real : finalValue);
+          this.closeEditIfOpen(edit, false);
         },
-        error: () => this.closeOpenOverlay(),
+        error: () => this.closeEditIfOpen(edit),
       });
     });
   }
@@ -592,7 +690,15 @@ export class InlineEditService {
       legacyHideContainer: null,
       suppressLegacyHideClose: () => {},
       syncSizeOnRefresh: false,
+      path,
+      selector: RICH_TEXT_SELECTOR,
+      prepareEl: (target) => {
+        target.style.visibility = 'hidden';
+      },
+      onElementLost: () => this.closeOpenOverlay(),
+      lost: false,
     };
+    const edit = this.openEdit;
 
     overlayRef.backdropClick().subscribe(() => this.closeOpenOverlay());
 
@@ -613,16 +719,16 @@ export class InlineEditService {
         action = resolveInlineEditAction(path, html);
       } catch (error) {
         console.error(error);
-        this.closeOpenOverlay();
+        this.closeEditIfOpen(edit);
         return;
       }
 
       this.store.dispatch(action).subscribe({
         next: () => {
-          this.writeRichTextValue(el, html);
-          this.closeOpenOverlay(false);
+          this.writeRichTextValue(edit.el, html);
+          this.closeEditIfOpen(edit, false);
         },
-        error: () => this.closeOpenOverlay(),
+        error: () => this.closeEditIfOpen(edit),
       });
     });
   }
@@ -947,6 +1053,13 @@ export class InlineEditService {
 
     const { el, iframe, overlayRef, positionStrategy, syncSizeOnRefresh } =
       this.openEdit;
+
+    // A detached element measures as an empty box at 0,0 — keep the last
+    // good geometry while `handleDetachedEdit` re-attaches or ends the edit.
+    if (!el.isConnected) {
+      return;
+    }
+
     const rect = this.createVirtualOrigin(el, iframe);
 
     positionStrategy.setOrigin(rect);
@@ -957,6 +1070,18 @@ export class InlineEditService {
     }
   }
 
+  /**
+   * Closes `edit` only if it's still the open one. A save's response can
+   * arrive after the user has already moved on to another field (clicking
+   * it blurs — and so saves — the previous one), and must not close that
+   * newer editor.
+   */
+  private closeEditIfOpen(edit: OpenEdit, restore = true) {
+    if (this.openEdit === edit) {
+      this.closeOpenOverlay(restore);
+    }
+  }
+
   /**
    * Disposes the currently open overlay, if any. By default also restores
    * the edited element's original content, since it's mutated live on every
diff --git a/editor/src/app/setup/setup-wizard.component.ts b/editor/src/app/setup/setup-wizard.component.ts
index 3a71683e4..0481d7c45 100644
--- a/editor/src/app/setup/setup-wizard.component.ts
+++ b/editor/src/app/setup/setup-wizard.component.ts
@@ -1,8 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
-import { Observable, combineLatest, from } from 'rxjs';
-import { concatMap, filter, map } from 'rxjs/operators';
+import { Observable, combineLatest, forkJoin, from, of } from 'rxjs';
+import {
+  catchError,
+  concatMap,
+  defaultIfEmpty,
+  filter,
+  finalize,
+  map,
+  shareReplay,
+} from 'rxjs/operators';
 import { SiteSettingsState } from '../sites/settings/site-settings.state';
 import { UpdateSiteSettingsAction } from '../sites/settings/site-settings.actions';
 import { PreviewService } from '../preview/preview.service';
@@ -84,7 +92,7 @@ interface WizardFields {
             type="button"
             class="button"
             [disabled]="saving"
-            (click)="finishSetup(fields)"
+            (click)="finishSetup()"
           >
             Done!
           </button>
@@ -120,6 +128,7 @@ export class SetupWizardComponent implements OnInit {
   fields$: Observable<WizardFields>;
   saving = false;
   private settingUpdate: { [k: string]: boolean } = {};
+  private pendingUpdates = new Set<Observable<unknown>>();
 
   constructor(
     private store: Store,
@@ -196,25 +205,57 @@ export class SetupWizardComponent implements OnInit {
     const key = `${group}:${event.field}`;
     this.settingUpdate[key] = true;
 
-    this.store
+    const update$ = this.store
       .dispatch(
         new UpdateSiteSettingsAction(group, { [event.field]: event.value }),
       )
-      .subscribe({
-        next: () => {
+      .pipe(
+        catchError(() => of(null)),
+        finalize(() => {
           this.settingUpdate[key] = false;
+          this.pendingUpdates.delete(update$);
+        }),
+        shareReplay(1),
+      );
+
+    this.pendingUpdates.add(update$);
+    update$.subscribe();
+  }
+
+  finishSetup() {
+    this.saving = true;
+
+    // Fields save on blur, so clicking "Done!" straight from a field starts
+    // that field's save in the same gesture — wait for it, then read the
+    // just-saved values from the store rather than the (stale) snapshot the
+    // template rendered with.
+    forkJoin([...this.pendingUpdates])
+      .pipe(
+        defaultIfEmpty(null),
+        concatMap(() => from(this.buildFinishActions())),
+        concatMap((action) => this.store.dispatch(action)),
+      )
+      .subscribe({
+        complete: () => {
+          this.previewService.reloadIframe();
+          this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
         },
         error: () => {
-          this.settingUpdate[key] = false;
+          this.saving = false;
         },
       });
   }
 
-  finishSetup(fields: WizardFields) {
-    this.saving = true;
+  private buildFinishActions(): UpdateSiteSettingsAction[] {
+    const settings =
+      this.store.selectSnapshot(SiteSettingsState.getCurrentSiteSettings) || [];
+    const valueOf = (group: string, slug: string) =>
+      settings
+        .find((g) => g.slug === group)
+        ?.settings.find((s) => s.slug === slug)?.value;
 
-    const ownerName = fields.ownerName.setting.value;
-    const siteHeading = fields.siteHeading.setting.value;
+    const ownerName = valueOf('texts', 'ownerName');
+    const siteHeading = valueOf('siteTexts', 'siteHeading');
     const actions: UpdateSiteSettingsAction[] = [];
 
     if (ownerName) {
@@ -233,16 +274,6 @@ export class SetupWizardComponent implements OnInit {
 
     actions.push(new UpdateSiteSettingsAction('berta', { installed: 1 }));
 
-    from(actions)
-      .pipe(concatMap((action) => this.store.dispatch(action)))
-      .subscribe({
-        complete: () => {
-          this.previewService.reloadIframe();
-          this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
-        },
-        error: () => {
-          this.saving = false;
-        },
-      });
+    return actions;
   }
 }
diff --git a/engine/inc.settings.php b/engine/inc.settings.php
index 7226f9a39..1a79e49f1 100644
--- a/engine/inc.settings.php
+++ b/engine/inc.settings.php
@@ -62,7 +62,7 @@
             'allow_blank' => true,
             'default' => null,
             'title' => I18n::_('Site heading'),
-            'description' => 'Name or your site. Visible in all sections.',
+            'description' => I18n::_('Name of your site. Visible in all sections.'),
         ],
     ],
 
diff --git a/sample-data/settings.xml b/sample-data/settings.xml
index 8ddf0e5a6..0f4e3ce5c 100644
--- a/sample-data/settings.xml
+++ b/sample-data/settings.xml
@@ -29,7 +29,6 @@
     <texts>
         <ownerName><![CDATA[John Doe]]></ownerName>
         <pageTitle><![CDATA[My site]]></pageTitle>
-        <metaKeywords><![CDATA[john, doe, portfolio]]></metaKeywords>
         <metaDescription><![CDATA[My personal website]]></metaDescription>
     </texts>
     <settings>

From ece89b8f449d996f06b581d4ca6f1b0f7481e09a Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Thu, 24 Sep 2026 16:13:03 +0300
Subject: [PATCH 16/17] Fix footer placeholder, escape owner name, prevent
 double rich-text save

- Pass isEditMode to the additionalFooterText template from the Angular
  renderer so an empty footer keeps its clickable placeholder
- HTML-escape the owner name before writing it into the raw-rendered
  siteFooter in the setup wizard
- Ignore repeated TinyMCE Save clicks while a save is in flight

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inline-edit-rich-text-overlay.component.ts       | 12 +++++++++++-
 editor/src/app/setup/setup-wizard.component.ts       | 11 ++++++++++-
 .../additional-footer-text-render.service.ts         |  1 +
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
index a9bec1d47..c0eb27306 100644
--- a/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
+++ b/editor/src/app/preview/inline-edit/inline-edit-rich-text-overlay.component.ts
@@ -117,6 +117,7 @@ export class InlineEditRichTextOverlayComponent
 
   private editor: any = null;
   private destroyed = false;
+  private saving = false;
 
   async ngAfterViewInit() {
     this.targetEl.nativeElement.innerHTML = this.value;
@@ -156,7 +157,16 @@ export class InlineEditRichTextOverlayComponent
     tinymce.init({
       target: this.targetEl.nativeElement,
       ...config,
-      save_onsavecallback: () => this.save.emit(this.editor.getContent()),
+      // The service closes the overlay once the save settles either way,
+      // so one emission per overlay is all that's ever needed — this stops
+      // a double-click on Save dispatching the same save twice.
+      save_onsavecallback: () => {
+        if (this.saving) {
+          return;
+        }
+        this.saving = true;
+        this.save.emit(this.editor.getContent());
+      },
       setup: (editor: any) => {
         this.editor = editor;
         const emitHeight = () =>
diff --git a/editor/src/app/setup/setup-wizard.component.ts b/editor/src/app/setup/setup-wizard.component.ts
index 0481d7c45..6ceba1775 100644
--- a/editor/src/app/setup/setup-wizard.component.ts
+++ b/editor/src/app/setup/setup-wizard.component.ts
@@ -261,7 +261,8 @@ export class SetupWizardComponent implements OnInit {
     if (ownerName) {
       actions.push(
         new UpdateSiteSettingsAction('siteTexts', {
-          siteFooter: `${ownerName} &copy; `,
+          // `siteFooter` renders with `|raw`, so the name must be escaped.
+          siteFooter: `${this.escapeHtml(String(ownerName))} &copy; `,
         }),
       );
     }
@@ -276,4 +277,12 @@ export class SetupWizardComponent implements OnInit {
 
     return actions;
   }
+
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
 }
diff --git a/editor/src/app/sites/sections/additional-footer-text-render.service.ts b/editor/src/app/sites/sections/additional-footer-text-render.service.ts
index 637c3075c..e51cd6fc8 100644
--- a/editor/src/app/sites/sections/additional-footer-text-render.service.ts
+++ b/editor/src/app/sites/sections/additional-footer-text-render.service.ts
@@ -65,6 +65,7 @@ export class AdditionalFooterTextRenderService {
     return {
       content: content,
       attributes: this.getAttributes(showAdditionalFooterText, siteSlug),
+      isEditMode: true,
     };
   }
 

From 87958b7d2cbe9b8ff2f9c156a2c5f4cedeebcd65 Mon Sep 17 00:00:00 2001
From: uldisrudzitis <uldis.rudzitis@gmail.com>
Date: Fri, 25 Sep 2026 17:12:27 +0300
Subject: [PATCH 17/17] Server requirements dialog moved to Angular and API

---
 .htaccess                                     |   2 +-
 INSTALL/includes/check.php                    | 172 ------------
 INSTALL/includes/first_visit.php              |  31 ---
 INSTALL/includes/first_visit_serverreqs.php   |  71 -----
 INSTALL/includes/index.php                    |  18 --
 INSTALL/index.html                            |   0
 LocalValetDriver.php                          | 179 ++++++++++++
 _api/index.php                                |   1 +
 .../Setup/ServerRequirementsController.php    |  28 ++
 .../app/Setup/ServerRequirementsService.php   | 257 ++++++++++++++++++
 _api_app/bootstrap/requirements.php           |  33 +++
 _api_app/bootstrap/requirements_check.php     |  45 +++
 _api_app/bootstrap/requirements_guard.php     |  27 ++
 _api_app/composer.json                        |   6 +
 _api_app/composer.lock                        |  10 +-
 _api_app/routes/api.php                       |   2 +
 .../tests/Feature/ServerRequirementsTest.php  | 106 ++++++++
 editor/src/app/app.component.ts               |   1 +
 editor/src/app/app.module.ts                  |   2 +
 editor/src/app/login/login.component.ts       |   9 +
 .../src/app/render/template-render.service.ts |   2 +-
 .../server-requirements.component.spec.ts     | 194 +++++++++++++
 .../server-requirements.component.ts          | 205 ++++++++++++++
 .../server-requirements.interface.ts          |  14 +
 .../server-requirements.service.spec.ts       |  90 ++++++
 .../server-requirements.service.ts            |  56 ++++
 .../src/app/setup/setup-wizard.component.ts   |   9 +-
 editor/src/styles/_login.scss                 |   5 +
 editor/src/styles/_server-requirements.scss   | 107 ++++++++
 editor/src/styles/_variables.scss             |   1 +
 editor/src/styles/styles.scss                 |   1 +
 engine/_classes/class.bertautils.php          |   2 +-
 engine/inc.editor_redirect.php                |  19 ++
 engine/inc.engineprefs.php                    |  12 -
 engine/inc.page.php                           |  44 +--
 engine/lang/en.php                            |  11 +-
 engine/lang/es.php                            |  13 +-
 engine/lang/fr.php                            |  29 +-
 engine/lang/lv.php                            |  28 +-
 engine/lang/nl.php                            |  31 +--
 engine/lang/pl.php                            |  30 +-
 engine/lang/ru.php                            |  29 +-
 engine/loader.helper.php                      |  12 +
 43 files changed, 1434 insertions(+), 510 deletions(-)
 delete mode 100644 INSTALL/includes/check.php
 delete mode 100644 INSTALL/includes/first_visit.php
 delete mode 100644 INSTALL/includes/first_visit_serverreqs.php
 delete mode 100644 INSTALL/includes/index.php
 delete mode 100644 INSTALL/index.html
 create mode 100644 LocalValetDriver.php
 create mode 100644 _api_app/app/Setup/ServerRequirementsController.php
 create mode 100644 _api_app/app/Setup/ServerRequirementsService.php
 create mode 100644 _api_app/bootstrap/requirements.php
 create mode 100644 _api_app/bootstrap/requirements_check.php
 create mode 100644 _api_app/bootstrap/requirements_guard.php
 create mode 100644 _api_app/tests/Feature/ServerRequirementsTest.php
 create mode 100644 editor/src/app/setup/server-requirements/server-requirements.component.spec.ts
 create mode 100644 editor/src/app/setup/server-requirements/server-requirements.component.ts
 create mode 100644 editor/src/app/setup/server-requirements/server-requirements.interface.ts
 create mode 100644 editor/src/app/setup/server-requirements/server-requirements.service.spec.ts
 create mode 100644 editor/src/app/setup/server-requirements/server-requirements.service.ts
 create mode 100644 editor/src/styles/_server-requirements.scss
 create mode 100644 engine/inc.editor_redirect.php

diff --git a/.htaccess b/.htaccess
index 875df67f4..1976ac7b0 100644
--- a/.htaccess
+++ b/.htaccess
@@ -55,7 +55,7 @@ RewriteRule ^ - [R=404,L]
 # If you have folders or files inside berta's folder you wish to access directly,
 # then modify and uncomment the following line
 # RewriteCond %{REQUEST_URI} ^/(my_folder_name1|my_folder_name1|my_file.html).*$    [OR]
-RewriteCond %{REQUEST_URI} ^/(.well-known|_plugin_shop|engine|INSTALL|storage|_templates|_themes).*$    [OR]
+RewriteCond %{REQUEST_URI} ^/(.well-known|_plugin_shop|engine|storage|_templates|_themes).*$    [OR]
 RewriteCond %{REQUEST_URI} ^/(index\.php|sitemap\.xml\.php|robots\.txt|crossdomain\.xml|favicon\.ico).*$
 
 RewriteRule .* - [L]
diff --git a/INSTALL/includes/check.php b/INSTALL/includes/check.php
deleted file mode 100644
index 4e3a5fe1a..000000000
--- a/INSTALL/includes/check.php
+++ /dev/null
@@ -1,172 +0,0 @@
-<?php
-
-if (empty($CHECK_INCLUDED)) {
-    define('AUTH_AUTHREQUIRED', true);
-    define('SETTINGS_INSTALLREQUIRED', false);
-    include '../../engine/inc.page.php';
-}
-
-if (empty($settings['berta']['installed'])) {
-
-    function getStatus($isOk, $message, $failDesc = '', $isIndented = false, $isFatal = true)
-    {
-        return '<li' . ($isIndented ? ' class="indented"' : '') . '><div class="status xVisualStatus' . ($isOk ? 'OK' : ($isFatal ? 'Fail' : 'Warning')) . '">' . ($isOk ? 'YES' : 'NO') . '</div>' . $message .
-               (! $isOk && $failDesc ? ('<div class="infoFail">' . $failDesc . '</div>') : '') .
-               '</li>';
-    }
-
-    $listOk = true;
-    $listHasErrors = false;
-
-    $uriPath = explode('?', $_SERVER['REQUEST_URI'])[0];
-    $redirectURL = strstr($uriPath, '/editor') ? $ENGINE_ROOT_URL . 'editor/' : $ENGINE_ROOT_URL;
-
-    $testOutput = '<ul id="xFirstTimeCheckList">';
-    $testOutput .= '<p><strong>Is your website hosted on a suitable server?</strong></p>';
-
-    // php version ...
-    $isOk = version_compare(PHP_VERSION, '8.4', '>=');
-    $listOk &= $isOk;
-    $listHasErrors |= ! $isOk;
-    $testOutput .= getStatus($isOk, 'Supported PHP version', 'Berta needs PHP >= 8.4 support on server. Ask your server administrator to enable supported PHP version.');
-
-    // multibyte ...
-    $isOk = function_exists('mb_ereg_replace') && function_exists('mb_strlen') && function_exists('mb_substr');
-    $listOk &= $isOk;
-    $listHasErrors |= ! $isOk;
-    $testOutput .= getStatus($isOk, 'Server supports international characters', 'Berta cannot function properly without unicode text support. Please ask your server administrator for PHP Multibyte support.');
-
-    // GD ...
-    $gdInfo = function_exists('gd_info') ? gd_info() : false;
-    $isOk = (bool) $gdInfo;
-    $listOk &= $isOk;
-    $listHasErrors |= ! $isOk;
-    $testOutput .= getStatus($isOk, 'PHP Graphics library installed', 'Berta won\'t be able to resize and make thumbnails for images you will upload. Ask your server administrator for PHP GD support.');
-
-    // GD formats ...
-    if ($gdInfo) {
-        $gdInfo['JPEG Support'] = isset($gdInfo['JPEG Support']) ? $gdInfo['JPEG Support'] : (isset($gdInfo['JPG Support']) ? $gdInfo['JPG Support'] : false);
-        $listOk &= $gdInfo['JPEG Support'];
-        $listHasErrors |= (! $gdInfo['GIF Read Support'] || ! $gdInfo['JPEG Support'] || ! $gdInfo['PNG Support']);
-        $testOutput .= getStatus($gdInfo['GIF Read Support'], 'GIF read support', 'You won\'t be able to upload GIF images for your website', true, false);
-        $testOutput .= getStatus($gdInfo['JPEG Support'], 'JPEG support', 'You won\'t be able to upload JPEG images for your website. Berta won\'t be able to make thumbnails for your images... bad! Ask your server administrator for JPEG support.', true);
-        $testOutput .= getStatus($gdInfo['PNG Support'], 'PNG support', 'You won\'t be able to upload PNG images for your website', true, false);
-    }
-
-    // upload sizes ...
-    $isOk = floatval(ini_get('upload_max_filesize')) >= 256 && floatval(ini_get('post_max_size')) >= 256;
-    /* $listOk &= $isOk; */ $listHasErrors |= ! $isOk;
-    $testOutput .= getStatus($isOk, 'Large file uploads (for videos) allowed',
-        'Your server runs PHP in CGI mode, which doesn\'t allow tweaking PHP options in .htaccess files. Please tell this to your server administrator and ask for bigger file uploads (over 200Mb for larger videos).', false, false);
-
-    $testOutput .= '<p><br /><strong>Have you installed your website properly?</strong></p>';
-
-    // storage writable ...
-    $isOk = file_exists($SITE_ROOT_PATH . 'storage') && is_writable($SITE_ROOT_PATH . 'storage');
-    $listOk &= $isOk;
-    $listHasErrors |= ! $isOk;
-    $testOutput .= getStatus($isOk, 'Storage folder exists and is writable', 'Please make sure the folder called "storage" in your Berta installation exists and is writable. Check step (3) in the installing instructions (located in the INSTALL folder) for details.');
-
-    $testOutput .= '</ul>';
-    $testOutput .= '<p>A green <span class="xVisualStatusOK">YES</span> means that you don\'t even need to read what it is about - it\'s just all fine. A yellow <span class="xVisualStatusWarning">NO</span> means that ' .
-        'Berta will still work, but the feature will not be available to you. The red <span class="xVisualStatusFail">NO</span> is the bad one - if there is one, it will have a suggestion ' .
-        'what can be done to correct the situation.</p>';
-
-    // if the test was ok without any warnings then redirect to the next step
-    if ($listOk && ! $listHasErrors) {
-        header('Location: .?_berta_install_step=2' . (! empty($options['MULTISITE']) ? '&site=' . $options['MULTISITE'] : ''));
-        exit;
-    }
-}
-
-$version = $options['version'];
-
-?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title><?php echo $berta->settings->get('texts', 'pageTitle') ?> / welcome</title>
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/backend.min.css?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/editor.css.php?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/login.css?<?php echo $version ?>" type="text/css" />
-</head><?php
-
-if (! empty($settings['berta']['installed'])) {
-    ?><body class="xLoginPageBody">
-		<div class="xMAlign-container xPanel">
-			<div class="xMAlign-outer">
-				<div class="xMAlign-inner">
-					<p>Berta is already installed.<br />Please delete folder named <strong><code>INSTALL</code></strong> in your Berta's root folder! <br />&nbsp;<br /><input type="button" value="  OK  " onclick="window.location='<?php echo $SITE_ROOT_URL ?>';"></p>
-				</div>
-			</div>
-		</div>
-	</body><?php
-
-} else {
-
-    ?><body class="xLoginPageBody xSetupWizard">
-		<div class="xMAlign-container xPanel">
-			<div class="xMAlign-outer">
-				<div class="xMAlign-inner justify">
-					<?php
-
-                    if ($listOk) {
-                        $bottomNote = '<p class="xBottomNote">Note: This check-list is displayed only once. To re-enable it you will need to manually edit settings.xml file in your storage folder and delete the row that looks like <strong><code>' . htmlspecialchars('<installed><![CDATA[1]]></installed>') . '</code></strong>.</p>';
-
-                        if (! $listHasErrors) {
-
-                            // normally this is not visible because of a redirect earlier...
-
-                            echo '<div id="xFirstTimeCheckResult">';
-                            echo '<h2>Welcome!</h2>';
-                            echo '<p class="emphasis">Berta has completed a small test to see if it has everything it needs. It turns out that everything is just perfect.</p>';
-                            echo '<p><input type="button" value=" Start building your site! " id="xFirstTimeCheckContinue" onclick="window.location=\'' . $redirectURL . '?_berta_install_step=2' . (! empty($options['MULTISITE']) ? '&site=' . $options['MULTISITE'] : '') . '\'" /></p>';
-                            echo '<br class="clear" /></div>';
-
-                            echo '<p>Test results:</p>';
-                            echo $testOutput;
-                            echo $bottomNote;
-
-                        } else {
-
-                            // some warnings...
-
-                            echo '<div id="xFirstTimeCheckResult">';
-                            echo '<h2>Welcome...</h2>';
-                            echo '<p class="emphasis">Berta has completed a small test to see if it has everything it needs.</p>';
-                            echo '<p class="emphasis">It appears that there are some issues with the server or the installation. You will be able to use Berta, although with limited functionality. Please take a look at the results below.</p>';
-                            echo '</div>';
-
-                            echo $testOutput;
-
-                            echo '<p><br />If you like to, you can ignore the errors and: <input type="button" value=" Start with Berta! " class="xCheckListContinue" onclick="window.location=\'' . $redirectURL . '?_berta_install_step=2' . (! empty($options['MULTISITE']) ? '&site=' . $options['MULTISITE'] : '') . '\'" /></p>';
-
-                            echo $bottomNote;
-                        }
-
-                    } else {
-
-                        // errors..
-
-                        echo '<div id="checkResult">';
-                        echo '<h2>Take action!</h2>';
-                        echo '<p class="emphasis">Berta has completed a small test to see if it has everything it needs.</p>';
-                        echo '<p class="emphasis">It turns out that there are some problems with the server or with the installation. Please take a look at the results below and follow the suggestions for each error, and then come back again! </p>';
-                        echo '</div>';
-
-                        echo $testOutput;
-
-                        echo '<p><input type="button" value=" Run the test again... " id="xFirstTimeCheckContinue" onclick="window.location.reload()" /></p>';
-
-                    }
-
-    ?></div>
-			</div>
-		</div>
-	</body><?php
-
-}
-
-?></html><?php
-
-?>
diff --git a/INSTALL/includes/first_visit.php b/INSTALL/includes/first_visit.php
deleted file mode 100644
index c3b68265c..000000000
--- a/INSTALL/includes/first_visit.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-if (empty($CHECK_INCLUDED)) {
-    /** @todo
-     * - Check why is the 'inc.page.php' included here if this file is included in it */
-    define('AUTH_AUTHREQUIRED', true);
-    define('SETTINGS_INSTALLREQUIRED', false);
-    include '../../engine/inc.page.php';
-}
-
-$version = $options['version'];
-
-?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title><?php echo $berta->settings->get('texts', 'pageTitle') ?> / <?php echo I18n::_('welcome') ?></title>
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/backend.min.css?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/editor.css.php?<?php echo $version ?>" type="text/css" charset="utf-8" />
-<link rel="stylesheet" href="<?php echo $ENGINE_ROOT_URL ?>css/login.css?<?php echo $version ?>" type="text/css" />
-</head>
-<body class="xLoginPageBody">
-	<div class="xMAlign-container xPanel">
-		<div class="xMAlign-outer">
-			<div class="xMAlign-inner">
-				<?php echo sprintf(I18n::_('welcome_text__not_installed'), $ENGINE_ROOT_URL . (! empty($options['MULTISITE']) ? '?site=' . $options['MULTISITE'] : '')) ?>
-			</div>
-		</div>
-	</div>
-</body>
-</html>
diff --git a/INSTALL/includes/first_visit_serverreqs.php b/INSTALL/includes/first_visit_serverreqs.php
deleted file mode 100644
index d663883bf..000000000
--- a/INSTALL/includes/first_visit_serverreqs.php
+++ /dev/null
@@ -1,71 +0,0 @@
-<?php
-
-if (empty($CHECK_INCLUDED)) {
-    define('AUTH_AUTHREQUIRED', true);
-    define('SETTINGS_INSTALLREQUIRED', false);
-    include '../../engine/inc.page.php';
-}
-
-?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <title>berta / welcome</title>
-        <style type="text/css">
-            html, body {
-                width: 100%;
-                height: 100%;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                color: #333333;
-                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-                font-size: 12px;
-                font-weight: normal;
-                font-style: normal;
-                font-variant: normal;
-                line-height: normal;
-                background-color: #FFFFFF;
-                text-align: left;
-            }
-            .xMAlign-container {
-                display: table;
-                width: 100%;
-                height: 100%;
-            }
-                .xMAlign-outer {
-                    display: table-cell;
-                    vertical-align: middle;
-                    text-align: center;
-                    top: 50%;
-                }
-                    .xMAlign-inner {
-                        display: block;
-                        position: relative;
-                        top: -50%;
-                        text-align: center;
-                        width: 400px;
-                        margin-left: auto;
-                        margin-right: auto;
-                        padding: 30px;
-                    }
-                        h2 {
-                            margin: 0 0 20px;
-                            font-size: 400%;
-                            line-height: 100%;
-                        }
-        </style>
-    </head>
-    <body class="xLoginPageBody">
-        <div class="xMAlign-container xPanel">
-            <div class="xMAlign-outer">
-                <div class="xMAlign-inner">
-                    <h2>Thank you for choosing Berta.me!</h2>
-                    <p>This server does not meet Berta's requirements.<br />
-                    Berta needs PHP >= 8.4 support on server.</p>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/INSTALL/includes/index.php b/INSTALL/includes/index.php
deleted file mode 100644
index 74beedc37..000000000
--- a/INSTALL/includes/index.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-/** @todo
- * - fix this path:  */
-define('AUTH_AUTHREQUIRED', false);
-define('SETTINGS_INSTALLREQUIRED', false);
-include '../../engine/inc.page.php';
-
-if (empty($settings['berta']['installed'])) {
-    if (file_exists('./READ-ME!.html')) {
-        include 'READ-ME!.html';
-    } else {
-        echo 'Berta is not installed. Please go to Berta\'s homepage for instructions.';
-    }
-} else {
-    header('Location: ../');
-    exit;
-}
diff --git a/INSTALL/index.html b/INSTALL/index.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/LocalValetDriver.php b/LocalValetDriver.php
new file mode 100644
index 000000000..ca00951b7
--- /dev/null
+++ b/LocalValetDriver.php
@@ -0,0 +1,179 @@
+<?php
+
+use Valet\Drivers\BasicValetDriver;
+
+/**
+ * Laravel Herd / Valet driver for local development.
+ *
+ * nginx ignores `.htaccess`, so this mirrors the rewrite rules of `.htaccess`
+ * and `_api/.htaccess`. Keep them in sync when the rules change. Apache never
+ * runs this file, the root `.htaccess` sends every such request to index.php.
+ *
+ * Herd runs the driver with the site's PHP version, also versions too old for
+ * Berta (to show the requirements check), so no PHP 8+ only functions or syntax.
+ *
+ * Setup: run `herd link berta` in the repository root, then open http://berta.test
+ */
+class LocalValetDriver extends BasicValetDriver
+{
+    private const STATIC = 'static';
+
+    private const PHP = 'php';
+
+    private const REDIRECT = 'redirect';
+
+    private const FORBIDDEN = 'forbidden';
+
+    private const NOT_FOUND = 'not_found';
+
+    /**
+     * Paths served as they are, see the passthrough rule in `.htaccess`
+     */
+    private const PASSTHROUGH_PATTERN = '#^/(\.well-known|_plugin_shop|engine|storage|_templates|_themes|index\.php|sitemap\.xml\.php|robots\.txt|crossdomain\.xml|favicon\.ico)#';
+
+    public function serves(string $sitePath, string $siteName, string $uri): bool
+    {
+        return file_exists($sitePath . '/engine/inc.page.php');
+    }
+
+    public function isStaticFile(string $sitePath, string $siteName, string $uri)
+    {
+        [$type, $target] = $this->resolve($sitePath, $uri);
+
+        return $type === self::STATIC ? $target : false;
+    }
+
+    public function frontControllerPath(string $sitePath, string $siteName, string $uri): ?string
+    {
+        [$type, $target] = $this->resolve($sitePath, $uri);
+
+        switch ($type) {
+            case self::PHP:
+                $scriptName = substr($target, strlen($sitePath));
+                $_SERVER['SCRIPT_FILENAME'] = $target;
+                $_SERVER['SCRIPT_NAME'] = $scriptName;
+                $_SERVER['PHP_SELF'] = $scriptName;
+                $_SERVER['DOCUMENT_ROOT'] = $sitePath;
+
+                return $target;
+
+            case self::STATIC:
+                // `.php` URIs skip isStaticFile(), e.g. /engine/index.php
+                $this->serveStaticFile($target, $sitePath, $siteName, $uri);
+                exit;
+
+            case self::REDIRECT:
+                $query = $_SERVER['QUERY_STRING'] ?? '';
+                header('Location: ' . $target . ($query !== '' ? '?' . $query : ''), true, 301);
+                exit;
+
+            case self::FORBIDDEN:
+                http_response_code(403);
+                exit('Forbidden');
+
+            default:
+                http_response_code(404);
+                exit('Not Found');
+        }
+    }
+
+    /**
+     * @return array{0: string, 1: ?string} Route type and its target (file path or redirect URL)
+     */
+    private function resolve(string $sitePath, string $uri): array
+    {
+        $path = $sitePath . $uri;
+
+        // _api/.htaccess
+        if ($uri === '/_api' || $this->startsWith($uri, '/_api/')) {
+            if ($this->endsWith($uri, '/') && ! is_dir($path)) {
+                return [self::REDIRECT, rtrim($uri, '/')];
+            }
+
+            if ($this->isActualFile($path)) {
+                return $this->fileRoute($path);
+            }
+
+            return [self::PHP, $sitePath . '/_api/index.php'];
+        }
+
+        // Root .htaccess, in the same order
+        if ($this->endsWith($uri, 'engine/hosting')) {
+            return [self::FORBIDDEN, null];
+        }
+
+        if ($uri === '/engine/index.php') {
+            return [self::STATIC, $sitePath . '/engine/dist/index.html'];
+        }
+
+        if ($this->startsWith($uri, '/engine') && ! $this->startsWith($uri, '/engine/editor') && ! $this->isActualFile($path)) {
+            return [self::STATIC, $sitePath . '/engine/dist/index.html'];
+        }
+
+        if (preg_match('#^/storage.*\.(xml|sqlite|db|log|php)$#', $uri) || $uri === '/storage/' || $uri === '/_templates/') {
+            return [self::NOT_FOUND, null];
+        }
+
+        if (preg_match(self::PASSTHROUGH_PATTERN, $uri)) {
+            return $this->passthroughRoute($path, $uri);
+        }
+
+        if (! $this->isActualFile($path) && ! $this->endsWith($uri, 'index.php') && ! $this->endsWith($uri, '/')) {
+            return [self::REDIRECT, $uri . '/'];
+        }
+
+        $this->addRewriteFlag();
+
+        return [self::PHP, $sitePath . '/index.php'];
+    }
+
+    /**
+     * Served as is, with Apache's DirectoryIndex and `Options -Indexes` behaviour for folders
+     */
+    private function passthroughRoute(string $path, string $uri): array
+    {
+        if ($this->isActualFile($path)) {
+            return $this->fileRoute($path);
+        }
+
+        if (is_dir($path)) {
+            if (! $this->endsWith($uri, '/')) {
+                return [self::REDIRECT, $uri . '/'];
+            }
+
+            foreach (['index.php', 'index.html'] as $index) {
+                if ($this->isActualFile($path . $index)) {
+                    return $this->fileRoute($path . $index);
+                }
+            }
+        }
+
+        return [self::NOT_FOUND, null];
+    }
+
+    private function fileRoute(string $path): array
+    {
+        return [$this->endsWith($path, '.php') ? self::PHP : self::STATIC, $path];
+    }
+
+    /**
+     * `index.php?__rewrite=1 [QSA]`, the engine enables clean URLs with this flag
+     */
+    private function addRewriteFlag(): void
+    {
+        $_GET['__rewrite'] = '1';
+        $_REQUEST['__rewrite'] = '1';
+        $query = $_SERVER['QUERY_STRING'] ?? '';
+        $_SERVER['QUERY_STRING'] = ($query !== '' ? $query . '&' : '') . '__rewrite=1';
+    }
+
+    private function startsWith(string $haystack, string $needle): bool
+    {
+        return strncmp($haystack, $needle, strlen($needle)) === 0;
+    }
+
+    private function endsWith(string $haystack, string $needle): bool
+    {
+        return $needle === '' || substr($haystack, -strlen($needle)) === $needle;
+    }
+}
diff --git a/_api/index.php b/_api/index.php
index 8060b9fa7..1fcf0ab1e 100644
--- a/_api/index.php
+++ b/_api/index.php
@@ -2,5 +2,6 @@
 
 use Illuminate\Http\Request;
 
+require __DIR__ . '/../_api_app/bootstrap/requirements_guard.php';
 require_once __DIR__ . '/../_api_app/bootstrap/load_app.php';
 (require_once __DIR__ . '/../_api_app/bootstrap/app.php')->handleRequest(Request::capture());
diff --git a/_api_app/app/Setup/ServerRequirementsController.php b/_api_app/app/Setup/ServerRequirementsController.php
new file mode 100644
index 000000000..f9b1dfd7e
--- /dev/null
+++ b/_api_app/app/Setup/ServerRequirementsController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Setup;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
+
+class ServerRequirementsController extends Controller
+{
+    /**
+     * Server requirements are reported only before Berta is installed, so server
+     * details are not exposed to the public afterwards.
+     */
+    public function index(ServerRequirementsService $service): JsonResponse
+    {
+        if ($service->isInstalled()) {
+            return response()->json([
+                'installed' => true,
+                'requirements' => [],
+            ]);
+        }
+
+        return response()->json([
+            'installed' => false,
+            'requirements' => $service->check(),
+        ]);
+    }
+}
diff --git a/_api_app/app/Setup/ServerRequirementsService.php b/_api_app/app/Setup/ServerRequirementsService.php
new file mode 100644
index 000000000..f007a1400
--- /dev/null
+++ b/_api_app/app/Setup/ServerRequirementsService.php
@@ -0,0 +1,257 @@
+<?php
+
+namespace App\Setup;
+
+use DOMDocument;
+use DOMXPath;
+use Dotenv\Dotenv;
+use Illuminate\Support\Facades\File;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+/**
+ * Checks if the server and the installation meet Berta's requirements.
+ *
+ * Checks that must work before Laravel can boot (PHP version, vendor folder) live
+ * in bootstrap/requirements_check.php, both share bootstrap/requirements.php.
+ */
+class ServerRequirementsService
+{
+    public const MIN_UPLOAD_SIZE = 256 * 1024 * 1024;
+
+    public const MIN_MEMORY_LIMIT = 128 * 1024 * 1024;
+
+    private const ENV_PLACEHOLDERS = ['', '[YOUR_APP_KEY]'];
+
+    private array $requirements;
+
+    public function __construct()
+    {
+        $this->requirements = require base_path('bootstrap/requirements.php');
+    }
+
+    /**
+     * Reads only the `berta/installed` flag of the main site settings. SiteSettingsDataService
+     * is not used on purpose, it depends on auth, engine settings and templates which may not
+     * work on a server that fails the requirements.
+     */
+    public function isInstalled(): bool
+    {
+        $settingsFile = $this->bertaStoragePath() . '/settings.xml';
+
+        if (! File::isReadable($settingsFile)) {
+            return false;
+        }
+
+        $document = new DOMDocument;
+
+        if (! @$document->loadXML(File::get($settingsFile))) {
+            return false;
+        }
+
+        $installed = (new DOMXPath($document))->evaluate('string(/settings/berta/installed)');
+
+        return (bool) (int) trim($installed);
+    }
+
+    /**
+     * @return array<int, array{key: string, group: string, label: string, ok: bool, fatal: bool, message: string}>
+     */
+    public function check(): array
+    {
+        return [
+            ...$this->serverChecks(),
+            ...$this->installationChecks(),
+        ];
+    }
+
+    /**
+     * Parse php.ini byte values like `128M` or `2G`.
+     *
+     * @return int|null Bytes, null for an unlimited value (-1)
+     */
+    public static function parseIniBytes(string $value): ?int
+    {
+        $bytes = @ini_parse_quantity($value);
+
+        return $bytes < 0 ? null : $bytes;
+    }
+
+    private function serverChecks(): array
+    {
+        $checks = [];
+
+        $checks[] = $this->row(
+            'php',
+            'server',
+            'Supported PHP version (' . $this->requirements['php'] . ' or newer)',
+            version_compare(PHP_VERSION, $this->requirements['php'], '>='),
+            'Berta needs PHP ' . $this->requirements['php'] . ' or newer. Ask your server administrator to enable a supported PHP version.',
+        );
+
+        foreach ($this->requirements['extensions'] as $extension => $label) {
+            $isOk = extension_loaded($extension);
+
+            if ($extension === 'mbstring') {
+                $isOk = $isOk && function_exists('mb_ereg_replace');
+            }
+
+            $checks[] = $this->row(
+                'ext_' . $extension,
+                'server',
+                'PHP extension: ' . $label,
+                $isOk,
+                'Berta can not work without the PHP "' . $extension . '" extension. Ask your server administrator to enable it.',
+            );
+        }
+
+        if (extension_loaded('gd')) {
+            $gdInfo = gd_info();
+
+            $checks[] = $this->row(
+                'gd_jpeg',
+                'server',
+                'JPEG image support',
+                ! empty($gdInfo['JPEG Support']),
+                'You won\'t be able to upload JPEG images and Berta won\'t be able to make thumbnails. Ask your server administrator for GD JPEG support.',
+            );
+            $checks[] = $this->row(
+                'gd_png',
+                'server',
+                'PNG image support',
+                ! empty($gdInfo['PNG Support']),
+                'You won\'t be able to upload PNG images.',
+                false,
+            );
+            $checks[] = $this->row(
+                'gd_gif',
+                'server',
+                'GIF image support',
+                ! empty($gdInfo['GIF Read Support']) && ! empty($gdInfo['GIF Create Support']),
+                'You won\'t be able to upload GIF images.',
+                false,
+            );
+        }
+
+        // Takes both `upload_max_filesize` and `post_max_size` into account
+        $checks[] = $this->row(
+            'upload_size',
+            'server',
+            'Large file uploads (videos) allowed',
+            UploadedFile::getMaxFilesize() >= self::MIN_UPLOAD_SIZE,
+            'Uploads are limited to ' . $this->formatBytes(UploadedFile::getMaxFilesize()) . '. Ask your server administrator to set PHP "upload_max_filesize" and "post_max_size" to at least 256M for larger videos.',
+            false,
+        );
+
+        $memoryLimit = self::parseIniBytes((string) ini_get('memory_limit'));
+        $checks[] = $this->row(
+            'memory_limit',
+            'server',
+            'Enough memory for image processing',
+            $memoryLimit === null || $memoryLimit >= self::MIN_MEMORY_LIMIT,
+            'PHP "memory_limit" is ' . ini_get('memory_limit') . ', resizing large images may fail. Ask your server administrator to set it to at least 128M.',
+            false,
+        );
+
+        return $checks;
+    }
+
+    private function installationChecks(): array
+    {
+        $storagePath = $this->bertaStoragePath();
+        $isStorageWritable = File::isDirectory($storagePath) && File::isWritable($storagePath);
+
+        $checks = [];
+
+        $checks[] = $this->row(
+            'storage',
+            'installation',
+            'Folder "storage" exists and is writable',
+            $isStorageWritable,
+            'Make sure the folder "storage" in your Berta installation exists and is writable by the web server. Use your FTP client to set the permissions.',
+        );
+
+        $mediaFolders = array_map(fn ($folder) => $storagePath . '/' . $folder, ['media', 'cache']);
+        $checks[] = $this->row(
+            'storage_media',
+            'installation',
+            'Folders "storage/media" and "storage/cache" are writable',
+            collect($mediaFolders)->every(
+                fn ($path) => File::isDirectory($path) ? File::isWritable($path) : $isStorageWritable,
+            ),
+            'Make sure the folders "storage/media" and "storage/cache" are writable by the web server, or delete them so Berta can create them.',
+        );
+
+        $apiStoragePaths = [
+            storage_path(),
+            storage_path('framework/cache'),
+            storage_path('framework/sessions'),
+            storage_path('framework/views'),
+            storage_path('logs'),
+        ];
+        $checks[] = $this->row(
+            'api_storage',
+            'installation',
+            'Folder "_api_app/storage" is writable',
+            collect($apiStoragePaths)->every(fn ($path) => File::isDirectory($path) && File::isWritable($path)),
+            'Make sure the folder "_api_app/storage" and all its subfolders exist and are writable by the web server.',
+        );
+
+        $bootstrapCachePath = base_path('bootstrap/cache');
+        $checks[] = $this->row(
+            'api_bootstrap_cache',
+            'installation',
+            'Folder "_api_app/bootstrap/cache" is writable',
+            File::isDirectory($bootstrapCachePath) && File::isWritable($bootstrapCachePath),
+            'Make sure the folder "_api_app/bootstrap/cache" exists and is writable by the web server.',
+        );
+
+        $checks[] = $this->row(
+            'app_key',
+            'installation',
+            'Application key is set',
+            $this->hasAppKey(),
+            'Berta could not create the "_api_app/.env" file. Make sure the "_api_app" folder is writable by the web server, or copy "_api_app/.env.example" to "_api_app/.env".',
+        );
+
+        return $checks;
+    }
+
+    /**
+     * Reads the .env file directly: SetupMiddleware generates APP_KEY during this
+     * same request, after the config was already loaded.
+     */
+    private function hasAppKey(): bool
+    {
+        $envPath = base_path('.env');
+
+        if (! File::exists($envPath)) {
+            return false;
+        }
+
+        $env = Dotenv::parse(File::get($envPath));
+
+        return ! in_array($env['APP_KEY'] ?? '', self::ENV_PLACEHOLDERS, true);
+    }
+
+    private function bertaStoragePath(): string
+    {
+        return config('app.old_berta_root') . '/storage';
+    }
+
+    private function formatBytes(int|float $bytes): string
+    {
+        return round($bytes / 1024 / 1024) . 'M';
+    }
+
+    private function row(string $key, string $group, string $label, bool $isOk, string $message, bool $isFatal = true): array
+    {
+        return [
+            'key' => $key,
+            'group' => $group,
+            'label' => $label,
+            'ok' => $isOk,
+            'fatal' => $isFatal,
+            'message' => $isOk ? '' : $message,
+        ];
+    }
+}
diff --git a/_api_app/bootstrap/requirements.php b/_api_app/bootstrap/requirements.php
new file mode 100644
index 000000000..f9ccc0735
--- /dev/null
+++ b/_api_app/bootstrap/requirements.php
@@ -0,0 +1,33 @@
+<?php
+
+/*
+ * Server requirements shared by the pre-boot guard (requirements_guard.php) and
+ * App\Setup\ServerRequirementsService.
+ *
+ * Keep this file parsable by old PHP versions: the guard includes it before
+ * checking the PHP version, so no modern syntax here.
+ */
+
+return [
+    // Matches Composer's platform_check.php for the "php": "^8.4" constraint
+    'php' => '8.4.1',
+
+    // Extensions Berta uses and that can be missing on a server: not built by
+    // default (mbstring, gd, openssl, curl) or often packaged separately / disabled
+    // by hosts (dom, fileinfo, session, tokenizer, filter).
+    // Left out on purpose: always compiled in (hash, json, pcre), implied by dom
+    // (libxml), polyfilled (ctype), unused by Berta (pdo, xml), although Laravel
+    // lists them. `mbstring` is required despite symfony/polyfill-mbstring, the
+    // polyfill does not provide `mb_ereg_replace`.
+    'extensions' => [
+        'mbstring' => 'Multibyte strings (international characters)',
+        'gd' => 'GD graphics library (image resizing and thumbnails)',
+        'dom' => 'DOM (XML content storage)',
+        'fileinfo' => 'Fileinfo (uploaded file type detection)',
+        'openssl' => 'OpenSSL',
+        'session' => 'Session',
+        'tokenizer' => 'Tokenizer',
+        'filter' => 'Filter',
+        'curl' => 'cURL',
+    ],
+];
diff --git a/_api_app/bootstrap/requirements_check.php b/_api_app/bootstrap/requirements_check.php
new file mode 100644
index 000000000..176fd2f90
--- /dev/null
+++ b/_api_app/bootstrap/requirements_check.php
@@ -0,0 +1,45 @@
+<?php
+
+/*
+ * Requirements that must be met before Laravel can boot: a too old PHP makes
+ * vendor/composer/platform_check.php throw, a missing vendor/ makes the autoloader
+ * require fail.
+ *
+ * Returns the failed requirements (same shape as App\Setup\ServerRequirementsService
+ * rows), an empty array when all is fine. Outputs nothing, callers decide how to
+ * respond: the API guard (requirements_guard.php) answers with JSON, the engine
+ * (engine/loader.helper.php) redirects to the editor.
+ *
+ * Keep this file parsable by old PHP versions: no `??`, typed or arrow functions,
+ * `match` etc.
+ */
+
+$bertaRequirements = require __DIR__ . '/requirements.php';
+$bertaFailedRequirements = [];
+
+if (version_compare(PHP_VERSION, $bertaRequirements['php'], '<')) {
+    $bertaFailedRequirements[] = [
+        'key' => 'php',
+        'group' => 'server',
+        'label' => 'Supported PHP version (' . $bertaRequirements['php'] . ' or newer)',
+        'ok' => false,
+        'fatal' => true,
+        'message' => 'Berta needs PHP ' . $bertaRequirements['php'] . ' or newer, this server runs PHP ' . PHP_VERSION . '. Ask your server administrator to enable a supported PHP version.',
+    ];
+}
+
+if (! file_exists(__DIR__ . '/../vendor/autoload.php')) {
+    $bertaFailedRequirements[] = [
+        'key' => 'vendor',
+        'group' => 'installation',
+        'label' => 'Dependencies installed',
+        'ok' => false,
+        'fatal' => true,
+        'message' => 'The "_api_app/vendor" folder is missing. Upload the complete Berta package or run "composer install" in the "_api_app" folder.',
+    ];
+}
+
+// Required into the engine's global scope, don't leave anything behind
+unset($bertaRequirements);
+
+return $bertaFailedRequirements;
diff --git a/_api_app/bootstrap/requirements_guard.php b/_api_app/bootstrap/requirements_guard.php
new file mode 100644
index 000000000..c22ef79c0
--- /dev/null
+++ b/_api_app/bootstrap/requirements_guard.php
@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * Pre-boot requirements guard for the API.
+ *
+ * Runs before Composer's autoloader, so the API can still answer with JSON when
+ * Laravel itself can not boot. The editor shows the response in its server
+ * requirements modal.
+ *
+ * Keep this file parsable by old PHP versions: no `??`, typed or arrow functions,
+ * `match` etc.
+ */
+
+$bertaFailedRequirements = require __DIR__ . '/requirements_check.php';
+
+if ($bertaFailedRequirements) {
+    http_response_code(503);
+    header('Content-Type: application/json; charset=UTF-8');
+    header('Cache-Control: no-store');
+    echo json_encode([
+        'installed' => null,
+        'requirements' => $bertaFailedRequirements,
+    ]);
+    exit;
+}
+
+unset($bertaFailedRequirements);
diff --git a/_api_app/composer.json b/_api_app/composer.json
index 3a661f5d3..1ca997422 100644
--- a/_api_app/composer.json
+++ b/_api_app/composer.json
@@ -12,6 +12,12 @@
     "license": "MIT",
     "require": {
         "php": "^8.4",
+        "ext-curl": "*",
+        "ext-dom": "*",
+        "ext-fileinfo": "*",
+        "ext-gd": "*",
+        "ext-mbstring": "*",
+        "ext-openssl": "*",
         "firebase/php-jwt": "^7.0",
         "intervention/image": "^3.11",
         "laravel/ai": "^0.3.0",
diff --git a/_api_app/composer.lock b/_api_app/composer.lock
index 29a073722..f51c4371f 100644
--- a/_api_app/composer.lock
+++ b/_api_app/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "fc73b1292e31663a20bafb6cbda7c225",
+    "content-hash": "e43790057f21f165924c93d4e14c8ce0",
     "packages": [
         {
             "name": "brick/math",
@@ -10723,7 +10723,13 @@
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
-        "php": "^8.4"
+        "php": "^8.4",
+        "ext-curl": "*",
+        "ext-dom": "*",
+        "ext-fileinfo": "*",
+        "ext-gd": "*",
+        "ext-mbstring": "*",
+        "ext-openssl": "*"
     },
     "platform-dev": {},
     "plugin-api-version": "2.9.0"
diff --git a/_api_app/routes/api.php b/_api_app/routes/api.php
index 2884a53a5..1d1e25040 100644
--- a/_api_app/routes/api.php
+++ b/_api_app/routes/api.php
@@ -4,6 +4,7 @@
 use App\Http\Controllers\StateController;
 use App\Http\Middleware\Authenticate;
 use App\Http\Middleware\SetupMiddleware;
+use App\Setup\ServerRequirementsController;
 use App\Sites\Sections\Entries\SectionEntriesController;
 use App\Sites\Sections\SiteSectionsController;
 use App\Sites\Sections\Tags\SectionTagsController;
@@ -20,6 +21,7 @@
 
     Route::get('v1/meta', [StateController::class, 'getMeta'])->name('meta');
     Route::get('v1/sentry-dsn', [StateController::class, 'getSentryDSN'])->name('sentry');
+    Route::get('v1/requirements', [ServerRequirementsController::class, 'index'])->name('requirements');
 });
 
 Route::middleware([SetupMiddleware::class, Authenticate::class])->prefix('v1')->group(function () {
diff --git a/_api_app/tests/Feature/ServerRequirementsTest.php b/_api_app/tests/Feature/ServerRequirementsTest.php
new file mode 100644
index 000000000..91a939c26
--- /dev/null
+++ b/_api_app/tests/Feature/ServerRequirementsTest.php
@@ -0,0 +1,106 @@
+<?php
+
+use App\Setup\ServerRequirementsService;
+use Illuminate\Support\Facades\File;
+
+use function Pest\Laravel\get;
+
+beforeEach(function () {
+    $this->bertaRoot = sys_get_temp_dir() . '/berta_requirements_' . uniqid();
+    File::ensureDirectoryExists($this->bertaRoot . '/storage');
+    config(['app.old_berta_root' => $this->bertaRoot]);
+});
+
+afterEach(function () {
+    @chmod($this->bertaRoot . '/storage', 0777);
+    File::deleteDirectory($this->bertaRoot);
+});
+
+function writeInstalledFlag(string $bertaRoot, int $installed): void
+{
+    file_put_contents(
+        $bertaRoot . '/storage/settings.xml',
+        '<?xml version="1.0" encoding="utf-8"?><settings><berta><installed><![CDATA[' . $installed . ']]></installed></berta></settings>',
+    );
+}
+
+function requirementRow(array $requirements, string $key): ?array
+{
+    return collect($requirements)->firstWhere('key', $key);
+}
+
+it('does not expose requirements once Berta is installed', function () {
+    writeInstalledFlag($this->bertaRoot, 1);
+
+    get(route('requirements'))
+        ->assertOk()
+        ->assertExactJson([
+            'installed' => true,
+            'requirements' => [],
+        ]);
+});
+
+it('returns requirements while Berta is not installed', function () {
+    writeInstalledFlag($this->bertaRoot, 0);
+
+    $response = get(route('requirements'))
+        ->assertOk()
+        ->assertJsonPath('installed', false)
+        ->assertJsonStructure([
+            'requirements' => [
+                '*' => ['key', 'group', 'label', 'ok', 'fatal', 'message'],
+            ],
+        ]);
+
+    $requirements = $response->json('requirements');
+    $keys = collect($requirements)->pluck('key');
+
+    expect($keys)->toContain('php', 'ext_mbstring', 'ext_gd', 'ext_dom', 'gd_jpeg', 'upload_size', 'storage', 'api_storage', 'app_key');
+    expect(requirementRow($requirements, 'php')['ok'])->toBeTrue();
+    expect(requirementRow($requirements, 'storage')['ok'])->toBeTrue();
+    expect(requirementRow($requirements, 'upload_size')['fatal'])->toBeFalse();
+});
+
+it('treats a missing settings file as not installed', function () {
+    get(route('requirements'))
+        ->assertOk()
+        ->assertJsonPath('installed', false);
+});
+
+it('reports a missing storage folder as a fatal failure', function () {
+    File::deleteDirectory($this->bertaRoot . '/storage');
+
+    $requirements = get(route('requirements'))
+        ->assertOk()
+        ->assertJsonPath('installed', false)
+        ->json('requirements');
+
+    $storage = requirementRow($requirements, 'storage');
+    expect($storage['ok'])->toBeFalse();
+    expect($storage['fatal'])->toBeTrue();
+    expect($storage['message'])->not->toBeEmpty();
+    expect($storage['message'])->not->toContain($this->bertaRoot);
+    expect(requirementRow($requirements, 'storage_media')['ok'])->toBeFalse();
+});
+
+it('reports a read only storage folder as a fatal failure', function () {
+    chmod($this->bertaRoot . '/storage', 0555);
+
+    if (is_writable($this->bertaRoot . '/storage')) {
+        $this->markTestSkipped('Running as a user that can write to read only folders.');
+    }
+
+    $requirements = (new ServerRequirementsService)->check();
+
+    expect(requirementRow($requirements, 'storage')['ok'])->toBeFalse();
+});
+
+it('parses php.ini byte values', function (string $value, ?int $expected) {
+    expect(ServerRequirementsService::parseIniBytes($value))->toBe($expected);
+})->with([
+    ['2G', 2 * 1024 * 1024 * 1024],
+    ['300M', 300 * 1024 * 1024],
+    ['512K', 512 * 1024],
+    ['1048576', 1048576],
+    ['-1', null],
+]);
diff --git a/editor/src/app/app.component.ts b/editor/src/app/app.component.ts
index 840e7ddd8..09073055d 100644
--- a/editor/src/app/app.component.ts
+++ b/editor/src/app/app.component.ts
@@ -56,6 +56,7 @@ import { AppStateService } from './app-state/app-state.service';
     ></div>
     <berta-popup></berta-popup>
     <berta-ai-assistant></berta-ai-assistant>
+    <berta-server-requirements></berta-server-requirements>
   `,
   styles: [
     `
diff --git a/editor/src/app/app.module.ts b/editor/src/app/app.module.ts
index 64e5e9ee0..70cbcce07 100644
--- a/editor/src/app/app.module.ts
+++ b/editor/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { InlineEditOverlayComponent } from './preview/inline-edit/inline-edit-ov
 import { InlineEditRichTextOverlayComponent } from './preview/inline-edit/inline-edit-rich-text-overlay.component';
 import { PopupComponent } from './popup/popup.component';
 import { SetupWizardComponent } from './setup/setup-wizard.component';
+import { ServerRequirementsComponent } from './setup/server-requirements/server-requirements.component';
 import { ErrorState } from './error-state/error.state';
 import { SharedModule } from './shared/shared.module';
 import { StyleService } from './preview/style.service';
@@ -63,6 +64,7 @@ import { sentryInitFactory } from './sentry/sentry-init.factory';
     ThemesComponent,
     PopupComponent,
     SetupWizardComponent,
+    ServerRequirementsComponent,
   ],
   bootstrap: [AppComponent],
   imports: [
diff --git a/editor/src/app/login/login.component.ts b/editor/src/app/login/login.component.ts
index 542df3f3f..72932cb4b 100644
--- a/editor/src/app/login/login.component.ts
+++ b/editor/src/app/login/login.component.ts
@@ -14,6 +14,7 @@ import { AppState } from '../app-state/app.state';
 import { PopupService } from '../popup/popup.service';
 import { UserLoginAction } from '../user/user.actions';
 import { UserState } from '../user/user.state';
+import { ServerRequirementsService } from '../setup/server-requirements/server-requirements.service';
 
 @Component({
   selector: 'berta-login',
@@ -22,6 +23,11 @@ import { UserState } from '../user/user.state';
       @if (!(isLoggedIn$ | async)) {
         <div class="login-container setting-group">
           <h3><img src="/engine/layout/berta.png" /></h3>
+          @if (isNotInstalled$ | async) {
+            <p class="setup-notice">
+              Your site is not yet set up. Log in to create your website.
+            </p>
+          }
           @if (isLoading$ | async) {
             <div class="bt-login-loading">
               <berta-loading></berta-loading>
@@ -109,13 +115,16 @@ export class LoginComponent implements OnInit {
   isLoggedIn$: Observable<boolean>;
   isLoading$: Observable<boolean>;
   appState$: Observable<AppStateModel>;
+  isNotInstalled$: Observable<boolean>;
 
   constructor(
     private store: Store,
     private route: ActivatedRoute,
     private popupService: PopupService,
     private router: Router,
+    private serverRequirementsService: ServerRequirementsService,
   ) {
+    this.isNotInstalled$ = this.serverRequirementsService.isNotInstalled();
     this.isLoggedIn$ = this.store.select(UserState.isLoggedIn);
     this.isLoading$ = this.store.select(AppState.getShowLoading);
     this.appState$ = this.store.select((state) => state.app);
diff --git a/editor/src/app/render/template-render.service.ts b/editor/src/app/render/template-render.service.ts
index fee1c7f8a..964788ef7 100644
--- a/editor/src/app/render/template-render.service.ts
+++ b/editor/src/app/render/template-render.service.ts
@@ -86,7 +86,7 @@ export class TemplateRenderService {
     }
 
     // @todo: load current language translation here, we don't have all translations in state
-    return 'Built with <a href="http://www.berta.me/" target="_blank" title="Create your own website with Berta.me in minutes!">Berta.me</a>';
+    return 'Built with <a href="https://www.berta.me/" target="_blank" title="Create your own website with Berta.me in minutes!">Berta.me</a>';
   }
 
   getEntries(
diff --git a/editor/src/app/setup/server-requirements/server-requirements.component.spec.ts b/editor/src/app/setup/server-requirements/server-requirements.component.spec.ts
new file mode 100644
index 000000000..94ef8c60d
--- /dev/null
+++ b/editor/src/app/setup/server-requirements/server-requirements.component.spec.ts
@@ -0,0 +1,194 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { of } from 'rxjs';
+import { ServerRequirementsComponent } from './server-requirements.component';
+import { ServerRequirementsService } from './server-requirements.service';
+import {
+  RequirementModel,
+  RequirementsResponse,
+} from './server-requirements.interface';
+
+function requirement(
+  key: string,
+  ok: boolean,
+  fatal = true,
+  group: RequirementModel['group'] = 'server',
+): RequirementModel {
+  return { key, group, label: key, ok, fatal, message: ok ? '' : 'Fix it' };
+}
+
+describe('ServerRequirementsComponent', () => {
+  let fixture: ComponentFixture<ServerRequirementsComponent>;
+  let element: HTMLElement;
+  let response: RequirementsResponse;
+  let service: jasmine.SpyObj<ServerRequirementsService>;
+  let store: jasmine.SpyObj<Store>;
+  let router: { url: string; navigate: jasmine.Spy };
+
+  const render = (value: RequirementsResponse) => {
+    response = value;
+    fixture = TestBed.createComponent(ServerRequirementsComponent);
+    element = fixture.nativeElement;
+    fixture.detectChanges();
+  };
+
+  const buttonLabels = () =>
+    Array.from(element.querySelectorAll('.actions button')).map((button) =>
+      button.textContent.trim(),
+    );
+
+  beforeEach(async () => {
+    sessionStorage.removeItem('berta-server-requirements-dismissed');
+    service = jasmine.createSpyObj('ServerRequirementsService', ['check']);
+    service.check.and.callFake(() => of(response));
+    store = jasmine.createSpyObj('Store', ['selectSnapshot']);
+    store.selectSnapshot.and.returnValue(false);
+    router = { url: '/', navigate: jasmine.createSpy('navigate') };
+
+    await TestBed.configureTestingModule({
+      declarations: [ServerRequirementsComponent],
+      providers: [
+        { provide: ServerRequirementsService, useValue: service },
+        { provide: Store, useValue: store },
+        { provide: Router, useValue: router },
+      ],
+    }).compileComponents();
+  });
+
+  afterEach(() => {
+    sessionStorage.removeItem('berta-server-requirements-dismissed');
+  });
+
+  it('renders nothing when all requirements are met', () => {
+    render({
+      installed: false,
+      requirements: [requirement('php', true), requirement('gd', true)],
+    });
+
+    expect(element.querySelector('.server-requirements')).toBeNull();
+  });
+
+  it('renders nothing once Berta is installed', () => {
+    render({ installed: true, requirements: [requirement('php', false)] });
+
+    expect(element.querySelector('.server-requirements')).toBeNull();
+  });
+
+  it('blocks with a fatal failure and offers only to check again', () => {
+    render({
+      installed: false,
+      requirements: [
+        requirement('storage', false, true, 'installation'),
+        requirement('upload_size', false, false),
+      ],
+    });
+
+    expect(
+      element.querySelector('.server-requirements-overlay'),
+    ).not.toBeNull();
+    expect(element.querySelector('h2').textContent).toContain('Take action!');
+    expect(element.querySelectorAll('li.fail').length).toBe(1);
+    expect(element.querySelectorAll('li.warning').length).toBe(1);
+    expect(buttonLabels()).toEqual(['Check again']);
+  });
+
+  it('shows the API error payload from a failed boot', () => {
+    render({ installed: null, requirements: [requirement('php', false)] });
+
+    expect(element.querySelector('.server-requirements')).not.toBeNull();
+  });
+
+  it('lets warnings be dismissed for the session', () => {
+    render({
+      installed: false,
+      requirements: [
+        requirement('php', true),
+        requirement('upload_size', false, false),
+      ],
+    });
+
+    expect(buttonLabels()).toEqual(['Check again', 'Continue anyway']);
+
+    (
+      element.querySelectorAll('.actions button')[1] as HTMLButtonElement
+    ).click();
+    fixture.detectChanges();
+    expect(element.querySelector('.server-requirements')).toBeNull();
+
+    render(response);
+    expect(element.querySelector('.server-requirements')).toBeNull();
+  });
+
+  it('checks again and closes once requirements are met', () => {
+    render({
+      installed: false,
+      requirements: [requirement('storage', false)],
+    });
+
+    response = {
+      installed: false,
+      requirements: [requirement('storage', true)],
+    };
+    (element.querySelector('.actions button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+
+    expect(service.check).toHaveBeenCalledTimes(2);
+    expect(element.querySelector('.server-requirements')).toBeNull();
+  });
+
+  it('lists passed checks on request', () => {
+    render({
+      installed: false,
+      requirements: [requirement('php', true), requirement('storage', false)],
+    });
+
+    expect(element.querySelectorAll('li.ok').length).toBe(0);
+
+    (element.querySelector('.toggle-passed') as HTMLButtonElement).click();
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('li.ok').length).toBe(1);
+  });
+
+  describe('login redirect', () => {
+    const notInstalled: RequirementsResponse = {
+      installed: false,
+      requirements: [requirement('php', true)],
+    };
+
+    it('sends logged out visitors on the root route to the login screen', () => {
+      render(notInstalled);
+
+      expect(router.navigate).toHaveBeenCalledWith(['/login'], {
+        queryParamsHandling: 'preserve',
+      });
+    });
+
+    it('does not redirect logged in users', () => {
+      store.selectSnapshot.and.returnValue(true);
+      render(notInstalled);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('does not redirect once Berta is installed', () => {
+      render({ installed: true, requirements: [] });
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('does not redirect when the API could not report the installed state', () => {
+      render({ installed: null, requirements: [requirement('php', false)] });
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('does not redirect from other routes', () => {
+      router.url = '/login?site=demo';
+      render(notInstalled);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/editor/src/app/setup/server-requirements/server-requirements.component.ts b/editor/src/app/setup/server-requirements/server-requirements.component.ts
new file mode 100644
index 000000000..d023b51fb
--- /dev/null
+++ b/editor/src/app/setup/server-requirements/server-requirements.component.ts
@@ -0,0 +1,205 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { finalize } from 'rxjs/operators';
+import { UserState } from '../../user/user.state';
+import {
+  RequirementModel,
+  RequirementsResponse,
+} from './server-requirements.interface';
+import { ServerRequirementsService } from './server-requirements.service';
+
+interface RequirementGroup {
+  title: string;
+  failed: RequirementModel[];
+  passed: RequirementModel[];
+}
+
+const DISMISSED_STORAGE_KEY = 'berta-server-requirements-dismissed';
+
+/**
+ * Blocking modal listing unmet server requirements. The API reports them only
+ * while Berta is not installed, so after setup this never shows.
+ *
+ * Fatal failures block the editor until fixed, warnings can be dismissed for
+ * the browser session.
+ */
+@Component({
+  selector: 'berta-server-requirements',
+  template: `
+    @if (isVisible) {
+      <div class="server-requirements-overlay"></div>
+      <div
+        class="server-requirements"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="server-requirements-title"
+      >
+        <h2 id="server-requirements-title">
+          {{ hasFatal ? 'Take action!' : 'Almost there' }}
+        </h2>
+        @if (hasFatal) {
+          <p>
+            Berta has checked if it has everything it needs, and found problems
+            with the server or the installation. Follow the suggestions below,
+            then check again.
+          </p>
+        } @else {
+          <p>
+            Berta has checked if it has everything it needs. You can use Berta,
+            but some features will not be available.
+          </p>
+        }
+
+        @for (group of groups; track group.title) {
+          @if (group.failed.length || group.passed.length) {
+            <h3>{{ group.title }}</h3>
+            <ul>
+              @for (requirement of group.failed; track requirement.key) {
+                <li
+                  [class.fail]="requirement.fatal"
+                  [class.warning]="!requirement.fatal"
+                >
+                  <span class="status">NO</span>
+                  <div>
+                    <div>{{ requirement.label }}</div>
+                    <div class="message">{{ requirement.message }}</div>
+                  </div>
+                </li>
+              }
+              @if (showPassed) {
+                @for (requirement of group.passed; track requirement.key) {
+                  <li class="ok">
+                    <span class="status">YES</span>
+                    <div>{{ requirement.label }}</div>
+                  </li>
+                }
+              }
+            </ul>
+          }
+        }
+
+        @if (passedCount) {
+          <button
+            type="button"
+            class="toggle-passed"
+            (click)="showPassed = !showPassed"
+          >
+            {{ showPassed ? 'Hide' : 'Show' }} {{ passedCount }} passed
+            {{ passedCount === 1 ? 'check' : 'checks' }}
+          </button>
+        }
+
+        <div class="actions">
+          <button
+            type="button"
+            class="button"
+            [class.inverse]="!hasFatal"
+            [disabled]="isChecking"
+            (click)="check()"
+          >
+            {{ isChecking ? 'Checking…' : 'Check again' }}
+          </button>
+          @if (!hasFatal) {
+            <button type="button" class="button" (click)="continueAnyway()">
+              Continue anyway
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `,
+  standalone: false,
+})
+export class ServerRequirementsComponent implements OnInit {
+  groups: RequirementGroup[] = [];
+  hasFatal = false;
+  isVisible = false;
+  isChecking = false;
+  showPassed = false;
+  passedCount = 0;
+
+  constructor(
+    private service: ServerRequirementsService,
+    private store: Store,
+    private router: Router,
+  ) {}
+
+  ngOnInit() {
+    this.check();
+  }
+
+  check() {
+    this.isChecking = true;
+    this.service
+      .check()
+      .pipe(finalize(() => (this.isChecking = false)))
+      .subscribe((response) => this.update(response));
+  }
+
+  continueAnyway() {
+    try {
+      sessionStorage.setItem(DISMISSED_STORAGE_KEY, '1');
+    } catch {
+      // Storage unavailable, dismiss for this page load only
+    }
+    this.isVisible = false;
+  }
+
+  private update(response: RequirementsResponse) {
+    this.redirectToLogin(response);
+
+    const requirements = response.installed ? [] : response.requirements;
+    const failed = requirements.filter((requirement) => !requirement.ok);
+
+    this.hasFatal = failed.some((requirement) => requirement.fatal);
+    this.passedCount = requirements.length - failed.length;
+    this.groups = [
+      this.buildGroup('Server', 'server', requirements),
+      this.buildGroup('Installation', 'installation', requirements),
+    ];
+    this.isVisible =
+      failed.length > 0 && (this.hasFatal || !this.isDismissed());
+  }
+
+  /**
+   * The editor's root route shows a blank preview while the site is not
+   * installed, so logged out visitors go straight to the login screen.
+   */
+  private redirectToLogin(response: RequirementsResponse) {
+    if (
+      response.installed === false &&
+      !this.store.selectSnapshot(UserState.isLoggedIn) &&
+      this.router.url.split('?')[0] === '/'
+    ) {
+      this.router.navigate(['/login'], { queryParamsHandling: 'preserve' });
+    }
+  }
+
+  private buildGroup(
+    title: string,
+    group: RequirementModel['group'],
+    requirements: RequirementModel[],
+  ): RequirementGroup {
+    const inGroup = requirements.filter(
+      (requirement) => requirement.group === group,
+    );
+
+    return {
+      title,
+      // Fatal failures first
+      failed: inGroup
+        .filter((requirement) => !requirement.ok)
+        .sort((a, b) => Number(b.fatal) - Number(a.fatal)),
+      passed: inGroup.filter((requirement) => requirement.ok),
+    };
+  }
+
+  private isDismissed(): boolean {
+    try {
+      return sessionStorage.getItem(DISMISSED_STORAGE_KEY) === '1';
+    } catch {
+      return false;
+    }
+  }
+}
diff --git a/editor/src/app/setup/server-requirements/server-requirements.interface.ts b/editor/src/app/setup/server-requirements/server-requirements.interface.ts
new file mode 100644
index 000000000..1554719c6
--- /dev/null
+++ b/editor/src/app/setup/server-requirements/server-requirements.interface.ts
@@ -0,0 +1,14 @@
+export interface RequirementModel {
+  key: string;
+  group: 'server' | 'installation';
+  label: string;
+  ok: boolean;
+  fatal: boolean;
+  message: string;
+}
+
+export interface RequirementsResponse {
+  /** `null` when the API could not boot and the installed state is unknown */
+  installed: boolean | null;
+  requirements: RequirementModel[];
+}
diff --git a/editor/src/app/setup/server-requirements/server-requirements.service.spec.ts b/editor/src/app/setup/server-requirements/server-requirements.service.spec.ts
new file mode 100644
index 000000000..cbe5b2357
--- /dev/null
+++ b/editor/src/app/setup/server-requirements/server-requirements.service.spec.ts
@@ -0,0 +1,90 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { ServerRequirementsService } from './server-requirements.service';
+import { RequirementsResponse } from './server-requirements.interface';
+
+describe('ServerRequirementsService', () => {
+  let service: ServerRequirementsService;
+  let http: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(ServerRequirementsService);
+    http = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => http.verify());
+
+  it('returns the requirements', () => {
+    const body: RequirementsResponse = { installed: false, requirements: [] };
+    let result: RequirementsResponse;
+
+    service.check().subscribe((response) => (result = response));
+    http.expectOne('/_api/v1/requirements').flush(body);
+
+    expect(result).toEqual(body);
+  });
+
+  it('checks the installed state again on every call', () => {
+    const values: boolean[] = [];
+
+    service.isNotInstalled().subscribe((value) => values.push(value));
+    http
+      .expectOne('/_api/v1/requirements')
+      .flush({ installed: false, requirements: [] });
+
+    // Setup finished in the meantime, e.g. logout after the setup wizard
+    service.isNotInstalled().subscribe((value) => values.push(value));
+    http
+      .expectOne('/_api/v1/requirements')
+      .flush({ installed: true, requirements: [] });
+
+    expect(values).toEqual([true, false]);
+  });
+
+  it('uses the requirements payload of the pre-boot guard error', () => {
+    const body: RequirementsResponse = {
+      installed: null,
+      requirements: [
+        {
+          key: 'php',
+          group: 'server',
+          label: 'PHP',
+          ok: false,
+          fatal: true,
+          message: 'Too old',
+        },
+      ],
+    };
+    let result: RequirementsResponse;
+
+    service.check().subscribe((response) => (result = response));
+    http
+      .expectOne('/_api/v1/requirements')
+      .flush(body, { status: 503, statusText: 'Service Unavailable' });
+
+    expect(result).toEqual(body);
+  });
+
+  it('reports an unreadable API error as a warning, never blocking', () => {
+    let result: RequirementsResponse;
+
+    service.check().subscribe((response) => (result = response));
+    http.expectOne('/_api/v1/requirements').flush('Composer detected issues', {
+      status: 500,
+      statusText: 'Server Error',
+    });
+
+    expect(result.installed).toBeNull();
+    expect(result.requirements.length).toBe(1);
+    expect(result.requirements[0].ok).toBeFalse();
+    expect(result.requirements[0].fatal).toBeFalse();
+    expect(result.requirements[0].message).toContain('500');
+  });
+});
diff --git a/editor/src/app/setup/server-requirements/server-requirements.service.ts b/editor/src/app/setup/server-requirements/server-requirements.service.ts
new file mode 100644
index 000000000..51d70388c
--- /dev/null
+++ b/editor/src/app/setup/server-requirements/server-requirements.service.ts
@@ -0,0 +1,56 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { RequirementsResponse } from './server-requirements.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ServerRequirementsService {
+  constructor(private http: HttpClient) {}
+
+  check(): Observable<RequirementsResponse> {
+    return this.http
+      .get<RequirementsResponse>('/_api/v1/requirements')
+      .pipe(
+        catchError((error: HttpErrorResponse) =>
+          of(this.getErrorResponse(error)),
+        ),
+      );
+  }
+
+  /** Fresh on every call, the site gets installed during the session */
+  isNotInstalled(): Observable<boolean> {
+    return this.check().pipe(map((response) => response.installed === false));
+  }
+
+  /**
+   * The API answers with the requirements payload even when Laravel can't
+   * boot (see `_api_app/bootstrap/requirements_guard.php`). Any other error
+   * may be temporary (network, proxy) and also happens on installed sites, so
+   * it is reported as a dismissible warning instead of blocking the editor.
+   */
+  private getErrorResponse(error: HttpErrorResponse): RequirementsResponse {
+    if (Array.isArray(error.error?.requirements)) {
+      return error.error as RequirementsResponse;
+    }
+
+    return {
+      installed: null,
+      requirements: [
+        {
+          key: 'api',
+          group: 'server',
+          label: 'Server requirements checked',
+          ok: false,
+          fatal: false,
+          message:
+            'Berta could not check the server requirements' +
+            (error.status ? ` (error ${error.status})` : '') +
+            ". If the editor doesn't work, check the server's PHP error log.",
+        },
+      ],
+    };
+  }
+}
diff --git a/editor/src/app/setup/setup-wizard.component.ts b/editor/src/app/setup/setup-wizard.component.ts
index 6ceba1775..f38400fb8 100644
--- a/editor/src/app/setup/setup-wizard.component.ts
+++ b/editor/src/app/setup/setup-wizard.component.ts
@@ -34,12 +34,9 @@ interface WizardFields {
 }
 
 /**
- * Real Angular replacement for the legacy first-run setup page
- * (`INSTALL/includes/wizzard.php`), which rendered its 3 fields as
- * `xEditable`-class inline-edit spans inside the preview iframe. Reuses the
- * exact same `<berta-setting>` input components and `UpdateSiteSettingsAction`
- * the normal Settings page (`SiteSettingsComponent`) already uses for these
- * same fields, so only the presentation changes, not the save mechanism.
+ * First-run setup wizard, shown while the site is not installed. Reuses the
+ * same `<berta-setting>` input components and `UpdateSiteSettingsAction` the
+ * normal Settings page (`SiteSettingsComponent`) uses for these fields.
  */
 @Component({
   selector: 'berta-setup-wizard',
diff --git a/editor/src/styles/_login.scss b/editor/src/styles/_login.scss
index 968998e33..b0af3ca45 100644
--- a/editor/src/styles/_login.scss
+++ b/editor/src/styles/_login.scss
@@ -103,6 +103,11 @@ berta-login {
     }
   }
 
+  .setup-notice {
+    font-size: variables.$input-font-size;
+    margin: 0 1.3em;
+  }
+
   .error-message {
     color: variables.$error-color;
     font-size: variables.$input-font-size;
diff --git a/editor/src/styles/_server-requirements.scss b/editor/src/styles/_server-requirements.scss
new file mode 100644
index 000000000..e260eb312
--- /dev/null
+++ b/editor/src/styles/_server-requirements.scss
@@ -0,0 +1,107 @@
+@use "variables";
+
+// Blocks the whole editor, including the header, sidebar and preview
+.server-requirements-overlay {
+  background: rgba(variables.$black, 0.3);
+  inset: 0;
+  position: fixed;
+  z-index: 60;
+}
+
+.server-requirements {
+  background-color: variables.$white;
+  border-radius: variables.$border-radius;
+  box-sizing: border-box;
+  color: variables.$grey-90;
+  font-size: variables.$input-font-size;
+  left: 50%;
+  max-height: calc(100% - 2rem);
+  max-width: calc(100% - 2rem);
+  overflow-y: auto;
+  padding: 1.3rem;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 560px;
+  z-index: 61;
+
+  h2 {
+    font-size: 1.5rem;
+    margin: 0 0 0.75rem;
+  }
+
+  h3 {
+    border-bottom: 1px solid variables.$grey-10;
+    font-size: 1rem;
+    margin: 1.3rem 0 0;
+    padding-bottom: 0.5rem;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    border-bottom: 1px solid variables.$grey-10;
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.6rem 0;
+  }
+
+  .status {
+    border-radius: variables.$border-radius;
+    color: variables.$white;
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    font-weight: bold;
+    height: fit-content;
+    padding: 0.2em 0;
+    text-align: center;
+    width: 2.75rem;
+  }
+
+  .ok .status {
+    background-color: variables.$success-color;
+  }
+
+  .warning .status {
+    background-color: variables.$warn-color;
+  }
+
+  .fail .status {
+    background-color: variables.$error-color;
+  }
+
+  .message {
+    color: variables.$grey-80;
+    margin-top: 0.25rem;
+  }
+
+  .fail .message {
+    color: variables.$error-color;
+  }
+
+  .toggle-passed {
+    background: none;
+    color: variables.$grey-80;
+    cursor: pointer;
+    font-size: inherit;
+    margin-top: 0.75rem;
+    padding: 0;
+    text-decoration: underline;
+
+    &:hover {
+      color: variables.$berta-accent;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    margin-top: 1.3rem;
+  }
+}
diff --git a/editor/src/styles/_variables.scss b/editor/src/styles/_variables.scss
index fb268a56a..2761beea0 100644
--- a/editor/src/styles/_variables.scss
+++ b/editor/src/styles/_variables.scss
@@ -5,6 +5,7 @@ $white: #fff;
 $black: #000;
 $error-color: #f00;
 $warn-color: #ff800c;
+$success-color: #1e9e46;
 $facebook-color: #3b5998;
 $google-color: #4285f4;
 
diff --git a/editor/src/styles/styles.scss b/editor/src/styles/styles.scss
index e8a057901..60ca8b39e 100644
--- a/editor/src/styles/styles.scss
+++ b/editor/src/styles/styles.scss
@@ -14,6 +14,7 @@
 @use "login";
 @use "account";
 @use "popup";
+@use "server-requirements";
 @use "media";
 @use "entry-gallery-editor";
 @use "entry-gallery-image-editor";
diff --git a/engine/_classes/class.bertautils.php b/engine/_classes/class.bertautils.php
index c0d934db5..1ef4b76bf 100644
--- a/engine/_classes/class.bertautils.php
+++ b/engine/_classes/class.bertautils.php
@@ -304,7 +304,7 @@ public static function logEvent($action = '')
                     'host' => $_SERVER['HTTP_HOST'],
                     'action' => $action,
                 ];
-                $url = 'http://hosting.berta.me/stats';
+                $url = 'https://hosting.berta.me/stats';
                 $ch = curl_init();
                 $timeout = 30;
                 curl_setopt($ch, CURLOPT_URL, $url);
diff --git a/engine/inc.editor_redirect.php b/engine/inc.editor_redirect.php
new file mode 100644
index 000000000..19583178e
--- /dev/null
+++ b/engine/inc.editor_redirect.php
@@ -0,0 +1,19 @@
+<?php
+
+/**
+ * Sends the visitor to the Angular editor, which shows the requirements check and
+ * the setup wizard. Redirects only the top window: the editor's preview iframe also
+ * loads the site while showing the login form, and waits for the `xLoginPageBody`
+ * body class.
+ *
+ * Keep this file parsable by old PHP versions, it runs before the PHP version check
+ * can stop the request (see loader.helper.php).
+ *
+ * @param string $editorUrl
+ */
+function bertaRenderEditorRedirect($editorUrl)
+{
+    echo '<!DOCTYPE html><html><head><meta charset="utf-8"><title>Berta</title>'
+        . '<script>if (window.top === window.self) { window.location.replace(' . json_encode($editorUrl) . '); }</script>'
+        . '</head><body class="xLoginPageBody"><noscript><a href="' . htmlspecialchars($editorUrl) . '">Log in to set up your site</a></noscript></body></html>';
+}
diff --git a/engine/inc.engineprefs.php b/engine/inc.engineprefs.php
index a4f735927..576d88aaa 100644
--- a/engine/inc.engineprefs.php
+++ b/engine/inc.engineprefs.php
@@ -104,18 +104,6 @@
  */
 require 'inc.hosting.php';
 
-// if hosted on HIP, need to show "hosted on HIP"
-// $options['hip_ipaddr'] = array('85.31.99.218', '85.31.102.201');
-$options['hip_ipaddr'] = [];
-
-// external
-$options['remote_update_uri'] = [
-    'http://www.berta.me/news_ticker_videos_update.php',
-];
-foreach ($options['hip_ipaddr'] as $ip) {
-    $options['remote_update_uri'][] = 'http://' . $ip . '/berta-remote/news_ticker_videos_update.php';
-}
-
 $options['images']['small_width'] = 200;
 $options['images']['small_height'] = 200;
 
diff --git a/engine/inc.page.php b/engine/inc.page.php
index 44a5c51c5..94a5ec1fa 100644
--- a/engine/inc.page.php
+++ b/engine/inc.page.php
@@ -60,17 +60,6 @@
     $ENGINE_ROOT_URL = $SITE_ROOT_URL . 'engine/';
 }
 
-$hasSupportedPhpVersion = version_compare(PHP_VERSION, '8.4', '>=');
-
-if (! $hasSupportedPhpVersion) {
-    if (file_exists($SITE_ROOT_PATH . 'INSTALL/includes/first_visit_serverreqs.php')) {
-        $CHECK_INCLUDED = true;
-        include $SITE_ROOT_PATH . 'INSTALL/includes/first_visit_serverreqs.php';
-    } else {
-        exit('Berta needs PHP >= 8.4 support on server.');
-    }
-}
-
 include 'inc.error_handling.php';
 include_once 'inc.functions.php';
 
@@ -143,35 +132,12 @@ function addSlashesRecursive($var)
     define('SETTINGS_INSTALLREQUIRED', true);
 }
 if (SETTINGS_INSTALLREQUIRED && ! $berta->settings->get('berta', 'installed')) {
-    if ($berta->security->userLoggedIn) {
-        $step = ! empty($_REQUEST['_berta_install_step']) ? (int) $_REQUEST['_berta_install_step'] : 1;
-        if ($step < 1) {
-            $step = 1;
-        }
-        if ($step > 2) {
-            $step = 2;
-        }
-
-        switch ($step) {
-            case 1:
-                if (file_exists($SITE_ROOT_PATH . 'INSTALL/includes/check.php')) {
-                    $CHECK_INCLUDED = true;
-                    include $SITE_ROOT_PATH . 'INSTALL/includes/check.php';
-                    exit;
-                }
-                break;
-            case 2:
-                exit;
-        }
-    } else {
-        if (file_exists($SITE_ROOT_PATH . 'INSTALL/includes/first_visit.php')) {
-            $CHECK_INCLUDED = true;
-            include $SITE_ROOT_PATH . 'INSTALL/includes/first_visit.php';
-        } else {
-            exit('Berta not installed.');
-        }
-        exit;
+    // Logged in users get the requirements check and the setup wizard in the Angular editor,
+    // the site itself has nothing to render yet.
+    if (! $berta->security->userLoggedIn) {
+        bertaRenderEditorRedirect($ENGINE_ROOT_URL . 'login' . (! empty($options['MULTISITE']) ? '?site=' . rawurlencode($options['MULTISITE']) : ''));
     }
+    exit;
 }
 
 // check installation ------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/engine/lang/en.php b/engine/lang/en.php
index 6eafadea4..1fb5c0160 100644
--- a/engine/lang/en.php
+++ b/engine/lang/en.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => 'Built with <a href="http://www.berta.me/" target="_blank" title="Create your own website with Berta.me in minutes!">Berta.me</a>',
+    'berta_copyright_text' => 'Built with <a href="https://www.berta.me/" target="_blank" title="Create your own website with Berta.me in minutes!">Berta.me</a>',
 
     'margins_help_text' => 'Margins are tricky. Use px or em as units. You can set margins in 4 ways, by entering:<br/><strong>1 value</strong> - sets top, right, bottom and left margins to the same value. Example: <em>10px</em>.<br /><strong>2 values</strong> - sets top and bottom margins to the first value, left and right - to the second. Example: <em>0 5px</em>.<br /><strong>3 values</strong> - sets top margin to the first value, left and right - to the second, bottom - to the third value. Example: <em>10px 0 20px</em>.<br /><strong>4 values</strong> - sets all margins in the following order: top, right, bottom, left. Example: <em>10px 0 20px 2px</em>.',
     'units_help_text' => 'Valid units for any numerical value are:<br /><strong>px</strong> - pixels. Example: <em>10px</em>. By using just numbers value WILL NOT change.<br /><strong>em</strong> - 1em = one length of letter M in the font used. Example: <em>1em</em><br /><strong>%</strong> - percent of the font size or percent of the dimensions of the container element (e.g. the page etc.)',
@@ -12,20 +12,13 @@
 
     'password_help_text' => 'Password must be at least 6 characters long<br /> and containing alphanumeric (A-Z, a-z, 0-9) characters.',
 
-    'welcome_text__not_installed' => '<h2>Thank you for choosing Berta.me!</h2>
-           <p>Your site is not yet set up.<br />Please <a href="%s">log in</a> to create your website.</p>',
-
-    'welcome_text__not_supported' => '<h2>Thank you for choosing Berta.me!</h2>
-                                        <p>This server does not meet Berta\'s requirements.<br />
-                                        Please check that PHP version 5 or above is installed on the server.</p>',
-    'setup_info_text' => 'Click on yellow fields to edit. Press ENTER or click outside a yellow field to save your entry. This way you can edit content in Berta.me.',
 
     'googleFont_description' => 'Type in any google font name. To check available fonts go to <a href="https://fonts.google.com" target="_blank">Google Fonts</a>. Remember – google font overrides system font. Leave empty if you want to use system font. Example: <em>Marvel</em>, <em>Marvel:700italic</em> or <em>Josefin Slab:700italic</em>',
     'description_tagsMenu_x' => 'Submenu X position in pixels (i.e. 10px)',
     'description_tagsMenu_y' => 'Submenu Y position in pixels (i.e. 10px)',
     'description_menu_position' => 'Menu position',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Banner link \'http://\' should be in front of the address',
+    'description_banner_link' => 'Banner link \'https://\' should be in front of the address',
     'description_language' => 'Choose language of interface.',
     'Heading position' => 'Heading position fixed or absolute. Fixed always stays in one place, absolute moves together with content.',
     'description_heading_position' => 'Heading position fixed or absolute. Fixed always stays in one place, absolute moves together with content.',
diff --git a/engine/lang/es.php b/engine/lang/es.php
index 1e6ea204e..9d86dce61 100644
--- a/engine/lang/es.php
+++ b/engine/lang/es.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => 'Construido con <a href="http://www.berta.me/" target="_blank" title="¡Crea tu propio sitio web con Berta.me en minutos!">Berta.me</a>',
+    'berta_copyright_text' => 'Construido con <a href="https://www.berta.me/" target="_blank" title="¡Crea tu propio sitio web con Berta.me en minutos!">Berta.me</a>',
 
     'margins_help_text' => 'Los márgenes son difíciles. Usa px o em como unidades. Puede establecer los márgenes de 4 maneras, by entering:<br/><strong>1 value</strong> - Establece la parte superior, los márgenes derecho, inferior e izquierdo con el mismo valor. Ejemplo: <em>10px</em>.<br /><strong>2 valores</strong> - establece los márgenes superior e inferior al primer valor, izquierda y derecha - a la segunda. Ejemplo: <em>0 5px</em>.<br /><strong>3 values</strong> - establecer el margen superior al primer valor, izquierda y derecha - a la segunda, parte inferior - al tercer valor. Ejemplo: <em>10px 0 20px</em>.<br /><strong>4 valores</strong> - establece los márgenes en el siguiente orden: arriba, derecha, abajo, izquierda. Ejemplo: <em>10px 0 20px 2px</em>.',
     'units_help_text' => 'Las unidades válidas para cualquier valor numérico son:<br /><strong>px</strong> - pixels. Ejemplo: <em>10px</em>. Mediante el uso de sólo los valores de los números, NO VA A CAMBIAR.<br /><strong>em</strong> - 1em = un tramo de la letra M en la fuente utilizada. Ejemlo: <em>1em</em><br /><strong>%</strong> - un porcentaje del tamaño de la fuente o un porcentaje de las dimensiones del elemento de contenedor (por ejemplo: la página, etc)',
@@ -11,22 +11,13 @@
 
     'password_help_text' => 'La contraseña debe tener como mínimo 6 caracteres<br /> y que contiene alfanuméricos (A-Z, a-z, 0-9) caracteres.',
 
-    'welcome_text__not_installed' => '<h2>¡Gracias por elegir Berta.me!</h2>
-           <p>Berta no esta instalado.<br />Por favor, <a href="%s">iniciar sesion</a> y siga el procedimiento de instalación.</p>',
-
-    'welcome_text__not_supported' => '<h2>¡Gracias por elegir Berta.me!</h2>
-                                        <p>Este servidor no cumple los requisitos Berta\'s.<br />
-                                        Compruebe que PHP versión 5 o superior este instalado en el servidor.</p>',
-    'setup_info_text' => 'Haga clic en los campos con fondo amarillo para modificarlas.
-                            A continuación, pulse Intro o haga clic en cualquier lugar fuera del campo para guardar.
-                            De esta manera, será a través de su sitio - todo lo que tiene un fondo de color amarillo es editable. También será capaz de cambiar esta configuración más tarde.',
 
     'googleFont_description' => 'Escriba un nombre de fuente google fuente. Para comprobar las fuentes disponibles vaya a <a href="https://fonts.google.com" target="_blank">Google Fonts</a>. Recuerde - fuente del sistema anula la google fuente. Dejar en blanco si desea utilizar la fuente del sistema. Ejemplo: <em>Marvel</em>, <em>Marvel:700italic</em> or <em>Josefin Slab:700italic</em>',
     'description_tagsMenu_x' => 'Submenu X posición en píxeles (es decir, 10px)',
     'description_tagsMenu_y' => 'Submenu Y posición en píxeles (es decir, 10px)',
     'description_menu_position' => 'Posición de menú',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Enlace banner \'http://\' debe estar al frente de la dirección',
+    'description_banner_link' => 'Enlace banner \'https://\' debe estar al frente de la dirección',
     'description_language' => 'Elija el idioma de la interfaz de Berta. Actualiza sitio, para aplicar.',
     'Heading position' => 'Fija o absoluta la posición de la cabecera. Fijo siempre se queda en un solo lugar, absoluta se mueve junto con el contenido.',
     'description_heading_position' => 'Fija o absoluta la posición de la cabecera. Fijo siempre se queda en un solo lugar, absoluta se mueve junto con el contenido.',
diff --git a/engine/lang/fr.php b/engine/lang/fr.php
index 9b1803804..5d596b9e7 100644
--- a/engine/lang/fr.php
+++ b/engine/lang/fr.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => 'Développé avec <a href="http://www.berta.me/" target="_blank" title="Créez votre portfolio avec Berta.me en quelques minutes !">Berta.me</a>',
+    'berta_copyright_text' => 'Développé avec <a href="https://www.berta.me/" target="_blank" title="Créez votre portfolio avec Berta.me en quelques minutes !">Berta.me</a>',
 
     // Translations from the top "admin" menu
 
@@ -25,29 +25,6 @@
     'Logout ok. Please wait...' => 'Déconnexion. Merci de patienter…',
     'Log in' => 'Se connecter',
 
-    // First visit
-
-    'welcome' => 'Bienvenue !',
-    'welcome_text__not_installed' => '<h2>Merci d\'avoir choisi Berta.me!</h2>
-        <p>Berta n\'est pas encore installé.<br />Merci de vous <a href="%s">connecter</a> et de suivre la procédure d\'installation.</p>',
-
-    'welcome_text__not_supported' => '<h2>Merci d\'avoir choisi Berta.me!</h2>
-        <p>Ce serveur n\'est pas compatible avec Berta.<br />
-        Merci de vérifier que la version de PHP installée sur le serveur est égale ou supérieure à 5.</p>',
-
-    'Setup your site' => 'Paramétrez votre site',
-    'setup_info_text' => 'Cliquez sur les champs sur fond jaune pour les éditer.
-        Puis, appuyez sur Entrée ou cliquez ailleurs pour enregistrer.
-        Chaque élément de votre site ayant un fond jaune est donc modifiable. Vous serez en mesure de changer ces paramètres plus tard.',
-    'What is the title of your site?' => 'Quel est le titre de votre site ,',
-    'Site title will be visible in all sections of your site.' => 'Le titre du site est visible dans toutes les sections du site',
-    'What is your name?' => 'Quel est votre nom ?',
-    'It will appear in the copyright notice in the footer. You may leave it blank.' => 'Votre nom sera affiché dans la note de copyright en bas de site. Vous pouvez laisser le champ vide.',
-    'What is this website about?' => 'En une phrase, décrivez votre site.',
-    'It will appear under your site name in search engine results.' => 'Cela aparaitra en dessous du titre de votre site dans les moteurs de recherche.',
-    'Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.' => 'À noter : Les champs déjà saisis n’aparaissent en jaune qu’au survol. Cliquez sur le texte survolé pour l’éditer.',
-    'Done!' => 'Fait !',
-
     // Translatins from sections editor (sections.php)
 
     /* title */
@@ -164,8 +141,6 @@
     /* setting name */
     'Is enabled by default' => 'Activée par défaut',
     /* setting name */
-    'Background color' => 'Couleur de fond',
-    /* setting name */
     'Image numbers' => 'Numéros d’image',
     /* setting name */
     'Caption alignment' => 'Alignement de la légende',
@@ -465,7 +440,7 @@
 
     'description_menu_position' => 'Position du menu',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'N’oubliez pas « http:// » devant les liens de bannière.',
+    'description_banner_link' => 'N’oubliez pas « https:// » devant les liens de bannière.',
     'description_language' => 'Choisissez votre langue pour l’interface de Berta. Rafraîchissez la page pour pour appliquer les modifications.',
     'Heading position' => 'Position de l’entête',
     'description_heading_position' => 'Position de la description d’entête : fixe (Fixed) ou absolue (Absolute). La position fixe restera toujours en place sur la page, la positions absolue se déplace avec le contenu au défilement.',
diff --git a/engine/lang/lv.php b/engine/lang/lv.php
index 38202df4c..4b132e2d7 100644
--- a/engine/lang/lv.php
+++ b/engine/lang/lv.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => '<a href="http://www.berta.me/" target="_blank" title="Create your own portfolio with Berta.me in minutes!">Berta.me</a>',
+    'berta_copyright_text' => '<a href="https://www.berta.me/" target="_blank" title="Create your own portfolio with Berta.me in minutes!">Berta.me</a>',
 
     // Translations from the top "admin" menu
 
@@ -25,27 +25,6 @@
     'Logout ok. Please wait...' => 'Lūdzu, uzgaidi...',
     'Log in' => 'Ielogoties',
 
-    // First visit
-
-    'welcome' => 'Esi sveicināts!',
-    'welcome_text__not_installed' => '<h2>Paldies,<br/>ka izvēlējies Berta.me!</h2>
-                                         <p>Berta nav uzstādīta.<br />Lūdzu <a href="%s">ielogojies</a> un seko uzstādīšanas procedūrai.</p>',
-
-    'welcome_text__not_supported' => '<h2>Paldies,<br/>ka izvēlējies Berta.me!</h2>
-                                        <p>This server does not meet Berta\'s requirements.<br />
-                                        Please check that PHP version 5 or above is installed on the server.</p>',
-
-    'Setup your site' => 'Setup your site',
-    'setup_info_text' => 'Dzeltenās krāsas lauki ir labojami. Lai saglabātu ierakstu, nospied ENTER vai klikšķini ārpus datu lauka. Šādi iespējams ievadīt vai labot saturu Berta.me rīkā.',
-    'What is the title of your site?' => 'Kāds ir tavas lapas virsraksts?',
-    'Site title will be visible in all sections of your site.' => 'Lapas virsraksts būs redzams visās sadaļās',
-    'What is your name?' => 'Ievadi savu vārdu',
-    'It will appear in the copyright notice in the footer. You may leave it blank.' => 'Vārds tiks pievienots pie (c) simbola lapas apakšā. Lauku var atstāt arī tukšu.',
-    'What is this website about?' => 'Lapas apraksts.',
-    'It will appear under your site name in search engine results.' => 'Meklētāj-programmās tas parādīsies zem tavas lapas nosaukuma kā apraksts.',
-    'Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.' => 'Piezīme: aizpildītie lauki kļūst dzelteni tiem uzbraucot ar peles kursoru. Klikšķini uz teksta zemāk, lai labotu.',
-    'Done!' => 'Darīts!',
-
     // Translatins from sections editor (sections.php)
 
     /* title */
@@ -176,8 +155,6 @@
     'Is enabled by default' => 'Pēc noklusējuma ieslēgts',
     /* help text */
     'Enables gallery fullscreen mode for new entries.' => 'Ieslēdz galerijas pilnekrāna režīmu jauniem ierakstiem.',
-    /* setting name */
-    'Background color' => 'fona krāsa',
     /* help text */
     'Color of the fullscreen gallery background.' => 'Galerijas pilnekrāna fona krāsa.',
     /* setting name */
@@ -485,7 +462,7 @@
     'description_tagsMenu_y' => 'Apakšizvēlnes Y pozīcija pikseļos (piem.: 50px)',
     'description_menu_position' => 'Izvēlnes pozicionēšana',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Bannera saite. Adreses priekšā neaizmirsti pievienot http:// (piem.: http://www.berta.me)',
+    'description_banner_link' => 'Bannera saite. Adreses priekšā neaizmirsti pievienot https:// (piem.: https://www.berta.me)',
     'description_language' => 'Izvēlies interfeisa valodu.',
     'Heading position' => 'Galvenes pozīcija',
     'description_heading_position' => 'Galvenes novietojums, fiksēts vai nefiksēts',
@@ -542,7 +519,6 @@
     'Discount in precents when user enters valid promo code' => 'Atlaides procentuāls apjoms uz precēm, ja pircējs ievadījis pareizu kodu.',
     'Weight units' => 'Svara mērvienība',
     'Weight units (g, oz) used for postage cost calculation.' => 'Svara mērvienība (g, oz), kas tie lietota pie pasta izdevumu aprēķina.',
-    'Design' => 'Dizains',
     'Shop entry width' => 'Veikala ieraksta platums',
     'Title' => 'Virsraksts',
     'What is SEO?' => 'Kas ir SEO?',
diff --git a/engine/lang/nl.php b/engine/lang/nl.php
index 5bee55a8e..2105dbf09 100644
--- a/engine/lang/nl.php
+++ b/engine/lang/nl.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => 'Gemaakt met <a href="http://www.berta.me/" target="_blank" title="Maak snel jouw eigen site met">Berta.me</a>',
+    'berta_copyright_text' => 'Gemaakt met <a href="https://www.berta.me/" target="_blank" title="Maak snel jouw eigen site met">Berta.me</a>',
 
     // Translations from the top "admin" menu
 
@@ -25,29 +25,6 @@
     'Logout ok. Please wait...' => 'Uitloggen. Wacht even A.U.B.…',
     'Log in' => 'Inloggen',
 
-    // First visit
-
-    'welcome' => 'Welkom!',
-    'welcome_text__not_installed' => '<h2>Goed dat je Berta.me gebruikt!</h2>
-        <p>Berta is nog niet geconfigureerd.<br /><a href="%s">Log in</a> en volg de set up procedure.</p>',
-
-    'welcome_text__not_supported' => '<h2>Goed dat je Berta.me gebruikt!</h2>
-        <p>Deze server voldoet helaas niet aan Berta\'s minimum eisen.<br />
-                                        PHP versie 5 of hoger moet op de server geinstalleerd zijn.</p>',
-
-    'Setup your site' => 'Richt jouw site in',
-    'setup_info_text' => 'Klik op de geelgekleurde velden om deze te editen.
-                            Om te bewaren toets Enter of klik buiten het geelgekleurde veld.
-                            Dit werkt zo door de hele site; alles met een gele achtergrondkleur is editable. Je kan deze instellingen later ook veranderen.',
-    'What is the title of your site?' => 'Wat is de titel (naam) van jouw site?',
-    'Site title will be visible in all sections of your site.' => 'De titel (naam) van jouw site is zichtbaar in alle Sections van jouw site.',
-    'What is your name?' => 'Wat is jouw naam?',
-    'It will appear in the copyright notice in the footer. You may leave it blank.' => 'Jouw naam wordt in de copyright-notice onderin (in de footer) het beeld gezet. Je mag dit ook leeg laten.',
-    'What is this website about?' => 'Hoe zou je -in één zin- jouw site beschrijven?',
-    'It will appear under your site name in search engine results.' => 'Dit zal verschijnen als samenvatting onder de sitenaam in de (Google) zoekresultaten.',
-    'Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.' => 'Tip: de velden die al een waarde hebben verschijnen alleen als gele velden als je eroverheen gaat met je cursor . Klik op[ onderstaande tekst om deze aan te passen.',
-    'Done!' => 'Klaar!',
-
     // Translatins from sections editor (sections.php)
 
     /* title */
@@ -260,8 +237,6 @@
 
     /* setting tab */
     'Background' => 'Background',
-    /* setting name */
-    'Background color' => 'Background color',
     /* help text */
     'IMPORTANT! These settings will be overwritten, if you are using background gallery feature. You access it by clicking "edit background gallery" button in each section.' => 'Belangrijk! Deze instellingen worden overschreven als je de background gallery gebruikt. Je kan deze openen met de "edit background" button rechtbovenin je scherm in elke Section.',
     /* setting name */
@@ -297,7 +272,7 @@
     /* help name */
     'Content width if layout is centered.' => 'Breedte van de content als deze gecentreerd is.',
     /* setting name */
-    'Centered content width' => 'Centering guides kleurschema',
+    'Centering guides color tone' => 'Centering guides kleurschema',
     /* help name */
     'Color tone for centering guides (dark for bright background colors, bright for dark background colors).' => 'Kleurschema voor de centering guides (dark voor heldere backgroundcolors, bright voor donkere backgroundcolors).',
 
@@ -494,7 +469,7 @@
     'description_tagsMenu_y' => 'Submenu Y positie in pixels (bijv. 10px)',
     'description_menu_position' => 'Menu positie',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Banner link \'http://\' moet zich voor het adres bevinden',
+    'description_banner_link' => 'Banner link \'https://\' moet zich voor het adres bevinden',
     'description_language' => 'Kies hier de taal van de Berta interface. Refresh site om toe te passen.',
     'Heading position' => 'Heading positie fixed of absolute. Fixed blijft altijd op dezelfde plaats, absolute beweegt mee met de content.',
     'description_heading_position' => 'Heading positie fixed of absolute. Fixed blijft altijd op dezelfde plaats, absolute beweegt mee met de content.',
diff --git a/engine/lang/pl.php b/engine/lang/pl.php
index e07d239ff..5f8e2dc10 100644
--- a/engine/lang/pl.php
+++ b/engine/lang/pl.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => '<a href="http://www.berta.me/" target="_blank" title="Stwórz swój własny portfel z Berta.me w kilka minut!">Berta.me</a>',
+    'berta_copyright_text' => '<a href="https://www.berta.me/" target="_blank" title="Stwórz swój własny portfel z Berta.me w kilka minut!">Berta.me</a>',
 
     // Translations from the top "admin" menu
 
@@ -25,29 +25,6 @@
     'Logout ok. Please wait...' => 'Proszę, czekać...',
     'Log in' => 'Zalogować się',
 
-    // First visit
-
-    'welcome' => 'Witamy!',
-    'welcome_text__not_installed' => '<h2>Dziękujemy,<br/>że wybrałeś Berta.me!</h2>
-                                                          <p>Berta nie jest zainstalowana.<br />Proszę <a href="%s">zaloguj się</a> i przejdź proces instalacji.</p>',
-
-    'welcome_text__not_supported' => '<h2>Dziękujemy,<br/>że wybrałeś Berta.me!</h2>
-                                                                <p>This server does not meet Berta\'s requirements.<br />
-                                                                   Please check that PHP version 5 or above is installed on the server.</p>',
-
-    'Setup your site' => 'Setup your site',
-    'setup_info_text' => 'Click on the fields with yellow background to edit them.
-                                      Then press Enter or click anywhere outside the field to save.
-                                       This way it will be throughout your site — all that has a yellow background is editable. You will also be able to change these settings later.',
-    'What is the title of your site?' => 'Jaki jest tytuł twojej strony?',
-    'Site title will be visible in all sections of your site.' => 'Tytuł strony będzie widoczny w każdym dziale',
-    'What is your name?' => 'Wprowadź swoje imię',
-    'It will appear in the copyright notice in the footer. You may leave it blank.' => 'Imię będzie dodane do symbolu (c) na dole strony. Pole można również zostawić puste.',
-    'What is this website about?' => 'Jak byś opisał swoją stronę w jednym zdaniu?',
-    'It will appear under your site name in search engine results.' => 'To pojawi się w wyszukiwarce pod tytułem twojej strony jako opis.',
-    'Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.' => 'Uwaga: wypełnione pole stają się żółte przy najechaniu na nich kursorem myszki. Klikaj na tekście poniżej, aby poprawiać.',
-    'Done!' => 'Wykonane!',
-
     // Translatins from sections editor (sections.php)
 
     /* title */
@@ -245,8 +222,6 @@
 
     /* setting tab */
     'Background' => 'Tło',
-    /* setting name */
-    'Background color' => 'Kolor tła',
     /* help text */
     'IMPORTANT! These settings will be overwritten, if you are using background gallery feature. You access it by clicking "edit background gallery" button in each section.' => 'UWAGA! Te ustawienia nie są brane pod uwagę, jeżeli jest używana galeria tła.',
     /* setting name */
@@ -477,7 +452,7 @@
     'description_tagsMenu_y' => 'Pozycja Y w menu podrzędnym w pikselach (np.: 50px)',
     'description_menu_position' => 'Pozycjonowanie menu',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Link banera. Przed adresem nie zapomnij dodać http:// (piem.: http://www.berta.me)',
+    'description_banner_link' => 'Link banera. Przed adresem nie zapomnij dodać https:// (piem.: https://www.berta.me)',
     'description_language' => 'Choose language of interface.',
     'Heading position' => 'Pozycja nagłówka',
     'description_heading_position' => 'Pozycja nagłówka, niezmienna lub zmienna',
@@ -534,7 +509,6 @@
     'Discount in precents when user enters valid promo code' => 'Wartość rabatu w procentach na towary, jeżeli kupujący wprowadził poprawny kod.',
     'Weight units' => 'Jednostka wagi',
     'Weight units (g, oz) used for postage cost calculation.' => 'Jednostka wagi (g, oz), która jest używana, obliczając koszty wysyłki pocztowej.',
-    'Design' => 'Projekt',
     'Shop entry width' => 'Szerokość wpisu sklepu',
     'section_type' => 'Type',
     'section_type_tip' => 'Defines the layout and functionality of the section.',
diff --git a/engine/lang/ru.php b/engine/lang/ru.php
index dc775e282..1aaa76a72 100644
--- a/engine/lang/ru.php
+++ b/engine/lang/ru.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'berta_copyright_text' => '<a href="http://www.berta.me/" target="_blank" title="Создайте собственное портфолио за считанные минуты с Berta.me!">Berta.me</a>',
+    'berta_copyright_text' => '<a href="https://www.berta.me/" target="_blank" title="Создайте собственное портфолио за считанные минуты с Berta.me!">Berta.me</a>',
 
     // Translations from the top "admin" menu
 
@@ -25,29 +25,6 @@
     'Logout ok. Please wait...' => 'Пожалуйста, подождите...',
     'Log in' => 'Войти',
 
-    // First visit
-
-    'welcome' => 'Добро пожаловать!',
-    'welcome_text__not_installed' => '<h2>Благодарим,<br/>что выбрали Berta.me!</h2>
-                                                                          <p>Berta не установлена.<br />Пожалуйста <a href="%s">войдите</a> и следуйте процедуре установки.</p>',
-
-    'welcome_text__not_supported' => '<h2>Благодарим,<br/>что выбрали Berta.me!</h2>
-                                                                                <p>Этот сервер не соответствует требованиями Berta.<br />
-                                                                                Пожалуйста, проверьте, чтобы на сервере была установлена версия PHP 5 или выше.</p>',
-
-    'Setup your site' => 'Установка сайта',
-    'setup_info_text' => 'Нажмите на поля, выделенные желтым, чтобы редактировать.
-                                                        Затем нажмите Enter или кликните в любой точке вне поля, чтобы сохранить изменения.
-                                                        Таким образом это будет отображаться на вашей странице — все, выделенное желтым, редактируется. Вы сможете изменить эти настройки позже.',
-    'What is the title of your site?' => 'Как будет называться сайт?',
-    'Site title will be visible in all sections of your site.' => 'Название сайта будет отображаться во всех разделах',
-    'What is your name?' => 'Как ваше имя?',
-    'It will appear in the copyright notice in the footer. You may leave it blank.' => 'Ваше имя будет отображаться с символом(c) внизу сайта. Можете оставить это поле пустым.',
-    'What is this website about?' => 'Опишите ваш сайт одним предложением',
-    'It will appear under your site name in search engine results.' => 'Описание будет отображаться в поисковых системах под названием сайта.',
-    'Note: the fields that already have value appear yellow only when you roll over them with your mouse. Click on the text below to edit.' => 'Примечание: заполненные поля становятся желтыми, только при наведении курсора мыши. Нажмите на текст ниже, чтобы редактировать.',
-    'Done!' => 'Готово!',
-
     // Translatins from sections editor (sections.php)
 
     /* title */
@@ -245,8 +222,6 @@
 
     /* setting tab */
     'Background' => 'Фон',
-    /* setting name */
-    'Background color' => 'Цвет фона',
     /* help text */
     'IMPORTANT! These settings will be overwritten, if you are using background gallery feature. You access it by clicking "edit background gallery" button in each section.' => 'ВАЖНО! Данные настройки не активны, если использована функция фоновой галереи. Перейти к редактированию можно по кнопке  "редактировать фоновую галерею".',
     /* setting name */
@@ -466,7 +441,7 @@
     'description_tagsMenu_y' => 'Положение подменю на оси Y в пикселях (например: 50px)',
     'description_menu_position' => 'Позиционирование меню',
     'description_banner' => 'Banners are images which are visible in all sections. Use it for buttons or social icons in your site. Displayed image will be half of the original size, full size will be used for hi-res displays.',
-    'description_banner_link' => 'Ссылка баннера. Добавьте http:// перед адресом ссылки (например: http://www.berta.me)',
+    'description_banner_link' => 'Ссылка баннера. Добавьте https:// перед адресом ссылки (например: https://www.berta.me)',
     'description_language' => 'Выберите язык интерфейса berta. Обновите страницу, чтобы активировать изменения.',
     'Heading position' => 'Положение заголовка',
     'description_heading_position' => 'Положение шапки, фиксированное или нефиксированное ',
diff --git a/engine/loader.helper.php b/engine/loader.helper.php
index b3456de68..466e29662 100644
--- a/engine/loader.helper.php
+++ b/engine/loader.helper.php
@@ -6,6 +6,18 @@
 
 use Illuminate\Http\Request;
 
+require_once __DIR__ . '/inc.editor_redirect.php';
+
+// Laravel can't boot on a too old PHP or without vendor/, send visitors to the
+// editor, which shows the failed requirements
+$bertaFailedRequirements = require __DIR__ . '/../_api_app/bootstrap/requirements_check.php';
+if ($bertaFailedRequirements) {
+    http_response_code(503);
+    bertaRenderEditorRedirect((! empty($ENGINE_ROOT_URL) ? $ENGINE_ROOT_URL : (! empty($SITE_ROOT_URL) ? $SITE_ROOT_URL : '/') . 'engine/') . 'login');
+    exit;
+}
+unset($bertaFailedRequirements);
+
 require_once __DIR__ . '/../_api_app/bootstrap/load_app.php';
 (require_once __DIR__ . '/../_api_app/bootstrap/app.php')->handle(Request::capture());