@difizen/libro-code-cell 1.0.2 → 1.0.4

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.
@@ -1,9 +1,9 @@
1
1
  import type { ICodeCell, ExecutionCount } from '@difizen/libro-common';
2
- import type { ExecutableCellModel } from '@difizen/libro-core';
3
- import { CellOptions, LibroCellModel } from '@difizen/libro-core';
4
2
  import type { Event as ManaEvent } from '@difizen/libro-common/app';
5
3
  import { ViewManager } from '@difizen/libro-common/app';
6
4
  import { Emitter } from '@difizen/libro-common/app';
5
+ import type { ExecutableCellModel } from '@difizen/libro-core';
6
+ import { CellOptions, LibroCellModel } from '@difizen/libro-core';
7
7
  /**
8
8
  * 基础的可执行代码的cell, 带有执行能力
9
9
  */
@@ -1 +1 @@
1
- {"version":3,"file":"code-cell-model.d.ts","sourceRoot":"","sources":["../src/code-cell-model.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAA2B,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAEpD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,cAAe,YAAW,mBAAmB;IAEnF,YAAY,EAAE,cAAc,CAAC;IAE7B,SAAS,EAAE,OAAO,CAAC;IAEnB,eAAe,EAAE,OAAO,CAAC;IAEzB,kBAAkB,EAAE,OAAO,CAAC;IAEpB,eAAe,EAAE,MAAM,CAAC;IAEhC,WAAW,EAAE,WAAW,CAAC;IAGzB,gBAAgB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAE/B,IAAI,SAAS,IAAI,SAAS,CAAC,GAAG,CAAC,CAE9B;gBAGsB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW;IAYtC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAY7C,cAAc,aAGZ;IAEO,OAAO;IAKhB,SAAS;CAGV"}
1
+ {"version":3,"file":"code-cell-model.d.ts","sourceRoot":"","sources":["../src/code-cell-model.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAA2B,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAElE;;GAEG;AACH,qBACa,kBAAmB,SAAQ,cAAe,YAAW,mBAAmB;IAEnF,YAAY,EAAE,cAAc,CAAC;IAE7B,SAAS,EAAE,OAAO,CAAC;IAEnB,eAAe,EAAE,OAAO,CAAC;IAEzB,kBAAkB,EAAE,OAAO,CAAC;IAEpB,eAAe,EAAE,MAAM,CAAC;IAEhC,WAAW,EAAE,WAAW,CAAC;IAGzB,gBAAgB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAE/B,IAAI,SAAS,IAAI,SAAS,CAAC,GAAG,CAAC,CAE9B;gBAGsB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW;IAYtC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAY7C,cAAc,aAGZ;IAEO,OAAO;IAKhB,SAAS;CAGV"}
@@ -18,9 +18,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
18
18
  function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
19
19
  function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
20
20
  import { MIME } from '@difizen/libro-common';
21
- import { CellOptions, LibroCellModel } from '@difizen/libro-core';
22
21
  import { inject, prop, transient, ViewManager } from '@difizen/libro-common/app';
23
22
  import { Emitter } from '@difizen/libro-common/app';
23
+ import { CellOptions, LibroCellModel } from '@difizen/libro-core';
24
24
 
25
25
  /**
26
26
  * 基础的可执行代码的cell, 带有执行能力
@@ -3,9 +3,11 @@ import type { CodeEditorViewOptions } from '@difizen/libro-code-editor';
3
3
  import { CodeEditorManager } from '@difizen/libro-code-editor';
4
4
  import type { IOutput } from '@difizen/libro-common';
5
5
  import type { ViewSize } from '@difizen/libro-common/app';
6
- import { ViewManager, Deferred } from '@difizen/libro-common/app';
6
+ import { ViewManager, Deferred, ConfigurationService } from '@difizen/libro-common/app';
7
7
  import type { LibroCell, CellViewOptions } from '@difizen/libro-core';
8
8
  import { CellService, EditorStatus, LibroEditableExecutableCellView, LibroOutputArea } from '@difizen/libro-core';
9
+ import 'highlight.js/styles/vs.css';
10
+ import './index.less';
9
11
  import type { LibroCodeCellModel } from './code-cell-model.js';
10
12
  export declare const CellEditorMemo: import("react").NamedExoticComponent<{}>;
11
13
  export declare class LibroCodeCellView extends LibroEditableExecutableCellView {
@@ -22,7 +24,7 @@ export declare class LibroCodeCellView extends LibroEditableExecutableCellView {
22
24
  renderEditor: () => import("react/jsx-runtime").JSX.Element | null;
23
25
  onViewResize(size: ViewSize): void;
24
26
  calcEditorAreaHeight(): number;
25
- constructor(options: CellViewOptions, cellService: CellService, viewManager: ViewManager, codeEditorManager: CodeEditorManager);
27
+ constructor(options: CellViewOptions, cellService: CellService, configurationService: ConfigurationService, viewManager: ViewManager, codeEditorManager: CodeEditorManager);
26
28
  outputWatch(): void;
27
29
  toJSON(): LibroCell;
28
30
  onViewMount(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"code-cell-view.d.ts","sourceRoot":"","sources":["../src/code-cell-view.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAIhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAQL,WAAW,EAIX,QAAQ,EACT,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAEV,SAAS,EACT,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,YAAY,EACZ,+BAA+B,EAC/B,eAAe,EAEhB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA2C/D,eAAO,MAAM,cAAc,0CAAmB,CAAC;AAmB/C,qBAEa,iBAAkB,SAAQ,+BAA+B;IAC3D,IAAI,2FAA2B;IAExC,WAAW,EAAE,WAAW,CAAC;IAEjB,KAAK,EAAE,kBAAkB,CAAC;IAElC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAGvB,cAAc,SAAK;IAGnB,YAAY,EAAE,YAAY,CAA0B;IAE7D,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;IAEQ,YAAY,uDAKnB;IAEO,YAAY,CAAC,IAAI,EAAE,QAAQ;IAMpC,oBAAoB;gBAqBE,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EAClB,iBAAiB,EAAE,iBAAiB;IA6BxD,WAAW;IAQX,MAAM,IAAI,SAAS;IAQnB,WAAW;IAKpB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;cAK/B,eAAe,IAAI,qBAAqB;IAclD,cAAc,aAGrB;CACH"}
1
+ {"version":3,"file":"code-cell-view.d.ts","sourceRoot":"","sources":["../src/code-cell-view.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAQL,WAAW,EAIX,QAAQ,EACR,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,EAEV,SAAS,EACT,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,YAAY,EACZ,+BAA+B,EAC/B,eAAe,EAEhB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,4BAA4B,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA+D/D,eAAO,MAAM,cAAc,0CAAmB,CAAC;AAuB/C,qBAEa,iBAAkB,SAAQ,+BAA+B;IAC3D,IAAI,2FAA2B;IAExC,WAAW,EAAE,WAAW,CAAC;IAEjB,KAAK,EAAE,kBAAkB,CAAC;IAElC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAGvB,cAAc,SAAK;IAGnB,YAAY,EAAE,YAAY,CAA0B;IAE7D,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;IAEQ,YAAY,uDAKnB;IAEO,YAAY,CAAC,IAAI,EAAE,QAAQ;IAMpC,oBAAoB;gBAqBE,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACf,oBAAoB,EAAE,oBAAoB,EACnD,WAAW,EAAE,WAAW,EAClB,iBAAiB,EAAE,iBAAiB;IA6BxD,WAAW;IAQX,MAAM,IAAI,SAAS;IAQnB,WAAW;IAKpB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;cAK/B,eAAe,IAAI,qBAAqB;IAclD,cAAc,aAGrB;CACH"}
@@ -29,11 +29,16 @@ function _initializerWarningHelper(descriptor, context) { throw new Error('Decor
29
29
  import { CodeEditorManager } from '@difizen/libro-code-editor';
30
30
  import { CellUri } from '@difizen/libro-common';
31
31
  import { isOutput } from '@difizen/libro-common';
32
+ import { getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender, watch, Deferred, ConfigurationService } from '@difizen/libro-common/app';
32
33
  import { l10n } from '@difizen/libro-common/l10n'; /* eslint-disable react-hooks/exhaustive-deps */
33
34
 
34
- import { getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender, watch, Deferred } from '@difizen/libro-common/app';
35
35
  import { CellService, EditorStatus, LibroEditableExecutableCellView, LibroOutputArea, VirtualizedManagerHelper } from '@difizen/libro-core';
36
+ import hljs from 'highlight.js';
36
37
  import { useEffect, useRef, memo, forwardRef } from 'react';
38
+
39
+ // 引入高亮样式
40
+ import 'highlight.js/styles/vs.css';
41
+ import "./index.less";
37
42
  import { jsx as _jsx } from "react/jsx-runtime";
38
43
  import { Fragment as _Fragment } from "react/jsx-runtime";
39
44
  function countLines(inputString) {
@@ -74,25 +79,44 @@ var CellEditor = function CellEditor() {
74
79
  });
75
80
  }
76
81
  };
82
+ var CellWithoutEditor = function CellWithoutEditor() {
83
+ var instance = useInject(ViewInstance);
84
+ var codeRef = useRef(null);
85
+ useEffect(function () {
86
+ if (codeRef.current) {
87
+ // 先高亮代码
88
+ var hljsValue = hljs.highlight(instance.model.value, {
89
+ language: 'python'
90
+ });
91
+ codeRef.current.innerHTML = hljsValue.value;
92
+ }
93
+ }, [instance.model.value]);
94
+ return /*#__PURE__*/_jsx("pre", {
95
+ className: "cell-no-editor-input",
96
+ children: /*#__PURE__*/_jsx("code", {
97
+ ref: codeRef
98
+ })
99
+ });
100
+ };
77
101
  export var CellEditorMemo = /*#__PURE__*/memo(CellEditor);
78
102
  var CodeEditorViewComponent = /*#__PURE__*/forwardRef(function CodeEditorViewComponent(props, ref) {
79
103
  var instance = useInject(ViewInstance);
80
104
  return /*#__PURE__*/_jsx("div", {
81
- className: "libro-codemirror-cell-editor",
105
+ className: instance.className,
82
106
  ref: ref,
83
107
  tabIndex: 10,
84
108
  onBlur: instance.blur,
85
- children: /*#__PURE__*/_jsx(CellEditorMemo, {})
109
+ children: instance.parent.model.noEditorMode ? /*#__PURE__*/_jsx(CellWithoutEditor, {}) : /*#__PURE__*/_jsx(CellEditorMemo, {})
86
110
  });
87
111
  });
88
112
  export var LibroCodeCellView = (_dec = transient(), _dec2 = view('code-editor-cell-view'), _dec3 = prop(), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_LibroEditableExecuta) {
89
113
  _inherits(LibroCodeCellView, _LibroEditableExecuta);
90
114
  var _super = _createSuper(LibroCodeCellView);
91
- function LibroCodeCellView(options, cellService, viewManager, codeEditorManager) {
115
+ function LibroCodeCellView(options, cellService, configurationService, viewManager, codeEditorManager) {
92
116
  var _options$cell;
93
117
  var _this;
94
118
  _classCallCheck(this, LibroCodeCellView);
95
- _this = _super.call(this, options, cellService);
119
+ _this = _super.call(this, options, cellService, configurationService);
96
120
  _this.view = CodeEditorViewComponent;
97
121
  _this.viewManager = void 0;
98
122
  _this.outputs = void 0;
@@ -153,8 +177,9 @@ export var LibroCodeCellView = (_dec = transient(), _dec2 = view('code-editor-ce
153
177
  }()).catch(console.error);
154
178
  return _this;
155
179
  }
156
- LibroCodeCellView = inject(CodeEditorManager)(LibroCodeCellView, undefined, 3) || LibroCodeCellView;
157
- LibroCodeCellView = inject(ViewManager)(LibroCodeCellView, undefined, 2) || LibroCodeCellView;
180
+ LibroCodeCellView = inject(CodeEditorManager)(LibroCodeCellView, undefined, 4) || LibroCodeCellView;
181
+ LibroCodeCellView = inject(ViewManager)(LibroCodeCellView, undefined, 3) || LibroCodeCellView;
182
+ LibroCodeCellView = inject(ConfigurationService)(LibroCodeCellView, undefined, 2) || LibroCodeCellView;
158
183
  LibroCodeCellView = inject(CellService)(LibroCodeCellView, undefined, 1) || LibroCodeCellView;
159
184
  LibroCodeCellView = inject(ViewOption)(LibroCodeCellView, undefined, 0) || LibroCodeCellView;
160
185
  _createClass(LibroCodeCellView, [{
package/es/index.less ADDED
@@ -0,0 +1,6 @@
1
+ .cell-no-editor-input {
2
+ padding: 12px 12px 18px 20px;
3
+ border-top-left-radius: 4px;
4
+ border-top-right-radius: 4px;
5
+ background: var(--mana-libro-input-background);
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@difizen/libro-code-cell",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "libro",
@@ -32,9 +32,10 @@
32
32
  "src"
33
33
  ],
34
34
  "dependencies": {
35
- "@difizen/libro-code-editor": "^1.0.2",
36
- "@difizen/libro-common": "^1.0.2",
37
- "@difizen/libro-core": "^1.0.2"
35
+ "@difizen/libro-code-editor": "^1.0.4",
36
+ "@difizen/libro-common": "^1.0.4",
37
+ "@difizen/libro-core": "^1.0.4",
38
+ "highlight.js": "^11.11.1"
38
39
  },
39
40
  "peerDependencies": {
40
41
  "react": ">=16"
@@ -1,10 +1,10 @@
1
1
  import { MIME } from '@difizen/libro-common';
2
2
  import type { ICodeCell, ExecutionCount } from '@difizen/libro-common';
3
- import type { ExecutableCellModel } from '@difizen/libro-core';
4
- import { CellOptions, LibroCellModel } from '@difizen/libro-core';
5
3
  import type { Event as ManaEvent } from '@difizen/libro-common/app';
6
4
  import { inject, prop, transient, ViewManager } from '@difizen/libro-common/app';
7
5
  import { Emitter } from '@difizen/libro-common/app';
6
+ import type { ExecutableCellModel } from '@difizen/libro-core';
7
+ import { CellOptions, LibroCellModel } from '@difizen/libro-core';
8
8
 
9
9
  /**
10
10
  * 基础的可执行代码的cell, 带有执行能力
@@ -5,7 +5,6 @@ import { CodeEditorManager } from '@difizen/libro-code-editor';
5
5
  import type { ICodeCell, IOutput } from '@difizen/libro-common';
6
6
  import { CellUri } from '@difizen/libro-common';
7
7
  import { isOutput } from '@difizen/libro-common';
8
- import { l10n } from '@difizen/libro-common/l10n'; /* eslint-disable react-hooks/exhaustive-deps */
9
8
  import type { ViewSize } from '@difizen/libro-common/app';
10
9
  import {
11
10
  getOrigin,
@@ -20,7 +19,9 @@ import {
20
19
  ViewRender,
21
20
  watch,
22
21
  Deferred,
22
+ ConfigurationService,
23
23
  } from '@difizen/libro-common/app';
24
+ import { l10n } from '@difizen/libro-common/l10n'; /* eslint-disable react-hooks/exhaustive-deps */
24
25
  import type {
25
26
  IOutputAreaOption,
26
27
  LibroCell,
@@ -33,8 +34,13 @@ import {
33
34
  LibroOutputArea,
34
35
  VirtualizedManagerHelper,
35
36
  } from '@difizen/libro-core';
37
+ import hljs from 'highlight.js';
36
38
  import { useEffect, useRef, memo, forwardRef } from 'react';
37
39
 
40
+ // 引入高亮样式
41
+ import 'highlight.js/styles/vs.css';
42
+ import './index.less';
43
+
38
44
  import type { LibroCodeCellModel } from './code-cell-model.js';
39
45
 
40
46
  function countLines(inputString: string) {
@@ -78,6 +84,26 @@ const CellEditor: React.FC = () => {
78
84
  }
79
85
  };
80
86
 
87
+ const CellWithoutEditor: React.FC = () => {
88
+ const instance = useInject<LibroCodeCellView>(ViewInstance);
89
+ const codeRef = useRef<HTMLDivElement>(null);
90
+
91
+ useEffect(() => {
92
+ if (codeRef.current) {
93
+ // 先高亮代码
94
+ const hljsValue = hljs.highlight(instance.model.value, {
95
+ language: 'python',
96
+ });
97
+ codeRef.current.innerHTML = hljsValue.value;
98
+ }
99
+ }, [instance.model.value]);
100
+ return (
101
+ <pre className="cell-no-editor-input">
102
+ <code ref={codeRef}></code>
103
+ </pre>
104
+ );
105
+ };
106
+
81
107
  export const CellEditorMemo = memo(CellEditor);
82
108
 
83
109
  const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
@@ -86,12 +112,16 @@ const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
86
112
 
87
113
  return (
88
114
  <div
89
- className="libro-codemirror-cell-editor"
115
+ className={instance.className}
90
116
  ref={ref}
91
117
  tabIndex={10}
92
118
  onBlur={instance.blur}
93
119
  >
94
- <CellEditorMemo />
120
+ {instance.parent.model.noEditorMode ? (
121
+ <CellWithoutEditor />
122
+ ) : (
123
+ <CellEditorMemo />
124
+ )}
95
125
  </div>
96
126
  );
97
127
  },
@@ -161,10 +191,11 @@ export class LibroCodeCellView extends LibroEditableExecutableCellView {
161
191
  constructor(
162
192
  @inject(ViewOption) options: CellViewOptions,
163
193
  @inject(CellService) cellService: CellService,
194
+ @inject(ConfigurationService) configurationService: ConfigurationService,
164
195
  @inject(ViewManager) viewManager: ViewManager,
165
196
  @inject(CodeEditorManager) codeEditorManager: CodeEditorManager,
166
197
  ) {
167
- super(options, cellService);
198
+ super(options, cellService, configurationService);
168
199
  this.options = options;
169
200
  this.viewManager = viewManager;
170
201
  this.codeEditorManager = codeEditorManager;
package/src/index.less ADDED
@@ -0,0 +1,6 @@
1
+ .cell-no-editor-input {
2
+ padding: 12px 12px 18px 20px;
3
+ border-top-left-radius: 4px;
4
+ border-top-right-radius: 4px;
5
+ background: var(--mana-libro-input-background);
6
+ }