From 0685e33ccaa795b63fe7055392a452d21dfd98de Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 17:35:16 +0100
Subject: [PATCH] add the colors experiment

---
 .../Experiments/Colors/extension/Colors.ts    | 80 +++++++++++++++++++
 .../Experiments/Colors/extension/index.ts     |  4 +
 docs/src/demos/Experiments/Colors/index.vue   | 68 ++++++++++++++++
 docs/src/docPages/experiments.md              |  1 +
 docs/src/docPages/experiments/colors.md       |  5 ++
 5 files changed, 158 insertions(+)
 create mode 100644 docs/src/demos/Experiments/Colors/extension/Colors.ts
 create mode 100644 docs/src/demos/Experiments/Colors/extension/index.ts
 create mode 100644 docs/src/demos/Experiments/Colors/index.vue
 create mode 100644 docs/src/docPages/experiments/colors.md

diff --git a/docs/src/demos/Experiments/Colors/extension/Colors.ts b/docs/src/demos/Experiments/Colors/extension/Colors.ts
new file mode 100644
index 00000000..4a773f48
--- /dev/null
+++ b/docs/src/demos/Experiments/Colors/extension/Colors.ts
@@ -0,0 +1,80 @@
+// @ts-nocheck
+import { Extension } from '@tiptap/core'
+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 results = []
+  const decorations: [any?] = []
+
+  doc.descendants((node: any, position: any) => {
+    if (!node.isText) {
+      return
+    }
+
+    let matches
+
+    // eslint-disable-next-line
+    let regex = hexColors
+    while (matches = hexColors.exec(node.text)) {
+      results.push({
+        color: matches[0],
+        from: position + matches.index,
+        to: position + matches.index + matches[0].length,
+      })
+    }
+
+    while (matches = rgbaColors.exec(node.text)) {
+      results.push({
+        color: matches[0],
+        from: position + matches.index,
+        to: position + matches.index + matches[0].length,
+      })
+    }
+  })
+
+  results.forEach(issue => {
+    decorations.push(Decoration.inline(issue.from, issue.to, {
+      class: 'color',
+      style: `--color: ${issue.color}`,
+    }))
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export const Colors = Extension.create({
+  name: 'colors',
+
+  addProseMirrorPlugins() {
+    const { plugins } = this.options
+
+    return [
+      new Plugin({
+        state: {
+          init(_, { doc }) {
+            return detectColors(doc, plugins)
+          },
+          apply(transaction, oldState) {
+            return transaction.docChanged
+              ? detectColors(transaction.doc, plugins)
+              : oldState
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)
+          },
+        },
+      }),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    Colors: typeof Colors,
+  }
+}
diff --git a/docs/src/demos/Experiments/Colors/extension/index.ts b/docs/src/demos/Experiments/Colors/extension/index.ts
new file mode 100644
index 00000000..9e3128a8
--- /dev/null
+++ b/docs/src/demos/Experiments/Colors/extension/index.ts
@@ -0,0 +1,4 @@
+import { Colors } from './Colors'
+
+export * from './Colors'
+export default Colors
diff --git a/docs/src/demos/Experiments/Colors/index.vue b/docs/src/demos/Experiments/Colors/index.vue
new file mode 100644
index 00000000..3fa0906a
--- /dev/null
+++ b/docs/src/demos/Experiments/Colors/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+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'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Heading,
+        Text,
+        Colors,
+      ],
+      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>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.color {
+  &::before {
+    content: ' ';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 1px solid rgba(128, 128, 128, 0.3);
+    vertical-align: middle;
+    margin-right: 0.1em;
+    margin-bottom: 0.15em;
+    border-radius: 2px;
+    background-color: var(--color);
+  }
+}
+
+.ProseMirror {
+  padding-right: 20px;
+}
+</style>
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index 262720b5..f4d14ffc 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -5,3 +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)
diff --git a/docs/src/docPages/experiments/colors.md b/docs/src/docPages/experiments/colors.md
new file mode 100644
index 00000000..397f60a2
--- /dev/null
+++ b/docs/src/docPages/experiments/colors.md
@@ -0,0 +1,5 @@
+# Colors
+
+⚠️ Experiment
+
+<demo name="Experiments/Colors" highlight="" />