index.tsx

Overview

This file defines a React functional component SetMetaModal used to display and edit JSON metadata associated with a document within a modal dialog. It leverages Ant Design (antd) components for UI elements such as the modal and form, the Monaco Editor for a rich JSON editing experience, and integrates localization support through react-i18next. The component validates the JSON input before submission, sanitizes tooltip content to prevent XSS, and exposes callbacks to handle modal visibility and form submission.

Detailed Component Documentation

SetMetaModal Component

function SetMetaModal(props: IModalProps<any> & { initialMetaData?: IDocumentInfo['meta_fields'] }): JSX.Element

Purpose

Renders a modal dialog containing a form with a JSON editor to view and modify the metadata (meta_fields) of a document. It validates the JSON input and returns the parsed metadata on confirmation.

Props

• visible: boolean
  Controls the visibility of the modal.

• hideModal: () => void
  Callback function to close the modal.

• onOk: (meta: string) => void
  Callback invoked when the form is successfully submitted with valid JSON metadata. Receives the JSON string as a parameter.

• initialMetaData?: IDocumentInfo['meta_fields']
  Optional initial metadata to pre-fill the JSON editor. This is typically an object representing the document's metadata fields.

Behavior & Lifecycle

• Initialization:
  On mount or when initialMetaData changes, the component sets the form field "meta" with a pretty-printed JSON string representation of the metadata.

• Validation:
  The form includes a custom validator to ensure the input is valid JSON. If parsing fails, an error message is shown.

• Submission:
  On clicking OK, form validation occurs. If valid, the onOk callback is called with the JSON string.

• Security:
  Tooltip content is sanitized using DOMPurify before injecting into the DOM to prevent Cross-Site Scripting (XSS).

UI Elements

• Modal:
  Displays the dialog with a title localized as 'knowledgeDetails.setMetaData'.

• Form:
  Contains a single Form.Item labeled with 'knowledgeDetails.metaData' and a tooltip with additional metadata tips.

• Monaco Editor:
  Embedded in the form as a JSON editor with a dark theme and fixed height of 200 pixels.

Usage Example

import React, { useState } from 'react';
import { SetMetaModal } from './index';

function DocumentMetaEditor() {
  const [isModalVisible, setModalVisible] = useState(false);
  const [documentMeta, setDocumentMeta] = useState({ author: 'John Doe', tags: ['example'] });

  const handleSaveMeta = (metaJson: string) => {
    const metaObject = JSON.parse(metaJson);
    setDocumentMeta(metaObject);
    setModalVisible(false);
  };

  return (
    <>
      <button onClick={() => setModalVisible(true)}>Edit Metadata</button>
      <SetMetaModal
        visible={isModalVisible}
        hideModal={() => setModalVisible(false)}
        onOk={handleSaveMeta}
        initialMetaData={documentMeta}
      />
    </>
  );
}

Important Implementation Details

• Monaco Editor Loader Configuration:
  The Monaco Editor loader is configured at the top-level to load the VS code editor assets from /vs path, ensuring proper editor initialization.

• JSON Validation:
  Uses a custom asynchronous validator within Ant Design's form rules. It tries to parse the input string as JSON and rejects the validation promise if parsing fails. This provides immediate user feedback.

• Sanitization:
  The tooltip content is injected as HTML after sanitization with DOMPurify to avoid potential XSS attacks from localized strings.

• Localization:
  Text strings like titles, labels, and error messages are localized using react-i18next's t function, allowing multilingual support.

Interaction with Other System Components

• Interfaces

  • IModalProps and IDocumentInfo are imported from application-specific interface definitions (@/interfaces/common and @/interfaces/database/document), tying this modal to the document data model and common modal behaviors.

• UI Frameworks

  • Ant Design (antd) provides the modal and form components, facilitating consistent UI and form validation patterns.

• Editor Integration

  • Monaco Editor (@monaco-editor/react) provides a sophisticated JSON editor experience embedded inside the modal.

• Localization

  • react-i18next integration ensures that all user-facing text is translated according to the active language.

• Security

  • DOMPurify sanitizes HTML content to prevent injection of malicious scripts in tooltips.

This component is typically used in document management or knowledge base applications where users need to view or modify JSON metadata in a safe and user-friendly way.

Mermaid Component Diagram

componentDiagram
    component SetMetaModal {
        +visible: boolean
        +hideModal(): void
        +onOk(meta: string): void
        +initialMetaData?: object
        +handleOk(): Promise<void>
        +form: FormInstance
    }

    component Modal {
        +title: string
        +open: boolean
        +onOk(): void
        +onCancel(): void
    }

    component Form {
        +useForm(): FormInstance
        +validateFields(): Promise<object>
        +setFieldValue(name: string, value: any): void
    }

    component MonacoEditor {
        +height: number
        +defaultLanguage: string
        +theme: string
    }

    SetMetaModal --> Modal : renders
    Modal --> Form : contains
    Form --> MonacoEditor : contains Form.Item with Editor
    SetMetaModal ..> useTranslation : uses for localization
    SetMetaModal ..> DOMPurify : uses for tooltip sanitization

Summary

The index.tsx file provides a localized, validated, and secure modal component for editing JSON metadata with a rich editor interface. It is well integrated with the application's data model and UI frameworks, providing a reusable and user-friendly tool for managing document metadata.