I has custom props on Extension, but on Extension cant listening to the change of the props

[duythinh-dev]

others.expTagFriend.listSelected in TextStyle is only receiving the old state

const extensions = [
    StarterKit,
    Placeholder.configure({
      placeholder: editorPlaceholer || 'Write something ...',
    }),
    Image,
    Video,
    TextStyle.extend({
      addAttributes() {
        return {
          class: {},
          'data-exp-type': {},
          'data-exp-id': {},
        };
      },
      parseHTML() {
        return [
          {
            tag: 'span',
            getAttrs: element => {
              const hasClass = element.hasAttribute('class');
              const hasDataExpType = element.hasAttribute('data-exp-type');
              const hasDataExpId = element.hasAttribute('data-exp-id');
              console.log('listTagged', others.expTagFriend.listSelected);
              const inListTag = true;
              // _findIndex(listTagged, {
              //   fullname: element.innerText,
              // }) !== -1;
              if (hasClass && hasDataExpType && hasDataExpId && inListTag) {
                return true;
              }
              return false;
            },
          },
        ];
      },
      addKeyboardShortcuts() {
        return {
          // ↓ your new keyboard shortcut
          Enter: () => editor.commands.insertContent('<br/>'),
        };
      },
    }),
  ];
 /** init editor */
  const editor = useEditor({
    extensions,
    content: editorContent,
    /**
     * Disable all input rules
     * https://tiptap.dev/api/editor#enable-input-rules
     * */
    enableInputRules: false,
    /**
     * preserveWhitespace⁠?: boolean | "full"
     * By default, whitespace is collapsed as per HTML's rules. Pass true to preserve whitespace, but normalize newlines to spaces, and "full" to preserve whitespace entirely.
     * https://prosemirror.net/docs/ref/#model.ParseOptions
     */
    parseOptions: {
      preserveWhitespace: 'full',
    },
    editorProps: {
      /**
       * Clear format tag or location on Paste
       * https://prosemirror.net/docs/ref/version/0.18.0.html#view.EditorProps.transformPastedHTML
       */
      transformPastedHTML: html => html.replace(REGEX_CHECK_SPAN_STYLE, ''),
    },
  });

  return (
    <MainComponent editor={editor} EditorContent={EditorContent} {...others} />
  );

Sorry for my bad English 🛩️

[jedgrant]

useEditor, like useEffect, has a dependency array. You most likely need to use it. That's one of the key things I had to do.

[duythinh-dev]

It works but when my content changes the Editor gets unfocused

• Video

[duythinh-dev]

https://codesandbox.io/s/suspicious-colden-4x6e48?file=/src/App.js

[umeshg]

It works but when my content changes the Editor gets unfocused

• Video

I faced same issue.

So I went back to using useEffect with editor and description dependancies.

useEffect(() => { if (editor && description) { editor.commands.setContent(description) } }, [editor, description])

[johnmagbag1995]

Have you solved this problem?