@mirus/tiptap-editor 2.1.8 → 2.1.9
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/dist/tiptap-editor.mjs +2 -2
- package/package.json +1 -1
- package/src/App.vue +92 -10
- package/src/tiptap-editor.vue +74 -6
package/dist/tiptap-editor.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".error-list .error-list__item.selected,.error-list .error-list__item:hover{background-color:#fff3}.tiptap-editor{border:1px solid #e5e7eb;background:white;border-radius:8px;padding:4px}.tiptap-editor p.is-empty:first-child:before{content:attr(data-placeholder);float:left;color:#aaa;pointer-events:none;height:0}.tiptap-editor .menubar{padding:4px;border-radius:4px;background
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".error-list .error-list__item.selected,.error-list .error-list__item:hover{background-color:#fff3}.tiptap-editor{border:1px solid #e5e7eb;background:white;border-radius:8px;padding:4px}.tiptap-editor p.is-empty:first-child:before{content:attr(data-placeholder);float:left;color:#aaa;pointer-events:none;height:0}.tiptap-editor .menubar{padding:4px;border-radius:4px;background:#f4f4f5;display:flex}.tiptap-editor .menubar button{font-size:14px;background-color:transparent;border:none;cursor:pointer;height:30px;outline:50;width:35px;vertical-align:bottom;border-radius:4px;margin-right:3px}.tiptap-editor .menubar button:focus{outline:2px solid #3b82f6;transition:all .08s ease-in-out}.tiptap-editor .menubar button.is-active{background-color:#d3e3fd}.tiptap-editor .menubar button.is-active:focus{background-color:#bfd2f9}.tiptap-editor .menubar button:not(.is-active):hover{background-color:#e5e7eb}.tiptap-editor .menubar button:not(.is-active):focus{background-color:#e5e7eb}.tiptap-editor .menubar button svg{width:12px}.tiptap-editor .editor__content{font-size:16px;outline:0;overflow-y:auto;padding:6px 2px 4px}.tiptap-editor .editor__content .underline-red{border-bottom:3px red solid}.tiptap-editor .editor__content .underline-orange{border-bottom:3px orange solid}.tiptap-editor .editor__content .underline-green{border-bottom:3px lightgreen solid}.tiptap-editor .editor__content .underline-blue{border-bottom:3px #3b82f6 solid}.tiptap-editor .editor__content ul{padding:0 40px}.tiptap-editor .editor__content .ProseMirror{height:100%;padding:2px 8px;border-radius:4px}.tiptap-editor .editor__content .ProseMirror:focus{outline:2px solid #3b82f6;transition:all .08s ease-in-out}.character-count{padding:4px 15px 4px 4px;border-radius:4px;text-align:right;display:flex;gap:8px;justify-content:flex-end;flex-grow:2}.character-count__graph{color:#a8c2f7}.character-count__graph--warning{color:#fb7373}.character-count__inner-circle{fill:#f4f4f5}.character-count__outer-circle{fill:#fff}html[color-scheme=dark] .tiptap-editor{border:2px solid #374151;background:#111827;color:#d1d5db}html[color-scheme=dark] .tiptap-editor .menubar{background:#1f2937;color:#d1d5db}html[color-scheme=dark] .tiptap-editor .menubar button{color:#d1d5db}html[color-scheme=dark] .tiptap-editor .menubar button:focus{outline:2px solid #3b82f6;transition:all .08s ease-in-out}html[color-scheme=dark] .tiptap-editor .menubar button.is-active{background-color:#374151}html[color-scheme=dark] .tiptap-editor .menubar button.is-active:focus{background-color:#4b5563}html[color-scheme=dark] .tiptap-editor .menubar button:not(.is-active):hover{background-color:#374151}html[color-scheme=dark] .tiptap-editor .menubar button:not(.is-active):focus{background-color:#374151}html[color-scheme=dark] .tiptap-editor .menubar button svg{width:12px}html[color-scheme=dark] .character-count__graph{color:#a8c2f7}html[color-scheme=dark] .character-count__graph--warning{color:#fb7373}html[color-scheme=dark] .character-count__inner-circle{fill:#1f2937}html[color-scheme=dark] .character-count__outer-circle{fill:#111827}")),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
2
2
|
var un = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
3
3
|
function Mw(t) {
|
|
4
4
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
@@ -22382,7 +22382,7 @@ var Q6 = function() {
|
|
|
22382
22382
|
return !r.type.indexOf("key") && e._k(r.keyCode, "left", 37, r.key, ["Left", "ArrowLeft"]) || "button" in r && r.button !== 0 ? null : e.toolbarGoLeft.apply(null, arguments);
|
|
22383
22383
|
}, function(r) {
|
|
22384
22384
|
return !r.type.indexOf("key") && e._k(r.keyCode, "right", 39, r.key, ["Right", "ArrowRight"]) || "button" in r && r.button !== 2 ? null : e.toolbarGoRight.apply(null, arguments);
|
|
22385
|
-
}] } }, [n("svg", { staticClass: "svg-inline--fa fa-list-ul fa-w-16", attrs: { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "list-ul", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" } }, [n("path", { attrs: { fill: "currentColor", d: "M96 96c0 26.51-21.49 48-48 48S0 122.51 0 96s21.49-48 48-48 48 21.49 48 48zM48 208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm0 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm96-236h352c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" } })])]), e.maxCharacterCount && e.editor ? n("div", { staticClass: "character-count" }, [n("svg", { class: e.maxCharacterCountExceeded ? "character-count__graph--warning" : "character-count__graph", attrs: { height: "20", width: "20", viewBox: "0 0 20 20" } }, [n("circle", { attrs: { r: "10", cx: "10", cy: "10"
|
|
22385
|
+
}] } }, [n("svg", { staticClass: "svg-inline--fa fa-list-ul fa-w-16", attrs: { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "list-ul", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" } }, [n("path", { attrs: { fill: "currentColor", d: "M96 96c0 26.51-21.49 48-48 48S0 122.51 0 96s21.49-48 48-48 48 21.49 48 48zM48 208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm0 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm96-236h352c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" } })])]), e.maxCharacterCount && e.editor ? n("div", { staticClass: "character-count" }, [n("svg", { class: e.maxCharacterCountExceeded ? "character-count__graph--warning" : "character-count__graph", attrs: { height: "20", width: "20", viewBox: "0 0 20 20" } }, [n("circle", { staticClass: "character-count__outer-circle", attrs: { r: "10", cx: "10", cy: "10" } }), n("circle", { attrs: { r: "5", cx: "10", cy: "10", fill: "transparent", stroke: "currentColor", "stroke-width": "10", "stroke-dasharray": `calc(${e.characterCountPercentage}px * 31.4 / 100) 31.4`, transform: "rotate(-90) translate(-20)" } }), n("circle", { staticClass: "character-count__inner-circle", attrs: { r: "6", cx: "10", cy: "10" } })]), n("div", { staticClass: "character-count__text", attrs: { "aria-live": "polite" } }, [e._v(" " + e._s(e.currentCharacterCount) + " / " + e._s(e.maxCharacterCount) + " characters ")])]) : e._e()]) : e._e(), n("editor-content", { staticClass: "editor__content", style: { height: e.height }, attrs: { editor: e.editor, id: e.id || null, role: "textbox", "aria-label": "text area", tabindex: "-1" } })], 1), n("div", { ref: "errors", staticClass: "error-list", attrs: { "v-show": !1 } }, [e.currentWarning ? [n("b", [e._v(e._s(e.currentWarning.message))]), e._l(e.currentOptions, function(r, i) {
|
|
22386
22386
|
return n("div", { key: r.id, staticClass: "error-list__item", class: { selected: e.navigatedOptionIndex === i }, on: { click: function(o) {
|
|
22387
22387
|
return e.selectOption(r);
|
|
22388
22388
|
} } }, [e._v(" " + e._s(r.value) + " ")]);
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,14 +1,52 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<div class="dev-controls">
|
|
4
|
+
<button class="light-dark-button" @click="toggleLightMode">
|
|
5
|
+
<div v-if="isLightMode" class="button-content">
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
fill="none"
|
|
9
|
+
viewBox="0 0 24 24"
|
|
10
|
+
stroke-width="1.5"
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
stroke-linecap="round"
|
|
15
|
+
stroke-linejoin="round"
|
|
16
|
+
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
|
|
17
|
+
/>
|
|
18
|
+
</svg>
|
|
19
|
+
<span>Light</span>
|
|
20
|
+
</div>
|
|
21
|
+
<div v-else class="button-content">
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
fill="none"
|
|
25
|
+
viewBox="0 0 24 24"
|
|
26
|
+
stroke-width="1.5"
|
|
27
|
+
stroke="currentColor"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
stroke-linecap="round"
|
|
31
|
+
stroke-linejoin="round"
|
|
32
|
+
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
|
|
33
|
+
/>
|
|
34
|
+
</svg>
|
|
35
|
+
<span>Dark</span>
|
|
36
|
+
</div>
|
|
37
|
+
</button>
|
|
38
|
+
</div>
|
|
39
|
+
<tiptapEditor
|
|
40
|
+
:value.sync="localtext"
|
|
41
|
+
:warnings="warnings"
|
|
42
|
+
:showMenu="showMenu"
|
|
43
|
+
:maxCharacterCount="maxCharacterCount"
|
|
44
|
+
:height="height"
|
|
45
|
+
v-on:new-character-count="localcount = $event"
|
|
46
|
+
id="unique_id"
|
|
47
|
+
placeholder="write something will-ya!"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
12
50
|
</template>
|
|
13
51
|
|
|
14
52
|
<script>
|
|
@@ -19,6 +57,7 @@ export default {
|
|
|
19
57
|
components: { tiptapEditor },
|
|
20
58
|
data() {
|
|
21
59
|
return {
|
|
60
|
+
isLightMode: true,
|
|
22
61
|
maxCharacterCount: 250, //default null for infinity
|
|
23
62
|
height: '200px', // default it 300px
|
|
24
63
|
showMenu: true, // false to hide
|
|
@@ -59,5 +98,48 @@ export default {
|
|
|
59
98
|
localcount: null,
|
|
60
99
|
};
|
|
61
100
|
},
|
|
101
|
+
methods: {
|
|
102
|
+
toggleLightMode() {
|
|
103
|
+
this.isLightMode = !this.isLightMode;
|
|
104
|
+
const htmlElement = document.documentElement;
|
|
105
|
+
if (htmlElement) {
|
|
106
|
+
if (htmlElement.getAttribute('color-scheme') === 'dark') {
|
|
107
|
+
htmlElement.setAttribute('color-scheme', 'light');
|
|
108
|
+
} else {
|
|
109
|
+
htmlElement.setAttribute('color-scheme', 'dark');
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
},
|
|
62
114
|
};
|
|
63
115
|
</script>
|
|
116
|
+
|
|
117
|
+
<style>
|
|
118
|
+
.light-dark-button {
|
|
119
|
+
background: #f4f4f5;
|
|
120
|
+
margin-bottom: 8px;
|
|
121
|
+
border-radius: 8px;
|
|
122
|
+
border: 0;
|
|
123
|
+
padding: 8px 12px 8px 12px;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
|
|
126
|
+
svg {
|
|
127
|
+
height: 1rem;
|
|
128
|
+
width: 1rem;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.button-content {
|
|
133
|
+
display: flex;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
align-items: center;
|
|
136
|
+
gap: 4px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
html[color-scheme='dark'] {
|
|
140
|
+
button {
|
|
141
|
+
background: #1f2937;
|
|
142
|
+
color: #d1d5db;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
</style>
|
package/src/tiptap-editor.vue
CHANGED
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
: 'character-count__graph'
|
|
67
67
|
"
|
|
68
68
|
>
|
|
69
|
-
<circle r="10" cx="10" cy="10"
|
|
69
|
+
<circle r="10" cx="10" cy="10" class="character-count__outer-circle" />
|
|
70
70
|
<circle
|
|
71
71
|
r="5"
|
|
72
72
|
cx="10"
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
:stroke-dasharray="`calc(${characterCountPercentage}px * 31.4 / 100) 31.4`"
|
|
78
78
|
transform="rotate(-90) translate(-20)"
|
|
79
79
|
/>
|
|
80
|
-
<circle r="6" cx="10" cy="10"
|
|
80
|
+
<circle r="6" cx="10" cy="10" class="character-count__inner-circle" />
|
|
81
81
|
</svg>
|
|
82
82
|
<div class="character-count__text" aria-live="polite">
|
|
83
83
|
{{ currentCharacterCount }} / {{ maxCharacterCount }} characters
|
|
@@ -475,7 +475,7 @@ export default {
|
|
|
475
475
|
// border-bottom: 1px solid #e5e7eb;
|
|
476
476
|
padding: 4px;
|
|
477
477
|
border-radius: 4px;
|
|
478
|
-
background
|
|
478
|
+
background: #f4f4f5;
|
|
479
479
|
display: flex;
|
|
480
480
|
|
|
481
481
|
button {
|
|
@@ -521,7 +521,7 @@ export default {
|
|
|
521
521
|
font-size: 16px;
|
|
522
522
|
outline: 0;
|
|
523
523
|
overflow-y: auto;
|
|
524
|
-
padding:
|
|
524
|
+
padding: 6px 2px 4px 2px;
|
|
525
525
|
|
|
526
526
|
.underline-red {
|
|
527
527
|
border-bottom: 3px red solid;
|
|
@@ -545,8 +545,8 @@ export default {
|
|
|
545
545
|
|
|
546
546
|
.ProseMirror {
|
|
547
547
|
height: 100%;
|
|
548
|
-
padding: 2px;
|
|
549
|
-
border-radius:
|
|
548
|
+
padding: 2px 8px 2px 8px;
|
|
549
|
+
border-radius: 4px;
|
|
550
550
|
|
|
551
551
|
&:focus {
|
|
552
552
|
outline: 2px solid #3b82f6;
|
|
@@ -573,5 +573,73 @@ export default {
|
|
|
573
573
|
color: #fb7373;
|
|
574
574
|
}
|
|
575
575
|
}
|
|
576
|
+
|
|
577
|
+
&__inner-circle {
|
|
578
|
+
fill: #f4f4f5;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
&__outer-circle {
|
|
582
|
+
fill: #ffffff;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
html[color-scheme='dark'] {
|
|
587
|
+
.tiptap-editor {
|
|
588
|
+
border: 2px solid #374151;
|
|
589
|
+
background: #111827;
|
|
590
|
+
color: #d1d5db;
|
|
591
|
+
|
|
592
|
+
.menubar {
|
|
593
|
+
background: #1f2937;
|
|
594
|
+
color: #d1d5db;
|
|
595
|
+
|
|
596
|
+
button {
|
|
597
|
+
color: #d1d5db;
|
|
598
|
+
|
|
599
|
+
&:focus {
|
|
600
|
+
outline: 2px solid #3b82f6;
|
|
601
|
+
transition: all 0.08s ease-in-out;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
&.is-active {
|
|
605
|
+
background-color: #374151;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
&.is-active:focus {
|
|
609
|
+
background-color: #4b5563;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
&:not(.is-active):hover {
|
|
613
|
+
background-color: #374151;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
&:not(.is-active):focus {
|
|
617
|
+
background-color: #374151;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
svg {
|
|
621
|
+
width: 12px;
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.character-count {
|
|
628
|
+
&__graph {
|
|
629
|
+
color: #a8c2f7;
|
|
630
|
+
|
|
631
|
+
&--warning {
|
|
632
|
+
color: #fb7373;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
&__inner-circle {
|
|
637
|
+
fill: #1f2937;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
&__outer-circle {
|
|
641
|
+
fill: #111827;
|
|
642
|
+
}
|
|
643
|
+
}
|
|
576
644
|
}
|
|
577
645
|
</style>
|