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 @ollion/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 "@ollion/flow-core";
import "@ollion/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 "@ollion/flow-code-editor/dist/types/vue3";

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

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

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

"include": ["src", "./node_modules/@ollion/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/@ollion/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"]
});