Custom tool with custom tag name

[blocknotes]

First: I like ContentTools very much, thank you for this nice component :)

I want to create a button that inserts a "a-test" tag, output example: <a-test>Just a test</a-test>

Problem: my new tool works but the initial content with the "a-test" tag is not editable / ignored / not recognized (in the DOM the classes set are "ce-element ce-element--type-static"...). Is there a whitelist of tags somewhere?

<div data-editable='' data-name='main-content'>
  <p>Just some random content...</p>
  <a-test>Just a test</a-test>
  <h1>H1...</h1>
</div>

var TestTool = (function (superClass) {
  extend(TestTool, superClass);
  function TestTool() {
    return TestTool.__super__.constructor.apply(this, arguments);
  }
  ContentTools.ToolShelf.stow(TestTool, 'a-test');
  TestTool.label = 'A test';
  TestTool.icon = 'heading';
  TestTool.tagName = 'a-test';
  return TestTool;
})(ContentTools.Tools.Heading);
// Add my tool
ContentTools.DEFAULT_TOOLS[0].push('a-test');

[anthonyjb]

Hi @blocknotes,

You need to add a tag to the list of tags recognised tags for say the Text element in ContentEdit, e.g:

ContentEdit.TagNames.get().register(ContentEdit.Text, 'a-test')

[blocknotes]

Works. Thank you @anthonyjb