API for plugins

[AlexRMU]

You can create an opportunity to add plugins that interact with the internal API and utilities, change components and their styles, add new functionality.
It is also possible to transfer some of the methods, parameters, and internal functions of the editor to plugins that are installed by default.
See how it is implemented here:

• https://editorjs.io/
• https://vitejs.dev/guide/api-plugin.html
• https://www.fastify.io/docs/latest/Reference/Plugins/

This will help those who use the editor and want to customize it to their needs.
It can also help in the development of the editor itself, if it grows a lot in the future.

[josdejong]

Thanks for your suggestion. The editor is already quite customizable, and it can be interesting indeed to create a plugin API on top of that.

[AlexRMU]

1. Export components and utilities so that they can be used directly (it seems to have already been done)

import { TreeMode } from "svelte-jsoneditor/components/modes/treemode";
import { getColorCSS } from "svelte-jsoneditor/utils/typeUtils";

2. Expand the api of the instance so that the user can better configure it

3. Based on this api, сreate a api for plugins so that the user can easily add them

type MaybePromise<T> = T | Promise<T>;
type MaybeArray<T> = T | T[];

/* call for all important elements */
type ElementClassName = (target: HTMLElement, default_value: string) => void | string;
type PathClassName = (path: JSONPath, default_value: string, context: { value: unknown }) => void | string;
type ComponentClassNameContext = {
    /* component and part or all of its props */
    menu: { items: MenuItem[]; mode: "tree" | "text" | "table"; modal: boolean };
    tree_mode: Pick<GetProps<TreeMode>, "onError" | "onChange" | "onChangeMode" | "onSelect">;
    tree_mode_json_value: GetProps<TreeModeJSONValue>;
};

/* call for all components */
type ComponentClassName = <ComponentName extends keyof ComponentClassNameContext>(
    component: ComponentName,
    default_value: string,
    context: ComponentClassNameContext[ComponentName],
) => void | string;

/* all components */
type ComponentsMap = {
    menu: MenuComponent;
    tree_mode: TreeMode;
    tree_mode_json_value: TreeModeJSONValue;
};
/* change the component and its props */
type CustomComponent<Name extends keyof ComponentsMap = keyof ComponentsMap> = (
    name: Name,
    default_component: ComponentsMap[Name],
    props: GetProps<ComponentsMap[Name]>,
) => void | SvelteComponent | Snippet;

type Hooks = {
    element_class_name: ElementClassName;
    path_class_name: PathClassName;
    component_class_name: ComponentClassName;
    custom_component: CustomComponent;
};

type PluginObj = Partial<{
    name: string;
    hooks: Partial<Hooks>;
}>;
type Plugin1 = MaybePromise<MaybeArray<PluginObj>>;
type Plugin2<PluginConfig = any> = (config?: PluginConfig) => Plugin1;
type Plugin = Plugin1 | Plugin2;
type Plugins = Plugin[];

[AlexRMU]

blocked by #373

[AlexRMU]

Does anyone need this at all?

[AlexRMU]

Look at each component and think: if you were a user, would you want to change it? How and how much?

[josdejong]

If there is concrete need for it, we can open up internal components like TreeMode. Before we do, we will have to have a look at the API that the components to make sure it is usable on it's own.