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
The Flow code editor is built on the Flow design framework (website / github) using Monaco Editor
yarn add @cldcvr/flow-code-editor
Note: after installation, re-start your application.
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"],
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
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"]
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");
For example
export default defineConfig({
plugins: [vue()],
base: "",
// `assets` folder specified here 👇
assetsInclude: ["assets"],
});
Details
- flow-code-editor
- ollionorg
- over 1 year ago
- MIT
- 24 dependencies
Assets
- flow-code-editor-0.1.0.tgz
Download activity
- Total downloads 15
- Last 30 days 0
- Last week 0
- Today 0