@panphora/hyper-cms 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/hyper-cms",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Live edit-in-place CMS sidebar for HTML pages with a hyper-html-api rules tag",
   "keywords": [
     "HTML",

package/src/enhance.js

@@ -0,0 +1,97 @@
+// Post-mount field enhancements + the rich-text rule upgrade.
+//
+// Bare scalar rules bind textContent, which flattens inline HTML (links,
+// bold, code) on extract and destroys it on the first apply. When the bound
+// page element actually contains child elements, the rule is upgraded to
+// @innerHTML so the round-trip preserves markup and the form renders the
+// @richtext component (a contenteditable surface, richclay-powered when the
+// host page ships richclay). Explicit @prop rules, array rules, and rules
+// whose element holds only text are left untouched. Hosts opt out with
+// cms.open({ richText: false }).
+
+export function upgradeRichTextRules(rules, pageRoot) {
+  if (!pageRoot || rules == null) return rules
+  return walk(rules)
+
+  function walk(rule) {
+    if (typeof rule === 'string') {
+      if (rule.endsWith('[]')) return rule
+      if (rule.lastIndexOf('@') >= 0) return rule
+      let el = null
+      try {
+        el = pageRoot.querySelector(rule)
+      } catch (_) {
+        return rule
+      }
+      return el && el.children.length > 0 ? rule + '@innerHTML' : rule
+    }
+    // Array rules ([itemSelector, shape]) scope their inner selectors per
+    // item; a document-level querySelector can't answer "does THIS item's
+    // element hold markup", so array subtrees are never upgraded.
+    if (Array.isArray(rule)) return rule
+    if (rule && typeof rule === 'object') {
+      const out = Object.create(null)
+      for (const [k, v] of Object.entries(rule)) out[k] = walk(v)
+      return out
+    }
+    return rule
+  }
+}
+
+// Grow a form textarea to fit its content. Browsers with `field-sizing:
+// content` handle this in CSS (the theme sets it); everywhere else the
+// height is pinned to scrollHeight on populate and on every input.
+export function autosizeTextarea(el) {
+  if (!el || el.tagName !== 'TEXTAREA') return
+  const win = el.ownerDocument.defaultView || (typeof window !== 'undefined' ? window : null)
+  if (win && win.CSS && win.CSS.supports && win.CSS.supports('field-sizing: content')) return
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+// Runs after any form (or form fragment) lands in the live DOM: sizes the
+// autosize fallback and mounts richclay on rich-text surfaces when the host
+// page ships it (window.richclay / window.hyperclay.RichClay). Without
+// richclay the surface stays a plain contenteditable bound via @innerHTML,
+// which still round-trips markup — richclay only adds the editing chrome.
+export function enhanceFields(root, doc) {
+  if (!root || !root.querySelectorAll) return
+  root.querySelectorAll('textarea[data-hcms-field]').forEach(autosizeTextarea)
+
+  const win = (doc && doc.defaultView) || (typeof window !== 'undefined' ? window : null)
+  const RichClay =
+    (win && win.richclay && win.richclay.RichClay) ||
+    (win && win.hyperclay && win.hyperclay.RichClay) ||
+    (win && typeof win.RichClay === 'function' ? win.RichClay : null)
+  if (!RichClay) return
+
+  root.querySelectorAll('[contenteditable][data-hcms-field]').forEach((el) => {
+    if (el.__hcmsRichclay) return
+    let editor
+    try {
+      // hyperclay:false keeps the form field out of the page's save/undo
+      // machinery (page writes go through commit) and activates the editor
+      // regardless of the host's edit-mode signal.
+      editor = new RichClay(el, {
+        inline: true,
+        hyperclay: false,
+        toolbar: ['bold', 'italic', 'link', 'undo', 'redo'],
+      })
+    } catch (err) {
+      console.warn('[hypercms] richclay activation failed; field stays plain contenteditable', err)
+      return
+    }
+    el.__hcmsRichclay = editor
+    // Toolbar commands mutate the DOM through squire, which doesn't always
+    // fire a native input event; mirror squire's own input signal so the
+    // form's delegated listener commits the change. Duplicate events are
+    // harmless — commits are fingerprinted.
+    const squire = editor && editor.squire
+    if (squire && typeof squire.addEventListener === 'function') {
+      squire.addEventListener('input', () => {
+        const Ev = (win && win.Event) || Event
+        el.dispatchEvent(new Ev('input', { bubbles: true }))
+      })
+    }
+  })
+}

package/src/events.js

@@ -3,6 +3,7 @@ import { applyWithRollback } from './apply-loop.js'
 import { fromString as pathFromString, getRuleAtPath } from './path.js'
 import { buildItem, fileNameFromUrl, radioGroupName } from './form-builder.js'
 import { scaffold } from './scaffold.js'
+import { autosizeTextarea, enhanceFields } from './enhance.js'
 
 const BOUND = new WeakSet()
 
@@ -55,7 +56,8 @@ export function bindEvents(ctx) {
     const target = e.target
     if (!target || !target.closest) return
     if (!target.closest('[data-hcms-form-root]')) return
-    if (!target.matches('input, textarea, select')) return
+    if (!target.matches('input, textarea, select, [contenteditable][data-hcms-field]')) return
+    if (target.tagName === 'TEXTAREA') autosizeTextarea(target)
     // The upload picker fires `input` too, but its .value is the OS fake path
     // (C:\fakepath\…); it's handled on `change` via onUploadChange. The wrapper
     // carries data-hcms-field, so without this guard the closest() below would
@@ -366,6 +368,7 @@ export function onAdd(arrayPath, ctx) {
     itemKey: arrayEl.getAttribute('data-hcms-item-tpl') || null,
   })
   slot.appendChild(itemNode)
+  enhanceFields(itemNode, ctx.doc)
   updateArrayButtonsVisibility(arrayEl)
   return commitWithUndo(`Add ${arrayPath}`, () =>
     commit(extractFormData(ctx), { path: arrayPath, structural: true }, ctx)

package/src/form-rules.js

@@ -21,6 +21,8 @@ export function fieldPropertyFor(el) {
   }
   if (tag === 'TEXTAREA' || tag === 'SELECT') return 'value'
   if (TAG_PROP_MAP[tag]) return TAG_PROP_MAP[tag]
+  // Rich-text surfaces (the @richtext component): the value IS the markup.
+  if (el.hasAttribute && el.hasAttribute('contenteditable')) return 'innerHTML'
   return null
 }
 

package/src/hypercms.js

@@ -20,6 +20,8 @@ import {
 import { mountShell, setShellStyles, markStylesBundled } from './shell.js'
 import { refreshForm, installObserver } from './refresh.js'
 import { warnUnmatchedTemplates } from './diagnostics.js'
+import { enhanceFields, upgradeRichTextRules } from './enhance.js'
+import { maybeInjectToggle } from './toggle.js'
 
 export function installStyles(text) {
   setShellStyles(text)
@@ -100,7 +102,12 @@ export function open(opts = {}) {
     const what = typeof source === 'string' ? `data-rules-name~="${source}"` : 'the provided rules object'
     throw new Error(`hypercms: no rules found for ${what}`)
   }
-  const pageRules = found.rules
+  // Rich-text upgrade (default on): bare scalar rules whose page element
+  // contains child elements are rebound through @innerHTML so links and
+  // inline formatting survive the round-trip, and their form fields render
+  // the @richtext component. Opt out with cms.open({ richText: false }).
+  const richText = opts.richText !== false
+  const pageRules = richText ? upgradeRichTextRules(found.rules, pageRoot) : found.rules
   const rulesTagNode = found.tagNode
 
   injectDefaults(doc)
@@ -130,6 +137,7 @@ export function open(opts = {}) {
     formRules,
     rulesTagNode,
     rulesSource: source,
+    richText,
     formRoot: shell.formRoot,
     shellRoot: shell.root,
     errorEl: shell.errorEl,
@@ -165,6 +173,7 @@ export function open(opts = {}) {
   try {
   const fragment = buildForm({ pageRules, formRules, data, doc })
   shell.formRoot.appendChild(fragment)
+  enhanceFields(shell.formRoot, doc)
 
   bindEvents(ctx)
   ctx.updateFingerprint()
@@ -455,6 +464,10 @@ function writeFieldValue(el, value, formRoot, path) {
     el.href = value == null ? '' : String(value)
     return
   }
+  if (el.hasAttribute && el.hasAttribute('contenteditable')) {
+    el.innerHTML = value == null ? '' : String(value)
+    return
+  }
   if ('value' in el) {
     el.value = value == null ? '' : String(value)
     return
@@ -566,6 +579,14 @@ function whenReady(fn) {
 // window, and the guards above no-op there).
 maybeAutoOpen()
 
+// Floating edit-mode toggle at module load (same browser-only no-op in node).
+maybeInjectToggle({
+  open,
+  close,
+  isOpen,
+  hasRules: (doc) => !!engine.findRules(doc, 'cms'),
+})
+
 const cms = {
   open,
   close,

package/src/refresh.js

@@ -4,6 +4,7 @@ import { morphForm } from './morph.js'
 import { injectDefaults, injectComponents } from './templates.js'
 import { deriveFormRules } from './form-rules.js'
 import { coerceBooleans, applyErrorState } from './events.js'
+import { enhanceFields, upgradeRichTextRules } from './enhance.js'
 
 const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
 
@@ -13,7 +14,10 @@ export function refreshForm(ctx, { ignoreActiveValue } = {}) {
   // livesync-replaced rules tag is picked up. Document-scoped via ctx.doc.
   const found = engine.findRules(ctx.doc, ctx.rulesSource || 'cms')
   if (found) {
-    ctx.pageRules = found.rules
+    // Re-apply the rich-text upgrade open() performed: the tag holds the
+    // author's bare rules, and using them raw would rebind upgraded fields
+    // back to textContent mid-session.
+    ctx.pageRules = ctx.richText ? upgradeRichTextRules(found.rules, ctx.pageRoot) : found.rules
     ctx.rulesTagNode = found.tagNode
   }
   // Re-derive formRules so schema changes (rule shape, template overrides) flow through.
@@ -32,6 +36,9 @@ export function refreshForm(ctx, { ignoreActiveValue } = {}) {
     doc: ctx.doc,
   })
   morphForm(ctx.formRoot, fragment, { ignoreActiveValue })
+  // The morph can rebuild field nodes, dropping autosize heights and richclay
+  // instances (instances are per-element); re-enhance whatever is new.
+  enhanceFields(ctx.formRoot, ctx.doc)
   // morphForm rebuilds the form structure; inline error slots get wiped. Re-apply
   // the last error state so error messages survive across observer-driven refreshes
   // (e.g., the rollback after a failed add).

package/src/templates.js

@@ -23,10 +23,13 @@ const SORTABLE_GRIP = `<div class="hcms-drag-handle mirk-sortable__grip" aria-hi
 const CLOSE_ICON = `<svg class="hcms-x" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path d="M4 4 L12 12 M12 4 L4 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"></path></svg>`
 
 const DEFAULT_TEMPLATES = {
+  // The default scalar is a one-row auto-growing textarea, not an <input>:
+  // page copy is prose and routinely wraps. Growth comes from field-sizing:
+  // content in the theme, with a scrollHeight fallback (enhance.js).
   '@scalar': `
     <label class="hcms-field" data-hcms-shape="scalar">
       <span class="hcms-label" data-hcms-label></span>
-      <input class="mirk-input" data-hcms-field />
+      <textarea class="mirk-textarea" rows="1" data-hcms-field></textarea>
       <div class="hcms-error" hidden></div>
     </label>
   `,
@@ -172,6 +175,17 @@ const DEFAULT_TEMPLATES = {
       <div class="hcms-error" hidden></div>
     </label>
   `,
+  // Rich-text surface for @innerHTML-bound rules: a contenteditable div whose
+  // value interface is innerHTML (fieldPropertyFor), so links and inline
+  // formatting survive the round-trip. richclay mounts on it when the host
+  // page ships it (enhance.js); otherwise it stays a plain contenteditable.
+  '@richtext': `
+    <div class="hcms-field" data-hcms-shape="scalar">
+      <span class="hcms-label" data-hcms-label></span>
+      <div class="mirk-textarea hcms-richtext" contenteditable="true" data-hcms-field></div>
+      <div class="hcms-error" hidden></div>
+    </div>
+  `,
   '@number': `
     <label class="hcms-field" data-hcms-shape="scalar">
       <span class="hcms-label" data-hcms-label></span>
@@ -233,7 +247,7 @@ export function injectComponentTemplate(doc, key) {
 // common than uploading a file, so an a@href rule stays a plain URL field and
 // the file upload is opt-in. Suffix is split like the engine (lastIndexOf('@'),
 // see engine/extract.js). Returns a DEFAULT_TEMPLATES key.
-const PROP_TO_COMPONENT = { src: '@image', checked: '@checkbox' }
+const PROP_TO_COMPONENT = { src: '@image', checked: '@checkbox', innerHTML: '@richtext' }
 // data-hcms-component values for scalar rules. "chips" is array-only (below).
 const SCALAR_COMPONENT_BY_NAME = {
   image: '@image',
@@ -244,6 +258,7 @@ const SCALAR_COMPONENT_BY_NAME = {
   radio: '@radio',
   textarea: '@textarea',
   number: '@number',
+  richtext: '@richtext',
 }
 // Every opt-in component injects on demand; only the 6 shape templates are
 // always present.

package/src/theme/pixel-quiet.overrides.css

@@ -227,7 +227,7 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
   display: flex;
   flex-direction: column;
   gap: 26px;
-  padding: 24px 24px 28px;
+  padding: 12px 24px 28px;
 }
 
 /* one labeled scalar field */
@@ -253,6 +253,31 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
   padding: 9px 14px 10px;
 }
 .hcms-shell.pixel-quiet textarea.mirk-input { min-height: 76px; resize: vertical; }
+
+/* default scalar fields: one-row textareas that grow with their content.
+   Browsers without field-sizing get a scrollHeight fallback (enhance.js). */
+.hcms-shell.pixel-quiet .hcms-form textarea.mirk-textarea {
+  field-sizing: content;
+  resize: none;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* rich-text surface (@richtext): a contenteditable styled like a textarea */
+.hcms-shell.pixel-quiet .hcms-richtext {
+  min-height: 2.5em;
+  cursor: text;
+  overflow-wrap: break-word;
+}
+.hcms-shell.pixel-quiet .hcms-richtext a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.hcms-shell.pixel-quiet .hcms-richtext:empty::before {
+  content: attr(data-hcms-placeholder);
+  color: var(--mirk-placeholder-color);
+}
 .hcms-shell.pixel-quiet .mirk-select__field {
   font-size: 15px;
   padding: 8px 40px 9px 14px;