@enso-ui/wysiwyg 2.0.7 → 3.1.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/LICENSE +1 -1
- package/README.md +5 -7
- package/package.json +2 -16
- package/src/bulma/Wysiwyg.vue +176 -3
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
# WYSIWYG
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://packagist.org/packages/enso-ui/wysiwyg)
|
|
5
|
-
|
|
6
|
-
WYSIWYG
|
|
3
|
+
WYSIWYG editor component.
|
|
7
4
|
|
|
8
5
|
### Features
|
|
9
6
|
|
|
10
|
-
-
|
|
7
|
+
- TinyMCE-based editing
|
|
8
|
+
- theme-aware styling
|
|
11
9
|
|
|
12
10
|
### Configuration & Usage
|
|
13
11
|
|
|
14
|
-
|
|
12
|
+
Use the component where rich text editing is needed inside the Enso ecosystem.
|
|
15
13
|
|
|
16
14
|
### Contributions
|
|
17
15
|
|
|
@@ -19,4 +17,4 @@ are welcome. Pull requests are great, but issues are good too.
|
|
|
19
17
|
|
|
20
18
|
### License
|
|
21
19
|
|
|
22
|
-
This package is released under the MIT license.
|
|
20
|
+
This package is released under the MIT license.
|
package/package.json
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enso-ui/wysiwyg",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "WYSIWYG",
|
|
5
5
|
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
-
},
|
|
9
6
|
"repository": {
|
|
10
7
|
"type": "git",
|
|
11
8
|
"url": "git+https://github.com/enso-ui/wysiwyg.git"
|
|
@@ -15,7 +12,7 @@
|
|
|
15
12
|
"vue"
|
|
16
13
|
],
|
|
17
14
|
"author": "Adrian Ocneanu <aocneanu@gmail.com>",
|
|
18
|
-
"license": "
|
|
15
|
+
"license": "MIT",
|
|
19
16
|
"bugs": {
|
|
20
17
|
"url": "https://github.com/enso-ui/wysiwyg/issues"
|
|
21
18
|
},
|
|
@@ -23,16 +20,5 @@
|
|
|
23
20
|
"dependencies": {
|
|
24
21
|
"@tinymce/tinymce-vue": "^4.0.0",
|
|
25
22
|
"vue": "^3.0"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"@vue/cli-plugin-babel": "5.0.0-beta.6",
|
|
29
|
-
"@vue/cli-plugin-eslint": "5.0.0-beta.6",
|
|
30
|
-
"@vue/eslint-config-airbnb": "^5.0.0",
|
|
31
|
-
"autoprefixer": "^9.6.1",
|
|
32
|
-
"babel-eslint": "^10.0.1",
|
|
33
|
-
"cross-env": "^6.0.0",
|
|
34
|
-
"eslint": "^7.0.0",
|
|
35
|
-
"eslint-import-resolver-alias": "^1.1.2",
|
|
36
|
-
"eslint-plugin-vue": "^8.0.3"
|
|
37
23
|
}
|
|
38
24
|
}
|
package/src/bulma/Wysiwyg.vue
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="['wysiwyg-wrapper', {'has-error': hasError}, $attrs.class]">
|
|
3
3
|
<editor v-bind="$attrs"
|
|
4
|
+
:key="editorKey"
|
|
4
5
|
:toolbar="toolbar"
|
|
5
6
|
:plugins="plugins"
|
|
6
|
-
:init="
|
|
7
|
+
:init="editorInit"/>
|
|
7
8
|
</div>
|
|
8
9
|
</template>
|
|
9
10
|
|
|
@@ -17,6 +18,13 @@ export default {
|
|
|
17
18
|
|
|
18
19
|
inheritAttrs: false,
|
|
19
20
|
|
|
21
|
+
data: () => ({
|
|
22
|
+
editorKey: 0,
|
|
23
|
+
observer: null,
|
|
24
|
+
mediaQuery: null,
|
|
25
|
+
theme: 'light',
|
|
26
|
+
}),
|
|
27
|
+
|
|
20
28
|
props: {
|
|
21
29
|
hasError: {
|
|
22
30
|
type: Boolean,
|
|
@@ -35,13 +43,178 @@ export default {
|
|
|
35
43
|
default: 'newdocument undo redo bold italic strikethrough underline codesample h2 bullist numlist alignleft aligncenter alignright alignjustify blockquote indent outdent link table emoticons forecolor backcolor preview removeformat',
|
|
36
44
|
},
|
|
37
45
|
},
|
|
46
|
+
|
|
47
|
+
computed: {
|
|
48
|
+
isDarkTheme() {
|
|
49
|
+
return this.theme === 'dark';
|
|
50
|
+
},
|
|
51
|
+
themeTokens() {
|
|
52
|
+
if (typeof window === 'undefined') {
|
|
53
|
+
return {
|
|
54
|
+
bodyBg: this.isDarkTheme ? '#263245' : '#ffffff',
|
|
55
|
+
bodyText: this.isDarkTheme ? '#e5edf8' : '#0f172a',
|
|
56
|
+
link: this.isDarkTheme ? '#7cc0ff' : '#2563eb',
|
|
57
|
+
border: this.isDarkTheme ? '#5b6f8f' : '#d8dee6',
|
|
58
|
+
blockquote: this.isDarkTheme ? '#c9d7ea' : '#475569',
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const styles = getComputedStyle(document.documentElement);
|
|
63
|
+
|
|
64
|
+
return {
|
|
65
|
+
bodyBg: styles.getPropertyValue('--bulma-scheme-main').trim()
|
|
66
|
+
|| (this.isDarkTheme ? '#263245' : '#ffffff'),
|
|
67
|
+
bodyText: styles.getPropertyValue('--bulma-text').trim()
|
|
68
|
+
|| (this.isDarkTheme ? '#e5edf8' : '#0f172a'),
|
|
69
|
+
link: styles.getPropertyValue('--bulma-link').trim()
|
|
70
|
+
|| (this.isDarkTheme ? '#7cc0ff' : '#2563eb'),
|
|
71
|
+
border: styles.getPropertyValue('--bulma-border').trim()
|
|
72
|
+
|| '#d8dee6',
|
|
73
|
+
blockquote: styles.getPropertyValue('--bulma-text-light').trim()
|
|
74
|
+
|| (this.isDarkTheme ? '#c9d7ea' : '#475569'),
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
editorInit() {
|
|
78
|
+
return {
|
|
79
|
+
menubar: this.menubar,
|
|
80
|
+
skin: false,
|
|
81
|
+
content_css: false,
|
|
82
|
+
content_style: this.contentStyle,
|
|
83
|
+
};
|
|
84
|
+
},
|
|
85
|
+
contentStyle() {
|
|
86
|
+
const {
|
|
87
|
+
bodyBg, bodyText, link, border, blockquote,
|
|
88
|
+
} = this.themeTokens;
|
|
89
|
+
|
|
90
|
+
return `
|
|
91
|
+
html { background: ${bodyBg}; }
|
|
92
|
+
body {
|
|
93
|
+
background: ${bodyBg};
|
|
94
|
+
color: ${bodyText};
|
|
95
|
+
padding: 0.75rem;
|
|
96
|
+
}
|
|
97
|
+
a { color: ${link}; }
|
|
98
|
+
blockquote {
|
|
99
|
+
border-left: 3px solid ${border};
|
|
100
|
+
color: ${blockquote};
|
|
101
|
+
margin-left: 0;
|
|
102
|
+
padding-left: 1rem;
|
|
103
|
+
}
|
|
104
|
+
table td, table th {
|
|
105
|
+
border: 1px solid ${border};
|
|
106
|
+
}
|
|
107
|
+
`;
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
mounted() {
|
|
112
|
+
this.updateTheme();
|
|
113
|
+
this.watchTheme();
|
|
114
|
+
},
|
|
115
|
+
|
|
116
|
+
beforeUnmount() {
|
|
117
|
+
this.observer?.disconnect();
|
|
118
|
+
this.mediaQuery?.removeEventListener?.('change', this.handleThemeMutation);
|
|
119
|
+
},
|
|
120
|
+
|
|
121
|
+
methods: {
|
|
122
|
+
resolveTheme() {
|
|
123
|
+
const root = document.documentElement;
|
|
124
|
+
const explicitTheme = root.dataset.theme;
|
|
125
|
+
|
|
126
|
+
if (explicitTheme === 'dark' || explicitTheme === 'light') {
|
|
127
|
+
return explicitTheme;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
131
|
+
? 'dark'
|
|
132
|
+
: 'light';
|
|
133
|
+
},
|
|
134
|
+
updateTheme() {
|
|
135
|
+
const nextTheme = this.resolveTheme();
|
|
136
|
+
|
|
137
|
+
if (nextTheme !== this.theme) {
|
|
138
|
+
this.theme = nextTheme;
|
|
139
|
+
this.editorKey += 1;
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
handleThemeMutation() {
|
|
143
|
+
this.updateTheme();
|
|
144
|
+
},
|
|
145
|
+
watchTheme() {
|
|
146
|
+
this.observer = new MutationObserver(this.handleThemeMutation);
|
|
147
|
+
this.observer.observe(document.documentElement, {
|
|
148
|
+
attributes: true,
|
|
149
|
+
attributeFilter: ['data-theme', 'class'],
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
153
|
+
this.mediaQuery.addEventListener?.('change', this.handleThemeMutation);
|
|
154
|
+
},
|
|
155
|
+
},
|
|
38
156
|
};
|
|
39
157
|
</script>
|
|
40
158
|
|
|
41
159
|
<style lang="scss">
|
|
42
|
-
|
|
160
|
+
.wysiwyg-wrapper {
|
|
161
|
+
.tox.tox-tinymce {
|
|
162
|
+
background-color: var(--bulma-scheme-main);
|
|
163
|
+
border: 1px solid var(--bulma-border);
|
|
164
|
+
border-radius: var(--bulma-radius);
|
|
165
|
+
box-shadow: none;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.tox-editor-header,
|
|
169
|
+
.tox-toolbar-overlord,
|
|
170
|
+
.tox-toolbar,
|
|
171
|
+
.tox-toolbar__primary,
|
|
172
|
+
.tox-menubar,
|
|
173
|
+
.tox-statusbar {
|
|
174
|
+
background-color: var(--bulma-scheme-main-ter) !important;
|
|
175
|
+
border-color: var(--bulma-border) !important;
|
|
176
|
+
color: var(--bulma-text) !important;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.tox .tox-tbtn,
|
|
180
|
+
.tox .tox-tbtn svg,
|
|
181
|
+
.tox .tox-statusbar__wordcount,
|
|
182
|
+
.tox .tox-statusbar__path-item,
|
|
183
|
+
.tox .tox-statusbar__branding a,
|
|
184
|
+
.tox .tox-statusbar__text-container {
|
|
185
|
+
color: var(--bulma-text) !important;
|
|
186
|
+
fill: var(--bulma-text) !important;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.tox .tox-tbtn:hover,
|
|
190
|
+
.tox .tox-tbtn:focus,
|
|
191
|
+
.tox .tox-tbtn--enabled,
|
|
192
|
+
.tox .tox-tbtn--enabled:hover {
|
|
193
|
+
background-color: var(--bulma-scheme-main-bis) !important;
|
|
194
|
+
color: var(--bulma-text-strong) !important;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.tox .tox-tbtn:hover svg,
|
|
198
|
+
.tox .tox-tbtn:focus svg,
|
|
199
|
+
.tox .tox-tbtn--enabled svg,
|
|
200
|
+
.tox .tox-tbtn--enabled:hover svg {
|
|
201
|
+
fill: var(--bulma-text-strong) !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.tox .tox-edit-area::before {
|
|
205
|
+
border-color: var(--bulma-input-hover-border-color) !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.tox .tox-edit-area iframe {
|
|
209
|
+
background-color: transparent !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.tox .tox-statusbar {
|
|
213
|
+
border-top: 1px solid var(--bulma-border) !important;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
43
216
|
|
|
44
217
|
.wysiwyg-wrapper.has-error {
|
|
45
|
-
border: 1px solid
|
|
218
|
+
border: 1px solid var(--bulma-danger);
|
|
46
219
|
}
|
|
47
220
|
</style>
|