@kvass/rich-text 1.3.3 → 1.3.4
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/package.json +1 -1
- package/src/Component.vue +12 -5
package/package.json
CHANGED
package/src/Component.vue
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="richtext">
|
|
3
|
-
<BubbleMenu v-if="editor" :editor="editor">
|
|
3
|
+
<BubbleMenu v-if="editor && !disabled" :editor="editor">
|
|
4
4
|
<div class="richtext__bubble">
|
|
5
5
|
<form
|
|
6
6
|
class="richtext__bubble-form"
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
</button>
|
|
52
52
|
</div>
|
|
53
53
|
|
|
54
|
-
<EditorContent class="richtext__editor" :editor="editor" />
|
|
54
|
+
<EditorContent class="richtext__editor" :editor="editor" :editable="!disabled" />
|
|
55
55
|
</div>
|
|
56
56
|
</template>
|
|
57
57
|
|
|
@@ -82,6 +82,10 @@ export default {
|
|
|
82
82
|
if (this.editor.getHTML() === value) return
|
|
83
83
|
this.editor.commands.setContent(this.value, false)
|
|
84
84
|
},
|
|
85
|
+
disabled(value) {
|
|
86
|
+
if (!this.editor) return
|
|
87
|
+
this.editor.setOptions({ editable: !value })
|
|
88
|
+
},
|
|
85
89
|
},
|
|
86
90
|
data() {
|
|
87
91
|
return {
|
|
@@ -264,8 +268,7 @@ export default {
|
|
|
264
268
|
}
|
|
265
269
|
|
|
266
270
|
& > div[contenteditable='false'] {
|
|
267
|
-
|
|
268
|
-
background-color: var(--vue-elder-input-color, #f2f2f2);
|
|
271
|
+
background-color: var(--vue-elder-input-color, #fafafa);
|
|
269
272
|
}
|
|
270
273
|
}
|
|
271
274
|
|
|
@@ -327,7 +330,11 @@ export default {
|
|
|
327
330
|
transition: background-color 150ms ease-out;
|
|
328
331
|
cursor: pointer;
|
|
329
332
|
|
|
330
|
-
&:
|
|
333
|
+
&:disabled {
|
|
334
|
+
cursor: not-allowed;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
&:hover:not(:disabled),
|
|
331
338
|
&.is-active {
|
|
332
339
|
background-color: css-lighten('primary', 47%);
|
|
333
340
|
}
|