Skip to content

Setting invalid template name on already-registered code-input element should be treated more graciously #227

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>
            codeInput.registerTemplate("real", new codeInput.Template((elem) => {}, false, false, false, [new codeInput.plugins.Indent()]));
        </script>
        <button onclick="document.querySelector('code-input').setAttribute('template', 'nonexistent');">Switch to nonexistent template</button>
        <button onclick="document.querySelector('code-input').setAttribute('template', 'real');">Switch to real template</button>
        <button onclick='codeInput.registerTemplate("nonexistent", new codeInput.Template((elem) => {}, false, false, false, [new codeInput.plugins.Indent()]));'>Register nonexistent template</button>
        <code-input style="outline: 2px solid grey;" template="real"><textarea data-code-input-fallback></textarea></code-input>
  </body>
</html>

This code-input element is at first properly registered under the "real" template. The "nonexistent" template is initially unregistered.

  1. Click "Switch to nonexistent template" (this is an erroneous action that breaks the invariant of a correct code-input element so code-input.js can technically do anything from now on. Nevertheless, we should be kind to the user.)
  2. Type in the code-input element.
  3. Click "Register nonexistent template"

Expected outcome:

  • After step 3, the code-input element should become usable again, using the newly-registered template called "nonexistent" template. This could be similar to the fallback textarea which would be shown if the "real" template initially held by the code-input element had never been registered.
  • After step 2, we should gracefully show the user the code-input element is using an unregistered template.

Actual outcome:

  • The code-input element breaks enough in response to step 2 that it is still not usable after step 3 (registering the template)
  • After step 3, the code-input's highlighted element stops responding to editing in the textarea, and a very large number of errors are logged in the console.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:coreA bug/feature for the core code-input.js/code-input.css filesbugSomething 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