Text before non-editable node

1

Text before non-editable node moves the non-editable text to the next span. example: existing: <p><span contenteditable="false">noneditable</span></p>

now add a text before non editable. It becomes,

<p><span contenteditable="false"></span><span>this noneditable</span></p>

expected: <p><span>this</span><span contenteditable="false">noneditable</span></p>

2

Can you provide more details on what you are doing and how you are doing? Is this a node view ?

3

Yes i created a nodeview for for a new span for which content is non editable. Now in my editor, after some manipulation actions, i am adding this new span having non editable content. Now i am editing the document and if this new non editable span is the first node and i try to add some text before that then i am facing the mentioned issue and if my non editable span is inside somewhere then it is fine. Hope this helps. Let me know if need more input.

4

i think there is a problem with your schema or nodeview implementation. Can you share a minimum reproducible demo ?

For reference I am building something similar https://banglejs.dev/docs/guides/custom-rendering-speech, where there is editable and non editable text content and it is working fine for me.

5

My schema

        export const noneditfield = {
      attrs: {
        id: { default: null }
      },
      content: 'inline*',
      marks: '_',
      group: 'inline',
      parseDOM: [
        {
          tag: 'span.noneditfield',
          getAttrs: dom => {
            return {
              id: dom.getAttribute('id') || null
            }
          }
        }
      ],
      toDOM({ attrs: { id } }) {
        return [
          'span',
          {
            class: 'noneditfield',
            id
          },
          0
        ]
      }
    }

My nodeview:

export const noneditfield = (
  _,
  {
    handleClick = (_id: string, _dom: HTMLSpanElement) => {},
    handleMouseenter = (_id: string, _dom: HTMLSpanElement) => {},
    handleMouseleave = (_id: string, _dom: HTMLSpanElement) => {}
  }
) => ({ attrs: { id } }) => {
  const dom = document.createElement('span')

  dom.addEventListener('click', () => {
    handleClick(id, dom)
  })
  dom.addEventListener('mouseenter', () => {
    setTimeout(() => {
      handleMouseenter(id, dom)
    }, 300)
  })
  dom.addEventListener('mouseleave', () => {
    setTimeout(() => {
      handleMouseleave(id, dom)
    }, 200)
  })

  dom.className = 'noneditfield'
  dom.setAttribute('id', id)
  dom.setAttribute('contenteditable', 'false')
  dom.appendChild(document.createTextNode(id))

  return {
    dom,
    contentDOM: dom,
    create() {
      return true
    },
    delete() {
      return true
    },
    update() {
      return true
    }
  }
}
6

What I’m seeing when I set up a node like that is that both Firefox and Chrome refuse to type when the node is the first element in its parent node and the cursor is in front of it.

In any case you may want to look into those create/delete/update methods that you give your node view. The first two don’t mean anything, and the third is very broken (see the docs).