Skip to content

Commit 82eb264

Browse files
bernardoazevedobernardoazevedo
committed
inserindo botões para ajudar a formatar arquivos markdown
1 parent f8c5003 commit 82eb264

File tree

5 files changed

+202
-33
lines changed

5 files changed

+202
-33
lines changed

‎public/assets/css/app.css‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -97,28 +97,6 @@
9797
font-size: 14px;
9898
}
9999

100-
.list-content h1 {
101-
font-size: 34px;
102-
font-weight: bold;
103-
margin-top: 20px;
104-
}
105-
106-
.list-content ul {
107-
list-style-type: circle;
108-
list-style-position: inside;
109-
margin: 2px 0px;
110-
font-size: 18px;
111-
font-weight: 600;
112-
}
113-
114-
.list-content a:hover {
115-
color: var(--highlightColor0);
116-
}
117-
118-
.list-content a:active {
119-
color: var(--highlightColor1);
120-
}
121-
122100
table {
123101
table-layout: fixed;
124102
width: 100%;

‎public/assets/js/script.js‎

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,114 @@ $(document).ready(function(){
9595
tempTextarea.val(textToCopy).select();
9696
document.execCommand('copy');
9797
tempTextarea.remove();
98-
});
98+
});
99+
100+
let insertTextInTextarea = function(newText){
101+
event.preventDefault();
102+
let textarea = $('#text');
103+
let text = textarea.val();
104+
textarea.val(text+newText);
105+
parseMarkdown();
106+
}
107+
108+
$('.insert-link').click(function(){
109+
let newText = `
110+
[Link Example](https://md2pdf.lat)
111+
`;
112+
insertTextInTextarea(newText);
113+
});
114+
115+
$('.insert-table').click(function(){
116+
let newText = `
117+
| Column 1 | Column 2 |
118+
| -------- | -------- |
119+
| Cel1 | Cel1 |
120+
| Cel3 | Cel4 |
121+
| Cel5 | Cel6 |
122+
`;
123+
insertTextInTextarea(newText);
124+
});
125+
126+
$('.insert-codeblock').click(function(){
127+
let newText = `
128+
\`\`\`
129+
while(true){
130+
echo "codeblock here";
131+
}
132+
\`\`\`
133+
`;
134+
insertTextInTextarea(newText);
135+
});
136+
137+
$('.insert-list').click(function(){
138+
let newText = `
139+
- First item
140+
- Second item
141+
`;
142+
insertTextInTextarea(newText);
143+
});
144+
145+
$('.insert-numberedList').click(function(){
146+
let newText = `
147+
1. Item
148+
2. Item
149+
`;
150+
insertTextInTextarea(newText);
151+
});
152+
153+
$('.insert-h1').click(function(){
154+
let newText = `
155+
# Header 1
156+
`;
157+
insertTextInTextarea(newText);
158+
});
159+
160+
$('.insert-h2').click(function(){
161+
let newText = `
162+
## Header 2
163+
`;
164+
insertTextInTextarea(newText);
165+
});
166+
167+
$('.insert-h3').click(function(){
168+
let newText = `
169+
### Header 3
170+
`;
171+
insertTextInTextarea(newText);
172+
});
173+
174+
$('.insert-blockquote').click(function(){
175+
let newText = `
176+
> Imagine a beautiful quote here...
177+
`;
178+
insertTextInTextarea(newText);
179+
});
180+
181+
$('.insert-bold').click(function(){
182+
let newText = `
183+
**bold text**
184+
`;
185+
insertTextInTextarea(newText);
186+
});
187+
188+
$('.insert-italic').click(function(){
189+
let newText = `
190+
*italic text*
191+
`;
192+
insertTextInTextarea(newText);
193+
});
194+
195+
$('.insert-image').click(function(){
196+
let newText = `
197+
![Alternate text for the image here](https://images.pexels.com/photos/31356866/pexels-photo-31356866/free-photo-of-majestic-view-of-snow-capped-mount-fuji.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
198+
`;
199+
insertTextInTextarea(newText);
200+
});
201+
202+
$('.insert-horizontalRule').click(function(){
203+
let newText = `
204+
---
205+
`;
206+
insertTextInTextarea(newText);
207+
});
99208
});

‎resources/views/components/copy-button.blade.php‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
@props(['value'])
22

3-
<button {{ $attributes->merge(['class' => "copy-button cursor-pointer inline-flex items-center px-1 py-1 bg-white border border-stone-300 rounded-md font-semibold
4-
text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-emerald-500
5-
focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150"])
6-
}}>
3+
<x-secondary-button class="copy-button px-1 py-1">
74
<input type="hidden" name="elementToCopy" value="{{ $value ?? '' }}">
85
{{ $slot }}
9-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
6+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
107
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
118
</svg>
12-
</button>
9+
</x-secondary-button>
1310

‎resources/views/components/secondary-button.blade.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-white border border-stone-300 rounded-md font-semibold text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150']) }}>
1+
<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center bg-white border border-stone-300 rounded-md font-semibold
2+
text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-emerald-500
3+
focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150']) }}>
24
{{ $slot }}
35
</button>
6+

‎resources/views/content/partials/style-editor.blade.php‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<x-section class="col-span-5 order-3 lg:col-span-1 lg:order-1">
22
<header class="text-lg font-medium px-4 py-2">Edit your content style</header>
33

4-
<div class="flex sm:w-auto p-4 gap-3 flex-wrap">
4+
<div class="flex sm:w-auto p-4 gap-3 flex-wrap items-end">
55
<div class="flex flex-col flex-grow">
66
<x-color-input-label for="textColor" class="truncate">Text Color</x-color-input-label>
77
<x-color-input name="textColor" id="textColor" value="#374151"></x-color-input>
@@ -16,11 +16,93 @@
1616
</div>
1717
<div class="flex flex-col flex-grow">
1818
<x-input-label for="titleMargin" class="truncate">Title Margin</x-input-label>
19-
<x-text-input name="titleMargin" id="titleMargin" placeholder="4px" type="number"></x-text-input>
19+
<x-text-input name="titleMargin" id="titleMargin" placeholder="4" type="number"></x-text-input>
2020
</div>
2121
<div class="flex flex-col flex-grow">
2222
<x-input-label for="marginHeight" class="truncate">Margin Between Elements</x-input-label>
23-
<x-text-input name="marginHeight" id="marginHeight" placeholder="4px" type="number"></x-text-input>
23+
<x-text-input name="marginHeight" id="marginHeight" placeholder="4" type="number"></x-text-input>
2424
</div>
2525
</div>
26+
27+
28+
<div class="flex sm:w-auto p-4 gap-3 flex-wrap items-end justify-center">
29+
<x-secondary-button class="insert-h1 px-2 py-2 max-h-min">
30+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
31+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" />
32+
</svg>
33+
</x-secondary-button>
34+
35+
<x-secondary-button class="insert-h2 px-2 py-2 max-h-min">
36+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
37+
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
38+
</svg>
39+
</x-secondary-button>
40+
41+
<x-secondary-button class="insert-h3 px-2 py-2 max-h-min">
42+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
43+
<path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
44+
</svg>
45+
</x-secondary-button>
46+
47+
<x-secondary-button class="insert-link px-2 py-2 max-h-min">
48+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
50+
</svg>
51+
</x-secondary-button>
52+
53+
<x-secondary-button class="insert-table px-2 py-2 max-h-min">
54+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
55+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" />
56+
</svg>
57+
</x-secondary-button>
58+
59+
<x-secondary-button class="insert-codeblock px-2 py-2 max-h-min">
60+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
61+
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
62+
</svg>
63+
</x-secondary-button>
64+
65+
<x-secondary-button class="insert-list px-2 py-2 max-h-min">
66+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
67+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
68+
</svg>
69+
</x-secondary-button>
70+
71+
<x-secondary-button class="insert-numberedList px-2 py-2 max-h-min">
72+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
73+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
74+
</svg>
75+
</x-secondary-button>
76+
77+
<x-secondary-button class="insert-blockquote px-2 py-2 max-h-min">
78+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
79+
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
80+
</svg>
81+
</x-secondary-button>
82+
83+
<x-secondary-button class="insert-bold px-2 py-2 max-h-min">
84+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
85+
<path stroke-linejoin="round" d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z" />
86+
</svg>
87+
</x-secondary-button>
88+
89+
90+
<x-secondary-button class="insert-italic px-2 py-2 max-h-min">
91+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
92+
<path stroke-linecap="round" stroke-linejoin="round" d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803" />
93+
</svg>
94+
</x-secondary-button>
95+
96+
<x-secondary-button class="insert-image px-2 py-2 max-h-min">
97+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
98+
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
99+
</svg>
100+
</x-secondary-button>
101+
102+
<x-secondary-button class="insert-horizontalRule px-2 py-2 max-h-min">
103+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
104+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
105+
</svg>
106+
</x-secondary-button>
107+
</div>
26108
</x-section>

0 commit comments

Comments
 (0)