SHIFT+Enter Inside Variable about web-components

[arteevraina]

I would like to work on this too.

[irmerk]

This will likely be solved in withLists/insertBreak which handles essentially the functionality of pressing ENTER, or in RichTextEditor/onKeyDown where you can place a check for SHIFT+ENTER and make that create a new paragraph block.

[arteevraina]

@irmerk Still working on it. I will be sending a PR soon.

[arteevraina]

@irmerk As described in the issue SHIFT + Enter is used to create a new paragraph. By pressing even only Enter inside the variable we can create a new paragraph. Can you confirm it?

[irmerk]

Just ENTER doesn't add a new paragraph. Only SHIFT + ENTER

[arteevraina]

@irmerk I am not exactly able to trace from where it is coming. Can you please guide me a bit?

[irmerk]

@arteevraina any update on this?

[arteevraina]

@irmerk withLists/insertBreak is in markdown-editor repo. Could not find any reference for it in cicero-ui. Could you guide me a little bit more please?

[irmerk]

Ah yes! Definitely. So I was wrong and it would actually be in withVariables, so yeah not in markdown-editor, sorry!

The way these withSomething functions are working is they're taking the Slate editor and manipulating the functions on it. So each withSomething wrapping the editor can dictate it's own version of editor.insertBreak and then they will all be called during runtime.

In withVariables, we will need to do something similar to what was done in markdown-editor's withLists, extracting insertBreak from editor and manipulating it.

const withVariables = (editor) => {
  const { insertBreak, insertText, isInline } = editor;

  editor.insertBreak = () => {
  // Some logic similar-ish to what is in withLists/insertBreak
  insertBreak();
  };

  editor.insertText = (text) => {...};

  editor.isInline = element => {...};
  return editor;
};

There's a chance this might not be the right approach? Another suggestion is similar, but with normalizeNode:

const withVariables = (editor) => {
  const { insertText, isInline, normalizeNode } = editor;

  editor.normalizeNode = ([node, path]) => {
    // Maybe some logic to prevent multiple paragraphs in a variable?
    return normalizeNode([node, path])
  };

  editor.insertText = (text) => {...};

  editor.isInline = element => {...};
  return editor;
};

I'd search through Slate docs, especially their examples for more reference.