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.