@synerise/ds-code-area 1.1.22 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* **code-area:** add placeholder prop ([a02bb94](https://github.com/Synerise/synerise-design/commit/a02bb949f56a736cff8bb056e70d954ca1663cf1))
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
+
+
+
+
 ## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.1.21...@synerise/ds-code-area@1.1.22) (2025-09-19)
 
 **Note:** Version bump only for package @synerise/ds-code-area

package/README.md

@@ -64,6 +64,7 @@ const syntaxOptions = [
 | onSyntaxChange              | triggered when user switches syntax                            | `(newSyntax: SyntaxName) => void`                       | -       |
 | texts                       | customise displayed texts                                      | `CodeAreaTexts`                                         | -       |
 | getPopupContainer           | customise where fullscreen layer is rendered into              | getPopupContainer (@synerise/ds-utils)                  | -       |
+| placeholder                 | placeholder content                                            | `ReactNode`                                             | -       |
 
 ### CodeAreaTexts
 

package/dist/CodeArea.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const AriaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditorPlaceholder: import("styled-components").StyledComponent<"div", any, {
+    shouldShowPlaceholder?: boolean;
+}, never>;
 export declare const EditorInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {

package/dist/CodeArea.styles.js

@@ -8,17 +8,23 @@ export var AriaContainer = styled.div.withConfig({
   displayName: "CodeAreastyles__AriaContainer",
   componentId: "sc-svoej2-1"
 })(["flex:0 0 0;"]);
+export var EditorPlaceholder = styled.div.withConfig({
+  displayName: "CodeAreastyles__EditorPlaceholder",
+  componentId: "sc-svoej2-2"
+})(["pointer-events:none;position:absolute;left:62px;right:0;top:0;bottom:0;display:", ";"], function (props) {
+  return props.shouldShowPlaceholder ? 'block' : 'none';
+});
 export var EditorInnerWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__EditorInnerWrapper",
-  componentId: "sc-svoej2-2"
-})([""]);
+  componentId: "sc-svoej2-3"
+})(["position:relative;"]);
 export var CodeAreaContent = styled.div.withConfig({
   displayName: "CodeAreastyles__CodeAreaContent",
-  componentId: "sc-svoej2-3"
+  componentId: "sc-svoej2-4"
 })(["flex:1 1 100%;display:flex;min-height:0;flex-direction:column;"]);
 export var EditorWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__EditorWrapper",
-  componentId: "sc-svoej2-4"
+  componentId: "sc-svoej2-5"
 })(["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) {
   return props.hasError ? props.theme.palette['red-600'] : props.theme.palette['grey-200'];
 }, function (props) {
@@ -26,15 +32,15 @@ export var EditorWrapper = styled.div.withConfig({
 });
 export var FullscreenHeaderTitle = styled(Title).withConfig({
   displayName: "CodeAreastyles__FullscreenHeaderTitle",
-  componentId: "sc-svoej2-5"
+  componentId: "sc-svoej2-6"
 })(["display:flex;gap:16px;align-items:center;margin-bottom:0;"]);
 export var FullscreenHeader = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__FullscreenHeader",
-  componentId: "sc-svoej2-6"
+  componentId: "sc-svoej2-7"
 })(["padding:16px 24px;"]);
 export var CodeAreaWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__CodeAreaWrapper",
-  componentId: "sc-svoej2-7"
+  componentId: "sc-svoej2-8"
 })(["", " ", "{", ";}"], function (props) {
   if (props.isFullscreen) {
     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({
 });
 export var AdditionalDescription = styled.div.withConfig({
   displayName: "CodeAreastyles__AdditionalDescription",
-  componentId: "sc-svoej2-8"
+  componentId: "sc-svoej2-9"
 })(["margin-bottom:8px;"]);
 export var ContentBelow = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentBelow",
-  componentId: "sc-svoej2-9"
+  componentId: "sc-svoej2-10"
 })(["", " align-items:flex-start;"], function (props) {
   return !props.isEmpty && "margin-top: 8px;";
 });
 export var ContentAbove = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentAbove",
-  componentId: "sc-svoej2-10"
+  componentId: "sc-svoej2-11"
 })(["margin-bottom:8px;flex:0 0 auto;"]);
 export var SyntaxTitle = styled(Text).withConfig({
   displayName: "CodeAreastyles__SyntaxTitle",
-  componentId: "sc-svoej2-11"
+  componentId: "sc-svoej2-12"
 })([""]);
 export var BottomBar = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__BottomBar",
-  componentId: "sc-svoej2-12"
+  componentId: "sc-svoej2-13"
 })(["border-top:solid 1px ", ";padding:8px;flex:0 0 auto;"], function (props) {
   return props.theme.palette['grey-200'];
 });
 export var LeftSide = styled.div.withConfig({
   displayName: "CodeAreastyles__LeftSide",
-  componentId: "sc-svoej2-13"
+  componentId: "sc-svoej2-14"
 })([""]);
 export var RightSide = styled.div.withConfig({
   displayName: "CodeAreastyles__RightSide",
-  componentId: "sc-svoej2-14"
+  componentId: "sc-svoej2-15"
 })(["margin-left:auto;display:flex;gap:8px;"]);
 export var SyntaxSelect = styled(LeftSide).withConfig({
   displayName: "CodeAreastyles__SyntaxSelect",
-  componentId: "sc-svoej2-15"
+  componentId: "sc-svoej2-16"
 })(["padding-left:8px;"]);
 export var BottomBarElement = styled.div.withConfig({
   displayName: "CodeAreastyles__BottomBarElement",
-  componentId: "sc-svoej2-16"
+  componentId: "sc-svoej2-17"
 })([""]);
 export var Description = styled.div.withConfig({
   displayName: "CodeAreastyles__Description",
-  componentId: "sc-svoej2-17"
+  componentId: "sc-svoej2-18"
 })([""]);
 export var Counter = styled.div.withConfig({
   displayName: "CodeAreastyles__Counter",
-  componentId: "sc-svoej2-18"
+  componentId: "sc-svoej2-19"
 })(["font-weight:500;"]);
 export var ErrorText = styled.div.withConfig({
   displayName: "CodeAreastyles__ErrorText",
-  componentId: "sc-svoej2-19"
+  componentId: "sc-svoej2-20"
 })(["color:", ";margin-bottom:4px;"], function (props) {
   return props.theme.palette['red-600'];
 });

package/dist/CodeArea.types.d.ts

@@ -25,6 +25,7 @@ export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSynt
     currentSyntax: SyntaxName;
     allowFullscreen?: boolean;
     isFullscreen: boolean;
+    placeholder?: ReactNode;
     toggleFullscreen: () => void;
     value?: string;
     defaultValue?: string;

package/dist/components/CodeAreaEditorRaw.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CodeAreaEditorRawProps } from '../CodeArea.types';
-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;
+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;
 export default CodeAreaEditorRaw;

package/dist/components/CodeAreaEditorRaw.js

@@ -1,7 +1,7 @@
-var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig"];
+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"];
 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); }
 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; }
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Editor, { loader } from '@monaco-editor/react';
 import { InlineSelect } from '@synerise/ds-inline-edit';
 import Loader from '@synerise/ds-loader';
@@ -32,11 +32,18 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     readOnly = _ref.readOnly,
     onSyntaxChange = _ref.onSyntaxChange,
     loaderConfig = _ref.loaderConfig,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'placeholder content' : _ref$placeholder,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var monacoRef = useRef(null);
   var loaderConfigSet = useRef(false);
   var editorRef = useRef(null);
   var wrapperRef = useRef(null);
+  var _useState = useState(false),
+    isTouched = _useState[0],
+    setIsTouched = _useState[1];
   var _useResizeObserver = useResizeObserver(wrapperRef),
     height = _useResizeObserver.height,
     width = _useResizeObserver.width;
@@ -80,6 +87,7 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     if (editorRef.current) {
       editorRef.current.pushUndoStop();
     }
+    setIsTouched(true);
     onChange && onChange(newValue, event);
   }, [onChange, counterLimit]);
   var _useMemo = useMemo(function () {
@@ -136,12 +144,17 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     }
   }, [currentSyntax]);
   var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen);
+  var shouldShowPlaceholder = useMemo(function () {
+    return isTouched && !value || !value && !defaultValue;
+  }, [defaultValue, isTouched, value]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
     hasError: Boolean(errorText)
   }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement(Editor, _extends({}, props, {
     width: width,
+    value: value,
+    defaultValue: defaultValue,
     height: height,
     language: currentSyntax,
     theme: DS_MONACO_THEME_NAME,
@@ -150,7 +163,9 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     beforeMount: handleBeforeMount,
     onMount: handleEditorDidMount,
     loading: /*#__PURE__*/React.createElement(Loader, null)
-  }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
+  })), placeholder && /*#__PURE__*/React.createElement(S.EditorPlaceholder, {
+    shouldShowPlaceholder: shouldShowPlaceholder
+  }, placeholder)), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
     texts: allTexts,
     syntaxSelect: syntaxSelect,
     allowFullscreen: allowFullscreen && !isFullscreen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-code-area",
-  "version": "1.1.22",
+  "version": "1.2.0",
   "description": "CodeArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,12 +36,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@monaco-editor/react": "4.4.6",
-    "@synerise/ds-button": "^1.4.11",
-    "@synerise/ds-core": "^1.5.2",
+    "@synerise/ds-button": "^1.4.12",
+    "@synerise/ds-core": "^1.6.0",
     "@synerise/ds-form-field": "^1.1.16",
     "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-inline-edit": "^1.0.27",
-    "@synerise/ds-loader": "^1.0.9",
+    "@synerise/ds-inline-edit": "^1.0.29",
+    "@synerise/ds-loader": "^1.0.10",
     "@synerise/ds-tooltip": "^1.2.0",
     "@synerise/ds-typography": "^1.0.21",
     "@synerise/ds-utils": "^1.4.2"
@@ -56,5 +56,5 @@
   "devDependencies": {
     "monaco-editor": "0.34.1"
   },
-  "gitHead": "5029af8713235b315d36bb3c73363f2feca86da0"
+  "gitHead": "6a2e6e20a480aafe5d67748d04fbe3d4ce91a544"
 }