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