Skip to content

Commit c028415

Browse files
joedixonjoedixon
committed
Format article editor
1 parent 90a4d55 commit c028415

File tree

13 files changed

+151
-180
lines changed

13 files changed

+151
-180
lines changed

‎app/Http/Controllers/Articles/ArticlesController.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,15 @@ public function show(Article $article)
3535
public function create()
3636
{
3737
$tags = Tag::all();
38-
$selectedTags = old('tags') ?: [];
38+
$selectedTags = old('tags', []);
3939
$series = Series::all();
40+
$selectedSeries = old('series');
4041

4142
return view('articles.create', [
4243
'tags' => $tags,
4344
'selectedTags' => $selectedTags,
4445
'series' => $series,
46+
'selectedSeries' => $selectedSeries,
4547
]);
4648
}
4749

@@ -57,14 +59,17 @@ public function store(ArticleRequest $request)
5759
public function edit(Article $article)
5860
{
5961
$this->authorize(ArticlePolicy::UPDATE, $article);
60-
$selectedTags = $article->tags()->pluck('id')->toArray();
62+
63+
$selectedTags = old('tags', $article->tags()->pluck('id')->toArray());
6164
$series = Series::all();
65+
$selectedSeries = old('series', $article->series->id);
6266

6367
return view('articles.edit', [
6468
'article' => $article,
6569
'tags' => Tag::all(),
6670
'selectedTags' => $selectedTags,
6771
'series' => $series,
72+
'selectedSeries' => $selectedSeries,
6873
]);
6974
}
7075

‎app/Http/Controllers/Articles/SeriesController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ public function edit(Series $series)
4949
{
5050
$this->authorize(SeriesPolicy::UPDATE, $series);
5151

52-
$selectedTags = $series->tags()->pluck('id')->toArray();
52+
$selectedTags = old('tags', $series->tags()->pluck('id')->toArray());
5353

5454
return view('series.edit', ['series' => $series, 'tags' => Tag::all(), 'selectedTags' => $selectedTags]);
5555
}

‎app/Http/Requests/ArticleRequest.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ public function rules()
1212
return [
1313
'title' => ['required', 'max:100'],
1414
'body' => ['required', new HttpImageRule],
15-
'tags' => 'array',
15+
'tags' => 'array|nullable',
1616
'tags.*' => 'exists:tags,id',
17-
'series' => 'exists:series,id',
18-
'original_url' => 'url',
17+
'series' => 'exists:series,id|nullable',
18+
'original_url' => 'url|nullable',
1919
];
2020
}
2121

‎app/Models/Article.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,14 @@ public function body(): string
3838
return $this->body;
3939
}
4040

41-
public function originalUrl(): string
41+
public function originalUrl(): ?string
4242
{
43-
return $this->original_url ?: route('articles.show', $this->slug);
43+
return $this->original_url;
44+
}
45+
46+
public function canonicalUrl(): string
47+
{
48+
return $this->originalUrl() ?: route('articles.show', $this->slug);
4449
}
4550

4651
public function series()

‎resources/css/forms.css‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,22 @@ label {
66
@apply mb-1 text-gray-600 block uppercase text-sm;
77
}
88

9+
input[type=text],
10+
input[type=password],
11+
input[type=email] {
12+
@apply h-12;
13+
}
14+
915
input[type=text],
1016
input[type=password],
1117
input[type=email],
1218
textarea,
1319
select {
14-
@apply rounded border-2 p-3 w-full appearance-none;
20+
@apply rounded border-2 p-3 w-full;
21+
}
22+
23+
select {
24+
@apply appearance-none;
1525
}
1626

1727
input.nav-search {
@@ -27,6 +37,10 @@ input[type=checkbox] {
2737
}
2838

2939
/** Markdown editor **/
40+
.form-group .editor {
41+
@apply rounded-t-none;
42+
}
43+
3044
.form-group .editor-toolbar {
3145
@apply border-2 border-b-0 rounded rounded-b-none border-gray-300;
3246
}
@@ -40,8 +54,24 @@ input[type=checkbox] {
4054
@apply hidden;
4155
}
4256

57+
.choices__inner {
58+
@apply rounded border-2 border-gray-300 w-full bg-white h-12 p-2 flex items-center !important;
59+
}
60+
61+
.choices__list--dropdown {
62+
@apply border-2 border-gray-300 !important;
63+
}
64+
65+
.choices__list--single {
66+
@apply p-0 !important;
67+
}
68+
4369
.choices__item {
44-
@apply text-xs uppercase bg-gray-200 text-gray-700 cursor-pointer rounded px-2 py-1 !important;
70+
@apply text-sm bg-gray-200 text-gray-700 cursor-pointer rounded px-2 py-1 my-0 border-0 !important;
71+
}
72+
73+
.choices__item.choices__item--choice {
74+
@apply rounded-none py-2 !important;
4575
}
4676

4777
.choices__item.choices__item--choice.choices__item--selectable {
@@ -56,6 +86,18 @@ input[type=checkbox] {
5686
@apply bg-green-primary border-green-primary text-white !important;
5787
}
5888

89+
.choices__list--single > .choices__item.choices__item--selectable {
90+
@apply bg-white text-gray-700 !important;
91+
}
92+
5993
.choices__item.is-highlighted {
6094
@apply bg-green-dark border-green-dark text-white !important;
6195
}
96+
97+
.choices[data-type*='select-one']:after {
98+
border-color: theme('colors.gray.500') transparent transparent transparent !important;
99+
}
100+
101+
.choices[data-type*='select-one'] .choices__input {
102+
@apply rounded-none border-b-2 border-gray-300 !important;
103+
}

‎resources/js/app.js‎

Lines changed: 7 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import "choices.js/public/assets/styles/choices.css";
99

1010
require('./bootstrap');
1111
require('./search');
12+
require('./editor');
1213

1314
// Initialise cookie consent.
1415
document.addEventListener('DOMContentLoaded', () => {
@@ -29,113 +30,16 @@ document.addEventListener('DOMContentLoaded', () => {
2930
});
3031

3132
// Create a multiselect element.
32-
window.choices = (element) => { return new Choices(element, { maxItemCount: 3, removeItemButton: true }) };
33+
window.choices = (element) => {
34+
return new Choices(element, {
35+
maxItemCount: 3,
36+
removeItemButton: true
37+
})
38+
};
3339

3440
// Syntax highlight code blocks.
3541
window.highlightCode = (element) => {
3642
element.querySelectorAll("pre code").forEach(block => {
3743
hljs.highlightBlock(block);
3844
});
39-
}
40-
41-
// Handle the click event of the style buttons inside the editor.
42-
window.handleClick = (style, element) => {
43-
const { styles } = editorConfig();
44-
const input = element.querySelectorAll("textarea")[0];
45-
46-
// Get the start and end positions of the current selection.
47-
const selectionStart = input.selectionStart;
48-
const selectionEnd = input.selectionEnd;
49-
50-
// Find the style in the configuration.
51-
const styleFormat = styles[style];
52-
53-
// Get any prefix and/or suffix characters from the selected style.
54-
const prefix = styleFormat.before ? styleFormat.before : "";
55-
const suffix = styleFormat.after ? styleFormat.after : "";
56-
57-
// Insert the prefix at the relevant position.
58-
input.value = insertCharactersAtPosition(
59-
input.value,
60-
prefix,
61-
selectionStart
62-
);
63-
64-
// Insert the suffix at the relevant position.
65-
input.value = insertCharactersAtPosition(
66-
input.value,
67-
suffix,
68-
selectionEnd + prefix.length
69-
);
70-
71-
// Reselect the selection and focus the input.
72-
input.setSelectionRange(
73-
selectionStart + prefix.length,
74-
selectionEnd + prefix.length
75-
);
76-
input.focus();
77-
}
78-
79-
// Insert provided characters at the desired place in a string.
80-
const insertCharactersAtPosition = (string, character, position) => {
81-
return [
82-
string.slice(0, position),
83-
character,
84-
string.slice(position)
85-
].join("");
86-
}
87-
88-
// Configuration object for the text editor.
89-
window.editorConfig = () => {
90-
return {
91-
styles: {
92-
header: {
93-
before: "### ",
94-
class: {
95-
"fa-header": true
96-
}
97-
},
98-
bold: {
99-
before: "**",
100-
after: "**",
101-
class: {
102-
"fa-bold": true
103-
}
104-
},
105-
italic: {
106-
before: "_",
107-
after: "_",
108-
class: {
109-
"fa-italic": true
110-
}
111-
},
112-
quote: {
113-
before: "> ",
114-
class: {
115-
"fa-quote-left": true
116-
}
117-
},
118-
code: {
119-
before: "`",
120-
after: "`",
121-
class: {
122-
"fa-code": true
123-
}
124-
},
125-
link: {
126-
before: "[](",
127-
after: ")",
128-
class: {
129-
"fa-link": true
130-
}
131-
},
132-
image: {
133-
before: "![](",
134-
after: ")",
135-
class: {
136-
"fa-file-image-o": true
137-
}
138-
}
139-
}
140-
}
14145
}

‎resources/views/_partials/_editor.blade.php‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div x-data="editorConfig()">
1+
<div x-data="editorConfig()" x-init="minHeight = $refs.editor.scrollHeight">
22
<div class="border-2 border-b-0 rounded-t p-2 bg-gray-200">
33
<ul>
44
<li>
@@ -18,8 +18,10 @@ class="text-gray-600 mr-4 cursor-pointer"
1818
</ul>
1919
</div>
2020
<textarea
21+
@keyup="expand(event, minHeight)"
22+
x-ref="editor"
2123
name="body"
2224
id="body"
23-
class="editor rounded-t-none resize-none h-40"
25+
class="editor rounded-t-none resize-none h-40 focus:outline-none"
2426
>{{ old('body') ?: $content }}</textarea>
2527
</div>

0 commit comments

Comments
 (0)