@vertesia/ui 0.81.0 → 0.81.2-dev.20260204.135023Z

package/src/core/components/Button.tsx

@@ -1,63 +0,0 @@
-import clsx from 'clsx';
-import React from "react";
-import { Spinner } from "./Spinner.js";
-
-function getRealSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl') {
-    switch (size) {
-        case 'xs': return 'rounded-xs px-2 py-1 text-xs gap-x-1';
-        case 'sm': return 'rounded-xs px-2 py-1 text-sm gap-x-1';
-        case 'md': return 'rounded-md px-2.5 py-1.5 text-sm gap-x-1.5';
-        case 'lg': return 'rounded-md px-3 py-2 text-sm gap-x-1.5';
-        case 'xl': return 'rounded-md px-3.5 py-2.5 text-sm gap-x-2';
-        default: throw new Error('Unexpected size: ' + size);
-    }
-}
-
-const Variants = {
-    primary: "shadow-2xs bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
-    secondary: "shadow-2xs bg-white text-gray-900 hover:bg-gray-50 ring-1 ring-inset ring-gray-300",
-    soft: "shadow-2xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100",
-    ghost: "text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-indigo-900",
-    unstyled: ""
-}
-
-const SpinnerVariants = {
-    primary: "text-white",
-    secondary: "text-indigo-500",
-    soft: "text-indigo-600",
-    ghost: "text-indigo-600",
-    unstyled: "text-gray-600"
-}
-
-export interface ButtonProps {
-    isLoading?: boolean
-    isDisabled?: boolean
-    variant?: "primary" | "secondary" | "soft" | "ghost" | "unstyled"
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-    children: React.ReactNode | React.ReactNode[];
-    onClick?: (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    type?: "button" | "submit" | "reset";
-    title?: string;
-    className?: string;
-}
-export function Button({ title, className, type = 'button', children, size, onClick, variant = "primary", isLoading = false, isDisabled = false }: ButtonProps) {
-    const sizeClass = getRealSize(size || 'md');
-    return (
-        <button
-            title={title}
-            disabled={isDisabled || isLoading}
-            onClick={onClick}
-            type={type}
-            className={
-                clsx("whitespace-nowrap inline-flex items-center justify-center font-semibold hover:cursor-pointer",
-                    Variants[variant],
-                    sizeClass,
-                    isDisabled && "cursor-not-allowed text-gray-300!",
-                    className
-                )}
-        >
-            {isLoading && <Spinner className={SpinnerVariants[variant]} size={size} />}
-            {children}
-        </button>
-    )
-}

package/src/core/components/Modal.tsx

@@ -1,144 +0,0 @@
-import clsx from "clsx";
-import { Fragment } from "react";
-
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
-import { X } from "lucide-react";
-
-interface ModalProps {
-    children: React.ReactNode | React.ReactNode[];
-    isOpen: boolean;
-    onClose: () => void;
-    noCloseButton?: boolean;
-    className?: string;
-    allowOverflow?: boolean;
-    disableCloseOnClickOutside?: boolean;
-}
-export function Modal({
-    className,
-    children,
-    isOpen,
-    onClose,
-    noCloseButton = false,
-    allowOverflow = false,
-    disableCloseOnClickOutside = false,
-}: ModalProps) {
-    const setOpen = (open: boolean) => {
-        if (!open) {
-            onClose();
-        }
-    };
-
-    return (
-        <Transition show={isOpen} as={Fragment}>
-            <Dialog
-                style={{ zIndex: 50 }}
-                as="div"
-                className="relative"
-                onClose={disableCloseOnClickOutside ? () => { } : setOpen}
-            >
-                <TransitionChild
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                    unmount
-                >
-                    <div className="fixed inset-0 bg-gray-500  dark:bg-slate-800 dark:opacity-75 opacity-75 transition-opacity" />
-                </TransitionChild>
-
-                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                        <TransitionChild
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                            enterTo="opacity-100 translate-y-0 sm:scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        >
-                            <DialogPanel
-                                className={clsx(
-                                    "p-0! relative transform rounded-lg bg-white dark:bg-slate-900 text-left dark:text-slate-100 shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6",
-                                    allowOverflow ? "overflow-visible" : "overflow-hidden",
-                                    className,
-                                )}
-                            >
-                                {!noCloseButton && <ModalCloseButton onClose={onClose} />}
-                                {children}
-                            </DialogPanel>
-                        </TransitionChild>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition>
-    );
-}
-
-interface ModalCloseButtonProps {
-    onClose: () => void;
-}
-function ModalCloseButton({ onClose }: ModalCloseButtonProps) {
-    return (
-        <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
-            <button
-                tabIndex={-1}
-                type="button"
-                className="rounded-md bg-white text-gray-400 dark:text-slate-200 dark:bg-slate-800 hover:brightness-95 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:cursor-pointer"
-                onClick={onClose}
-            >
-                <span className="sr-only">Close</span>
-                <X className="size-6" aria-hidden="true" />
-            </button>
-        </div>
-    );
-}
-
-interface ModalTitleProps {
-    children: React.ReactNode | React.ReactNode[];
-    showDivider?: boolean;
-}
-export function ModalTitle({ children, showDivider = false }: ModalTitleProps) {
-    return (
-        <div className={showDivider ? "border-b-solid border-b border-b-1" : ""}>
-            <DialogTitle
-                as="h3"
-                className="py-4 pl-4 pr-8 text-base font-semibold leading-6 text-gray-900 dark:text-slate-50"
-            >
-                {children}
-            </DialogTitle>
-        </div>
-    );
-}
-
-interface ModalFooterProps {
-    showDivider?: boolean;
-    fill?: boolean;
-    justify?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
-    className?: string;
-    children: React.ReactNode | React.ReactNode[];
-}
-export function ModalFooter({ children, className = "justify-end", fill = false }: ModalFooterProps) {
-    return (
-        <div
-            className={clsx(
-                "w-full flex space-x-2 p-4 border-t-solid border-t-gray-100 dark:border-t-gray-800 border-t",
-                className || "justify-end",
-                fill ? "bg-gray-100 dark:bg-slate-800" : "",
-            )}
-        >
-            {children}
-        </div>
-    );
-}
-
-interface ModalBodyProps {
-    children: React.ReactNode | React.ReactNode[];
-    className?: string;
-}
-export function ModalBody({ children, className = "" }: ModalBodyProps) {
-    return <div className={clsx("p-4", className)}>{children}</div>;
-}

package/src/core/components/SelectBox.tsx

@@ -1,188 +0,0 @@
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { X, Check, ChevronsUpDownIcon } from "lucide-react";
-import clsx from "clsx";
-import { ComponentType, KeyboardEvent, ReactNode, SyntheticEvent, useState, useEffect, useRef } from "react";
-import { Button } from "./Button";
-import { Center } from "./Center";
-
-type OnChangeClearableSelectFn<T> = (option: T | undefined) => void;
-type OnChangeNonClearableSelectFn<T> = (option: T) => void;
-
-interface SelectBoxBaseProps<T> {
-    options: T[] | undefined
-    optionLabel?: (option: T) => ReactNode
-    value?: T
-    onChange: OnChangeNonClearableSelectFn<T>
-    className?: string
-    // compare for equality by field or comparison function
-    by?: (keyof T & string) | ((a: T, z: T) => boolean)
-    placeholder?: ReactNode
-    addNew?: () => void
-    addNewLabel?: string
-    disabled?: boolean
-    isClearable?: false
-    showFilter?: boolean | string
-    filterBy?: string | ((o: T) => string)
-    ClearIcon?: ComponentType<any>
-    clearTitle?: string | undefined
-    label?: string | undefined
-}
-interface ClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'isClearable' | 'onChange'> {
-    onChange: OnChangeClearableSelectFn<T>
-    isClearable: true
-}
-// interface NonClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'onChange'> {
-//     onChange: OnChangeNonClearableSelectFn<T>
-// }
-
-type SelectBoxProps<T> = ClearableSelectBoxProps<T> | SelectBoxBaseProps<T>
-
-function getFilterByFn<T>(filterBy?: string | ((o: T) => string)) {
-    if (!filterBy) {
-        return (o: T) => String(o).toLowerCase();
-    } else if (typeof filterBy === 'string') {
-        return (o: any) => String(o[filterBy]).toLowerCase();
-    } else {
-        return filterBy;
-    }
-}
-
-export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy, isClearable, disabled, by, options, value, onChange, className, addNew, addNewLabel, placeholder, optionLabel = (option) => String(option), label }: SelectBoxProps<T>) {
-    const [filter, setFilter] = useState<string>();
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const [buttonWidth, setButtonWidth] = useState<number>();
-
-    useEffect(() => {
-        if (buttonRef.current) {
-            const resizeObserver = new ResizeObserver((entries) => {
-                setButtonWidth(entries[0].contentRect.width);
-            });
-            resizeObserver.observe(buttonRef.current);
-            return () => resizeObserver.disconnect();
-        }
-    }, []);
-
-    const onClear = (e: SyntheticEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isClearable) {
-            (onChange as any)(undefined);
-        }
-    }
-    const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFilter(e.target.value);
-    }
-    let filteredOptions = options || [];
-    if (showFilter === undefined) {
-        showFilter = filteredOptions?.length >= 10;
-    }
-    if (showFilter && filter) {
-        const filterLc = filter.toLowerCase();
-        const filterFn = getFilterByFn(filterBy);
-        filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
-    }
-    const onFilterKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key !== "Escape"
-            && e.key !== "Enter"
-            && e.key !== "ArrowDown"
-            && e.key !== "ArrowUp") {
-            e.stopPropagation()
-        }
-    }
-    return (
-        <Listbox value={value ?? undefined} onChange={onChange} by={by} disabled={disabled}>
-            {() => (
-                <div className={'overflow-y-visible ' + className}>
-                    <div className="relative">
-                        <ListboxButton
-                            ref={buttonRef}
-                            className="relative w-full cursor-default rounded-md bg-white py-1.5 text-left text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 sm:text-sm sm:leading-6 hover:cursor-pointer"
-                        >
-                            {label && <div className='w-full text-gray-500 text-left px-2'>{label}</div>}
-                            <span className="block truncate pl-3 pr-14">{value ? optionLabel(value) : placeholder}</span>
-                            {
-                                isClearable && value != null && <span className="absolute inset-y-0 right-0 mr-5 flex items-center pr-2" onClick={onClear}>
-                                    <ClearIcon title={clearTitle} className="size-5 text-gray-400 hover:text-red-500 cursor-pointer" aria-hidden="true" />
-                                </span>
-                            }
-                            {
-                                !disabled &&
-                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <ChevronsUpDownIcon className="size-5 text-gray-400" aria-hidden="true" />
-                                </span>
-                            }
-                        </ListboxButton>
-                        {/*
-                        <Transition
-                            show={open}
-                            as={Fragment}
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            */}
-                        <ListboxOptions
-                            anchor="bottom"
-                            style={{ width: buttonWidth, zIndex: 100000000 }}
-                            className="absolute z-10 mt-1 overflow-auto rounded-md bg-white dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-300 ring-opacity-5 focus:outline-hidden sm:text-sm"
-                        >
-                            {showFilter &&
-                                <div className="p-1">
-                                    <input type="text" value={filter || ''} onKeyDown={onFilterKeyDown} onChange={onFilterChange} className="w-full p-1 border border-gray-300 rounded-md dark:bg-slate-700 dark:text-slate-50" placeholder="Filter..." />
-                                </div>
-                            }
-                            <div className="overflow-y-auto max-h-60">
-                                {filteredOptions.map((option, i) =>
-                                    <ListOption key={i} option={option} optionLabel={optionLabel} className="hover:cursor-pointer"></ListOption>
-                                )}
-                            </div>
-                            {addNew &&
-                                <Center className="font-semibold py-2 border-t">
-                                    <Button variant='secondary' onClick={addNew}>{addNewLabel}</Button>
-                                </Center>
-                            }
-                        </ListboxOptions>
-
-                        {/*</Transition>*/}
-                    </div>
-                </div>
-            )
-            }
-        </Listbox >
-    )
-}
-
-
-export function ListOption<T>({ option, optionLabel, onClick, className }: { option: T, optionLabel: (option: T) => ReactNode, onClick?: () => void, value?: T, className?: string }) {
-    return (
-        <ListboxOption
-            className={({ active }) =>
-                clsx(
-                    active ? 'bg-indigo-600 text-white dark:bg-indigo-800 dark:text-white' : 'text-gray-900 dark:text-slate-50',
-                    'relative cursor-default select-none py-2 pl-3 pr-9',
-                    className
-                )
-            }
-            value={option}
-            onClick={onClick}
-        >
-            {({ selected, active }) => (
-                <>
-                    <div className={clsx(selected ? 'font-semibold' : 'font-inherit', 'block truncate')}>
-                        {optionLabel(option)}
-                    </div>
-
-                    {selected ? (
-                        <div
-                            className={clsx(
-                                active ? 'text-white' : 'text-indigo-600',
-                                'absolute inset-y-0 right-0 flex items-center pr-4'
-                            )}
-                        >
-                            <Check className="size-5" aria-hidden="true" />
-                        </div>
-                    ) : null}
-                </>
-            )}
-        </ListboxOption>)
-}

package/src/core/components/tabs/Tabs.tsx

@@ -1,132 +0,0 @@
-import clsx from 'clsx';
-import { ComponentType, isValidElement, ReactNode, SyntheticEvent, useEffect, useState } from 'react';
-
-import { Tab, TabsContext, useTabs } from './TabsContext.js';
-
-function applyCurrentTab(tabs: Tab[], current?: string | (() => string)) {
-    const name = typeof current === 'function' ? current() : current;
-    let currentTab: Tab | null = null;
-    const newTabs = [];
-    for (const tab of tabs) {
-        const newTab = { ...tab };
-        newTab.current = false;
-        newTabs.push(newTab);
-        if (newTab.name === name) {
-            currentTab = newTab;
-        }
-    }
-    if (!currentTab) {
-        currentTab = newTabs[0];
-    }
-    currentTab.current = true;
-    return newTabs;
-}
-
-interface TabsProps {
-    current?: string | (() => string);
-    /**
-     * Return false to prevent the tab from being selected
-     * @param tab
-     * @returns
-     */
-    onSelect?: (tab: Tab) => void | boolean;
-    tabs: Tab[];
-    children: ReactNode | ReactNode[];
-    navigate?: (path: string) => void;
-}
-export function Tabs({ current, onSelect, tabs, children, navigate }: TabsProps) {
-    const [_tabs, _setTabs] = useState<Tab[]>([]);
-    useEffect(() => {
-        _setTabs(applyCurrentTab(tabs, current));
-    }, [current, tabs]);
-    const context = {
-        tabs: _tabs,
-        select: (tab: Tab) => {
-            if (onSelect) {
-                if (onSelect(tab) === false) {
-                    return;
-                }
-            }
-            if (tab.href) {
-                if (navigate) {
-                    navigate(tab.href);
-                } else {
-                    window.location.href = tab.href;
-                }
-            } else {
-                _setTabs([...applyCurrentTab(_tabs, tab.name)]);
-            }
-        }
-    };
-
-    return (
-        <TabsContext.Provider value={context}>
-            <div className="flex flex-col h-full">
-                {children}
-            </div>
-        </TabsContext.Provider>
-    );
-}
-
-interface TabsBarProps {
-    actions?: ReactNode | ReactNode[];
-    className?: string;
-}
-export function TabsBar({ actions, className }: TabsBarProps) {
-    const { tabs, select } = useTabs();
-    const _onClick = (e: SyntheticEvent, tab: Tab) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // ignore if disabled
-        !tab.disabled && select(tab);
-    };
-
-    return (
-        <div className="border-b flex items-start justify-between">
-            <nav className="flex space-x-4 px-4" aria-label="Tabs">
-                {tabs.map((tab) => {
-                    const cursor = tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer';
-                    return (
-                        <a
-                            key={tab.name}
-                            href={tab.href || '#' + tab.name}
-                            onClick={(e) => _onClick(e, tab)}
-                            className={clsx(
-                                tab.current
-                                    ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-50'
-                                    : 'border-transparent text-gray-500 dark:text-slate-300 hover:border-slate-400 hover:text-gray-700 dark:hover:border-slate-200 dark:hover:text-gray-200 ',
-                                className,
-                                'whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium',
-                                cursor
-                            )}
-                            aria-current={tab.current ? 'page' : undefined}
-                        >
-                            {tab.label}
-                        </a>
-                    );
-                })}
-            </nav>
-            <div className="flex gap-x-1">{actions}</div>
-        </div>
-    );
-}
-
-interface TabsPanelProps { }
-export function TabsPanel({ }: TabsPanelProps) {
-    const { tabs } = useTabs();
-    const content = tabs.find((t) => t.current)?.content;
-    if (!content) {
-        return null;
-    }
-
-    if (isValidElement(content)) {
-        return <div className="h-full overflow-y-auto flex-1">{content}</div>;
-    }
-
-    const Component = content as unknown as ComponentType;
-    return (
-        <div className="h-full overflow-y-auto flex-1">
-            <Component />
-        </div>
-    );
-}

package/src/core/components/tabs/TabsContext.ts

@@ -1,25 +0,0 @@
-import { ReactNode, createContext, useContext } from "react";
-
-export interface Tab {
-    name: string;
-    current?: boolean;
-    href?: string;
-    label: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-}
-
-export interface TabsContextProps {
-    tabs: Tab[];
-    select: (tab: Tab) => void;
-}
-
-export function useTabs() {
-    return useContext(TabsContext);
-}
-
-const TabsContext = createContext<TabsContextProps>({} as TabsContextProps);
-
-export {
-    TabsContext
-};

package/src/core/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./Tabs.js";
-export * from "./TabsContext.js";

package/src/widgets/codemirror/CodeMirrorEditor.tsx

@@ -1,122 +0,0 @@
-import debounce from 'debounce';
-import { RefObject, useEffect, useMemo, useRef } from 'react';
-
-import { Extension, Text } from '@codemirror/state';
-import { EditorView, ViewUpdate } from '@codemirror/view';
-import { useSafeLayoutEffect } from '@vertesia/ui/core';
-
-import { getSharedEditorState } from './CodemirrorStateSingleton';
-import { IEditorApi } from "./MonacoEditor.js";
-
-export class EditorApi implements IEditorApi {
-    constructor(public editor: EditorView) { }
-    setValue(value?: string) {
-        this.editor.dispatch({
-            changes: {
-                from: 0,
-                to: this.editor.state.doc.length,
-                insert: value || "",
-            },
-        });
-    }
-    getValue() {
-        return this.editor.state.doc.toString();
-    }
-}
-
-const customTheme = EditorView.theme({
-    "&": { fontSize: "14px", fontFamily: "monospace" },
-    ".cm-content": { fontFamily: "inherit" },
-    ".cm-scroller": { fontFamily: "inherit" },
-    ".cm-gutters": { backgroundColor: "transparent", color: "#ddd" },
-    ".cm-focused": { outline: "none" },
-    ".cm-cursor": {
-        borderLeft: "2px solid #808080",
-        borderLeftColor: "#808080",
-        animation: "blink 1.2s step-start infinite"
-    },
-    "@keyframes blink": { "50%": { opacity: 0 } }
-});
-
-const baseExtensions = [
-    customTheme,
-    EditorView.lineWrapping,
-];
-
-function updateListenerExtension(cb: (update: ViewUpdate) => void) {
-    return EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-            cb(update);
-        }
-    });
-};
-
-interface CodeMirrorEditorProps {
-    value?: string | Text;
-    className?: string;
-    editorRef?: RefObject<EditorApi | undefined>;
-    extensions: Extension;
-    onChange?: (update: ViewUpdate) => void;
-    debounceTimeout?: number; // use a value > 0 to debounce on change events
-}
-
-/**
- * The className is only used on the first rendering - the editor class will not be updated if the property changes
-**/
-export function CodeMirrorEditor({ onChange, value, className, editorRef, extensions, debounceTimeout = 0 }: CodeMirrorEditorProps) {
-    const ref = useRef<HTMLDivElement | null>(null);
-
-    // the onChange property may change so we need to store it in a
-    // reference to be able to update it when it changes without
-    // re-registering the listener on codemirror since codemirror can only register
-    // listeners at creation
-    const onChangeRef = useRef<(update: ViewUpdate) => void | undefined>(undefined);
-    useEffect(() => {
-        if (onChange) {
-            onChangeRef.current = debounceTimeout > 0
-                ? debounce(onChange, debounceTimeout)
-                : onChange;
-            return () => {
-                // WE MUST NOT CANCEL THE DEBOUNCE even if we unset the onChange impl
-                // otherwise some updates will never happens
-                onChangeRef.current = undefined;
-            };
-        }
-    }, [onChange, debounceTimeout]);
-
-    const component = useMemo(() => <div ref={ref} className={className} />, [className]);
-
-    useSafeLayoutEffect(() => {
-        if (ref.current) {
-            let actualExtensions = [...baseExtensions, updateListenerExtension((update) => {
-                onChangeRef.current?.(update);
-            })];
-            if (Array.isArray(extensions)) {
-                actualExtensions = actualExtensions.concat(extensions);
-            } else if (extensions) {
-                actualExtensions.push(extensions);
-            }
-
-            const sharedState = getSharedEditorState(value, actualExtensions);
-
-            const editor = new EditorView({
-                state: sharedState,
-                parent: ref.current,
-            });
-
-            const api = new EditorApi(editor);
-            if (editorRef) {
-                editorRef.current = api;
-            }
-
-            return () => {
-                editor.destroy();
-                if (editorRef) {
-                    editorRef.current = undefined;
-                }
-            };
-        }
-    }, [component, extensions]);
-
-    return component;
-}