How to create a new component on Enter ↵ key?

[frank-embleton]

I'm working with creating a text component, on the user pressing Enter I'd like to create a new component rather than adding a

So far, I have tried using CKEditor as well as modifying Codemirror, but have had no luck. I found an old issue which showed someone having the inverse problem, but I'm not sure that using a version from 2018 is the best idea 🙃

[lexoyo]

Did you try listening to the enter key then adding a component with grapesjs api?

You can start listening when the selection changes to a text component

[frank-embleton]

Thank you @lexoyo!

In case someone is searching for this in the future then here is the code used to get it working

// Listen for the 'component:selected' event
editor.on("component:selected", function (model) {
  if (model.get("type") === "text") {
    // Get the contentEditable element
    const el = model.getEl();
    // Set contentEditable attribute to true
    el.setAttribute("contentEditable", true);
    if (el.getAttribute("contentEditable") === "true") {
      // Add a keydown event listener to the contentEditable element
      el.addEventListener("keydown", function (event) {
        // Check if the 'Enter' key was pressed
        if (event.key === "Enter") {
          // Prevent the default 'Enter' key behavior
          event.preventDefault();
          // Create a new paragraph component
          const newParagraph = {
            type: "text",
            tagName: "p",
            content: "New paragraph",
          };
          // Append the new paragraph to the parent of the selected component
          model.parent().components().add(newParagraph);
          // Select the new paragraph in the editor
          editor.select(newParagraph);
        }
      });
    }
  }
});

[lexoyo]

Nice!
You could make it a plugin ;)
And distribute it on https://gjs.market
In any case that's interesting

[glaprida]

Hey there, thanks for this code.

I think I have improved upon it and thought I would share it.

function handleKeydown(event) {
        const el = this;  // 'this' refers to the element where the event listener is attached
        if (el.getAttribute("contentEditable") === "true") {
        const shiftPressed = event.shiftKey;
        if (event.key === "Enter" && !shiftPressed) { // allow for line breaks with Shift + Enter
            event.preventDefault();
            event.stopPropagation();
            const model = editor.value.getSelected();
            if (model) {
                const newP = model.parent().append({ type: 'text' }, { at: model.index() + 1 });// this makes sure to add the new text just below the current text

                model.getEl().setAttribute('contenteditable', 'false')
                model.getEl().blur()

                editor.value.select(newP[0])
                editor.value.getSelected().trigger('active').getEl().focus()

                //TODO check for caret position. if its not at the end of the text, pass the remaining text to the new paragraph (an update the current text as well)
            }
        } else if (event.key === "Backspace" && el.innerText.trim().length==0 ) {// optional, remove text component when pressing 'backspace' on empty text fields
            editor.value.getSelected().remove();
        }
        }
    }
  
  editor.value.on("component:selected", function (model) {
    if (model.isInstanceOf("text")) { // so that any component type that extends from text is also taken into account
      const el = model.getEl();
      el.contentEditable = true;  // Make sure contentEditable is set
      el.removeEventListener("keydown", handleKeydown); // remove listeners so that they don't add up (explained below)
      el.addEventListener("keydown", handleKeydown);
    }
  });
  
  editor.value.on("component:deselected", function (model) {
    if (model.isInstanceOf("text")) {
      const el = model.getEl();
      el?.removeEventListener("keydown", handleKeydown);
    }
  });

My improvements:

• the previous code always added the new text component at the very end of the parent container. this one adds the new text just below the current text.
• this one allows for shift + enter
• this one unsubscribes from the event (what happened with the other code was that it subscribed to the keydown event every time the component was selected, so if I selected the component one time, deselected, selected again for the second time, and then press Enter, it added 2 new text components: one for each time I selected the component)
• this one activates and focuses on the new text, so that you can continue writing.
• this one also has a way to delete empty text components.

To-do:

• If i press enter my the cursor between the words "Hello" and "World", I would like "World" to be erased from the current component and passed into the next.
• If I backspace-delete a text element, I would like to check if the previous component (index - 1) is also a text component. If thats true, then focus on it.

[glaprida]

I have modified the following lines to exit text editing the right way:

// OLD CODE
//model.getEl().setAttribute('contenteditable', 'false')
//model.getEl().blur()

// NEW CODE
editor.getEditing().trigger('disable')

#5987