@douyinfe/semi-foundation 2.59.0-alpha.1 → 2.59.0-alpha.2

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 (23) hide show
  1. package/codeHighlight/codeHighlight.scss +203 -0
  2. package/codeHighlight/constants.ts +15 -0
  3. package/codeHighlight/index.ts +45 -0
  4. package/codeHighlight/variables.scss +0 -0
  5. package/lib/cjs/codeHighlight/codeHighlight.css +160 -0
  6. package/lib/cjs/codeHighlight/codeHighlight.scss +203 -0
  7. package/lib/cjs/codeHighlight/constants.d.ts +6 -0
  8. package/lib/cjs/codeHighlight/constants.js +15 -0
  9. package/lib/cjs/codeHighlight/index.d.ts +16 -0
  10. package/lib/cjs/codeHighlight/index.js +31 -0
  11. package/lib/cjs/codeHighlight/variables.scss +0 -0
  12. package/lib/cjs/tree/treeUtil.d.ts +1 -1
  13. package/lib/cjs/upload/constants.d.ts +1 -1
  14. package/lib/es/codeHighlight/codeHighlight.css +160 -0
  15. package/lib/es/codeHighlight/codeHighlight.scss +203 -0
  16. package/lib/es/codeHighlight/constants.d.ts +6 -0
  17. package/lib/es/codeHighlight/constants.js +7 -0
  18. package/lib/es/codeHighlight/index.d.ts +16 -0
  19. package/lib/es/codeHighlight/index.js +23 -0
  20. package/lib/es/codeHighlight/variables.scss +0 -0
  21. package/lib/es/tree/treeUtil.d.ts +1 -1
  22. package/lib/es/upload/constants.d.ts +1 -1
  23. package/package.json +5 -3
package/codeHighlight/codeHighlight.scss ADDED
@@ -0,0 +1,203 @@
1
+ @import './variables.scss';
2
+
3
+ $module: #{$prefix}-codeHighlight;
4
+
5
+ .#{$module}{
6
+ &-defaultTheme{
7
+ /**
8
+ * prism.js default theme for JavaScript, CSS and HTML
9
+ * Based on dabblet (http://dabblet.com)
10
+ * @author Lea Verou
11
+ */
12
+
13
+ pre[class*="language-"],
14
+ code[class*="language-"]{
15
+ color: var(--semi-color-text-0);
16
+ font-size: 13px;
17
+ text-shadow: none;
18
+ // font-family: 'Inconsolata', Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
19
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
20
+ direction: ltr;
21
+ text-align: left;
22
+ white-space: pre;
23
+ word-spacing: normal;
24
+ word-break: normal;
25
+ line-height: 1.5;
26
+ -moz-tab-size: 4;
27
+ -o-tab-size: 4;
28
+ tab-size: 4;
29
+
30
+ -moz-hyphens: none;
31
+ hyphens: none;
32
+ }
33
+
34
+ pre[class*="language-"]::selection,
35
+ code[class*="language-"]::selection,
36
+ pre[class*="language-"]::mozselection,
37
+ code[class*="language-"]::mozselection {
38
+ text-shadow: none;
39
+ background: #b3d4fc;
40
+ }
41
+
42
+
43
+ pre[class*="language-"]{
44
+ padding: 1em;
45
+ margin: .5em 0;
46
+ overflow: auto;
47
+ background: #f9f7f9;
48
+ }
49
+
50
+ :not(pre)>code[class*="language-"] {
51
+ // padding: .1em .3em;
52
+ display: block;
53
+ border-radius: .3em;
54
+ color: #895fe2;
55
+ background: #f9f7f9;
56
+ }
57
+
58
+ pre{
59
+ .namespace {
60
+ opacity: .7;
61
+ }
62
+
63
+ .token.comment,
64
+ .token.prolog,
65
+ .token.doctype,
66
+ .token.cdata {
67
+ color: #6b7075;
68
+ }
69
+
70
+ .token.punctuation {
71
+ color: rgba(var(--semi-grey-8), 1),
72
+ }
73
+
74
+ .token.property,
75
+ .token.tag,
76
+ .token.boolean,
77
+ .token.number,
78
+ .token.constant,
79
+ .token.symbol,
80
+ .token.deleted {
81
+ color: rgba(var(--semi-purple-6), 1);
82
+ }
83
+
84
+ .token.selector,
85
+ .token.attr-name,
86
+ .token.string,
87
+ .token.char,
88
+ .token.builtin,
89
+ .token.inserted {
90
+ color: rgba(var(--semi-green-6), 1);
91
+ }
92
+
93
+ .token.operator,
94
+ .token.entity,
95
+ .token.url,
96
+ .language-css .token.string,
97
+ .style .token.string {
98
+ color: rgba(var(--semi-grey-8), 1),
99
+ }
100
+
101
+ .token.atrule,
102
+ .token.attr-value,
103
+ .token.keyword {
104
+ color: rgba(var(--semi-purple-6), 1);
105
+ }
106
+
107
+ .token.function {
108
+ color: rgba(var(--semi-violet-6), 1);
109
+ }
110
+
111
+ .token.regex,
112
+ .token.important,
113
+ .token.variable {
114
+ color: #d0955f;
115
+ }
116
+
117
+ .token.important,
118
+ .token.bold {
119
+ font-weight: bold;
120
+ }
121
+
122
+ .token.italic {
123
+ font-style: italic;
124
+ }
125
+
126
+ .token.entity {
127
+ cursor: help;
128
+ }
129
+
130
+ }
131
+
132
+ pre[data-line] {
133
+ position: relative;
134
+ }
135
+
136
+ pre[class*="language-"]>code[class*="language-"] {
137
+ position: relative;
138
+ z-index: 1;
139
+ }
140
+
141
+ .line-highlight {
142
+ position: absolute;
143
+ left: 0;
144
+ right: 0;
145
+ padding: inherit 0;
146
+ margin-top: 1em;
147
+ background: #ebf4ff;
148
+ box-shadow: inset 5px 0 0 #0064d2;
149
+ z-index: 0;
150
+ pointer-events: none;
151
+ line-height: inherit;
152
+ white-space: pre;
153
+ }
154
+ }
155
+
156
+ //---- line number ----
157
+
158
+
159
+ pre[class*="language-"].line-numbers {
160
+ position: relative;
161
+ padding-left: 3.8em;
162
+ counter-reset: linenumber;
163
+ }
164
+
165
+ pre[class*="language-"].line-numbers > code {
166
+ position: relative;
167
+ white-space: inherit;
168
+ }
169
+
170
+ .line-numbers .line-numbers-rows {
171
+ position: absolute;
172
+ pointer-events: none;
173
+ top: 0;
174
+ font-size: 100%;
175
+ left: -3.8em;
176
+ width: 3em; /* works for line-numbers below 1000 lines */
177
+ letter-spacing: -1px;
178
+ border-right: 1px solid #999;
179
+
180
+ -webkit-user-select: none;
181
+ -moz-user-select: none;
182
+ -ms-user-select: none;
183
+ user-select: none;
184
+
185
+ }
186
+
187
+ .line-numbers-rows > span {
188
+ display: block;
189
+ counter-increment: linenumber;
190
+ }
191
+
192
+ .line-numbers-rows > span:before {
193
+ content: counter(linenumber);
194
+ color: #999;
195
+ display: block;
196
+ padding-right: 0.8em;
197
+ text-align: right;
198
+ }
199
+
200
+ }
201
+
202
+
203
+
package/codeHighlight/constants.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { BASE_CLASS_PREFIX } from '../base/constants';
2
+
3
+ const cssClasses = {
4
+ PREFIX: `${BASE_CLASS_PREFIX}-codeHighlight`,
5
+ };
6
+
7
+ const numbers = {
8
+
9
+ };
10
+
11
+ const strings = {
12
+
13
+ } as const;
14
+
15
+ export { cssClasses, numbers, strings };
package/codeHighlight/index.ts ADDED
@@ -0,0 +1,45 @@
1
+ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
2
+ import Prism from 'prismjs';
3
+ import cls from "classnames";
4
+ import "prismjs/plugins/line-numbers/prism-line-numbers.min.js";
5
+
6
+ Prism.manual = true;
7
+
8
+ export interface CodeHighlightBaseProps {
9
+ code: string;
10
+ language: string;
11
+ lineNumber: boolean
12
+ }
13
+
14
+ export interface CodeHighlightBaseState {
15
+
16
+ }
17
+
18
+ export interface CodeHighlightAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
19
+
20
+ }
21
+
22
+
23
+ class CodeHighlightFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CodeHighlightAdapter<P, S>, P, S> {
24
+ constructor(adapter: CodeHighlightAdapter<P, S>) {
25
+ super({ ...adapter });
26
+ }
27
+
28
+
29
+ highlightCode = (ele: HTMLElement, language: string) => {
30
+ let className = ele.className;
31
+ const languageClassName = `language-${language}`;
32
+ if (!className.includes(languageClassName)) {
33
+ className = cls(className, languageClassName);
34
+ }
35
+ if (this.getProp("lineNumber")) {
36
+ className = cls(className, "line-numbers");
37
+ }
38
+ ele.className = className;
39
+ Prism.highlightElement(ele, false);
40
+ }
41
+
42
+ }
43
+
44
+
45
+ export default CodeHighlightFoundation;
package/codeHighlight/variables.scss ADDED
File without changes
package/lib/cjs/codeHighlight/codeHighlight.css ADDED
@@ -0,0 +1,160 @@
1
+ /* shadow */
2
+ /* sizing */
3
+ /* spacing */
4
+ .semi-codeHighlight-defaultTheme {
5
+ /**
6
+ * prism.js default theme for JavaScript, CSS and HTML
7
+ * Based on dabblet (http://dabblet.com)
8
+ * @author Lea Verou
9
+ */
10
+ }
11
+ .semi-codeHighlight-defaultTheme pre[class*=language-],
12
+ .semi-codeHighlight-defaultTheme code[class*=language-] {
13
+ color: var(--semi-color-text-0);
14
+ font-size: 13px;
15
+ text-shadow: none;
16
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
17
+ direction: ltr;
18
+ text-align: left;
19
+ white-space: pre;
20
+ word-spacing: normal;
21
+ word-break: normal;
22
+ line-height: 1.5;
23
+ -moz-tab-size: 4;
24
+ -o-tab-size: 4;
25
+ tab-size: 4;
26
+ -moz-hyphens: none;
27
+ hyphens: none;
28
+ }
29
+ .semi-codeHighlight-defaultTheme pre[class*=language-]::selection,
30
+ .semi-codeHighlight-defaultTheme code[class*=language-]::selection,
31
+ .semi-codeHighlight-defaultTheme pre[class*=language-]::mozselection,
32
+ .semi-codeHighlight-defaultTheme code[class*=language-]::mozselection {
33
+ text-shadow: none;
34
+ background: #b3d4fc;
35
+ }
36
+ .semi-codeHighlight-defaultTheme pre[class*=language-] {
37
+ padding: 1em;
38
+ margin: 0.5em 0;
39
+ overflow: auto;
40
+ background: #f9f7f9;
41
+ }
42
+ .semi-codeHighlight-defaultTheme :not(pre) > code[class*=language-] {
43
+ display: block;
44
+ border-radius: 0.3em;
45
+ color: #895fe2;
46
+ background: #f9f7f9;
47
+ }
48
+ .semi-codeHighlight-defaultTheme pre .namespace {
49
+ opacity: 0.7;
50
+ }
51
+ .semi-codeHighlight-defaultTheme pre .token.comment,
52
+ .semi-codeHighlight-defaultTheme pre .token.prolog,
53
+ .semi-codeHighlight-defaultTheme pre .token.doctype,
54
+ .semi-codeHighlight-defaultTheme pre .token.cdata {
55
+ color: #6b7075;
56
+ }
57
+ .semi-codeHighlight-defaultTheme pre .token.punctuation {
58
+ color: rgba(var(--semi-grey-8), 1);
59
+ }
60
+ .semi-codeHighlight-defaultTheme pre .token.property,
61
+ .semi-codeHighlight-defaultTheme pre .token.tag,
62
+ .semi-codeHighlight-defaultTheme pre .token.boolean,
63
+ .semi-codeHighlight-defaultTheme pre .token.number,
64
+ .semi-codeHighlight-defaultTheme pre .token.constant,
65
+ .semi-codeHighlight-defaultTheme pre .token.symbol,
66
+ .semi-codeHighlight-defaultTheme pre .token.deleted {
67
+ color: rgba(var(--semi-purple-6), 1);
68
+ }
69
+ .semi-codeHighlight-defaultTheme pre .token.selector,
70
+ .semi-codeHighlight-defaultTheme pre .token.attr-name,
71
+ .semi-codeHighlight-defaultTheme pre .token.string,
72
+ .semi-codeHighlight-defaultTheme pre .token.char,
73
+ .semi-codeHighlight-defaultTheme pre .token.builtin,
74
+ .semi-codeHighlight-defaultTheme pre .token.inserted {
75
+ color: rgba(var(--semi-green-6), 1);
76
+ }
77
+ .semi-codeHighlight-defaultTheme pre .token.operator,
78
+ .semi-codeHighlight-defaultTheme pre .token.entity,
79
+ .semi-codeHighlight-defaultTheme pre .token.url,
80
+ .semi-codeHighlight-defaultTheme pre .language-css .token.string,
81
+ .semi-codeHighlight-defaultTheme pre .style .token.string {
82
+ color: rgba(var(--semi-grey-8), 1);
83
+ }
84
+ .semi-codeHighlight-defaultTheme pre .token.atrule,
85
+ .semi-codeHighlight-defaultTheme pre .token.attr-value,
86
+ .semi-codeHighlight-defaultTheme pre .token.keyword {
87
+ color: rgba(var(--semi-purple-6), 1);
88
+ }
89
+ .semi-codeHighlight-defaultTheme pre .token.function {
90
+ color: rgba(var(--semi-violet-6), 1);
91
+ }
92
+ .semi-codeHighlight-defaultTheme pre .token.regex,
93
+ .semi-codeHighlight-defaultTheme pre .token.important,
94
+ .semi-codeHighlight-defaultTheme pre .token.variable {
95
+ color: #d0955f;
96
+ }
97
+ .semi-codeHighlight-defaultTheme pre .token.important,
98
+ .semi-codeHighlight-defaultTheme pre .token.bold {
99
+ font-weight: bold;
100
+ }
101
+ .semi-codeHighlight-defaultTheme pre .token.italic {
102
+ font-style: italic;
103
+ }
104
+ .semi-codeHighlight-defaultTheme pre .token.entity {
105
+ cursor: help;
106
+ }
107
+ .semi-codeHighlight-defaultTheme pre[data-line] {
108
+ position: relative;
109
+ }
110
+ .semi-codeHighlight-defaultTheme pre[class*=language-] > code[class*=language-] {
111
+ position: relative;
112
+ z-index: 1;
113
+ }
114
+ .semi-codeHighlight-defaultTheme .line-highlight {
115
+ position: absolute;
116
+ left: 0;
117
+ right: 0;
118
+ padding: inherit 0;
119
+ margin-top: 1em;
120
+ background: #ebf4ff;
121
+ box-shadow: inset 5px 0 0 #0064d2;
122
+ z-index: 0;
123
+ pointer-events: none;
124
+ line-height: inherit;
125
+ white-space: pre;
126
+ }
127
+ .semi-codeHighlight pre[class*=language-].line-numbers {
128
+ position: relative;
129
+ padding-left: 3.8em;
130
+ counter-reset: linenumber;
131
+ }
132
+ .semi-codeHighlight pre[class*=language-].line-numbers > code {
133
+ position: relative;
134
+ white-space: inherit;
135
+ }
136
+ .semi-codeHighlight .line-numbers .line-numbers-rows {
137
+ position: absolute;
138
+ pointer-events: none;
139
+ top: 0;
140
+ font-size: 100%;
141
+ left: -3.8em;
142
+ width: 3em; /* works for line-numbers below 1000 lines */
143
+ letter-spacing: -1px;
144
+ border-right: 1px solid #999;
145
+ -webkit-user-select: none;
146
+ -moz-user-select: none;
147
+ -ms-user-select: none;
148
+ user-select: none;
149
+ }
150
+ .semi-codeHighlight .line-numbers-rows > span {
151
+ display: block;
152
+ counter-increment: linenumber;
153
+ }
154
+ .semi-codeHighlight .line-numbers-rows > span:before {
155
+ content: counter(linenumber);
156
+ color: #999;
157
+ display: block;
158
+ padding-right: 0.8em;
159
+ text-align: right;
160
+ }
package/lib/cjs/codeHighlight/codeHighlight.scss ADDED
@@ -0,0 +1,203 @@
1
+ @import './variables.scss';
2
+
3
+ $module: #{$prefix}-codeHighlight;
4
+
5
+ .#{$module}{
6
+ &-defaultTheme{
7
+ /**
8
+ * prism.js default theme for JavaScript, CSS and HTML
9
+ * Based on dabblet (http://dabblet.com)
10
+ * @author Lea Verou
11
+ */
12
+
13
+ pre[class*="language-"],
14
+ code[class*="language-"]{
15
+ color: var(--semi-color-text-0);
16
+ font-size: 13px;
17
+ text-shadow: none;
18
+ // font-family: 'Inconsolata', Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
19
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
20
+ direction: ltr;
21
+ text-align: left;
22
+ white-space: pre;
23
+ word-spacing: normal;
24
+ word-break: normal;
25
+ line-height: 1.5;
26
+ -moz-tab-size: 4;
27
+ -o-tab-size: 4;
28
+ tab-size: 4;
29
+
30
+ -moz-hyphens: none;
31
+ hyphens: none;
32
+ }
33
+
34
+ pre[class*="language-"]::selection,
35
+ code[class*="language-"]::selection,
36
+ pre[class*="language-"]::mozselection,
37
+ code[class*="language-"]::mozselection {
38
+ text-shadow: none;
39
+ background: #b3d4fc;
40
+ }
41
+
42
+
43
+ pre[class*="language-"]{
44
+ padding: 1em;
45
+ margin: .5em 0;
46
+ overflow: auto;
47
+ background: #f9f7f9;
48
+ }
49
+
50
+ :not(pre)>code[class*="language-"] {
51
+ // padding: .1em .3em;
52
+ display: block;
53
+ border-radius: .3em;
54
+ color: #895fe2;
55
+ background: #f9f7f9;
56
+ }
57
+
58
+ pre{
59
+ .namespace {
60
+ opacity: .7;
61
+ }
62
+
63
+ .token.comment,
64
+ .token.prolog,
65
+ .token.doctype,
66
+ .token.cdata {
67
+ color: #6b7075;
68
+ }
69
+
70
+ .token.punctuation {
71
+ color: rgba(var(--semi-grey-8), 1),
72
+ }
73
+
74
+ .token.property,
75
+ .token.tag,
76
+ .token.boolean,
77
+ .token.number,
78
+ .token.constant,
79
+ .token.symbol,
80
+ .token.deleted {
81
+ color: rgba(var(--semi-purple-6), 1);
82
+ }
83
+
84
+ .token.selector,
85
+ .token.attr-name,
86
+ .token.string,
87
+ .token.char,
88
+ .token.builtin,
89
+ .token.inserted {
90
+ color: rgba(var(--semi-green-6), 1);
91
+ }
92
+
93
+ .token.operator,
94
+ .token.entity,
95
+ .token.url,
96
+ .language-css .token.string,
97
+ .style .token.string {
98
+ color: rgba(var(--semi-grey-8), 1),
99
+ }
100
+
101
+ .token.atrule,
102
+ .token.attr-value,
103
+ .token.keyword {
104
+ color: rgba(var(--semi-purple-6), 1);
105
+ }
106
+
107
+ .token.function {
108
+ color: rgba(var(--semi-violet-6), 1);
109
+ }
110
+
111
+ .token.regex,
112
+ .token.important,
113
+ .token.variable {
114
+ color: #d0955f;
115
+ }
116
+
117
+ .token.important,
118
+ .token.bold {
119
+ font-weight: bold;
120
+ }
121
+
122
+ .token.italic {
123
+ font-style: italic;
124
+ }
125
+
126
+ .token.entity {
127
+ cursor: help;
128
+ }
129
+
130
+ }
131
+
132
+ pre[data-line] {
133
+ position: relative;
134
+ }
135
+
136
+ pre[class*="language-"]>code[class*="language-"] {
137
+ position: relative;
138
+ z-index: 1;
139
+ }
140
+
141
+ .line-highlight {
142
+ position: absolute;
143
+ left: 0;
144
+ right: 0;
145
+ padding: inherit 0;
146
+ margin-top: 1em;
147
+ background: #ebf4ff;
148
+ box-shadow: inset 5px 0 0 #0064d2;
149
+ z-index: 0;
150
+ pointer-events: none;
151
+ line-height: inherit;
152
+ white-space: pre;
153
+ }
154
+ }
155
+
156
+ //---- line number ----
157
+
158
+
159
+ pre[class*="language-"].line-numbers {
160
+ position: relative;
161
+ padding-left: 3.8em;
162
+ counter-reset: linenumber;
163
+ }
164
+
165
+ pre[class*="language-"].line-numbers > code {
166
+ position: relative;
167
+ white-space: inherit;
168
+ }
169
+
170
+ .line-numbers .line-numbers-rows {
171
+ position: absolute;
172
+ pointer-events: none;
173
+ top: 0;
174
+ font-size: 100%;
175
+ left: -3.8em;
176
+ width: 3em; /* works for line-numbers below 1000 lines */
177
+ letter-spacing: -1px;
178
+ border-right: 1px solid #999;
179
+
180
+ -webkit-user-select: none;
181
+ -moz-user-select: none;
182
+ -ms-user-select: none;
183
+ user-select: none;
184
+
185
+ }
186
+
187
+ .line-numbers-rows > span {
188
+ display: block;
189
+ counter-increment: linenumber;
190
+ }
191
+
192
+ .line-numbers-rows > span:before {
193
+ content: counter(linenumber);
194
+ color: #999;
195
+ display: block;
196
+ padding-right: 0.8em;
197
+ text-align: right;
198
+ }
199
+
200
+ }
201
+
202
+
203
+
package/lib/cjs/codeHighlight/constants.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare const cssClasses: {
2
+ PREFIX: string;
3
+ };
4
+ declare const numbers: {};
5
+ declare const strings: {};
6
+ export { cssClasses, numbers, strings };
package/lib/cjs/codeHighlight/constants.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.strings = exports.numbers = exports.cssClasses = void 0;
7
+ var _constants = require("../base/constants");
8
+ const cssClasses = {
9
+ PREFIX: `${_constants.BASE_CLASS_PREFIX}-codeHighlight`
10
+ };
11
+ exports.cssClasses = cssClasses;
12
+ const numbers = {};
13
+ exports.numbers = numbers;
14
+ const strings = {};
15
+ exports.strings = strings;
package/lib/cjs/codeHighlight/index.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
2
+ import "prismjs/plugins/line-numbers/prism-line-numbers.min.js";
3
+ export interface CodeHighlightBaseProps {
4
+ code: string;
5
+ language: string;
6
+ lineNumber: boolean;
7
+ }
8
+ export interface CodeHighlightBaseState {
9
+ }
10
+ export interface CodeHighlightAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
11
+ }
12
+ declare class CodeHighlightFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CodeHighlightAdapter<P, S>, P, S> {
13
+ constructor(adapter: CodeHighlightAdapter<P, S>);
14
+ highlightCode: (ele: HTMLElement, language: string) => void;
15
+ }
16
+ export default CodeHighlightFoundation;
package/lib/cjs/codeHighlight/index.js ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _foundation = _interopRequireDefault(require("../base/foundation"));
8
+ var _prismjs = _interopRequireDefault(require("prismjs"));
9
+ var _classnames = _interopRequireDefault(require("classnames"));
10
+ require("prismjs/plugins/line-numbers/prism-line-numbers.min.js");
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+ _prismjs.default.manual = true;
13
+ class CodeHighlightFoundation extends _foundation.default {
14
+ constructor(adapter) {
15
+ super(Object.assign({}, adapter));
16
+ this.highlightCode = (ele, language) => {
17
+ let className = ele.className;
18
+ const languageClassName = `language-${language}`;
19
+ if (!className.includes(languageClassName)) {
20
+ className = (0, _classnames.default)(className, languageClassName);
21
+ }
22
+ if (this.getProp("lineNumber")) {
23
+ className = (0, _classnames.default)(className, "line-numbers");
24
+ }
25
+ ele.className = className;
26
+ _prismjs.default.highlightElement(ele, false);
27
+ };
28
+ }
29
+ }
30
+ var _default = CodeHighlightFoundation;
31
+ exports.default = _default;
package/lib/cjs/codeHighlight/variables.scss ADDED
File without changes
package/lib/cjs/tree/treeUtil.d.ts CHANGED
@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
83
83
  export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
84
84
  export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
85
85
  export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
86
- export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
86
+ export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
87
87
  export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
88
88
  export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
package/lib/cjs/upload/constants.d.ts CHANGED
@@ -18,7 +18,7 @@ declare const strings: {
18
18
  DRAG_AREA_ILLEGAL: string;
19
19
  TRIGGER_AUTO: "auto";
20
20
  TRIGGER_CUSTOM: "custom";
21
- UPLOAD_TRIGGER: ("auto" | "custom")[];
21
+ UPLOAD_TRIGGER: ("custom" | "auto")[];
22
22
  VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
23
23
  PROMPT_POSITION: readonly ["left", "right", "bottom"];
24
24
  };
package/lib/es/codeHighlight/codeHighlight.css ADDED
@@ -0,0 +1,160 @@
1
+ /* shadow */
2
+ /* sizing */
3
+ /* spacing */
4
+ .semi-codeHighlight-defaultTheme {
5
+ /**
6
+ * prism.js default theme for JavaScript, CSS and HTML
7
+ * Based on dabblet (http://dabblet.com)
8
+ * @author Lea Verou
9
+ */
10
+ }
11
+ .semi-codeHighlight-defaultTheme pre[class*=language-],
12
+ .semi-codeHighlight-defaultTheme code[class*=language-] {
13
+ color: var(--semi-color-text-0);
14
+ font-size: 13px;
15
+ text-shadow: none;
16
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
17
+ direction: ltr;
18
+ text-align: left;
19
+ white-space: pre;
20
+ word-spacing: normal;
21
+ word-break: normal;
22
+ line-height: 1.5;
23
+ -moz-tab-size: 4;
24
+ -o-tab-size: 4;
25
+ tab-size: 4;
26
+ -moz-hyphens: none;
27
+ hyphens: none;
28
+ }
29
+ .semi-codeHighlight-defaultTheme pre[class*=language-]::selection,
30
+ .semi-codeHighlight-defaultTheme code[class*=language-]::selection,
31
+ .semi-codeHighlight-defaultTheme pre[class*=language-]::mozselection,
32
+ .semi-codeHighlight-defaultTheme code[class*=language-]::mozselection {
33
+ text-shadow: none;
34
+ background: #b3d4fc;
35
+ }
36
+ .semi-codeHighlight-defaultTheme pre[class*=language-] {
37
+ padding: 1em;
38
+ margin: 0.5em 0;
39
+ overflow: auto;
40
+ background: #f9f7f9;
41
+ }
42
+ .semi-codeHighlight-defaultTheme :not(pre) > code[class*=language-] {
43
+ display: block;
44
+ border-radius: 0.3em;
45
+ color: #895fe2;
46
+ background: #f9f7f9;
47
+ }
48
+ .semi-codeHighlight-defaultTheme pre .namespace {
49
+ opacity: 0.7;
50
+ }
51
+ .semi-codeHighlight-defaultTheme pre .token.comment,
52
+ .semi-codeHighlight-defaultTheme pre .token.prolog,
53
+ .semi-codeHighlight-defaultTheme pre .token.doctype,
54
+ .semi-codeHighlight-defaultTheme pre .token.cdata {
55
+ color: #6b7075;
56
+ }
57
+ .semi-codeHighlight-defaultTheme pre .token.punctuation {
58
+ color: rgba(var(--semi-grey-8), 1);
59
+ }
60
+ .semi-codeHighlight-defaultTheme pre .token.property,
61
+ .semi-codeHighlight-defaultTheme pre .token.tag,
62
+ .semi-codeHighlight-defaultTheme pre .token.boolean,
63
+ .semi-codeHighlight-defaultTheme pre .token.number,
64
+ .semi-codeHighlight-defaultTheme pre .token.constant,
65
+ .semi-codeHighlight-defaultTheme pre .token.symbol,
66
+ .semi-codeHighlight-defaultTheme pre .token.deleted {
67
+ color: rgba(var(--semi-purple-6), 1);
68
+ }
69
+ .semi-codeHighlight-defaultTheme pre .token.selector,
70
+ .semi-codeHighlight-defaultTheme pre .token.attr-name,
71
+ .semi-codeHighlight-defaultTheme pre .token.string,
72
+ .semi-codeHighlight-defaultTheme pre .token.char,
73
+ .semi-codeHighlight-defaultTheme pre .token.builtin,
74
+ .semi-codeHighlight-defaultTheme pre .token.inserted {
75
+ color: rgba(var(--semi-green-6), 1);
76
+ }
77
+ .semi-codeHighlight-defaultTheme pre .token.operator,
78
+ .semi-codeHighlight-defaultTheme pre .token.entity,
79
+ .semi-codeHighlight-defaultTheme pre .token.url,
80
+ .semi-codeHighlight-defaultTheme pre .language-css .token.string,
81
+ .semi-codeHighlight-defaultTheme pre .style .token.string {
82
+ color: rgba(var(--semi-grey-8), 1);
83
+ }
84
+ .semi-codeHighlight-defaultTheme pre .token.atrule,
85
+ .semi-codeHighlight-defaultTheme pre .token.attr-value,
86
+ .semi-codeHighlight-defaultTheme pre .token.keyword {
87
+ color: rgba(var(--semi-purple-6), 1);
88
+ }
89
+ .semi-codeHighlight-defaultTheme pre .token.function {
90
+ color: rgba(var(--semi-violet-6), 1);
91
+ }
92
+ .semi-codeHighlight-defaultTheme pre .token.regex,
93
+ .semi-codeHighlight-defaultTheme pre .token.important,
94
+ .semi-codeHighlight-defaultTheme pre .token.variable {
95
+ color: #d0955f;
96
+ }
97
+ .semi-codeHighlight-defaultTheme pre .token.important,
98
+ .semi-codeHighlight-defaultTheme pre .token.bold {
99
+ font-weight: bold;
100
+ }
101
+ .semi-codeHighlight-defaultTheme pre .token.italic {
102
+ font-style: italic;
103
+ }
104
+ .semi-codeHighlight-defaultTheme pre .token.entity {
105
+ cursor: help;
106
+ }
107
+ .semi-codeHighlight-defaultTheme pre[data-line] {
108
+ position: relative;
109
+ }
110
+ .semi-codeHighlight-defaultTheme pre[class*=language-] > code[class*=language-] {
111
+ position: relative;
112
+ z-index: 1;
113
+ }
114
+ .semi-codeHighlight-defaultTheme .line-highlight {
115
+ position: absolute;
116
+ left: 0;
117
+ right: 0;
118
+ padding: inherit 0;
119
+ margin-top: 1em;
120
+ background: #ebf4ff;
121
+ box-shadow: inset 5px 0 0 #0064d2;
122
+ z-index: 0;
123
+ pointer-events: none;
124
+ line-height: inherit;
125
+ white-space: pre;
126
+ }
127
+ .semi-codeHighlight pre[class*=language-].line-numbers {
128
+ position: relative;
129
+ padding-left: 3.8em;
130
+ counter-reset: linenumber;
131
+ }
132
+ .semi-codeHighlight pre[class*=language-].line-numbers > code {
133
+ position: relative;
134
+ white-space: inherit;
135
+ }
136
+ .semi-codeHighlight .line-numbers .line-numbers-rows {
137
+ position: absolute;
138
+ pointer-events: none;
139
+ top: 0;
140
+ font-size: 100%;
141
+ left: -3.8em;
142
+ width: 3em; /* works for line-numbers below 1000 lines */
143
+ letter-spacing: -1px;
144
+ border-right: 1px solid #999;
145
+ -webkit-user-select: none;
146
+ -moz-user-select: none;
147
+ -ms-user-select: none;
148
+ user-select: none;
149
+ }
150
+ .semi-codeHighlight .line-numbers-rows > span {
151
+ display: block;
152
+ counter-increment: linenumber;
153
+ }
154
+ .semi-codeHighlight .line-numbers-rows > span:before {
155
+ content: counter(linenumber);
156
+ color: #999;
157
+ display: block;
158
+ padding-right: 0.8em;
159
+ text-align: right;
160
+ }
package/lib/es/codeHighlight/codeHighlight.scss ADDED
@@ -0,0 +1,203 @@
1
+ @import './variables.scss';
2
+
3
+ $module: #{$prefix}-codeHighlight;
4
+
5
+ .#{$module}{
6
+ &-defaultTheme{
7
+ /**
8
+ * prism.js default theme for JavaScript, CSS and HTML
9
+ * Based on dabblet (http://dabblet.com)
10
+ * @author Lea Verou
11
+ */
12
+
13
+ pre[class*="language-"],
14
+ code[class*="language-"]{
15
+ color: var(--semi-color-text-0);
16
+ font-size: 13px;
17
+ text-shadow: none;
18
+ // font-family: 'Inconsolata', Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
19
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
20
+ direction: ltr;
21
+ text-align: left;
22
+ white-space: pre;
23
+ word-spacing: normal;
24
+ word-break: normal;
25
+ line-height: 1.5;
26
+ -moz-tab-size: 4;
27
+ -o-tab-size: 4;
28
+ tab-size: 4;
29
+
30
+ -moz-hyphens: none;
31
+ hyphens: none;
32
+ }
33
+
34
+ pre[class*="language-"]::selection,
35
+ code[class*="language-"]::selection,
36
+ pre[class*="language-"]::mozselection,
37
+ code[class*="language-"]::mozselection {
38
+ text-shadow: none;
39
+ background: #b3d4fc;
40
+ }
41
+
42
+
43
+ pre[class*="language-"]{
44
+ padding: 1em;
45
+ margin: .5em 0;
46
+ overflow: auto;
47
+ background: #f9f7f9;
48
+ }
49
+
50
+ :not(pre)>code[class*="language-"] {
51
+ // padding: .1em .3em;
52
+ display: block;
53
+ border-radius: .3em;
54
+ color: #895fe2;
55
+ background: #f9f7f9;
56
+ }
57
+
58
+ pre{
59
+ .namespace {
60
+ opacity: .7;
61
+ }
62
+
63
+ .token.comment,
64
+ .token.prolog,
65
+ .token.doctype,
66
+ .token.cdata {
67
+ color: #6b7075;
68
+ }
69
+
70
+ .token.punctuation {
71
+ color: rgba(var(--semi-grey-8), 1),
72
+ }
73
+
74
+ .token.property,
75
+ .token.tag,
76
+ .token.boolean,
77
+ .token.number,
78
+ .token.constant,
79
+ .token.symbol,
80
+ .token.deleted {
81
+ color: rgba(var(--semi-purple-6), 1);
82
+ }
83
+
84
+ .token.selector,
85
+ .token.attr-name,
86
+ .token.string,
87
+ .token.char,
88
+ .token.builtin,
89
+ .token.inserted {
90
+ color: rgba(var(--semi-green-6), 1);
91
+ }
92
+
93
+ .token.operator,
94
+ .token.entity,
95
+ .token.url,
96
+ .language-css .token.string,
97
+ .style .token.string {
98
+ color: rgba(var(--semi-grey-8), 1),
99
+ }
100
+
101
+ .token.atrule,
102
+ .token.attr-value,
103
+ .token.keyword {
104
+ color: rgba(var(--semi-purple-6), 1);
105
+ }
106
+
107
+ .token.function {
108
+ color: rgba(var(--semi-violet-6), 1);
109
+ }
110
+
111
+ .token.regex,
112
+ .token.important,
113
+ .token.variable {
114
+ color: #d0955f;
115
+ }
116
+
117
+ .token.important,
118
+ .token.bold {
119
+ font-weight: bold;
120
+ }
121
+
122
+ .token.italic {
123
+ font-style: italic;
124
+ }
125
+
126
+ .token.entity {
127
+ cursor: help;
128
+ }
129
+
130
+ }
131
+
132
+ pre[data-line] {
133
+ position: relative;
134
+ }
135
+
136
+ pre[class*="language-"]>code[class*="language-"] {
137
+ position: relative;
138
+ z-index: 1;
139
+ }
140
+
141
+ .line-highlight {
142
+ position: absolute;
143
+ left: 0;
144
+ right: 0;
145
+ padding: inherit 0;
146
+ margin-top: 1em;
147
+ background: #ebf4ff;
148
+ box-shadow: inset 5px 0 0 #0064d2;
149
+ z-index: 0;
150
+ pointer-events: none;
151
+ line-height: inherit;
152
+ white-space: pre;
153
+ }
154
+ }
155
+
156
+ //---- line number ----
157
+
158
+
159
+ pre[class*="language-"].line-numbers {
160
+ position: relative;
161
+ padding-left: 3.8em;
162
+ counter-reset: linenumber;
163
+ }
164
+
165
+ pre[class*="language-"].line-numbers > code {
166
+ position: relative;
167
+ white-space: inherit;
168
+ }
169
+
170
+ .line-numbers .line-numbers-rows {
171
+ position: absolute;
172
+ pointer-events: none;
173
+ top: 0;
174
+ font-size: 100%;
175
+ left: -3.8em;
176
+ width: 3em; /* works for line-numbers below 1000 lines */
177
+ letter-spacing: -1px;
178
+ border-right: 1px solid #999;
179
+
180
+ -webkit-user-select: none;
181
+ -moz-user-select: none;
182
+ -ms-user-select: none;
183
+ user-select: none;
184
+
185
+ }
186
+
187
+ .line-numbers-rows > span {
188
+ display: block;
189
+ counter-increment: linenumber;
190
+ }
191
+
192
+ .line-numbers-rows > span:before {
193
+ content: counter(linenumber);
194
+ color: #999;
195
+ display: block;
196
+ padding-right: 0.8em;
197
+ text-align: right;
198
+ }
199
+
200
+ }
201
+
202
+
203
+
package/lib/es/codeHighlight/constants.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare const cssClasses: {
2
+ PREFIX: string;
3
+ };
4
+ declare const numbers: {};
5
+ declare const strings: {};
6
+ export { cssClasses, numbers, strings };
package/lib/es/codeHighlight/constants.js ADDED
@@ -0,0 +1,7 @@
1
+ import { BASE_CLASS_PREFIX } from '../base/constants';
2
+ const cssClasses = {
3
+ PREFIX: `${BASE_CLASS_PREFIX}-codeHighlight`
4
+ };
5
+ const numbers = {};
6
+ const strings = {};
7
+ export { cssClasses, numbers, strings };
package/lib/es/codeHighlight/index.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
2
+ import "prismjs/plugins/line-numbers/prism-line-numbers.min.js";
3
+ export interface CodeHighlightBaseProps {
4
+ code: string;
5
+ language: string;
6
+ lineNumber: boolean;
7
+ }
8
+ export interface CodeHighlightBaseState {
9
+ }
10
+ export interface CodeHighlightAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
11
+ }
12
+ declare class CodeHighlightFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CodeHighlightAdapter<P, S>, P, S> {
13
+ constructor(adapter: CodeHighlightAdapter<P, S>);
14
+ highlightCode: (ele: HTMLElement, language: string) => void;
15
+ }
16
+ export default CodeHighlightFoundation;
package/lib/es/codeHighlight/index.js ADDED
@@ -0,0 +1,23 @@
1
+ import BaseFoundation from '../base/foundation';
2
+ import Prism from 'prismjs';
3
+ import cls from "classnames";
4
+ import "prismjs/plugins/line-numbers/prism-line-numbers.min.js";
5
+ Prism.manual = true;
6
+ class CodeHighlightFoundation extends BaseFoundation {
7
+ constructor(adapter) {
8
+ super(Object.assign({}, adapter));
9
+ this.highlightCode = (ele, language) => {
10
+ let className = ele.className;
11
+ const languageClassName = `language-${language}`;
12
+ if (!className.includes(languageClassName)) {
13
+ className = cls(className, languageClassName);
14
+ }
15
+ if (this.getProp("lineNumber")) {
16
+ className = cls(className, "line-numbers");
17
+ }
18
+ ele.className = className;
19
+ Prism.highlightElement(ele, false);
20
+ };
21
+ }
22
+ }
23
+ export default CodeHighlightFoundation;
package/lib/es/codeHighlight/variables.scss ADDED
File without changes
package/lib/es/tree/treeUtil.d.ts CHANGED
@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
83
83
  export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
84
84
  export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
85
85
  export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
86
- export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
86
+ export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
87
87
  export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
88
88
  export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
package/lib/es/upload/constants.d.ts CHANGED
@@ -18,7 +18,7 @@ declare const strings: {
18
18
  DRAG_AREA_ILLEGAL: string;
19
19
  TRIGGER_AUTO: "auto";
20
20
  TRIGGER_CUSTOM: "custom";
21
- UPLOAD_TRIGGER: ("auto" | "custom")[];
21
+ UPLOAD_TRIGGER: ("custom" | "auto")[];
22
22
  VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
23
23
  PROMPT_POSITION: readonly ["left", "right", "bottom"];
24
24
  };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.59.0-alpha.1",
3
+ "version": "2.59.0-alpha.2",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.59.0-alpha.1",
10
+ "@douyinfe/semi-animation": "2.56.3",
11
11
  "@mdx-js/mdx": "^3.0.1",
12
12
  "async-validator": "^3.5.0",
13
13
  "classnames": "^2.2.6",
@@ -16,6 +16,7 @@
16
16
  "fast-copy": "^3.0.1 ",
17
17
  "lodash": "^4.17.21",
18
18
  "memoize-one": "^5.2.1",
19
+ "prismjs": "^1.29.0",
19
20
  "remark-gfm": "^4.0.0",
20
21
  "scroll-into-view-if-needed": "^2.2.24"
21
22
  },
@@ -26,12 +27,13 @@
26
27
  "*.scss",
27
28
  "*.css"
28
29
  ],
29
- "gitHead": "7bf7d30651f955f1fe6eb147e3960ce21698d2f4",
30
+ "gitHead": "3ba9ac1a031d4ccdf23f53111d0d36c3740f996d",
30
31
  "devDependencies": {
31
32
  "@babel/plugin-transform-runtime": "^7.15.8",
32
33
  "@babel/preset-env": "^7.15.8",
33
34
  "@types/lodash": "^4.14.176",
34
35
  "@types/mdx": "^2.0.13",
36
+ "@types/prismjs": "^1.26.3",
35
37
  "babel-plugin-lodash": "^3.3.4",
36
38
  "del": "^6.0.0",
37
39
  "gulp": "^4.0.2",