diff --git a/babel.config.js b/babel.config.js index ba993da55..016cb1861 100644 --- a/babel.config.js +++ b/babel.config.js @@ -3,6 +3,7 @@ module.exports = { '@babel/preset-env', ], plugins: [ + '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining', ], } diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue index fd9895a38..5fe494f4b 100644 --- a/docs/src/demos/Examples/Basic/index.vue +++ b/docs/src/demos/Examples/Basic/index.vue @@ -89,21 +89,30 @@ export default { Hi there,

- this is a very basic example of tiptap. + this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the bullet lists:

- 
body { display: none; }
+

+ Isn’t that great? But wait, there’s more. Let’s try a code block: +

+ 
body { display: none; }
+

+ I know, I know, it’s impressive. Give it a try and click a little bit around. But don’t forget to check the other examples too. +

- It's amazing 👏 + Wow, that’s amazing. Good work, boy! 👏
- – mom + — Mom
`, }) diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js index 657878a12..746605c00 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.spec.js +++ b/docs/src/demos/Extensions/CodeBlock/index.spec.js @@ -69,6 +69,16 @@ context('/api/extensions/code-block', () => { }) }) + it('should parse the language from a HTML code block', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('
body { display: none; }
') + + cy.get('.ProseMirror') + .find('pre>code.language-css') + .should('have.length', 1) + }) + }) + it('should make a code block for js', () => { cy.get('.ProseMirror').then(([{ editor }]) => { editor.clearContent() diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md index 7f58eff61..6608c5214 100644 --- a/docs/src/docPages/api/extensions/code-block.md +++ b/docs/src/docPages/api/extensions/code-block.md @@ -17,9 +17,10 @@ yarn add @tiptap/extension-code-block ``` ## Settings -| Option | Type | Default | Description | -| ------ | ------ | ------- | -------------------------------------------- | -| class | string | – | Add a custom class to the rendered HTML tag. | +| Option | Type | Default | Description | +| ------------------- | ------ | --------- | ---------------------------------------------------------------- | +| class | string | – | Add a custom class to the rendered HTML tag. | +| languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/examples.md b/docs/src/docPages/examples.md index df635b4e6..555e143ec 100644 --- a/docs/src/docPages/examples.md +++ b/docs/src/docPages/examples.md @@ -1 +1,9 @@ # Examples + +We put together a few examples to show the capabilities of tiptap, but keep in mind: tiptap is renderless and highly customizable. Everything you see can be changed, modified, combined or remixed. Feel free to copy the code to your project and change it to your liking. + +A few examples show what you’d probably expect from a text editor anyway: [Basic](/examples/basic), [Links](/examples/links), [History](/examples/history), [Read-only](/examples/read-only), [Export HTML or JSON](/examples/export-html-or-json). + +Some examples show how you can improve the user experience: [Markdown shortcuts](/examples/markdown-shortcuts). + +Or they show advanced use cases, like the [Collaborative editing](/examples/collaborative-editing) example, which is basically tiptap in multiplayer mode. diff --git a/docs/src/docPages/guide/getting-started.md b/docs/src/docPages/guide/getting-started.md index f7133ef58..4fa8dffa1 100644 --- a/docs/src/docPages/guide/getting-started.md +++ b/docs/src/docPages/guide/getting-started.md @@ -7,10 +7,10 @@ tiptap is framework-agnostic and works with Vue.js and React. It even works with We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project: ```bash -# Install Vue.js adapter with npm +# Install the Vue.js adapter with npm npm install @tiptap/vue @tiptap/vue-starter-kit -# Or: Install Vue.js adapter with Yarn +# Or: Install the Vue.js adapter with Yarn yarn add @tiptap/vue @tiptap/vue-starter-kit ``` @@ -21,8 +21,8 @@ Create a new Vue component (you can call it ``) and add the following -::: warning Using with Nuxt.js -If you are using Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. +::: warning Nuxt.js +If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. ::: Congrats! You’ve got it! 🎉 Let’s start to configure your editor in the next step. diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md index a94c533e6..fb20f3a48 100644 --- a/docs/src/docPages/guide/store-content.md +++ b/docs/src/docPages/guide/store-content.md @@ -83,4 +83,4 @@ You should really consider to work with HTML or JSON to store your content, they If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap to work with Markdown. Their code is open source, so maybe you can learn from them. -That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisk**` to make your text bold for example. \ No newline at end of file +That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example. diff --git a/docs/src/docPages/overview/contributing.md b/docs/src/docPages/overview/contributing.md index 8bc641322..1f024d29e 100644 --- a/docs/src/docPages/overview/contributing.md +++ b/docs/src/docPages/overview/contributing.md @@ -1,18 +1,20 @@ # Contributing -Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution: ## Table of Contents -## Examples -* Improved documentation, e. g. fixing typos, new sections, further explanation …) +## Introduction +Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution: + +## Welcome examples +* Improve the documentation, e. g. fix a typo, add a section * New features for existing extensions, e. g. a new option * New extensions, which don’t require changes to the core or other core extensions * Well explained, non-breaking changes to the core -## Code style -There is a eslint config, that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request. Make sure it’s passing, before sending a pull request. +## Our code style +There is an eslint config that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request, too. Make sure it’s passing, before sending a pull request. -## Testing -All your pull requests will automatically run all our existing tests. Make sure that they all pass. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`. +## Testing for errors +Your pull request will automatically execute all our existing tests. Make sure that they all pass, before sending a pull request. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`. Any further questions? Create a new issue or discussion in the repository. We’ll get back to you. diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index cde3de7a0..57fc588cc 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -1,8 +1,10 @@ # Installation -You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow. ## Table of Contents +## Introduction +You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow. + ## Option 1: Vanilla JavaScript Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here. @@ -14,11 +16,6 @@ npm install @tiptap/core @tiptap/starter-kit yarn add @tiptap/core @tiptap/starter-kit ``` -| Package | Description | -| ---------------------------------------------------------------------------- | -------------------------- | -| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | -| [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions | - Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap: ```js @@ -33,7 +30,7 @@ new Editor({ ``` ## Option 2: Vue.js -To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. +To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. ```bash # With npm @@ -43,16 +40,14 @@ npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit ``` -| Package | Description | -| -------------------------------------------------------------------------------- | --------------------------------------------- | -| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | -| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js | -| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions wrapped for Vue.js | - Create a new component and add the following content to get a basic version of tiptap: +::: warning Nuxt.js +If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. +::: +