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