@blocklet/editor 2.0.19 → 2.0.21

package/lib/components/SelectionPopper.js

@@ -28,7 +28,6 @@ function InternalRangePopper({ range, placement, children, sx, ...rest }) {
     }, [range]);
     const { update, styles, attributes } = usePopper(virtualElement, popperElement, {
         placement,
-        strategy: 'fixed',
         modifiers: [
             {
                 name: 'offset',

package/lib/ext/Aide/Aide.js

@@ -6,11 +6,13 @@ import Output from './Output';
 import Templates from './Templates';
 import Menu from './Menu';
 import ExternalTemplates from './external-templates';
+import { useSafeArea } from '../SafeAreaPlugin';
 export function Aide(props) {
     const { status, mode, reset, available } = useAideContext();
     const handleClickAway = (e) => {
         reset();
     };
+    useSafeArea({ enabled: available && status !== 'initial', size: '360px' });
     if (!available || status === 'initial') {
         return null;
     }

package/lib/ext/Aide/Input.js

@@ -29,7 +29,7 @@ export default function Input({ prepend, ...rest }) {
                     justifyContent: 'center',
                     alighItems: 'center',
                     width: 36,
-                }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "bi:stars", "data-height": "16px", sx: { color: 'grey.600' } }) }), prepend, status === 'activated' && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleOnKeyDown, autoFocus: true, sx: { flex: '1 1 auto', height: '100%', border: 0, outline: 'none' } }), _jsx(Box, { onClick: submit, sx: {
+                }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "bi:stars", "data-height": "16px", sx: { color: 'grey.600' } }) }), prepend, status === 'activated' && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleOnKeyDown, ref: (ref) => ref && ref.focus({ preventScroll: true }), sx: { flex: '1 1 auto', height: '100%', border: 0, outline: 'none' } }), _jsx(Box, { onClick: submit, sx: {
                             display: 'flex',
                             justifyContent: 'center',
                             alighItems: 'center',

package/lib/ext/SafeAreaPlugin.d.ts

@@ -6,3 +6,7 @@
 export declare function SafeAreaPlugin({ size }: {
     size?: number | string;
 }): null;
+export declare function useSafeArea({ enabled, size }: {
+    enabled: boolean;
+    size?: number | string;
+}): void;

package/lib/ext/SafeAreaPlugin.js

@@ -33,3 +33,24 @@ export function SafeAreaPlugin({ size = '30vh' }) {
     }, [editor]);
     return null;
 }
+export function useSafeArea({ enabled, size = '30vh' }) {
+    const [editor] = useLexicalComposerContext();
+    const originalValue = useRef();
+    useEffect(() => {
+        const cleanup = editor.registerRootListener((rootElement, prevRootElement) => {
+            if (rootElement !== null && editor.isEditable() && enabled) {
+                if (originalValue.current === undefined) {
+                    originalValue.current = rootElement.style.paddingBottom;
+                }
+                rootElement.style.paddingBottom = normalizeCssSize(size);
+            }
+        });
+        return () => {
+            const rootElement = editor.getRootElement();
+            if (rootElement && originalValue.current !== undefined) {
+                rootElement.style.paddingBottom = originalValue.current;
+            }
+            cleanup();
+        };
+    }, [editor, enabled]);
+}

package/lib/main/editor.js

@@ -119,6 +119,7 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
 const EditorContent = styled.div `
   position: relative;
   .be-editable {
+    transition: padding-bottom 0.2s;
     code {
       white-space: pre-wrap;
     }

package/lib/main/nodes/ImageComponent.js

@@ -36,6 +36,7 @@ import { ImageAnnotation, ImageAnnotationView, ImageEnhancer } from '../ui/Image
 import { useImageDisplayWidth } from '../hooks/hooks';
 import { useMediumZoom } from '../hooks/medium-zoom';
 import { FrameMockup, isDeviceFrame } from '../ui/FrameMockup';
+import { useSafeArea } from '../../ext/SafeAreaPlugin';
 const imageCache = new Set();
 // Min size that require user confirm to upload image
 const REQUIRE_CONFIRM_UPLOAD_SIZE = 10 << 20;
@@ -209,6 +210,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
     const [objectUrl] = useState(() => file && URL.createObjectURL(file));
     const [error, setError] = useState();
     const [loading, setLoading] = useState(false);
+    useSafeArea({ enabled: draggable, size: '80px' });
     const config = useEditorConfig();
     const uploadImage = useCallback(async () => {
         if (!config.uploader?.upload) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.10.1",
     "@blocklet/embed": "^0.1.11",
     "@blocklet/pages-kit": "^0.2.348",
-    "@blocklet/pdf": "2.0.19",
+    "@blocklet/pdf": "2.0.21",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "4a8d186451ac45b2654a71e9693d150a53efcc5c"
+  "gitHead": "d40327315284d06df0bf441d613b8c6dd475531b"
 }