@bhsd/codemirror-css-color-picker 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.replit +9 -0
- package/README.md +38 -0
- package/dev/index.html +13 -0
- package/dev/index.ts +128 -0
- package/dev/vite.config.js +9 -0
- package/dist/index.cjs +606 -0
- package/dist/index.d.ts +36 -0
- package/dist/index.js +595 -0
- package/package.json +48 -0
- package/pull_request_template.md +23 -0
- package/src/index.ts +576 -0
- package/src/named-colors.ts +152 -0
package/.replit
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# CodeMirror Color Picker
|
|
2
|
+
|
|
3
|
+
<span><a href="https://www.npmjs.com/package/@bhsd/codemirror-css-color-picker" title="NPM version badge"><img src="https://img.shields.io/npm/v/@bhsd/codemirror-css-color-picker?color=blue" alt="NPM version badge" /></a></span>
|
|
4
|
+
|
|
5
|
+
A CodeMirror extension that adds a color picker input next to CSS color values. This is a fork of [@replit/codemirror-css-color-picker](https://www.npmjs.com/package/@replit/codemirror-css-color-picker).
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Usage
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { basicSetup } from 'codemirror';
|
|
13
|
+
import { EditorState } from '@codemirror/state';
|
|
14
|
+
import { EditorView } from '@codemirror/view';
|
|
15
|
+
import { css } from '@codemirror/lang-css';
|
|
16
|
+
import { colorPicker, wrapperClassName } from '@bhsd/codemirror-css-color-picker';
|
|
17
|
+
|
|
18
|
+
new EditorView({
|
|
19
|
+
parent: document.querySelector('#editor'),
|
|
20
|
+
state: EditorState.create({
|
|
21
|
+
doc: '.wow {\n color: #fff;\n}',
|
|
22
|
+
extensions: [
|
|
23
|
+
basicSetup,
|
|
24
|
+
css(),
|
|
25
|
+
colorPicker,
|
|
26
|
+
EditorView.theme({
|
|
27
|
+
[`.${wrapperClassName}`]: {
|
|
28
|
+
outlineColor: 'transparent',
|
|
29
|
+
},
|
|
30
|
+
}),
|
|
31
|
+
],
|
|
32
|
+
}),
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Todos
|
|
37
|
+
|
|
38
|
+
- Investigate solutions for alpha values. `input[type="color"]` doesn't support alpha values, we could show another number input next to it for the alpha value.
|
package/dev/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Vite App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="editor-css"></div>
|
|
10
|
+
<div id="editor-html"></div>
|
|
11
|
+
<script type="module" src="./index.ts"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/dev/index.ts
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { basicSetup } from 'codemirror';
|
|
2
|
+
import { css } from '@codemirror/lang-css';
|
|
3
|
+
import { html } from '@codemirror/lang-html';
|
|
4
|
+
import { EditorState } from '@codemirror/state';
|
|
5
|
+
import { EditorView } from '@codemirror/view';
|
|
6
|
+
import { colorPicker, wrapperClassName } from '../src/';
|
|
7
|
+
|
|
8
|
+
const cssDoc = `
|
|
9
|
+
.wow {
|
|
10
|
+
font-family: Helvetica Neue;
|
|
11
|
+
font-size: 17px;
|
|
12
|
+
color: #ff0000;
|
|
13
|
+
border-color: rgb(0, 255, 0%);
|
|
14
|
+
background-color: #00f;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#alpha {
|
|
18
|
+
color: #FF00FFAA;
|
|
19
|
+
border-color: rgb(255, 50%, 64, 0.5);
|
|
20
|
+
border-color: rgba(255, 50%, 64, 0.5);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.hex4 {
|
|
24
|
+
color: #ABCD;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.named {
|
|
28
|
+
color: red;
|
|
29
|
+
background-color: blue;
|
|
30
|
+
border-top-color: aquamarine;
|
|
31
|
+
border-left-color: mediumaquamarine;
|
|
32
|
+
border-right-color: lightcoral;
|
|
33
|
+
border-bottom-color: snow;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#hue {
|
|
37
|
+
color: hsl(0, 100%, 50%);
|
|
38
|
+
}
|
|
39
|
+
`;
|
|
40
|
+
|
|
41
|
+
const htmlDoc = `
|
|
42
|
+
<html>
|
|
43
|
+
<head>
|
|
44
|
+
<style>
|
|
45
|
+
${cssDoc}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
|
|
50
|
+
<body>
|
|
51
|
+
<div
|
|
52
|
+
style="
|
|
53
|
+
font-family: Helvetica Neue;
|
|
54
|
+
font-size: 17px;
|
|
55
|
+
color: #ff0000;
|
|
56
|
+
border-color: rgb(0, 255, 0%);
|
|
57
|
+
background-color: #00f;
|
|
58
|
+
"
|
|
59
|
+
>
|
|
60
|
+
wow
|
|
61
|
+
</div>
|
|
62
|
+
<div
|
|
63
|
+
style="
|
|
64
|
+
color: #ff00ffaa;
|
|
65
|
+
border-color: rgb(255, 50%, 64, 0.5);
|
|
66
|
+
border-color: rgba(255, 50%, 64, 0.5);
|
|
67
|
+
"
|
|
68
|
+
>
|
|
69
|
+
alpha
|
|
70
|
+
</div>
|
|
71
|
+
<div style="color: #abcd">hex4</div>
|
|
72
|
+
<div
|
|
73
|
+
style="
|
|
74
|
+
color: red;
|
|
75
|
+
background-color: blue;
|
|
76
|
+
border-top-color: aquamarine;
|
|
77
|
+
border-left-color: mediumaquamarine;
|
|
78
|
+
border-right-color: lightcoral;
|
|
79
|
+
border-bottom-color: snow;
|
|
80
|
+
"
|
|
81
|
+
>
|
|
82
|
+
named
|
|
83
|
+
</div>
|
|
84
|
+
<div style="color: hsl(0, 100%, 50%)">hue</div>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
`;
|
|
88
|
+
|
|
89
|
+
const cssParent = document.querySelector('#editor-css');
|
|
90
|
+
const htmlParent = document.querySelector('#editor-html');
|
|
91
|
+
|
|
92
|
+
if (!cssParent || !htmlParent) {
|
|
93
|
+
throw new Error('Could not find #editor-css or #editor-html');
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
new EditorView({
|
|
97
|
+
state: EditorState.create({
|
|
98
|
+
doc: cssDoc,
|
|
99
|
+
extensions: [
|
|
100
|
+
colorPicker,
|
|
101
|
+
basicSetup,
|
|
102
|
+
css(),
|
|
103
|
+
EditorView.theme({
|
|
104
|
+
[`.${wrapperClassName}`]: {
|
|
105
|
+
outlineColor: '#000',
|
|
106
|
+
},
|
|
107
|
+
}),
|
|
108
|
+
],
|
|
109
|
+
}),
|
|
110
|
+
parent: cssParent,
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
new EditorView({
|
|
114
|
+
state: EditorState.create({
|
|
115
|
+
doc: htmlDoc,
|
|
116
|
+
extensions: [
|
|
117
|
+
colorPicker,
|
|
118
|
+
basicSetup,
|
|
119
|
+
html(),
|
|
120
|
+
EditorView.theme({
|
|
121
|
+
[`.${wrapperClassName}`]: {
|
|
122
|
+
outlineColor: '#000',
|
|
123
|
+
},
|
|
124
|
+
}),
|
|
125
|
+
],
|
|
126
|
+
}),
|
|
127
|
+
parent: cssParent,
|
|
128
|
+
});
|