React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Using legacyleap-doceditor

The legacyleap-doceditor provides a reusable React component (DocmostClient) for embedding the Docmost editor functionality into your application.

Installation

npm install legacyleap-doceditor
# or
yarn add legacyleap-doceditor

Peer Dependencies

This library requires react and react-dom as peer dependencies. You should have these installed in your project.

• react: ^18.3.1
• react-dom: ^18.3.1

Usage

To use the editor, import the DocmostClient component and provide a configuration object through its config prop.

import React from "react";
import { DocmostClient, DocmostRuntimeConfig } from "legacyleap-doceditor";
import "@mantine/core/styles.css"; // If not already included by your app, Mantine styles might be needed

// Define your runtime configuration
const docmostConfig: DocmostRuntimeConfig = {
  APP_URL: "http://localhost:3000", // Your application's base URL where the editor is hosted
  COLLAB_URL: "ws://localhost:3000", // WebSocket URL for collaboration features
  FILE_UPLOAD_SIZE_LIMIT: "10485760", // String representation of bytes, e.g., '10MB' or '10485760'
  DRAWIO_URL: "https://embed.diagrams.net", // URL for the Draw.io embedding
  CLOUD: "false", // String 'true' or 'false'
  SUBDOMAIN_HOST: "example.com", // Your main domain if using subdomains for workspaces
  BILLING_TRIAL_DAYS: "14", // String representation of trial days
};

function MyApp() {
  return (
    <DocmostClient config={docmostConfig}>
      {/* Your application's components that might interact with or contain the editor */}
      {/* For example, if DocmostClient provides routing or context for editor features: */}
      {/* <MyEditorPage /> */}
    </DocmostClient>
  );
}

export default MyApp;

Configuration (DocmostRuntimeConfig)

The config prop expects an object with the following structure (type DocmostRuntimeConfig):

| Key | Type | Required | Description | Example | | :----------------------- | :----- | :------- | :--------------------------------------------------------------------------- | :----------------------------- | | APP_URL | string | Yes | The base URL of the application where the editor is running. | 'http://localhost:3000' | | COLLAB_URL | string | Yes | The WebSocket URL for the collaboration server. | 'ws://localhost:3000/collab' | | FILE_UPLOAD_SIZE_LIMIT | string | No | Maximum file upload size in bytes (can also use units like '10MB'). | '10485760' | | DRAWIO_URL | string | No | URL for the Draw.io service if self-hosted, otherwise public. | 'https://embed.diagrams.net' | | CLOUD | string | No | Set to 'true' if running in a cloud environment, otherwise 'false'. | 'false' | | SUBDOMAIN_HOST | string | No | Main domain for subdomains if your application uses a multi-tenant approach. | 'example.com' | | BILLING_TRIAL_DAYS | string | No | Number of days for the billing trial period. | '14' |

Note: All values in the DocmostRuntimeConfig object should be strings. Boolean values (CLOUD) should be passed as 'true' or 'false'. Numerical values (FILE_UPLOAD_SIZE_LIMIT, BILLING_TRIAL_DAYS) should also be passed as strings.