Merge pull request #875 from streamich/peritext-block-menu-2

Peritext block menu clipboard actions

Author: streamich

package.json

@@ -114,7 +114,7 @@
     "json-crdt-traces": "https://github.com/streamich/json-crdt-traces#ec825401dc05cbb74b9e0b3c4d6527399f54d54d",
     "json-logic-js": "^2.0.2",
     "nano-theme": "^1.4.3",
-    "nice-ui": "^1.29.1",
+    "nice-ui": "^1.30.0",
     "quill-delta": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts

@@ -272,7 +272,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
           case 'text': {
             const text = range.text();
             clipboard.writeText(text)?.catch((err) => console.error(err));
-            if (action === 'cut') editor.collapseCursors();
+            if (action === 'cut') editor.collapseCursor(range);
             break;
           }
           case 'style': {
@@ -313,7 +313,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
                 break;
             }
             clipboard.writeText(text)?.catch((err) => console.error(err));
-            if (action === 'cut') editor.collapseCursors();
+            if (action === 'cut') editor.collapseCursor(range);
             break;
           }
           default: {
@@ -325,7 +325,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
             } else {
               const data = transfer.toClipboard(range);
               clipboard.write(data as unknown as PeritextClipboardData<string>)?.catch((err) => console.error(err));
-              if (action === 'cut') editor.collapseCursors();
+              if (action === 'cut') editor.collapseCursor(range);
             }
           }
         }

src/json-crdt-peritext-ui/plugins/blocks/RenderBlock/index.tsx

@@ -21,6 +21,30 @@ export const RenderBlock: React.FC<RenderBlockProps> = (props) => {
     case CommonSliceType.blockquote: {
       return <Blockquote {...props} />;
     }
+    case CommonSliceType.h1: {
+      return <h1>{children}</h1>;
+    }
+    case CommonSliceType.h2: {
+      return <h2>{children}</h2>;
+    }
+    case CommonSliceType.h3: {
+      return <h3>{children}</h3>;
+    }
+    case CommonSliceType.h4: {
+      return <h4>{children}</h4>;
+    }
+    case CommonSliceType.h5: {
+      return <h5>{children}</h5>;
+    }
+    case CommonSliceType.h6: {
+      return <h6>{children}</h6>;
+    }
+    case CommonSliceType.title: {
+      return <h1>{children}</h1>;
+    }
+    case CommonSliceType.subtitle: {
+      return <h2>{children}</h2>;
+    }
     default: {
       return <p style={{padding: '16px 0'}}>{children}</p>;
     }

src/json-crdt-peritext-ui/plugins/toolbar/RenderFocus.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {rule} from 'nano-theme';
 import {CaretToolbar} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
+import {MoveToViewport} from 'nice-ui/lib/utils/popup/MoveToViewport';
 import {useToolbarPlugin} from './context';
 import {useSyncStore, useSyncStoreOpt, useTimeout} from '../../web/react/hooks';
 import type {CaretViewProps} from '../../web/react/cursor/CaretView';
@@ -27,11 +28,11 @@ export interface RenderFocusProps extends CaretViewProps {
   children: React.ReactNode;
 }
 
-export const RenderFocus: React.FC<RenderFocusProps> = ({children}) => {
+export const RenderFocus: React.FC<RenderFocusProps> = ({children, cursor}) => {
   const {toolbar} = useToolbarPlugin()!;
   const showInlineToolbar = toolbar.showInlineToolbar;
   const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
-  const enableAfterCoolDown = useTimeout(500, [toolbarVisibilityChangeTime]);
+  const enableAfterCoolDown = useTimeout(300, [toolbarVisibilityChangeTime]);
   const isScrubbing = useSyncStoreOpt(toolbar.surface.dom?.cursor.mouseDown) || false;
   // const focus = useSyncStoreOpt(toolbar.surface.dom?.cursor.focus) || false;
   // const blurTimeout = useTimeout(300, [focus]);
@@ -43,13 +44,15 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({children}) => {
 
   let toolbarElement: React.ReactNode = null;
 
-  if (showInlineToolbarValue && !isScrubbing)
+  if (showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor)
     toolbarElement = (
-      <CaretToolbar
-        disabled={!enableAfterCoolDown /* || (!focus && blurTimeout) */}
-        menu={toolbar.getSelectionMenu()}
-        onPopupClose={handleClose}
-      />
+      <MoveToViewport>
+        <CaretToolbar
+          disabled={!enableAfterCoolDown /* || (!focus && blurTimeout) */}
+          menu={toolbar.getSelectionMenu()}
+          onPopupClose={handleClose}
+        />
+      </MoveToViewport>
     );
 
   return (

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/AutoExpandableToolbar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+// import {ExpandableToolbar, type ExpandableToolbarProps} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/ExpandableToolbar';
 import {ExpandableToolbar, type ExpandableToolbarProps} from './ExpandableToolbar';
 import type {MenuItem} from 'nice-ui/lib/4-card/StructuralMenu/types';
 import type {AnchorPoint} from 'nice-ui/lib/utils/popup';

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/ExpandableToolbar.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import {ToolbarMenu} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu';
-import {ContextMenu} from 'nice-ui/lib/4-card/ContextMenu';
+import {ContextMenu, type ContextMenuProps} from 'nice-ui/lib/4-card/ContextMenu';
 import {PositionAtPoint} from 'nice-ui/lib/utils/popup/PositionAtPoint';
 import {context as popupContext} from 'nice-ui/lib/4-card/Popup/context';
 import {ClickAway} from 'nice-ui/lib/utils/ClickAway';
 import {ToolbarMenuProvider} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/ToolbarMenuProvider';
+import {MoveToViewport} from 'nice-ui/lib/utils/popup/MoveToViewport';
 import type {ToolbarMenuProps} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/types';
 import type {AnchorPoint} from 'nice-ui/lib/utils/popup';
 
@@ -14,10 +15,11 @@ export interface ExpandableToolbarProps extends ToolbarMenuProps {
   expandPoint?: AnchorPoint | (() => AnchorPoint);
   disabled?: boolean;
   more?: Omit<ToolbarMenuProps['more'], 'onClick'>;
+  context?: ContextMenuProps;
 }
 
 export const ExpandableToolbar: React.FC<ExpandableToolbarProps> = (props) => {
-  const {expandPoint, more, ...rest} = props;
+  const {expandPoint, more, context, ...rest} = props;
   const [view, setView] = React.useState<InlineMenuView>('toolbar');
   const popupContextValue = React.useMemo(
     () => ({
@@ -38,7 +40,9 @@ export const ExpandableToolbar: React.FC<ExpandableToolbarProps> = (props) => {
         <ClickAway onClickAway={handleContextMenuClickAway}>
           <popupContext.Provider value={popupContextValue}>
             <ToolbarMenuProvider {...rest}>
-              <ContextMenu {...rest} inset showSearch onEsc={() => setView('toolbar')} />
+              <MoveToViewport>
+                <ContextMenu inset showSearch {...context} menu={rest.menu} onEsc={() => setView('toolbar')} />
+              </MoveToViewport>
             </ToolbarMenuProvider>
           </popupContext.Provider>
         </ClickAway>
@@ -52,7 +56,7 @@ export const ExpandableToolbar: React.FC<ExpandableToolbarProps> = (props) => {
       more={{
         ...more,
         onClick: expandPoint
-          ? (e) => {
+          ? () => {
               setView('context');
             }
           : undefined,

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/index.tsx

@@ -18,12 +18,12 @@ const topLeftOverlay = rule({
   l: '-72px',
 });
 
-const topRightOverlay = rule({
-  d: 'block',
-  pos: 'absolute',
-  t: '-36px',
-  r: '-16px',
-});
+// const topRightOverlay = rule({
+//   d: 'block',
+//   pos: 'absolute',
+//   t: '-36px',
+//   r: '-16px',
+// });
 
 export interface LeafBlockFrameProps extends RenderBlockProps {}