-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(vue-3): set editor's appContext.provide to forward inject chain (#…
…5397) Vue internally uses prototype chain to preserve injects across the entire component chain. Thus should avoid Object.assign or spread operator as it won't copy the prototype. All correct provides will be already present on `instance.provides`.
- Loading branch information
Showing
10 changed files
with
318 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@tiptap/vue-3": patch | ||
--- | ||
|
||
Correctly set editor's appContext.provide to forward full inject chain |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
demos/src/Examples/InteractivityComponentProvideInject/Vue/Component.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<template> | ||
<node-view-wrapper class="vue-component"> | ||
<label>Vue Component</label> | ||
<ValidateInject /> | ||
</node-view-wrapper> | ||
</template> | ||
|
||
<script> | ||
import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3' | ||
import ValidateInject from './ValidateInject.vue' | ||
export default { | ||
components: { | ||
NodeViewWrapper, | ||
ValidateInject, | ||
}, | ||
props: nodeViewProps, | ||
} | ||
</script> | ||
|
||
<style lang="scss"> | ||
.tiptap { | ||
/* Vue component */ | ||
.vue-component { | ||
background-color: var(--purple-light); | ||
border: 2px solid var(--purple); | ||
border-radius: 0.5rem; | ||
margin: 2rem 0; | ||
position: relative; | ||
label { | ||
background-color: var(--purple); | ||
border-radius: 0 0 0.5rem 0; | ||
color: var(--white); | ||
font-size: 0.75rem; | ||
font-weight: bold; | ||
padding: 0.25rem 0.5rem; | ||
position: absolute; | ||
top: 0; | ||
} | ||
.content { | ||
margin-top: 1.5rem; | ||
padding: 1rem; | ||
} | ||
} | ||
} | ||
</style> |
144 changes: 144 additions & 0 deletions
144
demos/src/Examples/InteractivityComponentProvideInject/Vue/Editor.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
<template> | ||
<editor-content :editor="editor" /> | ||
</template> | ||
|
||
<script> | ||
import StarterKit from '@tiptap/starter-kit' | ||
import { Editor, EditorContent } from '@tiptap/vue-3' | ||
import VueComponent from './Extension.js' | ||
export default { | ||
components: { | ||
EditorContent, | ||
}, | ||
data() { | ||
return { | ||
editor: null, | ||
} | ||
}, | ||
provide() { | ||
return { | ||
editorValue: 'editorValue', | ||
} | ||
}, | ||
mounted() { | ||
this.editor = new Editor({ | ||
extensions: [ | ||
StarterKit, | ||
VueComponent, | ||
], | ||
content: ` | ||
<p> | ||
This is still the text editor you’re used to, but enriched with node views. | ||
</p> | ||
<vue-component count="0"></vue-component> | ||
<p> | ||
Did you see that? That’s a Vue component. We are really living in the future. | ||
</p> | ||
`, | ||
}) | ||
}, | ||
beforeUnmount() { | ||
this.editor.destroy() | ||
}, | ||
} | ||
</script> | ||
|
||
<style lang="scss"> | ||
/* Basic editor styles */ | ||
.tiptap { | ||
:first-child { | ||
margin-top: 0; | ||
} | ||
/* List styles */ | ||
ul, | ||
ol { | ||
padding: 0 1rem; | ||
margin: 1.25rem 1rem 1.25rem 0.4rem; | ||
li p { | ||
margin-top: 0.25em; | ||
margin-bottom: 0.25em; | ||
} | ||
} | ||
/* Heading styles */ | ||
h1, | ||
h2, | ||
h3, | ||
h4, | ||
h5, | ||
h6 { | ||
line-height: 1.1; | ||
margin-top: 2.5rem; | ||
text-wrap: pretty; | ||
} | ||
h1, | ||
h2 { | ||
margin-top: 3.5rem; | ||
margin-bottom: 1.5rem; | ||
} | ||
h1 { | ||
font-size: 1.4rem; | ||
} | ||
h2 { | ||
font-size: 1.2rem; | ||
} | ||
h3 { | ||
font-size: 1.1rem; | ||
} | ||
h4, | ||
h5, | ||
h6 { | ||
font-size: 1rem; | ||
} | ||
/* Code and preformatted text styles */ | ||
code { | ||
background-color: var(--purple-light); | ||
border-radius: 0.4rem; | ||
color: var(--black); | ||
font-size: 0.85rem; | ||
padding: 0.25em 0.3em; | ||
} | ||
pre { | ||
background: var(--black); | ||
border-radius: 0.5rem; | ||
color: var(--white); | ||
font-family: 'JetBrainsMono', monospace; | ||
margin: 1.5rem 0; | ||
padding: 0.75rem 1rem; | ||
code { | ||
background: none; | ||
color: inherit; | ||
font-size: 0.8rem; | ||
padding: 0; | ||
} | ||
} | ||
blockquote { | ||
border-left: 3px solid var(--gray-3); | ||
margin: 1.5rem 0; | ||
padding-left: 1rem; | ||
} | ||
hr { | ||
border: none; | ||
border-top: 1px solid var(--gray-2); | ||
margin: 2rem 0; | ||
} | ||
} | ||
</style> |
36 changes: 36 additions & 0 deletions
36
demos/src/Examples/InteractivityComponentProvideInject/Vue/Extension.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { mergeAttributes, Node } from '@tiptap/core' | ||
import { VueNodeViewRenderer } from '@tiptap/vue-3' | ||
|
||
import Component from './Component.vue' | ||
|
||
export default Node.create({ | ||
name: 'vueComponent', | ||
|
||
group: 'block', | ||
|
||
atom: true, | ||
|
||
addAttributes() { | ||
return { | ||
count: { | ||
default: 0, | ||
}, | ||
} | ||
}, | ||
|
||
parseHTML() { | ||
return [ | ||
{ | ||
tag: 'vue-component', | ||
}, | ||
] | ||
}, | ||
|
||
renderHTML({ HTMLAttributes }) { | ||
return ['vue-component', mergeAttributes(HTMLAttributes)] | ||
}, | ||
|
||
addNodeView() { | ||
return VueNodeViewRenderer(Component) | ||
}, | ||
}) |
20 changes: 20 additions & 0 deletions
20
demos/src/Examples/InteractivityComponentProvideInject/Vue/ValidateInject.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<template> | ||
<div class="validate-inject"> | ||
<p>{{ globalValue }}</p> | ||
<p>{{ appValue }} </p> | ||
<p>{{ indexValue }}</p> | ||
<p>{{ editorValue }}</p> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
inject: ['appValue', 'indexValue', 'editorValue'], | ||
} | ||
</script> | ||
|
||
<style lang="scss"> | ||
.validate-inject { | ||
margin-top: 2rem; | ||
} | ||
</style> |
Empty file.
29 changes: 29 additions & 0 deletions
29
demos/src/Examples/InteractivityComponentProvideInject/Vue/index.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
context('/src/Examples/InteractivityComponentProvideInject/Vue/', () => { | ||
beforeEach(() => { | ||
cy.visit('/src/Examples/InteractivityComponentProvideInject/Vue/') | ||
}) | ||
|
||
it('should have a working tiptap instance', () => { | ||
cy.get('.tiptap').then(([{ editor }]) => { | ||
// eslint-disable-next-line | ||
expect(editor).to.not.be.null | ||
}) | ||
}) | ||
|
||
it('should render a custom node', () => { | ||
cy.get('.tiptap .vue-component').should('have.length', 1) | ||
}) | ||
|
||
it('should have global and all injected values', () => { | ||
const expectedTexts = [ | ||
'globalValue', | ||
'appValue', | ||
'indexValue', | ||
'editorValue', | ||
] | ||
|
||
cy.get('.tiptap .vue-component p').each((p, index) => { | ||
cy.wrap(p).should('have.text', expectedTexts[index]) | ||
}) | ||
}) | ||
}) |
24 changes: 24 additions & 0 deletions
24
demos/src/Examples/InteractivityComponentProvideInject/Vue/index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<template> | ||
<Editor /> | ||
</template> | ||
|
||
<script> | ||
import Editor from './Editor.vue' | ||
export default { | ||
components: { | ||
Editor, | ||
}, | ||
provide() { | ||
return { | ||
indexValue: 'indexValue', | ||
} | ||
}, | ||
} | ||
export function configureApp(app) { | ||
app.config.globalProperties.globalValue = 'globalValue' | ||
app.provide('appValue', 'appValue') | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters