From 471f1821124ee5a17c211bacf81605ea66c26e4f Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 20 Jan 2021 23:19:33 +0100 Subject: [PATCH] docs: update content --- .../Colors.ts => Color/extension/Color.ts} | 26 +++++-------------- .../Experiments/Color/extension/index.ts | 4 +++ .../Experiments/{Colors => Color}/index.vue | 24 +++++++++++------ .../Experiments/Colors/extension/index.ts | 4 --- docs/src/docPages/examples/basic.md | 4 ++- docs/src/docPages/examples/book.md | 4 ++- docs/src/docPages/experiments.md | 2 +- docs/src/docPages/experiments/color.md | 5 ++++ docs/src/docPages/experiments/colors.md | 5 ---- docs/src/docPages/guide/accessibility.md | 6 ++++- docs/src/links.yaml | 8 +++--- 11 files changed, 49 insertions(+), 43 deletions(-) rename docs/src/demos/Experiments/{Colors/extension/Colors.ts => Color/extension/Color.ts} (65%) create mode 100644 docs/src/demos/Experiments/Color/extension/index.ts rename docs/src/demos/Experiments/{Colors => Color}/index.vue (82%) delete mode 100644 docs/src/demos/Experiments/Colors/extension/index.ts create mode 100644 docs/src/docPages/experiments/color.md delete mode 100644 docs/src/docPages/experiments/colors.md diff --git a/docs/src/demos/Experiments/Colors/extension/Colors.ts b/docs/src/demos/Experiments/Color/extension/Color.ts similarity index 65% rename from docs/src/demos/Experiments/Colors/extension/Colors.ts rename to docs/src/demos/Experiments/Color/extension/Color.ts index 2c94a8e8..0c5e98c6 100644 --- a/docs/src/demos/Experiments/Colors/extension/Colors.ts +++ b/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, } } diff --git a/docs/src/demos/Experiments/Color/extension/index.ts b/docs/src/demos/Experiments/Color/extension/index.ts new file mode 100644 index 00000000..d73a0a1b --- /dev/null +++ b/docs/src/demos/Experiments/Color/extension/index.ts @@ -0,0 +1,4 @@ +import { Color } from './Color' + +export * from './Color' +export default Color diff --git a/docs/src/demos/Experiments/Colors/index.vue b/docs/src/demos/Experiments/Color/index.vue similarity index 82% rename from docs/src/demos/Experiments/Colors/index.vue rename to docs/src/demos/Experiments/Color/index.vue index 3fa0906a..a4692831 100644 --- a/docs/src/demos/Experiments/Colors/index.vue +++ b/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: `

- 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 - + 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. +

+

+ A few more examples: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F +

`, }) }, @@ -47,7 +50,16 @@ export default { diff --git a/docs/src/demos/Experiments/Colors/extension/index.ts b/docs/src/demos/Experiments/Colors/extension/index.ts deleted file mode 100644 index 9e3128a8..00000000 --- a/docs/src/demos/Experiments/Colors/extension/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Colors } from './Colors' - -export * from './Colors' -export default Colors diff --git a/docs/src/docPages/examples/basic.md b/docs/src/docPages/examples/basic.md index 00f923a6..d27129b6 100644 --- a/docs/src/docPages/examples/basic.md +++ b/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. diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md index 5443729f..df946aff 100644 --- a/docs/src/docPages/examples/book.md +++ b/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? diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md index f4d14ffc..774263f0 100644 --- a/docs/src/docPages/experiments.md +++ b/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) diff --git a/docs/src/docPages/experiments/color.md b/docs/src/docPages/experiments/color.md new file mode 100644 index 00000000..c828034a --- /dev/null +++ b/docs/src/docPages/experiments/color.md @@ -0,0 +1,5 @@ +# Color + +⚠️ Experiment + + diff --git a/docs/src/docPages/experiments/colors.md b/docs/src/docPages/experiments/colors.md deleted file mode 100644 index 397f60a2..00000000 --- a/docs/src/docPages/experiments/colors.md +++ /dev/null @@ -1,5 +0,0 @@ -# Colors - -⚠️ Experiment - - diff --git a/docs/src/docPages/guide/accessibility.md b/docs/src/docPages/guide/accessibility.md index 711ecc5c..41624ab4 100644 --- a/docs/src/docPages/guide/accessibility.md +++ b/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. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index a88fc98c..719e62b4 100644 --- a/docs/src/links.yaml +++ b/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