Clear current (text) content of an element

[craigharman]

I have a textable component that I want to be able to drop on text within the editor and have the existing text removed and replaced with the new component.

I have tried various events and procedures to remove the text and they either:

1. Behave correctly in the editor but when you view the HTML the new component generated HTML is not there
2. Behave correctly in the editor but when you view the HTML the text and the new component HTML is present

Here is the code that gets me the closest (I think):

editor.DomComponents.addType('new-text', {
			model: {
				defaults: {
					textable: 1,
					dropable: false,
					placeholder: 'NEW-TEXT-VARIABLE',

				},
				toHTML() {
					return `{{ ${this.get('placeholder')} }}`;
				},
			},
			// The view below it's just an example of creating a different UX
			view: {
				tagName: 'span',
				// When we blur from a TextComponent, all its children components are
				// flattened via innerHTML and parsed by the editor. So to keep the state
				// of our props in sync with the model so we need to expose props in the HTML
				updateProps() {
					const { el, model } = this;
					el.setAttribute('data-gjs-placeholder', model.get('placeholder'));
				},
				init() {
					this.listenTo(this.model, 'active', this.clearParent());
				},
				clearParent() {
					this.model.closestType('text').empty()
				},
				onRender() {
					const { model, el } = this;
					const currentPlh = model.get('placeholder');
					const marker = document.createElement('span');
					marker.innerHTML = currentPlh;
					el.appendChild(marker);
					marker.setAttribute('style', 'padding: 2px; border-radius: 3px; border-bottom: dashed; -webkit-appearance: none;');

					this.updateProps();
					
				}
			}
		});

This lets me drop the new block into a text container and the text is removed and a placeholder displayed in the editor, however viewing the HTML does not display the expected HTML: {{ NEW-TEXT-VARIABLE }} instead the element dragged into is empty.

Can anyone suggest an event that will allow me to empty the parent element BEFORE the new model is added or, a way to just remove the text in the target without removing the newly added component?

[craigharman]

Update: I've been able to remove the text from an element by replacing the clearParent() code with the following:

clearParent() {
					const parent = this.model.closestType('text')
					
					parent.components().remove(parent.findType('textnode'))
				},

However, this produces a console error index.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'getView') I'm assuming because Grape still has a reference to the removed textnodes somewhere?

[artf]

I think your custom this.listenTo(this.model, 'active', this.clearParent()) might cause an issue here, you don't actually need it as you can simply indicate onActive method in your view and it will be triggered on activation.
You can also try to remove the whole content of the closest text and re-append the current component, so it would look like this:

onActive() {
  const closestType = this.model.closestType('text');
  if (closestType) {
    closestType.empty();
    closestType.append(this.model);
  }
},

and I don't think you need updateProps either, if you're using the latest version, the text component should keep the reference of its children components.

[craigharman]

Amazing, that worked a treat. Thank you so much!