I am trying to improve the property panel of the camunda modeler to add a custom component, when I plugin the code and run the code I get the error in the SpellProps.js file while using TextFieldEntry with the error :
hooks.module.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘context’)
at q (hooks.module.js:1:1551)
at useError (index.esm.js:436:17)
at b.TextfieldEntry [as constructor] (index.esm.js:4244:1)
at b.O [as render] (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
My contents of SpellProps.js file :
import { TextFieldEntry, isTextFieldEntryEdited } from ‘@bpmn-io/properties-panel’;
import { is } from ‘bpmn-js/lib/util/ModelUtil’;
import { html } from ‘htm/preact’;
import { debounce } from ‘min-dash’;
export default function(element, modeling, translate) {
return [
{
id: ‘spell’,
element,
modeling:modeling,
translate:translate,
isEdited: isTextFieldEntryEdited,
component: Spell
}
];
}
function Spell(props) {
const { element, id, modeling,translate} = props;
//console.log(modeling)
//const modeling = useService(‘modeling’);
//const translate = useService(‘translate’);
//const debounce = useService(‘debounceInput’);
const getValue = () => {
return element.businessObject.spell || ‘’;
};
const setValue = (value) => {
return modeling.updateProperties(element, {
spell: value
});
};
console.log(id,element,translate,getValue,setValue,debounce)
return html<${TextFieldEntry} id=${ id } element=${ element } description=${ translate('Apply a black magic spell') } label=${ translate('Spell') } getValue=${ getValue } setValue=${ setValue } debounce=${ debounce } tooltip=${ translate('Check available spells in the spellbook.') } />
}
And i referred the following repo : bpmn-js-examples/properties-panel-extension at main · bpmn-io/bpmn-js-examples · GitHub
can someone help me here