createCodingArea(text = '', inline = false) {
    const { range, sel } = store.state.selectionData;
    const codingArea = document.createElement(inline ? 'span' : 'div');
    codingArea.classList.add('coding--editable');

    const createCodingLine = (text, type) => {
      const codingLine = document.createElement(type);
      codingLine.classList.add('coding-line');
      codingLine.innerText = text;

      codingArea.appendChild(codingLine);
    };

    if (inline) {
      createCodingLine(text, 'span');
    } else {
      const codingLines = text === '' ? ['Enter Coding here...'] : text.split('\n');
      for (const codingLine of codingLines) {
        createCodingLine(codingLine, 'div');
      }
    }

    codingArea.setData('language', 'markup');

    range.insertNode(codingArea);

    // select all coding lines
    sel.removeAllRanges();

    range.setStartBefore(codingArea.firstElementChild.childNodes[0]);
    range.setEndAfter(codingArea.lastElementChild.childNodes[0]);
    sel.addRange(range);
  }
/**
   * Creates a coding area element into editor
   * @param text
   * @param inline
   */
Creates a coding area element into editor
@param text
@param inline
Creates a coding area element into editor @param text @param inline
createCodingArea(text = '', inline = false) {
    const { range, sel } = store.state.selectionData;
    const codingArea = document.createElement(inline ? 'span' : 'div');
    codingArea.classList.add('coding--editable');
    const createCodingLine = (text, type) => {
      const codingLine = document.createElement(type);
      codingLine.classList.add('coding-line');
      codingLine.innerText = text;
      codingArea.appendChild(codingLine);
    };
    if (inline) {
      createCodingLine(text, 'span');
    } else {
      const codingLines = text === '' ? ['Enter Coding here...'] : text.split('\n');
      for (const codingLine of codingLines) {
        createCodingLine(codingLine, 'div');
      }
    }
    codingArea.setData('language', 'markup');
    range.insertNode(codingArea);
    sel.removeAllRanges();
    range.setStartBefore(codingArea.firstElementChild.childNodes[0]);
    range.setEndAfter(codingArea.lastElementChild.childNodes[0]);
    sel.addRange(range);
  }
createCodingArea ( text = '' , inline = false ) { const { range , sel } = store . state . selectionData ; const codingArea = document . createElement ( inline ? 'span' : 'div' ) ; codingArea . classList . add ( 'coding--editable' ) ; const createCodingLine = ( text , type ) => { const codingLine = document . createElement ( type ) ; codingLine . classList . add ( 'coding-line' ) ; codingLine . innerText = text ; codingArea . appendChild ( codingLine ) ; } ; if ( inline ) { createCodingLine ( text , 'span' ) ; } else { const codingLines = text === '' ? [ 'Enter Coding here...' ] : text . split ( '\n' ) ; for ( const codingLine of codingLines ) { createCodingLine ( codingLine , 'div' ) ; } } codingArea . setData ( 'language' , 'markup' ) ; range . insertNode ( codingArea ) ; sel . removeAllRanges ( ) ; range . setStartBefore ( codingArea . firstElementChild . childNodes [ 0 ] ) ; range . setEndAfter ( codingArea . lastElementChild . childNodes [ 0 ] ) ; sel . addRange ( range ) ; }
Creates a coding area element into editor
 @param text
 @param inline
Creates a coding area element into editor @param text @param inline
// select all coding lines