Mention - error when deleting custom mention elements

[fbolcic]

Hello,

We are using a custom mention element. We are encountering an issue when we try to delete multiple mention elements. The error can best be seen on this video:

Screen.Recording.2023-03-31.at.13.13.10.mov

The error is Cannot resolve a DOM node from Slate node: {"text":""}.

I could not reproduce this in Slate sandbox so I guess it is related to our custom mention component. This is the component code:

import { createMentionPlugin, TComboboxItem } from '@udecode/plate';

import { emailStyles } from '~/components/comments/CommentEditor/plugins/emailStyles';

import { Text } from '../../Text';
import { EditorValue } from '../plateTypes';

export const MENTION_TRIGGER = '@';

export const mentionPlugin = createMentionPlugin<any, EditorValue>({
  key: MENTION_TRIGGER,
  component: (props) => (
    <Text
      className={props.className}
      color="comment-editor-mention-text"
      variant="text-xs-medium"
      {...props.attributes}
    >
      @{props.element.value}
    </Text>
  ),
  options: {
    trigger: MENTION_TRIGGER,
    createMentionNode: (item: TComboboxItem) => ({ value: item.text, mention: `{{member:${item.key}}}` }),
  },
  serializeHtml: (props) => <span style={emailStyles.mention}>@{props.element.value as string}</span>,
});

Any help would be greatly appreciated!

[formatkaka]

Hey, were you able to find any resolution for this issue ?

---

EDIT :

Found a way to do this.
Copy past the entire component into a file and add it into config. You can modify locally anyway you want to.

CustomMentionElement.tsx

import type { Value } from '@udecode/plate-common';
import { getHandler } from '@udecode/plate-common';
import type { TMentionElement } from '@udecode/plate-mention';
import type { StyledElementProps } from '@udecode/plate-styled-components';
import { getRootProps } from '@udecode/plate-styled-components';
import React from 'react';
import { useFocused, useSelected } from 'slate-react';
import styled from 'styled-components';
import tw from 'twin.macro';

export const CustomMentionElement = <V extends Value>(
  props: MentionElementProps<V>
) => {
  const {
    attributes,
    children,
    nodeProps,
    element,
    prefix,
    onClick,
    renderLabel,
  } = props;

  const rootProps = getRootProps(props) as any;

  const selected = useSelected();
  const focused = useFocused();

  // const styles = getMentionElementStyles({ ...props, selected, focused });

  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    <StyledSpan
      selected={selected}
      focused={focused}
      {...attributes}
      data-slate-value={element.value}
      contentEditable={false}
      onClick={getHandler(onClick, element)}
      {...rootProps}
      {...nodeProps}
    >
      {prefix}
      {renderLabel ? renderLabel(element) : `@${element.mention_value}`}
      {children}
    </StyledSpan>
  );
};

export interface MentionElementStyleProps<V extends Value>
  extends MentionElementProps<V> {
  selected?: boolean;
  focused?: boolean;
}

// renderElement props
export interface MentionElementProps<V extends Value>
  extends StyledElementProps<V, TMentionElement> {
  /**
   * Prefix rendered before mention
   */
  prefix?: string;
  onClick?: (mentionNode: any) => void;
  renderLabel?: (mentionable: TMentionElement) => string;
}

const StyledSpan = styled.span<StyledSpanProps>`
  ${tw`my-0 mx-px align-baseline inline-block`}
  ${({ selected, focused }) =>
    selected && focused && tw`shadow-[0 0 0 2px #B4D5FF]`}
  padding: 1px 1px 1px;
  border-radius: 4px;
  font-size: 0.9em;
  color: blue;
`;

type StyledSpanProps = {
  selected?: boolean;
  focused?: boolean;
};

config.ts

export const components = createPlateUI({
  [ELEMENT_MENTION]: CustomMentionElement,
});

export const mentionPlugin = {
  key: '@',
  component: CustomMentionElement,
  options: {
    trigger: '@',
    createMentionNode: (item: TComboboxItemBase) => ({
      mention_uuid: item.key,
      mention_value: item.text,
    }),
  },
};

EDIT 2 :

change ELEMENT_MENTION_INPUT to ELEMENT_MENTION

[fbolcic]

Thanks! I will look into this.