@cgboiler/biz-basic 1.0.34 → 1.0.36

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.33";
8
+ export const version: "1.0.35";
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.33";
2
+ const version = "1.0.35";
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" | "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<{
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" | "hashTag-clicked")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "update:modelValue" | "hashTag-clicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  modelValue: {
21
21
  type: StringConstructor;
22
22
  default: string;
@@ -40,6 +40,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
40
40
  "onHashTag-exit"?: ((...args: any[]) => any) | undefined;
41
41
  "onMention-triggered"?: ((...args: any[]) => any) | undefined;
42
42
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
43
+ "onHashTag-clicked"?: ((...args: any[]) => any) | undefined;
43
44
  }>, {
44
45
  modelValue: string;
45
46
  placeholder: string;
@@ -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", "hashTag-triggered", "hashTag-input", "hashTag-exit", "blur", "focus"],
34
+ emits: ["update:modelValue", "mention-triggered", "hashTag-triggered", "hashTag-input", "hashTag-exit", "hashTag-clicked", "blur", "focus"],
35
35
  setup(props, {
36
36
  emit,
37
37
  expose
@@ -149,6 +149,21 @@ var stdin_default = defineComponent({
149
149
  event.preventDefault();
150
150
  }
151
151
  };
152
+ const hashTagClickHandler = (event) => {
153
+ const target = event.target;
154
+ const tagEl = target.closest(".hash-tag") || null;
155
+ if (tagEl) {
156
+ const id = tagEl.getAttribute("data-id") || "";
157
+ const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
158
+ emit("hashTag-clicked", {
159
+ hashTagId: id,
160
+ name: label
161
+ });
162
+ event.stopPropagation();
163
+ event.preventDefault();
164
+ return;
165
+ }
166
+ };
152
167
  const HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
153
168
  const MAX_HISTORY_ITEMS = 10;
154
169
  let saveTimeoutId = null;
@@ -200,6 +215,7 @@ var stdin_default = defineComponent({
200
215
  const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
201
216
  if (editorElement) {
202
217
  editorElement.addEventListener("click", imageClickHandler);
218
+ editorElement.addEventListener("click", hashTagClickHandler);
203
219
  }
204
220
  });
205
221
  });
@@ -211,6 +227,7 @@ var stdin_default = defineComponent({
211
227
  const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
212
228
  if (editorElement) {
213
229
  editorElement.removeEventListener("click", imageClickHandler);
230
+ editorElement.removeEventListener("click", hashTagClickHandler);
214
231
  }
215
232
  (_c = editor.value) == null ? void 0 : _c.destroy();
216
233
  });
@@ -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, .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
- }
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
+ }
@@ -11,10 +11,21 @@ import HtmlBlock from "./extensions/HtmlBlock";
11
11
  import { Placeholder } from "@tiptap/extensions";
12
12
  function useExtensions({ props, emit }) {
13
13
  const HashTag = Mention.extend({
14
- /**
15
- * 类级说明:重命名节点为 'hashTag',使其与 '@' 的 'mention' 节点并存。
16
- */
17
- name: "hashTag"
14
+ name: "hashTag",
15
+ renderHTML({ node, HTMLAttributes }) {
16
+ var _a, _b, _c, _d;
17
+ const id = (_b = (_a = node == null ? void 0 : node.attrs) == null ? void 0 : _a.id) != null ? _b : "";
18
+ const label = (_d = (_c = node == null ? void 0 : node.attrs) == null ? void 0 : _c.label) != null ? _d : "";
19
+ const attrs = {
20
+ class: "hash-tag",
21
+ "data-type": "hashTag",
22
+ "data-id": id,
23
+ "data-label": label,
24
+ "data-hash-tag": "#",
25
+ contenteditable: "false"
26
+ };
27
+ return ["span", attrs, `#${label}`];
28
+ }
18
29
  }).configure({
19
30
  HTMLAttributes: {
20
31
  class: "hash-tag"
@@ -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
+ }
@@ -1,24 +1,24 @@
1
- import 'vue';
2
-
3
- type EventHandler = (...args: any[]) => void;
4
-
5
- declare module 'vue' {
6
- interface ComponentCustomProps {
7
- id?: string;
8
- role?: string;
9
- tabindex?: number;
10
- onClick?: EventHandler;
11
- onTouchend?: EventHandler;
12
- onTouchmove?: EventHandler;
13
- onTouchstart?: EventHandler;
14
- onTouchcancel?: EventHandler;
15
- onTouchmovePassive?: EventHandler;
16
- onTouchstartPassive?: EventHandler;
17
- }
18
-
19
- interface HTMLAttributes {
20
- onTouchmovePassive?: EventHandler;
21
- onTouchstartPassive?: EventHandler;
22
- onClickCapture?: EventHandler;
23
- }
24
- }
1
+ import 'vue';
2
+
3
+ type EventHandler = (...args: any[]) => void;
4
+
5
+ declare module 'vue' {
6
+ interface ComponentCustomProps {
7
+ id?: string;
8
+ role?: string;
9
+ tabindex?: number;
10
+ onClick?: EventHandler;
11
+ onTouchend?: EventHandler;
12
+ onTouchmove?: EventHandler;
13
+ onTouchstart?: EventHandler;
14
+ onTouchcancel?: EventHandler;
15
+ onTouchmovePassive?: EventHandler;
16
+ onTouchstartPassive?: EventHandler;
17
+ }
18
+
19
+ interface HTMLAttributes {
20
+ onTouchmovePassive?: EventHandler;
21
+ onTouchstartPassive?: EventHandler;
22
+ onClickCapture?: EventHandler;
23
+ }
24
+ }
package/lib/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.33";
8
+ export const version: "1.0.35";
9
9
  import RichTextEditor from './rich-text-editor';
10
10
  export { RichTextEditor };
package/lib/index.js CHANGED
@@ -36,7 +36,7 @@ __export(stdin_exports, {
36
36
  module.exports = __toCommonJS(stdin_exports);
37
37
  var import_rich_text_editor = __toESM(require("./rich-text-editor"));
38
38
  __reExport(stdin_exports, require("./rich-text-editor"), module.exports);
39
- const version = "1.0.33";
39
+ const version = "1.0.35";
40
40
  function install(app) {
41
41
  const components = [
42
42
  import_rich_text_editor.default
@@ -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" | "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<{
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" | "hashTag-clicked")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "update:modelValue" | "hashTag-clicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  modelValue: {
21
21
  type: StringConstructor;
22
22
  default: string;
@@ -40,6 +40,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
40
40
  "onHashTag-exit"?: ((...args: any[]) => any) | undefined;
41
41
  "onMention-triggered"?: ((...args: any[]) => any) | undefined;
42
42
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
43
+ "onHashTag-clicked"?: ((...args: any[]) => any) | undefined;
43
44
  }>, {
44
45
  modelValue: string;
45
46
  placeholder: string;
@@ -63,7 +63,7 @@ var import_index = require("./index.css");
63
63
  var stdin_default = (0, import_vue2.defineComponent)({
64
64
  name: "RichTextEditor",
65
65
  props: import_types.richTextEditorProps,
66
- emits: ["update:modelValue", "mention-triggered", "hashTag-triggered", "hashTag-input", "hashTag-exit", "blur", "focus"],
66
+ emits: ["update:modelValue", "mention-triggered", "hashTag-triggered", "hashTag-input", "hashTag-exit", "hashTag-clicked", "blur", "focus"],
67
67
  setup(props, {
68
68
  emit,
69
69
  expose
@@ -181,6 +181,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
181
181
  event.preventDefault();
182
182
  }
183
183
  };
184
+ const hashTagClickHandler = (event) => {
185
+ const target = event.target;
186
+ const tagEl = target.closest(".hash-tag") || null;
187
+ if (tagEl) {
188
+ const id = tagEl.getAttribute("data-id") || "";
189
+ const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
190
+ emit("hashTag-clicked", {
191
+ hashTagId: id,
192
+ name: label
193
+ });
194
+ event.stopPropagation();
195
+ event.preventDefault();
196
+ return;
197
+ }
198
+ };
184
199
  const HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
185
200
  const MAX_HISTORY_ITEMS = 10;
186
201
  let saveTimeoutId = null;
@@ -232,6 +247,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
232
247
  const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
233
248
  if (editorElement) {
234
249
  editorElement.addEventListener("click", imageClickHandler);
250
+ editorElement.addEventListener("click", hashTagClickHandler);
235
251
  }
236
252
  });
237
253
  });
@@ -243,6 +259,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
243
259
  const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
244
260
  if (editorElement) {
245
261
  editorElement.removeEventListener("click", imageClickHandler);
262
+ editorElement.removeEventListener("click", hashTagClickHandler);
246
263
  }
247
264
  (_c = editor.value) == null ? void 0 : _c.destroy();
248
265
  });
@@ -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, .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
- }
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
+ }
@@ -43,10 +43,21 @@ var import_HtmlBlock = __toESM(require("./extensions/HtmlBlock"));
43
43
  var import_extensions = require("@tiptap/extensions");
44
44
  function useExtensions({ props, emit }) {
45
45
  const HashTag = import_extension_mention.default.extend({
46
- /**
47
- * 类级说明:重命名节点为 'hashTag',使其与 '@' 的 'mention' 节点并存。
48
- */
49
- name: "hashTag"
46
+ name: "hashTag",
47
+ renderHTML({ node, HTMLAttributes }) {
48
+ var _a, _b, _c, _d;
49
+ const id = (_b = (_a = node == null ? void 0 : node.attrs) == null ? void 0 : _a.id) != null ? _b : "";
50
+ const label = (_d = (_c = node == null ? void 0 : node.attrs) == null ? void 0 : _c.label) != null ? _d : "";
51
+ const attrs = {
52
+ class: "hash-tag",
53
+ "data-type": "hashTag",
54
+ "data-id": id,
55
+ "data-label": label,
56
+ "data-hash-tag": "#",
57
+ contenteditable: "false"
58
+ };
59
+ return ["span", attrs, `#${label}`];
60
+ }
50
61
  }).configure({
51
62
  HTMLAttributes: {
52
63
  class: "hash-tag"
@@ -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
+ }
@@ -1,24 +1,24 @@
1
- import 'vue';
2
-
3
- type EventHandler = (...args: any[]) => void;
4
-
5
- declare module 'vue' {
6
- interface ComponentCustomProps {
7
- id?: string;
8
- role?: string;
9
- tabindex?: number;
10
- onClick?: EventHandler;
11
- onTouchend?: EventHandler;
12
- onTouchmove?: EventHandler;
13
- onTouchstart?: EventHandler;
14
- onTouchcancel?: EventHandler;
15
- onTouchmovePassive?: EventHandler;
16
- onTouchstartPassive?: EventHandler;
17
- }
18
-
19
- interface HTMLAttributes {
20
- onTouchmovePassive?: EventHandler;
21
- onTouchstartPassive?: EventHandler;
22
- onClickCapture?: EventHandler;
23
- }
24
- }
1
+ import 'vue';
2
+
3
+ type EventHandler = (...args: any[]) => void;
4
+
5
+ declare module 'vue' {
6
+ interface ComponentCustomProps {
7
+ id?: string;
8
+ role?: string;
9
+ tabindex?: number;
10
+ onClick?: EventHandler;
11
+ onTouchend?: EventHandler;
12
+ onTouchmove?: EventHandler;
13
+ onTouchstart?: EventHandler;
14
+ onTouchcancel?: EventHandler;
15
+ onTouchmovePassive?: EventHandler;
16
+ onTouchstartPassive?: EventHandler;
17
+ }
18
+
19
+ interface HTMLAttributes {
20
+ onTouchmovePassive?: EventHandler;
21
+ onTouchstartPassive?: EventHandler;
22
+ onClickCapture?: EventHandler;
23
+ }
24
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cgboiler/biz-basic",
3
- "version": "1.0.34",
3
+ "version": "1.0.36",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",