101 lines
1.9 KiB
Vue
101 lines
1.9 KiB
Vue
<template>
|
||
<div v-if="editor">
|
||
<button @click="editor.chain().focus().toggleDetails().run()" :class="{ 'is-active': editor.isActive('details') }">
|
||
details
|
||
</button>
|
||
|
||
<editor-content :editor="editor" />
|
||
|
||
<h2>HTML</h2>
|
||
{{ editor.getHTML() }}
|
||
|
||
<h2>Issues</h2>
|
||
<ul>
|
||
<li>Commands don’t work</li>
|
||
<li>Fails to open nested details</li>
|
||
<li>Node can’t be deleted (if it’s the last node)</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
import Details from './details'
|
||
import DetailsSummary from './details-summary'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
extensions: [
|
||
StarterKit,
|
||
Details,
|
||
DetailsSummary,
|
||
],
|
||
content: `
|
||
<p>Here is a details list:</p>
|
||
<details>
|
||
<summary>An open details tag</summary>
|
||
<p>More info about the details.</p>
|
||
</details>
|
||
<details>
|
||
<summary>A closed details tag</summary>
|
||
<p>More info about the details.</p>
|
||
</details>
|
||
<p>That’s it.</p>
|
||
`,
|
||
})
|
||
},
|
||
|
||
beforeDestroy() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep {
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
|
||
details,
|
||
[data-type="details"] {
|
||
display: flex;
|
||
|
||
[data-type="detailsContent"] > *:not(summary) {
|
||
display: none;
|
||
}
|
||
|
||
[data-type="detailsToggle"]::before {
|
||
cursor: pointer;
|
||
content: '▸';
|
||
display: inline-block;
|
||
width: 1em;
|
||
}
|
||
|
||
&[open] {
|
||
[data-type="detailsContent"] > *:not(summary) {
|
||
display: inherit;
|
||
}
|
||
|
||
[data-type="detailsToggle"]::before {
|
||
content: '▾';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|