Nested Blot? about parchment HOT 7 CLOSED

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;">
     <iframe src="https://www.youtube.com/embed/6LuREkiF_Hs?rel=0&amp;showinfo=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no">
     </iframe>
</div>

    <div class="video-container">
        <iframe src="xxx">
        </iframe>
    </div>

const BlockEmbed = Quill.import('blots/block/embed');
class VideoContainer extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.setAttribute('class', 'video-container');

    const child = document.createElement('iframe');
    child.setAttribute('src', value);
    child.setAttribute('frameborder', 0);
    child.setAttribute('allowfullscreen', true);
    node.appendChild(child);
    return node;
  }

  // get value of the node (for implement undo function)
  static value(node) {
    return node.firstChild.getAttribute('src');
  }
}

VideoContainer.blotName = 'video-container';
VideoContainer.tagName = 'div';
Quill.register(VideoContainer);

function insertVimeo() {
  const vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/;
  const url = prompt('Enter Vimeo URL:');
  if (url && vimRegExp.test(url)) {
    // generate embed link
    const vimMatch = url.match(vimRegExp);
    const src = ['//player.vimeo.com/video/', vimMatch[3]].join('');

    const cursorPosition = this.quill.getSelection().index;
    this.quill.insertEmbed(cursorPosition, 'video-container', src);
    this.quill.setSelection(cursorPosition + 1);
  }
}

class QuillScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.handleChange = this.handleChange.bind(this);

    this.toolbarOptions = {
      // suppose to be all supported toolbar buttons
      container: [
        // sample for adding new button in toolbar
        ['vimeo'],
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block', 'code', 'formula', 'link'],
        ['video', 'image'],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction

        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],

        ['clean'], // remove formatting button
      ],
      handlers: {
        vimeo: insertVimeo,
      },
    };

    // suppose to be all supported format
    this.formats = [
      ['background', 'bold', 'color', 'font', 'code', 'italic', 'link', 'size', 'strike', 'script', 'underline'],
      ['blockquote', 'header', 'indent', 'list', 'align', 'direction', 'code-block'],
      ['formula', 'image', 'video'],
      ['video-container'],
    ];
  }

  handleChange(value) {
    this.setState({ text: value });
  }

  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        modules={{
          toolbar: this.toolbarOptions,
        }}
      />
    );
  }
}

   Page -> Paragraph(s) -> sentence(s) -> words.