Giter VIP home page Giter VIP logo

nextcloud-text's Introduction

Nextcloud Text

GitHub Workflow Status Start contributing

๐Ÿ“‘ Collaborative document editing!

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, so you can edit them from any other text app too.
  • โœŠ Strong foundation: We use ๐Ÿˆ tiptap which is based on ๐Ÿฆ‰ ProseMirror โ€“ huge thanks to them!

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.

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:

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

๐Ÿ— Development setup

This app requires the main branch of the Viewer app 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 and review pull requests ๐Ÿ‘

๐Ÿง™ 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 and PHPUnit are used, you can run the testcases (placed in tests/) using the composer scripts psalm and test:unit.

For testing the frontend jest is used for unittests, whereas cypress 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.

Adding support for other mime types

๐Ÿ› ๏ธ Integrate text in your app

Load the editor

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

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.

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

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()
})

nextcloud-text's People

Contributors

azul avatar blizzz avatar christophwurst avatar danxuliu avatar dependabot-preview[bot] avatar dependabot[bot] avatar elzody avatar github-actions[bot] avatar jancborchardt avatar julien-nc avatar juliushaertl avatar luka-nextcloud avatar marcelklehr avatar max-nextcloud avatar mejo- avatar morrisjobke avatar nextcloud-bot avatar nextcloud-command avatar nickvergessen avatar npmbuildbot[bot] avatar pvince81 avatar pytal avatar raudius avatar renovate[bot] avatar rullzer avatar shgkme avatar skjnldsv avatar susnux avatar szaimen avatar valdnet avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.