@setzkasten-cms/astro-admin 0.6.0 → 1.1.0

package/src/init/__tests__/page-level.test.ts

@@ -1031,3 +1031,50 @@ describe('Nested map live-edit: inner items have data-sk-field', () => {
     expect(patched).toMatch(/sections.*map.*section.*_i/)
   })
 })
+
+// ---------------------------------------------------------------------------
+// Template literal variables in frontmatter must NOT become content fields
+// Reproduces: docs/catalog page with code examples in template literals
+// ---------------------------------------------------------------------------
+
+describe('Page-level: template literal variables not extracted as fields', () => {
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithTemplateLiterals.astro'), 'utf-8')
+    section = await analyzeAstroSection(source, '_page_docs_example', 'docsExamplePage', 'src/pages/docs/example.astro', { mode: 'page' })
+  })
+
+  it('should detect the real content fields (heading, description)', () => {
+    const keys = section.fields.map(f => f.key)
+    expect(keys).toContain('heading')
+    expect(keys).toContain('description')
+  })
+
+  it('should NOT extract variables from inside template literal strings (templates, hero, json, template)', () => {
+    const keys = section.fields.map(f => f.key)
+    expect(keys).not.toContain('templates')
+    expect(keys).not.toContain('hero')
+    expect(keys).not.toContain('json')
+    expect(keys).not.toContain('template')
+  })
+
+  it('should NOT extract the code variables themselves (exampleCode, cliCode, apiCode)', () => {
+    const keys = section.fields.map(f => f.key)
+    expect(keys).not.toContain('exampleCode')
+    expect(keys).not.toContain('cliCode')
+    expect(keys).not.toContain('apiCode')
+  })
+
+  it('should find only legitimate fields (no spurious template-literal variables)', () => {
+    const keys = section.fields.map(f => f.key)
+    // Only real content fields should be present — no code variable names
+    const spurious = ['templates', 'hero', 'json', 'template', 'exampleCode', 'cliCode', 'apiCode']
+    for (const key of spurious) {
+      expect(keys).not.toContain(key)
+    }
+    // heading and description must be present
+    expect(keys).toContain('heading')
+    expect(keys).toContain('description')
+  })
+})

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/__tests__/section-pipeline.test.ts

@@ -68,7 +68,9 @@ function checkCssIntegrity(
   return { ok: lost.length === 0, lost }
 }
 
-const SK_FIELD_NOT_NEEDED = new Set(['image', 'icon'])
+// icon and image fields now get data-sk-field via patchIconOrImageField
+// (only when the patcher can find a suitable container in the AST)
+const SK_FIELD_NOT_NEEDED = new Set<string>([])
 
 function fieldNeedsSkBinding(field: { key: string; type: string }): boolean {
   if (SK_FIELD_NOT_NEEDED.has(field.type)) return false

package/src/init/astro-section-analyzer-v2.ts

@@ -201,16 +201,43 @@ function splitAstroFile(source: string): { frontmatter: string; template: string
   return { frontmatter, template: source.slice(templateStart), templateOffset: templateStart }
 }
 
+function stripTemplateLiterals(source: string): string {
+  let result = ''
+  let i = 0
+  while (i < source.length) {
+    if (source[i] === '`') {
+      // Skip entire template literal (including nested ${...} expressions)
+      i++
+      let depth = 0
+      while (i < source.length) {
+        if (source[i] === '\\') { i += 2; continue }
+        if (source[i] === '$' && source[i + 1] === '{') { depth++; i += 2; continue }
+        if (source[i] === '{') { depth++; i++; continue }
+        if (source[i] === '}' && depth > 0) { depth--; i++; continue }
+        if (source[i] === '`' && depth === 0) { i++; break }
+        i++
+      }
+      result += '``' // placeholder so surrounding code stays parseable
+    } else {
+      result += source[i]
+      i++
+    }
+  }
+  return result
+}
+
 function extractFrontmatterVariables(frontmatter: string): string[] {
+  // Strip template literals so code inside backtick strings isn't parsed as variables
+  const stripped = stripTemplateLiterals(frontmatter)
   const variables: string[] = []
   const constRegex = /(?:const|let)\s+(\w+)\s*=\s*(.*)/g
   let match: RegExpExecArray | null
-  while ((match = constRegex.exec(frontmatter)) !== null) {
+  while ((match = constRegex.exec(stripped)) !== null) {
     const name = match[1]!
     const rhs = match[2]?.trim() ?? ''
     if (isInternalVariable(name)) continue
     // Skip exported declarations (e.g. "export const prerender = true")
-    const charBefore = match.index > 0 ? frontmatter.slice(Math.max(0, match.index - 10), match.index) : ''
+    const charBefore = match.index > 0 ? stripped.slice(Math.max(0, match.index - 10), match.index) : ''
     if (/export\s*$/.test(charBefore)) continue
     if (/\.\s*map\s*\(/.test(rhs) || /\w+\?\.\w+/.test(rhs)) continue
     if (/^\[/.test(rhs) && /^default/i.test(name)) continue

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

@@ -296,6 +296,15 @@ export async function patchTemplateForFields(
       continue
     }
 
+    // --- Icon / Image fields: add data-sk-field to their container element ---
+    // These fields can't be matched by text content. Instead we look for:
+    // 1. A CMS expression referencing this field (e.g. {skData?.icon} as an attr value)
+    // 2. A component/element with an `icon` or `src`/image prop that matches the default
+    if (field.type === 'icon' || field.type === 'image') {
+      patchIconOrImageField(source, sectionKey, field, varName, ast, edits)
+      continue
+    }
+
     // Fields without string defaultValue can't be matched by content
     if (!field.defaultValue || typeof field.defaultValue !== 'string') continue
     if (field.defaultValue.length < 2) continue
@@ -547,10 +556,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,
@@ -605,6 +632,79 @@ 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',
+    })
+  }
+}
+
+/**
+ * Patches an icon or image field by finding the nearest suitable container
+ * in the AST and adding data-sk-field to it.
+ *
+ * Strategy:
+ * - For icon: look for an element whose `icon`, `name`, or `data-icon` attribute
+ *   matches the default value, or a component named *Icon* — then add data-sk-field
+ *   to its parent container element.
+ * - For image: look for <img> / <Image> element whose `src` matches the default,
+ *   or an element whose expression refs the field key — add data-sk-field to parent.
+ * - Fallback: skip (no edit, no crash).
+ */
+function patchIconOrImageField(
+  source: string,
+  sectionKey: string,
+  field: { key: string; type: string; defaultValue?: unknown },
+  _varName: string,
+  ast: AstNode,
+  edits: Edit[],
+): void {
+  const bindingKey = `${sectionKey}.${field.key}`
+  const defaultStr = typeof field.defaultValue === 'string' ? field.defaultValue : ''
+
+  let targetParent: AstNode | null = null
+
+  walkAst(ast, (node, parent) => {
+    if (targetParent) return // already found
+    if (!parent || !isElement(parent)) return
+    // Skip if parent already has data-sk-field
+    if (parent.attributes?.some(a => a.name === 'data-sk-field')) return
+
+    if (field.type === 'icon') {
+      // Match component named *Icon* or element with icon/name attr matching default
+      const isIconComp = isElement(node) && /icon/i.test(node.name ?? '')
+      const hasIconAttr = node.attributes?.some(
+        a => (a.name === 'icon' || a.name === 'name' || a.name === 'data-icon') &&
+             (a.value === defaultStr || a.value.includes(field.key))
+      )
+      if (isIconComp || hasIconAttr) {
+        targetParent = parent
+      }
+    } else if (field.type === 'image') {
+      // Match <img> / <Image> / <picture> element
+      const tag = node.name ?? ''
+      const isImgEl = /^(img|Image|picture)$/.test(tag)
+      const hasSrcAttr = node.attributes?.some(
+        a => a.name === 'src' && (a.value === defaultStr || a.value.includes(field.key))
+      )
+      if (isImgEl || hasSrcAttr) {
+        targetParent = parent
+      }
+    }
+  })
+
+  if (!targetParent) return
+  addAttributeToElement(source, targetParent, `data-sk-field="${bindingKey}"`, edits)
 }
 
 function patchCmsBoundField(

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.