Tiptap: Turn off other Mark when one is activated?

[nodegin]

Hello, thanks for this great editor library. I made three mark say left, center, and right alignment. When I turn on center align, my text can be inserted at center, when I turn on right align, the text will align to right but center is still on state, is it possible to turn off other marks programatically?

[philippkuehn]

I think you should do only one text-align mark. Then you have to store its align as an attribute. This can be left, right and center. You can check the link mark about how to store attrs.

[nodegin]

I used custom attribute to identify node type so it is difficult to just use one mark to represent three alignments. Is it possible to execute two transaction in command? I am trying to dispatch state.tr.removeMark and then toggleMark..

[nodegin]

I found the solution by chaining the transactions, thanks

[philippkuehn]

Would be nice to post your solution here ❤️

[nodegin]

@philippkuehn Of course

const alignmentCommand = ({ type }) => (state, dispatch) => {
  const { from, to, $cursor } = state.selection
  const { left, center, right } = state.config.schema.marks
  if ($cursor) {
    // cursor only
    if (type.isInSet(state.storedMarks || $cursor.marks())) {
      dispatch(state.tr.removeStoredMark(type))
    } else {
      dispatch(state.tr
        .removeStoredMark(left)
        .removeStoredMark(center)
        .removeStoredMark(right)
        .addStoredMark(type.create())
      )
    }
  } else {
    // text selected
    const marked = state.doc.rangeHasMark(from, to, type)
    if (marked) {
      dispatch(state.tr.removeMark(from, to, type))
    } else {
      dispatch(state.tr
        .removeMark(from, to, left)
        .removeMark(from, to, center)
        .removeMark(from, to, right)
        .addMark(from, to, type.create())
      )
    }
  }
}

In every LeftMark, CenterMark, and Right Mark add the constructor:

  constructor() {
    super()
    this.command = alignmentCommand
  }

[patrikengborg]

Hi @nodegin

Would it be possible to see the full class for LeftMark/CenterMark/RightMark ?

I've been struggling all day to get your alignmentCommand to work, so I would really appreciate it.

Thanks

[nodegin]

@patrikengborg sure.

class LeftMark extends Mark {
  constructor() {
    super()
    this.command = alignmentCommand
  }
  get name() {
    return 'left'
  }
  get schema() {
    return {
      parseDOM: [
        {
          tag: 'div[data-type="left"]',
        },
      ],
      toDOM: (node) => ['div', { 'data-type': 'left' }, 0],
    }
  }
}

[mattkoch614]

Hi all, walking through some of the closed issues here...would this be a good approach to solving #157 and #80? I see some of the same folks posting in those issues too.