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

change isActive behavior

Browse Source
This commit is contained in:
Philipp Kühn
2018-11-14 10:05:34 +01:00
parent 55833ddc44
commit d6c4c236a3
11 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
examples/Components/Routes/Basic/index.vue
View File

@@ -5,7 +5,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive.bold() }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -13,7 +13,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive.italic() }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -21,7 +21,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('strike') }" :class="{ 'is-active': isActive.strike() }"
@click="commands.strike" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
@@ -29,7 +29,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('underline') }" :class="{ 'is-active': isActive.underline() }"
@click="commands.underline" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
@@ -37,7 +37,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive.code() }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -45,7 +45,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('paragraph') }" :class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
@@ -53,7 +53,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -61,7 +61,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 2 }) }" :class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -69,7 +69,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 3 }) }" :class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -77,7 +77,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bullet_list') }" :class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -85,7 +85,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('ordered_list') }" :class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -93,7 +93,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('blockquote') }" :class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
@@ -101,7 +101,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code_block') }" :class="{ 'is-active': isActive.code_block() }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

20
examples/Components/Routes/Export/index.vue
View File

@@ -6,7 +6,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive.bold() }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive.italic() }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive.code() }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -30,7 +30,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('paragraph') }" :class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
@@ -38,7 +38,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -46,7 +46,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 2 }) }" :class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -54,7 +54,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 3 }) }" :class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -62,7 +62,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bullet_list') }" :class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -70,7 +70,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('ordered_list') }" :class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -78,7 +78,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code_block') }" :class="{ 'is-active': isActive.code_block() }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

14
examples/Components/Routes/FloatingMenu/index.vue
View File

@@ -10,7 +10,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -18,7 +18,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 2 }) }" :class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -26,7 +26,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 3 }) }" :class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -34,7 +34,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bullet_list') }" :class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -42,7 +42,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('ordered_list') }" :class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -50,7 +50,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('blockquote') }" :class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
@@ -58,7 +58,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code_block') }" :class="{ 'is-active': isActive.code_block() }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

26
examples/Components/Routes/HidingMenuBar/index.vue
View File

@@ -9,7 +9,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive.bold() }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -17,7 +17,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive.italic() }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -25,7 +25,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('strike') }" :class="{ 'is-active': isActive.strike() }"
@click="commands.strike" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
@@ -33,7 +33,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('underline') }" :class="{ 'is-active': isActive.underline() }"
@click="commands.underline" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
@@ -41,7 +41,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive.code() }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -49,7 +49,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('paragraph') }" :class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
@@ -57,7 +57,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -65,7 +65,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 2 }) }" :class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -73,7 +73,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 3 }) }" :class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -81,7 +81,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bullet_list') }" :class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -89,7 +89,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('ordered_list') }" :class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -97,7 +97,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('blockquote') }" :class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
@@ -105,7 +105,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code_block') }" :class="{ 'is-active': isActive.code_block() }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

2
examples/Components/Routes/Links/index.vue
View File

@@ -19,7 +19,7 @@
<button <button
class="menububble__button" class="menububble__button"
@click="showLinkMenu(markAttrs('link'))" @click="showLinkMenu(markAttrs('link'))"
:class="{ 'is-active': isActive('link') }" :class="{ 'is-active': isActive.link() }"
> >
<span>Add Link</span> <span>Add Link</span>
<icon name="link" /> <icon name="link" />

6
examples/Components/Routes/MenuBubble/index.vue
View File

@@ -10,7 +10,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive.bold() }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -18,7 +18,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive.italic() }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -26,7 +26,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive.code() }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />

8
examples/Components/Routes/TodoList/index.vue
View File

@@ -5,7 +5,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive.bold() }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -13,7 +13,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive.italic() }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -21,7 +21,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive.code() }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -29,7 +29,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('todo_list') }" :class="{ 'is-active': isActive.todo_list() }"
@click="commands.todo_list" @click="commands.todo_list"
> >
<icon name="checklist" /> <icon name="checklist" />

2
packages/tiptap/src/Components/EditorFloatingMenu.js
View File

@@ -42,7 +42,7 @@ export default {
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands, commands: this.editor.commands,
isActive: this.editor.isActive.bind(this.editor), isActive: this.editor.isActive,
markAttrs: this.editor.markAttrs.bind(this.editor), markAttrs: this.editor.markAttrs.bind(this.editor),
menu: this.menu, menu: this.menu,
}) })

2
packages/tiptap/src/Components/EditorMenuBar.js
View File

@@ -14,7 +14,7 @@ export default {
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands, commands: this.editor.commands,
isActive: this.editor.isActive.bind(this.editor), isActive: this.editor.isActive,
markAttrs: this.editor.markAttrs.bind(this.editor), markAttrs: this.editor.markAttrs.bind(this.editor),
}) })
}, },

2
packages/tiptap/src/Components/EditorMenuBubble.js
View File

@@ -42,7 +42,7 @@ export default {
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands, commands: this.editor.commands,
isActive: this.editor.isActive.bind(this.editor), isActive: this.editor.isActive,
markAttrs: this.editor.markAttrs.bind(this.editor), markAttrs: this.editor.markAttrs.bind(this.editor),
menu: this.menu, menu: this.menu,
}) })

12
packages/tiptap/src/utils/Editor.js
View File

@@ -284,17 +284,19 @@ export default class Editor {
return this.activeMarkAttrs[type] return this.activeMarkAttrs[type]
} }
isActive(type = null, attrs = {}) { get isActive() {
const types = { const types = {
...this.activeMarks, ...this.activeMarks,
...this.activeNodes, ...this.activeNodes,
} }
if (!types[type]) { Object
return false .entries(types)
} .forEach(([name, value]) => {
types[name] = (attrs = {}) => value(attrs)
})
return types[type](attrs) return types
} }
destroy() { destroy() {