fix: bug with edit panel not showing

src/lib/js/components/columns/index.js

@@ -3,7 +3,7 @@ import Column from './column.js'
 
 const DEFAULT_CONFIG = {
  actionButtons: {
- buttons: ['clone|copy|handle', 'handle', 'remove'],
+ buttons: ['clone', 'handle', 'remove'],
  disabled: [],
  },
 }

src/lib/js/components/component.js

@@ -200,7 +200,7 @@ export default class Component extends Data {
  },
  }
  },
- clone: (icons = ['copy']) => {
+ clone: (icons = ['copy', 'handle']) => {
  return {
  ...dom.btnTemplate({ content: parseIcons(icons) }),
  className: ['item-clone'],
@@ -214,11 +214,10 @@ export default class Component extends Data {
  },
  }
 
- return this.config.actionButtons.buttons.map(btn => {
- const [key, ...rest] = btn.split('|')
- const icons = rest.length ? rest : undefined
- return (buttonConfig[key] && buttonConfig[key](icons)) || btn
- })
+ const { buttons, disabled } = this.config.actionButtons
+ const activeButtons = buttons.filter(btn => !disabled.includes(btn))
+
+ return activeButtons.map(btn => buttonConfig[btn]?.() || btn)
  }
 
  /**
@@ -295,7 +294,7 @@ export default class Component extends Data {
 
  // @todo add event for onAddChild
  const grandChildren = child.get('children')
- if (grandChildren && grandChildren.length) {
+ if (grandChildren?.length) {
  child.loadChildren(grandChildren)
  }
 
@@ -503,7 +502,7 @@ export default class Component extends Data {
  getComponent(path) {
  const [type, id] = path.split('.')
  const group = Components[type]
- return id === this.id ? this : group && group.get(id)
+ return id === this.id ? this : group?.get(id)
  }
 
  value = (path, val) => {

src/lib/js/components/fields/field.js

@@ -28,6 +28,9 @@ export default class Field extends Component {
  this.preview = dom.create(this.fieldPreview())
  this.editPanels = []
 
+ const actionButtons = this.getActionButtons()
+ const hasEditButton = actionButtons.children.children.some(child => child.meta?.id === 'edit')
+
  let field = {
  tag: 'li',
  attrs: {
@@ -36,10 +39,10 @@ export default class Field extends Component {
  id: this.id,
  children: [
  this.label,
- this.getActionButtons(), // fieldEdit window
- this.fieldEdit, // fieldEdit window,
- this.preview, // preview
- ],
+ actionButtons,
+ hasEditButton && this.fieldEdit, // fieldEdit window,
+ this.preview,
+ ].filter(Boolean),
  panelNav: this.panelNav,
  dataset: {
  hoverTag: i18n.get('field'),
@@ -224,14 +227,15 @@ export default class Field extends Component {
  fieldEdit.action = {
  onRender: () => {
  this.resizePanelWrap()
- // if (!editPanelLength) {
+ if (!editPanelLength) {
+ // If this element has no edit panels, remove the edit toggle
  const field = this.dom
  const editToggle = field.querySelector('.item-edit-toggle')
  const fieldActions = field.querySelector('.field-actions')
  const actionButtons = fieldActions.getElementsByTagName('button')
  fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`
  dom.remove(editToggle)
- // }
+ }
  },
  }
  }
@@ -248,7 +252,7 @@ export default class Field extends Component {
  prevData.id = `prev-${this.id}`
 
  if (this.data?.config.editableContent) {
- prevData.attrs = Object.assign({}, prevData.attrs, { contenteditable: true })
+ prevData.attrs = { ...prevData.attrs, contenteditable: true }
  }
 
  const fieldPreview = {