@povio/ui 3.4.0-rc.19 → 3.4.0-rc.20

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -1,158 +0,0 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { isEqual } from "../../../utils/isEqual.js";
-import { uiOutlineClass } from "../../outline.clsx.js";
-import { FieldController } from "../shared/form.binding.js";
-import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
-import { FormField } from "../../form-field.js";
-import { inputSideDefinition } from "../shared/input.cva.js";
-import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
-import { clsx } from "clsx";
-import { memo, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useFocusVisible, useFocusWithin, useHover, useLabel } from "react-aria";
-import { mergeRefs } from "@react-aria/utils";
-import { Color } from "@tiptap/extension-color";
-import { Highlight } from "@tiptap/extension-highlight";
-import { Link } from "@tiptap/extension-link";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { TextAlign } from "@tiptap/extension-text-align";
-import { TextStyle } from "@tiptap/extension-text-style";
-import { Underline } from "@tiptap/extension-underline";
-import { EditorContent, useEditor } from "@tiptap/react";
-import { StarterKit } from "@tiptap/starter-kit";
-//#region src/components/inputs/TextEditor/TextEditor.tsx
-const extensions = [
-	StarterKit.configure({ heading: { levels: [
-		1,
-		2,
-		3
-	] } }),
-	TextAlign.configure({ types: ["heading", "paragraph"] }),
-	Underline,
-	TextStyle,
-	Color,
-	Highlight.configure({ multicolor: true }),
-	Link.configure({
-		openOnClick: false,
-		defaultProtocol: "https"
-	})
-];
-const TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
-	const contentRef = useRef(null);
-	const { hoverProps, isHovered } = useHover({ isDisabled });
-	const [isFocused, setIsFocused] = useState(false);
-	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
-	const { isFocusVisible } = useFocusVisible();
-	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
-	const formFieldProps = {
-		error,
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
-		hideLabel,
-		isDisabled,
-		headerClassName,
-		errorClassName
-	};
-	const { labelProps, fieldProps } = useLabel({ label });
-	const editor = useEditor({
-		extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
-		editorProps: { attributes: { class: clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName) } },
-		onUpdate: (event) => {
-			onChange?.({
-				json: event.editor.getJSON(),
-				html: event.editor.getHTML()
-			});
-		},
-		immediatelyRender: false,
-		editable: !isDisabled,
-		onBlur
-	}, [isDisabled, editorClassName]);
-	useEffect(() => {
-		const content = value?.json ?? null;
-		if (editor) {
-			if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
-		} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
-	}, [value]);
-	useEffect(() => {
-		if (editor && contentRef.current) {
-			editor.commands.setContent(contentRef.current);
-			contentRef.current = null;
-		}
-	}, [editor]);
-	const headerProps = {
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: hideLabel || isHeaderHidden,
-		isDisabled,
-		className: headerClassName,
-		labelProps
-	};
-	return /* @__PURE__ */ jsx(FormField, {
-		...formFieldProps,
-		ref,
-		as,
-		labelProps,
-		className: clsx("group w-full", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
-			"data-text-editor": true,
-			"data-rac": "",
-			"data-hovered": isHovered || void 0,
-			"data-disabled": isDisabled || void 0,
-			"data-is-disabled": isDisabled || void 0,
-			"data-focus-within": isFocused || void 0,
-			"data-focus-visible": isFocused && isFocusVisible || void 0,
-			"data-is-filled": !editor?.isEmpty,
-			"data-is-required": isRequired || void 0,
-			"data-is-dirty": isDirty || void 0,
-			...hoverProps,
-			...focusWithinProps,
-			...fieldProps,
-			children: [/* @__PURE__ */ jsx(TextEditorToolbar, { editor }), /* @__PURE__ */ jsxs("div", {
-				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
-				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-					as,
-					...headerProps,
-					className: clsx(headerProps.className, inputSideCva({
-						size: "default",
-						type: "left"
-					}))
-				}), /* @__PURE__ */ jsx(EditorContent, {
-					editor,
-					placeholder: as === "floating" ? "" : placeholder,
-					className: clsx(as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0")
-				})]
-			})]
-		})
-	});
-};
-const TextEditorComponent = (props) => {
-	if ("field" in props && props.field) {
-		const { field, ref, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(FieldController, {
-			control: field.form,
-			name: field.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextEditorBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: field.onChange,
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
-};
-const TextEditor = memo(TextEditorComponent);
-//#endregion
-export { TextEditor };

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js

@@ -1,18 +0,0 @@
-import { clsx } from "clsx";
-import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/inputs/TextEditor/Toolbar/ColorPicker.tsx
-const ColorPicker = ({ colors, value, onChange }) => {
-	return /* @__PURE__ */ jsx(ColorSwatchPicker, {
-		value,
-		onChange: (color) => onChange(color.toString("hex")),
-		className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
-		children: colors.map((color) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
-			color,
-			className: "group",
-			children: /* @__PURE__ */ jsx(ColorSwatch, { className: clsx("size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid", "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2", "cursor-pointer") })
-		}, color))
-	});
-};
-//#endregion
-export { ColorPicker };

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -1,56 +0,0 @@
-import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { useInputCva } from "../../shared/input.cva.js";
-import { popoverDefinition } from "../../../shared/popover.cva.js";
-import { ColorPicker } from "./ColorPicker.js";
-import { ChevronDown } from "lucide-react";
-import { clsx } from "clsx";
-import { useState } from "react";
-import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.tsx
-const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
-	const inputCva = useInputCva();
-	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
-	const [isOpen, setIsOpen] = useState(false);
-	const handleChange = (color) => {
-		onChange(color);
-		setIsOpen(false);
-	};
-	return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen,
-		onOpenChange: setIsOpen,
-		children: [/* @__PURE__ */ jsxs(Button, {
-			className: inputCva({
-				as: "inline",
-				className: clsx("flex items-center justify-between gap-2")
-			}),
-			isDisabled,
-			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "label-1",
-				className: "truncate",
-				children
-			}), /* @__PURE__ */ jsx(ChevronDown, {
-				className: clsx("size-6 shrink-0", isOpen && "rotate-180"),
-				"aria-hidden": "true"
-			})]
-		}), /* @__PURE__ */ jsx(Popover, {
-			className: "my-4 w-40 outline-none",
-			offset: 0,
-			placement: "bottom start",
-			children: /* @__PURE__ */ jsx(Dialog, {
-				className: "outline-none",
-				children: /* @__PURE__ */ jsx("div", {
-					className: clsx(popoverCva({}), "flex justify-center overflow-hidden p-2"),
-					children: /* @__PURE__ */ jsx(ColorPicker, {
-						colors,
-						value,
-						onChange: handleChange
-					})
-				})
-			})
-		})]
-	});
-};
-//#endregion
-export { ColorPickerDropdown };

package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js

@@ -1,72 +0,0 @@
-import { Button } from "../../../buttons/Button/Button.js";
-import { InlineIconButton } from "../../../inline-icon-button.js";
-import "../../../../config/i18n.js";
-import { TextInput } from "../../../text-input.js";
-import { ResponsivePopover } from "../../../responsive-popover.js";
-import { Link } from "lucide-react";
-import { clsx } from "clsx";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/inputs/TextEditor/Toolbar/HyperlinkAction.tsx
-const HyperlinkAction = ({ editor }) => {
-	const { t } = useTranslation("ui");
-	const [isOpen, setIsOpen] = useState(false);
-	const [url, setUrl] = useState("");
-	const isLinkEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "link");
-	const linkHref = editor.getAttributes("link")?.href;
-	useEffect(() => {
-		setUrl(linkHref || "");
-	}, [linkHref]);
-	if (!isLinkEnabled) return null;
-	const onRemove = () => {
-		editor.chain().focus().extendMarkRange("link").unsetLink().run();
-		setIsOpen(false);
-	};
-	const onApply = () => {
-		editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-		setIsOpen(false);
-	};
-	return /* @__PURE__ */ jsxs(ResponsivePopover, {
-		isOpen,
-		onOpenChange: setIsOpen,
-		sheetLabel: t(($) => $.ui.textEditor.link.label),
-		trigger: /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			label: t(($) => $.ui.textEditor.link.label),
-			icon: Link,
-			className: clsx(editor.isActive("link") && "!text-interactive-text-primary-idle"),
-			isDisabled: !editor.isEditable
-		}),
-		children: [/* @__PURE__ */ jsx(TextInput, {
-			variant: "outlined",
-			hideLabel: true,
-			label: t(($) => $.ui.textEditor.link.urlLabel),
-			placeholder: t(($) => $.ui.textEditor.link.urlPlaceholder),
-			value: url,
-			onChange: setUrl,
-			className: "mb-4"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between",
-			children: [/* @__PURE__ */ jsx(Button, {
-				variant: "contained",
-				color: "secondary",
-				size: "xs",
-				width: "hug",
-				onPress: onApply,
-				isDisabled: !url,
-				children: t(($) => $.ui.textEditor.link.apply)
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "outlined",
-				color: "secondary",
-				size: "xs",
-				width: "hug",
-				onPress: onRemove,
-				isDisabled: !editor.isActive("link"),
-				children: t(($) => $.ui.textEditor.link.remove)
-			})]
-		})]
-	});
-};
-//#endregion
-export { HyperlinkAction };

package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js

@@ -1,43 +0,0 @@
-import "../../../../config/i18n.js";
-import { Select } from "../../Selection/Select/Select.js";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/inputs/TextEditor/Toolbar/TextAlignSelect.tsx
-const TextAlignSelect = ({ editor }) => {
-	const { t } = useTranslation("ui");
-	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign")) return null;
-	const onChange = (val) => {
-		if (val) editor.chain().focus().setTextAlign(val).run();
-		else editor.chain().focus().unsetTextAlign().run();
-	};
-	const getItem = (id, Icon) => {
-		return {
-			id,
-			label: t(($) => $.ui.textEditor.textAlign[id]),
-			content: /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
-			isActive: editor.isActive({ textAlign: id }),
-			can: editor.can().setTextAlign(id)
-		};
-	};
-	const enabledItems = [
-		getItem("left", AlignLeft),
-		getItem("center", AlignCenter),
-		getItem("right", AlignRight),
-		getItem("justify", AlignJustify)
-	].filter((item) => item.can);
-	return /* @__PURE__ */ jsx(Select, {
-		as: "inline",
-		label: t(($) => $.ui.textEditor.textAlign.label),
-		placeholder: t(($) => $.ui.textEditor.textAlign.label),
-		hideLabel: true,
-		ignoreTriggerWidth: true,
-		showSelectionContent: true,
-		onChange,
-		items: enabledItems,
-		value: enabledItems.find((item) => item.isActive)?.id || "left",
-		isDisabled: !editor.isEditable
-	});
-};
-//#endregion
-export { TextAlignSelect };

package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js

@@ -1,24 +0,0 @@
-import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "../textEditor.types.js";
-import { Baseline } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/inputs/TextEditor/Toolbar/TextColorSelect.tsx
-const TextColorSelect = ({ editor }) => {
-	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;
-	const onChange = (color) => {
-		editor.chain().focus().setColor(color).run();
-	};
-	const textColor = editor.getAttributes("textStyle").color || "#000000";
-	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
-		value: textColor,
-		onChange,
-		colors: defaultColors,
-		isDisabled: !editor.isEditable,
-		children: /* @__PURE__ */ jsx(Baseline, {
-			className: "size-6",
-			style: { color: textColor }
-		})
-	});
-};
-//#endregion
-export { TextColorSelect };

package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js

@@ -1,32 +0,0 @@
-import { HyperlinkAction } from "./HyperlinkAction.js";
-import { TextAlignSelect } from "./TextAlignSelect.js";
-import { TextColorSelect } from "./TextColorSelect.js";
-import { TextHighlightSelect } from "./TextHighlightSelect.js";
-import { TextListActions } from "./TextListActions.js";
-import { TextMarksActions } from "./TextMarksActions.js";
-import { TextStyleSelect } from "./TextStyleSelect.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/inputs/TextEditor/Toolbar/TextEditorToolbar.tsx
-const TextEditorToolbar = ({ editor }) => {
-	if (!editor) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap gap-1",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx(TextStyleSelect, { editor }), /* @__PURE__ */ jsx(TextAlignSelect, { editor })]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx(TextColorSelect, { editor }), /* @__PURE__ */ jsx(TextHighlightSelect, { editor })]
-				})]
-			}),
-			/* @__PURE__ */ jsx(TextMarksActions, { editor }),
-			/* @__PURE__ */ jsx(TextListActions, { editor }),
-			/* @__PURE__ */ jsx(HyperlinkAction, { editor })
-		]
-	});
-};
-//#endregion
-export { TextEditorToolbar };

package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js

@@ -1,25 +0,0 @@
-import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "../textEditor.types.js";
-import { Highlighter } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/inputs/TextEditor/Toolbar/TextHighlightSelect.tsx
-const TextHighlightSelect = ({ editor }) => {
-	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;
-	const onChange = (color) => {
-		if (color === "#FFFFFF") editor.chain().focus().unsetHighlight().run();
-		else editor.chain().focus().setHighlight({ color }).run();
-	};
-	const highlightColor = editor.getAttributes("highlight").color || "#FFFFFF";
-	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
-		value: highlightColor,
-		onChange,
-		colors: defaultColors,
-		isDisabled: !editor.isEditable,
-		children: highlightColor ? /* @__PURE__ */ jsx(Highlighter, {
-			className: "size-6",
-			style: { color: highlightColor }
-		}) : /* @__PURE__ */ jsx(Highlighter, { className: "size-6" })
-	});
-};
-//#endregion
-export { TextHighlightSelect };

package/dist/components/inputs/TextEditor/Toolbar/TextListActions.js

@@ -1,43 +0,0 @@
-import { InlineIconButton } from "../../../inline-icon-button.js";
-import "../../../../config/i18n.js";
-import { List, ListOrdered } from "lucide-react";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/inputs/TextEditor/Toolbar/TextListActions.tsx
-const TextListActions = ({ editor }) => {
-	const { t } = useTranslation("ui");
-	const enabledActions = [{
-		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
-		isEnabled: () => editor.isEditable && editor.can().toggleBulletList(),
-		label: t(($) => $.ui.textEditor.marks.bold),
-		icon: List,
-		onPress: () => {
-			editor.chain().focus().toggleBulletList().run();
-		},
-		isActive: () => editor.isActive("bulletList")
-	}, {
-		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "orderedList"),
-		isEnabled: () => editor.isEditable && editor.can().toggleOrderedList(),
-		label: t(($) => $.ui.textEditor.marks.italic),
-		icon: ListOrdered,
-		onPress: () => {
-			editor.chain().focus().toggleOrderedList().run();
-		},
-		isActive: () => editor.isActive("orderedList")
-	}].filter((action) => action.can);
-	if (enabledActions.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full items-center gap-3",
-		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			label: action.label,
-			onPress: action.onPress,
-			icon: action.icon,
-			isDisabled: !action.isEnabled(),
-			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
-		}, action.label))
-	});
-};
-//#endregion
-export { TextListActions };

package/dist/components/inputs/TextEditor/Toolbar/TextMarksActions.js

@@ -1,66 +0,0 @@
-import { InlineIconButton } from "../../../inline-icon-button.js";
-import "../../../../config/i18n.js";
-import { Bold, Italic, Strikethrough, Underline } from "lucide-react";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/inputs/TextEditor/Toolbar/TextMarksActions.tsx
-const TextMarksActions = ({ editor }) => {
-	const { t } = useTranslation("ui");
-	const enabledActions = [
-		{
-			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
-			isEnabled: () => editor.isEditable && editor.can().toggleBold(),
-			label: t(($) => $.ui.textEditor.marks.bold),
-			icon: Bold,
-			onPress: () => {
-				editor.chain().focus().toggleBold().run();
-			},
-			isActive: () => editor.isActive("bold")
-		},
-		{
-			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
-			isEnabled: () => editor.isEditable && editor.can().toggleItalic(),
-			label: t(($) => $.ui.textEditor.marks.italic),
-			icon: Italic,
-			onPress: () => {
-				editor.chain().focus().toggleItalic().run();
-			},
-			isActive: () => editor.isActive("italic")
-		},
-		{
-			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
-			isEnabled: () => editor.isEditable && editor.can().toggleStrike(),
-			label: t(($) => $.ui.textEditor.marks.strikethrough),
-			icon: Strikethrough,
-			onPress: () => {
-				editor.chain().focus().toggleStrike().run();
-			},
-			isActive: () => editor.isActive("strike")
-		},
-		{
-			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
-			isEnabled: () => editor.isEditable && editor.can().toggleUnderline(),
-			label: t(($) => $.ui.textEditor.marks.underline),
-			icon: Underline,
-			onPress: () => {
-				editor.chain().focus().toggleUnderline().run();
-			},
-			isActive: () => editor.isActive("underline")
-		}
-	].filter((action) => action.can);
-	if (enabledActions.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full items-center gap-3",
-		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			label: action.label,
-			onPress: action.onPress,
-			icon: action.icon,
-			isDisabled: !action.isEnabled(),
-			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
-		}, action.label))
-	});
-};
-//#endregion
-export { TextMarksActions };

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js

@@ -1,54 +0,0 @@
-import { Typography } from "../../../text/Typography/Typography.js";
-import "../../../../config/i18n.js";
-import { Select } from "../../Selection/Select/Select.js";
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/inputs/TextEditor/Toolbar/TextStyleSelect.tsx
-const TextStyleSelect = ({ editor }) => {
-	const { t } = useTranslation("ui");
-	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "heading")) return null;
-	const getItem = (level) => {
-		return {
-			id: level,
-			label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
-			content: /* @__PURE__ */ jsx(Typography, {
-				size: `title-${level}`,
-				children: t(($) => $.ui.textEditor.textStyle[`heading${level}`])
-			})
-		};
-	};
-	const onChange = (val) => {
-		if (!val) {
-			const currentLevel = editor.getAttributes("heading")?.level;
-			if (!currentLevel) return;
-			editor.chain().focus().toggleHeading({ level: currentLevel }).run();
-			return;
-		}
-		if (!editor.can().setHeading({ level: val })) return;
-		editor.chain().focus().setHeading({ level: val }).run();
-	};
-	return /* @__PURE__ */ jsx(Select, {
-		as: "inline",
-		placeholder: t(($) => $.ui.textEditor.textStyle.label),
-		label: t(($) => $.ui.textEditor.textStyle.label),
-		hideLabel: true,
-		ignoreTriggerWidth: true,
-		onChange,
-		items: [
-			{
-				id: 0,
-				label: t(($) => $.ui.textEditor.textStyle.normal)
-			},
-			...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
-			...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
-			...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
-			...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
-			...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
-			...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
-		],
-		value: editor.getAttributes("heading")?.level || 0,
-		isDisabled: !editor.isEditable
-	});
-};
-//#endregion
-export { TextStyleSelect };

package/dist/components/inputs/TextEditor/textEditor.types.js

@@ -1,40 +0,0 @@
-//#region src/components/inputs/TextEditor/textEditor.types.ts
-const defaultColors = [
-	"#000000",
-	"#e60000",
-	"#ff9900",
-	"#ffff00",
-	"#008a00",
-	"#0066cc",
-	"#9933ff",
-	"#ffffff",
-	"#facccc",
-	"#ffebcc",
-	"#ffffcc",
-	"#cce8cc",
-	"#cce0f5",
-	"#ebd6ff",
-	"#bbbbbb",
-	"#f06666",
-	"#ffc266",
-	"#ffff66",
-	"#66b966",
-	"#66a3e0",
-	"#c285ff",
-	"#888888",
-	"#a10000",
-	"#b26b00",
-	"#b2b200",
-	"#006100",
-	"#0047b2",
-	"#6b24b2",
-	"#444444",
-	"#5c0000",
-	"#663d00",
-	"#666600",
-	"#003700",
-	"#002966",
-	"#3d1466"
-];
-//#endregion
-export { defaultColors };