@setzkasten-cms/astro-admin 0.8.0 → 1.3.0

package/src/init/__tests__/patcher-mixed-content-wrapper.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Patcher: mixed-content RTE wrapper conversion.
+ *
+ * Bug: Adopting a page like Impressum/Datenschutz where a `<p>` contains
+ * text + <br /> tags (e.g. address blocks) leaves the `<p>` as the wrapper
+ * with `set:html={skData?.description ?? `…`}`. When the field is later
+ * edited via the inline RTE, TipTap's getHTML() returns `<p>…</p>`-wrapped
+ * HTML — which then gets injected into the existing `<p data-sk-field>`,
+ * producing `<p><p>…</p></p>` at render time. HTML5 forbids `<p>` inside
+ * `<p>`, so the browser auto-closes the outer `<p>` immediately:
+ *
+ *     <p data-sk-field="…"></p>      ← empty! visible as a tiny outline box
+ *     <p>LILAPIXEL<br>…</p>          ← the actual content, unbound
+ *
+ * Fix: when patchMixedContentField wraps a phrasing-only element (`<p>`,
+ * `<span>`), the wrapper is converted to `<div>`. `<div>` is flow content
+ * and accepts arbitrary HTML children (including `<p>`).
+ */
+
+import { describe, it, expect } from 'vitest'
+import { patchTemplateForFields } from '../../init/template-patcher-v2'
+import type { PatchField } from '../../init/template-patcher-v2'
+
+const IMPRESSUM_SECTION = `---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout>
+  <div class="mx-auto w-full max-w-3xl">
+    <h1 class="mb-10 text-3xl font-bold">Impressum</h1>
+    <section class="mb-8">
+      <h2 class="mb-3 text-xl font-semibold">Angaben gemäß § 5 DDG</h2>
+      <p class="text-sk-slate leading-relaxed">
+        LILAPIXEL<br />
+        Birgit Soring<br />
+        Le-Corbusier-Str. 31b<br />
+        26127 Oldenburg
+      </p>
+    </section>
+  </div>
+</BaseLayout>
+`
+
+describe('patchMixedContentField — phrasing wrapper conversion', () => {
+  const fields: PatchField[] = [
+    { key: 'heading', type: 'text', defaultValue: 'Impressum' },
+    { key: 'heading2', type: 'text', defaultValue: 'Angaben gemäß § 5 DDG' },
+    {
+      key: 'description',
+      type: 'text',
+      defaultValue: 'LILAPIXEL Birgit Soring Le-Corbusier-Str. 31b 26127 Oldenburg',
+    },
+  ]
+
+  it('converts a <p> mixed-content wrapper to <div> so RTE-injected <p> children remain valid', async () => {
+    const patched = await patchTemplateForFields(IMPRESSUM_SECTION, '_page_impressum', fields, [], { mode: 'page' })
+
+    // The patched description binding must NOT live on a <p> element —
+    // otherwise an RTE-edited value of "<p>…</p>" produces nested <p>'s.
+    expect(patched).not.toMatch(/<p[^>]*data-sk-field="_page_impressum\.description"/)
+
+    // Instead, the wrapper should be a <div> that retains the original classes.
+    expect(patched).toMatch(/<div[^>]*class="text-sk-slate leading-relaxed"[^>]*data-sk-field="_page_impressum\.description"/)
+    expect(patched).toMatch(/data-sk-field="_page_impressum\.description"[^>]*set:html=\{skData\?\.description/)
+
+    // The closing tag must match (no </p> for this binding's wrapper).
+    // A simple sanity check: the <div ... data-sk-field="…description"> must be followed by </div>.
+    const openMatch = patched.match(/<div[^>]*data-sk-field="_page_impressum\.description"[^>]*>/)
+    expect(openMatch).toBeTruthy()
+    const openIdx = patched.indexOf(openMatch![0])
+    const afterOpen = patched.slice(openIdx + openMatch![0].length)
+    // The next closing tag for this wrapper must be </div>, not </p>.
+    expect(afterOpen).toMatch(/^[\s\S]*?<\/div>/)
+  })
+
+  it('does NOT convert headings — h2 stays h2 even if it had inline content', async () => {
+    // Headings rarely host RTE content but must remain semantically intact.
+    // patchTextField (not patchMixedContentField) handles plain text headings,
+    // so the <h2> should keep its tag name.
+    const patched = await patchTemplateForFields(IMPRESSUM_SECTION, '_page_impressum', fields, [], { mode: 'page' })
+    expect(patched).toMatch(/<h2[^>]*data-sk-field="_page_impressum\.heading2"/)
+  })
+
+  it('keeps the original <p> classes on the converted <div> wrapper', async () => {
+    const patched = await patchTemplateForFields(IMPRESSUM_SECTION, '_page_impressum', fields, [], { mode: 'page' })
+    // The Tailwind classes from the original <p class="text-sk-slate leading-relaxed">
+    // must be preserved on the new <div>.
+    expect(patched).toContain('text-sk-slate leading-relaxed')
+  })
+})

package/src/init/template-patcher-v2.ts

@@ -351,7 +351,7 @@ export async function patchTemplateForFields(
  * Matches: <tag ...data-sk-field...>{skData?.field}</tag>
  * Result:  <tag ...data-sk-field... set:html={skData?.field}></tag>
  */
-function convertToSetHtml(source: string): string {
+export function convertToSetHtml(source: string): string {
   const marker = 'data-sk-field'
   let result = source
   let searchFrom = 0
@@ -381,9 +381,14 @@ function convertToSetHtml(source: string): string {
     const innerMatch = afterTag.match(/^(\s*)\{([^{}]+)\}(\s*)<\/(\w+)>/)
     if (!innerMatch) continue
 
-    // Only convert CMS bindings (skData?.field or item.field)
-    const expr = innerMatch[2]!
-    if (!/^(?:skData\?\.\w+|item\.\w+)$/.test(expr)) continue
+    // Only convert CMS bindings: a simple property access on a section-data
+    // variable. Templates emitted by this patcher use `skData?.field`, but
+    // hand-rolled section components in the wild commonly use `data?.field`
+    // (the convention in apps/website). Accept any `<name>(?.|.)<field>`
+    // pattern — the surrounding `data-sk-field` already proves this is a CMS
+    // binding, so we don't need to whitelist variable names.
+    const expr = innerMatch[2]!.trim()
+    if (!/^\w+\??\.\w+$/.test(expr)) continue
 
     const fullInnerLength = innerMatch[0]!.length
     const closeTag = `</${innerMatch[4]}>`
@@ -556,10 +561,28 @@ function getElementTextContent(node: AstNode): string {
   return (node.children ?? []).map(getElementTextContent).join('')
 }
 
+/**
+ * HTML elements whose content model only allows phrasing content (no block-level
+ * children, especially no nested <p>). When such an element is selected as the
+ * RTE wrapper, a TipTap-edited value of `<p>…</p>` would be injected via set:html,
+ * producing invalid markup like `<p><p>…</p></p>`. The browser auto-closes the
+ * outer wrapper immediately, leaving the data-sk-field element empty.
+ *
+ * Patcher converts these wrappers to <div> (flow content, accepts everything).
+ * Headings (<h1>-<h6>) are intentionally not in this list — they are handled
+ * by patchTextField, not patchMixedContentField, and converting them would
+ * silently drop semantic meaning.
+ */
+const PHRASING_ONLY_RTE_WRAPPERS = new Set(['p', 'span'])
+
 /**
  * Patch a mixed-content element as a rich text field.
  * Adds data-sk-field + set:html to the element, keeping original HTML as fallback.
  * The live editor uses the RTE (contentEditable) for this field.
+ *
+ * If the wrapper is a phrasing-content-only tag (p, span), it is converted to
+ * <div> so that future RTE-injected block content (e.g. TipTap's <p>…</p>)
+ * remains valid HTML.
  */
 function patchMixedContentField(
   source: string,
@@ -614,6 +637,21 @@ function patchMixedContentField(
     deleteCount: closeIdx - innerStart,
     insert: '',
   })
+
+  // Phrasing-only wrappers cannot host RTE-injected block content (e.g. <p>).
+  // Rewrite the opening + closing tag to <div> while keeping all attributes.
+  if (PHRASING_ONLY_RTE_WRAPPERS.has(tagName)) {
+    edits.push({
+      offset: tagIdx + 1, // position of the tag-name char after '<'
+      deleteCount: tagName.length,
+      insert: 'div',
+    })
+    edits.push({
+      offset: closeIdx + 2, // position of the tag-name char after '</'
+      deleteCount: tagName.length,
+      insert: 'div',
+    })
+  }
 }
 
 /**

package/LICENSE

@@ -1,37 +0,0 @@
-Setzkasten Community License
-
-Copyright (c) 2026 Lilapixel
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to use,
-copy, modify, merge, publish, and distribute the Software, subject to the
-following conditions:
-
-1. The above copyright notice and this permission notice shall be included in
-   all copies or substantial portions of the Software.
-
-2. The Software may not be used for commercial purposes without a separate
-   commercial license from the copyright holder. "Commercial purposes" means
-   any use of the Software that is primarily intended for or directed toward
-   commercial advantage or monetary compensation. This includes, but is not
-   limited to:
-   - Using the Software to manage content for a commercial website or product
-   - Offering the Software as part of a paid service
-   - Using the Software within a for-profit organization
-
-3. Non-commercial use is permitted without restriction. This includes:
-   - Personal projects
-   - Open source projects
-   - Educational and academic use
-   - Non-profit organizations
-
-4. A commercial license ("Enterprise License") may be obtained by contacting
-   Lilapixel at hello@lilapixel.de.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.