/// import { TelemetryClient } from '@kano/telemetry/index.js'; import Toolbox from './toolbox.js'; import { Logger } from '../log/index.js'; import { Dialogs } from './dialogs/index.js'; import { Keybindings } from './keybindings/index.js'; import '../../elements/kano-app-editor/kano-app-editor.js'; import { EditorOrPlayer } from './editor-or-player.js'; import { Output } from '../output/output.js'; import { ActivityBar } from './activity-bar.js'; import { WorkspaceToolbar } from './workspace/toolbar.js'; import { EditorPartsManager } from '../parts/editor.js'; import { SourceEditor } from '../source-editor/source-editor.js'; import { Plugin } from './plugin.js'; import EditorProfile from './profile.js'; import { CreationCustomPreviewProvider } from '../preview/creation-preview-provider.js'; import { WorkspaceViewProvider } from './workspace/index.js'; import { IEditorWidget } from './widget/widget.js'; import { QueryEngine, IQueryResult } from './selector/selector.js'; import { ContentWidgets } from './widget/content-widgets.js'; import { KanoAppEditor } from '../../elements/kano-app-editor/kano-app-editor.js'; import { FileUpload } from './file-upload.js'; import './loader/kcode.js'; declare global { interface Window { Kano: { Code: any; }; } } export interface IEditorOptions { sourceType?: string; mediaPath?: string; blockly?: any; BLOCKLY_MEDIA?: string; } export interface ICreationBundle { } /** * [[include:Editor.md]] * A full Kano Code Editor with customizable Workspace and Output */ export declare class Editor extends EditorOrPlayer { config: any; /** * Logger for this instance. Can configure log level on a per Editor scope */ logger: Logger; /** * The DOM root of the editor. An kano-app-editor custom element */ domNode: KanoAppEditor; /** * The type of source for this editor. Defines what type of source editor will be provided to the user */ sourceType: string; /** * The output being driven by this editor */ output: Output; /** * A TelemetryClient instance receiving every telemetry events from the editor. If you create a plugin, you can mount your own client */ telemetry: TelemetryClient; /** * The instance of the source editor */ sourceEditor: SourceEditor; /** * The toolbar in the workspace */ workspaceToolbar: WorkspaceToolbar; /** * Dialogs API for this editor */ dialogs: Dialogs; /** * Controls ley bindings for the editor. */ keybindings: Keybindings; /** * Handles the API definitions and generate the right toolbox for each source editor */ toolbox: Toolbox; /** * The parts editor manager handles the creation of parts in the editor */ parts: EditorPartsManager; /** * The file upload plugin manages files droppped onto the editor */ fileUpload: FileUpload; /** * API for the editor's activity bar */ activityBar: ActivityBar; /** * Whether the editor is part of a DOM tree right now */ injected: boolean; private _mediaPath; private _queuedApp; /** * The provided Workspace, or a default one */ workspaceProvider?: WorkspaceViewProvider; /** * The provided Editor profile, or a default one */ profile?: EditorProfile; creationPreviewProvider?: CreationCustomPreviewProvider; queryEngine: QueryEngine; private selectorAliases; /** * Apis to control the content widgets displayed in the editor */ contentWidgets?: ContentWidgets; private _onDidReset; /** * Fired when the user resets the editor * @event */ readonly onDidReset: import("@kano/common/index.js").IEvent; private _onDidLoad; /** * Fired after an app has beed loaded * @event */ readonly onDidLoad: import("@kano/common/index.js").IEvent; private _onDidInject; /** * Fired after the editor has been injected in a DOM tree * @event */ readonly onDidInject: import("@kano/common/index.js").IEvent; private _onDidLayoutChange; /** * Fired when the internal layout of the editor changed * @event */ readonly onDidLayoutChange: import("@kano/common/index.js").IEvent; private _onRequestPlaySound; /** * Fired when the an editor element requests a sound be played * [[include:play-ui-sounds.md]] * @event */ readonly onRequestPlaySound: import("@kano/common/index.js").IEvent; /** * Creates a new Editor. This editor can then be injected into any web page * @param opts Options for the editor */ constructor(opts?: IEditorOptions); private _setupMediaPath; /** * Returns the absolute path to the provided relative resource * @param path A path relative to the media directory */ asAbsoluteMediaPath(path?: string): string; /** * Adds a plugin to this editor, plugins have access to lifecycle steps and * customization APIs to tailor the coding experience to your needs * @param plugin The plugin to add */ addPlugin(plugin: Plugin): void; setInputDisabled(isInputDisabled: boolean): void; protected appendSourceEditor(): void; protected ensureProfile(): void; /** * Injectes the editor into a host element * @param element The host element to inject the editor into * @param before Another element before which the editor should be injected */ inject(element?: HTMLElement, before?: HTMLElement): void; /** * Gets rid of this editor. Free any allocated resources and remove the editor from the DOM if it was injected */ dispose(): void; /** * Load a previously saved app * @param app A JSON object representation of an app */ load(app: any): void; /** * Resets the editor. Removes every part, reset the source to the default source * @param trigger Fire the reset event or not. Useful when we want to reset just before a load without triggering the onDidReset event */ reset(trigger?: boolean): void; /** * Update the generated code and restart the output * @param content the generated code */ setCode(content?: string): void; /** * Restarts the app */ restart(): void; /** * Generate a creation from the curretn app */ exportCreation(): { source: string; code: string; }; /** * Generate a JSON object representation of the current app */ export(): { source: string; code: string; }; /** * Downloads a .kcode file with the exported app */ exportToDisk(fileName?: string): void; /** * Prompts the user to load a .kcode from its disk and loads it */ importFromDisk(): void; createCreationPreview(externalOutput?: Output): Blob | Promise; createCreationDisplay(blob: Blob): void; save(): { source: string; code: string; }; getSource(): string; getCode(): string; getViewport(): any; getWorkspace(): any; getBlocklyWorkspace(): any; registerProfile(profile: EditorProfile): void; registerWorkspaceViewProvider(provider: WorkspaceViewProvider): void; appendWorkspaceView(): void; readonly workspaceView: WorkspaceViewProvider | undefined; readonly root: ShadowRoot | null; resolvePosition(result: IQueryResult): DOMRect | ClientRect; /** * Adds a widget to the editor. * [[include:addContentWidget.md]] * @param widget An editor widget */ addContentWidget(widget: IEditorWidget): void; /** * Update the position of a previously added widget * @param widget An editor widget */ layoutContentWidget(widget: IEditorWidget): void; /** * Removes a previously added widget * @param widget An editor widget */ removeContentWidget(widget: IEditorWidget): void; /** * Uses the [[QueryEngine]] to query for an element using that selector and returns the matching HTMLElement * @param selector An element selector */ queryElement(selector: string): HTMLElement | SVGElement | null; /** * Uses the [[QueryEngine]] to query for an element using that selector and returns the matching x, y position * @param selector An element selector */ queryPosition(selector: string): { x: number; y: number; isBlock: boolean; } | null; /** * Uses the [[QueryEngine]] to query for an element using that selector and returns the result * @param selector An element selector */ querySelector(selector: string): IQueryResult | null; /** * Adds a method to the editor for develpoment convenience */ exposeMethod(name: string, method: Function): void; registerAlias(alias: string, target: string): import("@kano/common/index.js").IDisposable; playUISound(name: string): void; private registerTagHandlers; } export default Editor;