Document System

/**
 * The options used to initialize a document widget factory.
 * This interface is intended to be used by mime renderer extensions
 * to define a document opener that uses its renderer factory.
 */
interface IDocumentWidgetFactoryOptions {
  /** The name of the widget to display in dialogs */
  readonly name: string;
  /** The label of the widget to display in dialogs. If not given, name is used instead. */
  readonly label?: string;
  /** The name of the document model type */
  readonly modelName?: string;
  /** The primary file type of the widget */
  readonly primaryFileType: string;
  /** The file types the widget can view */
  readonly fileTypes: ReadonlyArray<string>;
  /** The file types for which the factory should be the default */
  readonly defaultFor?: ReadonlyArray<string>;
  /**
   * The file types for which the factory should be the default for rendering,
   * if that is different than the default factory (which may be for editing)
   * If undefined, then it will fall back on the default file type.
   */
  readonly defaultRendered?: ReadonlyArray<string>;
  /** The application language translator */
  readonly translator?: ITranslator;
  /** A function returning a list of toolbar items to add to the toolbar */
  readonly toolbarFactory?: (widget?: Widget) => IToolbarItem[];
}

import { IRenderMime } from "@jupyterlab/rendermime-interfaces";
import { Widget } from "@lumino/widgets";

// Custom toolbar creation
function createCustomToolbar(widget?: Widget): IRenderMime.IToolbarItem[] {
  const refreshButton = new Widget();
  refreshButton.node.innerHTML = '<button class="jp-Button">Refresh</button>';
  refreshButton.node.onclick = () => {
    // Refresh logic
    console.log('Refreshing document...');
  };

  const exportButton = new Widget();
  exportButton.node.innerHTML = '<button class="jp-Button">Export</button>';
  
  return [
    {
      name: 'refresh',
      widget: refreshButton
    },
    {
      name: 'export', 
      widget: exportButton
    }
  ];
}

// Document widget factory options
const documentOptions: IRenderMime.IDocumentWidgetFactoryOptions = {
  name: 'Data Visualization Viewer',
  label: 'Data Viz',
  modelName: 'data-viz-model',
  
  // File type configuration
  primaryFileType: 'data-viz',
  fileTypes: ['data-viz', 'data-viz-alt'],
  defaultFor: ['data-viz'],
  defaultRendered: ['data-viz', 'data-viz-alt'],
  
  // Custom toolbar
  toolbarFactory: createCustomToolbar,
  
  // Internationalization
  translator: myTranslator
};

// Use in extension
const extension: IRenderMime.IExtension = {
  id: 'my-org:data-viz-renderer',
  rendererFactory: new DataVizRendererFactory(),
  documentWidgetFactoryOptions: documentOptions
};

/**
 * A file type to associate with the renderer
 */
interface IFileType {
  /** The name of the file type */
  readonly name: string;
  /** The mime types associated the file type */
  readonly mimeTypes: ReadonlyArray<string>;
  /** The extensions of the file type (e.g. ".txt"). Can be a compound extension (e.g. ".table.json"). */
  readonly extensions: ReadonlyArray<string>;
  /** An optional display name for the file type */
  readonly displayName?: string;
  /** An optional pattern for a file name (e.g. "^Dockerfile$") */
  readonly pattern?: string;
  /**
   * The icon for the file type. Can either be a string containing the name
   * of an existing icon, or an object with {name, svgstr} fields, where
   * svgstr is a string containing the raw contents of an svg file.
   */
  readonly icon?: LabIcon.IResolvable;
  /** The icon class name for the file type */
  readonly iconClass?: string;
  /** The icon label for the file type */
  readonly iconLabel?: string;
  /** The file format for the file type ('text', 'base64', or 'json') */
  readonly fileFormat?: string | null;
}

import { IRenderMime } from "@jupyterlab/rendermime-interfaces";

// Simple text-based file type
const csvFileType: IRenderMime.IFileType = {
  name: 'csv-custom',
  mimeTypes: ['text/csv', 'application/csv'],
  extensions: ['.csv'],
  displayName: 'CSV Data File',
  fileFormat: 'text',
  icon: 'table',
  iconLabel: 'CSV'
};

// Complex binary file type with custom icon
const customBinaryType: IRenderMime.IFileType = {
  name: 'custom-binary',
  mimeTypes: ['application/x-custom-binary'],
  extensions: ['.cbin', '.custom'],
  displayName: 'Custom Binary Format',
  fileFormat: 'base64',
  
  // Custom SVG icon
  icon: {
    name: 'custom-binary:icon',
    svgstr: `<svg width="16" height="16" viewBox="0 0 16 16">
      <rect width="16" height="16" fill="#4CAF50"/>
      <text x="8" y="12" text-anchor="middle" fill="white" font-size="10">CB</text>
    </svg>`
  }
};

// Pattern-based file type (like Dockerfile)
const configFileType: IRenderMime.IFileType = {
  name: 'app-config',
  mimeTypes: ['application/json'],
  extensions: ['.json'],
  pattern: '^app\\.config\\.json$',
  displayName: 'Application Configuration',
  fileFormat: 'json',
  iconClass: 'jp-MaterialIcon jp-SettingsIcon'
};

// Multiple extensions with compound names
const dataTableType: IRenderMime.IFileType = {
  name: 'data-table',
  mimeTypes: ['application/x-data-table'],
  extensions: ['.table.json', '.data.json', '.tbl'],
  displayName: 'Data Table',
  fileFormat: 'json',
  icon: 'spreadsheet'
};

// Register file types with extension
const extension: IRenderMime.IExtension = {
  id: 'my-org:multi-format-renderer',
  rendererFactory: new MultiFormatRendererFactory(),
  
  fileTypes: [
    csvFileType,
    customBinaryType,
    configFileType,
    dataTableType
  ],
  
  documentWidgetFactoryOptions: [
    {
      name: 'CSV Viewer',
      primaryFileType: 'csv-custom',
      fileTypes: ['csv-custom']
    },
    {
      name: 'Binary Data Viewer', 
      primaryFileType: 'custom-binary',
      fileTypes: ['custom-binary'],
      defaultFor: ['custom-binary']
    },
    {
      name: 'Config Editor',
      primaryFileType: 'app-config', 
      fileTypes: ['app-config'],
      pattern: '^app\\.config\\.json$'
    }
  ]
};

// Different file format types
const textFileType: IRenderMime.IFileType = {
  name: 'custom-text',
  mimeTypes: ['text/x-custom'],
  extensions: ['.ctxt'],
  fileFormat: 'text' // Read as text string
};

const binaryFileType: IRenderMime.IFileType = {
  name: 'custom-binary',
  mimeTypes: ['application/x-custom-binary'],
  extensions: ['.cbin'],
  fileFormat: 'base64' // Read as base64-encoded string
};

const jsonFileType: IRenderMime.IFileType = {
  name: 'custom-json',
  mimeTypes: ['application/x-custom'],
  extensions: ['.cjson'],
  fileFormat: 'json' // Parse as JSON
};

// String icon reference
const stringIconType: IRenderMime.IFileType = {
  name: 'document-type',
  mimeTypes: ['application/document'],
  extensions: ['.doc'],
  icon: 'document' // Reference to existing icon
};

// CSS class icon
const cssIconType: IRenderMime.IFileType = {
  name: 'spreadsheet-type',
  mimeTypes: ['application/spreadsheet'],
  extensions: ['.sheet'],
  iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
};

// Custom SVG icon
const customIconType: IRenderMime.IFileType = {
  name: 'special-type',
  mimeTypes: ['application/special'],
  extensions: ['.spec'],
  icon: {
    name: 'special:icon',
    svgstr: '<svg>...</svg>' // Full SVG content
  }
};

// From other capabilities
interface ITranslator {
  readonly languageCode: string;
  load(domain: string): TranslationBundle;
}

interface IToolbarItem {
  name: string;
  widget: Widget;
}

namespace LabIcon {
  interface IIcon {
    readonly name: string;
    svgstr: string;
  }
  
  interface IRenderer {
    readonly render: (container: HTMLElement, options?: any) => void;
    readonly unrender?: (container: HTMLElement, options?: any) => void;
  }
  
  type IResolvable = string | (IIcon & Partial<IRenderer>);
}

// From @lumino/widgets
class Widget {
  // Widget implementation from Lumino
}