add-a-content-type-and-new-file.md

Recipe: add a content type & New File wizard

A content type lets the editor recognize a file (usually by extension) so it can pick the right editor and icon. A New File wizard entry lets users create that file from the UI.

Extension points: colibri.core.ContentTypeExtension and phasereditor2d.files.ui.dialogs.NewFileContentExtension Working examples: TodoModel.ts (the id), ExamplePlugin.ts (registration), NewTodoFileExtension.ts.

1. Define a content type id

export const CONTENT_TYPE_TODO = "myplugin.example.TodoContentType";

2. Map a file extension to it

reg.addExtension(new colibri.core.ContentTypeExtension(
    [new colibri.core.ContentTypeResolverByExtension(
        "myplugin.example.TodoContentTypeResolver",
        [["todo", CONTENT_TYPE_TODO]])],   // [extension, contentTypeId][]
    5));                                    // priority

That's enough for an editor registered against CONTENT_TYPE_TODO to open .todo files (see add-a-custom-editor).

3. Add a New File wizard entry

This base class lives in the files plugin, so it needs the bundled types/phasereditor2d.files.d.ts (already included and referenced from src/tsconfig.json).

namespace myplugin.example {

    import files = phasereditor2d.files;

    export class NewTodoFileExtension extends files.ui.dialogs.NewFileContentExtension {

        constructor() {
            super({
                dialogName: "Todo File",
                dialogIconDescriptor: colibri.ColibriPlugin.getInstance()
                    .getIconDescriptor(colibri.ICON_FILE),
                initialFileName: "tasks",
                fileExtension: "todo",
            });
        }

        getCreateFileContentFunc(): (args: files.ui.dialogs.ICreateFileContentArgs) => string {
            return () => JSON.stringify(new TodoModel().toJSON(), null, 4);
        }

        getInitialFileLocation() {
            // default to the folder of the most recent file of this content type
            return super.findInitialFileLocationBasedOnContentType(CONTENT_TYPE_TODO);
        }
    }
}

Register it:

reg.addExtension(new NewTodoFileExtension());

Now the entry appears in the Files view New... menu, the New File dialog (Ctrl+Alt+N), and the New File toolbar button. The created file opens automatically in the matching editor. This is the same mechanism the built-in Scene File and Asset Pack File wizards use.

Checklist

• Content type id is namespaced.
• ContentTypeExtension maps the extension to the id.
• NewFileContentExtension subclass registered (if you want the wizard).
• npm run build passes.