@arbisoft/react-design-tool 1.0.25 → 1.0.27

package/README.md

@@ -40,13 +40,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.25
+npm install @arbisoft/react-design-tool@1.0.27
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.25
+yarn add @arbisoft/react-design-tool@1.0.27
 
 ```
 
@@ -321,3 +321,36 @@ const handleSave = async () => {
     // { elements: [array of elements], image: canvas image }
 };
 ```
+
+#### 17. `onCreateNewTemplate` (Function)
+
+A callback function that is triggered when a user clicks the **"New Template"** button from within the editor.  
+It receives the freshly generated array of canvas elements so you can store it in your own backend (e.g., as a custom template).
+
+**Example:**
+
+```jsx
+onCreateNewTemplate={(elements) => {
+  // Save new custom template to backend
+  axios.post('/api/templates', {
+    template_name: 'New Custom Template',
+    template_language_id: 2,
+    json_data: elements,
+  });
+}}
+```
+
+#### 18. `onTemplateSelect` (Function)
+
+A callback function triggered whenever a user selects a template (default or custom) from the template sidebar.
+It receives the backend `id` of the selected template (if available), or `null` if the canvas was reset (e.g., for a new template).
+
+
+**Example:**
+
+```jsx
+onTemplateSelect={(templateId) => {
+  console.log('User selected template ID:', templateId); // null if new template
+  setSelectedTemplateId(templateId);
+}}
+```

package/dist/cjs/index.js

@@ -5107,13 +5107,17 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
     languageLocale = _ref.languageLocale,
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     defaultTemplatesList = _ref.defaultTemplatesList,
-    customTemplatesList = _ref.customTemplatesList;
+    customTemplatesList = _ref.customTemplatesList,
+    onTemplateSelect = _ref.onTemplateSelect;
   var renderDefaultContent = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(TemplatesContainer, null, defaultTemplatesList === null || defaultTemplatesList === void 0 ? void 0 : defaultTemplatesList.map(function (item, index) {
       return /*#__PURE__*/React.createElement(TemplateItem, {
         key: index,
         onClick: function onClick() {
           oncreateNewTemplate(item === null || item === void 0 ? void 0 : item.elements);
+          if (typeof onTemplateSelect === 'function') {
+            onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
+          }
         }
       }, /*#__PURE__*/React.createElement(StyledImage, {
         src: item === null || item === void 0 ? void 0 : item.image,
@@ -5553,7 +5557,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     styleProps = _ref.styleProps,
     defaultText = _ref.defaultText,
-    languageLocale = _ref.languageLocale;
+    languageLocale = _ref.languageLocale,
+    onTemplateSelect = _ref.onTemplateSelect;
   return /*#__PURE__*/React.createElement(SideBarWrapper, {
     visible: selectedSideBarItem && helperSideBarVisible
   }, /*#__PURE__*/React.createElement(SideBarHeader, {
@@ -5568,6 +5573,7 @@ var HelperSideBar = function HelperSideBar(_ref) {
     onDeleteCustomTemplate: onDeleteCustomTemplate,
     defaultTemplatesList: defaultTemplatesList,
     customTemplatesList: customTemplatesList,
+    onTemplateSelect: onTemplateSelect,
     styleProps: styleProps
   }) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextSideBar, {
     onAddTextToCanvas: onAddTextToCanvas,
@@ -5704,6 +5710,8 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
  * @property {Function} onSave
  * @property {string} [saveButtonText]
  * @property {'en'|'ru'|'pl'|'de'|'es'|'fr'|'it'} [locale]
+ * @property {Function} [onCreateNewTemplate] - called when user creates a new template, passes new canvas elements
+ * @property {Function} [onTemplateSelect] - called when a template is selected, passes template id
  */
 
 /**
@@ -5736,7 +5744,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     showSaveButton = _ref.showSaveButton,
     saveButtonText = _ref.saveButtonText,
     _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? 'en' : _ref$locale;
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    onCreateNewTemplate = _ref.onCreateNewTemplate,
+    onTemplateSelect = _ref.onTemplateSelect;
   var stageRef = React.useRef(null);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -6322,6 +6332,14 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setElements(_toConsumableArray(elems));
     setHistory([]);
     setRedoStack([]);
+    if (typeof onCreateNewTemplate === 'function') {
+      onCreateNewTemplate(elems);
+    }
+
+    // Clear selected template ID
+    if (typeof onTemplateSelect === 'function') {
+      onTemplateSelect(null);
+    }
   };
   var sendSelectedElementToBack = function sendSelectedElementToBack() {
     var copyElements = _toConsumableArray(elements);
@@ -6634,7 +6652,8 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDeleteCustomTemplate: onDeleteCustomTemplate,
     styleProps: styleProps,
     defaultText: defaultText,
-    languageLocale: languageLocale
+    languageLocale: languageLocale,
+    onTemplateSelect: onTemplateSelect
   }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor
   // canvasSize={canvasSize}
   , {