@arcsin1/presentation-editor-runtime

Browser-side presentation editor primitives for HTML slides. The runtime provides browser-like element selection, a complete DOM inspector, controlled attribute and CSS mutation, and clean serialization for saving an edited page.

Capabilities

• Select or hover any allowed element and mark it with transient data-arcsin1-presentation-editor-selected / data-arcsin1-presentation-editor-hover attributes.
• Inject the inspector picker into an isolated slide document, with stable selectors, highlighted targets, text-aware hit testing, and clean teardown.
• Inspect all source attributes, inline CSS declarations (including priority), and the full computed-style map of the selected element.
• Apply semantic operations for attributes, classes, CSS declarations, text, and HTML. Event-handler attributes, runtime-owned attributes, and unsafe URL values are rejected by the built-in policy.
• Serialize an edited root without editor overlays, runtime attributes, or runtime classes so selection state never leaks into saved HTML.
• Use directly in a browser or generate a self-contained script for an iframe, <webview>, or other isolated document.

API

import {
  buildInspectorCleanupScript,
  buildInspectorInjectScript,
  buildPresentationEditorRuntimeInjectScript,
  installPresentationEditorRuntime
} from '@arcsin1/presentation-editor-runtime'

const editor = installPresentationEditorRuntime({
  root: document.querySelector('.ppt-page-root')
})

editor.select(document.querySelector('[data-block-id="hero-title"]')!)
const snapshot = editor.inspect()
editor.apply([
  { type: 'set-style', property: 'letter-spacing', value: '0.04em' },
  { type: 'set-attribute', name: 'aria-label', value: 'Company overview' }
])

const cleanHtml = editor.serializeForSave()

const iframeScript = buildPresentationEditorRuntimeInjectScript({
  interaction: false
})

const pickerScript = buildInspectorInjectScript({ mode: 'inspect' })
const pickerCleanupScript = buildInspectorCleanupScript()

The runtime does not force a presentation schema. A host can provide isSelectable and selectorFor callbacks to preserve its own block identity and editing rules.

License

Apache-2.0