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

flow-code-editor 0.1.0

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

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

yarn add @cldcvr/flow-code-editor

Note: after installation, re-start your application.


2️⃣ Import styles/CSS

For Vue JS: Paste the below snippet after the closing <template> tag in your App.vue file

<style>
 @import "@cldcvr/flow-code-editor/dist/style.css";
</style> 
For React

React: Paste the below snippet in src/index.tsx or index.jsx file

import "@cldcvr/flow-code-editor/dist/style.css";
For Angular

Angular: Add css file path in angular.json in styles property array.

"styles": ["@cldcvr/flow-code-editor/dist/style.css"],

3️⃣ 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


4️⃣ 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-0.1.0.tgz

Download activity

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