@synerise/ds-code-area 0.3.3 → 0.4.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.
 
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.3.4...@synerise/ds-code-area@0.4.0) (2024-12-11)
+
+
+### Features
+
+* **code-area:** switch monaco library ([c0d4ef6](https://github.com/Synerise/synerise-design/commit/c0d4ef68e26e791e99b4086b9847cbb524505af1))
+
+
+
+
+
+## [0.3.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.3.3...@synerise/ds-code-area@0.3.4) (2024-12-04)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
+
+
+
+
 ## [0.3.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.3.2...@synerise/ds-code-area@0.3.3) (2024-11-29)
 
 **Note:** Version bump only for package @synerise/ds-code-area

package/dist/CodeArea.js

@@ -10,12 +10,14 @@ var CodeArea = function CodeArea(_ref) {
     getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
     onFullscreenChange = _ref.onFullscreenChange,
     codeAreaProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var wrapperRef = useRef(null);
   var _useState = useState(false),
     isFullscreen = _useState[0],
     setIsFullscreen = _useState[1];
+  var wrapperRef = useRef(null);
   var toggleFullscreen = function toggleFullscreen() {
-    setIsFullscreen(!isFullscreen);
+    setIsFullscreen(function (prevState) {
+      return !prevState;
+    });
     onFullscreenChange && onFullscreenChange(isFullscreen);
   };
   return /*#__PURE__*/React.createElement("div", {

package/dist/CodeArea.types.d.ts

@@ -1,6 +1,7 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { MonacoEditorProps } from 'react-monaco-editor';
-import { TooltipProps } from 'antd/lib/tooltip';
+import type monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import type { EditorProps } from '@monaco-editor/react';
+import type { ReactNode, CSSProperties } from 'react';
+import type { TooltipProps } from 'antd/lib/tooltip';
 import TooltipExtendedProps from '@synerise/ds-tooltip/dist/Tooltip.types';
 export type CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;
 export type CodeAreaSyntaxOption<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = {
@@ -12,9 +13,8 @@ export type CodeAreaTexts = {
     closeFullscreen: ReactNode;
     fullscreenTitle: ReactNode;
 };
-export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<MonacoEditorProps, 'language'> & {
+export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<EditorProps, 'language'> & {
     label?: ReactNode;
-    fullscreenLabel?: ReactNode;
     description?: ReactNode;
     texts?: Partial<CodeAreaTexts>;
     counter?: {
@@ -25,9 +25,12 @@ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> =
     syntaxOptions?: CodeAreaSyntaxOption<SyntaxName>[];
     currentSyntax: SyntaxName;
     allowFullscreen?: boolean;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    value?: string;
+    defaultValue?: string;
     readOnly?: boolean;
     tooltip?: ReactNode;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
     tooltipProps?: TooltipExtendedProps & TooltipProps;
     style?: CSSProperties;
     zIndex?: string | number;
@@ -37,15 +40,24 @@ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> =
         count?: number;
         isValid?: boolean;
     }) => ReactNode;
+    onSyntaxChange?: (newSyntax: SyntaxName) => void;
+};
+export type CodeAreaEditorProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = CodeAreaCommonProps<SyntaxName> & {
+    fullscreenLabel?: ReactNode;
     renderAdditionalDescription?: (props: {
         isFullscreen?: boolean;
         count?: number;
         isValid?: boolean;
     }) => ReactNode;
+};
+export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<CodeAreaEditorProps<SyntaxName>, 'toggleFullscreen' | 'isFullscreen'> & {
     onFullscreenChange?: (isFullscreen: boolean) => void;
-    onSyntaxChange?: (newSyntax: SyntaxName) => void;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
 };
-export type CodeAreaEditorProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = CodeAreaProps<SyntaxName> & {
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
+export type CodeAreaEditorRawProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = CodeAreaCommonProps<SyntaxName> & {
+    isValid: boolean;
+    isSyntaxSelectVisible?: boolean;
+    onDidChangeMarkers?: (markers: monaco.editor.IMarker[]) => void;
+    counterLimit?: number;
+    count?: number;
 };

package/dist/components/AriaContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AriaContainer: ({ element }: {
+    element: HTMLElement;
+}) => React.JSX.Element;

package/dist/components/AriaContainer.js

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef } from 'react';
+export var AriaContainer = function AriaContainer(_ref) {
+  var element = _ref.element;
+  var ariaContainerRef = useRef(null);
+  useEffect(function () {
+    var container = ariaContainerRef.current;
+    if (container && element.childNodes.length > 0) {
+      container.appendChild(element);
+    }
+  }, [element]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "monaco-aria-custom-container",
+    "data-testid": "monaco-aria-container",
+    ref: ariaContainerRef
+  });
+};

package/dist/components/CodeAreaEditor.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CodeAreaEditorProps } from '../CodeArea.types';
-export declare const CodeAreaEditor: ({ label, description, counter, errorText, syntaxOptions, currentSyntax, allowFullscreen, fullscreenLabel, renderFooterContent, renderAdditionalDescription, tooltip, tooltipProps, style, className, texts, onChange, onSyntaxChange, value, readOnly, isFullscreen, toggleFullscreen, zIndex, ...monacoProps }: CodeAreaEditorProps) => React.JSX.Element;
+export declare const CodeAreaEditor: ({ renderAdditionalDescription, description, errorText, style, zIndex, className, counter, fullscreenLabel, tooltip, label, tooltipProps, ...props }: CodeAreaEditorProps) => React.JSX.Element;
 export default CodeAreaEditor;

package/dist/components/CodeAreaEditor.js

@@ -1,4 +1,4 @@
-var _excluded = ["label", "description", "counter", "errorText", "syntaxOptions", "currentSyntax", "allowFullscreen", "fullscreenLabel", "renderFooterContent", "renderAdditionalDescription", "tooltip", "tooltipProps", "style", "className", "texts", "onChange", "onSyntaxChange", "value", "readOnly", "isFullscreen", "toggleFullscreen", "zIndex"];
+var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -6,158 +6,75 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useState, useMemo, useRef, useEffect } from 'react';
-import MonacoEditor from 'react-monaco-editor';
-import { InlineSelect } from '@synerise/ds-inline-edit';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Label } from '@synerise/ds-input';
-import { NOOP, useResizeObserver } from '@synerise/ds-utils';
+import { useResizeObserver } from '@synerise/ds-utils';
+import { getCharCount } from '../utils/getCharCount';
+import { ContentAbove, ContentBelow, FullscreenHeader } from './index';
+import { CodeAreaEditorRaw } from './CodeAreaEditorRaw';
 import * as S from '../CodeArea.styles';
-import { FullscreenHeader, ContentBelow, ContentAbove, BottomBar } from './index';
-import { getDefaultTexts, getCharCount, calculateRequiredSpace } from '../utils';
-import { MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE, DS_MONACO_THEME, DS_MONACO_THEME_NAME } from '../constants';
+import { getDefaultTexts } from '../utils/getDefaultTexts';
+import { calculateRequiredSpace } from '../utils/calculateRequiredSpace';
 export var CodeAreaEditor = function CodeAreaEditor(_ref) {
-  var label = _ref.label,
+  var renderAdditionalDescription = _ref.renderAdditionalDescription,
     description = _ref.description,
-    counter = _ref.counter,
     errorText = _ref.errorText,
-    syntaxOptions = _ref.syntaxOptions,
-    currentSyntax = _ref.currentSyntax,
-    allowFullscreen = _ref.allowFullscreen,
+    style = _ref.style,
+    zIndex = _ref.zIndex,
+    className = _ref.className,
+    counter = _ref.counter,
     fullscreenLabel = _ref.fullscreenLabel,
-    renderFooterContent = _ref.renderFooterContent,
-    renderAdditionalDescription = _ref.renderAdditionalDescription,
     tooltip = _ref.tooltip,
+    label = _ref.label,
     tooltipProps = _ref.tooltipProps,
-    style = _ref.style,
-    className = _ref.className,
-    texts = _ref.texts,
-    onChange = _ref.onChange,
-    onSyntaxChange = _ref.onSyntaxChange,
-    value = _ref.value,
-    readOnly = _ref.readOnly,
-    isFullscreen = _ref.isFullscreen,
-    toggleFullscreen = _ref.toggleFullscreen,
-    zIndex = _ref.zIndex,
-    monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var allowFullscreen = props.allowFullscreen,
+    texts = props.texts,
+    isFullscreen = props.isFullscreen,
+    toggleFullscreen = props.toggleFullscreen,
+    syntaxOptions = props.syntaxOptions,
+    value = props.value,
+    renderFooterContent = props.renderFooterContent,
+    readOnly = props.readOnly,
+    defaultValue = props.defaultValue;
   var _useState = useState(true),
     isValid = _useState[0],
     setIsValid = _useState[1];
-  var editorRef = useRef(null);
-  var monacoRef = useRef(null);
-  var wrapperRef = useRef(null);
   var contentBelowRef = useRef(null);
-  var _useResizeObserver = useResizeObserver(wrapperRef),
-    height = _useResizeObserver.height,
-    width = _useResizeObserver.width;
-  var _useResizeObserver2 = useResizeObserver(contentBelowRef),
-    contentBelowHeight = _useResizeObserver2.height;
+  var _useResizeObserver = useResizeObserver(contentBelowRef),
+    contentBelowHeight = _useResizeObserver.height;
   var counterLimit = counter == null ? void 0 : counter.limit;
-  var count = getCharCount(value, counterLimit);
-  var allTexts = getDefaultTexts(texts);
-  var editorWillMount = monacoProps.editorWillMount,
-    editorDidMount = monacoProps.editorDidMount,
-    options = monacoProps.options;
-  var combinedOptions = _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options, {
-    readOnly: readOnly,
-    domReadOnly: readOnly
-  });
-  var handleEditorWillMount = function handleEditorWillMount(monacoInstance) {
-    monacoRef.current = monacoInstance;
-    monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
-    monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
-    monacoInstance.editor.onDidChangeMarkers(function () {
-      var markers = monacoInstance.editor.getModelMarkers({});
-      setIsValid(!markers.length);
-    });
-    editorWillMount && editorWillMount(monacoInstance);
-  };
-  var handleEditorDidMount = function handleEditorDidMount(editor, monacoInstance) {
-    editorRef.current = editor;
-    editorDidMount && editorDidMount(editor, monacoInstance);
-  };
-  var handleChange = function handleChange(newValue, event) {
-    if (counterLimit && newValue.length > counterLimit) {
-      editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
-      return;
-    }
-    if (editorRef.current) {
-      editorRef.current.pushUndoStop();
-    }
-    onChange && onChange(newValue, event);
-  };
-  var labelWithTooltip = label && /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: (tooltip || tooltipProps) && _objectSpread({}, tooltipProps, {
-      placement: isFullscreen ? 'right' : undefined,
-      title: tooltip
-    })
-  });
-  var renderCounter = function renderCounter(placement) {
+  var count = getCharCount(value || defaultValue, counterLimit);
+  var renderCounter = useCallback(function (placement) {
     return counterLimit && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
-  };
+  }, [counterLimit, counter, count]);
+  var handleOnDidChangeMarkers = useCallback(function (markers) {
+    setIsValid(!markers.length);
+  }, []);
+  var labelWithTooltip = useMemo(function () {
+    return label && /*#__PURE__*/React.createElement(Label, {
+      label: label,
+      tooltip: tooltip,
+      tooltipConfig: (tooltip || tooltipProps) && _objectSpread({}, tooltipProps, {
+        placement: isFullscreen ? 'right' : undefined,
+        title: tooltip
+      })
+    });
+  }, [isFullscreen, tooltip, tooltipProps, label]);
+  var additionalDescription = useMemo(function () {
+    return renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
+      isFullscreen: isFullscreen,
+      count: count,
+      isValid: isValid
+    }));
+  }, [count, isValid, isFullscreen, renderAdditionalDescription]);
   useEffect(function () {
     setIsValid(!errorText);
   }, [errorText]);
-  useEffect(function () {
-    if (editorRef.current) {
-      var _editorRef$current, _monacoRef$current;
-      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel();
-      // eslint-disable-next-line no-unused-expressions
-      currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
-    }
-  }, [currentSyntax]);
-  var _useMemo = useMemo(function () {
-      var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
-        var itemLabel = item.label,
-          language = item.language;
-        return {
-          key: language,
-          text: itemLabel || language
-        };
-      });
-      var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
-        return item.language === currentSyntax;
-      });
-      return {
-        syntaxDataSource: source,
-        currentSyntaxItem: currentItem || {
-          language: currentSyntax
-        }
-      };
-    }, [currentSyntax, syntaxOptions]),
-    syntaxDataSource = _useMemo.syntaxDataSource,
-    currentSyntaxItem = _useMemo.currentSyntaxItem;
-  var syntaxSelect = useMemo(function () {
-    return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /*#__PURE__*/React.createElement(InlineSelect, {
-      size: "small",
-      expanded: false,
-      input: {
-        name: 'syntax-select',
-        value: currentSyntaxItem.label || currentSyntaxItem.language,
-        onChange: NOOP
-      },
-      onValueChange: function onValueChange(item) {
-        item.key && onSyntaxChange && onSyntaxChange("" + item.key);
-      },
-      initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
-      dataSource: syntaxDataSource
-    }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
-      size: "small"
-    }, currentSyntaxItem.label || currentSyntaxItem.language);
-  }, [currentSyntaxItem.label, currentSyntaxItem.language, onSyntaxChange, readOnly, syntaxDataSource]);
-  var customFooterContent = renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
-    isFullscreen: isFullscreen,
-    count: count,
-    isValid: isValid
-  }));
-  var additionalDescription = renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
-    isFullscreen: isFullscreen,
-    count: count,
-    isValid: isValid
-  }));
-  var isBottomBarShowing = Boolean(syntaxSelect || allowFullscreen && !isFullscreen || customFooterContent);
+  var isSyntaxSelectVisible = syntaxOptions && syntaxOptions.length > 1 && !readOnly;
+  var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen || renderFooterContent);
   var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
+  var allTexts = getDefaultTexts(texts);
   return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
     readOnly: !!readOnly,
     requiredSpace: requiredSpace,
@@ -172,27 +89,14 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
   }), !isFullscreen && /*#__PURE__*/React.createElement(ContentAbove, {
     label: labelWithTooltip,
     counter: renderCounter('top')
-  }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
-    hasError: Boolean(errorText)
-  }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
-    theme: DS_MONACO_THEME_NAME,
-    width: width,
-    height: height
-  }, monacoProps, {
-    options: combinedOptions,
-    value: value,
-    onChange: handleChange,
-    editorDidMount: handleEditorDidMount,
-    editorWillMount: handleEditorWillMount,
-    language: currentSyntax
-  }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
-    texts: allTexts,
-    syntaxSelect: syntaxSelect,
-    allowFullscreen: allowFullscreen && !isFullscreen,
-    toggleFullscreen: toggleFullscreen,
-    customFooterContent: customFooterContent
+  }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(CodeAreaEditorRaw, _extends({}, props, {
+    onDidChangeMarkers: handleOnDidChangeMarkers,
+    counter: counter,
+    errorText: errorText,
+    count: count,
+    counterLimit: counterLimit,
+    isSyntaxSelectVisible: isSyntaxSelectVisible,
+    isValid: isValid
   })), /*#__PURE__*/React.createElement(ContentBelow, {
     ref: contentBelowRef,
     errorText: errorText,

package/dist/components/CodeAreaEditorRaw.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { 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, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
+export default CodeAreaEditorRaw;

package/dist/components/CodeAreaEditorRaw.js

@@ -0,0 +1,162 @@
+var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import Editor from '@monaco-editor/react';
+import Loader from '@synerise/ds-loader';
+import { InlineSelect } from '@synerise/ds-inline-edit';
+import { NOOP, useResizeObserver } from '@synerise/ds-utils';
+import { getDefaultTexts } from '../utils/getDefaultTexts';
+import { DS_MONACO_THEME, DS_MONACO_THEME_NAME, MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE } from '../constants';
+import { AriaContainer } from './AriaContainer';
+import * as S from '../CodeArea.styles';
+import { BottomBar } from './BottomBar';
+export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
+  var onMount = _ref.onMount,
+    beforeMount = _ref.beforeMount,
+    options = _ref.options,
+    errorText = _ref.errorText,
+    texts = _ref.texts,
+    allowFullscreen = _ref.allowFullscreen,
+    toggleFullscreen = _ref.toggleFullscreen,
+    renderFooterContent = _ref.renderFooterContent,
+    isFullscreen = _ref.isFullscreen,
+    count = _ref.count,
+    counterLimit = _ref.counterLimit,
+    onChange = _ref.onChange,
+    isValid = _ref.isValid,
+    onDidChangeMarkers = _ref.onDidChangeMarkers,
+    isSyntaxSelectVisible = _ref.isSyntaxSelectVisible,
+    syntaxOptions = _ref.syntaxOptions,
+    currentSyntax = _ref.currentSyntax,
+    readOnly = _ref.readOnly,
+    onSyntaxChange = _ref.onSyntaxChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var monacoRef = useRef(null);
+  var editorRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var _useResizeObserver = useResizeObserver(wrapperRef),
+    height = _useResizeObserver.height,
+    width = _useResizeObserver.width;
+  var monacoAriaContainerElement = useMemo(function () {
+    return document.createElement('div');
+  }, []);
+  var editorOptions = useMemo(function () {
+    return _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options, {
+      readOnly: readOnly,
+      domReadOnly: readOnly,
+      ariaContainerElement: monacoAriaContainerElement
+    });
+  }, [options, readOnly, monacoAriaContainerElement]);
+  var allTexts = useMemo(function () {
+    return getDefaultTexts(texts);
+  }, [texts]);
+  var handleBeforeMount = useCallback(function (monacoInstance) {
+    monacoRef.current = monacoInstance;
+    monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
+    monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
+    monacoInstance.editor.onDidChangeMarkers(function () {
+      var markers = monacoInstance.editor.getModelMarkers({});
+      onDidChangeMarkers && onDidChangeMarkers(markers);
+    });
+    beforeMount && beforeMount(monacoInstance);
+  }, [onDidChangeMarkers, beforeMount]);
+  var handleEditorDidMount = useCallback(function (monacoEditor, monacoInstance) {
+    editorRef.current = monacoEditor;
+    onMount && onMount(monacoEditor, monacoInstance);
+  }, [onMount]);
+  var handleChange = useCallback(function (newValue, event) {
+    if (counterLimit && newValue && newValue.length > counterLimit) {
+      editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
+      return;
+    }
+    if (editorRef.current) {
+      editorRef.current.pushUndoStop();
+    }
+    onChange && onChange(newValue, event);
+  }, [onChange, counterLimit]);
+  var _useMemo = useMemo(function () {
+      var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
+        var itemLabel = item.label,
+          language = item.language;
+        return {
+          key: language,
+          text: itemLabel || language
+        };
+      });
+      var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
+        return item.language === currentSyntax;
+      });
+      return {
+        syntaxDataSource: source,
+        currentSyntaxItem: currentItem || {
+          language: currentSyntax
+        }
+      };
+    }, [currentSyntax, syntaxOptions]),
+    syntaxDataSource = _useMemo.syntaxDataSource,
+    currentSyntaxItem = _useMemo.currentSyntaxItem;
+  var syntaxSelect = useMemo(function () {
+    return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /*#__PURE__*/React.createElement(InlineSelect, {
+      size: "small",
+      expanded: false,
+      input: {
+        name: 'syntax-select',
+        value: currentSyntaxItem.label || currentSyntaxItem.language,
+        onChange: NOOP
+      },
+      onValueChange: function onValueChange(item) {
+        item.key && onSyntaxChange && onSyntaxChange("" + item.key);
+      },
+      initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
+      dataSource: syntaxDataSource
+    }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
+      size: "small"
+    }, currentSyntaxItem.label || currentSyntaxItem.language);
+  }, [currentSyntaxItem.label, currentSyntaxItem.language, onSyntaxChange, readOnly, syntaxDataSource]);
+  var customFooterContent = useMemo(function () {
+    return renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
+      isFullscreen: isFullscreen,
+      count: count,
+      isValid: isValid
+    }));
+  }, [renderFooterContent, isFullscreen, count, isValid]);
+  useEffect(function () {
+    if (editorRef.current) {
+      var _editorRef$current, _monacoRef$current;
+      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel();
+      // eslint-disable-next-line no-unused-expressions
+      currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
+    }
+  }, [currentSyntax]);
+  var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen);
+  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,
+    height: height,
+    language: currentSyntax,
+    theme: DS_MONACO_THEME_NAME,
+    options: editorOptions,
+    onChange: handleChange,
+    beforeMount: handleBeforeMount,
+    onMount: handleEditorDidMount,
+    loading: /*#__PURE__*/React.createElement(Loader, null)
+  }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
+    texts: allTexts,
+    syntaxSelect: syntaxSelect,
+    allowFullscreen: allowFullscreen && !isFullscreen,
+    toggleFullscreen: toggleFullscreen,
+    customFooterContent: customFooterContent
+  })), /*#__PURE__*/React.createElement(AriaContainer, {
+    element: monacoAriaContainerElement
+  }));
+};
+export default CodeAreaEditorRaw;

package/dist/components/index.d.ts

@@ -2,4 +2,5 @@ export * from './ContentAbove';
 export * from './ContentBelow';
 export * from './FullscreenHeader';
 export * from './BottomBar';
+export * from './CodeAreaEditorRaw';
 export * from './CodeAreaEditor';

package/dist/components/index.js

@@ -2,4 +2,5 @@ export * from './ContentAbove';
 export * from './ContentBelow';
 export * from './FullscreenHeader';
 export * from './BottomBar';
+export * from './CodeAreaEditorRaw';
 export * from './CodeAreaEditor';

package/dist/constants.d.ts

@@ -1,5 +1,5 @@
-import type { monaco } from 'react-monaco-editor';
-export declare const MONACO_DEFAULT_OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions;
+import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+export declare const MONACO_DEFAULT_OPTIONS: editor.IStandaloneEditorConstructionOptions;
 export declare const TRIGGER_SOURCE = "ds-code-area";
 export declare const DS_MONACO_THEME_NAME = "DSTheme";
-export declare const DS_MONACO_THEME: monaco.editor.IStandaloneThemeData;
+export declare const DS_MONACO_THEME: editor.IStandaloneThemeData;

package/dist/constants.js

@@ -5,6 +5,10 @@ export var MONACO_DEFAULT_OPTIONS = {
   },
   automaticLayout: true,
   renderLineHighlight: 'none',
+  quickSuggestions: {
+    other: true,
+    strings: true
+  },
   scrollbar: {
     verticalScrollbarSize: 11,
     verticalSliderSize: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-code-area",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "CodeArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,16 +34,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.21",
+    "@monaco-editor/react": "4.4.6",
+    "@synerise/ds-button": "^0.22.0",
     "@synerise/ds-core": "^0.42.1",
     "@synerise/ds-icon": "^0.68.0",
-    "@synerise/ds-inline-edit": "^0.9.3",
-    "@synerise/ds-input": "^0.24.16",
-    "@synerise/ds-tooltip": "^0.14.51",
-    "@synerise/ds-typography": "^0.16.8",
+    "@synerise/ds-inline-edit": "^0.9.4",
+    "@synerise/ds-input": "^0.24.17",
+    "@synerise/ds-tooltip": "^0.14.52",
+    "@synerise/ds-typography": "^0.16.9",
     "@synerise/ds-utils": "^0.31.2",
-    "monaco-editor": "0.47.0",
-    "react-monaco-editor": "^0.55.0"
+    "monaco-editor": "0.34.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "5.0.1"
   },
-  "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
+  "gitHead": "05aa1b6f2038d83cc94b2270fd495c8df2c09dd5"
 }