@synerise/ds-code-area 1.2.8 → 1.2.10
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/CHANGELOG.md +19 -0
- package/dist/CodeArea.js +3 -4
- package/dist/CodeArea.types.d.ts +1 -0
- package/dist/components/CodeAreaEditor.d.ts +39 -2
- package/dist/components/CodeAreaEditor.js +5 -3
- package/dist/components/CodeAreaEditorRaw.d.ts +1 -1
- package/dist/components/CodeAreaEditorRaw.js +2 -2
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.9...@synerise/ds-code-area@1.2.10) (2025-11-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-code-area
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.8...@synerise/ds-code-area@1.2.9) (2025-10-31)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **code-area:** footer content rendering fixed ([543415e](https://github.com/Synerise/synerise-design/commit/543415e2d1ad9c427e019c8eaf0df004f5e9dcac))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.7...@synerise/ds-code-area@1.2.8) (2025-10-22)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-code-area
|
package/dist/CodeArea.js
CHANGED
|
@@ -22,12 +22,11 @@ var CodeArea = function CodeArea(_ref) {
|
|
|
22
22
|
};
|
|
23
23
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
|
|
24
24
|
toggleFullscreen: toggleFullscreen,
|
|
25
|
-
isFullscreen: false
|
|
26
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
isFullscreen: false,
|
|
27
26
|
ref: wrapperRef
|
|
28
|
-
}, wrapperRef.current && isFullscreen && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
|
|
27
|
+
})), wrapperRef.current && isFullscreen && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
|
|
29
28
|
toggleFullscreen: toggleFullscreen,
|
|
30
29
|
isFullscreen: isFullscreen
|
|
31
|
-
})), getPopupContainer(wrapperRef.current)))
|
|
30
|
+
})), getPopupContainer(wrapperRef.current)));
|
|
32
31
|
};
|
|
33
32
|
export default CodeArea;
|
package/dist/CodeArea.types.d.ts
CHANGED
|
@@ -62,6 +62,7 @@ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> =
|
|
|
62
62
|
export type CodeAreaEditorRawProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = CodeAreaCommonProps<SyntaxName> & {
|
|
63
63
|
isValid: boolean;
|
|
64
64
|
isSyntaxSelectVisible?: boolean;
|
|
65
|
+
isBottomBarShowing?: boolean;
|
|
65
66
|
onDidChangeMarkers?: (markers: editor.IMarker[]) => void;
|
|
66
67
|
counterLimit?: number;
|
|
67
68
|
count?: number;
|
|
@@ -1,4 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
|
|
2
|
+
export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import("@monaco-editor/react").EditorProps, "height" | "language"> & {
|
|
3
|
+
label?: React.ReactNode;
|
|
4
|
+
description?: React.ReactNode;
|
|
5
|
+
texts?: Partial<import("../CodeArea.types").CodeAreaTexts>;
|
|
6
|
+
counter?: {
|
|
7
|
+
limit: number;
|
|
8
|
+
placement?: "bottom" | "top";
|
|
9
|
+
};
|
|
10
|
+
errorText?: React.ReactNode;
|
|
11
|
+
syntaxOptions?: import("../CodeArea.types").CodeAreaSyntaxOption<string>[] | undefined;
|
|
12
|
+
currentSyntax: string;
|
|
13
|
+
allowFullscreen?: boolean;
|
|
14
|
+
isFullscreen: boolean;
|
|
15
|
+
placeholder?: React.ReactNode;
|
|
16
|
+
toggleFullscreen: () => void;
|
|
17
|
+
value?: string;
|
|
18
|
+
defaultValue?: string;
|
|
19
|
+
readOnly?: boolean;
|
|
20
|
+
tooltip?: React.ReactNode;
|
|
21
|
+
tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
zIndex?: string | number;
|
|
24
|
+
height?: string | number;
|
|
25
|
+
className?: string;
|
|
26
|
+
renderFooterContent?: (props: {
|
|
27
|
+
isFullscreen?: boolean;
|
|
28
|
+
count?: number;
|
|
29
|
+
isValid?: boolean;
|
|
30
|
+
}) => React.ReactNode;
|
|
31
|
+
onSyntaxChange?: ((newSyntax: string) => void) | undefined;
|
|
32
|
+
loaderConfig?: Parameters<typeof import("@monaco-editor/react").loader.config>[0];
|
|
33
|
+
} & {
|
|
34
|
+
fullscreenLabel?: React.ReactNode;
|
|
35
|
+
renderAdditionalDescription?: (props: {
|
|
36
|
+
isFullscreen?: boolean;
|
|
37
|
+
count?: number;
|
|
38
|
+
isValid?: boolean;
|
|
39
|
+
}) => React.ReactNode;
|
|
40
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
4
41
|
export default CodeAreaEditor;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps", "height"];
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
|
-
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { FormFieldLabel } from '@synerise/ds-form-field';
|
|
6
6
|
import { useResizeObserver } from '@synerise/ds-utils';
|
|
7
7
|
import * as S from '../CodeArea.styles';
|
|
@@ -12,7 +12,7 @@ import { CodeAreaEditorRaw } from './CodeAreaEditorRaw';
|
|
|
12
12
|
import { ContentAbove } from './ContentAbove';
|
|
13
13
|
import { ContentBelow } from './ContentBelow';
|
|
14
14
|
import { FullscreenHeader } from './FullscreenHeader';
|
|
15
|
-
export var CodeAreaEditor = function
|
|
15
|
+
export var CodeAreaEditor = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
16
16
|
var renderAdditionalDescription = _ref.renderAdditionalDescription,
|
|
17
17
|
description = _ref.description,
|
|
18
18
|
errorText = _ref.errorText,
|
|
@@ -74,6 +74,7 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
|
|
|
74
74
|
var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
|
|
75
75
|
var allTexts = getDefaultTexts(texts);
|
|
76
76
|
return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
|
|
77
|
+
ref: forwardedRef,
|
|
77
78
|
readOnly: !!readOnly,
|
|
78
79
|
requiredSpace: requiredSpace,
|
|
79
80
|
className: className,
|
|
@@ -94,6 +95,7 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
|
|
|
94
95
|
errorText: errorText,
|
|
95
96
|
count: count,
|
|
96
97
|
counterLimit: counterLimit,
|
|
98
|
+
isBottomBarShowing: isBottomBarShowing,
|
|
97
99
|
isSyntaxSelectVisible: isSyntaxSelectVisible,
|
|
98
100
|
isValid: isValid
|
|
99
101
|
})), /*#__PURE__*/React.createElement(ContentBelow, {
|
|
@@ -103,5 +105,5 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
|
|
|
103
105
|
additionalDescription: additionalDescription,
|
|
104
106
|
counter: renderCounter(!isFullscreen ? 'bottom' : undefined)
|
|
105
107
|
})));
|
|
106
|
-
};
|
|
108
|
+
});
|
|
107
109
|
export default CodeAreaEditor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type CodeAreaEditorRawProps } from '../CodeArea.types';
|
|
3
|
-
export declare const CodeAreaEditorRaw: ({ onMount, beforeMount, options, errorText, texts, allowFullscreen, toggleFullscreen, renderFooterContent, isFullscreen, count, counterLimit, onChange, isValid, onDidChangeMarkers, isSyntaxSelectVisible, syntaxOptions, currentSyntax, readOnly, onSyntaxChange, loaderConfig, placeholder, value, defaultValue, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
|
|
3
|
+
export declare const CodeAreaEditorRaw: ({ onMount, beforeMount, options, errorText, texts, allowFullscreen, toggleFullscreen, renderFooterContent, isBottomBarShowing, isFullscreen, count, counterLimit, onChange, isValid, onDidChangeMarkers, isSyntaxSelectVisible, syntaxOptions, currentSyntax, readOnly, onSyntaxChange, loaderConfig, placeholder, value, defaultValue, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
|
|
4
4
|
export default CodeAreaEditorRaw;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig", "placeholder", "value", "defaultValue"];
|
|
1
|
+
var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isBottomBarShowing", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig", "placeholder", "value", "defaultValue"];
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -20,6 +20,7 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
|
|
|
20
20
|
allowFullscreen = _ref.allowFullscreen,
|
|
21
21
|
toggleFullscreen = _ref.toggleFullscreen,
|
|
22
22
|
renderFooterContent = _ref.renderFooterContent,
|
|
23
|
+
isBottomBarShowing = _ref.isBottomBarShowing,
|
|
23
24
|
isFullscreen = _ref.isFullscreen,
|
|
24
25
|
count = _ref.count,
|
|
25
26
|
counterLimit = _ref.counterLimit,
|
|
@@ -142,7 +143,6 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
|
|
|
142
143
|
currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
|
|
143
144
|
}
|
|
144
145
|
}, [currentSyntax]);
|
|
145
|
-
var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen);
|
|
146
146
|
var shouldShowPlaceholder = useMemo(function () {
|
|
147
147
|
return isTouched && !value || !value && !defaultValue;
|
|
148
148
|
}, [defaultValue, isTouched, value]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-code-area",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.10",
|
|
4
4
|
"description": "CodeArea UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@monaco-editor/react": "4.4.6",
|
|
39
|
-
"@synerise/ds-button": "^1.
|
|
40
|
-
"@synerise/ds-core": "^1.
|
|
41
|
-
"@synerise/ds-form-field": "^1.1.
|
|
42
|
-
"@synerise/ds-icon": "^1.
|
|
43
|
-
"@synerise/ds-inline-edit": "^1.0
|
|
39
|
+
"@synerise/ds-button": "^1.5.0",
|
|
40
|
+
"@synerise/ds-core": "^1.8.0",
|
|
41
|
+
"@synerise/ds-form-field": "^1.1.19",
|
|
42
|
+
"@synerise/ds-icon": "^1.8.0",
|
|
43
|
+
"@synerise/ds-inline-edit": "^1.1.0",
|
|
44
44
|
"@synerise/ds-loader": "^1.0.10",
|
|
45
|
-
"@synerise/ds-tooltip": "^1.
|
|
46
|
-
"@synerise/ds-typography": "^1.0.
|
|
45
|
+
"@synerise/ds-tooltip": "^1.3.0",
|
|
46
|
+
"@synerise/ds-typography": "^1.0.23",
|
|
47
47
|
"@synerise/ds-utils": "^1.5.0"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"monaco-editor": "0.34.1"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
|
|
60
60
|
}
|