remove the color experiment

This commit is contained in:
Hans Pagel
2021-02-11 22:47:32 +01:00
parent c140d11d79
commit 1f064b8600
5 changed files with 0 additions and 154 deletions

View File

@@ -1,68 +0,0 @@
// @ts-nocheck
import { Extension } from '@tiptap/core'
import { Decoration, DecorationSet } from 'prosemirror-view'
import { Plugin } from 'prosemirror-state'
function detectColors(doc) {
const hexColor = /(#[0-9a-f]{3,6})\b/ig
const results = []
const decorations: [any?] = []
doc.descendants((node: any, position: any) => {
if (!node.isText) {
return
}
let matches
// eslint-disable-next-line
while (matches = hexColor.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 Color = Extension.create({
name: 'color',
addProseMirrorPlugins() {
return [
new Plugin({
state: {
init(_, { doc }) {
return detectColors(doc)
},
apply(transaction, oldState) {
return transaction.docChanged
? detectColors(transaction.doc)
: oldState
},
},
props: {
decorations(state) {
return this.getState(state)
},
},
}),
]
},
})
declare module '@tiptap/core' {
interface AllExtensions {
Color: typeof Color,
}
}

View File

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

View File

@@ -1,76 +0,0 @@
<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 Color from './extension'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Heading,
Text,
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 youre 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>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
.color {
white-space: nowrap;
&::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);
}
}
</style>

View File

@@ -4,7 +4,6 @@ Congratulations! Youve found our playground with a list of experiments. Be aw
## New
* [Linter](/experiments/linter)
* [Comments](/experiments/comments)
* [Color](/experiments/color)
* [Commands](/experiments/commands)
* [Embeds](/experiments/embeds)
* [Multiple editors](/experiments/multiple-editors)

View File

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