Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: textarea value not saved/rendered #390

Merged
merged 1 commit into from
Dec 30, 2024
Merged

fix: textarea value not saved/rendered #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 6 additions & 20 deletions src/lib/js/components/controls/form/textarea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,12 @@ class TextAreaControl extends Control {
config: {
label: i18n.get('controls.form.textarea'),
},
// This is the beginning of actions being supported for render
// editor field actions should be in config.action
// action: {
// mousedown: function(evt) {
// let {target} = evt;
// let startHeight = target.style.height;
// const onMouseup = evt => {
// let {target} = evt;
// let endHeight = target.style.height;
// if (startHeight !== endHeight) {
// //eslint-disable-next-line
// let fieldId = closest(target, '.stage-field').id;
// const field = d.fields.get(fieldId).instance;
// field.addAttribute('style', `height: ${endHeight}`);
// }
// target.removeEventListener('mouseup', onMouseup);
// };
// target.addEventListener('mouseup', onMouseup);
// }
// },
// actions here will be applied to the preview in the editor
action: {
input: function ({ target: { value } }) {
this.setData?.('value', value)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will be the Field instance when called from editor preview

},
},
meta: {
group: 'common',
icon: 'textarea',
Expand Down
15 changes: 9 additions & 6 deletions src/lib/js/components/controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,10 @@ import { CONTROL_GROUP_CLASSNAME } from '../../constants.js'
import Components, { Stages, Rows } from '../index.js'

// control configs
import layoutControls from './layout/index.js'
import formControls from './form/index.js'
import htmlControls from './html/index.js'

import defaultOptions from './options.js'
import { get, set } from '../../common/utils/object.mjs'

const defaultElements = [...formControls, ...htmlControls, ...layoutControls]

/**
*
*/
Expand Down Expand Up @@ -379,7 +375,14 @@ export class Controls {
this.container = container
this.groupOrder = unique(groupOrder.concat(['common', 'html', 'layout']))
this.options = options
return Promise.all(this.registerControls([...defaultElements, ...elements]))

const layoutControls = await import('./layout/index.js')
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using dynamic import to prevent circular dependency found when writing tests for controls

const formControls = await import('./form/index.js')
const htmlControls = await import('./html/index.js')

const allControls = [layoutControls.default, formControls.default, htmlControls.default].flat()

return Promise.all(this.registerControls([...allControls, ...elements]))
}
}

Expand Down
15 changes: 10 additions & 5 deletions src/lib/js/components/fields/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,13 +130,15 @@ export default class Field extends Component {
}
}

setData = (path, value) => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shortcut for setting data without updating the preview or edit panels

return super.set(path, value)
}

/**
* wrapper for Data.set
*/
set(...args) {
const [path, value] = args

const data = super.set(path, value)
set(path, value) {
const data = this.setData(path, value)
this.updatePreview()

return data
Expand Down Expand Up @@ -310,7 +312,10 @@ export default class Field extends Component {
const prevData = clone(this.data)
const { action = {} } = controls.get(prevData.config.controlId)
prevData.id = `prev-${this.id}`
prevData.action = action
prevData.action = Object.entries(action).reduce((acc, [key, value]) => {
acc[key] = value.bind(this)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure about this one but it binds the Field instance so we have access to setData from the component class.

return acc
}, {})

if (this.data?.config.editableContent) {
prevData.attrs = { ...prevData.attrs, contenteditable: true }
Expand Down
Loading