feat: add @affine/bookmark-block plugin (#2618)

packages/component/src/components/block-suite-editor/index.tsx

@@ -16,14 +16,6 @@ import {
   blockSuiteEditorHeaderStyle,
   blockSuiteEditorStyle,
 } from './index.css';
-import { bookmarkPlugin } from './plugins/bookmark';
-
-export type EditorPlugin = {
-  flavour: string;
-  onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
-  onLoad?: (page: Page, editor: EditorContainer) => () => void;
-  render?: (props: { page: Page }) => ReactElement | null;
-};
 
 export type EditorProps = {
   page: Page;
@@ -50,9 +42,6 @@ const ImagePreviewModal = lazy(() =>
   }))
 );
 
-// todo(himself65): plugin-infra should support this
-const plugins = [bookmarkPlugin];
-
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   const { onLoad, page, mode, style, onInit } = props;
   const JotaiEditorContainer = useAtomValue(
@@ -77,9 +66,6 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
       editor.page = page;
       if (page.root === null) {
         onInit(page, editor);
-        plugins.forEach(plugin => {
-          plugin.onInit?.(page, editor);
-        });
       }
     }
   }, [editor, page, onInit]);
@@ -88,7 +74,6 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
     if (editor.page && onLoad) {
       const disposes = [] as ((() => void) | undefined)[];
       disposes.push(onLoad?.(page, editor));
-      disposes.push(...plugins.map(plugin => plugin.onLoad?.(page, editor)));
       return () => {
         disposes
           .filter((dispose): dispose is () => void => !!dispose)
@@ -201,12 +186,6 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
           )}
         </Suspense>
       )}
-      {plugins.map(plugin => {
-        const Renderer = plugin.render;
-        return Renderer ? (
-          <Renderer page={props.page} key={plugin.flavour} />
-        ) : null;
-      })}
     </ErrorBoundary>
   );
 });

packages/component/src/components/block-suite-editor/plugins/bookmark.tsx

@@ -1,225 +0,0 @@
-import type { SerializedBlock } from '@blocksuite/blocks';
-import {
-  getCurrentBlockRange,
-  getCurrentNativeRange,
-  getVirgoByModel,
-} from '@blocksuite/blocks/std';
-import type { Page } from '@blocksuite/store';
-import { assertExists } from '@blocksuite/store';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { MenuItem, MuiClickAwayListener, PureMenu } from '../../..';
-import type { EditorPlugin } from '..';
-
-type ShortcutMap = {
-  [key: string]: (e: KeyboardEvent, page: Page) => void;
-};
-const menuOptions = [
-  {
-    id: 'dismiss',
-    label: 'Dismiss',
-  },
-  {
-    id: 'bookmark',
-    label: 'Create bookmark',
-  },
-];
-
-const handleEnter = ({
-  page,
-  selectedOption,
-  callback,
-}: {
-  page: Page;
-  selectedOption: keyof ShortcutMap;
-  callback: () => void;
-}) => {
-  if (selectedOption === 'dismiss') {
-    return callback();
-  }
-  const blockRange = getCurrentBlockRange(page) as Exclude<
-    ReturnType<typeof getCurrentBlockRange>,
-    null
-  >;
-  const vEditor = getVirgoByModel(blockRange.models[0]);
-  const linkInfo = vEditor!
-    .getDeltasByVRange({
-      index: blockRange.startOffset,
-      length: 0,
-    })
-    .find(delta => delta[0]?.attributes?.link);
-  if (!linkInfo) {
-    return;
-  }
-  const [, { index, length }] = linkInfo;
-  const link = linkInfo[0]?.attributes?.link as string;
-
-  const model = blockRange.models[0];
-  const parent = page.getParent(model);
-  assertExists(parent);
-  const currentBlockIndex = parent.children.indexOf(model);
-  page.addBlock(
-    'affine:bookmark',
-    { url: link },
-    parent,
-    currentBlockIndex + 1
-  );
-
-  vEditor!.deleteText({
-    index,
-    length,
-  });
-
-  if (model.isEmpty()) {
-    page.deleteBlock(model);
-  }
-  return callback();
-};
-
-const shouldShowBookmarkMenu = (pastedBlocks: SerializedBlock[]) => {
-  if (!pastedBlocks.length || pastedBlocks.length > 1) {
-    return;
-  }
-  const [firstBlock] = pastedBlocks;
-  if (
-    !firstBlock.text ||
-    !firstBlock.text.length ||
-    firstBlock.text.length > 1
-  ) {
-    return;
-  }
-  return !!firstBlock.text[0].attributes?.link;
-};
-const BookMarkMenu: EditorPlugin['render'] = ({ page }) => {
-  const [anchor, setAnchor] = useState<Range | null>(null);
-  const [selectedOption, setSelectedOption] = useState<string>(
-    menuOptions[0].id
-  );
-  const shortcutMap = useMemo<ShortcutMap>(
-    () => ({
-      ArrowUp: () => {
-        const curIndex = menuOptions.findIndex(
-          ({ id }) => id === selectedOption
-        );
-        if (menuOptions[curIndex - 1]) {
-          setSelectedOption(menuOptions[curIndex - 1].id);
-        } else if (curIndex === -1) {
-          setSelectedOption(menuOptions[0].id);
-        } else {
-          setSelectedOption(menuOptions[menuOptions.length - 1].id);
-        }
-      },
-      ArrowDown: () => {
-        const curIndex = menuOptions.findIndex(
-          ({ id }) => id === selectedOption
-        );
-        if (curIndex !== -1 && menuOptions[curIndex + 1]) {
-          setSelectedOption(menuOptions[curIndex + 1].id);
-        } else {
-          setSelectedOption(menuOptions[0].id);
-        }
-      },
-      Enter: () =>
-        handleEnter({
-          page,
-          selectedOption,
-          callback: () => {
-            setAnchor(null);
-          },
-        }),
-      Escape: () => {
-        setAnchor(null);
-      },
-    }),
-    [page, selectedOption]
-  );
-  const onKeydown = useCallback(
-    (e: KeyboardEvent) => {
-      const shortcut = shortcutMap[e.key];
-      if (shortcut) {
-        e.stopPropagation();
-        e.preventDefault();
-        shortcut(e, page);
-      } else {
-        setAnchor(null);
-      }
-    },
-    [page, shortcutMap]
-  );
-
-  useEffect(() => {
-    const disposer = page.slots.pasted.on(pastedBlocks => {
-      if (!shouldShowBookmarkMenu(pastedBlocks)) {
-        return;
-      }
-      setTimeout(() => {
-        setAnchor(getCurrentNativeRange());
-      }, 100);
-    });
-
-    return () => {
-      disposer.dispose();
-    };
-  }, [onKeydown, page, shortcutMap]);
-
-  useEffect(() => {
-    if (anchor) {
-      document.addEventListener('keydown', onKeydown, { capture: true });
-    } else {
-      // reset status and remove event
-      setSelectedOption(menuOptions[0].id);
-      document.removeEventListener('keydown', onKeydown, { capture: true });
-    }
-
-    return () => {
-      document.removeEventListener('keydown', onKeydown, { capture: true });
-    };
-  }, [anchor, onKeydown]);
-
-  return anchor ? (
-    <MuiClickAwayListener
-      onClickAway={() => {
-        setAnchor(null);
-        setSelectedOption('');
-      }}
-    >
-      <div>
-        <PureMenu open={!!anchor} anchorEl={anchor} placement="bottom-start">
-          {menuOptions.map(({ id, label }) => {
-            return (
-              <MenuItem
-                key={id}
-                active={selectedOption === id}
-                onClick={() => {
-                  handleEnter({
-                    page,
-                    selectedOption: id,
-                    callback: () => {
-                      setAnchor(null);
-                    },
-                  });
-                }}
-                disableHover={true}
-                onMouseEnter={() => {
-                  setSelectedOption(id);
-                }}
-              >
-                {label}
-              </MenuItem>
-            );
-          })}
-        </PureMenu>
-      </div>
-    </MuiClickAwayListener>
-  ) : null;
-};
-
-const Defender: EditorPlugin['render'] = props => {
-  const flag = props.page.awarenessStore.getFlag('enable_bookmark_operation');
-  return flag ? <BookMarkMenu {...props} /> : null;
-};
-
-export const bookmarkPlugin: EditorPlugin = {
-  flavour: 'bookmark',
-  render: Defender,
-};