@blocklet/editor-lite 2.6.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,33 @@
+# @blocklet/editor
+
+Rich editor powered by lexical.
+
+## Install
+
+```
+yarn add @blocklet/editor
+```
+
+## Start playground for dev
+
+```
+yarn insall
+
+cd packages/editor
+
+yarn dev
+```
+
+## Version
+
+If you have changed the code of this package and want to publish a new
+version on npm, do the following:
+
+```shell
+# run in packages/editor
+yarn bump-version
+# or run in any where of workspace
+yarn workspace @blocklet/editor run bump-version
+```
+
+Then modify CHANGELOG.md and add commit push changed files.

package/lib/blocklet-editor-viewer.d.ts

@@ -0,0 +1,4 @@
+import { EditorViewerProps } from './main/viewer/types';
+export declare const BlockletEditorViewer: import("react-lazy-with-preload").PreloadableComponent<typeof import("./main/viewer").BlockletEditorViewer>;
+export declare const useBlockletEditorViewerLoaded: () => boolean;
+export type { EditorViewerProps };

package/lib/blocklet-editor-viewer.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { lazyWithPreload } from 'react-lazy-with-preload';
+export const BlockletEditorViewer = lazyWithPreload(() => import('./main/viewer').then((m) => ({ default: m.BlockletEditorViewer })));
+export const useBlockletEditorViewerLoaded = () => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        BlockletEditorViewer.preload().then(() => {
+            setLoaded(true);
+        });
+    }, []);
+    return loaded;
+};

package/lib/blocklet-editor.d.ts

@@ -0,0 +1,2 @@
+export declare const BlockletEditor: import("react-lazy-with-preload").PreloadableComponent<typeof import("./main").default>;
+export declare const useBlockletEditorLoaded: () => boolean;

package/lib/blocklet-editor.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { lazyWithPreload } from 'react-lazy-with-preload';
+export const BlockletEditor = lazyWithPreload(() => import('./main'));
+export const useBlockletEditorLoaded = () => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        BlockletEditor.preload().then(() => {
+            setLoaded(true);
+        });
+    }, []);
+    return loaded;
+};

package/lib/components/Loading.d.ts

@@ -0,0 +1,4 @@
+interface Props {
+}
+export default function Loading({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Loading.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+export default function Loading({ ...rest }) {
+    return (_jsx(Root, { className: "global-loading", ...rest, children: _jsx("span", {}) }));
+}
+const Root = styled.div `
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding-left: 16px;
+  background-color: #d5e1ec;
+  border-radius: 4px;
+`;

package/lib/components/SelectionPopper.d.ts

@@ -0,0 +1,14 @@
+import { RangeSelection } from 'lexical';
+import { BoxProps } from '@mui/material';
+interface CommonProps {
+    placement?: 'right' | 'bottom-start';
+}
+interface SelectionPopperProps extends CommonProps, BoxProps {
+    selection: RangeSelection | null | undefined;
+}
+interface CursorPopperProps extends CommonProps, BoxProps {
+    range: Range | null | undefined;
+}
+export declare function SelectionPopper({ selection, placement, children, ...rest }: SelectionPopperProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CursorPopper({ range, placement, children, ...rest }: CursorPopperProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/SelectionPopper.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createDOMRange } from '@lexical/selection';
+import { $isRangeSelection } from 'lexical';
+import { useEffect, useMemo, useState } from 'react';
+import { usePopper } from 'react-popper';
+import { Box } from '@mui/material';
+const getRange = (editor, selection) => {
+    return editor.getEditorState().read(() => {
+        if (!$isRangeSelection(selection)) {
+            return null;
+        }
+        const { anchor } = selection;
+        const { focus } = selection;
+        const range = createDOMRange(editor, anchor.getNode(), anchor.offset, focus.getNode(), focus.offset);
+        return range;
+    });
+};
+function InternalRangePopper({ range, placement, children, sx, ...rest }) {
+    const [popperElement, setPopperElement] = useState(null);
+    function generateGetBoundingClientRect(x = 0, y = 0) {
+        return () => range.getBoundingClientRect();
+    }
+    const virtualElement = useMemo(() => {
+        return {
+            getBoundingClientRect: generateGetBoundingClientRect(),
+        };
+    }, [range]);
+    const { update, styles, attributes } = usePopper(virtualElement, popperElement, {
+        placement,
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 8],
+                },
+            },
+        ],
+    });
+    // FIXME: 临时处理 ".be-editable" 元素为滚动容器时, popper 随滚动飘移的问题
+    // https://github.com/blocklet/discuss-kit/issues/591
+    useEffect(() => {
+        const _update = () => update?.();
+        const editableElement = document.querySelector('.be-editable');
+        editableElement?.addEventListener('scroll', _update);
+        return () => {
+            editableElement?.removeEventListener('scroll', _update);
+        };
+    }, [update]);
+    // zIndex 需要小于 editor toolbar 的 10
+    const mergedSx = [{ zIndex: 9 }, ...(Array.isArray(sx) ? sx : [sx])];
+    return (_jsx(Box, { ref: setPopperElement, style: styles.popper, ...attributes.popper, sx: mergedSx, ...rest, children: children }));
+}
+export function SelectionPopper({ selection, placement = 'bottom-start', children, ...rest }) {
+    const [editor] = useLexicalComposerContext();
+    let range = null;
+    try {
+        range = getRange(editor, selection);
+    }
+    catch (e) {
+        // ignore error
+    }
+    if (!range) {
+        return null;
+    }
+    return (_jsx(InternalRangePopper, { range: range, placement: placement, ...rest, children: children }));
+}
+export function CursorPopper({ range, placement = 'right', children, ...rest }) {
+    if (!range || !range.collapsed) {
+        return null;
+    }
+    return (_jsx(InternalRangePopper, { range: range, placement: placement, ...rest, children: children }));
+}

package/lib/components/animateText.d.ts

@@ -0,0 +1,3 @@
+export default function AnimateText({ sentence }: {
+    sentence: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/animateText.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@emotion/css';
+export default function AnimateText({ sentence }) {
+    const chars = sentence?.replace(/ /g, '\u00A0').split('');
+    return (_jsx("div", { className: animation, children: chars?.map((char, i) => (
+        // @ts-ignore
+        _jsx("span", { style: { '--i': i }, children: char === '\u00A0' ? '\u00A0' : char }, `text-${char}`))) }));
+}
+const animation = css `
+  span {
+    animation: zoomup 1.2s ease-in-out infinite;
+    display: inline-block;
+    animation-delay: calc(100ms * var(--i));
+    padding-right: 1px;
+  }
+  @keyframes zoomup {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    25%,
+    75% {
+      transform: translateY(-1px);
+    }
+    50% {
+      transform: translateY(1px);
+    }
+  }
+`;

package/lib/components/createPortal.d.ts

@@ -0,0 +1,2 @@
+declare const createPortal: (portalElement: React.ReactElement<any>, parentElement: HTMLElement) => React.ReactElement<any>;
+export default createPortal;

package/lib/components/createPortal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import { useState } from 'react';
+const CreatePopperElement = ({ portalElement, parentElement, }) => {
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes } = usePopper(parentElement, popperElement, {
+        placement: 'bottom-start',
+        strategy: 'fixed',
+    });
+    return (_jsx("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 1 }, ...attributes.popper, children: portalElement }));
+};
+const createPortal = (portalElement, parentElement) => {
+    return ReactDOM.createPortal(_jsx(CreatePopperElement, { portalElement: portalElement, parentElement: parentElement }), parentElement);
+};
+export default createPortal;

package/lib/config.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import { AI, UserService } from './types';
+export type ToolbarConfigItem = 'component' | 'block' | 'align' | 'font-family' | 'font-size' | 'bold' | 'italic' | 'underline' | 'code' | 'link' | 'image' | 'color' | 'bgcolor' | 'strikethrough' | 'media' | 'alert';
+export interface ToolbarConfig {
+    items?: ToolbarConfigItem[];
+}
+export interface Uploader {
+    upload?: (file: Blob) => Promise<{
+        url: string;
+    }>;
+}
+export interface CharacterLimitConfig {
+    maxLength?: number;
+    indicatorStyle?: SxProps;
+    alignLeft?: boolean;
+}
+export interface EditorConfig {
+    toolbar?: ToolbarConfig;
+    uploader?: Uploader;
+    userService?: UserService;
+    blockletEmbedEndpoint?: string;
+    openGraphEndpoint?: string;
+    AI?: AI;
+    templatePlugin?: any;
+    minimalMode?: boolean;
+    openLinkInNewTab?: boolean;
+    characterLimitConfig?: CharacterLimitConfig;
+    simpleImageComponent?: boolean;
+    enableSafeAreaPlugin?: boolean;
+    maxContentWidth?: number;
+}
+export declare function EditorConfigProvider({ children, value }: {
+    children: React.ReactNode;
+    value: EditorConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const useEditorConfig: () => EditorConfig;

package/lib/config.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const EditorConfigContext = createContext({});
+export function EditorConfigProvider({ children, value }) {
+    const parentCtx = useContext(EditorConfigContext);
+    const _value = useMemo(() => {
+        const result = { ...parentCtx, ...value };
+        return result;
+    }, [value, parentCtx]);
+    return _jsx(EditorConfigContext.Provider, { value: _value, children: children });
+}
+export const useEditorConfig = () => useContext(EditorConfigContext);

package/lib/ext/AIPlugin/AIIcon.d.ts

@@ -0,0 +1,5 @@
+interface AIKitIconProps {
+    disabled: boolean;
+}
+declare const AIKitIcon: ({ disabled }: AIKitIconProps) => import("react/jsx-runtime").JSX.Element;
+export default AIKitIcon;

package/lib/ext/AIPlugin/AIIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+const AIKitIcon = ({ disabled = false }) => {
+    const id = useId();
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flex: '0 0 auto' }, children: [_jsxs("mask", { id: "mask0_1302_392", maskUnits: "userSpaceOnUse", x: "0", y: "1", width: "20", height: "18", children: [_jsx("path", { d: "M15.4167 7.5H4.58333C4.1231 7.5 3.75 7.8731 3.75 8.33333V16.6667C3.75 17.1269 4.1231 17.5 4.58333 17.5H15.4167C15.8769 17.5 16.25 17.1269 16.25 16.6667V8.33333C16.25 7.8731 15.8769 7.5 15.4167 7.5Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.91663 8.33333C2.91663 7.41286 3.66282 6.66666 4.58329 6.66666H15.4166C16.3371 6.66666 17.0833 7.41286 17.0833 8.33333V16.6667C17.0833 17.5871 16.3371 18.3333 15.4166 18.3333H4.58329C3.66282 18.3333 2.91663 17.5871 2.91663 16.6667V8.33333ZM15.4166 8.33333H4.58329V16.6667H15.4166V8.33333Z", fill: "white" }), _jsx("path", { d: "M7.08333 11.6667C7.54357 11.6667 7.91667 11.2936 7.91667 10.8333C7.91667 10.3731 7.54357 10 7.08333 10C6.6231 10 6.25 10.3731 6.25 10.8333C6.25 11.2936 6.6231 11.6667 7.08333 11.6667Z", fill: "black" }), _jsx("path", { d: "M12.9166 11.6667C13.3769 11.6667 13.75 11.2936 13.75 10.8333C13.75 10.3731 13.3769 10 12.9166 10C12.4564 10 12.0833 10.3731 12.0833 10.8333C12.0833 11.2936 12.4564 11.6667 12.9166 11.6667Z", fill: "black" }), _jsx("path", { d: "M8.33333 13.3333C8.11232 13.3333 7.90036 13.4211 7.74408 13.5774C7.5878 13.7337 7.5 13.9456 7.5 14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15V13.3333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667C12.5 13.9456 12.4122 13.7337 12.2559 13.5774C12.0996 13.4211 11.8877 13.3333 11.6667 13.3333V15ZM8.33333 15H11.6667V13.3333H8.33333V15Z", fill: "black" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99998 3.33333C10.4602 3.33333 10.8333 3.70642 10.8333 4.16666V7.5C10.8333 7.96023 10.4602 8.33333 9.99998 8.33333C9.53974 8.33333 9.16665 7.96023 9.16665 7.5V4.16666C9.16665 3.70642 9.53974 3.33333 9.99998 3.33333ZM1.66665 10C2.12688 10 2.49998 10.3731 2.49998 10.8333V14.1667C2.49998 14.6269 2.12688 15 1.66665 15C1.20641 15 0.833313 14.6269 0.833313 14.1667V10.8333C0.833313 10.3731 1.20641 10 1.66665 10ZM18.3333 10C18.7936 10 19.1666 10.3731 19.1666 10.8333V14.1667C19.1666 14.6269 18.7936 15 18.3333 15C17.8731 15 17.5 14.6269 17.5 14.1667V10.8333C17.5 10.3731 17.8731 10 18.3333 10Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33331 3.33333C8.33331 2.41286 9.07951 1.66666 9.99998 1.66666C10.9205 1.66666 11.6666 2.41286 11.6666 3.33333C11.6666 4.25381 10.9205 5 9.99998 5C9.07951 5 8.33331 4.25381 8.33331 3.33333Z", fill: "white" })] }), _jsx("g", { mask: "url(#mask0_1302_392)", children: _jsx("path", { d: "M0 0H20V20H0V0Z", fill: `url(#${id})` }) }), _jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "9.99983", y1: "19.7225", x2: "9.99983", y2: "0.278048", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: disabled ? 'currentColor' : '#45E4FA' }), _jsx("stop", { offset: "1", stopColor: disabled ? 'currentColor' : '#8A45FA' })] }) })] }));
+};
+export default AIKitIcon;

package/lib/ext/AIPlugin/Arrow.d.ts

@@ -0,0 +1 @@
+export default function Arrow(): import("react/jsx-runtime").JSX.Element;

package/lib/ext/AIPlugin/Arrow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+export default function Arrow() {
+    return (_jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center', cursor: 'pointer', opacity: 0.5, '&:hover': { opacity: 1 } }, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { width: 14, height: 14 }, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.80002 8.10001C1.30297 8.10001 0.900024 8.50296 0.900024 9.00001C0.900024 9.49707 1.30297 9.90001 1.80002 9.90001H14.0272L9.26364 14.6636C8.91217 15.0151 8.91217 15.5849 9.26364 15.9364C9.61511 16.2879 10.185 16.2879 10.5364 15.9364L16.8347 9.6381C16.8399 9.63295 16.845 9.62773 16.8501 9.62246C16.93 9.53902 16.9908 9.44398 17.0324 9.3429C17.0704 9.25074 17.0936 9.15089 17.0989 9.04633C17.0996 9.03099 17.1 9.01555 17.1 9.00001C17.1 8.99036 17.0999 8.98069 17.0996 8.97104C17.0962 8.86341 17.0739 8.76055 17.0359 8.66566C16.9919 8.5557 16.9255 8.45264 16.8364 8.36361L10.5364 2.06361C10.185 1.71213 9.61511 1.71213 9.26364 2.06361C8.91217 2.41508 8.91217 2.98493 9.26364 3.3364L14.0273 8.10001H1.80002Z", fill: "url(#paint0_linear_1302_347)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_1302_347", x1: "16.8752", y1: "9.00012", x2: "1.12524", y2: "9.00012", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#45E4FA" }), _jsx("stop", { offset: "1", stopColor: "#8A45FA" })] }) })] }) }));
+}

package/lib/ext/AIPlugin/TextGeneration.d.ts

@@ -0,0 +1,6 @@
+export type Status = 'initial' | 'activated' | 'waiting';
+declare const _default: {
+    (props: object): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default _default;

package/lib/ext/AIPlugin/TextGeneration.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import Box from '@mui/material/Box';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useGetState } from 'ahooks';
+import { useAideContext } from '../Aide';
+import { insert, getParagraphText } from './utils';
+import { useIsFocused } from '../../main/hooks/useIsFocused';
+import { withAiAvailable } from '../Aide/withAiAvailable';
+import Arrow from './Arrow';
+import Writing from './Writing';
+import Delayed from '../Aide/Delayed';
+import { CursorPopper } from '../../components/SelectionPopper';
+function TextGeneration() {
+    const [editor] = useLexicalComposerContext();
+    const hasFocused = useIsFocused();
+    const { completions } = useAideContext();
+    const [state, setState, getState] = useGetState({
+        status: 'initial',
+        range: null,
+        counter: 1,
+    });
+    const reset = () => {
+        if (getState().status !== 'initial') {
+            setState((prev) => ({ ...prev, status: 'initial', range: null }));
+        }
+    };
+    const activate = () => {
+        setState((prev) => ({
+            ...prev,
+            status: 'activated',
+            range: document.getSelection()?.getRangeAt(0)?.cloneRange(),
+            counter: prev.counter + 1,
+        }));
+    };
+    const continueWriting = async () => {
+        setState((prev) => ({ ...prev, status: 'waiting' }));
+        const seedText = getParagraphText(editor);
+        const output = await completions(`Generate subsequent content based on input, keeping it within two to three sentences and no more than 60 words. The input is: ${seedText}`);
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const state = getState();
+        if (state.status === 'waiting' && state.range) {
+            insert(editor, state.range, output?.trim()?.replace(/\s+/g, ' '));
+            setState((prev) => ({ ...prev, status: 'initial' }));
+        }
+    };
+    // 通过 Selection/Range API 判断是选区还是停留光标 (isCollapsed),
+    // 对于后者, 如果光标前面有文本且后面无文本, 则调用 activate 显示补全文本的箭头, 否则重置 (隐藏箭头)
+    const update = () => {
+        const selection = document.getSelection();
+        if (selection?.anchorNode?.nodeType === Node.TEXT_NODE) {
+            const range = selection.getRangeAt(0);
+            const hasTextBeforeCursor = range.endContainer.textContent?.trim();
+            const hasTextAfterCursor = range.endContainer.textContent && range.endContainer.textContent.length > range.endOffset;
+            if (selection?.isCollapsed && hasTextBeforeCursor && !hasTextAfterCursor) {
+                reset();
+                activate();
+            }
+            else {
+                reset();
+            }
+        }
+        else {
+            reset();
+        }
+    };
+    useEffect(() => {
+        // 监听 editor 输入
+        return editor.registerUpdateListener(update);
+    }, [editor]);
+    useEffect(() => {
+        // editor 失去焦点时重置状态 (隐藏补全文本的箭头)
+        if (!hasFocused) {
+            reset();
+        }
+        else {
+            update();
+        }
+    }, [hasFocused]);
+    // shortcut: ctrl+k
+    // useEffect(() => {
+    //   return editor.registerCommand<KeyboardEvent>(
+    //     KEY_DOWN_COMMAND,
+    //     (e) => {
+    //       if ((e.metaKey || e.ctrlKey) && e.key === 'k' && getState().status === 'activated') {
+    //         continueWriting();
+    //         return true;
+    //       }
+    //       return false;
+    //     },
+    //     COMMAND_PRIORITY_EDITOR
+    //   );
+    // }, [editor]);
+    const rangeRect = state.range?.getBoundingClientRect();
+    // 使用 onMouseDown & preventDefault 避免点击时 editor 失去焦点且不触发事件处理,
+    // https://github.com/facebook/lexical/issues/3998
+    const handleClick = (e) => {
+        e.preventDefault();
+        continueWriting();
+    };
+    if (hasFocused && (state.status === 'activated' || state.status === 'waiting') && !!rangeRect) {
+        return (_jsx(CursorPopper, { range: state.range, sx: { display: 'flex', alignItems: 'center', height: rangeRect.height }, children: _jsxs(Box, { onMouseDown: handleClick, sx: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    '&:hover': { color: 'primary.light' },
+                }, children: [state.status === 'activated' && (_jsx(Delayed, { delay: 1200, children: _jsxs(Box, { sx: {
+                                display: 'inline-flex',
+                                position: 'relative',
+                                color: 'grey.500',
+                                '&:hover .text-generation-arrow-label': { display: 'inline-flex' },
+                            }, children: [_jsx(Arrow, {}), _jsx(Box, { className: "text-generation-arrow-label", sx: {
+                                        display: 'none',
+                                        alignItems: 'center',
+                                        gap: 1,
+                                        position: 'absolute',
+                                        top: 24,
+                                        left: 0,
+                                        transform: 'translateX(-50%)',
+                                        px: 1,
+                                        py: 0.5,
+                                        color: '#fff',
+                                        fontSize: 13,
+                                        fontWeight: 'bold',
+                                        whiteSpace: 'nowrap',
+                                        borderRadius: 1,
+                                        bgcolor: 'grey.600',
+                                    }, children: _jsx("span", { children: "Continue writing with AI Kit " }) })] }) }, state.counter)), state.status === 'waiting' && _jsx(Writing, {})] }) }));
+    }
+    return null;
+}
+export default withAiAvailable(TextGeneration);

package/lib/ext/AIPlugin/Writing.d.ts

@@ -0,0 +1 @@
+export default function Writing(): import("react/jsx-runtime").JSX.Element;

package/lib/ext/AIPlugin/Writing.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import AnimateText from '../../components/animateText';
+import AIKitIcon from './AIIcon';
+export default function Writing() {
+    return (_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(AIKitIcon, { disabled: true }), _jsx(Box, { sx: { flex: '0 0 auto', fontSize: 14, fontWeight: 'bold', color: '#4598fa' }, children: _jsx(AnimateText, { sentence: "AI Kit is writing ..." }) })] }));
+}

package/lib/ext/AIPlugin/index.d.ts

@@ -0,0 +1,9 @@
+import { LexicalCommand } from 'lexical';
+import { Mode } from '../Aide/types';
+export declare const ACTIVATE_AI_COMMAND: LexicalCommand<Mode>;
+export declare const AI_TEMPLATES_AVAILABLE_COMMAND: LexicalCommand<boolean>;
+export declare function AideFloatingToolbarButton({ onClick }: {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AideToolbarButton(): import("react/jsx-runtime").JSX.Element;
+export default function AidePluginWrapper(): import("react/jsx-runtime").JSX.Element | null;