CW Editor

This is a wrapper for the Monaco Editor, which is a browser-based code editor. It is a component that can be used in any web application. It is based on the Monaco Editor. The Monaco Editor is the code editor that powers Visual Studio Code.

This was created to be used in courses delivered by CodeWorks, but can be used in any web application. It is a simple wrapper that allows you to easily add a code editor to your web application.

It even supports loading files directly from github, or any other URL that returns an array of files in the following format.

[
  {
    "name": "filename.ext",
    "content": "file content"
  }
]

You can customize the editor by passing in options to the <Editor /> component.

Installation

npm install cw-editor

Usage

<script setup>
import { Editor } from 'cw-editor'

</script>

<template>
  <Editor src="" />
</template>

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | src | String | "" | The URL to load the files from | | files | Array | [] | An array of files to load into the editor | | projectName | String | "localstorage-key" | saves and loads from localstorage | | defaultFiles | Array | ['readme.md'] | Files to show in the file explorer | | hiddenFiles | Array | [] | Files to hide from the file explorer | | sizes | Array | [10, 70, 30] | The sizes of the file explorer, editor, and output window |

Events

| Name | Description | | --- | --- | | save | Emitted when the user saves a file | | change | Emitted when the user changes the file |