docs: update content

This commit is contained in:
Hans Pagel
2021-04-15 21:48:19 +02:00
parent 680ce9b7aa
commit accceccd09
77 changed files with 240 additions and 264 deletions

View File

@@ -1,7 +1,7 @@
# Accessibility
:::pro Fund the development ♥
We need your support to maintain, update, support and develop tiptap 2. If youre waiting for progress here, [become a sponsor and fund our work](/sponsor).
We need your support to maintain, update, support and develop tiptap. If youre waiting for progress here, [become a sponsor and fund our work](/sponsor).
:::
## toc

View File

@@ -216,7 +216,7 @@ Yes, its magic. As already mentioned, that is all based on the fantastic Y.js
Our collaborative editing backend handles the syncing, authorization, persistence and scaling. Lets go through a few common use cases here!
:::warning Request early access
Our plug & play collaboration backend hocuspocus is still work in progress. If you want to give it a try, [request early access](https://hocuspocus.dev/).
Our plug & play collaboration backend hocuspocus is still work in progress. If you want to give it a try, [request early access](https://www.hocuspocus.dev).
:::
### The document name

View File

@@ -111,7 +111,7 @@ This section needs some work. Do you know what else needs to be taken into accou
:::
### Icons
Most editor menus use icons for their buttons. In some of our demos, we use the open-source icon set [Remix Icon](https://remixicon.com/), thats free to use. But its totally up to you what you use. Here are a few icon sets you can consider:
Most editor menus use icons for their buttons. In some of our demos, we use the open source icon set [Remix Icon](https://remixicon.com/), thats free to use. But its totally up to you what you use. Here are a few icon sets you can consider:
* [Remix Icon](https://remixicon.com/#editor)
* [Font Awesome](https://fontawesome.com/icons?c=editors)

View File

@@ -3,7 +3,7 @@
## toc
## Introduction
Using frameworks like Vue or React can feel too complex, if youre used to work without those two. Good news: You can use plain JavaScript in your node views. There is just a little bit you need to know, but lets go through this one by one.
Using frameworks like Vue or React can feel too complex, if youre used to work without those two. Good news: You can use Vanilla JavaScript in your node views. There is just a little bit you need to know, but lets go through this one by one.
## Render a node view with JavaScript
Here is what you need to do to render a node view inside your editor:

View File

@@ -3,7 +3,7 @@
## toc
## Introduction
Using plain JavaScript can feel complex if you are used to work in React. Good news: You can use regular React components in your node views, too. There is just a little bit you need to know, but lets go through this one by one.
Using Vanilla JavaScript can feel complex if you are used to work in React. Good news: You can use regular React components in your node views, too. There is just a little bit you need to know, but lets go through this one by one.
## Render a React component
Here is what you need to do to render React components inside your editor:

View File

@@ -3,7 +3,7 @@
## toc
## Introduction
Using plain JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but lets go through this one by one.
Using Vanilla JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but lets go through this one by one.
## Render a Vue component
Here is what you need to do to render Vue components inside your editor:

View File

@@ -67,7 +67,7 @@ Use this interactive example to fiddle around:
<demo name="Guide/Content/ExportHTML" hide-source/>
### Option 3: Y.js
Our editor has amazing support for Y.js, which is amazing to add [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing).
Our editor has top notch support for Y.js, which is amazing to add features like [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing).
Internally, Y.js stores a history of all changes. That can be in the browser, on a server, synced with other connected clients, or on a USB stick. But, its important to know that Y.js needs those stored changes. A simple JSON document is not enough to merge changes.
@@ -79,13 +79,13 @@ That said, its amazing and were about to provide an amazing backend, that
Unfortunately, **tiptap doesnt support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
* Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
* There are enough packages to convert HTML to Markdown and vice-versa.
* Markdown standards vary.
* tiptaps strength is cutomization, that doesnt work very well with Markdown.
* There are enough packages to convert HTML to Markdown and vice-versa.
You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
If you still think you need Markdown, ProseMirror has an [example on how to deal with Markdown](https://prosemirror.net/examples/markdown/), [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Maybe you can learn from them. Or if youre looking for a really good Markdown editor, try [CodeMirror](https://codemirror.net/).
If you still think you need Markdown, ProseMirror has an [example on how to deal with Markdown](https://prosemirror.net/examples/markdown/), [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Maybe you can learn from them. Or if you are looking for a really good Markdown editor, try [CodeMirror](https://codemirror.net/).
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content. Also youre free to let your content look like Markdown, for example add a `#` before an `<h1>` with CSS.
@@ -127,4 +127,4 @@ Were about to go through a few cases to help with that, for example we provid
[Share your experiences with us!](mailto:humans@tiptap.dev) Wed like to add more information here.
## Security
Theres no reason to use on or the other because of security concerns. If someone wants to send malicious content to your server, it doesnt matter if its JSON or HTML. You should always validate user input.
There is no reason to use on or the other because of security concerns. If someone wants to send malicious content to your server, it doesnt matter if its JSON or HTML. It doesnt even matter if youre using tiptap or not. You should always validate user input.

View File

@@ -5,7 +5,7 @@
## Introduction
The whole tiptap is code base is written in TypeScript. If you havent heard of it or never used it, no worries. You dont have to.
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesnt exist in plain JavaScript. Its actually removed before running in the browser, but this step the compilation is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, thats very valuable. It means well get notified of lot of bugs, before shipping code to you.
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesnt exist in Vanilla JavaScript. Its actually removed before running in the browser, but this step the compilation is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, thats very valuable. It means well get notified of lot of bugs, before shipping code to you.
**Anyway, if you dont use TypeScript in your project, thats fine.** You will still be able to use tiptap and nevertheless get a nice autocomplete for the tiptap API (if your editor supports it, but most do).