import { Component, h, Host, State } from '@stencil/core';
export class ShowcaseRichEditor {
  constructor() {
    this.content = sampleData;
  }
  render() {
    return (h(Host, { class: "d-flex" },
      h("div", { class: "m-1", style: { flex: '29' } },
        h("h5", null, "Editor"),
        h("dvn-rich-editor", { value: this.content, onChange: (e) => this.content = e.detail })),
      h("div", { class: "m-1", style: { flex: '25' } },
        h("h5", null, "Readonly"),
        h("dvn-rich-content", { value: this.content }))));
  }
  static get is() { return "showcase-rich-editor"; }
  static get states() { return {
    "content": {}
  }; }
}
const sampleData = [
  {
    type: 'h1',
    id: 'h1-1',
    value: {
      text: 'Rich Text Editor',
    },
  },
  {
    type: 'text',
    id: 'text-1',
    value: {
      text: 'This is a rich text editor created for providing a <b>beautiful</b> and <i>easy to use</i> scripting experience to users. It supports <strong>bold</strong>, <em>italic</em>, <u>underline</u> and <s>strike-through</s> text formatting for paragraphs and also <a href="devingen.io" rel="noopener noreferrer" target="_blank">supports links</a>.',
    },
  },
  {
    type: 'h2',
    id: 'h2-1',
    value: {
      text: 'Formatting Text',
    },
  },
  {
    type: 'text',
    id: 'text-2',
    value: {
      text: 'There are two ways of formatting text. First one is the keyboard shortcuts. You can use the common key combinations used for all text editors. For example Cmd+b (Ctrl for Windows) converts the cursor to bold text.'
    },
  },
  {
    type: 'h2',
    id: 'h2-2',
    value: {
      text: 'Lists',
    },
  },
  {
    type: 'h3',
    id: 'h3-1',
    value: {
      text: 'Unordered Lists',
    },
  },
  {
    type: 'text',
    id: 'text-3',
    value: {
      text: '<p>You can create an unordered list by using the - character in the beginning of a new line and adding a space after it. The line will be directly converted to a list item. The subsequent lines will be list items as well.</p><ul><li>First line</li><li>Second line</li></ul>'
    },
  },
  {
    type: 'h3',
    id: 'h3-2',
    value: {
      text: 'Ordered List',
    },
  },
  {
    type: 'text',
    id: 'text-4',
    value: {
      text: '<p>To create an ordered list, type 1. at the beginning of the line.</p><ol><li>The first ordered item</li><li>And the second one</li></ol>'
    },
  },
  {
    type: 'h2',
    id: 'h2-3',
    value: {
      text: 'TODO',
    },
  },
  {
    type: 'text',
    id: 'text-5',
    value: {
      text: '<ul><li><s>Paragraph with rich formatting</s></li><li><s>Headings</s></li><li>Separator</li><li>Embedding video</li><li>Image with URL</li><li>Image by uploading a new file</li></ul>'
    },
  },
];
