@panphora/hyper-cms 0.8.1 → 0.11.0

package/src/unresolved.js

@@ -1,5 +1,5 @@
-import domAdapter from 'hyper-html-api/dom'
-import { ruleAttrIndex } from 'hyper-html-api/engine'
+import { createDomAdapter } from 'hyper-html-api/dom'
+import { ruleAttrIndex, DOM_PROPERTIES_READ_ONLY_SET } from 'hyper-html-api/engine'
 
 const PREFIX = '[hypercms]'
 
@@ -28,17 +28,61 @@ export class InvalidRuleSelector extends Error {
 export function findUnresolved(root, rules) {
   const missing = []
   const twins = []
-  walk(root, rules, [], missing, twins)
-  return { missing: unique(missing), twins: uniqueTwins(twins) }
+  const readOnly = []
+  walk(createDomAdapter(root), root, rules, [], missing, twins, readOnly)
+  return { missing: unique(missing), twins: uniqueTwins(twins), readOnly: unique(readOnly) }
 }
 
-function walk(ctx, rule, path, missing, twins) {
+// The rules to WRITE with. Extract keeps the full tree, because a read-only
+// projection still READS (".box@classList" reads its class list) and dropping
+// it would change what onChange reports. apply() ignores data keys its rules do
+// not mention, so narrowing only the write side costs nothing and removes the
+// failure class: apply throws RuleTargetReadOnly part-way through its walk, and
+// the ordinary edit path does not snapshot, so the writes ordered before the
+// throw stay and the ones after never happen.
+export function stripReadOnly(rules) {
+  return strip(rules)
+}
+
+function strip(rule) {
+  if (typeof rule === 'string') return isReadOnlyRule(rule) ? undefined : rule
+  if (Array.isArray(rule)) {
+    const [selector, shape] = rule
+    // Keep the tuple even when the item shape strips to nothing. The selector is
+    // what engine.apply needs in order to add, remove and reorder rows, so
+    // dropping it made every structural operation on a list whose only field is
+    // read-only report success while the page did not change. An undefined item
+    // shape writes no value and leaves row reconciliation intact.
+    return [selector, strip(shape)]
+  }
+  if (rule && typeof rule === 'object') {
+    const out = {}
+    for (const [key, sub] of Object.entries(rule)) {
+      const kept = strip(sub)
+      if (kept !== undefined) out[key] = kept
+    }
+    return out
+  }
+  return rule
+}
+
+function walk(adapter, ctx, rule, path, missing, twins, readOnly) {
   if (typeof rule === 'string') {
     const selector = selectorOf(rule)
+    // Resolve the selector even for a read-only rule, so an invalid one still
+    // becomes InvalidRuleSelector here rather than a raw SyntaxError out of the
+    // extract that follows.
+    const matches = selector ? find(adapter, ctx, selector, FIND_OPTS, path) : []
+    // Reported on its own and never also as missing: the selector may well
+    // match, and the reason the edit cannot land is the property, not the
+    // element.
+    if (isReadOnlyRule(rule)) {
+      readOnly.push(pathStr(path))
+      return
+    }
     if (!selector) return
-    const matches = find(ctx, selector, FIND_OPTS, path)
     if (rule.endsWith('[]')) {
-      if (matches.length === 0 && find(ctx, selector, SEED_OPTS, path).length === 0) {
+      if (matches.length === 0 && find(adapter, ctx, selector, SEED_OPTS, path).length === 0) {
         missing.push(pathStr(path))
       }
       return
@@ -51,25 +95,25 @@ function walk(ctx, rule, path, missing, twins) {
   if (Array.isArray(rule)) {
     const [selector, shape] = rule
     if (typeof selector !== 'string' || !selector) return
-    const matches = find(ctx, selector, FIND_OPTS, path)
+    const matches = find(adapter, ctx, selector, FIND_OPTS, path)
     if (matches.length === 0) {
-      if (find(ctx, selector, SEED_OPTS, path).length === 0) missing.push(pathStr(path))
+      if (find(adapter, ctx, selector, SEED_OPTS, path).length === 0) missing.push(pathStr(path))
       return
     }
     // Rows collapse to one '*' segment, so a field broken on every row is
     // reported once rather than once per row.
-    for (const node of matches) walk(node, shape, [...path, '*'], missing, twins)
+    for (const node of matches) walk(adapter, node, shape, [...path, '*'], missing, twins, readOnly)
     return
   }
 
   if (rule && typeof rule === 'object') {
-    for (const [key, sub] of Object.entries(rule)) walk(ctx, sub, [...path, key], missing, twins)
+    for (const [key, sub] of Object.entries(rule)) walk(adapter, ctx, sub, [...path, key], missing, twins, readOnly)
   }
 }
 
-function find(ctx, selector, opts, path) {
+function find(adapter, ctx, selector, opts, path) {
   try {
-    return domAdapter.find(ctx, selector, opts)
+    return adapter.find(ctx, selector, opts)
   } catch (err) {
     throw new InvalidRuleSelector(pathStr(path), selector, err)
   }
@@ -86,6 +130,20 @@ function selectorOf(rule) {
   return (at === -1 ? rule : rule.slice(0, at)) || null
 }
 
+// The attribute or property half of a scalar rule, or null when the rule is a
+// bare selector, an array rule, or ".". ruleAttrIndex returns the index of the
+// last top-level @, so a leading @ (the context node itself) resolves here too.
+function attrOf(rule) {
+  if (rule.endsWith('[]')) return null
+  const at = ruleAttrIndex(rule)
+  return at === -1 ? null : rule.slice(at + 1) || null
+}
+
+function isReadOnlyRule(rule) {
+  const attr = attrOf(rule)
+  return attr != null && DOM_PROPERTIES_READ_ONLY_SET.has(attr)
+}
+
 export function applyUnresolvedState(ctx) {
   renderNotice(ctx)
   warnTwins(ctx)
@@ -98,15 +156,26 @@ function renderNotice(ctx) {
   const el = ctx.noticeEl
   if (!el) return
   const missing = (ctx.unresolved && ctx.unresolved.missing) || []
-  if (missing.length === 0) {
+  const readOnly = (ctx.unresolved && ctx.unresolved.readOnly) || []
+  if (missing.length === 0 && readOnly.length === 0) {
     el.textContent = ''
     el.hidden = true
     return
   }
-  const count = missing.length === 1
-    ? '1 field no longer matches this page'
-    : `${missing.length} fields no longer match this page`
-  el.textContent = `${count}: ${missing.join(', ')}`
+  const lines = []
+  if (missing.length) {
+    const count = missing.length === 1
+      ? '1 field no longer matches this page'
+      : `${missing.length} fields no longer match this page`
+    lines.push(`${count}: ${missing.join(', ')}`)
+  }
+  if (readOnly.length) {
+    const count = readOnly.length === 1
+      ? '1 field reads a property the browser will not let anything write'
+      : `${readOnly.length} fields read properties the browser will not let anything write`
+    lines.push(`${count}: ${readOnly.join(', ')}`)
+  }
+  el.textContent = lines.join('\n')
   el.hidden = false
 }
 

package/src/views/inline-ghosts.js

@@ -0,0 +1,139 @@
+import { inlineIcon } from '../inline-icons.js'
+import { capabilitySelector } from '../lib/region-capabilities.js'
+
+const MARKER = 'data-hcms-ghost'
+const EDITOR_UI_SELECTOR = capabilitySelector('history')
+
+function placementFor(list) {
+  let parent = list.container
+  let anchor = null
+  while (parent && (parent.namespaceURI !== 'http://www.w3.org/1999/xhtml' || ['SELECT', 'OPTGROUP', 'DATALIST'].includes(parent.tagName))) {
+    anchor = parent
+    parent = parent.parentElement
+  }
+  return { parent, anchor }
+}
+
+export function createInlineGhosts({ doc, themeRoot, onAdd, onResize }) {
+  const win = doc.defaultView
+  let entries = []
+  let hidden = false
+  let resizeObserver = null
+  const sorting = new Map()
+
+  function setStyle(node, property, value) {
+    if (node.style[property] !== value) node.style[property] = value
+  }
+
+  function protectSorting() {
+    const parents = new Set(entries.map((entry) => entry.node.parentElement))
+    for (const [parent, record] of sorting) {
+      if (parents.has(parent) && win?.Sortable?.get(parent) === record.instance) continue
+      if (record.instance.option('draggable') === record.selector) record.instance.option('draggable', record.original)
+      sorting.delete(parent)
+    }
+    for (const parent of parents) {
+      const instance = win?.Sortable?.get(parent)
+      if (!instance) continue
+      const current = instance.option('draggable')
+      if (sorting.get(parent)?.selector === current) continue
+      const original = current
+      const direct = original.trim().startsWith('>')
+      const selector = `${direct ? '> ' : ''}:is(${original.trim().replace(/^>\s*/, '')}):not(${EDITOR_UI_SELECTOR})`
+      instance.option('draggable', selector)
+      sorting.set(parent, { instance, original, selector })
+    }
+  }
+
+  function update() {
+    for (const entry of entries) {
+      const { node, slot, list } = entry
+      const boxes = list.items.filter((el) => el.isConnected).map((el) => el.getBoundingClientRect())
+        .filter((rect) => rect.width > 0 && rect.height > 0)
+      if (boxes.length) {
+        entry.width = boxes.reduce((sum, rect) => sum + rect.width, 0) / boxes.length
+        entry.height = boxes.reduce((sum, rect) => sum + rect.height, 0) / boxes.length
+      }
+      setStyle(node, 'width', entry.width ? `${Math.round(entry.width)}px` : '100%')
+      setStyle(slot, 'height', `${Math.max(48, Math.round(entry.height || 64))}px`)
+      if (slot !== node) slot.colSpan = Math.max(1, ...list.items.map((row) => [...row.children].reduce((sum, cell) => sum + (cell.colSpan || 1), 0)))
+      if (node.hidden !== hidden) node.hidden = hidden
+    }
+    protectSorting()
+  }
+
+  function make(list, parent) {
+    const parentTag = parent.tagName
+    const tableRow = ['TBODY', 'THEAD', 'TFOOT', 'TABLE'].includes(parentTag)
+    const node = doc.createElement(tableRow ? 'tr' : ['UL', 'OL', 'MENU'].includes(parentTag) ? 'li' : 'div')
+    for (const attr of [MARKER, 'data-hcms-shell', 'editor-ui', 'no-watch', 'no-save', 'save-remove', 'snapshot-remove']) node.setAttribute(attr, '')
+    node.setAttribute('draggable', 'false')
+    node.setAttribute('contenteditable', 'false')
+    node.className = 'hcms-shell pixel-quiet hcms-inline-ghost'
+    for (const theme of ['light', 'dark']) node.classList.toggle(theme, !!themeRoot?.classList.contains(theme))
+    const slot = tableRow ? doc.createElement('td') : node
+    if (slot !== node) {
+      slot.className = 'hcms-inline-ghost-cell'
+      node.appendChild(slot)
+    }
+    const button = doc.createElement('button')
+    button.type = 'button'
+    button.className = 'hcms-inline-list-button hcms-inline-list-add mirk-button mirk-button--small'
+    button.setAttribute('data-hcms-list-action', 'add')
+    button.innerHTML = `<span class="mirk-button__label">${inlineIcon('add')}<span>Add</span></span>`
+    slot.appendChild(button)
+    const entry = { node, slot, button, list, width: 0, height: 0 }
+    button.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onAdd(entry.list)
+    })
+    for (const type of ['pointerdown', 'mousedown', 'touchstart', 'click']) node.addEventListener(type, (event) => event.stopPropagation())
+    node.addEventListener('dragstart', (event) => { event.preventDefault(); event.stopPropagation() })
+    return entry
+  }
+
+  return {
+    setLists(lists) {
+      const unused = new Set(entries)
+      const next = []
+      const owned = new Set(entries.map(entry => entry.node))
+      const cleanedParents = new Set()
+      for (const list of lists || []) {
+        if (!list.container || !list.container.isConnected) continue
+        const { parent, anchor } = placementFor(list)
+        if (!parent) continue
+        if (!cleanedParents.has(parent)) {
+          for (const stale of parent.querySelectorAll(`:scope > [${MARKER}]`)) {
+            if (!owned.has(stale)) stale.remove()
+          }
+          cleanedParents.add(parent)
+        }
+        const entry = entries.find((candidate) => unused.has(candidate) && candidate.list.container === list.container && candidate.list.path.join('.') === list.path.join('.')) || make(list, parent)
+        unused.delete(entry)
+        entry.list = list
+        entry.button.setAttribute('data-hcms-list', list.path.join('.'))
+        entry.button.setAttribute('aria-label', `Add to ${list.path.join('.') || 'the list'}`)
+        const last = anchor || list.items.filter((el) => el.parentElement === parent).at(-1)
+        if (last) {
+          if (last.nextSibling !== entry.node) last.after(entry.node)
+        } else if (entry.node.parentElement !== parent) parent.appendChild(entry.node)
+        next.push(entry)
+      }
+      for (const entry of unused) entry.node.remove()
+      entries = next
+      resizeObserver?.disconnect()
+      if (!resizeObserver && typeof win?.ResizeObserver === 'function') resizeObserver = new win.ResizeObserver(() => { update(); onResize?.() })
+      for (const entry of entries) for (const item of entry.list.items) resizeObserver?.observe(item)
+      update()
+    },
+    update,
+    setHidden(value) { hidden = !!value; update() },
+    destroy() {
+      resizeObserver?.disconnect()
+      for (const entry of entries) entry.node.remove()
+      entries = []
+      protectSorting()
+    },
+  }
+}