fuma 0.5.0 → 1.0.0

package/dist/ui/input/textRich/ToolMarkLink.svelte

@@ -1,41 +1,49 @@
-<script>import { mdiLinkVariant } from "@mdi/js";
-import { Dialog } from "../../dialog/index.js";
-import { InputText } from "../index.js";
-import { z } from "../../../validation/zod.js";
-import ToolMark from "./ToolMark.svelte";
-export let editor;
-let dialogLink;
-let linkHref = "";
-let linkError = "";
-async function handleNewLink() {
-  if (!linkHref) {
-    linkError = "URL requis";
-    return;
-  }
-  const isEmail = z.string().email().safeParse(linkHref);
-  if (isEmail.success)
-    linkHref = "mailto:" + linkHref;
-  else if (!linkHref.match(/^http(s)?:\/\//)) {
-    linkHref = "https://" + linkHref;
-  }
-  const isUrl = z.string().url().safeParse(linkHref);
-  if (!isUrl.success) {
-    linkError = "URL invalide";
-    return;
-  }
-  editor.chain().focus().setLink({ href: linkHref }).run();
-  dialogLink.close();
-}
-function handleRemoveLink() {
-  editor.chain().focus().unsetLink().run();
-  dialogLink.close();
-}
-function handleKeyDown(event) {
-  if (event.key !== "Enter")
-    return;
-  event.preventDefault();
-  handleNewLink();
-}
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { mdiLinkVariant } from '@mdi/js'
+
+	import { Dialog } from '../../dialog/index.js'
+	import { InputText } from '../index.js'
+	import { z } from '../../../validation/zod.js'
+	import ToolMark from './ToolMark.svelte'
+
+	export let editor: Editor
+	let dialogLink: HTMLDialogElement
+	let linkHref = ''
+	let linkError = ''
+
+	async function handleNewLink() {
+		if (!linkHref) {
+			linkError = 'URL requis'
+			return
+		}
+
+		const isEmail = z.string().email().safeParse(linkHref)
+		if (isEmail.success) linkHref = 'mailto:' + linkHref
+		else if (!linkHref.match(/^http(s)?:\/\//)) {
+			linkHref = 'https://' + linkHref
+		}
+
+		const isUrl = z.string().url().safeParse(linkHref)
+		if (!isUrl.success) {
+			linkError = 'URL invalide'
+			return
+		}
+
+		editor.chain().focus().setLink({ href: linkHref }).run()
+		dialogLink.close()
+	}
+
+	function handleRemoveLink() {
+		editor.chain().focus().unsetLink().run()
+		dialogLink.close()
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key !== 'Enter') return
+		event.preventDefault()
+		handleNewLink()
+	}
 </script>
 
 <ToolMark

package/dist/ui/input/textRich/ToolMenu.svelte

@@ -1,22 +1,37 @@
-<script>import { mdiChevronDown } from "@mdi/js";
-import { Icon } from "../../icon/index.js";
-import { DropDown } from "../../menu/index.js";
-export let editor;
-export let tools;
-export let hideLabel = false;
-let dropdown;
-function handleClick(tool) {
-  tool.action();
-  dropdown.hide();
-}
-$:
-  toolSelected = tools.find((t) => {
-    if (t.key)
-      return editor.isActive(t.key, t.attributes);
-    if (t.attributes)
-      return editor.isActive(t.attributes);
-    return false;
-  }) || tools[0];
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { mdiChevronDown } from '@mdi/js'
+
+	import { Icon } from '../../icon/index.js'
+	import { DropDown } from '../../menu/index.js'
+
+	type Tool = {
+		key?: string
+		attributes?: {}
+		label: string
+		icon: string
+		action: () => unknown
+		newSection?: true
+		disable?: boolean
+	}
+
+	export let editor: Editor
+	export let tools: Tool[]
+	export let hideLabel = false
+
+	let dropdown: DropDown
+
+	function handleClick(tool: Tool) {
+		tool.action()
+		dropdown.hide()
+	}
+
+	$: toolSelected =
+		tools.find((t) => {
+			if (t.key) return editor.isActive(t.key, t.attributes)
+			if (t.attributes) return editor.isActive(t.attributes)
+			return false
+		}) || tools[0]
 </script>
 
 <DropDown hideOnBlur bind:this={dropdown}>

package/dist/ui/input/textRich/ToolMenuAlign.svelte

@@ -1,12 +1,16 @@
-<script>import {
-  mdiAlignHorizontalLeft,
-  mdiAlignHorizontalCenter,
-  mdiAlignHorizontalRight,
-  mdiFormatIndentIncrease,
-  mdiFormatIndentDecrease
-} from "@mdi/js";
-import ToolMenu from "./ToolMenu.svelte";
-export let editor;
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import {
+		mdiAlignHorizontalLeft,
+		mdiAlignHorizontalCenter,
+		mdiAlignHorizontalRight,
+		mdiFormatIndentIncrease,
+		mdiFormatIndentDecrease,
+	} from '@mdi/js'
+
+	import ToolMenu from './ToolMenu.svelte'
+
+	export let editor: Editor
 </script>
 
 <ToolMenu

package/dist/ui/input/textRich/ToolMenuInsert.svelte

@@ -1,10 +1,15 @@
-<script>import { createEventDispatcher } from "svelte";
-import { mdiPlus, mdiMinus, mdiImageOutline, mdiYoutube, mdiAt } from "@mdi/js";
-import { Icon } from "../../icon/index.js";
-import ToolMenu from "./ToolMenu.svelte";
-import { suggestionItems } from "./suggestion.js";
-export let editor;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import type { Editor } from '@tiptap/core'
+	import { mdiPlus, mdiMinus, mdiImageOutline, mdiYoutube, mdiAt } from '@mdi/js'
+
+	import { Icon } from '../../icon/index.js'
+	import ToolMenu from './ToolMenu.svelte'
+	import { suggestionItems } from './suggestion.js'
+
+	export let editor: Editor
+
+	const dispatch = createEventDispatcher<{ insertMedia: void }>()
 </script>
 
 <ToolMenu

package/dist/ui/input/textRich/ToolMenuNode.svelte

@@ -1,13 +1,17 @@
-<script>import {
-  mdiText,
-  mdiFormatListBulleted,
-  mdiFormatListNumbered,
-  mdiFormatHeader1,
-  mdiFormatHeader3,
-  mdiFormatHeader2
-} from "@mdi/js";
-import ToolMenu from "./ToolMenu.svelte";
-export let editor;
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import {
+		mdiText,
+		mdiFormatListBulleted,
+		mdiFormatListNumbered,
+		mdiFormatHeader1,
+		mdiFormatHeader3,
+		mdiFormatHeader2,
+	} from '@mdi/js'
+
+	import ToolMenu from './ToolMenu.svelte'
+
+	export let editor: Editor
 </script>
 
 <ToolMenu

package/dist/ui/input/textRich/ToolsBar.svelte

@@ -1,14 +1,18 @@
-<script>import { mdiFormatBold, mdiFormatColorFill, mdiFormatColorText, mdiFormatItalic } from "@mdi/js";
-import { toast } from "svelte-sonner";
-import ToolMenuNode from "./ToolMenuNode.svelte";
-import ToolMark from "./ToolMark.svelte";
-import ToolMarkColor from "./ToolMarkColor.svelte";
-import ToolMarkLink from "./ToolMarkLink.svelte";
-import ToolMenuAlign from "./ToolMenuAlign.svelte";
-import ToolMenuInsert from "./ToolMenuInsert.svelte";
-export let editor;
-let klass = "";
-export { klass as class };
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { mdiFormatBold, mdiFormatColorFill, mdiFormatColorText, mdiFormatItalic } from '@mdi/js'
+	import { toast } from 'svelte-sonner'
+
+	import ToolMenuNode from './ToolMenuNode.svelte'
+	import ToolMark from './ToolMark.svelte'
+	import ToolMarkColor from './ToolMarkColor.svelte'
+	import ToolMarkLink from './ToolMarkLink.svelte'
+	import ToolMenuAlign from './ToolMenuAlign.svelte'
+	import ToolMenuInsert from './ToolMenuInsert.svelte'
+
+	export let editor: Editor
+	let klass = ''
+	export { klass as class }
 </script>
 
 <div
@@ -20,7 +24,7 @@ export { klass as class };
 	<div class="flex overflow-x-auto p-2">
 		<ToolMenuNode {editor} />
 		<ToolMenuAlign {editor} />
-		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0" />
+		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0"></div>
 
 		<ToolMark
 			{editor}
@@ -50,7 +54,7 @@ export { klass as class };
 			setColor={(color) => editor.commands.setHighlight({ color })}
 		/>
 
-		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0" />
+		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0"></div>
 
 		<ToolMenuInsert
 			{editor}

package/dist/ui/login/Login.svelte

@@ -1,33 +1,39 @@
-<script>import { slide } from "svelte/transition";
-import { page } from "$app/stores";
-import { InputText, InputPassword } from "../input/index.js";
-import { useForm } from "../../validation/form.js";
-export let onSuccess = void 0;
-const { enhance } = useForm({
-  onSuccess,
-  successMessage(action) {
-    if (action.search === "?/reset_password") {
-      recorverDialog.close();
-      state = "login";
-      return "Un lien de r\xE9cup\xE9ration t'a \xE9t\xE9 envoy\xE9 par email";
-    }
-    return "Bienvenue";
-  },
-  onError(err) {
-    if (err === "This account already exists") {
-      state = "login";
-      return;
-    }
-    if (err === "This account already created from an invitation") {
-      recorverDialog.showModal();
-      return;
-    }
-  }
-});
-let state = "login";
-$:
-  redirectTo = $page.url.searchParams.get("redirectTo");
-let recorverDialog;
+<script lang="ts">
+	import { slide } from 'svelte/transition'
+	import { page } from '$app/stores'
+	import { InputText, InputPassword } from '../input/index.js'
+	import { useForm } from '../../validation/form.js'
+
+	export let onSuccess:
+		| ((action: URL, data?: Record<string, unknown> | undefined) => any)
+		| undefined = undefined
+
+	const { enhance } = useForm({
+		onSuccess,
+		successMessage(action) {
+			if (action.search === '?/reset_password') {
+				recorverDialog.close()
+				state = 'login'
+				return "Un lien de récupération t'a été envoyé par email"
+			}
+			return 'Bienvenue'
+		},
+		onError(err) {
+			if (err === 'This account already exists') {
+				state = 'login'
+				return
+			}
+			if (err === 'This account already created from an invitation') {
+				recorverDialog.showModal()
+				return
+			}
+		}
+	})
+	let state: 'login' | 'register' = 'login'
+
+	$: redirectTo = $page.url.searchParams.get('redirectTo')
+
+	let recorverDialog: HTMLDialogElement
 </script>
 
 <div class="grid place-content-center p-10">
@@ -82,7 +88,7 @@ let recorverDialog;
 				<button class="btn" formaction="/auth?/{state}">
 					{state === 'login' ? 'Connexion' : 'Valider'}
 				</button>
-				<div class="grow" />
+				<div class="grow"></div>
 
 				<button class="link-hover link" formaction="/auth?/reset_password">
 					Mot de passe oublié

package/dist/ui/menu/ContextMenu.svelte

@@ -1,34 +1,40 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Dialog } from "../dialog/index.js";
-import { DropDown } from "./index.js";
-import { isSmallScreen } from "../../store/index.js";
-export let tippyProps = {};
-let klass = "";
-export { klass as class };
-const dispatch = createEventDispatcher();
-let dropdown;
-let dialog;
-export function show(event) {
-  if ($isSmallScreen) {
-    dialog?.showModal();
-  } else {
-    const target = event.target;
-    if (!target || !(target instanceof HTMLElement))
-      return;
-    dropdown?.setTippyProps({
-      getReferenceClientRect: () => new DOMRect(event.clientX, event.clientY)
-    });
-    dropdown?.show();
-  }
-  dispatch("show");
-}
-export function hide() {
-  if ($isSmallScreen)
-    dialog?.close();
-  else
-    dropdown?.hide();
-  dispatch("hide");
-}
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import type { TippyProps } from '../../utils/tippy.js'
+
+	import { Dialog } from '../dialog/index.js'
+	import { DropDown } from './index.js'
+	import { isSmallScreen } from '../../store/index.js'
+
+	export let tippyProps: Partial<TippyProps> = {}
+	let klass = ''
+	export { klass as class }
+
+	const dispatch = createEventDispatcher<{ show: void; hide: void }>()
+
+	let dropdown: DropDown
+	let dialog: HTMLDialogElement
+
+	export function show(event: MouseEvent) {
+		if ($isSmallScreen) {
+			dialog?.showModal()
+		} else {
+			const target = event.target as HTMLElement
+			if (!target || !(target instanceof HTMLElement)) return
+			dropdown?.setTippyProps({
+				getReferenceClientRect: () => new DOMRect(event.clientX, event.clientY)
+			})
+			dropdown?.show()
+		}
+
+		dispatch('show')
+	}
+
+	export function hide() {
+		if ($isSmallScreen) dialog?.close()
+		else dropdown?.hide()
+		dispatch('hide')
+	}
 </script>
 
 {#if $isSmallScreen}

package/dist/ui/menu/ContextMenu.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         class?: string | undefined;
         show?: ((event: MouseEvent) => void) | undefined;
         hide?: (() => void) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         show: CustomEvent<void>;

package/dist/ui/menu/DropDown.svelte

@@ -1,88 +1,97 @@
-<script context="module">import { createSingleton } from "../../utils/tippy.js";
-const sigleton = browser ? createSingleton([], {
-  theme: "dropdown",
-  arrow: false,
-  moveTransition: "transform 0.1s ease-out",
-  interactive: true,
-  interactiveDebounce: 50
-}) : null;
-const tips = [];
+<script lang="ts" context="module">
+	import { createSingleton, type TippyInstance } from '../../utils/tippy.js'
+
+	const sigleton = browser
+		? createSingleton([], {
+				theme: 'dropdown',
+				arrow: false,
+				moveTransition: 'transform 0.1s ease-out',
+				interactive: true,
+				interactiveDebounce: 50
+			})
+		: null
+
+	const tips: TippyInstance[] = []
 </script>
 
-<script>import { tippy } from "../../utils/tippy.js";
-import { onMount } from "svelte";
-import { browser } from "$app/environment";
-import { beforeNavigate } from "$app/navigation";
-import "./dropdown.css";
-export let tippyProps = {};
-let klass = "";
-export { klass as class };
-export let classWrapper = "";
-export let classActivator = "";
-export let useSingleton = false;
-export let autofocus = false;
-export let hideOnBlur = false;
-export let hideOnNav = true;
-export let tip = void 0;
-export let disable = false;
-export let content = void 0;
-let activator;
-beforeNavigate(() => hideOnNav && hide());
-onMount(() => {
-  if (disable)
-    return;
-  const triggerTarget = activator.querySelector("button, input") || activator;
-  const focusables = Array.from(
-    content.querySelectorAll(
-      "a[href], button, input, textarea, select, details, [tabindex]"
-    )
-  );
-  tip = tippy(activator, {
-    content,
-    placement: "bottom-start",
-    theme: "dropdown",
-    arrow: false,
-    triggerTarget,
-    trigger: "click focus",
-    interactive: true,
-    interactiveDebounce: 50,
-    appendTo: "parent",
-    onShown() {
-      if (autofocus)
-        focusables[0]?.select();
-    },
-    ...tippyProps
-  });
-  if (useSingleton && tip) {
-    tips.push(tip);
-    sigleton?.setInstances(tips);
-  }
-  const lastFocusable = focusables.at(-1);
-  if (hideOnBlur)
-    lastFocusable?.addEventListener("blur", hide);
-  return () => {
-    if (hideOnBlur)
-      lastFocusable?.removeEventListener("blur", hide);
-    if (useSingleton && tip) {
-      tips.splice(tips.indexOf(tip), 1);
-      tip.destroy();
-    }
-  };
-});
-export function hide() {
-  if (!tip)
-    return;
-  if (useSingleton)
-    sigleton?.hide();
-  else
-    tip.hide();
-}
-export function show() {
-  tip?.show();
-}
-export function setTippyProps(props) {
-  tip?.setProps(props);
-}
+<script lang="ts">
+	import { tippy, type TippyProps } from '../../utils/tippy.js'
+	import { onMount } from 'svelte'
+	import { browser } from '$app/environment'
+	import { beforeNavigate } from '$app/navigation'
+	import './dropdown.css'
+
+	export let tippyProps: Partial<TippyProps> = {}
+	let klass = ''
+	export { klass as class }
+	export let classWrapper = ''
+	export let classActivator = ''
+	export let useSingleton = false
+	export let autofocus = false
+	export let hideOnBlur = false
+	export let hideOnNav = true
+	export let tip: TippyInstance | undefined = undefined
+	// By pass dropdown for use in flat mode
+	export let disable = false
+	export let content: HTMLDivElement | undefined = undefined
+	let activator: HTMLDivElement
+
+	beforeNavigate(() => hideOnNav && hide())
+
+	onMount(() => {
+		if (disable) return
+
+		const triggerTarget = activator.querySelector('button, input') || activator
+		const focusables = Array.from(
+			content!.querySelectorAll<HTMLInputElement>(
+				'a[href], button, input, textarea, select, details, [tabindex]'
+			)
+		)
+		tip = tippy(activator, {
+			content,
+			placement: 'bottom-start',
+			theme: 'dropdown',
+			arrow: false,
+			triggerTarget,
+			trigger: 'click focus',
+			interactive: true,
+			interactiveDebounce: 50,
+			appendTo: 'parent',
+			onShown() {
+				if (autofocus) focusables[0]?.select()
+			},
+			...tippyProps
+		})
+
+		if (useSingleton && tip) {
+			tips.push(tip)
+			sigleton?.setInstances(tips)
+		}
+
+		const lastFocusable = focusables.at(-1)
+		if (hideOnBlur) lastFocusable?.addEventListener('blur', hide)
+
+		return () => {
+			if (hideOnBlur) lastFocusable?.removeEventListener('blur', hide)
+			if (useSingleton && tip) {
+				tips.splice(tips.indexOf(tip), 1)
+				tip.destroy()
+			}
+		}
+	})
+
+	export function hide() {
+		if (!tip) return
+		if (useSingleton) sigleton?.hide()
+		else tip.hide()
+	}
+
+	export function show() {
+		tip?.show()
+	}
+	export function setTippyProps(props: Partial<TippyProps>) {
+		tip?.setProps(props)
+	}
 </script>
 
 {#if !disable}

package/dist/ui/menu/DropDown.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;