Tutorial: Datei-Editor

// JsonEditorModel.ts
import { EditorDocumentModel } from '@5minds/processcube_studio_sdk';
 
export class JsonEditorModel extends EditorDocumentModel {
  private content: string = '';
  private parsedJson: any = null;
  private parseError: string | null = null;
 
  async onEditorDocumentModelDidRegister(): Promise<void> {
    // Datei laden
    const uri = this.getUri();
    const fileContent = await this.studio.files.load(uri);
    this.content = fileContent;
    this.tryParseJson();
    this.updateOriginalAndCurrentData(this.content, this.content);
  }
 
  getContent(): string {
    return this.content;
  }
 
  getParsedJson(): any {
    return this.parsedJson;
  }
 
  getParseError(): string | null {
    return this.parseError;
  }
 
  setContent(newContent: string): void {
    this.content = newContent;
    this.tryParseJson();
    this.updateCurrentData(this.content);
    this.emit('change');
  }
 
  onEditorDocumentWillSave(): void {
    // Daten werden über FileHandlingService geschrieben
  }
 
  onEditorDocumentDidSave(): void {
    this.updateOriginalAndCurrentData(this.content, this.content);
  }
 
  private tryParseJson(): void {
    try {
      this.parsedJson = JSON.parse(this.content);
      this.parseError = null;
    } catch (error) {
      this.parseError = (error as Error).message;
    }
  }
}

// JsonEditorRenderer.tsx
import React, { useState, useEffect } from 'react';
import { EditorDocumentRendererProps, MonacoEditor } from '@5minds/processcube_studio_sdk';
import { JsonEditorModel } from './JsonEditorModel';
 
export function JsonEditorRenderer(props: EditorDocumentRendererProps): JSX.Element {
  const model = props.editorDocumentModel as JsonEditorModel;
  const [content, setContent] = useState(model.getContent());
  const [error, setError] = useState(model.getParseError());
 
  useEffect(() => {
    const handler = () => {
      setContent(model.getContent());
      setError(model.getParseError());
    };
    model.on('change', handler);
    return () => { model.off('change', handler); };
  }, [model]);
 
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      {error && (
        <div style={{
          padding: '8px 12px',
          backgroundColor: 'var(--error-background)',
          color: 'var(--error-foreground)',
          fontSize: '12px',
        }}>
          JSON-Fehler: {error}
        </div>
      )}
      <div style={{ flex: 1 }}>
        <MonacoEditor
          value={content}
          language="json"
          onChange={(newValue) => model.setContent(newValue)}
        />
      </div>
    </div>
  );
}

// index.ts
import { Studio } from '@5minds/processcube_studio_sdk';
import { JsonEditorModel } from './JsonEditorModel';
import { JsonEditorRenderer } from './JsonEditorRenderer';
 
export function onLoad(studio: Studio): void {
  // Dokumenttyp für .json-Dateien registrieren
  studio.editors.registerDocumentType('json-editor', {
    uriMatch: /\.json$/,                       // Alle .json-Dateien
    modelKey: 'JsonEditorModel',
    modelConstructor: JsonEditorModel,
    rendererKey: 'JsonEditorRenderer',
    rendererConstructor: JsonEditorRenderer,
    icon: 'json-editor/icon',
  });
 
  // Icon registrieren
  studio.icons.registerIcons({
    'json-editor/icon': 'fad fa-brackets-curly',
  });
 
  // .json-Dateien im Datei-Explorer anzeigen
  studio.solution.registerDefaultIncludedFiles(['**/*.json']);
 
  // Factory für neue .json-Dateien
  studio.commands.register(
    'std.solution.newFile.json',
    (filename: string, localFilePath: string) => {
      return JSON.stringify(
        { beschreibung: 'Neue Datei', erstellt: new Date().toISOString() },
        null,
        2,
      );
    },
    () => studio.solution.hasOpenSolution(),
  );
}