Content Designer

The qds-content-designer component provides a registry-driven authoring workspace for QDS content documents.

Usage

<qds-content-designer id="designer"></qds-content-designer>

<script type="module">
  import {
    QdsContentRegistry
  } from 'https://cdn.q360.ai/assets/components/index.js';

  const registry = new QdsContentRegistry([
    {
      type: 'smart-metric',
      label: 'Metric Tile',
      modes: ['dashboard'],
      defaultConfig: {
        metricKey: 'production'
      },
      renderTag: 'qds-smart-metric'
    }
  ]);

  const designer = document.getElementById('designer');
  designer.registry = registry;
  designer.context = {
    blockRegistry: registry,
    canEdit: true,
    canPreview: true,
    services: {
      metrics: {
        production: '12.4 mboe/d'
      }
    }
  };
  designer.document = {
    version: 1,
    mode: 'page',
    title: 'Quarterly Content',
    blocks: []
  };

  designer.addEventListener('content-change', (event) => {
    console.log('Updated document', event.detail.document);
  });
</script>

Events

Event	Detail	Description
content-change	{ document }	Fired whenever the document changes
block-select	{ blockId }	Fired when the selected block changes
block-add	{ block }	Fired after a block is added
block-remove	{ blockId }	Fired after a block is removed
block-move	{ blockId, layout }	Fired after layout or order changes
preview-request	{ document }	Fired when the preview view is activated

Supporting Components

The designer is composed from reusable first-class QDS components:

• qds-content-palette
• qds-content-outline
• qds-content-canvas
• qds-content-properties
• qds-content-block-frame

Notes

• Preview uses qds-content-renderer so authoring preview matches runtime rendering.
• Page-mode authoring supports drag-and-drop add and reorder flows through the palette, outline, and canvas.
• Built-in blocks are application-agnostic.
• Host applications extend the registry for smart blocks and supply runtime services through context.