ZingGrid - Emoji Column (Just Picker)

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Emojis</title>
  <script nonce="undefined" src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
  <!-- Will not work until Emoji Column has been added to ZingGrid -->
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: nullpx;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid editor-controls layout-controls spellcheck="false" data='[
        { "name": "Camdyn", "title": "DevRel", "icon": "🤠" }
      ]'>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="title"></zg-column>
      <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column>
      <!-- type-emoji-shortcode="shortcodeConverter" -->
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // References
    let picker = null;
    let oDOMInput = null;
    let zgRef = document.querySelector('zing-grid');
    const pickerOptions = {
      onEmojiSelect: handleChange
    };

    function handleChange(data) {
      // Set editor value to picker value
      let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart);
      let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd);
      oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`;
    }
    // Custom emoji picker
    let editor = {
      init($cell, editorField) {
        // Create ZGEditorRow input field
        oDOMInput = document.createElement('input');
        oDOMInput.type = 'text';
        oDOMInput.autoComplete = 'off';
        oDOMInput.ariaInvalid = false;
        editorField.appendChild(oDOMInput);
        // Unable to get position of `editorField` w/o setTimeout
        setTimeout(() => {
          // Different styles applied depending on editor type
          const editorType = zgRef.editor;
          let styles = null;
          if (editorType === 'inline') {
            // Determine position of inline field and place under
            const editorBCR = editorField.getBoundingClientRect();
            styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`;
          } else {
            // Placed under model field
            styles = `position: relative;`;
          }
          // Picker must be newly created every time else does not display all options after first edit
          picker = new EmojiMart.Picker(pickerOptions);
          // Styled to position under cell and make it placed outside and in front of grid
          picker.setAttribute('style', styles);
          // Placed in `editorField`, else navigating through picker submits editing changes
          editorField.appendChild(picker);
        }, 0);
      },
      onOpen($cell, editorField, mData) {
        if (!mData) {
          mData = editorField.value || '';
        }
        oDOMInput.value = String(mData);
      },
      onClose(editorField) {
        // Destroy picker
        editorField.removeChild(picker);
        delete picker;
        // Update editor value
        return editorField.querySelector('input').value;
      },
    };
    ZingGrid.registerEditor(editor, 'emojiPicker');
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Emojis</title>
  <script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
  <!-- Will not work until Emoji Column has been added to ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <zing-grid editor-controls layout-controls spellcheck="false" data='[
        { "name": "Camdyn", "title": "DevRel", "icon": "🤠" }
      ]'>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="title"></zg-column>
      <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column>
      <!-- type-emoji-shortcode="shortcodeConverter" -->
    </zg-colgroup>
  </zing-grid>
</body>

</html>

.zg-body {
  background: #e6e6e6;
}

// References
let picker = null;
let oDOMInput = null;
let zgRef = document.querySelector('zing-grid');
const pickerOptions = {
  onEmojiSelect: handleChange
};

function handleChange(data) {
  // Set editor value to picker value
  let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart);
  let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd);
  oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`;
}
// Custom emoji picker
let editor = {
  init($cell, editorField) {
    // Create ZGEditorRow input field
    oDOMInput = document.createElement('input');
    oDOMInput.type = 'text';
    oDOMInput.autoComplete = 'off';
    oDOMInput.ariaInvalid = false;
    editorField.appendChild(oDOMInput);
    // Unable to get position of `editorField` w/o setTimeout
    setTimeout(() => {
      // Different styles applied depending on editor type
      const editorType = zgRef.editor;
      let styles = null;
      if (editorType === 'inline') {
        // Determine position of inline field and place under
        const editorBCR = editorField.getBoundingClientRect();
        styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`;
      } else {
        // Placed under model field
        styles = `position: relative;`;
      }
      // Picker must be newly created every time else does not display all options after first edit
      picker = new EmojiMart.Picker(pickerOptions);
      // Styled to position under cell and make it placed outside and in front of grid
      picker.setAttribute('style', styles);
      // Placed in `editorField`, else navigating through picker submits editing changes
      editorField.appendChild(picker);
    }, 0);
  },
  onOpen($cell, editorField, mData) {
    if (!mData) {
      mData = editorField.value || '';
    }
    oDOMInput.value = String(mData);
  },
  onClose(editorField) {
    // Destroy picker
    editorField.removeChild(picker);
    delete picker;
    // Update editor value
    return editorField.querySelector('input').value;
  },
};
ZingGrid.registerEditor(editor, 'emojiPicker');