@cgboiler/biz-basic 1.0.31 → 1.0.32

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/es/index.d.ts CHANGED
@@ -5,6 +5,6 @@ declare namespace _default {
5
5
  }
6
6
  export default _default;
7
7
  export function install(app: any): void;
8
- export const version: "1.0.30";
8
+ export const version: "1.0.31";
9
9
  import RichTextEditor from './rich-text-editor';
10
10
  export { RichTextEditor };
package/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import RichTextEditor from "./rich-text-editor";
2
- const version = "1.0.30";
2
+ const version = "1.0.31";
3
3
  function install(app) {
4
4
  const components = [
5
5
  RichTextEditor
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
16
16
  type: BooleanConstructor;
17
17
  default: boolean;
18
18
  };
19
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "focus" | "mention-triggered" | "update:modelValue")[], "blur" | "focus" | "mention-triggered" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
19
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "update:modelValue")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  modelValue: {
21
21
  type: StringConstructor;
22
22
  default: string;
@@ -35,6 +35,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
35
35
  }>> & Readonly<{
36
36
  onFocus?: ((...args: any[]) => any) | undefined;
37
37
  onBlur?: ((...args: any[]) => any) | undefined;
38
+ "onHashTag-triggered"?: ((...args: any[]) => any) | undefined;
39
+ "onHashTag-input"?: ((...args: any[]) => any) | undefined;
40
+ "onHashTag-exit"?: ((...args: any[]) => any) | undefined;
38
41
  "onMention-triggered"?: ((...args: any[]) => any) | undefined;
39
42
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
40
43
  }>, {
@@ -31,7 +31,7 @@ import "./index.css";
31
31
  var stdin_default = defineComponent({
32
32
  name: "RichTextEditor",
33
33
  props: richTextEditorProps,
34
- emits: ["update:modelValue", "mention-triggered", "blur", "focus"],
34
+ emits: ["update:modelValue", "mention-triggered", "hashTag-triggered", "hashTag-input", "hashTag-exit", "blur", "focus"],
35
35
  setup(props, {
36
36
  emit,
37
37
  expose
@@ -90,9 +90,19 @@ var stdin_default = defineComponent({
90
90
  }
91
91
  });
92
92
  };
93
+ const insertHashTag = (data) => {
94
+ editor.value.commands.insertContent({
95
+ type: "hashTag",
96
+ attrs: {
97
+ id: data.hashTagId,
98
+ label: data.name
99
+ }
100
+ });
101
+ };
93
102
  expose({
94
103
  getEditor: () => editor.value,
95
- insertMention
104
+ insertMention,
105
+ insertHashTag
96
106
  });
97
107
  watch(() => props.modelValue, (newValue) => {
98
108
  var _a, _b;
@@ -1 +1 @@
1
- body .ProseMirror{flex:1;overflow:auto;outline:none;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0 0 12px}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}body .ProseMirror h1,body .ProseMirror h2{margin-top:1rem;margin-bottom:1rem}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px}body .ProseMirror pre{border-radius:.5rem;font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}body .ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention{color:#c02537;padding:0 .3em}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}
1
+ body .ProseMirror{flex:1;overflow:auto;outline:none;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0 0 12px}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}body .ProseMirror h1,body .ProseMirror h2{margin-top:1rem;margin-bottom:1rem}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px}body .ProseMirror pre{border-radius:.5rem;font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}body .ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}
@@ -1,243 +1,243 @@
1
- body .ProseMirror {
2
- flex: 1;
3
- overflow: auto;
4
- outline: none;
5
-
6
- line-height: 1.6;
7
- font-size: var(--font-base);
8
- --white: #fff;
9
- --black: #2e2b29;
10
- --gray-1: rgba(61, 37, 20, 0.05);
11
- --gray-2: rgba(61, 37, 20, 0.08);
12
- --gray-3: rgba(61, 37, 20, 0.12);
13
- --gray-4: rgba(53, 38, 28, 0.3);
14
- --gray-5: rgba(28, 25, 23, 0.6);
15
- --green: #22c55e;
16
- --purple: #6a00f5;
17
- --purple-contrast: #5800cc;
18
- --purple-light: rgba(88, 5, 255, 0.05);
19
- --yellow-contrast: #facc15;
20
- --yellow: rgba(250, 204, 21, 0.4);
21
- --yellow-light: #fffae5;
22
- --red: #ff5c33;
23
- --red-light: #ffebe5;
24
- --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
25
- :first-child {
26
- margin-top: 0;
27
- }
28
-
29
- video{
30
- width: 100%;
31
- }
32
- /* List styles */
33
- ol {
34
- list-style: auto;
35
- ol {
36
- list-style: disc;
37
- }
38
- }
39
-
40
- ul {
41
- list-style: disc;
42
- }
43
-
44
- ol,
45
- ul {
46
- padding-left: 1.5em;
47
- margin: 0 0 12px 0;
48
- li p {
49
- margin-top: 0.25em;
50
- margin-bottom: 0.25em;
51
- }
52
- }
53
-
54
- li::marker {
55
- text-align: start !important;
56
- }
57
-
58
- /* Heading styles */
59
- h1,
60
- h2,
61
- h3,
62
- h4,
63
- h5,
64
- h6 {
65
- line-height: 1.1;
66
- margin-top: 2.5rem;
67
- text-wrap: pretty;
68
- }
69
-
70
- h1,
71
- h2 {
72
- margin-top: 1rem;
73
- margin-bottom: 1rem;
74
- }
75
-
76
- h1 {
77
- font-size: 1.4rem;
78
- }
79
-
80
- h2 {
81
- font-size: 1.2rem;
82
- }
83
-
84
- h3 {
85
- font-size: 1.1rem;
86
- }
87
-
88
- h4,
89
- h5,
90
- h6 {
91
- font-size: 1rem;
92
- }
93
-
94
- /* Link styles */
95
- a,
96
- .editor-link {
97
- color: var(--purple);
98
- text-decoration: underline;
99
- cursor: pointer;
100
- transition: color 0.2s ease;
101
-
102
- &:hover {
103
- color: var(--purple-contrast);
104
- text-decoration: underline;
105
- }
106
- }
107
-
108
- /* Code and preformatted text styles */
109
- code {
110
- background-color: #ffe5e8;
111
- border-radius: 0.4rem;
112
- color: #c02537;
113
- padding: 2px 4px;
114
- }
115
-
116
- pre {
117
- border-radius: 0.5rem;
118
- font-family: 'JetBrainsMono', monospace;
119
- margin: 1.5rem 0;
120
- padding: 0.75rem 1rem;
121
-
122
- code {
123
- background: none;
124
- color: inherit;
125
- font-size: 0.8rem;
126
- padding: 0;
127
- }
128
- }
129
-
130
- blockquote {
131
- border-left: 3px solid var(--gray-3);
132
- margin: 1.5rem 0;
133
- padding-left: 1rem;
134
- }
135
-
136
- hr {
137
- border: none;
138
- border-top: 1px solid var(--gray-2);
139
- margin: 2rem 0;
140
- }
141
-
142
- /* Placeholder (at the top) */
143
- p.is-editor-empty:first-child::before {
144
- color: var(--gray-4);
145
- content: attr(data-placeholder);
146
- float: left;
147
- height: 0;
148
- pointer-events: none;
149
- }
150
-
151
- .is-empty::before {
152
- color: var(--gray-4);
153
- content: attr(data-placeholder);
154
- float: left;
155
- height: 0;
156
- pointer-events: none;
157
- }
158
- /* Table-specific styling */
159
- table {
160
- border-collapse: collapse;
161
- margin: 0;
162
- overflow: hidden;
163
- table-layout: fixed;
164
- width: 100%;
165
-
166
- td,
167
- th {
168
- border: 1px solid var(--gray-3);
169
- box-sizing: border-box;
170
- min-width: 1em;
171
- padding: 6px 8px;
172
- position: relative;
173
- vertical-align: top;
174
-
175
- > * {
176
- margin-bottom: 0;
177
- }
178
- }
179
-
180
- th {
181
- background-color: var(--gray-1);
182
- font-weight: bold;
183
- text-align: left;
184
- }
185
-
186
- .selectedCell:after {
187
- background: var(--gray-2);
188
- content: '';
189
- left: 0;
190
- right: 0;
191
- top: 0;
192
- bottom: 0;
193
- pointer-events: none;
194
- position: absolute;
195
- z-index: 2;
196
- }
197
-
198
- .column-resize-handle {
199
- background-color: var(--purple);
200
- bottom: -2px;
201
- pointer-events: none;
202
- position: absolute;
203
- right: -2px;
204
- top: 0;
205
- width: 4px;
206
- }
207
- }
208
-
209
- .tableWrapper {
210
- margin: 1.5rem 0;
211
- overflow-x: auto;
212
- }
213
-
214
- &.resize-cursor {
215
- cursor: ew-resize;
216
- cursor: col-resize;
217
- }
218
- img {
219
- max-width: 100%;
220
- }
221
- // @人的样式
222
- .mention {
223
- color: #c02537;
224
- padding: 0 0.3em;
225
- }
226
- }
227
-
228
- // animation
229
- .animation-indent--right {
230
- animation: indent-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 alternate-reverse;
231
- }
232
-
233
- @keyframes indent-right {
234
- 0% {
235
- -webkit-transform: translateX(0);
236
- transform: translateX(0);
237
- }
238
-
239
- to {
240
- -webkit-transform: translateX(12px);
241
- transform: translateX(12px);
242
- }
243
- }
1
+ body .ProseMirror {
2
+ flex: 1;
3
+ overflow: auto;
4
+ outline: none;
5
+
6
+ line-height: 1.6;
7
+ font-size: var(--font-base);
8
+ --white: #fff;
9
+ --black: #2e2b29;
10
+ --gray-1: rgba(61, 37, 20, 0.05);
11
+ --gray-2: rgba(61, 37, 20, 0.08);
12
+ --gray-3: rgba(61, 37, 20, 0.12);
13
+ --gray-4: rgba(53, 38, 28, 0.3);
14
+ --gray-5: rgba(28, 25, 23, 0.6);
15
+ --green: #22c55e;
16
+ --purple: #6a00f5;
17
+ --purple-contrast: #5800cc;
18
+ --purple-light: rgba(88, 5, 255, 0.05);
19
+ --yellow-contrast: #facc15;
20
+ --yellow: rgba(250, 204, 21, 0.4);
21
+ --yellow-light: #fffae5;
22
+ --red: #ff5c33;
23
+ --red-light: #ffebe5;
24
+ --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
25
+ :first-child {
26
+ margin-top: 0;
27
+ }
28
+
29
+ video{
30
+ width: 100%;
31
+ }
32
+ /* List styles */
33
+ ol {
34
+ list-style: auto;
35
+ ol {
36
+ list-style: disc;
37
+ }
38
+ }
39
+
40
+ ul {
41
+ list-style: disc;
42
+ }
43
+
44
+ ol,
45
+ ul {
46
+ padding-left: 1.5em;
47
+ margin: 0 0 12px 0;
48
+ li p {
49
+ margin-top: 0.25em;
50
+ margin-bottom: 0.25em;
51
+ }
52
+ }
53
+
54
+ li::marker {
55
+ text-align: start !important;
56
+ }
57
+
58
+ /* Heading styles */
59
+ h1,
60
+ h2,
61
+ h3,
62
+ h4,
63
+ h5,
64
+ h6 {
65
+ line-height: 1.1;
66
+ margin-top: 2.5rem;
67
+ text-wrap: pretty;
68
+ }
69
+
70
+ h1,
71
+ h2 {
72
+ margin-top: 1rem;
73
+ margin-bottom: 1rem;
74
+ }
75
+
76
+ h1 {
77
+ font-size: 1.4rem;
78
+ }
79
+
80
+ h2 {
81
+ font-size: 1.2rem;
82
+ }
83
+
84
+ h3 {
85
+ font-size: 1.1rem;
86
+ }
87
+
88
+ h4,
89
+ h5,
90
+ h6 {
91
+ font-size: 1rem;
92
+ }
93
+
94
+ /* Link styles */
95
+ a,
96
+ .editor-link {
97
+ color: var(--purple);
98
+ text-decoration: underline;
99
+ cursor: pointer;
100
+ transition: color 0.2s ease;
101
+
102
+ &:hover {
103
+ color: var(--purple-contrast);
104
+ text-decoration: underline;
105
+ }
106
+ }
107
+
108
+ /* Code and preformatted text styles */
109
+ code {
110
+ background-color: #ffe5e8;
111
+ border-radius: 0.4rem;
112
+ color: #c02537;
113
+ padding: 2px 4px;
114
+ }
115
+
116
+ pre {
117
+ border-radius: 0.5rem;
118
+ font-family: 'JetBrainsMono', monospace;
119
+ margin: 1.5rem 0;
120
+ padding: 0.75rem 1rem;
121
+
122
+ code {
123
+ background: none;
124
+ color: inherit;
125
+ font-size: 0.8rem;
126
+ padding: 0;
127
+ }
128
+ }
129
+
130
+ blockquote {
131
+ border-left: 3px solid var(--gray-3);
132
+ margin: 1.5rem 0;
133
+ padding-left: 1rem;
134
+ }
135
+
136
+ hr {
137
+ border: none;
138
+ border-top: 1px solid var(--gray-2);
139
+ margin: 2rem 0;
140
+ }
141
+
142
+ /* Placeholder (at the top) */
143
+ p.is-editor-empty:first-child::before {
144
+ color: var(--gray-4);
145
+ content: attr(data-placeholder);
146
+ float: left;
147
+ height: 0;
148
+ pointer-events: none;
149
+ }
150
+
151
+ .is-empty::before {
152
+ color: var(--gray-4);
153
+ content: attr(data-placeholder);
154
+ float: left;
155
+ height: 0;
156
+ pointer-events: none;
157
+ }
158
+ /* Table-specific styling */
159
+ table {
160
+ border-collapse: collapse;
161
+ margin: 0;
162
+ overflow: hidden;
163
+ table-layout: fixed;
164
+ width: 100%;
165
+
166
+ td,
167
+ th {
168
+ border: 1px solid var(--gray-3);
169
+ box-sizing: border-box;
170
+ min-width: 1em;
171
+ padding: 6px 8px;
172
+ position: relative;
173
+ vertical-align: top;
174
+
175
+ > * {
176
+ margin-bottom: 0;
177
+ }
178
+ }
179
+
180
+ th {
181
+ background-color: var(--gray-1);
182
+ font-weight: bold;
183
+ text-align: left;
184
+ }
185
+
186
+ .selectedCell:after {
187
+ background: var(--gray-2);
188
+ content: '';
189
+ left: 0;
190
+ right: 0;
191
+ top: 0;
192
+ bottom: 0;
193
+ pointer-events: none;
194
+ position: absolute;
195
+ z-index: 2;
196
+ }
197
+
198
+ .column-resize-handle {
199
+ background-color: var(--purple);
200
+ bottom: -2px;
201
+ pointer-events: none;
202
+ position: absolute;
203
+ right: -2px;
204
+ top: 0;
205
+ width: 4px;
206
+ }
207
+ }
208
+
209
+ .tableWrapper {
210
+ margin: 1.5rem 0;
211
+ overflow-x: auto;
212
+ }
213
+
214
+ &.resize-cursor {
215
+ cursor: ew-resize;
216
+ cursor: col-resize;
217
+ }
218
+ img {
219
+ max-width: 100%;
220
+ }
221
+ // @人的样式 #话题的样式
222
+ .mention, .hash-tag {
223
+ color: #c02537;
224
+ padding: 0 0.3em;
225
+ }
226
+ }
227
+
228
+ // animation
229
+ .animation-indent--right {
230
+ animation: indent-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 alternate-reverse;
231
+ }
232
+
233
+ @keyframes indent-right {
234
+ 0% {
235
+ -webkit-transform: translateX(0);
236
+ transform: translateX(0);
237
+ }
238
+
239
+ to {
240
+ -webkit-transform: translateX(12px);
241
+ transform: translateX(12px);
242
+ }
243
+ }
@@ -3,6 +3,10 @@ export interface MentionData {
3
3
  userId: string;
4
4
  name: string;
5
5
  }
6
+ export interface HashTagData {
7
+ hashTagId: string;
8
+ name: string;
9
+ }
6
10
  export declare const richTextEditorProps: {
7
11
  modelValue: {
8
12
  type: StringConstructor;
@@ -1,2 +1,2 @@
1
1
  import { Extension } from '@tiptap/core';
2
- export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];
2
+ export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any>)[];
@@ -10,6 +10,53 @@ import { Extension, InputRule } from "@tiptap/core";
10
10
  import HtmlBlock from "./extensions/HtmlBlock";
11
11
  import { Placeholder } from "@tiptap/extensions";
12
12
  function useExtensions({ props, emit }) {
13
+ const HashTag = Mention.extend({
14
+ /**
15
+ * 类级说明:重命名节点为 'hashTag',使其与 '@' 的 'mention' 节点并存。
16
+ */
17
+ name: "hashTag"
18
+ }).configure({
19
+ HTMLAttributes: {
20
+ class: "hash-tag"
21
+ },
22
+ deleteTriggerWithBackspace: true,
23
+ suggestion: {
24
+ char: "#",
25
+ allowedPrefixes: null,
26
+ render() {
27
+ let activeRange = null;
28
+ let activeEditor = null;
29
+ return {
30
+ onStart({ editor, range, command, query }) {
31
+ activeRange = range;
32
+ activeEditor = editor;
33
+ emit("hashTag-triggered", (data) => {
34
+ try {
35
+ (activeEditor || editor).chain().focus().deleteRange(activeRange || range).insertContentAt((activeRange || range).from, {
36
+ type: "hashTag",
37
+ attrs: { id: data.hashTagId, label: data.name }
38
+ }).setTextSelection((activeRange || range).from + 1).insertContent(" ").run();
39
+ } catch (e) {
40
+ command({ id: data.hashTagId, label: data.name });
41
+ (activeEditor || editor).chain().focus().insertContent(" ").run();
42
+ }
43
+ });
44
+ emit("hashTag-input", query != null ? query : "");
45
+ },
46
+ onUpdate({ query, range, editor }) {
47
+ activeRange = range || activeRange;
48
+ activeEditor = editor || activeEditor;
49
+ emit("hashTag-input", query != null ? query : "");
50
+ },
51
+ onExit() {
52
+ activeRange = null;
53
+ activeEditor = null;
54
+ emit("hashTag-exit");
55
+ }
56
+ };
57
+ }
58
+ }
59
+ });
13
60
  const extensions = [
14
61
  StarterKit,
15
62
  HtmlBlock,
@@ -154,7 +201,9 @@ function useExtensions({ props, emit }) {
154
201
  };
155
202
  }
156
203
  }
157
- })
204
+ }),
205
+ // HashTag 扩展:支持 # 触发、实时输入同步、完成后插入为 “#+文字”
206
+ HashTag
158
207
  ];
159
208
  return extensions;
160
209
  }
@@ -1,6 +1,6 @@
1
- declare module '*.vue' {
2
- // eslint-disable-next-line
3
- import { DefineComponent } from 'vue'
4
- const Component: DefineComponent
5
- export default Component
6
- }
1
+ declare module '*.vue' {
2
+ // eslint-disable-next-line
3
+ import { DefineComponent } from 'vue'
4
+ const Component: DefineComponent
5
+ export default Component
6
+ }