Cursor not showing at the right position after custom node and wrong spacing

1

Dear all,

I am checking prosemirror using ngx-editor and angular. So far, I could embed it nicely but I have two issues.

1/ Cursor position

I extended the basic schema to add a custom node :

const myCustomNode: NodeSpec = {
  attrs: {
    id: {},
    source: {},
    description: { default: null },
  },
  inline: true,
  group: 'inline',
  draggable: true,
  atom: true,
  selectable: true,
  content: '',
  toDOM: (node) => {
    return [
      'span',
      { class: 'my-custom-node', 'data-id': node.attrs['id'], 'data-source': node.attrs['source'] },
      node.attrs['description'],
    ];
  },
  parseDOM: [
    {
      tag: 'span.my-custom-node',
      getAttrs: (node) => {
        if (typeof node === 'string') {
          return false;
        }

        const element = node as HTMLElement;
        return {
          id: element.getAttribute('data-id'),
          source: element.getAttribute('data-source'),
          description: element.textContent || undefined,
        };
      },
    },
  ],
};

and extended the schema like this :

const nodes = {
  ...basicNodes,
  myCustomNode: myCustomNode,
};

export const extendedSchema = new Schema({
  nodes,
  marks,
});

I am building my editor using new Editor({plugins: [dropCursor()], schema: extendedSchema});

I add my custom node to the editor on drop using the code below :

    // Create a transaction to insert the node
    const transaction = editorView.state.tr.insert(coords.pos, customNode);

    // Apply the transaction to the editor state
    editorView.dispatch(transaction);

Everything works fine except the cursor position which appears under the custom node even though when I start typing the text goes next to it and not under (which is the expected behavior) it is really just a display issue.

2/ Spacing problem

If I don’t put any text near to my node, I have this two lines of code added after the insert and then an empty line after my node. I didn’t find any option to remove that.

<img class="ProseMirror-separator" alt="">
<br class="ProseMirror-trailingBreak">

Best,

2

This

<img class="ProseMirror-separator" alt="">

is the problem. the example setup that prosemirror provides editor.css. which styles this image to be inline.

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}

if you do not use the basic example as a starting point, you dont get the added styles.

Hunting this down caused a a day and a half of wasted time.

3

That’s not part of the example setup, that’s part of the library’s base styles in prosemirror-view/style/prosemirror.css