How to update class when content is stored inside vuex

[zimmicz]

Having the custom mark (see below) rendered as vue component I would need to update its class on click. That's easy to do on its own. However, the editor content is stored inside vuex state (with strict mode on), and updating the class leads to change outside mutation error.

Is there other way to do that? I thought of taking the content out of vuex and syncing it once in a while, but I would like to know other options (if any) as well.

const TAG = 'a';

export default class FeatureMark extends Mark {
  get name() {
    return 'featureMark';
  }

  get schema() {
    return {
      attrs: {
        [STORY_LINK_LAT_ATTR]: {
          default: null,
        },
        [STORY_LINK_LNG_ATTR]: {
          default: null,
        },
      },
      parseDOM: [{
        tag: TAG,
        getAttrs(dom) {
          return {
            [STORY_LINK_LAT_ATTR]: dom.dataset[STORY_LINK_LAT_ATTR],
            [STORY_LINK_LNG_ATTR]: dom.dataset[STORY_LINK_LNG_ATTR],
          };
        },
      }],
      toDOM: node => [TAG, {
        [STORY_LINK_LAT_ATTR]: node.attrs[STORY_LINK_LAT_ATTR],
        [STORY_LINK_LNG_ATTR]: node.attrs[STORY_LINK_LNG_ATTR],
      }, 0],
    };
  }

  commands({ type }) {
    return (attrs) => {
      return toggleMark(type, {
        [STORY_LINK_LAT_ATTR]: attrs && attrs[STORY_LINK_LAT_ATTR],
        [STORY_LINK_LNG_ATTR]: attrs && attrs[STORY_LINK_LNG_ATTR],
      });
    };
  }

  get view() {
    return {
      // there are some props available
      // `node` is a Prosemirror Node Object
      // `updateAttrs` is a function to update attributes defined in `schema`
      // `view` is the ProseMirror view instance
      // `options` is an array of your extension options
      // `selected` is a boolean which is true when selected
      // `editor` is a reference to the TipTap editor instance
      // `getPos` is a function to retrieve the start position of the node
      // `decorations` is an array of decorations around the node
      props: ['node', 'updateAttrs', 'view'],
      methods: {
        handleClick() {
          const payload = {
            [STORY_LINK_LAT_ATTR]: this[STORY_LINK_LAT_ATTR_CAMEL],
            [STORY_LINK_LNG_ATTR]: this[STORY_LINK_LNG_ATTR_CAMEL],
          };
          this.$store.commit(UPDATE_HIGHLIGHTED_LAT_LNG, payload);
        },
      },
      computed: {
        isHighlighted() {
          if (!this.$store.state.highlightedLatLng) {
            return false;
          }

          const { lat, lng } = this.$store.state.highlightedLatLng;
          return lat === this[STORY_LINK_LAT_ATTR_CAMEL] && lng === this[STORY_LINK_LNG_ATTR_CAMEL];
        },
        [STORY_LINK_LAT_ATTR_CAMEL]: {
          get() {
            return this.node.attrs[STORY_LINK_LAT_ATTR];
          },
          set(lat) {
            this.updateAttrs({
              [STORY_LINK_LAT_ATTR]: lat,
            });
          },
        },
        [STORY_LINK_LNG_ATTR_CAMEL]: {
          get() {
            return this.node.attrs[STORY_LINK_LNG_ATTR];
          },
          set(lng) {
            this.updateAttrs({
              [STORY_LINK_LNG_ATTR]: lng,
            });
          },
        },
      },
      template: `
        <a
          :class="{'is-highlighted': isHighlighted()}" // CAN THIS BE DONE SOME OTHER WAY?
          :${STORY_LINK_LNG_ATTR}="${STORY_LINK_LNG_ATTR_CAMEL}"
          :${STORY_LINK_LAT_ATTR}="${STORY_LINK_LAT_ATTR_CAMEL}"
          @click="handleClick()"
        >
        </a>
      `,
    };
  }
}

[Guillaume-N]

@zimmicz Did you find a solution? I have the same problem/need

[zimmicz]

@Guillaume-N In the end I decided to keep the content outside the vuex and sync it only once user fires an action.

[Guillaume-N]

Thank you, I ended doing more or less the same: my instance of tiptap editor is in a separate file and the components that need it simply import it from this file.

[Draccano]

I faced a similar problem. I'd suggest to use the editor in the local property of the component and propagate it's content structure into vuex when editor changes (onChange)