Skip to content

Commit ab21a79

Browse files
aguingandaguingand
committed
Footnote improvements
1 parent 318cff2 commit ab21a79

7 files changed

Lines changed: 41 additions & 22 deletions

File tree

‎resources/js/form/components/fields/editor/Editor.vue‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
getTextInputReplacementsExtension
6363
} from "@/form/components/fields/editor/extensions/TextInputReplacements";
6464
import CodeBlockDropdown from "@/form/components/fields/editor/toolbar/CodeBlockDropdown.vue";
65+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
6566
6667
const emit = defineEmits<FormFieldEmits<FormEditorFieldData>>();
6768
const props = defineProps<FormFieldProps<FormEditorFieldData>>();
@@ -189,11 +190,6 @@
189190
}
190191
);
191192
192-
declare module '@tiptap/core' {
193-
interface Storage {
194-
scrollYPercentage: number;
195-
}
196-
}
197193
198194
const isFullscreen = ref(false);
199195
const fullscreenPlaceholderHeight = ref(0);
@@ -303,17 +299,29 @@
303299
<Separator orientation="vertical" class="h-4 self-center last:hidden" />
304300
</template>
305301
<template v-else :key="button">
306-
<Toggle
307-
size="sm"
308-
:model-value="buttons[button].isActive(editor)"
309-
:disabled="field.readOnly"
310-
:title="buttons[button].label()"
311-
@click="button === 'upload' || button === 'upload-image'
312-
? uploadModal.open({ locale: props.locale })
313-
: buttons[button].command(editor)"
314-
>
315-
<component :is="buttons[button].icon" class="size-4" />
316-
</Toggle>
302+
<TooltipProvider>
303+
<Tooltip :disabled="!buttons[button].tooltip" :delay-duration="0" disable-hoverable-content>
304+
<TooltipTrigger as-child>
305+
<Toggle
306+
size="sm"
307+
:model-value="buttons[button].isActive(editor)"
308+
:disabled="field.readOnly"
309+
:title="!buttons[button].tooltip ? buttons[button].label() : null"
310+
@click="button === 'upload' || button === 'upload-image'
311+
? uploadModal.open({ locale: props.locale })
312+
: buttons[button].command(editor)"
313+
>
314+
<component :is="buttons[button].icon" class="size-4" />
315+
</Toggle>
316+
</TooltipTrigger>
317+
<template v-if="buttons[button].tooltip">
318+
<TooltipContent side="top" :side-offset="10">
319+
<h4 class="font-medium">{{ buttons[button].label() }}</h4>
320+
<div v-html="buttons[button].tooltip()"></div>
321+
</TooltipContent>
322+
</template>
323+
</Tooltip>
324+
</TooltipProvider>
317325
</template>
318326
</template>
319327
<template v-if="dropdownEmbeds.length > 0">
@@ -419,7 +427,8 @@
419427
'group/editor content w-full rounded-b-md focus:outline-none px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
420428
'[&_.selection-highlight]:bg-[Highlight] [&_.selection-highlight]:py-0.5',
421429
'[&_.ProseMirror-selectednode]:outline-none! [&:focus_.ProseMirror-selectednode]:ring-1 [&_.ProseMirror-selectednode]:ring-primary',
422-
`[&_.footnotes]:before:content-(--footnote-title) [&_.footnotes]:before:text-xs [&_.footnotes]:before:text-muted-foreground [&_.footnotes]:before:block [&_.footnotes]:before:ml-[-1.75em] [&_.footnotes]:before:mb-2 [&_.footnotes]:-mx-3 [&_.footnotes]:pt-2 [&_.footnotes]:pb-2 [&_.footnotes]:pr-3 [&_.footnotes]:pl-[calc(.75rem+1.75em)] [&_.footnotes>li]:relative [&_.footnotes>li]:pl-[1.25em] [&_.footnotes]:border-t [&_.footnote-ref]:underline [&_.footnote-ref]:underline-offset-4 [&_.footnote-ref]:decoration-foreground/20 [&_.footnote-ref]:hover:decoration-foreground [&_.footnote-ref]:before:content-['['] [&_.footnote-ref]:after:content-[']']`,
430+
`[&_.footnotes]:before:content-(--footnote-title) [&_.footnotes]:before:text-xs [&_.footnotes]:before:text-muted-foreground [&_.footnotes]:before:block [&_.footnotes]:before:ml-[-1.75em] [&_.footnotes]:before:mb-2 [&_.footnotes]:-mx-3 [&_.footnotes]:pt-2 [&_.footnotes]:pb-2 [&_.footnotes]:pr-3 [&_.footnotes]:pl-[calc(.75rem+1.75em)] [&_.footnotes>li]:relative [&_.footnotes>li]:pl-[1.25em] [&_.footnotes]:border-t`,
431+
` [&_.footnote-ref]:cursor-pointer [&_.footnote-ref]:underline [&_.footnote-ref]:underline-offset-4 [&_.footnote-ref]:decoration-foreground/20 [&_.footnote-ref]:hover:decoration-foreground [&_.footnote-ref]:p-1 [&_.footnote-ref]:-m-1 [&_.footnote-ref]:before:content-['['] [&_.footnote-ref]:after:content-[']']`,
423432
{
424433
'content-lg max-w-3xl mx-auto py-6 px-4 sm:px-6 text-base min-h-max': isFullscreen,
425434
},

‎resources/js/form/components/fields/editor/EditorAttributes.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
2-
import { Editor } from "@tiptap/vue-3";
3-
import { StyleValue, useAttrs, watchEffect } from "vue";
4-
import { normalizeStyle, stringifyStyle } from "@vue/shared";
2+
import { Editor } from '@tiptap/core';
3+
import { StyleValue, useAttrs, watchEffect } from 'vue';
4+
import { normalizeStyle, stringifyStyle } from '@vue/shared';
55
66
const props = defineProps<{
77
editor: Editor,

‎resources/js/form/components/fields/editor/extensions/Footnotes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const Footnotes = Extension.create({
2727
const a = document.createElement('a');
2828
a.href = `#fnref:${refId}`;
2929
a.draggable = false;
30-
a.className = 'underline underline-offset-4 decoration-foreground/20 hover:decoration-foreground select-none';
30+
a.className = 'underline p-1 -m-1 underline-offset-4 decoration-foreground/20 hover:decoration-foreground select-none';
3131
a.textContent = '[^]';
3232
sup.className = 'footnote-backref absolute left-[.125em] top-1.5'
3333
sup.appendChild(a);
@@ -66,7 +66,7 @@ export const Footnotes = Extension.create({
6666
)
6767
.run();
6868

69-
matchedFootnote.element.scrollIntoView({ block: 'end' });
69+
matchedFootnote.element.scrollIntoView({ block: 'nearest' });
7070
return true;
7171
}
7272
return false;

‎resources/js/form/components/fields/editor/toolbar/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ type ButtonConfig = {
2525
isActive?: (editor: Editor) => boolean,
2626
icon: Component,
2727
label?: () => string,
28+
tooltip?: () => string,
2829
}
2930

3031
export const buttons: { [key in Exclude<FormEditorToolbarButton, '|' | 'link' | 'table'>]: ButtonConfig } = {
@@ -141,6 +142,7 @@ export const buttons: { [key in Exclude<FormEditorToolbarButton, '|' | 'link' |
141142
isActive: editor => false,
142143
icon: SquareAsterisk,
143144
label: () => __('sharp::form.editor.toolbar.footnote.title'),
145+
tooltip: () => __('sharp::form.editor.toolbar.footnote.tootlip'),
144146
},
145147
'undo': {
146148
command: editor => editor.chain().undo().run(),

‎resources/js/form/components/fields/editor/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,9 @@ export type WithRequiredOptions<E extends Node> =
1515
Omit<E, 'configure'> & {
1616
configure(options: E['options']): E
1717
}
18+
19+
declare module '@tiptap/core' {
20+
interface Storage {
21+
scrollYPercentage: number;
22+
}
23+
}

‎resources/lang/en/form.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@
133133
'editor.toolbar.horizontal_rule.title' => 'Horizontal rule',
134134
'editor.toolbar.fullscreen.title' => 'Full screen',
135135
'editor.toolbar.footnote.title' => 'Footnote',
136+
'editor.toolbar.footnote.tootlip' => 'Click to insert a reference<br>Click on the reference <sup>[1]</sup> to go down to the note and edit its content<br>Click on <sup>[^]</sup> to go back up to the reference',
136137
'editor.toolbar.undo.title' => 'Undo',
137138
'editor.toolbar.redo.title' => 'Redo',
138139

‎resources/lang/fr/form.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@
136136
'editor.toolbar.horizontal_rule.title' => 'Séparateur',
137137
'editor.toolbar.fullscreen.title' => 'Plein écran',
138138
'editor.toolbar.footnote.title' => 'Note de bas de page',
139+
'editor.toolbar.footnote.tootlip' => 'Cliquez pour insérer une référence<br>Cliquez sur la référence <sup>[1]</sup> pour descendre vers la note et éditer son contenu<br>Cliquez sur <sup>[^]</sup> pour remonter vers la référence',
139140
'editor.toolbar.undo.title' => 'Annuler',
140141
'editor.toolbar.redo.title' => 'Rétablir',
141142

0 commit comments

Comments
 (0)