@synerise/ds-code-area 1.1.23 → 1.2.0

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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +1 -0
  3. package/dist/CodeArea.styles.d.ts +3 -0
  4. package/dist/CodeArea.styles.js +25 -19
  5. package/dist/CodeArea.types.d.ts +1 -0
  6. package/dist/components/CodeAreaEditorRaw.d.ts +1 -1
  7. package/dist/components/CodeAreaEditorRaw.js +18 -3
  8. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.1.23...@synerise/ds-code-area@1.2.0) (2025-09-25)
7
+
8
+
9
+ ### Features
10
+
11
+ * **code-area:** add placeholder prop ([a02bb94](https://github.com/Synerise/synerise-design/commit/a02bb949f56a736cff8bb056e70d954ca1663cf1))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.1.22...@synerise/ds-code-area@1.1.23) (2025-09-23)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-code-area
package/README.md CHANGED
@@ -64,6 +64,7 @@ const syntaxOptions = [
64
64
  | onSyntaxChange | triggered when user switches syntax | `(newSyntax: SyntaxName) => void` | - |
65
65
  | texts | customise displayed texts | `CodeAreaTexts` | - |
66
66
  | getPopupContainer | customise where fullscreen layer is rendered into | getPopupContainer (@synerise/ds-utils) | - |
67
+ | placeholder | placeholder content | `ReactNode` | - |
67
68
 
68
69
  ### CodeAreaTexts
69
70
 
package/dist/CodeArea.styles.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  export declare const AriaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const EditorPlaceholder: import("styled-components").StyledComponent<"div", any, {
3
+ shouldShowPlaceholder?: boolean;
4
+ }, never>;
2
5
  export declare const EditorInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
6
  export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
4
7
  export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
package/dist/CodeArea.styles.js CHANGED
@@ -8,17 +8,23 @@ export var AriaContainer = styled.div.withConfig({
8
8
  displayName: "CodeAreastyles__AriaContainer",
9
9
  componentId: "sc-svoej2-1"
10
10
  })(["flex:0 0 0;"]);
11
+ export var EditorPlaceholder = styled.div.withConfig({
12
+ displayName: "CodeAreastyles__EditorPlaceholder",
13
+ componentId: "sc-svoej2-2"
14
+ })(["pointer-events:none;position:absolute;left:62px;right:0;top:0;bottom:0;display:", ";"], function (props) {
15
+ return props.shouldShowPlaceholder ? 'block' : 'none';
16
+ });
11
17
  export var EditorInnerWrapper = styled.div.withConfig({
12
18
  displayName: "CodeAreastyles__EditorInnerWrapper",
13
- componentId: "sc-svoej2-2"
14
- })([""]);
19
+ componentId: "sc-svoej2-3"
20
+ })(["position:relative;"]);
15
21
  export var CodeAreaContent = styled.div.withConfig({
16
22
  displayName: "CodeAreastyles__CodeAreaContent",
17
- componentId: "sc-svoej2-3"
23
+ componentId: "sc-svoej2-4"
18
24
  })(["flex:1 1 100%;display:flex;min-height:0;flex-direction:column;"]);
19
25
  export var EditorWrapper = styled.div.withConfig({
20
26
  displayName: "CodeAreastyles__EditorWrapper",
21
- componentId: "sc-svoej2-4"
27
+ componentId: "sc-svoej2-5"
22
28
  })(["border:solid 1px ", ";border-radius:3px;display:flex;flex-direction:column;flex:1 1 100%;min-height:0;padding-top:12px;", ";canvas{opacity:0;}"], function (props) {
23
29
  return props.hasError ? props.theme.palette['red-600'] : props.theme.palette['grey-200'];
24
30
  }, function (props) {
@@ -26,15 +32,15 @@ export var EditorWrapper = styled.div.withConfig({
26
32
  });
27
33
  export var FullscreenHeaderTitle = styled(Title).withConfig({
28
34
  displayName: "CodeAreastyles__FullscreenHeaderTitle",
29
- componentId: "sc-svoej2-5"
35
+ componentId: "sc-svoej2-6"
30
36
  })(["display:flex;gap:16px;align-items:center;margin-bottom:0;"]);
31
37
  export var FullscreenHeader = styled(FlexRow).withConfig({
32
38
  displayName: "CodeAreastyles__FullscreenHeader",
33
- componentId: "sc-svoej2-6"
39
+ componentId: "sc-svoej2-7"
34
40
  })(["padding:16px 24px;"]);
35
41
  export var CodeAreaWrapper = styled.div.withConfig({
36
42
  displayName: "CodeAreastyles__CodeAreaWrapper",
37
- componentId: "sc-svoej2-7"
43
+ componentId: "sc-svoej2-8"
38
44
  })(["", " ", "{", ";}"], function (props) {
39
45
  if (props.isFullscreen) {
40
46
  return css(["position:fixed;width:100vw;height:100vh;z-index:", ";left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.zIndex !== undefined ? props.zIndex : props.theme.variables['zindex-modal'], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
@@ -45,55 +51,55 @@ export var CodeAreaWrapper = styled.div.withConfig({
45
51
  });
46
52
  export var AdditionalDescription = styled.div.withConfig({
47
53
  displayName: "CodeAreastyles__AdditionalDescription",
48
- componentId: "sc-svoej2-8"
54
+ componentId: "sc-svoej2-9"
49
55
  })(["margin-bottom:8px;"]);
50
56
  export var ContentBelow = styled(FlexRow).withConfig({
51
57
  displayName: "CodeAreastyles__ContentBelow",
52
- componentId: "sc-svoej2-9"
58
+ componentId: "sc-svoej2-10"
53
59
  })(["", " align-items:flex-start;"], function (props) {
54
60
  return !props.isEmpty && "margin-top: 8px;";
55
61
  });
56
62
  export var ContentAbove = styled(FlexRow).withConfig({
57
63
  displayName: "CodeAreastyles__ContentAbove",
58
- componentId: "sc-svoej2-10"
64
+ componentId: "sc-svoej2-11"
59
65
  })(["margin-bottom:8px;flex:0 0 auto;"]);
60
66
  export var SyntaxTitle = styled(Text).withConfig({
61
67
  displayName: "CodeAreastyles__SyntaxTitle",
62
- componentId: "sc-svoej2-11"
68
+ componentId: "sc-svoej2-12"
63
69
  })([""]);
64
70
  export var BottomBar = styled(FlexRow).withConfig({
65
71
  displayName: "CodeAreastyles__BottomBar",
66
- componentId: "sc-svoej2-12"
72
+ componentId: "sc-svoej2-13"
67
73
  })(["border-top:solid 1px ", ";padding:8px;flex:0 0 auto;"], function (props) {
68
74
  return props.theme.palette['grey-200'];
69
75
  });
70
76
  export var LeftSide = styled.div.withConfig({
71
77
  displayName: "CodeAreastyles__LeftSide",
72
- componentId: "sc-svoej2-13"
78
+ componentId: "sc-svoej2-14"
73
79
  })([""]);
74
80
  export var RightSide = styled.div.withConfig({
75
81
  displayName: "CodeAreastyles__RightSide",
76
- componentId: "sc-svoej2-14"
82
+ componentId: "sc-svoej2-15"
77
83
  })(["margin-left:auto;display:flex;gap:8px;"]);
78
84
  export var SyntaxSelect = styled(LeftSide).withConfig({
79
85
  displayName: "CodeAreastyles__SyntaxSelect",
80
- componentId: "sc-svoej2-15"
86
+ componentId: "sc-svoej2-16"
81
87
  })(["padding-left:8px;"]);
82
88
  export var BottomBarElement = styled.div.withConfig({
83
89
  displayName: "CodeAreastyles__BottomBarElement",
84
- componentId: "sc-svoej2-16"
90
+ componentId: "sc-svoej2-17"
85
91
  })([""]);
86
92
  export var Description = styled.div.withConfig({
87
93
  displayName: "CodeAreastyles__Description",
88
- componentId: "sc-svoej2-17"
94
+ componentId: "sc-svoej2-18"
89
95
  })([""]);
90
96
  export var Counter = styled.div.withConfig({
91
97
  displayName: "CodeAreastyles__Counter",
92
- componentId: "sc-svoej2-18"
98
+ componentId: "sc-svoej2-19"
93
99
  })(["font-weight:500;"]);
94
100
  export var ErrorText = styled.div.withConfig({
95
101
  displayName: "CodeAreastyles__ErrorText",
96
- componentId: "sc-svoej2-19"
102
+ componentId: "sc-svoej2-20"
97
103
  })(["color:", ";margin-bottom:4px;"], function (props) {
98
104
  return props.theme.palette['red-600'];
99
105
  });
package/dist/CodeArea.types.d.ts CHANGED
@@ -25,6 +25,7 @@ export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSynt
25
25
  currentSyntax: SyntaxName;
26
26
  allowFullscreen?: boolean;
27
27
  isFullscreen: boolean;
28
+ placeholder?: ReactNode;
28
29
  toggleFullscreen: () => void;
29
30
  value?: string;
30
31
  defaultValue?: string;
package/dist/components/CodeAreaEditorRaw.d.ts CHANGED
@@ -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, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
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;
4
4
  export default CodeAreaEditorRaw;
package/dist/components/CodeAreaEditorRaw.js CHANGED
@@ -1,7 +1,7 @@
1
- var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig"];
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"];
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 } from 'react';
4
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5
5
  import Editor, { loader } from '@monaco-editor/react';
6
6
  import { InlineSelect } from '@synerise/ds-inline-edit';
7
7
  import Loader from '@synerise/ds-loader';
@@ -32,11 +32,18 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
32
32
  readOnly = _ref.readOnly,
33
33
  onSyntaxChange = _ref.onSyntaxChange,
34
34
  loaderConfig = _ref.loaderConfig,
35
+ _ref$placeholder = _ref.placeholder,
36
+ placeholder = _ref$placeholder === void 0 ? 'placeholder content' : _ref$placeholder,
37
+ value = _ref.value,
38
+ defaultValue = _ref.defaultValue,
35
39
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
36
40
  var monacoRef = useRef(null);
37
41
  var loaderConfigSet = useRef(false);
38
42
  var editorRef = useRef(null);
39
43
  var wrapperRef = useRef(null);
44
+ var _useState = useState(false),
45
+ isTouched = _useState[0],
46
+ setIsTouched = _useState[1];
40
47
  var _useResizeObserver = useResizeObserver(wrapperRef),
41
48
  height = _useResizeObserver.height,
42
49
  width = _useResizeObserver.width;
@@ -80,6 +87,7 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
80
87
  if (editorRef.current) {
81
88
  editorRef.current.pushUndoStop();
82
89
  }
90
+ setIsTouched(true);
83
91
  onChange && onChange(newValue, event);
84
92
  }, [onChange, counterLimit]);
85
93
  var _useMemo = useMemo(function () {
@@ -136,12 +144,17 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
136
144
  }
137
145
  }, [currentSyntax]);
138
146
  var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen);
147
+ var shouldShowPlaceholder = useMemo(function () {
148
+ return isTouched && !value || !value && !defaultValue;
149
+ }, [defaultValue, isTouched, value]);
139
150
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
140
151
  hasError: Boolean(errorText)
141
152
  }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
142
153
  ref: wrapperRef
143
154
  }, /*#__PURE__*/React.createElement(Editor, _extends({}, props, {
144
155
  width: width,
156
+ value: value,
157
+ defaultValue: defaultValue,
145
158
  height: height,
146
159
  language: currentSyntax,
147
160
  theme: DS_MONACO_THEME_NAME,
@@ -150,7 +163,9 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
150
163
  beforeMount: handleBeforeMount,
151
164
  onMount: handleEditorDidMount,
152
165
  loading: /*#__PURE__*/React.createElement(Loader, null)
153
- }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
166
+ })), placeholder && /*#__PURE__*/React.createElement(S.EditorPlaceholder, {
167
+ shouldShowPlaceholder: shouldShowPlaceholder
168
+ }, placeholder)), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
154
169
  texts: allTexts,
155
170
  syntaxSelect: syntaxSelect,
156
171
  allowFullscreen: allowFullscreen && !isFullscreen,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-code-area",
3
- "version": "1.1.23",
3
+ "version": "1.2.0",
4
4
  "description": "CodeArea UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -36,12 +36,12 @@
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
38
  "@monaco-editor/react": "4.4.6",
39
- "@synerise/ds-button": "^1.4.11",
40
- "@synerise/ds-core": "^1.5.2",
39
+ "@synerise/ds-button": "^1.4.12",
40
+ "@synerise/ds-core": "^1.6.0",
41
41
  "@synerise/ds-form-field": "^1.1.16",
42
42
  "@synerise/ds-icon": "^1.7.2",
43
- "@synerise/ds-inline-edit": "^1.0.28",
44
- "@synerise/ds-loader": "^1.0.9",
43
+ "@synerise/ds-inline-edit": "^1.0.29",
44
+ "@synerise/ds-loader": "^1.0.10",
45
45
  "@synerise/ds-tooltip": "^1.2.0",
46
46
  "@synerise/ds-typography": "^1.0.21",
47
47
  "@synerise/ds-utils": "^1.4.2"
@@ -56,5 +56,5 @@
56
56
  "devDependencies": {
57
57
  "monaco-editor": "0.34.1"
58
58
  },
59
- "gitHead": "4f56489ade5b08524578821d0c51c963002ff48c"
59
+ "gitHead": "6a2e6e20a480aafe5d67748d04fbe3d4ce91a544"
60
60
  }