PhoenixKitOG.Web.EditorLive (PhoenixKitOG v0.1.0)

Copy Markdown View Source

The OG template editor — WYSIWYG SVG canvas on the left, element library + property panel on the right.

Interaction model

  • Click element on canvas → select (sets :selected_id).
  • Click empty canvas → deselect.
  • Add buttons in the toolbar push elements at default positions.
  • Drag: handled by the PhoenixKitOGCanvas JS hook (inline <script>, registered on window.PhoenixKitHooks). During drag the hook applies an SVG transform locally and only pushes a final move_element event on pointer-up — so we don't roundtrip on every pixel.
  • Resize: 8 corner/edge handles around the selected element. Same hook handles the pointer math.
  • Keyboard: arrows nudge by 1px (10px with Shift); Delete removes the selection; Escape deselects; Ctrl+S saves.
  • Bindings dropdown: text elements expose a binding picker in the property panel. Selecting one writes the token (e.g. {post.title}) into the binding field; preview mode substitutes its example.

Save semantics

Changes are autosaved on a 800ms debounce. Manual save via Ctrl+S or the "Save" button flushes immediately. A header pill shows saved / saving / unsaved state.