<p>This is the "block-editor-vue" demo page. For more information, see <a href="https://github.com/takitakit/block-editor-vue" target="_blank">Github.</a></p>
<div class="contents">
  <div id="editor"></div>
  <div id="source">
    <h3>Output source (realtime)</h3>
    <pre></pre>
  <div>
</div>

.contents {
  display: flex;
  
  & > div {
    flex: 1;
    box-sizing: border-box;
  }
  #source {
    padding: 0 0 0 1rem;
    pre {
      white-space: pre-wrap;
      font-size: 1.2rem;
    }
  }
}

@media screen and (max-width:600px) { 
  .contents {
    display: block; 
    
    & > div {
      width: 100%;
    }
  }
}

// inline text style
.ve-red {
  color: #f44;
}
.ve-bold {
  font-weight: bold;
}

const source = document.querySelector('#source pre')
console.log(source)

const defaultItems = [
  {
    name: 'Heading',
    level: 'h3',
    content: 'Here is a demo page of <span class="ve-bold">block-editor-vue</span>.'
  },
  {
    name: 'Paragraph',
    content: '"<a href="https://github.com/takitakit/block-editor-vue" target="_blank">block-editor-vue</a>" is a block editor that allows you to stack any combination of block elements, such as paragraphs, headings, lists, and so on.<br>If you are using the CMS management screen, you can use this editor as a means of editing the body HTML of an article.'
  },
  {
    name: 'Heading',
    level: 'h4',
    content: 'Features'
  },
  {
    name: 'List',
    type: 'unordered',
    rows: [
      {content: 'Supported block elements can be added in any order'},
      {content: 'CSS class name can be set per block element'},
      {content: 'Multiple column layouts are supported'},
      {content: 'Block elements can be duplicated, rearranged, and deleted'},
      {content: 'Undo and redo are supported'},
      {content: 'HTML markup available in real time'},
      {content: 'Each block element supports a predefined combination of class names and other settings (predefined sets, optional).'},
      {content: 'The inline editor supports the setting of inline styles (optional)'}
    ]
  },
  {
    name: 'Heading',
    level: 'h4',
    content: 'Supported elements'
  },
  {
    name: 'Table',
    colgroup: [
      {width: 25},
      {width: 75}
    ],
    rows: [
      {cells: [
        {content: 'element', header: true},
        {content: 'description', header: true}
      ]},
      {cells: [
        {content: 'Paragraph'},
        {content: 'Text and images can be inserted.'}
      ]},
      {cells: [
        {content: 'Heading'},
        { content: 'You can specify the heading level from H1 to H6.' }
      ]},
      {cells: [
        {content: 'List'},
        {content: 'You can specify an unordered list(UL) or an ordered list(OL).'}
      ]},
      {cells: [
        {content: 'Table'},
        {content: 'You can add table headings(THEAD) and table body(TBODY), merge cells, split cells, and resize cell widths.'}
      ]},
      {cells: [
        {content: 'Column'},
        {content: 'You can nest other elements, such as paragraphs and headings, in an inserted column.'}
      ]},
      {cells: [
        {content: 'HTML'},
        {content: 'You can enter any HTML markup, including embedded tags for YouTube and Google Maps.'}
      ]}
    ]
  }
]

// launch editor
new BlockEditor('#editor', {
  items: defaultItems,
  allowStyledText: true,
  styledTextClasses: ['link', 'bold', 'red'],
  onLoad: html => updateSource(html),
  onUpdate: html => updateSource(html),
  outputIndent: '   ',
})

function updateSource (html) {
  source.innerText = html
}