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

Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/replace-classes

Browse Source 
# Conflicts:
#	docs/src/demos/Examples/Focus/index.vue
#	docs/src/docPages/api/extensions/placeholder.md
#	docs/src/docPages/general/roadmap.md
This commit is contained in:
Philipp Kühn
2020-09-09 18:16:51 +02:00
parent 2ff134274e 9819e44fe6
commit 0361da1b71
41 changed files with 386 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/Examples/Focus/index.spec.js
View File

@@ -1,4 +1,4 @@
context('focus', () => {
context('/examples/focus', () => {
beforeEach(() => {
cy.visit('/examples/focus')
})

22
docs/src/demos/Examples/Focus/index.vue
View File

@@ -9,12 +9,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import History from '@tiptap/extension-history'
import Bold from '@tiptap/extension-bold'
import Italic from '@tiptap/extension-italic'
import Code from '@tiptap/extension-code'
import CodeBlock from '@tiptap/extension-codeblock'
import Heading from '@tiptap/extension-heading'
import Focus from '@tiptap/extension-focus'
export default {
@@ -32,14 +27,9 @@ export default {
this.editor = new Editor({
extensions: [
Document(),
History(),
Paragraph(),
Text(),
Bold(),
Italic(),
Code(),
CodeBlock(),
Heading(),
Focus({
className: 'has-focus',
nested: true,
@@ -48,16 +38,12 @@ export default {
autoFocus: true,
content: `
<p>
With the focus extension you can add custom classes to focused nodes. Default options:
The focus extension adds custom classes to focused nodes. By default, it’ll add a <code>has-focus</code> class, even to nested nodes:
</p>
<pre><code>{\n className: 'has-focus',\n nested: true,\n}</code></pre>
<pre><code>{ className: 'has-focus', nested: true }</code></pre>
<ul>
<li>
When set <code>nested</code> to <code>true</code> also nested elements like this list item will be captured.
</li>
<li>
Otherwise only the wrapping list will get this class.
</li>
<li>With <code>nested: true</code> nested elements like this list item will be focused.</li>
<li>Otherwise the whole list will get the focus class, even if only a single list item is selected.</li>
</ul>
`,
})