Skip to content

Plugins never anticipate or handle being removed from a code-input element (by the template being changed) #226

Description

@WebCoder49

Steps to reproduce:

<!DOCTYPE html>
<html>
    <body>
        <!--For convenience, this demo uses files from JSDelivr CDN; for more privacy and security download and host them yourself.-->
        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.css">

        <!--Import-->
        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/indent.min.js"></script>
        
        <script>
            // Programatically opening the dialogs, to integrate with your user interface
            function goToLine() {
                goToLinePlugin.showPrompt(document.querySelector("code-input"));
            }
            codeInput.registerTemplate("no-indent", new codeInput.Template((elem) => { elem.style.background='lightblue'; }, false, false, false, []));
            codeInput.registerTemplate("indent", new codeInput.Template((elem) => { elem.style.background='pink'; }, false, false, false, [new codeInput.plugins.Indent()]));
        </script>
        <button onclick="document.querySelector('code-input').setAttribute('template', 'no-indent');">Switch to 'no-indent'</button>
        <code-input style="outline: 2px solid grey;" template="indent"><textarea data-code-input-fallback></textarea></code-input>
  </body>
</html>
  • Click on the 'Switch to no-indent' button.
  • Enter the code-input element and press the Tab key.

This changes the code-input element from the indent template which sets a pink background and tab-for-indent using the Indent plugin, to the no-indent template which sets a blue background and has no Indent plugin.

Expected outcome:

  1. The background goes blue, because the no-indent template has been loaded.
  2. Tab switches focus out of the code-input element, because the current no-indent template does not have the Indent plugin.

Actual outcome:

  1. The background goes blue, because the no-indent template has been loaded.
  2. Tab carries out indentation, because practically the Indent plugin was not unloaded, and in fact plugins cannot ever be unloaded: they cannot define what to do on unload (i.e. unregister event handlers they previously registered). Check the codeInput.Plugin API - there is no "unload" function.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:coreA bug/feature for the core code-input.js/code-input.css filesarea:existing-pluginA bug/feature for an existing plugin in the plugins folder of code-input.bugSomething isn't workinghelp wantedExtra attention is neededpriority:medium

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions