fuma 0.0.1

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

@@ -0,0 +1,56 @@
+<script>import {
+  mdiText,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatHeader1,
+  mdiFormatHeader3,
+  mdiFormatHeader2
+} from "@mdi/js";
+import ToolMenu from "./ToolMenu.svelte";
+export let editor;
+</script>
+
+<ToolMenu
+	{editor}
+	tools={[
+		{
+			key: 'paragraph',
+			label: 'Texte',
+			icon: mdiText,
+			action: () => editor.commands.setParagraph(),
+		},
+		{
+			key: 'heading',
+			attributes: { level: 1 },
+			label: 'Titre 1',
+			icon: mdiFormatHeader1,
+			action: () => editor.commands.setHeading({ level: 1 }),
+		},
+		{
+			key: 'heading',
+			attributes: { level: 2 },
+			label: 'Titre 2',
+			icon: mdiFormatHeader2,
+			action: () => editor.commands.setHeading({ level: 2 }),
+		},
+		{
+			key: 'heading',
+			attributes: { level: 3 },
+			label: 'Titre 3',
+			icon: mdiFormatHeader3,
+			action: () => editor.commands.setHeading({ level: 3 }),
+		},
+		{
+			key: 'orderedList',
+			label: 'Liste numéroter',
+			icon: mdiFormatListNumbered,
+			action: () => editor.commands.toggleOrderedList(),
+		},
+		{
+			key: 'bulletList',
+			label: 'Liste à puces',
+			icon: mdiFormatListBulleted,
+			action: () => editor.commands.toggleBulletList(),
+		},
+	]}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMenuNodeProps = typeof __propDef.props;
+export type ToolMenuNodeEvents = typeof __propDef.events;
+export type ToolMenuNodeSlots = typeof __propDef.slots;
+export default class ToolMenuNode extends SvelteComponent<ToolMenuNodeProps, ToolMenuNodeEvents, ToolMenuNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,60 @@
+<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>
+
+<div
+	class="
+		 sticky top-0 z-10 overflow-y-visible rounded-t-xl border-b bg-base-100
+		{klass}
+	"
+>
+	<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" />
+
+		<ToolMark
+			{editor}
+			key="bold"
+			label="Gras (Ctrl+B)"
+			icon={mdiFormatBold}
+			action={() => editor.chain().focus().toggleBold().run()}
+		/>
+		<ToolMark
+			{editor}
+			key="italic"
+			label="Italic (Ctrl+C)"
+			icon={mdiFormatItalic}
+			action={() => editor.chain().focus().toggleItalic().run()}
+		/>
+		<ToolMarkLink {editor} />
+		<ToolMarkColor
+			icon={mdiFormatColorText}
+			label="Couleur du text"
+			color={editor.getAttributes('textStyle').color || '#000000'}
+			setColor={editor.commands.setColor}
+		/>
+		<ToolMarkColor
+			icon={mdiFormatColorFill}
+			label="Couleur du fond"
+			color={editor.getAttributes('highlight').color || '#e51f68'}
+			setColor={(color) => editor.commands.setHighlight({ color })}
+		/>
+
+		<div class="mx-1 my-auto h-6 border border-y-0 border-l-0" />
+
+		<ToolMenuInsert
+			{editor}
+			on:insertMedia={() => toast.warning('TODO: import SelectMedia like benev.io')}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolsBarProps = typeof __propDef.props;
+export type ToolsBarEvents = typeof __propDef.events;
+export type ToolsBarSlots = typeof __propDef.slots;
+export default class ToolsBar extends SvelteComponent<ToolsBarProps, ToolsBarEvents, ToolsBarSlots> {
+}
+export {};

package/dist/ui/input/textRich/extensions.d.ts

@@ -0,0 +1,2 @@
+import type { Extensions } from '@tiptap/core';
+export declare const extensions: Extensions;

package/dist/ui/input/textRich/extensions.js

@@ -0,0 +1,62 @@
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import TextAlign from '@tiptap/extension-text-align';
+import Placeholder from '@tiptap/extension-placeholder';
+import Image from '@tiptap/extension-image';
+import Youtube from '@tiptap/extension-youtube';
+import Mention from '@tiptap/extension-mention';
+import { Indent } from './indent.js';
+import { suggestion } from './suggestion.js';
+export const extensions = [
+    StarterKit.configure({
+        heading: { levels: [1, 2, 3] }
+    }),
+    Link.configure({
+        protocols: ['tel', 'mailto']
+    }),
+    TextStyle,
+    Color,
+    Highlight.configure({
+        multicolor: true
+    }),
+    TextAlign.configure({
+        types: ['heading', 'paragraph', 'image'],
+        alignments: ['left', 'center', 'right']
+    }),
+    Placeholder.configure({
+        placeholder: 'Rédige ta page ici ...'
+    }),
+    Indent,
+    Image.configure({
+        HTMLAttributes: {
+            class: 'mx-auto'
+        }
+    }),
+    Youtube.configure({
+        // @ts-ignore
+        width: '100%',
+        height: 360,
+        nocookie: true,
+        origin: 'benev.io',
+        modestBranding: true,
+        HTMLAttributes: {
+            class: 'mx-auto rounded'
+        }
+    }),
+    Mention.configure({
+        suggestion,
+        renderHTML({ node }) {
+            return [
+                'span',
+                {
+                    class: 'suggestion',
+                    'data-key': node.attrs.id
+                },
+                node.attrs.label ?? node.attrs.id
+            ];
+        }
+    })
+];

package/dist/ui/input/textRich/indent.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        indent: {
+            indent: () => ReturnType;
+            outdent: () => ReturnType;
+        };
+    }
+}
+export declare const Indent: Extension<{
+    types: string[];
+    defaultIndentLevel: number;
+}, any>;

package/dist/ui/input/textRich/indent.js

@@ -0,0 +1,112 @@
+import { Extension } from '@tiptap/core';
+import { TextSelection, AllSelection, Transaction } from '@tiptap/pm/state';
+const clamp = (val, min, max) => {
+    if (val < min)
+        return min;
+    if (val > max)
+        return max;
+    return val;
+};
+const INDENT_OPTIONS = {
+    min: 0,
+    max: 150,
+    more: 10,
+    less: -10,
+};
+const nodeNameList = ['bullet_list', 'order_list', 'todo_list'];
+const nodeNameText = ['paragraph', 'heading'];
+function setNodeIndentMarkup(tr, pos, delta) {
+    if (!tr.doc)
+        return tr;
+    const node = tr.doc.nodeAt(pos);
+    if (!node)
+        return tr;
+    const minIndent = INDENT_OPTIONS.min;
+    const maxIndent = INDENT_OPTIONS.max;
+    const indent = clamp((node.attrs.indent || 0) + delta, minIndent, maxIndent);
+    if (indent === node.attrs.indent)
+        return tr;
+    const nodeAttrs = {
+        ...node.attrs,
+        indent,
+    };
+    return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
+}
+const updateIndentLevel = (tr, delta) => {
+    const { doc, selection } = tr;
+    if (!doc || !selection)
+        return tr;
+    if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+        return tr;
+    }
+    const { from, to } = selection;
+    doc.nodesBetween(from, to, (node, pos) => {
+        const nodeName = node.type.name;
+        if (nodeNameList.includes(nodeName))
+            return false;
+        if (nodeNameText.includes(nodeName)) {
+            tr = setNodeIndentMarkup(tr, pos, delta);
+            return false;
+        }
+        return true;
+    });
+    return tr;
+};
+export const Indent = Extension.create({
+    name: 'indent',
+    addOptions: () => ({
+        types: ['heading', 'paragraph'],
+        defaultIndentLevel: 0,
+    }),
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    indent: {
+                        default: this.options.defaultIndentLevel,
+                        renderHTML: (attributes) => {
+                            if (attributes.indent === 0)
+                                return {};
+                            return {
+                                style: `margin-left: ${attributes.indent}mm;`,
+                            };
+                        },
+                        parseHTML: (element) => parseInt(element.style.marginLeft) || this.options.defaultIndentLevel,
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        const createCommand = (transaction) => ({ tr, dispatch, editor, state, chain }) => {
+            tr = tr.setSelection(state.selection);
+            tr = transaction(tr);
+            if (tr.docChanged) {
+                if (dispatch)
+                    dispatch(tr);
+                return true;
+            }
+            editor.chain().focus().run();
+            return false;
+        };
+        return {
+            indent: () => createCommand((tr) => updateIndentLevel(tr, INDENT_OPTIONS.more)),
+            outdent: () => createCommand((tr) => updateIndentLevel(tr, INDENT_OPTIONS.less)),
+        };
+    },
+    addKeyboardShortcuts() {
+        const createShortcuts = (fn) => () => {
+            if (this.editor.isActive('bulletList'))
+                return false;
+            if (this.editor.isActive('orderedList'))
+                return false;
+            return fn();
+        };
+        return {
+            Tab: createShortcuts(() => this.editor.commands.indent()),
+            'Ctrl-q': createShortcuts(() => this.editor.commands.indent()),
+            'Shift-Tab': createShortcuts(() => this.editor.commands.outdent()),
+        };
+    },
+});

package/dist/ui/input/textRich/suggestion.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+import type { SuggestionOptions } from '@tiptap/suggestion';
+import '$lib/ui/menu/dropdown.css';
+export type SuggestionItem = {
+    id: string;
+    label: string;
+};
+export declare let suggestionItems: import("svelte/store").Writable<SuggestionItem[]>;
+export declare const suggestion: Omit<SuggestionOptions<SuggestionItem>, 'editor'>;

package/dist/ui/input/textRich/suggestion.js

@@ -0,0 +1,56 @@
+import { writable, get } from 'svelte/store';
+import { tippy } from '../../../utils/tippy.js';
+import SuggesionList from './SuggesionList.svelte';
+import '$lib/ui/menu/dropdown.css';
+export let suggestionItems = writable([]);
+export const suggestion = {
+    items: ({ query }) => {
+        const items = get(suggestionItems);
+        return items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+    },
+    render: () => {
+        let popup;
+        let target = document.createElement('div');
+        let component;
+        return {
+            onStart: (props) => {
+                component = new SuggesionList({ target, props: { props } });
+                if (!props.clientRect)
+                    return;
+                popup = tippy(document.body, {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => document.body,
+                    content: target,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'bottom-start',
+                    theme: 'dropdown-border'
+                });
+            },
+            onUpdate(props) {
+                component.$set({ props });
+                if (!props.clientRect)
+                    return;
+                popup.setProps({
+                    getReferenceClientRect: props.clientRect
+                });
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    popup.hide();
+                    return true;
+                }
+                if (['Enter', 'ArrowUp', 'ArrowDown'].includes(props.event.key)) {
+                    component.$set({ keyDownEvent: props.event });
+                    return true;
+                }
+                return false;
+            },
+            onExit() {
+                popup?.destroy();
+                component?.$destroy();
+            }
+        };
+    }
+};

package/dist/ui/input/types.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'svelte';
+import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+import { default as FormControl } from './FormControl.svelte';
+export type InputProps<T = string> = ComponentProps<FormControl> & {
+    input?: HTMLInputAttributes;
+    inputElement?: HTMLInputElement;
+    wrapperClass?: string;
+    value?: T;
+    bindWithParams?: boolean;
+};
+export type TextareaProps = ComponentProps<FormControl> & {
+    textarea?: HTMLTextareaAttributes;
+    value?: string;
+    bindWithParams?: boolean;
+};

package/dist/ui/input/types.js

@@ -0,0 +1 @@
+import { default as FormControl } from './FormControl.svelte';

package/dist/ui/menu/ContextMenu.svelte

@@ -0,0 +1,47 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Dialog, 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>
+
+{#if $isSmallScreen}
+	<Dialog bind:dialog class={klass}>
+		<div slot="header" class="contents">
+			<slot name="header" />
+		</div>
+		<slot />
+	</Dialog>
+{:else}
+	<DropDown class={klass} bind:this={dropdown} tippyProps={{ offset: [0, -5], ...tippyProps }}>
+		<div class="flex flex-col gap-2 p-1">
+			<slot name="header" />
+			<slot />
+		</div>
+	</DropDown>
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { TippyProps } from '../../utils/tippy.js';
+declare const __propDef: {
+    props: {
+        tippyProps?: Partial<TippyProps> | undefined;
+        class?: string | undefined;
+        show?: ((event: MouseEvent) => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        show: CustomEvent<void>;
+        hide: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export type ContextMenuProps = typeof __propDef.props;
+export type ContextMenuEvents = typeof __propDef.events;
+export type ContextMenuSlots = typeof __propDef.slots;
+export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {
+    get show(): (event: MouseEvent) => void;
+    get hide(): () => void;
+}
+export {};

package/dist/ui/menu/DropDown.svelte

@@ -0,0 +1,110 @@
+<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>
+
+<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 wrapperClass = "";
+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>
+
+{#if !disable}
+	<div class={wrapperClass}>
+		<div class={classActivator} bind:this={activator}>
+			<slot name="activator" />
+		</div>
+
+		<div class="hidden">
+			<div
+				class="{klass} max-h-80 overflow-auto rounded-lg border bg-base-100 p-1 shadow-lg"
+				bind:this={content}
+			>
+				<slot />
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class={wrapperClass}>
+		<slot name="activator" />
+		<div class="{klass} mt-2">
+			<slot />
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+import { type TippyInstance } from '../../utils/tippy.js';
+import { type TippyProps } from '../../utils/tippy.js';
+import './dropdown.css';
+declare const __propDef: {
+    props: {
+        tippyProps?: Partial<TippyProps> | undefined;
+        class?: string | undefined;
+        wrapperClass?: string | undefined;
+        classActivator?: string | undefined;
+        useSingleton?: boolean | undefined;
+        autofocus?: boolean | undefined;
+        hideOnBlur?: boolean | undefined;
+        hideOnNav?: boolean | undefined;
+        tip?: TippyInstance | undefined;
+        disable?: boolean | undefined;
+        content?: HTMLDivElement | undefined;
+        hide?: (() => void) | undefined;
+        show?: (() => void) | undefined;
+        setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        activator: {};
+        default: {};
+    };
+};
+export type DropDownProps = typeof __propDef.props;
+export type DropDownEvents = typeof __propDef.events;
+export type DropDownSlots = typeof __propDef.slots;
+export default class DropDown extends SvelteComponent<DropDownProps, DropDownEvents, DropDownSlots> {
+    get hide(): () => void;
+    get show(): () => void;
+    get setTippyProps(): (props: Partial<TippyProps>) => void;
+}
+export {};