Still working on upgrading to Tailwind CSS v4 an dSkeleton v3.....
This commit is contained in:
@@ -43,7 +43,7 @@
|
||||
'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
|
||||
})}
|
||||
>{defaultLanguage}
|
||||
<ChevronDown class="!size-3" />
|
||||
<ChevronDown class="size-3!" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="h-60 w-40 overflow-auto" contenteditable="false">
|
||||
{#each languages as language}
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
<input
|
||||
value={node.attrs.title}
|
||||
type="text"
|
||||
class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-none"
|
||||
class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-hidden"
|
||||
onchange={(e) => {
|
||||
if (e.target === null) return;
|
||||
//@ts-ignore
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@import "tailwindcss/preflight";
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
.tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
@@ -5,7 +9,7 @@
|
||||
|
||||
.tiptap code:not(pre code) {
|
||||
/* Remove the before and after pseudo elements */
|
||||
@apply rounded border bg-muted/50 p-1 before:content-[''] after:content-[''];
|
||||
@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
|
||||
}
|
||||
|
||||
.tiptap blockquote p {
|
||||
@@ -54,7 +58,7 @@ ul[data-type='taskList'] li[data-checked='true'] div {
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
@apply size-4 cursor-pointer rounded !important;
|
||||
@apply size-4 cursor-pointer rounded-sm !important;
|
||||
}
|
||||
|
||||
ul[data-type='taskList'] ul[data-type='taskList'] {
|
||||
@@ -67,7 +71,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
|
||||
}
|
||||
|
||||
.color::before {
|
||||
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded border border-muted align-middle;
|
||||
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-muted align-middle;
|
||||
background-color: var(--color);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
onclick={() => editor.chain().focus()}
|
||||
>
|
||||
<Highlighter />
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="bg-popover shadow-lg *:my-2">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<Popover.Trigger>
|
||||
<Button variant="ghost" size="sm" class="h-8">
|
||||
<Image />
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="bg-popover shadow-lg *:my-2">
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
class={cn('h-8', editor.isActive('link') && 'bg-muted')}
|
||||
>
|
||||
<Link />
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="bg-popover shadow-lg *:my-2">
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost" size="sm" class="h-8" style={`color: ${currentColor}`}>
|
||||
A
|
||||
<ChevronDown class="!size-3" />
|
||||
<ChevronDown class="size-3!" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
|
||||
<DropdownMenu.Content class="max-h-100 w-40 overflow-auto">
|
||||
<DropdownMenu.Group>
|
||||
<span class="text-[0.75rem] font-medium text-muted-foreground">Text Color</span>
|
||||
{#each colors as color}
|
||||
@@ -56,7 +56,7 @@
|
||||
>
|
||||
<span>{color.label}</span>
|
||||
{#if editor.isActive('textStyle', { color: color.value })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
@@ -80,7 +80,7 @@
|
||||
>
|
||||
<span>{color.label}</span>
|
||||
{#if editor.isActive('highlight', { color: color.value })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
|
||||
@@ -15,10 +15,10 @@
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost" size="sm" class="h-8">
|
||||
<Table />
|
||||
<ChevronDown class="!size-3" />
|
||||
<ChevronDown class="size-3!" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
|
||||
<DropdownMenu.Content class="max-h-100 w-40 overflow-auto">
|
||||
<DropdownMenu.Item
|
||||
onclick={() =>
|
||||
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
{:else}
|
||||
<Minus />
|
||||
{/if}
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
@@ -46,7 +46,7 @@
|
||||
>
|
||||
<Heading1 /> Heading 1
|
||||
{#if editor.isActive('heading', { level: 1 })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -55,7 +55,7 @@
|
||||
>
|
||||
<Heading2 /> Heading 2
|
||||
{#if editor.isActive('heading', { level: 2 })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -64,7 +64,7 @@
|
||||
>
|
||||
<Heading3 /> Heading 3
|
||||
{#if editor.isActive('heading', { level: 3 })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -73,7 +73,7 @@
|
||||
>
|
||||
<Pilcrow /> Paragraph
|
||||
{#if editor.isActive('paragraph')}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -82,7 +82,7 @@
|
||||
>
|
||||
<FileJson /> Code Block
|
||||
{#if editor.isActive('codeBlock')}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
{:else}
|
||||
<AlignLeft />
|
||||
{/if}
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
@@ -42,7 +42,7 @@
|
||||
>
|
||||
<AlignLeft /> Align Left
|
||||
{#if editor.isActive({ textAlign: 'left' })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -51,7 +51,7 @@
|
||||
>
|
||||
<AlignCenter /> Align Center
|
||||
{#if editor.isActive({ textAlign: 'center' })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -60,7 +60,7 @@
|
||||
>
|
||||
<AlignRight /> Align Right
|
||||
{#if editor.isActive({ textAlign: 'right' })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
@@ -69,7 +69,7 @@
|
||||
>
|
||||
<AlignJustify /> Align Justify
|
||||
{#if editor.isActive({ textAlign: 'justify' })}
|
||||
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
||||
<Check class="absolute right-2 size-3! text-muted-foreground" />
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
onclick={() => editor.chain().focus()}
|
||||
>
|
||||
<Baseline />
|
||||
<ChevronDown class="!size-3 text-muted-foreground" />
|
||||
<ChevronDown class="size-3! text-muted-foreground" />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="bg-popover shadow-lg *:my-2">
|
||||
|
||||
@@ -68,7 +68,7 @@ onMount(() => {
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
'm-auto p-2 focus:outline-none flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
|
||||
'm-auto p-2 focus:outline-hidden flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
|
||||
}
|
||||
},
|
||||
extensions: [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
bind:checked
|
||||
bind:indeterminate
|
||||
class={cn(
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
bind:ref
|
||||
{sideOffset}
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
|
||||
"bg-popover text-popover-foreground 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 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<DropdownMenuPrimitive.Item
|
||||
bind:ref
|
||||
class={cn(
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
bind:ref
|
||||
class={cn(
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
bind:ref
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
|
||||
"bg-popover text-popover-foreground z-50 min-w-32 rounded-md border p-1 shadow-lg focus:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
bind:ref
|
||||
class={cn(
|
||||
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<input
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
{sideOffset}
|
||||
{align}
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
|
||||
"bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
bind:ref
|
||||
class={cn(
|
||||
"bg-border shrink-0",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
|
||||
orientation === "horizontal" ? "h-px w-full" : "min-h-full w-px",
|
||||
className
|
||||
)}
|
||||
{orientation}
|
||||
|
||||
Reference in New Issue
Block a user