mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 11:49:02 +08:00
docs: clean up experiments, add some notes here and there
This commit is contained in:
Hans Pagel
parent
5301e6f3d4
commit
2019eb6e20
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().setWordBreak().run()" :class="{ 'is-active': editor.isActive('wordBreak') }">
|
||||
wbr
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
<h2>HTML</h2>
|
||||
{{ editor.getHTML() }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import { WordBreak } from './word-break'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
WordBreak,
|
||||
],
|
||||
content: `
|
||||
<p>super<wbr>longword</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.word-break {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin: 0 0.1em;
|
||||
line-height: 1em;
|
||||
border: 1px dashed #868e96;
|
||||
color: #868e96;
|
||||
|
||||
&::before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
import { Node, mergeAttributes } from '@tiptap/core'
|
||||
import { exitCode } from 'prosemirror-commands'
|
||||
|
||||
export interface WordBreakOptions {
|
||||
HTMLAttributes: {
|
||||
[key: string]: any
|
||||
},
|
||||
}
|
||||
|
||||
declare module '@tiptap/core' {
|
||||
interface Commands<ReturnType> {
|
||||
wordBreak: {
|
||||
/**
|
||||
* Add a hard break
|
||||
*/
|
||||
setWordBreak: () => ReturnType,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const WordBreak = Node.create<WordBreakOptions>({
|
||||
name: 'wordBreak',
|
||||
|
||||
defaultOptions: {
|
||||
HTMLAttributes: {},
|
||||
},
|
||||
|
||||
inline: true,
|
||||
|
||||
group: 'inline',
|
||||
|
||||
selectable: false,
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{ tag: 'wbr' },
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['wbr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
setWordBreak: () => ({ commands, state, dispatch }) => {
|
||||
return commands.first([
|
||||
() => exitCode(state, dispatch),
|
||||
() => {
|
||||
if (dispatch) {
|
||||
state.tr.replaceSelectionWith(this.type.create()).scrollIntoView()
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
])
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return () => {
|
||||
const dom = document.createElement('span')
|
||||
dom.classList.add('word-break')
|
||||
|
||||
return {
|
||||
dom,
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -1,14 +1,15 @@
|
||||
# Experiments
|
||||
Congratulations! You’ve found our playground with a list of experiments. Be aware that nothing here is ready to use. Feel free to play around, but please, don’t open an issue for a bug you’ve found here or send pull requests. :-)
|
||||
|
||||
## New
|
||||
## Experimental examples
|
||||
* [Linter](/experiments/linter)
|
||||
* [Multiple editors](/experiments/multiple-editors)
|
||||
* [Content of multiple editors in a single Y.js](/experiments/multiple-editors)
|
||||
* [Global drag handle](/experiments/global-drag-handle)
|
||||
* [@tiptap/extension-slash-command?](/experiments/commands)
|
||||
* [@tiptap/extension-iframe?](/experiments/embeds)
|
||||
* [@tiptap/extension-toggle-list?](/experiments/details)
|
||||
|
||||
## Experimental extensions
|
||||
* [@tiptap/extension-command-menu](/experiments/commands)
|
||||
* [@tiptap/extension-iframe](/experiments/embeds)
|
||||
* [@tiptap/extension-toggle-list](/experiments/details)
|
||||
* [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
|
||||
* [@tiptap/extension-word-break](/experiments/word-break)
|
||||
* [@tiptap/extension-trailing-node](/experiments/trailing-node)
|
||||
* [@tiptap/extension-figure](/experiments/figure)
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* It’s fine to use, just don’t send bug reports, PRs or anything else. We’ll just need some time to publish that as an official extension.
|
||||
|
||||
<demo name="Experiments/Commands" />
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* Nested lists cause trouble
|
||||
|
||||
<demo name="Experiments/Details" />
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* Oh man, building a really good iframe/embed extension will take some time. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub.
|
||||
|
||||
<demo name="Experiments/Embeds" />
|
||||
|
||||
@ -2,12 +2,11 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Tasks
|
||||
* Build commands to wrap an image into a figure + figcaption?
|
||||
* Build commands to unrwap figure + figcaption to an image?
|
||||
|
||||
## Related links
|
||||
* https://github.com/ueberdosis/tiptap/issues/573#issuecomment-730122427
|
||||
* https://discuss.prosemirror.net/t/figure-and-editable-caption/462/5
|
||||
|
||||
## Issues
|
||||
* The current implementation works with images only.
|
||||
|
||||
<demo name="Experiments/Figure" />
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* We’re working on a better, more solid implementation. :) Give us some more time, and please, don’t ask when it’s ready. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub.
|
||||
|
||||
<demo name="Experiments/GlobalDragHandle" />
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* There is no decoration API in tiptap, that’s why this is a lot of ProseMirror work. Before we’ll publish that example, we’d need to find a few ways to make it more tiptap-like. For example, it would be great to use Vue/React components for the widget.
|
||||
|
||||
<demo name="Experiments/Linter" />
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* This implementation adds an actual node. It’d be great to use a decoration for that use case, so the document isn’t modified.
|
||||
|
||||
<demo name="Experiments/TrailingNode" />
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
# Word break
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
<demo name="Experiments/WordBreak" />
|
||||
Loading…
Reference in New Issue
Block a user