whyuzeim 1.1.59 → 1.1.60

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.
Files changed (7) hide show
  1. package/cjs/HighlyCustomChat/CodeMsg/index.d.ts +2 -2
  2. package/cjs/HighlyCustomChat/CodeMsg/index.js +19 -9
  3. package/cjs/HighlyCustomChat/CodeMsg/style/index.moduel.scss +20 -193
  4. package/es/HighlyCustomChat/CodeMsg/index.d.ts +2 -2
  5. package/es/HighlyCustomChat/CodeMsg/index.js +19 -9
  6. package/es/HighlyCustomChat/CodeMsg/style/index.moduel.scss +20 -193
  7. package/package.json +1 -1
package/cjs/HighlyCustomChat/CodeMsg/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
+ import React from "react";
1
2
  import { NoticeMessageBody } from "agora-chat-uikit/types/module/noticeMessage/NoticeMessage";
2
3
  import { ChatSDK } from "agora-chat-uikit/types/module/SDK";
3
- import 'highlight.js/styles/default.css';
4
- import React from "react";
4
+ import 'highlight.js/styles/night-owl.css';
5
5
  import "./style/index.moduel.scss";
6
6
  interface ICodeMsg {
7
7
  msg: ChatSDK.MessageBody | NoticeMessageBody;
package/cjs/HighlyCustomChat/CodeMsg/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
4
4
  var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
5
+ var React = require('react');
5
6
  var agoraChatUikit = require('agora-chat-uikit');
6
7
  var hljs = require('highlight.js');
7
- require('highlight.js/styles/default.css');
8
- var React = require('react');
8
+ require('highlight.js/styles/night-owl.css');
9
9
  var copy = require('copy-to-clipboard');
10
10
  require('./style/index.moduel.scss');
11
11
 
@@ -45,7 +45,6 @@ var CodeMsg = function CodeMsg(props) {
45
45
  console.error('复制失败');
46
46
  }
47
47
  };
48
- // 修改高亮代码的函数
49
48
  return /*#__PURE__*/React.createElement(agoraChatUikit.BaseMessage, {
50
49
  bubbleType: "none",
51
50
  reaction: false,
@@ -90,7 +89,10 @@ var CodeMsg = function CodeMsg(props) {
90
89
  d: "M8 0.0214844H2.58333V2.5396H0.0214844V8.01198H2.58333V10.5301H8V8.01198H10.5618V2.5396H8V0.0214844Z",
91
90
  fill: "#0083FF"
92
91
  })), /*#__PURE__*/React.createElement("span", {
93
- className: "filename-text"
92
+ style: {
93
+ color: "white",
94
+ fontWeight: "500"
95
+ }
94
96
  }, codeType)), /*#__PURE__*/React.createElement("button", {
95
97
  onClick: function onClick() {
96
98
  onApply && onApply(msg.customExts.code);
@@ -98,18 +100,26 @@ var CodeMsg = function CodeMsg(props) {
98
100
  },
99
101
  className: "flex items-center h-6 px-2 py-1 bg-white rounded text-black/90 text-[10px] font-normal"
100
102
  }, onApply ? 'Apply' : copyStatus === "copied" ? "Copied!" : "Copy")), /*#__PURE__*/React.createElement("div", {
101
- className: "flex-1 gap-2 flex flex-col justify-between h-full overflow-hidden"
103
+ className: "flex-1 gap-2 flex flex-col justify-between h-full overflow-hidden mt-2"
102
104
  }, /*#__PURE__*/React.createElement("div", {
103
- className: "code-scroll-container w-full max-h-[300px] overflow-y-auto"
105
+ className: "code-scroll-container w-full max-h-[300px] overflow-y-auto overflow-x-hidden"
104
106
  }, /*#__PURE__*/React.createElement("pre", {
105
107
  className: "bg-transparent w-full h-full"
106
108
  }, /*#__PURE__*/React.createElement("div", {
107
- className: "code-block-container",
108
109
  style: {
109
- border: "none"
110
+ background: "transparent",
111
+ borderRadius: "4px",
112
+ padding: "8px"
110
113
  }
111
114
  }, /*#__PURE__*/React.createElement("code", {
112
- className: "language-".concat(codeType, " hljs"),
115
+ style: {
116
+ whiteSpace: "pre-wrap",
117
+ wordBreak: "break-word",
118
+ overflowWrap: "break-word",
119
+ display: "block",
120
+ overflow: "visible"
121
+ },
122
+ className: "language-".concat(codeType),
113
123
  dangerouslySetInnerHTML: {
114
124
  __html: hljs.highlight(rawCode, {
115
125
  language: codeType,
package/cjs/HighlyCustomChat/CodeMsg/style/index.moduel.scss CHANGED
@@ -1,202 +1,29 @@
1
- /* 代码高亮样式，支持暗色和亮色主题 */
1
+ /* 简化的代码高亮样式 */
2
2
 
3
- /* 通用样式 */
4
- .code-block-container {
5
- border-radius: 4px;
6
- margin: 4px 0;
7
- padding: 8px 4px;
8
- background: transparent !important;
3
+ /* 确保pre元素和其他容器没有边框和背景 */
4
+ pre, .code-scroll-container, code, .hljs {
9
5
  border: none !important;
10
- }
11
-
12
- /* 通用代码样式 */
13
- code.hljs {
14
- display: block;
15
- overflow: auto;
6
+ outline: none !important;
16
7
  background: transparent !important;
17
- font-size: 13px;
18
- line-height: 1.4;
19
- font-family: Monaco, Consolas, 'Courier New', monospace;
20
- white-space: pre-wrap;
21
- word-wrap: break-word;
22
- width: 100%;
23
- max-width: 100%;
24
- padding: 0;
25
- }
26
-
27
- /* 深色主题下的代码高亮 - 适用于深蓝/黑色背景 */
28
- .im-dark, .im-custom {
29
- /* 基础文本颜色 */
30
- .hljs {
31
- color: #f8f8f2 !important;
32
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
33
- }
34
-
35
- /* 关键字 */
36
- .hljs-keyword,
37
- .hljs-selector-tag,
38
- .hljs-tag,
39
- .hljs-name {
40
- color: #ff79c6 !important;
41
- font-weight: bold;
42
- }
43
-
44
- /* 字符串 */
45
- .hljs-string,
46
- .hljs-title,
47
- .hljs-section,
48
- .hljs-attribute,
49
- .hljs-literal,
50
- .hljs-template-tag,
51
- .hljs-template-variable,
52
- .hljs-type,
53
- .hljs-addition {
54
- color: #f1fa8c !important;
55
- }
56
-
57
- /* 数字、布尔值 */
58
- .hljs-number,
59
- .hljs-selector-attr,
60
- .hljs-selector-pseudo,
61
- .hljs-meta-string,
62
- .hljs-built_in {
63
- color: #bd93f9 !important;
64
- }
65
-
66
- /* 属性、变量 */
67
- .hljs-attr,
68
- .hljs-variable,
69
- .hljs-property,
70
- .hljs-params,
71
- .hljs-class .hljs-title {
72
- color: #8be9fd !important;
73
- }
74
-
75
- /* 注释 */
76
- .hljs-comment,
77
- .hljs-quote,
78
- .hljs-doctag {
79
- color: #6272a4 !important;
80
- font-style: italic;
81
- }
82
-
83
- /* 函数 */
84
- .hljs-function .hljs-title {
85
- color: #50fa7b !important;
86
- font-weight: bold;
87
- }
88
-
89
- /* 操作符 */
90
- .hljs-operator,
91
- .hljs-entity,
92
- .hljs-url,
93
- .language-css .hljs-string,
94
- .style .hljs-string {
95
- color: #ff79c6 !important;
96
- }
97
- }
98
-
99
- /* 浅色主题下的代码高亮 - 适用于浅色/蓝色背景 */
100
- .im-light {
101
- /* 基础文本颜色 */
102
- .hljs {
103
- color: #24292e !important;
104
- }
105
-
106
- /* 关键字 */
107
- .hljs-keyword,
108
- .hljs-selector-tag,
109
- .hljs-tag,
110
- .hljs-name {
111
- color: #d73a49 !important;
112
- font-weight: bold;
113
- }
114
-
115
- /* 字符串 */
116
- .hljs-string,
117
- .hljs-title,
118
- .hljs-section,
119
- .hljs-attribute,
120
- .hljs-literal,
121
- .hljs-template-tag,
122
- .hljs-template-variable,
123
- .hljs-type,
124
- .hljs-addition {
125
- color: #032f62 !important;
126
- }
127
-
128
- /* 数字、布尔值 */
129
- .hljs-number,
130
- .hljs-selector-attr,
131
- .hljs-selector-pseudo,
132
- .hljs-meta-string,
133
- .hljs-built_in {
134
- color: #005cc5 !important;
135
- }
136
-
137
- /* 属性、变量 */
138
- .hljs-attr,
139
- .hljs-variable,
140
- .hljs-property,
141
- .hljs-params,
142
- .hljs-class .hljs-title {
143
- color: #6f42c1 !important;
144
- }
145
-
146
- /* 注释 */
147
- .hljs-comment,
148
- .hljs-quote,
149
- .hljs-doctag {
150
- color: #6a737d !important;
151
- font-style: italic;
152
- }
153
-
154
- /* 函数 */
155
- .hljs-function .hljs-title {
156
- color: #6f42c1 !important;
157
- font-weight: bold;
158
- }
159
-
160
- /* 操作符 */
161
- .hljs-operator,
162
- .hljs-entity,
163
- .hljs-url,
164
- .language-css .hljs-string,
165
- .style .hljs-string {
166
- color: #d73a49 !important;
167
- }
168
- }
169
-
170
- /* 强调 */
171
- .hljs-emphasis {
172
- font-style: italic;
8
+ box-shadow: none !important;
173
9
  }
174
10
 
175
- .hljs-strong {
176
- font-weight: bold;
11
+ /* 强制所有代码自动换行 */
12
+ pre, code, .hljs {
13
+ white-space: pre-wrap !important;
14
+ word-wrap: break-word !important;
15
+ word-break: break-word !important;
16
+ overflow-wrap: break-word !important;
17
+ overflow: visible !important;
18
+ width: 100% !important;
177
19
  }
178
20
 
179
- /* 确保pre元素和其他容器也没有边框 */
180
- pre, .code-scroll-container {
181
- border: none !important;
182
- outline: none !important;
21
+ /* 代码样式重置 */
22
+ code {
23
+ font-family: Monaco, Consolas, 'Courier New', monospace !important;
24
+ font-size: 14px !important;
25
+ line-height: 1.5 !important;
183
26
  background: transparent !important;
184
- }
185
-
186
- /* 文件名样式，根据主题自动调整颜色 */
187
- .filename-text {
188
- font-size: 10px;
189
- font-weight: 500;
190
-
191
- /* 深色模式 - 白色文本 */
192
- .im-dark &, .im-custom & {
193
- color: white;
194
- text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
195
- }
196
-
197
- /* 浅色模式 - 黑色文本 */
198
- .im-light & {
199
- color: #000000;
200
- text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
201
- }
27
+ padding: 0 !important;
28
+ margin: 0 !important;
202
29
  }
package/es/HighlyCustomChat/CodeMsg/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
+ import React from "react";
1
2
  import { NoticeMessageBody } from "agora-chat-uikit/types/module/noticeMessage/NoticeMessage";
2
3
  import { ChatSDK } from "agora-chat-uikit/types/module/SDK";
3
- import 'highlight.js/styles/default.css';
4
- import React from "react";
4
+ import 'highlight.js/styles/night-owl.css';
5
5
  import "./style/index.moduel.scss";
6
6
  interface ICodeMsg {
7
7
  msg: ChatSDK.MessageBody | NoticeMessageBody;
package/es/HighlyCustomChat/CodeMsg/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
2
2
  import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
3
+ import React, { useState } from 'react';
3
4
  import { BaseMessage } from 'agora-chat-uikit';
4
5
  import hljs from 'highlight.js';
5
- import 'highlight.js/styles/default.css';
6
- import React, { useState } from 'react';
6
+ import 'highlight.js/styles/night-owl.css';
7
7
  import copy from 'copy-to-clipboard';
8
8
  import './style/index.moduel.scss';
9
9
 
@@ -43,7 +43,6 @@ var CodeMsg = function CodeMsg(props) {
43
43
  console.error('复制失败');
44
44
  }
45
45
  };
46
- // 修改高亮代码的函数
47
46
  return /*#__PURE__*/React.createElement(BaseMessage, {
48
47
  bubbleType: "none",
49
48
  reaction: false,
@@ -88,7 +87,10 @@ var CodeMsg = function CodeMsg(props) {
88
87
  d: "M8 0.0214844H2.58333V2.5396H0.0214844V8.01198H2.58333V10.5301H8V8.01198H10.5618V2.5396H8V0.0214844Z",
89
88
  fill: "#0083FF"
90
89
  })), /*#__PURE__*/React.createElement("span", {
91
- className: "filename-text"
90
+ style: {
91
+ color: "white",
92
+ fontWeight: "500"
93
+ }
92
94
  }, codeType)), /*#__PURE__*/React.createElement("button", {
93
95
  onClick: function onClick() {
94
96
  onApply && onApply(msg.customExts.code);
@@ -96,18 +98,26 @@ var CodeMsg = function CodeMsg(props) {
96
98
  },
97
99
  className: "flex items-center h-6 px-2 py-1 bg-white rounded text-black/90 text-[10px] font-normal"
98
100
  }, onApply ? 'Apply' : copyStatus === "copied" ? "Copied!" : "Copy")), /*#__PURE__*/React.createElement("div", {
99
- className: "flex-1 gap-2 flex flex-col justify-between h-full overflow-hidden"
101
+ className: "flex-1 gap-2 flex flex-col justify-between h-full overflow-hidden mt-2"
100
102
  }, /*#__PURE__*/React.createElement("div", {
101
- className: "code-scroll-container w-full max-h-[300px] overflow-y-auto"
103
+ className: "code-scroll-container w-full max-h-[300px] overflow-y-auto overflow-x-hidden"
102
104
  }, /*#__PURE__*/React.createElement("pre", {
103
105
  className: "bg-transparent w-full h-full"
104
106
  }, /*#__PURE__*/React.createElement("div", {
105
- className: "code-block-container",
106
107
  style: {
107
- border: "none"
108
+ background: "transparent",
109
+ borderRadius: "4px",
110
+ padding: "8px"
108
111
  }
109
112
  }, /*#__PURE__*/React.createElement("code", {
110
- className: "language-".concat(codeType, " hljs"),
113
+ style: {
114
+ whiteSpace: "pre-wrap",
115
+ wordBreak: "break-word",
116
+ overflowWrap: "break-word",
117
+ display: "block",
118
+ overflow: "visible"
119
+ },
120
+ className: "language-".concat(codeType),
111
121
  dangerouslySetInnerHTML: {
112
122
  __html: hljs.highlight(rawCode, {
113
123
  language: codeType,
package/es/HighlyCustomChat/CodeMsg/style/index.moduel.scss CHANGED
@@ -1,202 +1,29 @@
1
- /* 代码高亮样式，支持暗色和亮色主题 */
1
+ /* 简化的代码高亮样式 */
2
2
 
3
- /* 通用样式 */
4
- .code-block-container {
5
- border-radius: 4px;
6
- margin: 4px 0;
7
- padding: 8px 4px;
8
- background: transparent !important;
3
+ /* 确保pre元素和其他容器没有边框和背景 */
4
+ pre, .code-scroll-container, code, .hljs {
9
5
  border: none !important;
10
- }
11
-
12
- /* 通用代码样式 */
13
- code.hljs {
14
- display: block;
15
- overflow: auto;
6
+ outline: none !important;
16
7
  background: transparent !important;
17
- font-size: 13px;
18
- line-height: 1.4;
19
- font-family: Monaco, Consolas, 'Courier New', monospace;
20
- white-space: pre-wrap;
21
- word-wrap: break-word;
22
- width: 100%;
23
- max-width: 100%;
24
- padding: 0;
25
- }
26
-
27
- /* 深色主题下的代码高亮 - 适用于深蓝/黑色背景 */
28
- .im-dark, .im-custom {
29
- /* 基础文本颜色 */
30
- .hljs {
31
- color: #f8f8f2 !important;
32
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
33
- }
34
-
35
- /* 关键字 */
36
- .hljs-keyword,
37
- .hljs-selector-tag,
38
- .hljs-tag,
39
- .hljs-name {
40
- color: #ff79c6 !important;
41
- font-weight: bold;
42
- }
43
-
44
- /* 字符串 */
45
- .hljs-string,
46
- .hljs-title,
47
- .hljs-section,
48
- .hljs-attribute,
49
- .hljs-literal,
50
- .hljs-template-tag,
51
- .hljs-template-variable,
52
- .hljs-type,
53
- .hljs-addition {
54
- color: #f1fa8c !important;
55
- }
56
-
57
- /* 数字、布尔值 */
58
- .hljs-number,
59
- .hljs-selector-attr,
60
- .hljs-selector-pseudo,
61
- .hljs-meta-string,
62
- .hljs-built_in {
63
- color: #bd93f9 !important;
64
- }
65
-
66
- /* 属性、变量 */
67
- .hljs-attr,
68
- .hljs-variable,
69
- .hljs-property,
70
- .hljs-params,
71
- .hljs-class .hljs-title {
72
- color: #8be9fd !important;
73
- }
74
-
75
- /* 注释 */
76
- .hljs-comment,
77
- .hljs-quote,
78
- .hljs-doctag {
79
- color: #6272a4 !important;
80
- font-style: italic;
81
- }
82
-
83
- /* 函数 */
84
- .hljs-function .hljs-title {
85
- color: #50fa7b !important;
86
- font-weight: bold;
87
- }
88
-
89
- /* 操作符 */
90
- .hljs-operator,
91
- .hljs-entity,
92
- .hljs-url,
93
- .language-css .hljs-string,
94
- .style .hljs-string {
95
- color: #ff79c6 !important;
96
- }
97
- }
98
-
99
- /* 浅色主题下的代码高亮 - 适用于浅色/蓝色背景 */
100
- .im-light {
101
- /* 基础文本颜色 */
102
- .hljs {
103
- color: #24292e !important;
104
- }
105
-
106
- /* 关键字 */
107
- .hljs-keyword,
108
- .hljs-selector-tag,
109
- .hljs-tag,
110
- .hljs-name {
111
- color: #d73a49 !important;
112
- font-weight: bold;
113
- }
114
-
115
- /* 字符串 */
116
- .hljs-string,
117
- .hljs-title,
118
- .hljs-section,
119
- .hljs-attribute,
120
- .hljs-literal,
121
- .hljs-template-tag,
122
- .hljs-template-variable,
123
- .hljs-type,
124
- .hljs-addition {
125
- color: #032f62 !important;
126
- }
127
-
128
- /* 数字、布尔值 */
129
- .hljs-number,
130
- .hljs-selector-attr,
131
- .hljs-selector-pseudo,
132
- .hljs-meta-string,
133
- .hljs-built_in {
134
- color: #005cc5 !important;
135
- }
136
-
137
- /* 属性、变量 */
138
- .hljs-attr,
139
- .hljs-variable,
140
- .hljs-property,
141
- .hljs-params,
142
- .hljs-class .hljs-title {
143
- color: #6f42c1 !important;
144
- }
145
-
146
- /* 注释 */
147
- .hljs-comment,
148
- .hljs-quote,
149
- .hljs-doctag {
150
- color: #6a737d !important;
151
- font-style: italic;
152
- }
153
-
154
- /* 函数 */
155
- .hljs-function .hljs-title {
156
- color: #6f42c1 !important;
157
- font-weight: bold;
158
- }
159
-
160
- /* 操作符 */
161
- .hljs-operator,
162
- .hljs-entity,
163
- .hljs-url,
164
- .language-css .hljs-string,
165
- .style .hljs-string {
166
- color: #d73a49 !important;
167
- }
168
- }
169
-
170
- /* 强调 */
171
- .hljs-emphasis {
172
- font-style: italic;
8
+ box-shadow: none !important;
173
9
  }
174
10
 
175
- .hljs-strong {
176
- font-weight: bold;
11
+ /* 强制所有代码自动换行 */
12
+ pre, code, .hljs {
13
+ white-space: pre-wrap !important;
14
+ word-wrap: break-word !important;
15
+ word-break: break-word !important;
16
+ overflow-wrap: break-word !important;
17
+ overflow: visible !important;
18
+ width: 100% !important;
177
19
  }
178
20
 
179
- /* 确保pre元素和其他容器也没有边框 */
180
- pre, .code-scroll-container {
181
- border: none !important;
182
- outline: none !important;
21
+ /* 代码样式重置 */
22
+ code {
23
+ font-family: Monaco, Consolas, 'Courier New', monospace !important;
24
+ font-size: 14px !important;
25
+ line-height: 1.5 !important;
183
26
  background: transparent !important;
184
- }
185
-
186
- /* 文件名样式，根据主题自动调整颜色 */
187
- .filename-text {
188
- font-size: 10px;
189
- font-weight: 500;
190
-
191
- /* 深色模式 - 白色文本 */
192
- .im-dark &, .im-custom & {
193
- color: white;
194
- text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
195
- }
196
-
197
- /* 浅色模式 - 黑色文本 */
198
- .im-light & {
199
- color: #000000;
200
- text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
201
- }
27
+ padding: 0 !important;
28
+ margin: 0 !important;
202
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "whyuzeim",
3
- "version": "1.1.59",
3
+ "version": "1.1.60",
4
4
  "description": "im componenets",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",