ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

demos: remove details experiment

Browse Source
This commit is contained in:
Philipp Kühn
2021-12-03 20:41:08 +01:00
parent 1f234fc5d5
commit 59c296e6f7
5 changed files with 0 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
demos/src/Experiments/Details/Vue/details-summary.ts
View File

@@ -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]
},
})

112
demos/src/Experiments/Details/Vue/details.ts
View File

@@ -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')
},
}
},
})

15
demos/src/Experiments/Details/Vue/index.html
View File

@@ -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>

98
demos/src/Experiments/Details/Vue/index.vue
View File

@@ -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>

1
docs/experiments.md
View File

@@ -9,6 +9,5 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
## Experimental extensions ## Experimental extensions
* [@tiptap/extension-command-menu](/experiments/commands) * [@tiptap/extension-command-menu](/experiments/commands)
* [@tiptap/extension-iframe](/experiments/embeds) * [@tiptap/extension-iframe](/experiments/embeds)
* [@tiptap/extension-toggle-list](/experiments/details)
* [@tiptap/extension-trailing-node](/experiments/trailing-node) * [@tiptap/extension-trailing-node](/experiments/trailing-node)
* [@tiptap/extension-figure](/experiments/figure) * [@tiptap/extension-figure](/experiments/figure)