Questions about transactions, node positions, immutability, etc

[silenius]

Hello,
I have some questions regarding node positions and transactions.

I have a project with 2 components:

• a Sidebar component
• a SelectMargin component.

I'm passing (via props) a selected object from Sidebar to SelectMargin. This selected object contains two keys: pos and node which is the selected Node in the editor and it's pos. In SelectMargin I'm updating the attrs of the node through a select-margin event which run the do_select_margin function in Sidebar (it runs a custom command which uses tr.setNodeMarkup under the hood, nothing special). The issue I have is that the props.selected.node.attrs is not updated in the SelectMargin component once the transaction is finished (computed are not fired) unless I'm updating the selected.value.node manually afterwards (see below). Is this because nodes are immutable? Is there another way to get the updated attrs of the node after .run() is finished? Also, why do I need to add 1 to pos in select_editor.value.$pos (it selects the wrong node with the original pos) ?

Here is the (simplified) code of the two components:

Sidebar.vue:

<template>                                                                                                                                                                                                                                                                                                                                                                   
  <div v-if="select_editor">                                                                                                                                                                                                                                                                                                                                                                       

  <SelectMargin                                                                    
   :editor="select_editor"                                                                                                                                                   
   :selected="selected"                                                                                                                                                      
   @select-margin="(p) => do_select_margin(p)"                                    
  />                                                                               
 </template>     

<script setup>
                                                                                           
import { ref, computed, unref, watch } from 'vue'                                                                                                                                     
import { useEditorStore } from '@/stores/editor'                                                                                                                                    
import SelectMargin from '@/components/editor/tiptap/margin/SelectMargin.vue'                                                                                                         
                                                                                          
const { getEditor, editors } = useEditorStore()  
const select_editor = editors.get('current')
const some_pos = select_editor.value.$pos(1234)
const selected = ref({
    node: some_pos.node,
    pos: some_pos.pos
})

const do_select_margin = ({side, level, breakpoint}) => {
  const s = unref(selected)
  select_editor.value.chain().focus().setMargin({
    side: side, 
    level: level, 
    breakpoint: breakpoint, 
    selected: s
  }).run()

  const foo = select_editor.value.$pos(s.pos+1)
  selected.value.node = foo.node
}


})
</script>                             

SelectMargin.vue:

<template>
      <Listbox as="div" v-model="ml">
        <ListboxButton>left: {{ ml }}</ListboxButton>
        <ListboxOptions>
          <ListboxOption v-for="level in levels" :key="level" :value="level" >
            <button>{{ level }}</button>
          </ListboxOption>
        </ListboxOptions>
      </Listbox>
  </div>

</template>
<script setup>

import { watch, ref, computed } from 'vue'

import { getSelectedAttrs } from '@/components/editor/tiptap/utils'

const props = defineProps({
  editor: Object,
  selected: Object,
})

const emits = defineEmits(['select-margin'])
const levels = computed(() => props.extension.options.levels)

const get_side = (side) => {
  try {
    return getSelectedAttrs(props, side)
  } catch (e) {
    return 'none'
  }
}

const set_side = (side, value) => {
  emits('select-margin', {
    side: side, 
    level: value, 
    breakpoint: props.breakpoint
  })
}

const ml = computed({
  get() { return get_side('ml') },
  set(value) { set_side('ml', value) }
})

Thank you

[nperez0111]

You are really going to have to simplify this example. There is way too much going on to even understand what your question is

[silenius]

You're right.. sorry!

So let's say I have two (Vue) components: A and B.

I'm passing a Node (let's say passed_node_from_a_to_b) from A to B (through props). In B I have some computed properties which use the underlying .attrs of the Node object that was passed to display stuff.

In B I'm emiting an event, let's say "update-node", which run some function, let's say do_update_node, in A. This function basically update the attributes of the Node with setNodeMarkup(). The issue I have is that the computed properties in B are never refreshed because it looks like the passed Node is not updated.

However it works If I'm manually refreshing the Node in A just after the attributes were updated, by refreshing I mean calling passed_node_from_a_to_b.value = editor.$pos(...).node, and I was just wondering if it was just because Node are immutable?

I can make an example if this is not clear enough yet

Thanks :)

[silenius]

(I have also reduced the original code to the bare minimum)

[nperez0111]

Ah, okay. Yea Nodes are immutable so you are keeping a reference to an object that is not being mutated.

So, you can either try to hack around this by "refreshing" the value or somehow making this variable by derived from the state of the editor (e.g. storing the selected value in an extensions storage & listing for changes to that storage object).

[silenius]

thank you :)