> For the complete documentation index, see [llms.txt](https://docs.layeronecloud.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.layeronecloud.com/platform/code-editor.md).

# Self-hosted File Manager editor

Source project: `LayerOne` (migrated from `static/vendor/codemirror/README.md`). Run commands from the code checkout and directory specified below, not from this documentation repository.

This directory contains the browser ESM bundle used by the hosting File Manager. It makes no external requests and is not an IDE, code runner, or save endpoint. Load `editor.js` only when opening the editor. Django and production deployment do not need Node.js, npm, or a CDN; the generated files are normal static assets.

The maintained [CodeMirror 6 packages](https://codemirror.net/) are MIT licensed. Full license texts for every bundled dependency are in `LICENSES.txt`. `provenance.json` records exact package versions, official npm registry tarball URLs and integrity hashes, source/lockfile hashes, and the artifact SHA-256/size. All direct dependencies and the build tool are pinned in `scripts/code_editor/package.json`; the lockfile also pins transitives.

## Rebuild <a href="#rebuild" id="rebuild"></a>

From the repository root, with Node.js 20 or newer and npm:

```sh
npm ci --prefix scripts/code_editor --ignore-scripts --no-audit --no-fund
npm run build --prefix scripts/code_editor
```

`node_modules` is repository-ignored and scoped to that build directory. No npm install scripts are executed. esbuild's platform-specific optional package is required, so do not use `--omit=optional`. Its npm package is used only to build; it is not included in the browser artifact. The build rejects external module imports and bundled packages without official-registry lockfile integrity or license text. It generates `editor.js`, `LICENSES.txt`, and `provenance.json`. Changes to `editor.mjs` or dependencies must be followed by a rebuild and review of all three artifacts. Two builds from the same source/lockfile produce the same artifacts; provenance deliberately contains no timestamp or machine path.

For intentional dependency updates, select exact upstream versions in `package.json`, regenerate the lockfile with npm using `--ignore-scripts`, then rebuild and repeat the browser interaction tests. No deployment build step is added by this directory.

## Integration contract <a href="#integration-contract" id="integration-contract"></a>

```js
const {createEditor, modeForPath} = await import(localStaticModuleUrl);
const editor = createEditor({
  parent: editorElement,
  content: sourceText,
  path: accountRelativePath,
  onChange(value) {},
  onCursor({line, column}) {},
});
```

The return value provides `getValue()`, `setValue(value)`, `focus()`, `destroy()`, `find()`, and `setReadOnly(boolean)`. `onChange` receives strings for user/editor edits. `setValue` is silent and adds no undo entry; it does not create a fresh editor history. Destroy and recreate the view to open a different file. Cursor coordinates are one-based; columns count UTF-16 units. `modeForPath` returns a display label. Syntax is selected by the filename extension at creation, with plain text for unknown extensions.

Supported modes: PHP, HTML, CSS, JavaScript, TypeScript, JSON, Python, shell, SQL, XML, and YAML. Lightweight stream parsers provide syntax highlighting and indentation rather than semantic analysis. JSX/TSX use JavaScript/TypeScript highlighting without a dedicated JSX grammar; embedded CSS/JavaScript in HTML and surrounding HTML in PHP remain in the outer syntax rather than loading additional nested parsers. PHP uses the official PHP parser because no PHP stream mode is published. Its unused HTML/JavaScript dependencies are excluded from the browser bundle. The bundle contains all selected parsers, but each editor activates only its selected language. It also includes line numbers, undo/redo, search/replace, matching brackets, active-line and selection-match highlighting, and two-space indentation. Uniform CRLF files retain CRLF through `getValue()`; mixed endings normalize to LF, like a textarea. File text enters CodeMirror as text, never as HTML or executable source.

The parent File Manager owns save shortcuts, dirty state, operation status, server requests, and the textarea fallback. Do not show save success merely because the editor content changed. The outer UI must document **Escape, then Tab to move focus out of the editor** when Tab indentation is enabled, following [CodeMirror's accessibility guidance](https://codemirror.net/examples/tab/). The editable element is labelled `File contents`.

CodeMirror includes its base styling in JavaScript. The local bundle supplies only height, inherited typography, and scrolling layout; application CSS owns the surrounding design. If a future Content Security Policy requires nonces for injected style elements, integrate `EditorView.cspNonce` rather than relaxing the policy. See [upstream styling](https://codemirror.net/examples/styling/) and [bundling documentation](https://codemirror.net/examples/bundle/).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.layeronecloud.com/platform/code-editor.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.