nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
16.91k stars 1.71k forks source link

Selected table cell's background color is not changed and merge cell option doesn't appear. #3211

Open jjungeun opened 6 months ago

jjungeun commented 6 months ago

Summary

I have 3 problems.

  1. Selected table cell's background color is not changed
  2. Merge cell option doesn't appear even if i added plugin.
  3. When select cell, below console error is printed. Is there any way to resolve this problem without node version downgrade to v16?
    index.js:19093 Uncaught TypeError: Class constructor Selection cannot be invoked without 'new'
    at new CellSelection (index.js:19093:1)
    at TableSelection.setCellSelection (index.js:19429:1)
    at TableSelection.handleMousemove (index.js:19377:1)

Screenshots

https://github.com/nhn/tui.editor/assets/19261711/26929519-14d9-4236-a8ce-b1b8864c0740

Version

{
....
    "@toast-ui/editor": "^3.2.2",
    "@toast-ui/editor-plugin-table-merged-cell": "^3.1.0",
    "@toast-ui/react-editor": "^3.1.7",
    "prosemirror-state": "^1.3.4",
    "prosemirror-transform": "^1.4.2",
}

node v19 react v18

Code

import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
import { Editor } from '@toast-ui/react-editor';
import React from 'react';
import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell";

interface AdvancedTextEditorProps {
  ref?: any;
  defaultValue?: string;
  value?: string;
  placeholder?: string;
  onChange?: (event: any) => void;
  readonly?: boolean;
  minHeight?: string;
  maxHeight?: string;
};

export const AdvancedTextEditor: React.FC<AdvancedTextEditorProps> = ({
  ref,
  defaultValue,
  value,
  placeholder,
  onChange,
  readonly,
  minHeight,
  maxHeight
}) => {
  const toolbarOptions = [
    ['heading', 'bold', 'italic', 'strike'],
    ['hr', 'quote'],
    ['ul', 'ol', 'task'],
    ['table', 'image', 'link'],
    ['code', 'codeblock'],
    ['scrollSync']
  ];

  return (
      <Editor
        ref={ref}
        initialValue={defaultValue}
        previewStyle='vertical'
        initialEditType='wysiwyg'
        placeholder={placeholder}
        toolbarItems={toolbarOptions}
        autofocus={false}
        plugins={[tableMergedCell]}
      />
  );
};
SuperWonjune commented 6 months ago

+1, I have a same problem.