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

update readme

Browse Source
This commit is contained in:
Philipp Kühn
2018-11-14 16:41:44 +01:00
parent a4df927d64
commit 95c01e1a84
1 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@@ -88,7 +88,7 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
| **Property** | **Type** | **Description** | | **Property** | **Type** | **Description** |
| --- | :---: | --- | | --- | :---: | --- |
| `commands` | `Array` | A list of all commands. | | `commands` | `Array` | A list of all commands. |
| `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. | | `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. | | `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. | | `focus` | `Function` | A function to focus the editor. |
@@ -99,9 +99,12 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
<template> <template>
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor">
<div slot-scope="{ commands, isActive }"> <div slot-scope="{ commands, isActive }">
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
H2
</button>
</div> </div>
</editor-menu-bar> </editor-menu-bar>
</template> </template>
@@ -114,7 +117,7 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
| **Property** | **Type** | **Description** | | **Property** | **Type** | **Description** |
| --- | :---: | --- | | --- | :---: | --- |
| `commands` | `Array` | A list of all commands. | | `commands` | `Array` | A list of all commands. |
| `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. | | `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. | | `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. | | `focus` | `Function` | A function to focus the editor. |
@@ -130,9 +133,12 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
> >
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
H2
</button>
</div> </div>
</editor-menu-bubble> </editor-menu-bubble>
</template> </template>
@@ -145,7 +151,7 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
| **Property** | **Type** | **Description** | | **Property** | **Type** | **Description** |
| --- | :---: | --- | | --- | :---: | --- |
| `commands` | `Array` | A list of all commands. | | `commands` | `Array` | A list of all commands. |
| `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. | | `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. | | `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. | | `focus` | `Function` | A function to focus the editor. |
@@ -161,9 +167,12 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`top: ${menu.top}px`" :style="`top: ${menu.top}px`"
> >
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
H2
</button>
</div> </div>
</editor-floating-menu> </editor-floating-menu>
</template> </template>
@@ -180,7 +189,7 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
<div> <div>
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor">
<div slot-scope="{ commands, isActive }"> <div slot-scope="{ commands, isActive }">
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
</div> </div>
@@ -391,26 +400,23 @@ export default class IframeNode extends Node {
// `updateAttrs` is a function to update attributes defined in `schema` // `updateAttrs` is a function to update attributes defined in `schema`
// `editable` is the global editor prop whether the content can be edited // `editable` is the global editor prop whether the content can be edited
props: ['node', 'updateAttrs', 'editable'], props: ['node', 'updateAttrs', 'editable'],
data() { computed: {
return { src: {
// save the iframe src in a new variable because `this.node.attrs` is immutable get() {
url: this.node.attrs.src, return this.node.attrs.src
} },
}, set(src) {
methods: { // we cannot update `src` itself because `this.node.attrs` is immutable
onChange(event) { this.updateAttrs({
this.url = event.target.value src,
})
// update the iframe url },
this.updateAttrs({
src: this.url,
})
}, },
}, },
template: ` template: `
<div class="iframe"> <div class="iframe">
<iframe class="iframe__embed" :src="url"></iframe> <iframe class="iframe__embed" :src="src"></iframe>
<input class="iframe__input" type="text" :value="url" @input="onChange" v-if="editable" /> <input class="iframe__input" type="text" v-model="src" v-if="editable" />
</div> </div>
`, `,
} }