KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

text

★ 653 Open GitHub ↗

📑 Collaborative document editing using Markdown

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Nextcloud Text

[![REUSE status](https://api.reuse.software/badge/github.com/nextcloud/text)](https://api.reuse.software/info/github.com/nextcloud/text)
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/nextcloud/text/node.yml?branch=main)
[![Start contributing](https://img.shields.io/github/issues/nextcloud/text/good%20first%20issue?color=7057ff&label=Contribute)](https://github.com/nextcloud/text/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)

**📑 Collaborative document editing!**

![](https://raw.githubusercontent.com/nextcloud/text/main/img/screenshots/screenshot1.png)

## Features

- **📝 Simple focused writing:** No distractions, only the formatting you need.
- **🙋 Work together:** Share and collaborate with friends and colleagues, no matter if they use Nextcloud or not!
- **💾 Open format:** Files are saved as [Markdown](https://en.wikipedia.org/wiki/Markdown), so you can edit them from any other text app too.
- **✊ Strong foundation:** We use [🐈 tiptap](https://tiptap.dev) which is based on [🦉 ProseMirror](https://prosemirror.net) – huge thanks to them!
- **🧮 Math support:** Write mathematical formulas using LaTeX syntax with inline (`$E=mc^2$`) and display (`$$...$$`) math rendering powered by KaTeX.

Nextcloud Text is the default text editor since Nextcloud 17. To start editing just open an existing markdown or plaintext file or create a new one.

### Mathematical formulas

You can insert mathematical formulas using LaTeX syntax:

- **Inline math:** Wrap your formula with single dollar signs: `$E=mc^2$`
- **Display math (block):** Wrap your formula with double dollar signs on separate lines:
    ```
    $$
    \sum_{i=1}^n i = \frac{n(n+1)}{2}
    $$
    ```
    **Note:** When typing in the editor, create a soft line break (`Shift+Return`) to add lines within the formula block.

You can also:

- Select text and use the math buttons in the toolbar to convert it to a formula
- Click on existing formulas to edit them in a dialog
- Paste markdown with math formulas to have them automatically rendered

## Configuration

The rich workspaces in the file list can be disabled either by the users in the files app settings or globally by the admin with the following occ command:

```bash
occ config:app:set text workspace_available --value=0
```

The app can be configured to open files read-only by default. This setting is globally valid and can be set by the admin with the following command:

```bash
occ config:app:set text open_read_only_enabled --value=1
```

## 🏗 Development setup

This app requires the main branch of the [Viewer app](https://github.com/nextcloud/viewer) to be installed and enabled.
Follow its development setup and then continue here.

1. ☁ Clone this app into the `apps` folder of your Nextcloud: `git clone https://github.com/nextcloud/text.git`
2. 👩‍💻 In the folder of the app, run the command `make` to install dependencies and build the Javascript.
3. ✅ Enable the app through the app management of your Nextcloud
4. 🎉 Partytime! Help fix [some issues](https://github.com/nextcloud/text/issues) and [review pull requests](https://github.com/nextcloud/text/pulls) 👍

### Use hot module replacement via `vite serve`

To use the advantages of `vite serve` with hot module replacement (HMR) and not have to recompile the JS assets after each code change, do the following:

1. Configure your webserver to redirect requests to `/apps/text/` to the vite serve server.
   When using [nextcloud-docker-dev](https://github.com/juliusknorr/nextcloud-docker-dev), add the following snippet to `data/nginx/vhost.d/nextcloud.local` and restart the proxy container. You might have to replace `/apps/text/` with e.g. `/apps-extra/text/` depending on where the text app resides in your dev setup.
    ```
    location /apps/text/ {
        proxy_pass http://host.docker.internal:5173/apps/text/;
        # fallback to nextcloud server if vite serve doesn't answer
        error_page 502 = @fallback;
    }
    location @fallback {
        proxy_pass http://nextcloud.local;
    }
    ```
2. Run `npm run serve` to start the vite serve server. If text resides somewhere else than `/apps/text`, run e.g. `BASE=/apps-extra/text npm run serve`.

Afterwards all changes to the code will apply to the application in your browser automatically thanks to hot module replacement (HMR).

### 🧙 Advanced development stuff

To build the Javascript whenever you make changes, instead of the full `make` you can also run `npm run build`. Or run `npm run watch` to rebuild on every file save.

#### 🐞 Testing the app

Currently, this app uses three different kinds of tests:

For testing the backend (PHP) [Psalm](https://psalm.dev/) and [PHPUnit](https://phpunit.de/) are used,
you can run the testcases (placed in `tests/`) using the composer scripts `psalm` and `test:unit`.

For testing the frontend [jest](https://jestjs.io/) is used for unittests, whereas [cypress](https://www.cypress.io/) is used for end2end testing.
The unittests are also placed in `src/tests/`, the cypress tests are placed in `cypress/`.
You can run the tests using the package scripts `npm run test` (jest), and respective `npm run test:cypress` (cypress).

Please note the cypress tests require a nextcloud server running, the if no running server is detected a docker container will be started,
this requires the current user to be in the `docker` group.
Or you might set the `CYPRESS_baseUrl` environment variable for a custom nextcloud server.

##### Testing direct editing

The mobile apps open the text editor via a direct editing session. To test this in a browser, do the following:

```sh
curl --silent --insecure --request POST --url 'https://admin:admin@nextcloud.local/ocs/v2.php/apps/files/api/v1/directEditing/open?editorId=text&creatorId=textdocument&format=json' --header 'Content-Type: multipart/form-data' --header 'OCS-APIRequest: true' --form path=/test.md | jq -r '.ocs.data.url'
```

The URL that's returned can be used to open the direct editing view. It contains a one-time token that expires after being opened once.

#### Adding support for other mime types

- The mime type needs to be known by Nextcloud server (see https://github.com/nextcloud/server/pull/24488 for how this can be added)
- Once that is there, please open a pull request to add them to https://github.com/nextcloud/text/blob/12df66ffdd3d71cc696438e2e4ec60fa17b89a64/src/helpers/mime.js#L35-L61
- You can test them like other mime types in cypress/e2e/files.spec.js

## 🛠️ Integrate text in your app

## Load the editor

In order to load the editor in your app, you'll need to dispatch an event.

```php
use OCA\Text\Event\LoadEditor;

// ...

if (class_exists(LoadEditor::class)) {
	$this->eventDispatcher->dispatchTyped(new LoadEditor());
}
```

### Integrate a file editor

Make sure to check if OCA.Text is available as the Text app needs to be enabled. If you want your app to work without Text being installed, you will need to provide an editor fallback on your own.

```js
window.OCA.Text.createEditor({
	el: document.getElementById('my-editor-div'),
	fileId: 12345,
	filePath: '/Readme.md',
}).then((editor) => {
	// Once ready you can access the editor instance and call methods like:

editor.setContent('new content') // Beware: this will overwrite the content read from the source file
	editor.setReadOnly(true)
	editor.insertAtCursor('<h1>Heading</h1>')

// Make sure to destory the editor instance once you remove the dom element
	editor.destroy()
})
```

### Markdown based content editor

```js
window.OCA.Text.createEditor({
	el: document.getElementById('my-editor-div'),
	content: 'initial content',
}).then((editor) => {
	// Once ready you can access the editor instance and call methods like:

editor.setContent('new content')
	editor.setReadOnly(true)
	editor.insertAtCursor('<h1>Heading</h1>')

// Make sure to destory the editor instance once you remove the dom element
	editor.destroy()
})
```

text

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README