tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

Published 20 hours ago • verified publisher icon nhn

Adding link via toolbar is broken in 3.2.0

Open whendon opened this issue 2 years ago • 12 comments

Describe the bug

I am unable to add a link in wysiwyg mode - after typing the values into the fields and pressing "OK", I get this error in the console:

index.js:19269 Uncaught ReferenceError: getCustomAttrs is not defined
    at Object.toDOM (index.js:19269:36)
    at MarkViewDesc.create (index.js:1118:117)
    at ViewTreeUpdater.syncToMarks (index.js:1699:45)
    at eval (index.js:1268:21)
    at iterDeco (index.js:1898:13)
    at NodeViewDesc.updateChildren (index.js:1258:9)
    at NodeViewDesc.updateInner (index.js:1355:18)
    at NodeViewDesc.update (index.js:1347:14)
    at ViewTreeUpdater.updateNextNode (index.js:1775:37)
    at eval (index.js:1276:30)

And I've managed to track down the error to this file

To Reproduce

Steps to reproduce the behavior:

  1. Create a new editor with default options
  2. Click the toolbar button to add a link
  3. Fill out fields, press OK, observe error (link does not appear, and error appears in console)

Expected behavior

Link toolbar button works

Screenshots

I took some screenshots of index.js where the error was occurring, the issue seems to be due to compiling at some point. The defined function is getCustomAttrs$1() but is being called as getCustomAttrs() g2048 g2058

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Brave/Chromium
  • Version: Brave v1.42.88 Chromium 104.0.5112.81

Additional context

My environment: vuejs application Vuejs 2.6.11 I am not using the vue-editor wrapper Other toolbar buttons work as intended, I am having no other issues with the editor so far.

whendon avatar Aug 13 '22 20:08 whendon

I'm facing the same issue. Downgrading to version 3.1.10 is the only fix

Cypherball avatar Aug 18 '22 12:08 Cypherball

I also had the same problem. However, downgrading the version did not solve the problem.

jooy2 avatar Aug 19 '22 09:08 jooy2

I also had the same problem. However, downgrading the version did not solve the problem.

Check the version installed in your package-lock; you may have to fix the version 3.1.10 instead of ^3.1.10

Cypherball avatar Aug 19 '22 11:08 Cypherball

Unfortunately, the problem persisted even after deleting and reinstalling node_modules and package-lock.json to match the 3.1.0 version.

image

When I newly installed and opened the package-json.lock file, it was as follows.

    "node_modules/@toast-ui/editor": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-3.2.0.tgz",
      "integrity": "sha512-lEvbBSbvz5MvmTGHoDAYkco5B1os9C8B0IJmSj/iLmjSFQCtku1g4hFG4jKzTju9e+5wTosbDa3aYHAJAZK/QA==",
      "dependencies": {
        "dompurify": "^2.3.3",
        "prosemirror-commands": "^1.1.9",
        "prosemirror-history": "^1.1.3",
        "prosemirror-inputrules": "^1.1.3",
        "prosemirror-keymap": "^1.1.4",
        "prosemirror-model": "^1.14.1",
        "prosemirror-state": "^1.3.4",
        "prosemirror-view": "^1.18.7"
      }
    },
    "node_modules/@toast-ui/editor-plugin-table-merged-cell": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@toast-ui/editor-plugin-table-merged-cell/-/editor-plugin-table-merged-cell-3.1.0.tgz",
      "integrity": "sha512-9ch9h1heTs0Kkmhwpb1ef9psQSM77wvUO3J75BsHv3RO5nAug42W3HC4Y+qbX5n1z1VhOGGjuOb4GPIr8s5dRA=="
    },
    "node_modules/@toast-ui/react-editor": {
      "version": "3.1.10",
      "resolved": "https://registry.npmjs.org/@toast-ui/react-editor/-/react-editor-3.1.10.tgz",
      "integrity": "sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==",
      "dependencies": {
        "@toast-ui/editor": "^3.1.10"
      },
      "peerDependencies": {
        "react": "^17.0.1"
      }
    },

However, one strange thing is that the package-lock.json shows a version that is not pointed to.

node_modules/@toast-ui/editor = 3.2.0 node_modules/@toast-ui/react-editor = 3.1.0

Is there anything more I can check?

jooy2 avatar Aug 19 '22 12:08 jooy2

@jooy2 Problem is in the dependency list of @toast-ui/react-editor (see in package-lock): "@toast-ui/editor": "^3.1.10" install this in package.json by fixing the version also...

I'm also on NextJS and this was fixed for me

Cypherball avatar Aug 19 '22 13:08 Cypherball

For peoples working with React in a Docker container, here is what worked for me

  • remove "@toast-ui/react-editor" from "peerDependencies", if present in your package.json
  • In your DockerFile use -> RUN npm install @toast-ui/[email protected] @toast-ui/[email protected]

Shimon42 avatar Aug 19 '22 16:08 Shimon42

@Cypherball @Shimon42

Thank you all! In my case, I was able to solve it by installing version 3.1.10 of @toast-ui/editor that was not added to package.json.

▽▽▽▽ package.json ▽▽▽▽

    "@toast-ui/editor": "3.1.10",
    "@toast-ui/editor-plugin-table-merged-cell": "3.1.0",
    "@toast-ui/react-editor": "3.1.10",

Anyway, I hope this issue has been forwarded to the TUI development team and resolved as soon as possible.

jooy2 avatar Aug 20 '22 01:08 jooy2

I modified package.json, but it still throws an error. @jooy2

package.json

    "@toast-ui/chart": "^4.4.1",
    "@toast-ui/react-editor": "3.1.10",
    "@toast-ui/editor": "3.1.10",
    "@toast-ui/editor-plugin-table-merged-cell": "3.1.0",

yarn.lock


"@toast-ui/chart@^4.4.1":
  version "4.4.3"
  resolved "https://registry.yarnpkg.com/@toast-ui/chart/-/chart-4.4.3.tgz#e3a5e00a1ce542cbefdba4ae6238828ccef5e7eb"
  integrity sha512-lvv4g39uwl1DmsdlfrLxSf/qCGus7fDwWrWGlc5w9rcBidrWjZyFNmzfQC0Y/VycOPJR6YqfgPyY59R6+5eBsw==

"@toast-ui/[email protected]":
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor-plugin-table-merged-cell/-/editor-plugin-table-merged-cell-3.1.0.tgz#86422e2bc0dc2becf956aa7fa6cc5b45031e9611"
  integrity sha512-9ch9h1heTs0Kkmhwpb1ef9psQSM77wvUO3J75BsHv3RO5nAug42W3HC4Y+qbX5n1z1VhOGGjuOb4GPIr8s5dRA==

"@toast-ui/[email protected]":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-3.1.10.tgz#11022bee8c8c8b80300eb556ac051b23c2c20f86"
  integrity sha512-lzJxNM9lEbAxEqVAnLGqARLFqcVAPW3gwVOU0qKHf/IIwdhjZPjo8VDNQ4sPqOsC7vKCG35HVX8bNC+ab+Gzlg==
  dependencies:
    dompurify "^2.3.3"
    prosemirror-commands "~1.1.9"
    prosemirror-history "~1.1.3"
    prosemirror-inputrules "~1.1.3"
    prosemirror-keymap "~1.1.4"
    prosemirror-model "~1.14.1"
    prosemirror-state "~1.3.4"
    prosemirror-transform "~1.3.0"
    prosemirror-view "~1.18.7"

"@toast-ui/editor@^3.1.10":
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-3.2.0.tgz#5c0bca0be825465fdb786b2d70aa16ab9ca09c46"
  integrity sha512-lEvbBSbvz5MvmTGHoDAYkco5B1os9C8B0IJmSj/iLmjSFQCtku1g4hFG4jKzTju9e+5wTosbDa3aYHAJAZK/QA==
  dependencies:
    dompurify "^2.3.3"
    prosemirror-commands "^1.1.9"
    prosemirror-history "^1.1.3"
    prosemirror-inputrules "^1.1.3"
    prosemirror-keymap "^1.1.4"
    prosemirror-model "^1.14.1"
    prosemirror-state "^1.3.4"
    prosemirror-view "^1.18.7"

"@toast-ui/[email protected]":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/react-editor/-/react-editor-3.1.10.tgz#d5f62fa223190cea04f40eb6ef2aea1bae33ba6d"
  integrity sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==
  dependencies:
    "@toast-ui/editor" "^3.1.10"

ChangHyun2 avatar Aug 29 '22 06:08 ChangHyun2

I modified package.json, but it still throws an error. @jooy2

package.json

    "@toast-ui/chart": "^4.4.1",
    "@toast-ui/react-editor": "3.1.10",
    "@toast-ui/editor": "3.1.10",
    "@toast-ui/editor-plugin-table-merged-cell": "3.1.0",

yarn.lock


"@toast-ui/chart@^4.4.1":
  version "4.4.3"
  resolved "https://registry.yarnpkg.com/@toast-ui/chart/-/chart-4.4.3.tgz#e3a5e00a1ce542cbefdba4ae6238828ccef5e7eb"
  integrity sha512-lvv4g39uwl1DmsdlfrLxSf/qCGus7fDwWrWGlc5w9rcBidrWjZyFNmzfQC0Y/VycOPJR6YqfgPyY59R6+5eBsw==

"@toast-ui/[email protected]":
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor-plugin-table-merged-cell/-/editor-plugin-table-merged-cell-3.1.0.tgz#86422e2bc0dc2becf956aa7fa6cc5b45031e9611"
  integrity sha512-9ch9h1heTs0Kkmhwpb1ef9psQSM77wvUO3J75BsHv3RO5nAug42W3HC4Y+qbX5n1z1VhOGGjuOb4GPIr8s5dRA==

"@toast-ui/[email protected]":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-3.1.10.tgz#11022bee8c8c8b80300eb556ac051b23c2c20f86"
  integrity sha512-lzJxNM9lEbAxEqVAnLGqARLFqcVAPW3gwVOU0qKHf/IIwdhjZPjo8VDNQ4sPqOsC7vKCG35HVX8bNC+ab+Gzlg==
  dependencies:
    dompurify "^2.3.3"
    prosemirror-commands "~1.1.9"
    prosemirror-history "~1.1.3"
    prosemirror-inputrules "~1.1.3"
    prosemirror-keymap "~1.1.4"
    prosemirror-model "~1.14.1"
    prosemirror-state "~1.3.4"
    prosemirror-transform "~1.3.0"
    prosemirror-view "~1.18.7"

"@toast-ui/editor@^3.1.10":
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-3.2.0.tgz#5c0bca0be825465fdb786b2d70aa16ab9ca09c46"
  integrity sha512-lEvbBSbvz5MvmTGHoDAYkco5B1os9C8B0IJmSj/iLmjSFQCtku1g4hFG4jKzTju9e+5wTosbDa3aYHAJAZK/QA==
  dependencies:
    dompurify "^2.3.3"
    prosemirror-commands "^1.1.9"
    prosemirror-history "^1.1.3"
    prosemirror-inputrules "^1.1.3"
    prosemirror-keymap "^1.1.4"
    prosemirror-model "^1.14.1"
    prosemirror-state "^1.3.4"
    prosemirror-view "^1.18.7"

"@toast-ui/[email protected]":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/react-editor/-/react-editor-3.1.10.tgz#d5f62fa223190cea04f40eb6ef2aea1bae33ba6d"
  integrity sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==
  dependencies:
    "@toast-ui/editor" "^3.1.10"

@ChangHyun2 Have you tried yarn install again after deleting yarn.lock and node_module folder? It seems that react-editor still points to a higher version.

jooy2 avatar Aug 29 '22 08:08 jooy2

@jooy2

if I write the @toast-ui/[email protected]dependency in package.json, @toast-ui/[email protected] always install @toast-ui/[email protected](because peer dependency is specified by ^3.1.10).

So I moved @toast-ui/[email protected] depdency spec from "dependencies" field to "resolution" field in package.json, and @3.1.10 is installed well.

package.json

  "dependencies": {
    ...
    "@toast-ui/chart": "^4.4.3",
    "@toast-ui/react-editor": "3.1.10",
  },
  "resolutions": {
    "@toast-ui/react-editor/@toast-ui/editor": "3.1.10"
  },

yarn.lock

"@toast-ui/chart@^4.4.3":
  version "4.4.3"
  resolved "https://registry.yarnpkg.com/@toast-ui/chart/-/chart-4.4.3.tgz#e3a5e00a1ce542cbefdba4ae6238828ccef5e7eb"
  integrity sha512-lvv4g39uwl1DmsdlfrLxSf/qCGus7fDwWrWGlc5w9rcBidrWjZyFNmzfQC0Y/VycOPJR6YqfgPyY59R6+5eBsw==

"@toast-ui/[email protected]", "@toast-ui/editor@^3.1.10":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-3.1.10.tgz#11022bee8c8c8b80300eb556ac051b23c2c20f86"
  integrity sha512-lzJxNM9lEbAxEqVAnLGqARLFqcVAPW3gwVOU0qKHf/IIwdhjZPjo8VDNQ4sPqOsC7vKCG35HVX8bNC+ab+Gzlg==
  dependencies:
    dompurify "^2.3.3"
    prosemirror-commands "~1.1.9"
    prosemirror-history "~1.1.3"
    prosemirror-inputrules "~1.1.3"
    prosemirror-keymap "~1.1.4"
    prosemirror-model "~1.14.1"
    prosemirror-state "~1.3.4"
    prosemirror-transform "~1.3.0"
    prosemirror-view "~1.18.7"

"@toast-ui/[email protected]":
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/@toast-ui/react-editor/-/react-editor-3.1.10.tgz#d5f62fa223190cea04f40eb6ef2aea1bae33ba6d"
  integrity sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==
  dependencies:
    "@toast-ui/editor" "^3.1.10"

But when i create Editor Component, the other error(RangeError) was thrown.

image image

+++ This error is in the other issue. https://github.com/nhn/tui.editor/issues/2631

ChangHyun2 avatar Aug 30 '22 07:08 ChangHyun2

I edited package.json, and it works.

  "resolutions": {
    "@toast-ui/react-editor/@toast-ui/editor": "3.1.8"
  },

https://github.com/nhn/tui.editor/issues/2631#issuecomment-1199125318

ChangHyun2 avatar Aug 30 '22 07:08 ChangHyun2

Related: #2729

jethrolarson avatar Sep 12 '22 21:09 jethrolarson

check v3.2.1 please, if you use react or vue wrapper, you need to use v3.2.2

jwlee1108 avatar Sep 29 '22 13:09 jwlee1108