dumi 2.3.0-beta.5 → 2.3.0-beta.6

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 (6) hide show
  1. package/package.json +1 -1
  2. package/theme-default/builtins/SourceCode/index.d.ts +1 -0
  3. package/theme-default/builtins/SourceCode/index.js +22 -17
  4. package/theme-default/builtins/SourceCode/index.less +25 -0
  5. package/theme-default/slots/SourceCodeEditor/index.js +3 -2
  6. package/theme-default/slots/SourceCodeEditor/index.less +22 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dumi",
3
- "version": "2.3.0-beta.5",
3
+ "version": "2.3.0-beta.6",
4
4
  "description": "📖 Documentation Generator of React Component",
5
5
  "keywords": [
6
6
  "generator",
package/theme-default/builtins/SourceCode/index.d.ts CHANGED
@@ -7,6 +7,7 @@ interface SourceCodeProps {
7
7
  lang: Language;
8
8
  highlightLines?: number[];
9
9
  extra?: ReactNode;
10
+ textarea?: ReactNode;
10
11
  }
11
12
  declare const SourceCode: FC<SourceCodeProps>;
12
13
  export default SourceCode;
package/theme-default/builtins/SourceCode/index.js CHANGED
@@ -46,22 +46,7 @@ var SourceCode = function SourceCode(props) {
46
46
  setText(_text);
47
47
  }
48
48
  }, [lang, children]);
49
- return /*#__PURE__*/React.createElement("div", {
50
- className: "dumi-default-source-code"
51
- }, /*#__PURE__*/React.createElement(CopyToClipboard, {
52
- text: text,
53
- onCopy: function onCopy() {
54
- setIsCopied(true);
55
- clearTimeout(timer.current);
56
- timer.current = window.setTimeout(function () {
57
- return setIsCopied(false);
58
- }, 2000);
59
- }
60
- }, /*#__PURE__*/React.createElement("button", {
61
- type: "button",
62
- className: "dumi-default-source-code-copy",
63
- "data-copied": isCopied || undefined
64
- }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconCopy, null))), /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
49
+ var code = /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
65
50
  code: children,
66
51
  language: SIMILAR_DSL[lang] || lang,
67
52
  theme: undefined
@@ -102,6 +87,26 @@ var SourceCode = function SourceCode(props) {
102
87
  );
103
88
  })));
104
89
  }));
105
- }), props.extra);
90
+ });
91
+ return /*#__PURE__*/React.createElement("div", {
92
+ className: "dumi-default-source-code"
93
+ }, /*#__PURE__*/React.createElement(CopyToClipboard, {
94
+ text: text,
95
+ onCopy: function onCopy() {
96
+ setIsCopied(true);
97
+ clearTimeout(timer.current);
98
+ timer.current = window.setTimeout(function () {
99
+ return setIsCopied(false);
100
+ }, 2000);
101
+ }
102
+ }, /*#__PURE__*/React.createElement("button", {
103
+ type: "button",
104
+ className: "dumi-default-source-code-copy",
105
+ "data-copied": isCopied || undefined
106
+ }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconCopy, null))), props.textarea ? /*#__PURE__*/React.createElement("div", {
107
+ className: "dumi-default-source-code-scroll-container"
108
+ }, /*#__PURE__*/React.createElement("div", {
109
+ className: "dumi-default-source-code-scroll-content"
110
+ }, code, props.textarea)) : code, props.extra);
106
111
  };
107
112
  export default SourceCode;
package/theme-default/builtins/SourceCode/index.less CHANGED
@@ -25,7 +25,32 @@
25
25
  border-bottom-left-radius: 4px;
26
26
  border-bottom-right-radius: 4px;
27
27
 
28
+ &-scroll-container {
29
+ overflow: auto;
30
+ width: 100%;
31
+ height: 100%;
32
+ }
33
+
34
+ &-scroll-content {
35
+ position: relative;
36
+ width: max-content;
37
+ height: max-content;
38
+ min-width: 100%;
39
+ min-height: 100%;
40
+
41
+ > pre.prism-code {
42
+ width: max-content;
43
+ position: relative;
44
+ overflow: visible;
45
+ }
46
+ }
47
+
28
48
  > pre.prism-code {
49
+ overflow: auto;
50
+ }
51
+
52
+ > pre.prism-code,
53
+ &-scroll-content > pre.prism-code {
29
54
  margin: 0;
30
55
  padding: 18px 24px;
31
56
  font-size: 14px;
package/theme-default/slots/SourceCodeEditor/index.js CHANGED
@@ -43,7 +43,7 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
43
43
  className: "dumi-default-source-code-editor",
44
44
  ref: elm
45
45
  }, /*#__PURE__*/React.createElement(SourceCode, _extends({}, props, {
46
- extra: style && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", {
46
+ textarea: style && /*#__PURE__*/React.createElement("textarea", {
47
47
  className: "dumi-default-source-code-editor-textarea",
48
48
  style: style,
49
49
  value: code,
@@ -77,7 +77,8 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
77
77
  autoComplete: "off",
78
78
  autoCorrect: "off",
79
79
  autoSave: "off"
80
- }), props.extra)
80
+ }),
81
+ extra: style && props.extra
81
82
  }), code));
82
83
  };
83
84
  export default SourceCodeEditor;
package/theme-default/slots/SourceCodeEditor/index.less CHANGED
@@ -30,11 +30,7 @@
30
30
  }
31
31
 
32
32
  &:focus {
33
- box-shadow: 0 0 0 1px lighten(@c-primary, 20%) inset;
34
-
35
33
  @{dark-selector} & {
36
- box-shadow: 0 0 0 1px darken(@c-primary-dark, 20%) inset;
37
-
38
34
  // for firefox because its selection color is not translucent when color-scheme is dark
39
35
  &::selection {
40
36
  background-color: fade(@c-primary-dark, 30%);
@@ -42,4 +38,26 @@
42
38
  }
43
39
  }
44
40
  }
41
+
42
+ &::after {
43
+ content: '';
44
+ position: absolute;
45
+ z-index: 0;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 100%;
50
+ border-bottom-left-radius: 3px;
51
+ border-bottom-right-radius: 3px;
52
+ }
53
+
54
+ &:focus-within {
55
+ &::after {
56
+ box-shadow: 0 0 0 1px @c-primary inset;
57
+
58
+ @{dark-selector} & {
59
+ box-shadow: 0 0 0 1px @c-primary-dark inset;
60
+ }
61
+ }
62
+ }
45
63
  }