@agilemotion/oui-react-js 1.8.4 → 1.8.5

package/dist/ApplicationManager.js

@@ -46,6 +46,9 @@ class ApplicationManager {
         hasActiveMeeting() {
           return instance.hasActiveMeeting();
         },
+        getActiveMeetingKey() {
+          return instance.getActiveMeetingKey();
+        },
         getUserDetails() {
           return instance.getUserDetails();
         },
@@ -101,6 +104,12 @@ class ApplicationManager {
   setNavigator(navigator) {
     this.props.navigator = navigator;
   }
+  setActiveMeetingKey(activeMeetingKey) {
+    this.props.activeMeetingKey = activeMeetingKey;
+  }
+  getActiveMeetingKey() {
+    return this.props.activeMeetingKey;
+  }
   setHasActiveMeeting(hasActiveMeeting) {
     this.props.hasActiveMeeting = hasActiveMeeting;
   }

package/dist/DynamicJS.js

@@ -43,7 +43,8 @@ class DynamicJS {
     return _ApplicationManager.default.resolveExpressionValue(expression);
   };
   parseScript = (script, componentId, isScriptlet) => {
-    let parsedScript = script.replace(/#this/g, '#' + componentId).replace(/isNull/g, 'this.isNull').replace(/removeKeys/g, 'this.removeKeys').replace(/\$application/g, '@#{' + _ApplicationManager.APP_VARIABLE + "}").replace(/isEmpty/g, 'this.isEmpty');
+    let scriptCode = typeof script === 'string' ? script : this.getScriptCode(script);
+    let parsedScript = scriptCode.replace(/#this/g, '#' + componentId).replace(/isNull/g, 'this.isNull').replace(/removeKeys/g, 'this.removeKeys').replace(/\$application/g, '@#{' + _ApplicationManager.APP_VARIABLE + "}").replace(/isEmpty/g, 'this.isEmpty');
     let matches = parsedScript.match(TEMPLATE_REGEX);
     if (!_Utils.default.isNull(matches)) {
       let expressions = [];
@@ -69,6 +70,8 @@ class DynamicJS {
    * @param isScriplet
    * @param event
    * @param scriptConfig
+   * @param printError
+   * @param scriptParam
    */
   executeScript = (() => {
     var _this2 = this;
@@ -76,6 +79,8 @@ class DynamicJS {
       let isScriplet = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
       let event = arguments.length > 4 ? arguments[4] : undefined;
       let scriptConfig = arguments.length > 5 ? arguments[5] : undefined;
+      let printError = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+      let scriptParam = arguments.length > 7 ? arguments[7] : undefined;
       let parsedScript = _this2.parseScript(scriptCode, componentId, isScriplet);
       let eventParam = null;
       if (!_Utils.default.isNull(event)) {
@@ -86,13 +91,15 @@ class DynamicJS {
         let func = new Function(parsedScript.replace(/\$event/g, JSON.stringify(eventParam)));
         if (!_Utils.default.isNull(name)) {
           DynamicJS.prototype[name] = func;
-          let result = instance[name]({});
+          let result = instance[name](scriptParam ? scriptParam : {});
           delete DynamicJS.prototype[name];
           return result;
         }
       } catch (e) {
-        console.error(e);
-        console.error("Error Executing script : ", scriptConfig?.lines);
+        if (printError) {
+          console.error(e);
+          console.error("Error Executing script : ", scriptConfig?.lines);
+        }
         throw new Error(e.message);
       }
       return null;
@@ -122,6 +129,7 @@ class DynamicJS {
    * @param componentId
    * @param valuesMap
    * @param event
+   * @param scriptParam
    */
   executeScriptObject = (() => {
     var _this3 = this;
@@ -129,11 +137,27 @@ class DynamicJS {
       let componentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       let valuesMap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       let event = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-      let scriptBody = '';
-      for (const line of script.lines) {
-        scriptBody += _this3.parseScriptLine(line, valuesMap);
+      let scriptParam = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+      let scriptBody = _this3.getScriptCode(script, valuesMap);
+      return _this3.executeScript(name, scriptBody, componentId, false, event, script, true, scriptParam);
+    };
+  })();
+  getScriptCode(script, valuesMap) {
+    let scriptBody = '';
+    for (const line of script.lines) {
+      scriptBody += this.parseScriptLine(line, valuesMap);
+    }
+    return scriptBody;
+  }
+  executeScriptFunction = (() => {
+    var _this4 = this;
+    return function (scriptObject) {
+      const fnCode = _this4.parseScript(scriptObject, null, false);
+      const dynamicFn = new Function(`return ${fnCode}`)();
+      for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        params[_key - 1] = arguments[_key];
       }
-      return _this3.executeScript(name, scriptBody, componentId, false, event, script);
+      return dynamicFn(...params);
     };
   })();
 }

package/dist/RestService.js

@@ -352,9 +352,7 @@ class RestService {
   }
   processSuccessfulResponseData(component, data, viewId, successMessage) {
     let response;
-    if (!_Utils.default.isNull(data) && data.toString().trim().length === 0) {
-      response = null;
-    } else if (typeof data === 'object' || _Utils.default.isNull(data) || data.toString().trim().length === 0) {
+    if (typeof data === 'object' || _Utils.default.isNull(data) || data.toString().trim().length === 0) {
       response = data;
     } else {
       try {

package/dist/Utils.js

@@ -188,14 +188,19 @@ class Utils {
     return fieldGrid;
   }
   static evaluateBooleanExpression(expression, id, defaultValue) {
-    if (expression === "false" || expression === false) {
-      return false;
-    } else if (expression === "true" || expression === true) {
-      return true;
-    } else if (!Utils.isNull(expression)) {
-      return _DynamicJS.default.executeScript(`${id}UtilsBoolEval`, expression);
+    try {
+      if (expression === "false" || expression === false) {
+        return false;
+      } else if (expression === "true" || expression === true) {
+        return true;
+      } else if (!Utils.isNull(expression)) {
+        return _DynamicJS.default.executeScript(`${id}UtilsBoolEval`, expression);
+      }
+      return !this.isNull(defaultValue) ? defaultValue : false;
+    } catch (e) {
+      console.error("Error evaluation a boolean expression [" + expression + "] for : " + id);
+      throw e;
     }
-    return !this.isNull(defaultValue) ? defaultValue : false;
   }
   static getEntityViewTitle(queryParameterState, viewName) {
     if (Utils.isNull(queryParameterState) || Utils.isNull(queryParameterState.selection)) {
@@ -379,8 +384,12 @@ class Utils {
     const keys = path.split('.');
     let current = obj;
     for (let i = 0; i < keys.length - 1; i++) {
-      if (!current[keys[i]] || typeof current[keys[i]] !== 'object') {
+      if (!current[keys[i]]) {
         current[keys[i]] = {};
+      } else {
+        if (typeof current[keys[i]] !== 'object') {
+          throw new Error("Invalid property value in property chain [" + path + "] - [" + keys[i] + "]");
+        }
       }
       current = current[keys[i]];
     }

package/dist/components/Button.js

@@ -14,6 +14,7 @@ var _styles = require("@mui/styles");
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   root: {
@@ -30,9 +31,9 @@ const Button = props => {
   const classes = useStyles();
   const [disabled, setDisabled] = _react.default.useState(false);
   const [visible, setVisible] = _react.default.useState(false);
+  const [label, setLabel] = _react.default.useState(false);
   const [config, setConfig] = _react.default.useState(null);
   let color = _Utils.default.getComponentAttribute(props.config, 'color', 'default');
-  let label = _Utils.default.getComponentAttribute(props.config, 'label', null);
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -47,6 +48,12 @@ const Button = props => {
     }
   }, [config]);
   _react.default.useEffect(() => {
+    try {
+      let label = _DynamicJS.default.executeScript(props.config.id + 'label', _Utils.default.getComponentAttribute(props.config, 'label', ''), props.config.viewId, true, null, null, false);
+      setLabel(label);
+    } catch (e) {
+      setLabel(_Utils.default.getComponentAttribute(props.config, 'label', ''));
+    }
     setConfig(props.tableRow ? {
       ...props.config,
       id: props.config.id + '_' + props.tableRow.id?.replaceAll('-', '')

package/dist/components/Calendar.js

@@ -28,7 +28,6 @@ var _Calendar = _interopRequireDefault(require("../js/Calendar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
 const eventTemplate = {
   id: '',
   title: '',
@@ -79,9 +78,11 @@ const Calendar = props => {
   const [selectedEvent, setSelectedEvent] = (0, _react.useState)(null);
   const calendarRef = (0, _react.useRef)(null);
   const dialogRef = (0, _react.useRef)(null);
-  const [dialogTop, setDialogTop] = (0, _react.useState)(null);
-  const [dialogLeft, setDialogLeft] = (0, _react.useState)(null);
   const [refresher, setRefresher] = (0, _react.useState)(0);
+  const [dialogPosition, setDialogPosition] = (0, _react.useState)({
+    bottom: '20px',
+    right: '20px'
+  });
   const contextChangeHandler = {};
   let counter = 1;
   const StyledDialog = (0, _withStyles.default)({
@@ -95,14 +96,16 @@ const Calendar = props => {
       minWidth: '400px',
       padding: '0',
       overflow: 'hidden',
-      position: 'absolute',
-      top: dialogTop,
-      left: dialogLeft,
+      position: 'fixed',
+      bottom: dialogPosition.bottom,
+      right: dialogPosition.right,
+      left: 'auto !important',
+      top: 'auto !important',
+      transform: 'none !important',
+      margin: '0 !important',
       borderRadius: '4px'
     }
-  })(props => /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
-    hideBackdrop: true
-  }, props)));
+  })(_Dialog.default);
   const loadEvents = function () {
     let track = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     fetch(encodeURI(location + _ApplicationManager.default.getContextRoot() + '/calendar/api/v1/event/list'), {
@@ -199,20 +202,8 @@ const Calendar = props => {
         el: el,
         event: event
       } = _ref2;
-      // * Only grab required field otherwise it goes in infinity loop
-      // ! Always grab all fields rendered by form (even if it get `undefined`) otherwise due to Vue3/Composition API you might get: "object is not extensible"
-      // event.value = grabEventDataFromEventApi(clickedEvent)
-
-      // eslint-disable-next-line no-use-before-define
-      // isAddNewEventSidebarActive.value = true
-
-      setOpen(true);
-      var rect = el.getBoundingClientRect();
-      let topOffset = rect.bottom + 250 > document.body.getBoundingClientRect().bottom ? -1 * (rect.bottom + 250 - document.body.getBoundingClientRect().bottom) : 8;
-      let leftOffset = rect.right + 400 > document.body.getBoundingClientRect().right ? rect.right + 400 - document.body.getBoundingClientRect().right : 64;
-      setDialogTop(rect.top + topOffset + 'px');
-      setDialogLeft(rect.left - leftOffset + 'px');
       setSelectedEvent(event);
+      setOpen(true);
       let elementsByClassName = document.getElementsByClassName('fc-scroller-liquid-absolute');
       if (elementsByClassName && elementsByClassName.length > 0) {
         elementsByClassName[0].removeEventListener("scroll", calenderScrollListener);
@@ -399,10 +390,26 @@ const Calendar = props => {
     onClose: () => {
       setOpen(false);
     },
+    hideBackdrop: true,
+    disableEnforceFocus: true,
+    disableAutoFocus: true,
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description",
     "aria-modal": false,
-    fullWidth: true
+    style: {
+      position: 'fixed',
+      left: 'auto',
+      top: 'auto'
+    },
+    PaperProps: {
+      style: {
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        margin: 0,
+        transform: 'none'
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'w-100 h-100'
   }, createEventPopup())));

package/dist/components/DataGrid.js

@@ -128,6 +128,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   const [filterHandle] = _react.default.useState({});
   const [columnLayoutHandles] = _react.default.useState({});
   const [editorHandles] = _react.default.useState({});
+  const [rowErrorMap] = _react.default.useState({});
+  const [visible, setVisible] = _react.default.useState(true);
   const rowCount = _react.default.useRef(-1);
   const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
@@ -259,6 +261,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         if (filterHandle && filterHandle.api) {
           filterHandle.api.refresh();
         }
+        if (!_Utils.default.isNull(props.config.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
+        }
       }
     };
   };
@@ -595,15 +600,44 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       }
     }
   };
+  const removeAllRowErrorsByColumn = (columnName, rowErrors) => {
+    if (rowErrors) {
+      for (let i = rowErrors.length - 1; i >= 0; i--) {
+        if (rowErrors[i].column === columnName) {
+          rowErrors.splice(i, 1);
+        }
+      }
+    }
+  };
+  const rowErrorHandler = (rowId, error, column) => {
+    if (Object.keys(rowErrorMap).length === 0 || !rowErrorMap[rowId]) {
+      rowErrorMap[rowId] = [];
+    }
+    if (error !== null) {
+      if (!rowErrorMap[rowId].find(rowError => rowError.column === column)) {
+        rowErrorMap[rowId].push(error);
+      }
+    } else {
+      removeAllRowErrorsByColumn(column, rowErrorMap[rowId]);
+    }
+  };
+  const isRowErrorsEmpty = () => {
+    if (Object.keys(rowErrorMap).length === 0) {
+      return true;
+    }
+    for (const key of Object.keys(rowErrorMap)) {
+      if (rowErrorMap[key].length > 0) {
+        return false;
+      }
+    }
+    return true;
+  };
   const valueChangeCallback = valueRows => {
     if (!_Utils.default.isNull(props.valueChangeHandler)) {
-      let invalidRows = valueRows.filter(row => {
-        return !_Utils.default.isNull(row.errors) && row.errors.length > 0;
-      });
-      if (invalidRows.length > 0) {
-        props.valueChangeHandler(null);
-      } else {
+      if (isRowErrorsEmpty()) {
         props.valueChangeHandler(valueRows);
+      } else {
+        props.valueChangeHandler(null);
       }
     }
   };
@@ -656,7 +690,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     }
     return editorHandles[column.id + "_editor"];
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
@@ -797,6 +831,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       key: index + "_" + column.id,
       onClick: event => handleCellClick(event, row.id, column)
     }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+      onRowError: rowErrorHandler,
       handle: createCellEditorHandle(column),
       viewId: props.viewId,
       editor: column.editor,
@@ -808,7 +843,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       columnConfig: column,
       dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
       row: row,
-      contentType: column.fieldType || column.editor?.fieldType
+      contentType: column.fieldType || column.editor?.fieldType,
+      cellFormatter: column.cellFormatter
     }))));
   })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
     rowsPerPageOptions: rowsPerPageOptions,

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -157,6 +157,151 @@ const DocumentTemplateDesignerComponent = props => {
   function applyChanges() {
     setup();
   }
+  const comparePositions = (a, b) => {
+    if (a.location.yIn === b.location.yIn && a.location.xIn === b.location.xIn) {
+      return 0;
+    }
+    if (a.location.yIn > b.location.yIn) {
+      return 1;
+    }
+    if (a.location.yIn < b.location.yIn) {
+      return -1;
+    }
+    if (a.location.yIn === b.location.yIn) {
+      if (a.location.xIn < b.location.xIn) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+    return 0;
+  };
+  const getSearchStartPosition = (anchorPosition, searchList) => {
+    if (!anchorPosition) {
+      return searchList[0].startIn;
+    }
+    for (const searchListElement of searchList) {
+      if (comparePositions(searchListElement.startIn, anchorPosition) >= 0) {
+        return searchListElement.startIn;
+      }
+    }
+    return anchorPosition;
+  };
+  const getSearchEndPosition = (anchorPosition, searchList) => {
+    if (!anchorPosition) {
+      return searchList[0].endIn;
+    }
+    for (const searchListElement of searchList) {
+      if (comparePositions(searchListElement.endIn, anchorPosition) >= 0) {
+        return searchListElement.endIn;
+      }
+    }
+    return anchorPosition;
+  };
+  function generateSubstrings(sentence) {
+    let substrings = [];
+    for (let i = 0; i < sentence.length; i++) {
+      substrings.push(sentence.substring(0, i + 1)); // Add substring from index 0 to i
+    }
+    return substrings;
+  }
+  function detectWordWrap(anchorPosition, startPosition, endPosition, editor, sentence, startY) {
+    let substrings = generateSubstrings(sentence);
+    let wordWrapAnchorPosition = anchorPosition;
+    let wordWrapPositions = [];
+    if (substrings.length === 1) {
+      wordWrapPositions.push({
+        startPosition,
+        endPosition
+      });
+    } else {
+      let wordWrapTokens = [];
+      let currentY = startY;
+      let wordWrapIndex = 0;
+      let pos = 0;
+      for (const substring of substrings) {
+        container.documentEditor.search.find(substring);
+        let endPosition = getSearchEndPosition(wordWrapAnchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+        wordWrapAnchorPosition = endPosition;
+        if (endPosition.location.yIn > currentY) {
+          wordWrapTokens.push(sentence.substring(wordWrapIndex, pos));
+          currentY = endPosition.location.yIn;
+          wordWrapIndex = pos;
+        }
+        pos++;
+      }
+
+      //Add last substring
+      wordWrapTokens.push(sentence.substring(wordWrapIndex, sentence.length));
+      //console.log("\n\n\n\n\nWORD WRAP TOKENS : [" + wordWrapIndex + "]", wordWrapTokens);
+      for (const wordWrapToken of wordWrapTokens) {
+        container.documentEditor.search.find(wordWrapToken);
+        let startPosition = getSearchStartPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+        let endPosition = getSearchEndPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+        wordWrapPositions.push({
+          startPosition,
+          endPosition
+        });
+      }
+    }
+    return wordWrapPositions;
+  }
+  const setPlaceholderPositions = prop => {
+    console.log("SETTING PLACE HOLDER POSITIONS FOR : " + prop.placeHolder);
+    container.documentEditor.search.find(prop.originalText);
+    let searchResults = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList;
+    prop.positions = [];
+    for (const searchResult of searchResults) {
+      if (searchResult.endIn.location.yIn > searchResult.startIn.location.yIn) {
+        let positions = detectWordWrap(searchResult.startIn, searchResult.startIn, searchResult.endIn, container.documentEditor, prop.originalText, searchResult.startIn.location.yIn);
+        for (const position of positions) {
+          prop.positions.push({
+            start: {
+              paragraph: {
+                x: position.startPosition.currentWidget.paragraph.x,
+                y: position.startPosition.currentWidget.paragraph.y,
+                height: position.startPosition.currentWidget.paragraph.height
+              },
+              x: position.startPosition.location.xIn,
+              y: position.startPosition.location.yIn
+            },
+            end: {
+              paragraph: {
+                x: position.endPosition.currentWidget.paragraph.x,
+                y: position.endPosition.currentWidget.paragraph.y,
+                height: position.endPosition.currentWidget.paragraph.height
+              },
+              x: position.endPosition.location.xIn,
+              y: position.endPosition.location.yIn
+            }
+          });
+        }
+      } else {
+        prop.positions.push({
+          start: {
+            paragraph: {
+              x: searchResult.startIn.currentWidget.paragraph.x,
+              y: searchResult.startIn.currentWidget.paragraph.y,
+              height: searchResult.startIn.currentWidget.paragraph.height
+            },
+            x: searchResult.startIn.location.xIn,
+            y: searchResult.startIn.location.yIn
+          },
+          end: {
+            paragraph: {
+              x: searchResult.endIn.currentWidget.paragraph.x,
+              y: searchResult.endIn.currentWidget.paragraph.y,
+              height: searchResult.endIn.currentWidget.paragraph.height
+            },
+            x: searchResult.endIn.location.xIn,
+            y: searchResult.endIn.location.yIn
+          }
+        });
+      }
+    }
+    console.log(prop);
+    console.log("\n\n");
+  };
   function setup() {
     let initialFormValue = {
       properties: []
@@ -180,6 +325,8 @@ const DocumentTemplateDesignerComponent = props => {
             placeHolder: match.text
           };
         }
+        prop.originalText = match.originalText;
+        setPlaceholderPositions(prop);
         if (!initialFormValue.properties.find(p => p.placeHolder === match.text)) {
           initialFormValue.properties.push(prop);
         }
@@ -255,6 +402,7 @@ const DocumentTemplateDesignerComponent = props => {
         }
       }
       matches.push({
+        originalText: find,
         start: startIndex,
         end: endIndex + endTag.length,
         text: find.replace(/(\r\n|\n|\r)/gm, "")
@@ -270,6 +418,27 @@ const DocumentTemplateDesignerComponent = props => {
     if (container) {
       setupContainer();
       //autoSave();
+
+      const editor = container.documentEditor;
+      editor.addEventListener("keyDown", event => {
+        const startPosition = container.documentEditor.selection.start;
+        let selectedProperty;
+        for (const property of model.current.properties) {
+          for (const position of property.positions) {
+            if (position.start.y === startPosition.location.yIn && position.start.x <= startPosition.location.xIn && position.end.x >= startPosition.location.xIn) {
+              selectedProperty = property;
+              break;
+            }
+          }
+        }
+        if (selectedProperty) {
+          event.event.preventDefault();
+          if (event.event.key === "Backspace") {
+            // For some reason, preventDefault does not work on the backspace key so we throw this exception as a temporary measure to prevent it
+            throw new Error("Backspace pressed on restricted area");
+          }
+        }
+      });
     }
   }, [container]);
   (0, _react.useEffect)(() => {