docs: update content

docs/src/demos/Experiments/Color/extension/Color.ts

@@ -4,8 +4,7 @@ import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Plugin } from 'prosemirror-state'
 
 function detectColors(doc) {
-  const hexColors = /(#[0-9a-f]{3,6})\b/ig
-  const rgbaColors = /(rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\))\b/ig
+  const hexColor = /(#[0-9a-f]{3,6})\b/ig
   const results = []
   const decorations: [any?] = []
 
@@ -17,16 +16,7 @@ function detectColors(doc) {
     let matches
 
     // eslint-disable-next-line
-    while (matches = hexColors.exec(node.text)) {
-      results.push({
-        color: matches[0],
-        from: position + matches.index,
-        to: position + matches.index + matches[0].length,
-      })
-    }
-
-    // eslint-disable-next-line
-    while (matches = rgbaColors.exec(node.text)) {
+    while (matches = hexColor.exec(node.text)) {
       results.push({
         color: matches[0],
         from: position + matches.index,
@@ -45,21 +35,19 @@ function detectColors(doc) {
   return DecorationSet.create(doc, decorations)
 }
 
-export const Colors = Extension.create({
-  name: 'colors',
+export const Color = Extension.create({
+  name: 'color',
 
   addProseMirrorPlugins() {
-    const { plugins } = this.options
-
     return [
       new Plugin({
         state: {
           init(_, { doc }) {
-            return detectColors(doc, plugins)
+            return detectColors(doc)
           },
           apply(transaction, oldState) {
             return transaction.docChanged
-              ? detectColors(transaction.doc, plugins)
+              ? detectColors(transaction.doc)
               : oldState
           },
         },
@@ -75,6 +63,6 @@ export const Colors = Extension.create({
 
 declare module '@tiptap/core' {
   interface AllExtensions {
-    Colors: typeof Colors,
+    Color: typeof Color,
   }
 }

docs/src/demos/Experiments/Color/extension/index.ts

@@ -0,0 +1,4 @@
+import { Color } from './Color'
+
+export * from './Color'
+export default Color

docs/src/demos/Experiments/Color/index.vue

@@ -10,7 +10,7 @@ import Document from '@tiptap/extension-document'
 import Text from '@tiptap/extension-text'
 import Paragraph from '@tiptap/extension-paragraph'
 import Heading from '@tiptap/extension-heading'
-import Colors from './extension'
+import Color from './extension'
 
 export default {
   components: {
@@ -30,12 +30,15 @@ export default {
         Paragraph,
         Heading,
         Text,
-        Colors,
+        Color,
       ],
       content: `
         <p>
-          For triplets with repeated values, you can eliminate the repetition by writing in shorthand, for instance, #00FFFF becomes #0FF. This system is easy for computers to understand, and it pretty short to write, which makes it useful for quick copy paste and designation in programming. If you’re going to work with colors in a more involved way, though, HSL is a little bit more human-readable. rgba(128, 128, 128, 0.3) foo
-        </ul>
+          For triplets with repeated values, you can eliminate the repetition by writing in shorthand, for instance, #00FFFF becomes #0FF. This system is easy for computers to understand, and it pretty short to write, which makes it useful for quick copy paste and designation in programming. If you’re going to work with colors in a more involved way, though, HSL is a little bit more human-readable.
+        </p>
+        <p>
+          A few more examples: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
+        </p>
       `,
     })
   },
@@ -47,7 +50,16 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
 .color {
+  white-space: nowrap;
+
   &::before {
     content: ' ';
     display: inline-block;
@@ -61,8 +73,4 @@ export default {
     background-color: var(--color);
   }
 }
-
-.ProseMirror {
-  padding-right: 20px;
-}
 </style>

docs/src/demos/Experiments/Colors/extension/index.ts

@@ -1,4 +0,0 @@
-import { Colors } from './Colors'
-
-export * from './Colors'
-export default Colors

docs/src/docPages/examples/basic.md

@@ -1,3 +1,5 @@
-# Basic text editor
+# 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" />

docs/src/docPages/examples/book.md

@@ -1,5 +1,7 @@
 # Write a book
 
-This demo has 150 paragraphs and more than 13,000 words, check the performance yourself. The most heavy processing is to check the active state of the buttons for the selection. If you’d like to optimize for that use case, try to limit those checks in your toolbar. But honestly, we think it’s great already, isn’t it?
+This demo has 150 paragraphs and more than 13,000 words, check the performance yourself.
+
+Most of the processing is needed to check the active state of the buttons for the selection. If you’d like to optimize for really long texts, try to limit these checks in your toolbar. But honestly, we think it’s great already, isn’t it?
 
 <demo name="Examples/Book" highlight="" />

docs/src/docPages/experiments.md

@@ -5,4 +5,4 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Annotation](/experiments/annotation)
 * [Comments](/experiments/comments)
 * [CharacterLimit](/experiments/character-limit)
-* [Colors](/experiments/colors)
+* [Color](/experiments/color)

docs/src/docPages/experiments/color.md

@@ -0,0 +1,5 @@
+# Color
+
+⚠️ Experiment
+
+<demo name="Experiments/Color" highlight="" />

docs/src/docPages/experiments/colors.md

@@ -1,5 +0,0 @@
-# Colors
-
-⚠️ Experiment
-
-<demo name="Experiments/Colors" highlight="" />

docs/src/docPages/guide/accessibility.md

@@ -10,7 +10,9 @@ We need your support to maintain, update, support and develop tiptap 2. If you
 We strive to make tiptap accessible to everyone, but to be honest, there’s not much work done now. From our current understanding, that’s what needs to be done:
 
 ### Interface
-An interface needs to have semantic markup, must be keyboard accessible and well documented. Currently, we don’t even provide an interface, so for now that’s totally up to you. But no worries, we’ll provide an interface soon and take accessibility into account early on.
+An interface needs to have well-defined contrasts, big enough click areas, semantic markup, must be keyboard accessible and well documented. Currently, we don’t even provide an interface, so for now that’s totally up to you.
+
+But no worries, we’ll provide an interface soon and take accessibility into account early on.
 
 ### Editor
 The editor needs to produce semantic markup, must be keyboard accessible and well documented. The tiptap content is well structured so that’s a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
@@ -28,3 +30,5 @@ An optional writing assitance could help people writing content semanticly corre
 | WCAG 2.1 | 2.1.1   | [Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)                       |
 | WCAG 2.1 | 4.1.1   | [Parsing](https://www.w3.org/WAI/WCAG21/Understanding/parsing)                         |
 | WCAG 2.1 | 4.1.2   | [Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)       |
+
+Anything we should add here? Please let us know, so we can take it into account.

docs/src/links.yaml

@@ -16,7 +16,7 @@
   link: /examples
   redirect: /examples/basic
   items:
-    - title: Basic text editor
+    - title: Default text editor
       link: /examples/basic
     - title: Collaborative editing
       link: /examples/collaborative-editing
@@ -25,16 +25,18 @@
       link: /examples/markdown-shortcuts
     - title: Formatting
       link: /examples/formatting
+      type: draft
     - title: Todo app
       link: /examples/todo-app
     - title: Write a book
       link: /examples/book
-    - title: For minimalists
+    - title: Minimalistic
       link: /examples/minimalist
-    - title: Drawing
+    - title: Draw on a canvas
       link: /examples/drawing
     - title: Multiple editors
       link: /examples/multiple-editors
+      draft: true
 
 
 - title: Guide