Comments (11)
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
from element-tiptap.
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.
from element-tiptap.
非常感谢您的行动,但我想使用 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
from element-tiptap.
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)
from element-tiptap.
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
from element-tiptap.
button
Okay, thank you very much. We look forward to the new version very much
from element-tiptap.
button
Okay, thank you very much. We look forward to the new version very much
v 1.1.6.
from element-tiptap.
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
from element-tiptap.
can u sand me your code in extenstion and how u use it in tiptap because i don't have this problem.
from element-tiptap.
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
from element-tiptap.
@koko469 sorry for long answer. I decided simply add extension.
from element-tiptap.
Related Issues (20)
- 请问如何定义Link 插件的输入校验规则,盼回复
- placeholder bind attribute,unable to update
- Fully customize bubble menu and menu.
- 2.0.0-alpha.1 - RangeError: Schema is missing its top node type ('doc') HOT 3
- 2.0.0-alpha.1 - Heading component popup not showing up HOT 2
- Link extension how to add placeholder? HOT 3
- 2.0.0-alpha.1 Some Problems!!!! HOT 3
- Add SlashCommand to show a list of commands HOT 1
- Why is < p > < br class = "ProseMirror-trailingBreak" > </p > in the element after the line break, but in the saved data, it is < p > </p > empty P tag
- The automated release is failing 🚨
- element-tiptap.js does not provide an export named 'Doc' HOT 2
- Console warnings and errors HOT 1
- 高度是否可以和el-textarea 一样可以变大变小
- 能不能用在 vue3 Antd ui 库中
- 使用 vue3 版本引用,运行失败
- 根据官网文档,vue3引入报错。 HOT 1
- When using "Heading" extension, this component won't unmount
- 如何集成在项目中集成气泡菜单
- 图片上面的气泡菜单应该怎么才能禁用呢,怎么直接{bubble: false}无效?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from element-tiptap.