Skip to content

Commit dfbaa5b

Browse files
qaiswardagqaiswardag
committed
Add save button
1 parent 1cf44eb commit dfbaa5b

File tree

1 file changed

+147
-110
lines changed

1 file changed

+147
-110
lines changed

‎resources/js/Components/TipTap/TipTapInput.vue

Lines changed: 147 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -221,118 +221,155 @@ onMounted(() => {
221221
<div v-if="pageBuilder.selectedElementIsValidText() && editor">
222222
<div class="relative rounded-lg">
223223
<div
224-
class="flex items-center justify-left divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-200"
224+
class="flex justify-between myPrimaryGap items-center divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-20"
225225
>
226-
<div class="px-2 flex items-center justify-start gap-2">
227-
<button
228-
@click="editor.chain().focus().setHardBreak().run()"
229-
type="button"
230-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
231-
>
232-
<span class="material-symbols-outlined">
233-
keyboard_return
234-
</span>
235-
<span>Line break</span>
236-
</button>
226+
<div class="flex items-center 0">
227+
<div class="px-2 flex items-center justify-start gap-2">
228+
<button
229+
@click="
230+
editor.chain().focus().setHardBreak().run()
231+
"
232+
type="button"
233+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
234+
>
235+
<span class="material-symbols-outlined">
236+
keyboard_return
237+
</span>
238+
<span>Line break</span>
239+
</button>
240+
</div>
241+
242+
<div class="px-2 flex items-center justify-start gap-2">
243+
<button
244+
@click="
245+
editor.chain().focus().toggleBold().run()
246+
"
247+
type="button"
248+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
249+
:class="{
250+
'bg-myPrimaryLinkColor text-white':
251+
editor.isActive('bold'),
252+
}"
253+
>
254+
<span class="material-symbols-outlined">
255+
format_bold
256+
</span>
257+
<span>Bold</span>
258+
</button>
259+
</div>
260+
261+
<div class="px-2 flex items-center justify-start gap-2">
262+
<button
263+
@click="handleURL"
264+
type="button"
265+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
266+
:class="{
267+
'bg-myPrimaryLinkColor text-white':
268+
editor.isActive('link'),
269+
}"
270+
>
271+
<span class="material-symbols-outlined">
272+
link
273+
</span>
274+
<span>Link</span>
275+
</button>
276+
</div>
277+
278+
<div class="px-2 flex items-center justify-start gap-2">
279+
<button
280+
@click="
281+
editor
282+
.chain()
283+
.focus()
284+
.toggleHeading({ level: 2 })
285+
.run()
286+
"
287+
type="button"
288+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
289+
:class="{
290+
'bg-myPrimaryLinkColor text-white':
291+
editor.isActive('heading', {
292+
level: 2,
293+
}),
294+
}"
295+
>
296+
<span class="material-symbols-outlined">
297+
titlecase
298+
</span>
299+
<span>Header 2</span>
300+
</button>
301+
</div>
302+
303+
<div class="px-2 flex items-center justify-start gap-2">
304+
<button
305+
@click="
306+
editor
307+
.chain()
308+
.focus()
309+
.toggleHeading({ level: 3 })
310+
.run()
311+
"
312+
type="button"
313+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
314+
:class="{
315+
'bg-myPrimaryLinkColor text-white':
316+
editor.isActive('heading', {
317+
level: 3,
318+
}),
319+
}"
320+
>
321+
<span class="material-symbols-outlined">
322+
titlecase
323+
</span>
324+
<span>Header 3</span>
325+
</button>
326+
</div>
327+
328+
<div class="px-2 flex items-center justify-start gap-2">
329+
<button
330+
@click="
331+
editor
332+
.chain()
333+
.focus()
334+
.toggleBulletList()
335+
.run()
336+
"
337+
type="button"
338+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
339+
:class="{
340+
'bg-myPrimaryLinkColor text-white':
341+
editor.isActive('bulletList'),
342+
}"
343+
>
344+
<span class="material-symbols-outlined">
345+
list
346+
</span>
347+
<span>List</span>
348+
</button>
349+
</div>
237350
</div>
238-
239-
<div class="px-2 flex items-center justify-start gap-2">
240-
<button
241-
@click="editor.chain().focus().toggleBold().run()"
242-
type="button"
243-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
244-
:class="{
245-
'bg-myPrimaryLinkColor text-white':
246-
editor.isActive('bold'),
247-
}"
248-
>
249-
<span class="material-symbols-outlined">
250-
format_bold
251-
</span>
252-
<span>Bold</span>
253-
</button>
254-
</div>
255-
256-
<div class="px-2 flex items-center justify-start gap-2">
257-
<button
258-
@click="handleURL"
259-
type="button"
260-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
261-
:class="{
262-
'bg-myPrimaryLinkColor text-white':
263-
editor.isActive('link'),
264-
}"
265-
>
266-
<span class="material-symbols-outlined">
267-
link
268-
</span>
269-
<span>Link</span>
270-
</button>
271-
</div>
272-
273-
<div class="px-2 flex items-center justify-start gap-2">
274-
<button
275-
@click="
276-
editor
277-
.chain()
278-
.focus()
279-
.toggleHeading({ level: 2 })
280-
.run()
281-
"
282-
type="button"
283-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
284-
:class="{
285-
'bg-myPrimaryLinkColor text-white':
286-
editor.isActive('heading', { level: 2 }),
287-
}"
288-
>
289-
<span class="material-symbols-outlined">
290-
titlecase
291-
</span>
292-
<span>Header 2</span>
293-
</button>
294-
</div>
295-
296-
<div class="px-2 flex items-center justify-start gap-2">
297-
<button
298-
@click="
299-
editor
300-
.chain()
301-
.focus()
302-
.toggleHeading({ level: 3 })
303-
.run()
304-
"
305-
type="button"
306-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
307-
:class="{
308-
'bg-myPrimaryLinkColor text-white':
309-
editor.isActive('heading', { level: 3 }),
310-
}"
311-
>
312-
<span class="material-symbols-outlined">
313-
titlecase
314-
</span>
315-
<span>Header 3</span>
316-
</button>
317-
</div>
318-
319-
<div class="px-2 flex items-center justify-start gap-2">
320-
<button
321-
@click="
322-
editor.chain().focus().toggleBulletList().run()
323-
"
324-
type="button"
325-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
326-
:class="{
327-
'bg-myPrimaryLinkColor text-white':
328-
editor.isActive('bulletList'),
329-
}"
330-
>
331-
<span class="material-symbols-outlined">
332-
list
333-
</span>
334-
<span>List</span>
335-
</button>
351+
<div>
352+
<div>
353+
<div
354+
class="px-2 flex items-center justify-start gap-2"
355+
>
356+
<button
357+
@click="
358+
store.commit(
359+
'pageBuilderState/setShowModalTipTap',
360+
false
361+
)
362+
"
363+
type="button"
364+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
365+
>
366+
<span class="material-symbols-outlined">
367+
Save
368+
</span>
369+
<span>Save</span>
370+
</button>
371+
</div>
372+
</div>
336373
</div>
337374
</div>
338375

0 commit comments

Comments
 (0)