demos: remove details experiment
This commit is contained in:
Philipp Kühn
@@ -1,35 +0,0 @@
|
||||
import { Node } from '@tiptap/core'
|
||||
|
||||
export interface DetailsSummaryOptions {
|
||||
HTMLAttributes: {
|
||||
[key: string]: any
|
||||
},
|
||||
}
|
||||
|
||||
export default Node.create<DetailsSummaryOptions>({
|
||||
name: 'detailsSummary',
|
||||
|
||||
content: 'text*',
|
||||
|
||||
marks: '',
|
||||
|
||||
group: 'block',
|
||||
|
||||
isolating: true,
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
HTMLAttributes: {},
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [{
|
||||
tag: 'summary',
|
||||
}]
|
||||
},
|
||||
|
||||
renderHTML() {
|
||||
return ['summary', 0]
|
||||
},
|
||||
})
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Node, mergeAttributes } from '@tiptap/core'
|
||||
|
||||
export interface DetailsOptions {
|
||||
HTMLAttributes: {
|
||||
[key: string]: any
|
||||
},
|
||||
}
|
||||
|
||||
declare module '@tiptap/core' {
|
||||
interface Commands<ReturnType> {
|
||||
details: {
|
||||
/**
|
||||
* Set a details node
|
||||
*/
|
||||
setDetails: () => ReturnType,
|
||||
/**
|
||||
* Toggle a details node
|
||||
*/
|
||||
toggleDetails: () => ReturnType,
|
||||
/**
|
||||
* Unset a details node
|
||||
*/
|
||||
unsetDetails: () => ReturnType,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Node.create<DetailsOptions>({
|
||||
name: 'details',
|
||||
|
||||
content: 'detailsSummary block+',
|
||||
|
||||
group: 'block',
|
||||
|
||||
// defining: true,
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
HTMLAttributes: {},
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'details',
|
||||
},
|
||||
{
|
||||
tag: 'div[data-type="details"]',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['details', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ({ HTMLAttributes }) => {
|
||||
const item = document.createElement('div')
|
||||
|
||||
item.setAttribute('data-type', 'details')
|
||||
|
||||
const toggle = document.createElement('div')
|
||||
|
||||
toggle.setAttribute('data-type', 'detailsToggle')
|
||||
item.append(toggle)
|
||||
|
||||
const content = document.createElement('div')
|
||||
|
||||
content.setAttribute('data-type', 'detailsContent')
|
||||
item.append(content)
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
if (item.hasAttribute('open')) {
|
||||
item.removeAttribute('open')
|
||||
} else {
|
||||
item.setAttribute('open', 'open')
|
||||
}
|
||||
})
|
||||
|
||||
Object.entries(HTMLAttributes).forEach(([key, value]) => {
|
||||
item.setAttribute(key, value)
|
||||
})
|
||||
|
||||
return {
|
||||
dom: item,
|
||||
contentDOM: content,
|
||||
ignoreMutation: (mutation: MutationRecord) => {
|
||||
return !item.contains(mutation.target) || item === mutation.target
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
setDetails: () => ({ commands }) => {
|
||||
// TODO: Doesn’t work
|
||||
return commands.wrapIn('details')
|
||||
},
|
||||
toggleDetails: () => ({ commands }) => {
|
||||
// TODO: Doesn’t work
|
||||
return commands.toggleWrap('details')
|
||||
},
|
||||
unsetDetails: () => ({ commands }) => {
|
||||
// TODO: Doesn’t work
|
||||
return commands.lift('details')
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/vue.ts'
|
||||
import source from '@source'
|
||||
setup('Experiments/Details', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,98 +0,0 @@
|
||||
<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-3'
|
||||
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>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.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>
|
||||
Reference in New Issue
Block a user