Suneditor - dialog + update/remove button

by radek

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SunEditor Custom Button Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/suneditor/dist/css/suneditor.min.css">
  <script src="https://cdn.jsdelivr.net/npm/suneditor/dist/suneditor.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/suneditor/src/lang/en.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/plugins/modules/dialog.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.min.js"></script>
  <style>
  .wrapper {
   z-index: 1000;
  }</style>
</head>
<body>
  <textarea id="ex_dialog"></textarea>
  <script>
  
  </script>
</body>
</html>

JavaScript

var customElement = 'a'


var plugin_dialog = {
    // @Required
    // plugin name
    name: 'customLink',

    // @Required
    // data display
    display: 'dialog',

    // @Required
    // add function - It is called only once when the plugin is first run.
    // This function generates HTML to append and register the event.
    // arguments - (core : core object, targetElement : clicked button element)
    add: function (core) {

        // If you are using a module, you must register the module using the "addModule" method.
        core.addModule([SUNEDITOR_MODULES.dialog]);

        // @Required
        // Registering a namespace for caching as a plugin name in the context object
        const context = core.context;
        context.customLink = {
            focusElement: null, // @Override // This element has focus when the dialog is opened.
            targetSelect: null,
            linkAnchorText: null,
            _linkAnchor: null
        };

        /** link dialog */
        let link_dialog = this.setDialog(core);
        context.customLink.modal = link_dialog;
        context.customLink.focusElement = link_dialog.querySelector('._se_link_url');
        context.customLink.linkAnchorText = link_dialog.querySelector('._se_link_text');
        context.customLink.targetSelect = link_dialog.querySelector('.se-input-select');

        /** link controller */
        let link_controller = this.setController_LinkButton(core);
        context.customLink.linkController = link_controller;
        context.customLink._linkAnchor = null;

        /** add event listeners */
        link_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core));
        link_controller.addEventListener('click', this.onClick_linkController.bind(core));

        /** append html */
        context.dialog.modal.appendChild(link_dialog);

        /** append controller */
        context.element.relative.appendChild(link_controller);

        /** empty memory */
 ...