or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

activity-events.mdassets.mdcode-generation.mdcomponent-metadata.mddrag-drop.mdeditor-config.mdindex.mdmodels.mdplugins.mdschemas.mdshell-api.mdshell-enums.mdvalue-types.md
tile.json

editor-config.mddocs/

Editor Configuration

Type-safe configuration system for the low-code editor including plugins, themes, lifecycle hooks, and UI components.

Capabilities

Editor Configuration

Main configuration interface for setting up the low-code editor.

/**
 * Main editor configuration interface
 */
interface EditorConfig {
  /** Skeleton framework configuration */
  skeleton?: SkeletonConfig;
  /** Theme configuration */
  theme?: ThemeConfig;
  /** Plugin configurations */
  plugins?: PluginsConfig;
  /** Editor hooks */
  hooks?: HooksConfig;
  /** Keyboard shortcuts */
  shortCuts?: ShortCutsConfig;
  /** Utility functions */
  utils?: UtilsConfig;
  /** Global constants */  
  constants?: ConstantsConfig;
  /** Lifecycle hooks */
  lifeCycles?: LifeCyclesConfig;
  /** Internationalization settings */
  i18n?: I18nConfig;
}

Usage Examples:

import { EditorConfig } from "@alilc/lowcode-types";

const editorConfig: EditorConfig = {
  skeleton: {
    config: {
      package: "@alilc/lowcode-skeleton",
      version: "1.0.0"
    }
  },
  plugins: {
    "toolbar": [
      {
        pluginKey: "logo",
        type: "skeleton",
        props: {
          align: "left",
          icon: "logo",
          title: "Logo"
        }
      }
    ]
  },
  theme: {
    fusion: {
      package: "@alifd/theme-lowcode",
      version: "1.0.0"
    }
  }
};

Skeleton Configuration

Configuration for the editor's skeleton framework.

/**
 * Skeleton framework configuration
 */
interface SkeletonConfig {
  /** NPM package configuration */
  config: IPublicTypeNpmInfo;
  /** Additional properties */
  props?: Record<string, unknown>;
  /** Configuration handler function */
  handler?: (config: EditorConfig) => EditorConfig;
}

Plugin Configuration

Configuration system for editor plugins.

/**
 * Plugin configuration collection
 */
interface PluginsConfig {
  [area: string]: PluginConfig[];
}

/**
 * Individual plugin configuration
 */
interface PluginConfig {
  /** Unique plugin identifier */
  pluginKey: string;
  /** Plugin type */
  type: string;
  /** Plugin properties */
  props: {
    /** Plugin icon */
    icon?: string;
    /** Plugin title */
    title?: string;
    /** Plugin width */
    width?: number;
    /** Plugin height */
    height?: number;
    /** Whether plugin is visible */
    visible?: boolean;
    /** Whether plugin is disabled */
    disabled?: boolean;
    /** Whether plugin is marked/highlighted */
    marked?: boolean;
    /** Plugin alignment */
    align?: 'left' | 'right' | 'top' | 'bottom';
    /** Click handler */
    onClick?: () => void;
    /** Dialog properties */
    dialogProps?: Record<string, unknown>;
    /** Balloon properties */
    balloonProps?: Record<string, unknown>;
    /** Panel properties */
    panelProps?: Record<string, unknown>;
    /** Link properties */
    linkProps?: Record<string, unknown>;
  };
  /** Plugin NPM configuration */
  config?: IPublicTypeNpmInfo;
  /** Additional plugin properties */
  pluginProps?: Record<string, unknown>;
}

Usage Examples:

import { PluginsConfig, PluginConfig } from "@alilc/lowcode-types";

const pluginsConfig: PluginsConfig = {
  "toolbar": [
    {
      pluginKey: "save",
      type: "skeleton",
      props: {
        align: "right",
        icon: "save",
        title: "Save",
        onClick: () => console.log("Save clicked")
      }
    },
    {
      pluginKey: "preview",
      type: "skeleton", 
      props: {
        align: "right",
        icon: "preview",
        title: "Preview"
      }
    }
  ],
  "leftPanel": [
    {
      pluginKey: "components",
      type: "panel",
      props: {
        title: "Components",
        width: 280
      }
    }
  ]
};

Theme Configuration

Theme system configuration for the editor.

/**
 * Theme configuration
 */
interface ThemeConfig {
  /** Fusion theme configuration */
  fusion?: FusionTheme;
}

/**
 * Fusion theme specification
 */
interface FusionTheme {
  /** Theme package name */
  package: string;
  /** Theme version */
  version: string;
}

Hook Configuration

Editor lifecycle hooks configuration.

/**
 * Editor hooks configuration
 */
type HooksConfig = HookConfig[];

/**
 * Individual hook configuration
 */
interface HookConfig {
  /** Event message to listen for */
  message: string;
  /** Hook type - 'on' for repeating, 'once' for one-time */
  type: 'on' | 'once';
  /** Hook handler function */
  handler: (this: IPublicModelEditor, editor: IPublicModelEditor, ...args: any[]) => void;
}

Usage Examples:

import { HooksConfig } from "@alilc/lowcode-types";

const hooksConfig: HooksConfig = [
  {
    message: "skeleton.add",
    type: "on",
    handler: function(editor, ...args) {
      console.log("Skeleton item added:", args);
    }
  },
  {
    message: "project.open",
    type: "once", 
    handler: function(editor, project) {
      console.log("Project opened:", project);
    }
  }
];

Shortcut Configuration

Keyboard shortcut configuration for the editor.

/**
 * Keyboard shortcuts configuration
 */
type ShortCutsConfig = ShortCutConfig[];

/**
 * Individual shortcut configuration
 */
interface ShortCutConfig {
  /** Keyboard combination (e.g. 'cmd+s', 'ctrl+z') */
  keyboard: string;
  /** Shortcut handler function */
  handler: (editor: IPublicModelEditor, ev: Event, keymaster: any) => void;
}

Utility Configuration

Utility functions configuration for the editor.

/**
 * Utility functions configuration
 */
type UtilsConfig = UtilConfig[];

/**
 * Individual utility configuration  
 */
interface UtilConfig {
  /** Utility name */
  name: string;
  /** Utility type */
  type: 'npm' | 'function';
  /** Utility content - NPM info or function */
  content: IPublicTypeNpmInfo | ((...args: []) => any);
}

Lifecycle Configuration

Editor lifecycle configuration.

/**
 * Editor lifecycle configuration
 */
interface LifeCyclesConfig {
  /** Initialization hook */
  init?: (editor: IPublicModelEditor) => any;
  /** Destruction hook */  
  destroy?: (editor: IPublicModelEditor) => any;
}

Internationalization Configuration

i18n configuration for the editor.

/**
 * Internationalization configuration
 */
interface I18nConfig {
  /** Chinese Simplified messages */
  'zh-CN'?: I18nMessages;
  /** Chinese Traditional messages */
  'zh-TW'?: I18nMessages;
  /** English messages */
  'en-US'?: I18nMessages;
  /** Japanese messages */  
  'ja-JP'?: I18nMessages;
}

/**
 * i18n message mapping
 */
interface I18nMessages {
  [key: string]: string;
}

/**
 * Supported locale types
 */
type LocaleType = 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP';

/**
 * i18n function type
 */
type I18nFunction = (key: string, params: any) => string;

Plugin Runtime Types

Runtime types for plugin system.

/**
 * Plugin component props
 */
interface PluginProps {
  /** Editor instance */
  editor?: IPublicModelEditor;
  /** Plugin configuration */
  config: PluginConfig;
  /** Additional properties */
  [key: string]: any;
}

/**
 * Plugin component with lifecycle methods
 */
type Plugin = ReactNode & {
  /** Open method */
  open?: () => boolean | undefined | Promise<any>;
  /** Close method */
  close?: () => boolean | undefined | Promise<any>;
};

/**
 * Higher-order component plugin
 */
type HOCPlugin = ReactNode & {
  /** Async open method */
  open: () => Promise<any>;
  /** Async close method */
  close: () => Promise<any>;
};

/**
 * Plugin class component
 */
type PluginClass = ComponentType<PluginProps> & {
  /** Initialization method */
  init?: (editor: IPublicModelEditor) => void;
  /** Default props */
  defaultProps?: {
    locale?: LocaleType;
    messages?: I18nMessages;
  };
};

/**
 * Plugin status tracking
 */
interface PluginStatus {
  /** Whether plugin is disabled */
  disabled?: boolean;
  /** Whether plugin is visible */
  visible?: boolean;
  /** Whether plugin is marked/highlighted */
  marked?: boolean;
  /** Whether plugin is locked */
  locked?: boolean;
}

This configuration system provides complete type safety for setting up and customizing the low-code editor environment.