Skip to content
This repository has been archived by the owner on Jul 31, 2024. It is now read-only.

flow-code-editor 1.0.1

Install from the command line:
Learn more about npm packages
$ npm install @ollionorg/flow-code-editor@1.0.1
Install via package.json:
"@ollionorg/flow-code-editor": "1.0.1"

About this version

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 @cldcvr/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.

Note: This is required to register Flow elements error-free. We achieve this by importing all flow packages asynchronously and then starting up your application.

For Vue JS: Paste the below snippet in your project, for src/main.ts or main.js

import("@cldcvr/flow-core").then(async () => {
	await import("@cldcvr/flow-code-editor");
	//add your application startup/runtime code here **
});
For React

Paste the below snippet in your project, for src/main.ts

import("@cldcvr/flow-core").then(async () => {
	await import("@cldcvr/flow-code-editor");
	//add your application startup/runtime code here **
});
For Angular

Paste the below snippet in your project, for src/index.tsx or index.jsx


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 "@cldcvr/flow-code-editor/dist/types/vue3";
For Vue 2

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

import "@cldcvr/flow-code-editor/dist/types/vue2";
For React

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

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

Details

Assets

  • flow-code-editor-1.0.1.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all