Skip to content

Commit 2012719

Browse files
fabianmichaelfabianmichael
committed
add option to use markdown foir buttons
1 parent f956ec5 commit 2012719

25 files changed

+147
-3422
lines changed

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Enhanced, extensible Markdown field for Kirby CMS. Now available in version 2!
2626
2727
## Table of Contents
2828

29-
- [Kirby – Markdown field](#kirby--markdown-field)
29+
- [Markdown Field for Kirby](#markdown-field-for-kirby)
3030
- [Overview](#overview)
3131
- [Table of Contents](#table-of-contents)
3232
- [1. Installation](#1-installation)
@@ -131,6 +131,11 @@ syntaxes for bold text, i.e. `__bold__` and `**bold**`. The editor’s syntax hi
131131
will always recognize both, but you can adjust, what the editor will use, when
132132
you click the toolbar button or hitting the respective keyboard shortcut.
133133

134+
For the `link` and `pagelink` buttons, you can specify whether these thould insert
135+
`markdown` or `kirbytext` markup. By default, this will be determed by the
136+
[`kirbytext`](https://getkirby.com/docs/reference/system/options/kirbytext) option by
137+
default but can be overriden on a per-button basis.
138+
134139
All button configuration is optional, you can always use `- ul` instead of `ul: -`,
135140
if you want to stick to the default settings.
136141

@@ -144,6 +149,8 @@ buttons:
144149
- h5
145150
- h6
146151
bold: ** # or `__`
152+
link: null # or `markdown` or `kirbytext`
153+
pagelink: null # or `markdown` or `kirbytext`
147154
italic: * # or `_`
148155
- strikethrough
149156
- code

‎index.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Buttons/Link.js‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ export default class Link extends Button {
99
};
1010
}
1111

12-
get defaults() {
13-
return {
14-
blank: true
15-
}
16-
}
17-
1812
get command() {
1913
return (value) => {
2014
if (this.isDisabled()) {
@@ -24,7 +18,7 @@ export default class Link extends Button {
2418
if (value.type === "email") {
2519
const email = value.email !== null ? value.email : "";
2620

27-
if (this.input.kirbytext) {
21+
if (this.useKirbytext) {
2822
const text = value.text ? ` text: ${value.text}` : "";
2923
this.editor.insert(`(email: ${email}${text})`);
3024
} else {
@@ -37,7 +31,7 @@ export default class Link extends Button {
3731
} else {
3832
const url = value.url !== null ? value.url : "";
3933

40-
if (this.input.kirbytext) {
34+
if (this.useKirbytext) {
4135
const text = value.text ? ` text: ${value.text}` : "";
4236
const blank = value.blank ? " target: _blank" : "";
4337
this.editor.insert(`(link: ${url}${text}${blank})`);
@@ -52,6 +46,29 @@ export default class Link extends Button {
5246
}
5347
}
5448

49+
configure(options) {
50+
if (typeof options === "string") {
51+
options = { style: options };
52+
}
53+
54+
Button.prototype.configure.call(this, options);
55+
56+
if (!["markdown", "kirbytext", null].includes(this.options.style)) {
57+
throw "Link style must be either `markdown`, `kirbytext` or `null`.";
58+
}
59+
}
60+
61+
get defaults() {
62+
return {
63+
blank: true,
64+
style: null,
65+
};
66+
}
67+
68+
get useKirbytext() {
69+
return ([null, 'kirbytext'].includes(this.options.style) && this.input.kirbytext);
70+
}
71+
5572
get dialog() {
5673
return "k-markdown-link-dialog";
5774
}

‎src/components/Buttons/PageLink.js‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,42 @@ export default class PageLink extends Button {
2525
return;
2626
}
2727

28-
const page = selected[0];
28+
const page = selected[0];
2929
const selection = this.editor.getSelection();
30-
const text = selection.length > 0 ? selection : page.text || page.title;
31-
const lang = this.input.currentLanguage && !this.input.currentLanguage.default ? ` lang: ${this.input.currentLanguage.code}` : "";
32-
const tag = `(link: ${page.id} text: ${text}${lang})`;
30+
const text = selection.length > 0 ? selection : page.text || page.title;
31+
const lang = this.input.currentLanguage && !this.input.currentLanguage.default ? ` lang: ${this.input.currentLanguage.code}` : "";
32+
33+
34+
const tag = this.useKirbytext
35+
? `(link: ${page.id} text: ${text}${lang})`
36+
: `[${text}](${page.url})`;
3337

3438
this.editor.insert(tag);
3539
}
3640
}
3741

42+
configure(options) {
43+
if (typeof options === "string") {
44+
options = { style: options };
45+
}
46+
47+
Button.prototype.configure.call(this, options);
48+
49+
if (!["markdown", "kirbytext", null].includes(this.options.style)) {
50+
throw "Page link style must be either `markdown`, `kirbytext` or `null`.";
51+
}
52+
}
53+
54+
get defaults() {
55+
return {
56+
style: null,
57+
};
58+
}
59+
60+
get useKirbytext() {
61+
return ([null, 'kirbytext'].includes(this.options.style) && this.input.kirbytext);
62+
}
63+
3864
get dialog() {
3965
return "k-pages-dialog";
4066
}

‎src/components/MarkdownToolbar.vue‎

Lines changed: 77 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,58 @@
11
<template>
2-
<nav class="k-toolbar k-markdown-toolbar">
3-
<template v-for="({ button, name, isActive, isDisabled }, buttonIndex) in layout">
4-
5-
<!-- divider -->
6-
<template v-if="button.divider">
7-
<hr
8-
:key="buttonIndex"
9-
aria-orientation="vertical"
10-
class="k-toolbar-divider"
11-
/>
12-
</template>
2+
<nav class="k-markdown-toolbar">
3+
<div class="k-markdown-toolbar-wrapper">
4+
<template v-for="({ button, name, isActive, isDisabled }, buttonIndex) in layout">
135

14-
<!-- dropdown -->
15-
<template v-else-if="button.dropdown">
16-
<k-dropdown :key="buttonIndex">
6+
<!-- divider -->
7+
<template v-if="button.divider">
8+
<hr
9+
:key="buttonIndex"
10+
aria-orientation="vertical"
11+
class="k-markdown-toolbar-divider"
12+
/>
13+
</template>
14+
15+
<!-- dropdown -->
16+
<template v-else-if="button.dropdown">
17+
<k-dropdown :key="buttonIndex">
18+
<k-button
19+
:key="buttonIndex"
20+
:icon="button.icon"
21+
:tooltip="button.label"
22+
tabindex="-1"
23+
:class="(isDisabled() ? 'is-disabled ' : '') + 'k-markdown-toolbar-button'"
24+
@click="$refs[buttonIndex + '-dropdown'][0].toggle()"
25+
/>
26+
<k-dropdown-content
27+
:ref="buttonIndex + '-dropdown'"
28+
@open="setOpen($refs[buttonIndex + '-dropdown'][0])"
29+
@close="setOpen(null)"
30+
>
31+
<k-dropdown-item
32+
v-for="(dropdownItem, dropdownItemIndex) in button.dropdown"
33+
:key="dropdownItemIndex"
34+
:icon="dropdownItem.icon"
35+
:current="active.includes(dropdownItem.token)"
36+
@click="dropdownItem.command"
37+
><span v-html="dropdownItem.label"/></k-dropdown-item>
38+
</k-dropdown-content>
39+
</k-dropdown>
40+
</template>
41+
42+
<!-- single button -->
43+
<template v-else>
1744
<k-button
1845
:key="buttonIndex"
1946
:icon="button.icon"
2047
:tooltip="button.label"
48+
:class="(isDisabled() ? 'is-disabled ' : '') + (isActive() || (name === 'invisibles' && invisibles) ? 'is-active ' : '') + 'k-markdown-toolbar-button' + (button.align === 'right' ? ' k-markdown-toolbar-button-right' : '')"
2149
tabindex="-1"
22-
:class="(isDisabled() ? 'is-disabled ' : '') + 'k-toolbar-button k-markdown-button'"
23-
@click="$refs[buttonIndex + '-dropdown'][0].toggle()"
50+
@click="button.command"
2451
/>
25-
<k-dropdown-content
26-
:ref="buttonIndex + '-dropdown'"
27-
@open="setOpen($refs[buttonIndex + '-dropdown'][0])"
28-
@close="setOpen(null)"
29-
>
30-
<k-dropdown-item
31-
v-for="(dropdownItem, dropdownItemIndex) in button.dropdown"
32-
:key="dropdownItemIndex"
33-
:icon="dropdownItem.icon"
34-
:current="active.includes(dropdownItem.token)"
35-
@click="dropdownItem.command"
36-
><span v-html="dropdownItem.label"/></k-dropdown-item>
37-
</k-dropdown-content>
38-
</k-dropdown>
39-
</template>
52+
</template>
4053

41-
<!-- single button -->
42-
<template v-else>
43-
<k-button
44-
:key="buttonIndex"
45-
:icon="button.icon"
46-
:tooltip="button.label"
47-
:class="(isDisabled() ? 'is-disabled ' : '') + (isActive() || (name === 'invisibles' && invisibles) ? 'is-active ' : '') + 'k-toolbar-button k-markdown-button' + (button.align === 'right' ? ' k-markdown-toolbar-button-right' : '')"
48-
tabindex="-1"
49-
@click="button.command"
50-
/>
5154
</template>
52-
53-
</template>
55+
</div>
5456
</nav>
5557
</template>
5658

@@ -110,16 +112,40 @@ export default {
110112
111113
.k-markdown-toolbar {
112114
height: auto;
113-
min-height: 38px;
115+
background: var(--color-white);
116+
border-start-start-radius: var(--rounded);
117+
border-start-end-radius: var(--rounded);
118+
border-bottom: 1px solid var(--color-background);
119+
min-height: 38px;
120+
}
121+
122+
.k-markdown-toolbar-wrapper {
123+
max-width: 100%;
124+
display: flex;
125+
}
126+
127+
.k-markdown-toolbar-button {
128+
width: 36px;
129+
height: 36px;
130+
}
131+
132+
.k-markdown-toolbar-divider {
133+
width: 1px;
134+
border-width: 0;
135+
background: var(--color-background);
114136
}
115137
116138
/* disabled state of toolbar buttons */
117-
.k-markdown-toolbar .k-markdown-button.is-disabled {
139+
.k-markdown-toolbar .k-markdown-toolbar-button.is-disabled {
118140
opacity: 0.25;
119141
pointer-events: none;
120142
}
121143
122144
/* Editor has focus */
145+
.k-markdown-toolbar {
146+
color: #aaa
147+
}
148+
123149
.k-markdown-input-wrap:focus-within .k-markdown-toolbar {
124150
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
125151
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
@@ -131,11 +157,15 @@ export default {
131157
z-index: 4;
132158
}
133159
134-
.k-markdown-input-wrap:focus-within .k-markdown-toolbar .k-markdown-button.is-active {
160+
.k-markdown-input-wrap:focus-within .k-markdown-toolbar .k-markdown-toolbar-button:hover {
161+
background: rgba(239,239,239,.5);
162+
}
163+
164+
.k-markdown-input-wrap:focus-within .k-markdown-toolbar .k-markdown-toolbar-button.is-active {
135165
color: #3872be;
136166
}
137167
138-
.k-markdown-input-wrap:focus-within .k-toolbar .k-markdown-button.is-active:hover {
168+
.k-markdown-input-wrap:focus-within .k-markdown-toolbar .k-markdown-toolbar-button.is-active:hover {
139169
background: rgba(66, 113, 174, 0.075);
140170
}
141171

‎vendor/autoload.php‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)