mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-29 08:19:34 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel 2021-01-21 12:35:06 +01:00
parent 471f182112
commit a0e375bf1e
8 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Examples/Basic/index.spec.js → docs/src/demos/Examples/Default/index.spec.js
View File

@ -1,6 +1,6 @@
context('/examples/basic', () => {
context('/examples/default', () => {
before(() => {
cy.visit('/examples/basic')
cy.visit('/examples/default')
})
beforeEach(() => {

0
docs/src/demos/Examples/Basic/index.vue → docs/src/demos/Examples/Default/index.vue
View File

6
docs/src/docPages/api/nodes.md
View File

@ -11,13 +11,19 @@
| [BulletList](/api/nodes/bullet-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) |
| [CodeBlock](/api/nodes/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) |
| [Document](/api/nodes/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) |
| [Emoji](/api/nodes/emoji) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-emoji/) |
| [HardBreak](/api/nodes/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) |
| [Hashtag](/api/nodes/hashtag) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hashtag/) |
| [Heading](/api/nodes/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) |
| [HorizontalRule](/api/nodes/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
| [Image](/api/nodes/image) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/) |
| [ListItem](/api/nodes/list-item) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) |
| [Mention](/api/nodes/mention) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) |
| [OrderedList](/api/nodes/ordered-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/) |
| [Paragraph](/api/nodes/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) |
| [Table](/api/nodes/table) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table/) |
| [TableRow](/api/nodes/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) |
| [TableCell](/api/nodes/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) |
| [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) |
| [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) |
| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) |

13
docs/src/docPages/api/overview.md
View File

@ -9,3 +9,16 @@ The document is stored in a state. All changes are applied as transactions to th
### Extensions
Extensions add [nodes](/api/nodes), [marks](/api/marks) and/or [functionalities](/api/extensions) to the editor. A lot of those extensions bound their commands to common [keyboard shortcuts](/api/keyboard-shortcuts).
## Vocabulary
| Word | Description |
| ----------- | ------------------------------------------------------------------------ |
| schema | Configures the structure your content can have. |
| document | The actual content in your editor. |
| state | Everything to describe the current content and selection of your editor. |
| transaction | A change to the state (updated selection, content, …) |
| extension | Registeres new functionality. |
| node | Adds blocks, like heading, paragraph. |
| mark | Adds inline formatting, for example bold or italic. |
| command | Execute an action inside the editor, that somehow changes the state. |

3
docs/src/docPages/examples/basic.md → docs/src/docPages/examples/default.md
View File

@ -1,5 +1,4 @@
# Default text editor
Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
<demo name="Examples/Basic" />
<demo name="Examples/Default" />

12
docs/src/docPages/guide/store-content.md
View File

@ -72,12 +72,13 @@ Unfortunately, **tiptap doesn’t support Markdown as an input or output format*
* 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.
* tiptap’s strength is cutomization, that doesn’t work very well with Markdown
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/) and [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Maybe you can learn from them.
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’re 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.
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content. Also you’re free to let your content look like Markdown, for example add a `#` before an `<h1>` with CSS.
## Listening for changes
If you want to continuously store the updated content while people write, you can [hook into events](/api/events). Here is an example how that could look like:
@ -112,3 +113,10 @@ Import a lightweight implementation of `generateHTML()` from `@tiptap/core` if y
:::
<demo name="Api/Schema/GenerateHTML" highlight="6,43-48"/>
## Migration
If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly.
We’re about to go through a few cases to help with that, for example we provide a PHP package to convert HTML to a compatible JSON structure: [ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror).
Share your experiences with us! We’d like to add more information here.

5
docs/src/docPages/introduction.md
View File

@ -18,12 +18,14 @@ Create exactly the rich text editor you want out of customizable building blocks
## Features
**Headless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
**Framework-agnostic.** No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in React, Svelte and others.
**Framework-agnostic.** No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/guide/getting-started/react), Svelte and others.
**TypeScript.** tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
**Collaborative.** Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). Our production-grade setup requires less than 20 lines of code.
**Community.** Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
## Who uses tiptap?
- [GitLab](https://gitlab.com)
- [Statamic CMS](https://statamic.com)
@ -32,6 +34,7 @@ Create exactly the rich text editor you want out of customizable building blocks
- [Directus CMS](https://directus.io)
- [Nextcloud](https://apps.nextcloud.com/apps/text)
- [DocIQ](https://www.dociq.io)
- [ycode](https://www.ycode.com/)
- [Scrumpy](https://www.scrumpy.io)
- … and [many more](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)

4
docs/src/links.yaml
View File

@ -14,10 +14,10 @@
- title: Examples
link: /examples
redirect: /examples/basic
redirect: /examples/default
items:
- title: Default text editor
link: /examples/basic
link: /examples/default
- title: Collaborative editing
link: /examples/collaborative-editing
type: pro