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.