replace renderless with headless

This commit is contained in:
Hans Pagel 2020-11-13 11:04:31 +01:00
parent 813575850c
commit bb9e159642
8 changed files with 12 additions and 12 deletions

View File

@ -2,7 +2,7 @@
# tiptap 2 (Preview!)
A renderless and extendable rich-text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror), which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
A headless and extendable rich-text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror), which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
<!-- [![Version](https://img.shields.io/npm/v/tiptap.svg?label=version)](https://www.npmjs.com/package/tiptap)
[![Downloads](https://img.shields.io/npm/dm/tiptap.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
@ -21,8 +21,8 @@ Were looking for your feedback to improve tiptap 2 before the first public re
## Why we built tiptap
We were looking for a text editor for [Vue.js](https://github.com/vuejs/vue) and found some solutions that didnt really satisfy us. An editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called [Slate.js](https://github.com/ianstormtaylor/slate), which impresses with its modularity. We came across [ProseMirror](https://github.com/prosemirror) and decided to build on it. ProseMirror is a toolkit for building rich-text editors that are already in use at many well-known companies such as *Atlassian* or *New York Times*.
### What does `renderless` mean?
With renderless components you'll have (almost) full control over markup and styling. We dont want to tell you what a menu should look like or where it should be rendered in the DOM. Thats all up to you. There is also a [great article about renderless components](https://adamwathan.me/renderless-components-in-vuejs/) by Adam Wathan.
### What does `headless` mean?
With headless components you'll have (almost) full control over markup and styling. We dont want to tell you what a menu should look like or where it should be rendered in the DOM. Thats all up to you. There is also a [great article about headless components](https://adamwathan.me/headless-components-in-vuejs/) by Adam Wathan.
### How is the data stored under the hood?
You can save your data as a raw `HTML` string or can get a `JSON`-serializable representation of your document. And of course, you can also pass `HTML` or `JSON` content back to the editor.

View File

@ -53,7 +53,7 @@ export default {
mounted() {
this.editor = new Editor({
content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and headless. You can easily add custom nodes as Vue components.</p>',
extensions: [
Document(),
Paragraph(),

View File

@ -1,7 +1,7 @@
# Dropcursor
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged over the editor.
Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
## Installation
```bash

View File

@ -1,7 +1,7 @@
# Gapcursor
This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that dont allow regular selection. For example, after a table at the end of a document.
Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
## Installation
```bash

View File

@ -1,5 +1,5 @@
# Link
The Link extension adds support for `<a>` tags to the editor. The extension is renderless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like.

View File

@ -1,3 +1,3 @@
# Links
<demo name="Examples/Links" highlight="3-8,19,38,55" />
<demo name="Examples/Links" highlight="3-8,19,38,55-59" />

View File

@ -3,7 +3,7 @@
## toc
## Introduction
tiptap is renderless, that doesnt mean there is no styling provided. You can decided how your editor should look like.
tiptap is headless, that means there is no styling provided. That also means, you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.
## Option 1: Style the plain HTML
The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:

View File

@ -1,5 +1,5 @@
---
title: Renderless rich-text editor
title: Headless rich-text editor
---
:::error Dont try this at home
@ -15,13 +15,13 @@ Nothing here is production-ready, dont use it anywhere.
<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
## Features
**Renderless.** We dont tell you what a menu should look like or where it should be rendered in the DOM. Thats why tiptap is renderless and comes without any CSS. You are in full control over markup and styling.
**Headless.** We dont tell you what a menu should look like or where it should be rendered in the DOM. Thats why tiptap is headless and comes without any CSS. You are in full control over markup and styling.
**Framework-agnostic.** We dont care what framework you use. tiptap is ready to be used with plain JavaScript or Vue.js. That makes it even possible to write a renderer for React, Svelte and others.