Package Exports

@nonfx/flow-code-editor
@nonfx/flow-code-editor/dist/flow-code-editor.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nonfx/flow-code-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Flow Code Editor

The Flow code editor is built on the Flow design framework (website / github) using Monaco Editor

Installation

1️⃣ Install flow code editor dependency

npm i --save @nonfx/flow-code-editor

Note: after installation, re-start your application.

2️⃣ Import flow-code-editor into your project

Paste the below snippet in your project and add your application startup/runtime code to it.

import "@nonfx/flow-core";
import "@nonfx/flow-code-editor";

3️⃣ For a typescript enabled project (optional)

Note: After adding, re-start your application. Make sure you are using version >4.5

For Vue 3: Copy paste below import types in your main.ts file.

import "@nonfx/flow-code-editor/dist/types/vue3";

For Vue 2

Copy paste below import types in your main.ts file.

import "@nonfx/flow-code-editor/dist/types/vue2";

For React

React: Include react type in tsconfig.json file like below.

"include": ["src", "./node_modules/@nonfx/flow-code-editor/dist/types/react.ts"]

Integration in Vite App

Add following code snippet in `vite.config.ts`

import * as fs from "fs";
import * as path from "path";

const copyDir = (src, dest, callback?: (er: Error) => void) => {
    const copy = (copySrc, copyDest) => {
        fs.readdir(copySrc, (err, list) => {
            if (err) {
                callback(err);
                return;
            }
            list.forEach(item => {
                const ss = path.resolve(copySrc, item);
                fs.stat(ss, (err, stat) => {
                    if (err) {
                        callback(err);
                    } else {
                        const curSrc = path.resolve(copySrc, item);
                        const curDest = path.resolve(copyDest, item);

                        if (stat.isFile()) {
                            fs.createReadStream(curSrc).pipe(fs.createWriteStream(curDest));
                        } else if (stat.isDirectory()) {
                            fs.mkdirSync(curDest, { recursive: true });
                            copy(curSrc, curDest);
                        }
                    }
                });
            });
        });
    };

    fs.access(dest, err => {
        if (err) {
            fs.mkdirSync(dest, { recursive: true });
        }
        copy(src, dest);
    });
};

copyDir("node_modules/@nonfx/flow-code-editor/dist/assets", "assets");

add specify `assets` folder in `assetsInclude` property.

For example

export default defineConfig({
    plugins: [vue()],
    base: "",
    // `assets` folder specified here 👇
    assetsInclude: ["assets"]
});

@nonfx/flow-code-editor