New version released that works perfectly with Vue 3

[vesper8]

This version fixes all the issues: https://github.com/okijhhyu/element-tiptap-vue3 :)

[koko469]

Thank you very much for your action, but I would like to use the official extensions provided by Tiptap. The error 'element tip vue3 fixed. es. js: 4327 Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (plugin $)' will appear. If you are using the official nodes or custom nodes, there will be no problem. Since I am not very good at using TS, I cannot solve it

[okijhhyu]

Thank you very much for your action, but I would like to use the official extensions provided by Tiptap. The error 'element tip vue3 fixed. es. js: 4327 Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (plugin $)' will appear. If you are using the official nodes or custom nodes, there will be no problem. Since I am not very good at using TS, I cannot solve it
My

Can u show me your code.

[koko469]

非常感谢您的行动，但我想使用 Tiptap 提供的官方扩展。错误'元素提示 vue3 修复。es.js： 4327 未捕获（承诺中）范围错误：将出现添加键控插件（插件 $）' 的不同实例。如果您使用的是官方节点或自定义节点，则不会有问题。由于我不太擅长使用TS，因此无法解决我的

你能给我看你的代码吗？

import {
CodeBlockLowlight
} from '@tiptap/extension-code-block-lowlight'
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'
lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)

const extensions = [
...
// CodeBlock,
...
CodeBlockLowlight.configure({
lowlight,
}),
]
error：
element-tiptap-vue3-fixed.es.js:7972 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'localsInner')
at DecorationGroup.locals (element-tiptap-vue3-fixed.es.js:7972:36)
at iterDeco (element-tiptap-vue3-fixed.es.js:6195:21)
at NodeViewDesc.updateChildren (element-tiptap-vue3-fixed.es.js:5608:5)
at docViewDesc (element-tiptap-vue3-fixed.es.js:5720:13)
at EditorView.updateStateInner (element-tiptap-vue3-fixed.es.js:8821:26)
at EditorView.updateState (element-tiptap-vue3-fixed.es.js:8785:10)
at Editor.createView (element-tiptap-vue3-fixed.es.js:12673:15)
at new Editor$1 (element-tiptap-vue3-fixed.es.js:12570:10)
at new Editor (element-tiptap-vue3-fixed.es.js:16086:5)
at element-tiptap-vue3-fixed.es.js:16264:20

Omitted other code and I would also like to know how to customize the buttons on the toolbar. Thank you very much and look forward to your reply

[okijhhyu]

About custom button icon, i will think about this, how to do better (if it's about use your custom icon on buttons). About error i understand what problem i will show u correct code (during this week and extend lib documentation)

[okijhhyu]

import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import {
  Editor
} from '@tiptap/core';
import { CommandButton } from 'element-tiptap-vue3-fixed'; // wait new version i add button and extend documentain

export default CodeBlockLowlight.extend({
  addOptions() {
    return {
      ...this.parent?.(),
      button({ editor, t }: { editor: Editor; t: (...args: any[]) => string }) {
        return {
          component: CommandButton,
          componentProps: {
            command: () => {
              editor.commands.toggleCodeBlock();
            },
            isActive: editor.isActive('codeBlock'),
            icon: 'code',
            tooltip: t('editor.extensions.CodeBlock.tooltip'),
          },
        };
      },
    };
  },
});

import commandButton will be added in new version about custom icon i will think about this and add it

[koko469]

button

Okay, thank you very much. We look forward to the new version very much

[okijhhyu]

button

Okay, thank you very much. We look forward to the new version very much

v 1.1.6.

[koko469]

v 1.1.6.
I am currently facing two issues.If you have time, I hope you can help me answer them
Firstly, if I use both CodeBlock and CodeBlockLowlight, there will be errors. Although it doesn't require two,so it's not very important, but yours won't conflict.
Error:
Element tip vue3 fixed. es. js: 4327 Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (codeBlockVSCodeHandler $)
At element tip vue3 fixed. es. js: 4327:17
At Array. forEach ()
At new Configuration (element tip vue3 fixed. es. js: 4325:15)
At EditorState. configure (element tip vue3 fixed. es. js: 4408:19)
At Editor. createView (element tip vue3 fixed. es. js: 12670:33)
At new Editor $1 (element tip vue3 fixed. es. js: 12570:10)
At new Editor (element tip vue3 fixed. es. js: 16086:5)
At element tip vue3 fixed. es. js: 16264:20
At runtime core. sm bundler. js: 2675:88
At callWithErrorHandling (runtime core. esm bundle. js: 158:18)

Secondly,
if the initial content of the editor is empty, it will appear
Error:
Element tip vue3 fixed. es. js: 7972 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'localsInner')
At DecorationGroup. local (element tip vue3 fixed. es. js: 7972:36)
At iterDeco (element tip vue3 fixed. es. js: 6195:21)
At NodeViewDesc. updateChildren (element tip vue3 fixed. es. js: 5608:5)
At docViewDesc (element tip vue3 fixed. es. js: 5720:13)
At EditorView. updateStateInner (element tip vue3 fixed. es. js: 8821:26)
At EditorView. updateState (element tip vue3 fixed. es. js: 8785:10)
At Editor. createView (element tip vue3 fixed. es. js: 12673:15)
At new Editor $1 (element tip vue3 fixed. es. js: 12570:10)
At new Editor (element tip vue3 fixed. es. js: 16086:5)
At element tip vue3 fixed. es. js: 16264:20

If the initial content of the editor has a value, pressing the "Enter" to key Using the editor to wrap lines will result in an error.
Error:
element-tiptap-vue3-fixed.es.js:7972 Uncaught TypeError: Cannot read properties of undefined (reading 'localsInner')
at DecorationGroup.locals (element-tiptap-vue3-fixed.es.js:7972:36)
at iterDeco (element-tiptap-vue3-fixed.es.js:6195:21)
at NodeViewDesc.updateChildren (element-tiptap-vue3-fixed.es.js:5608:5)
at NodeViewDesc.updateInner (element-tiptap-vue3-fixed.es.js:5685:12)
at NodeViewDesc.update (element-tiptap-vue3-fixed.es.js:5677:10)
at EditorView.updateStateInner (element-tiptap-vue3-fixed.es.js:8818:37)
at EditorView.updateState (element-tiptap-vue3-fixed.es.js:8785:10)
at Editor.dispatchTransaction (element-tiptap-vue3-fixed.es.js:12708:15)
at EditorView.dispatch (element-tiptap-vue3-fixed.es.js:8986:27)
at Object.method4 [as first] (element-tiptap-vue3-fixed.es.js:9803:16)
locals @ element-tiptap-vue3-fixed.es.js:7972
iterDeco @ element-tiptap-vue3-fixed.es.js:6195
updateChildren @ element-tiptap-vue3-fixed.es.js:5608
updateInner @ element-tiptap-vue3-fixed.es.js:5685
update @ element-tiptap-vue3-fixed.es.js:5677
updateStateInner @ element-tiptap-vue3-fixed.es.js:8818
updateState @ element-tiptap-vue3-fixed.es.js:8785
dispatchTransaction @ element-tiptap-vue3-fixed.es.js:12708
dispatch @ element-tiptap-vue3-fixed.es.js:8986
method4 @ element-tiptap-vue3-fixed.es.js:9803
handleEnter @ element-tiptap-vue3-fixed.es.js:12350
(anonymous) @ element-tiptap-vue3-fixed.es.js:10660
(anonymous) @ element-tiptap-vue3-fixed.es.js:9233
(anonymous) @ element-tiptap-vue3-fixed.es.js:7104
someProp @ element-tiptap-vue3-fixed.es.js:8896
editHandlers.keydown @ element-tiptap-vue3-fixed.es.js:7104
view.dom.addEventListener.view.input.eventHandlers. @ element-tiptap-vue3-fixed.es.js:7039
element-tiptap-vue3-fixed.es.js:7965 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'eq')
at DecorationGroup.eq (element-tiptap-vue3-fixed.es.js:7965:28)
at NodeViewDesc.matchesNode (element-tiptap-vue3-fixed.es.js:5594:115)
at EditorView.updateStateInner (element-tiptap-vue3-fixed.es.js:8809:45)
at EditorView.update (element-tiptap-vue3-fixed.es.js:8773:10)
at EditorView.setProps (element-tiptap-vue3-fixed.es.js:8782:10)
at Editor.setOptions (element-tiptap-vue3-fixed.es.js:12613:17)
at element-tiptap-vue3-fixed.es.js:33678:52
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js:1702:16)

The prerequisite for the problem is the use of CodeBlockLowlight

[okijhhyu]

can u sand me your code in extenstion and how u use it in tiptap because i don't have this problem.

[koko469]

https://codesandbox.io/s/element-tiptapt-vue3-element-plus-forked-839n32?file=/src/App.vue
Could you please help me take a look? It's likely that I used it incorrectly

[okijhhyu]

@koko469 sorry for long answer. I decided simply add extension.