Improve editor

demo/app/Sharp/Posts/PostForm.php

@@ -72,6 +72,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                             ->setMaxFileSize(2)
                             ->setHasLegend()
                     )
+                    ->allowFullscreen()
                     ->setMaxLength(2000)
                     ->setHeight(300, 0)
             )

demo/app/Sharp/TestForm/TestForm.php

@@ -201,6 +201,7 @@ public function buildFormFields(FieldsContainer $formFields): void
 //                    ->setReadOnly()
                     ->setLocalized()
                     ->setLabel('Wysiwyg')
+                    ->allowFullscreen()
                     ->setToolbar([
                         SharpFormEditorField::B,
                         SharpFormEditorField::I,
@@ -252,6 +253,8 @@ public function buildFormFields(FieldsContainer $formFields): void
                         SharpFormEditorField::QUOTE,
                         SharpFormEditorField::CODE,
                         SharpFormEditorField::SEPARATOR,
+                        SharpFormEditorField::IFRAME,
+                        SharpFormEditorField::TABLE,
                         SharpFormEditorField::CODE_BLOCK,
                     ])
                     ->allowUploads(

package.json

@@ -39,21 +39,23 @@
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.8",
     "@inertiajs/vue3": "^2.0.2",
-    "@tiptap/core": "^2.2.2",
-    "@tiptap/extension-character-count": "^2.2.2",
-    "@tiptap/extension-code-block": "^2.2.2",
-    "@tiptap/extension-highlight": "^2.2.2",
-    "@tiptap/extension-image": "^2.2.2",
-    "@tiptap/extension-link": "^2.2.2",
-    "@tiptap/extension-placeholder": "^2.2.2",
-    "@tiptap/extension-superscript": "^2.2.2",
-    "@tiptap/extension-table": "^2.2.2",
-    "@tiptap/extension-table-cell": "^2.2.2",
-    "@tiptap/extension-table-header": "^2.2.2",
-    "@tiptap/extension-table-row": "^2.2.2",
-    "@tiptap/pm": "^2.2.2",
-    "@tiptap/starter-kit": "^2.2.2",
-    "@tiptap/vue-3": "^2.2.2",
+    "@tiptap/core": "^3.3.0",
+    "@tiptap/extension-character-count": "^3.3.0",
+    "@tiptap/extension-code-block": "^3.3.0",
+    "@tiptap/extension-drag-handle-vue-3": "^3.4.1",
+    "@tiptap/extension-highlight": "^3.3.0",
+    "@tiptap/extension-image": "^3.3.0",
+    "@tiptap/extension-link": "^3.3.0",
+    "@tiptap/extension-placeholder": "^3.3.0",
+    "@tiptap/extension-superscript": "^3.3.0",
+    "@tiptap/extension-table": "^3.3.0",
+    "@tiptap/extension-table-cell": "^3.3.0",
+    "@tiptap/extension-table-header": "^3.3.0",
+    "@tiptap/extension-table-row": "^3.3.0",
+    "@tiptap/extensions": "^3.3.0",
+    "@tiptap/pm": "^3.3.0",
+    "@tiptap/starter-kit": "^3.3.0",
+    "@tiptap/vue-3": "^3.3.0",
     "@uppy/core": "^4.4.1",
     "@uppy/drop-target": "^3.1.1",
     "@uppy/thumbnail-generator": "^4.1.1",
@@ -73,14 +75,14 @@
     "flexsearch": "^0.7.43",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
-    "lucide-vue-next": "^0.511.0",
+    "lucide-vue-next": "^0.542.0",
     "nprogress": "^0.2.0",
     "qs": "^6.6.0",
     "reka-ui": "^2.5.0",
     "sortablejs": "^1.15.2",
     "tailwind-merge": "^3.3.0",
     "text-clipper": "^1.3.0",
-    "tiptap-markdown": "^0.7.3",
+    "tiptap-markdown": "^0.9.0",
     "vue": "^3.5.12",
     "vue-sonner": "^1.1.2",
     "vue3-apexcharts": "^1.8.0"

resources/css/content.css

@@ -1,40 +1,40 @@
 @layer components {
   .content {
     > :where(h1) {
-      @apply mb-3 text-xl font-semibold tracking-tight border-b pb-0.5;
+      @apply mb-[.75em] text-[1.375em]/[1.2] font-semibold tracking-tight border-b pb-[.15em];
     }
     > :where(h2) {
-      @apply mb-2 text-lg font-semibold tracking-tight;
+      @apply mb-[.5em] text-[1.25em]/[1.2] font-semibold tracking-tight;
     }
     > :where(h3) {
-      @apply mb-1.5 text-sm font-semibold tracking-tight;
+      @apply mb-[.5em] text-[1em]/[1.2] font-semibold tracking-tight;
     }
     > :where(h4, h5, h6) {
-      @apply mb-1 font-semibold;
+      @apply mb-[.5em] text-[1em]/[1.2] font-semibold;
     }
     > :where(p) {
-      @apply mb-4;
+      @apply mb-[1.25em];
     }
     > :where(ul) {
-      @apply mb-4 ml-6 list-disc;
+      @apply mb-[1.25em] pl-[1.75em] list-disc;
       > :where(li) {
-        @apply mb-2;
+        @apply mb-[.5em];
       }
       > :where(:last-child) {
         @apply mb-0;
       }
     }
     > :where(ol) {
-      @apply mb-4 ml-6 list-decimal;
+      @apply mb-[1.25em] pl-[1.75em] list-decimal;
       > :where(li) {
-        @apply mb-2;
+        @apply mb-[.5em];
       }
       > :where(:last-child) {
         @apply mb-0;
       }
     }
     > :where(blockquote) {
-      @apply mb-4 relative flow-root pl-4 border-l-2 before:block before:-mt-0.5;
+      @apply mb-[1.25em] relative flow-root pl-[1.125em] border-l-2 before:block before:-mt-[.2lh] after:block after:-mb-[.2lh];
       > :where(p,ul,ol) {
         @apply mt-2;
       }
@@ -46,28 +46,28 @@
       }
     }
     > :where(table) {
-      @apply mb-4 w-full;
+      @apply mb-[1.25em] w-full;
       :where(tr) {
         @apply m-0 border-t p-0 even:bg-muted;
       }
       :where(th) {
-        @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
+        @apply border px-[1.125em] py-[.625em] text-left font-[650] [&[align=center]]:text-center [&[align=right]]:text-right;
       }
       :where(td) {
-        @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
+        @apply border px-[1.125em] py-[.625em] text-left [&[align=center]]:text-center [&[align=right]]:text-right;
       }
     }
     :where(code) {
       @apply rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
     }
     > :where(pre) {
-      @apply mb-4 !whitespace-pre overflow-x-auto;
+      @apply mb-[1.25em] !whitespace-pre overflow-x-auto;
       > :where(code) {
-          @apply block py-2 px-4 bg-muted rounded-md [font-size:inherit];
+          @apply block py-[.625em] px-[1.125em] bg-muted rounded-md [font-size:inherit];
       }
     }
     > :where(hr) {
-      @apply mb-4;
+      @apply mb-[1.25em];
     }
     :where(a:not([style],[class])) {
       @apply relative p-1.5 -m-1.5 text-primary underline underline-offset-4 decoration-primary/20 hover:decoration-inherit;
@@ -76,10 +76,21 @@
       @apply font-[650];
     }
     > :where(:first-child) {
-      @apply mt-0;
+      @apply mt-0!;
     }
     > :where(:last-child) {
-      @apply mb-0;
+      @apply mb-0!;
+    }
+  }
+  .content-lg {
+    > :where(h1) {
+      @apply mt-[1em] text-[1.75em]/[1.2];
+    }
+    > :where(h2) {
+      @apply mt-[1.25em] text-[1.5em]/[1.2];
+    }
+    > :where(h3) {
+      @apply mt-[1em] text-[1.25em]/[1.2];
     }
   }
   .content-sm {

resources/js/components/LocaleSelectTrigger.vue

@@ -2,11 +2,20 @@
     import { Languages } from "lucide-vue-next";
     import { SelectTrigger, SelectValue } from "@/components/ui/select/index.js";
     import { __ } from "@/utils/i18n";
+
+    defineProps<{
+        errorCount?: number,
+    }>();
 </script>
 
 <template>
-    <SelectTrigger class="w-auto h-8" :aria-label="$attrs['aria-label'] ?? __('sharp::action_bar.locale_selector.label')">
+    <SelectTrigger class="w-auto gap-0 h-8" :aria-label="$attrs['aria-label'] ?? __('sharp::action_bar.locale_selector.label')">
         <Languages class="size-3 mr-2.5 opacity-50" />
         <SelectValue class="uppercase text-xs" placeholder="-" />
+        <template v-if="errorCount">
+            <div class="ml-1.5 -mr-0.5 grid place-content-center text-[.625rem]/2.5 px-1 h-3.5 min-w-3.5 bg-destructive rounded-full text-destructive-foreground font-semibold">
+                {{ errorCount }}
+            </div>
+        </template>
     </SelectTrigger>
 </template>

resources/js/components/ui/command/CommandItem.vue

@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    :class="cn('relative flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
     v-scroll-into-view-override
     v-disable-first-focus
     ref="el"

resources/js/components/ui/dialog/DialogContent.vue

@@ -12,7 +12,7 @@ import {
 import { X } from 'lucide-vue-next'
 import { cn } from '@/utils/cn'
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'], closeButton?:boolean }>()
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
@@ -21,13 +21,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       v-bind="forwarded"

resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -9,6 +9,7 @@ import {
 } from 'reka-ui'
 import { cn } from '@/utils/cn'
 import { useMenuBoundaryElement } from "@/Layouts/Layout.vue";
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
@@ -27,10 +28,11 @@ const delegatedProps = computed(() => {
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const menuBoundary = useMenuBoundaryElement();
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <DropdownMenuPortal>
+  <DropdownMenuPortal :to="parentDialogElement ?? undefined">
     <DropdownMenuContent
       v-bind="forwarded"
       :collision-boundary="typeof props.collisionBoundary === 'undefined' ? menuBoundary : props.collisionBoundary"

resources/js/components/ui/popover/PopoverContent.vue

@@ -9,6 +9,7 @@ import {
     useForwardPropsEmits,
 } from 'reka-ui'
 import { cn } from '@/utils/cn'
+    import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
@@ -30,21 +31,12 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const dialogContext = injectDialogRootContext(null);
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
-const parentDialogElement = ref<HTMLElement>();
-
-onMounted(() => {
-    if(dialogContext) {
-        nextTick(() => {
-            parentDialogElement.value = dialogContext.contentElement.value.parentElement;
-        });
-    }
-});
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <PopoverPortal :to="parentDialogElement">
+  <PopoverPortal :to="parentDialogElement ?? undefined">
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="

resources/js/components/ui/select/SelectContent.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
 import {
-  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
 } from 'reka-ui'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/utils/cn'
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
@@ -29,11 +30,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <SelectPortal>
+  <SelectPortal :to="parentDialogElement ?? undefined">
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
         'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

resources/js/components/ui/tooltip/TooltipContent.vue

@@ -2,6 +2,7 @@
 import { type HTMLAttributes, computed } from 'vue'
 import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/utils/cn'
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
@@ -20,10 +21,11 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <TooltipPortal>
+  <TooltipPortal :to="parentDialogElement ?? undefined">
     <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden max-w-sm rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
       <slot />
     </TooltipContent>

resources/js/composables/useParentDialogElement.ts

@@ -0,0 +1,19 @@
+import { computed, nextTick, onMounted, ref } from "vue";
+import { injectDialogRootContext } from "reka-ui";
+
+
+
+/**
+ * Ensure that poppers + dialogs are a child of another parent dialog element for correct positioning / z-index
+ */
+export function useParentDialogElement() {
+    const rekaDialogContext = injectDialogRootContext(null);
+    const rekaDialogElement = ref<HTMLElement | undefined>();
+
+    onMounted(async () => {
+        await nextTick();
+        rekaDialogElement.value = rekaDialogContext?.contentElement.value?.parentElement;
+    });
+
+    return computed(() => rekaDialogElement.value);
+}