<bmx-document-editor>

<bmx-document-editor id="ex-de" label="Proposal for Northwind Rail" file-name="northwind-proposal" locale="en-GB" author="Sam Carter" show-review></bmx-document-editor>
<p class="note" id="ex-de-out" role="status">A proposal from a fictional consultancy, laid out on A4 with a table of contents, its header, footnotes and page numbers - and a reviewer's comments and tracked changes to accept or reject. Type anywhere (changes are tracked when Track changes is on), format with the toolbar or Ctrl+B, I and U, find and replace with Ctrl+F, double-click the header to edit it, and save it as a Word document or a PDF - or open a .docx of your own.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <button type="button" id="ex-de-letter">Switch to US Letter</button>
  <button type="button" id="ex-de-readonly">Read only</button>
  <button type="button" id="ex-de-json">Show the document as JSON</button>
  <button type="button" id="ex-de-letter-merge">Try mail merge (a letter to three clients)</button>
</div>
<pre id="ex-de-json-out" hidden style="max-block-size: 18rem; overflow: auto; font-size: 12px"></pre>

<script type="module">
  await customElements.whenDefined('bmx-document-editor');
  const el = document.getElementById('ex-de');
  const out = document.getElementById('ex-de-out');

  const p = (text, style, props) => ({ type: 'paragraph', style, props, inlines: Array.isArray(text) ? text : [text] });
  const b = text => ({ type: 'text', text, style: { bold: true } });
  const cell = (text, shading) => ({ blocks: [p(text)], shading });
  const bullet = text => p(text, undefined, { list: { id: 'bullet', level: 0 } });
  const reviewer = { author: 'Ruth Okafor', date: '2026-10-16T15:20:00Z' };
  const step = (text, level = 0) => p(text, undefined, { list: { id: 'number', level } });

  el.content = {
    title: 'Timetable data platform - proposal',
    author: 'Fernhill Consulting',
    header: [p([{ type: 'text', text: 'Fernhill Consulting', style: { bold: true, color: '#1f3864' } }, { type: 'tab' }, { type: 'tab' }, { type: 'tab' }, { type: 'tab' }, { type: 'tab' }, { type: 'tab' }, { type: 'tab' }, { type: 'text', text: 'Commercial in confidence', style: { color: '#595959', size: 9 } }], 'NoSpacing')],
    footer: [p(['Page ', { type: 'field', field: 'page' }, ' of ', { type: 'field', field: 'pages' }], 'NoSpacing', { align: 'center' })],
    blocks: [
      p('Timetable data platform', 'Title'),
      p('A proposal for Northwind Rail, October 2026', 'Subtitle'),
      p('Contents', 'TOCHeading', { toc: true }),
      p('1. Summary', 'Heading1'),
      p([
        'Northwind Rail publishes timetables from four systems that were never meant to talk to each other.',
        { type: 'note', id: 'fn-systems' },
        ' This proposal sets out how one data platform would take their place over ',
        { type: 'text', text: 'nine', style: { bold: true, del: reviewer } },
        { type: 'text', text: 'ten', style: { bold: true, ins: reviewer } },
        b(' months'),
        ', in three releases, without a day of service lost to ',
        { type: 'text', text: 'the change', style: { comments: ['c-change'] } },
        '.',
      ], undefined, { align: 'justify' }),
      p('What Northwind gets:'),
      bullet('One source of truth for every timetable, from long-term plans to the day of running.'),
      bullet('Changes published to passengers, staff and partners within two minutes.'),
      bullet(['A full record of who changed what and when, kept for ', b('seven years'), '.']),
      p('2. Approach', 'Heading1'),
      p('The work runs in three releases. Each one goes live on its own and is used in service before the next begins.', undefined, { align: 'justify' }),
      step('Discovery and design (weeks 1 to 6)'),
      step('Map every feed and its owner', 1),
      step('Agree the shared timetable model', 1),
      step('Build and migrate (weeks 7 to 30)'),
      step('Run both systems side by side, then switch (weeks 31 to 39)'),
      p('3. Plan and cost', 'Heading1'),
      {
        type: 'table',
        columns: [190, 110, 80, 71],
        rows: [
          { header: true, cells: [cell('Release', '#dde4ee'), cell('Weeks', '#dde4ee'), cell('People', '#dde4ee'), cell('Cost', '#dde4ee')] },
          { cells: [cell('Discovery and design'), cell('1 to 6'), cell('3'), cell('£84,000')] },
          { cells: [cell('Build and migrate'), cell('7 to 30'), cell('6'), cell('£512,000')] },
          { cells: [cell('Parallel running and switch'), cell('31 to 39'), cell('4'), cell('£141,000')] },
          { cells: [{ blocks: [p([b('Total')])] }, cell('39 weeks'), cell(''), { blocks: [p([b('£737,000')])] }] },
        ],
        borders: true,
      },
      p('Figures exclude VAT. Travel within the UK is included.', 'Caption'),
      p('4. Risks', 'Heading1', { pageBreakBefore: true }),
      p([
        'The largest risk is the quality of the freight feed, which has no single owner today. We would ask for a named owner before release two begins. Our full risk log is at ',
        { type: 'text', text: 'example.com/northwind/risks', style: { link: 'https://example.com/northwind/risks' } },
        '.',
      ], undefined, { align: 'justify' }),
      p('5. Next steps', 'Heading1'),
      p('If this proposal suits, we can begin discovery on 2 November. A one-hour call to walk through it is the best place to start.', undefined, { align: 'justify' }),
      p(['Priya Shah', { type: 'break', kind: 'line' }, 'Principal, Fernhill Consulting'], undefined, { spaceBefore: 18 }),
    ],
    notes: {
      'fn-systems': [p('Long-term planning, short-term planning, the day-of-running system and the passenger information feed.')],
    },
    comments: [
      {
        id: 'c-change',
        author: 'Ruth Okafor',
        date: '2026-10-16T15:24:00Z',
        text: 'Can we say how the switch-over weekend is covered?',
        replies: [{ author: 'Priya Shah', date: '2026-10-16T16:02:00Z', text: 'Yes - added to section 2.' }],
      },
    ],
  };
  // Fill in the table of contents from the headings.
  await el.execute('toc');
  await el.selectRange({ story: 'body', path: [0], offset: 0 });

  el.addEventListener('bmxChange', async event => {
    const stats = await el.getStats();
    out.textContent = `Edited (${event.detail.reason}): ${stats.words} words on ${stats.pages} pages.`;
  });
  el.addEventListener('bmxSave', event => {
    out.textContent = `Saved ${event.detail.fileName} (${Math.round(event.detail.bytes.length / 1024)} KB).`;
  });
  el.addEventListener('bmxOpen', event => {
    out.textContent = `Opened ${event.detail.fileName}${event.detail.warnings.length ? ' - some parts were simplified' : ''}.`;
  });

  document.getElementById('ex-de-letter').addEventListener('click', async e => {
    const doc = await el.getContent();
    const letter = doc.page.width > 600;
    el.content = { ...doc, page: { ...doc.page, width: letter ? 595.3 : 612, height: letter ? 841.9 : 792 } };
    e.target.textContent = letter ? 'Switch to US Letter' : 'Switch to A4';
  });
  document.getElementById('ex-de-readonly').addEventListener('click', e => {
    el.readonly = !el.readonly;
    e.target.textContent = el.readonly ? 'Allow editing' : 'Read only';
  });
  document.getElementById('ex-de-letter-merge').addEventListener('click', () => {
    el.mergeData = [
      { FirstName: 'Amira', Company: 'Harbour Freight', City: 'Hull' },
      { FirstName: 'Tom', Company: 'Pennine Buses', City: 'Leeds' },
      { FirstName: 'Grace', Company: 'Severn Ferries', City: 'Bristol' },
    ];
    el.content = {
      title: 'Renewal letter',
      blocks: [
        p('Fernhill Consulting', 'Title'),
        p(['Dear ', { type: 'field', field: 'merge', name: 'FirstName' }, ',']),
        p(['Thank you for another year working with ', { type: 'field', field: 'merge', name: 'Company' }, '. We look forward to seeing the ', { type: 'field', field: 'merge', name: 'City' }, ' team at the November review.'], undefined, { align: 'justify' }),
        p(['Kind regards,', { type: 'break', kind: 'line' }, 'Priya Shah']),
      ],
    };
    out.textContent = 'A letter with three merge fields: choose Preview results to see each client\'s copy, or Merge to one Word document.';
  });
  document.getElementById('ex-de-json').addEventListener('click', async e => {
    const pre = document.getElementById('ex-de-json-out');
    pre.hidden = !pre.hidden;
    if (!pre.hidden) pre.textContent = JSON.stringify(await el.getContent(), null, 2).slice(0, 20000);
    e.target.textContent = pre.hidden ? 'Show the document as JSON' : 'Hide the JSON';
  });
</script>