@blocknote/core 0.1.0-alpha.3 → 0.1.1

package/src/utils.ts

@@ -0,0 +1,12 @@
+export const isAppleOS = () =>
+  /Mac/.test(navigator.platform) ||
+  (/AppleWebKit/.test(navigator.userAgent) &&
+    /Mobile\/\w+/.test(navigator.userAgent));
+
+export function formatKeyboardShortcut(shortcut: string) {
+  if (isAppleOS()) {
+    return shortcut.replace("Mod", "⌘");
+  } else {
+    return shortcut.replace("Mod", "Ctrl");
+  }
+}

package/types/src/BlockNoteExtensions.d.ts

@@ -1,4 +1,7 @@
 import { Extensions } from "@tiptap/core";
 import { Node } from "@tiptap/core";
 export declare const Document: Node<any, any>;
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
 export declare const getBlockNoteExtensions: () => Extensions;

package/types/src/BlockNoteTheme.d.ts

@@ -0,0 +1,2 @@
+import { MantineThemeOverride } from "@mantine/core";
+export declare const BlockNoteTheme: MantineThemeOverride;

package/types/src/commands/indentation.d.ts

@@ -0,0 +1,2 @@
+import { LexicalEditor } from "lexical";
+export declare function registerIndentationCommands(editor: LexicalEditor): () => void;

package/types/src/extensions/Blocks/BlockAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const BlockAttributes: Record<string, string>;
+export default BlockAttributes;

package/types/src/extensions/Blocks/MultipleNodeSelection.d.ts

@@ -0,0 +1,24 @@
+import { Selection } from "prosemirror-state";
+import { Node, ResolvedPos, Slice } from "prosemirror-model";
+import { Mappable } from "prosemirror-transform";
+/**
+ * This class represents an editor selection which spans multiple nodes/blocks. It's currently only used to allow users
+ * to drag multiple blocks at the same time. Expects the selection anchor and head to be between nodes, i.e. just before
+ * the first target node and just after the last, and that anchor and head are at the same nesting level.
+ *
+ * Partially based on ProseMirror's NodeSelection implementation:
+ * (https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.ts)
+ * MultipleNodeSelection differs from NodeSelection in the following ways:
+ * 1. Stores which nodes are included in the selection instead of just a single node.
+ * 2. Already expects the selection to start just before the first target node and ends just after the last, while a
+ * NodeSelection automatically sets both anchor and head to just before the single target node.
+ */
+export declare class MultipleNodeSelection extends Selection {
+    nodes: Array<Node>;
+    constructor($anchor: ResolvedPos, $head: ResolvedPos);
+    static create(doc: Node, from: number, to?: number): MultipleNodeSelection;
+    content(): Slice;
+    eq(selection: Selection): boolean;
+    map(doc: Node, mapping: Mappable): Selection;
+    toJSON(): any;
+}

package/types/src/extensions/Blocks/nodes/Block.d.ts

@@ -2,7 +2,7 @@ import { Node } from "@tiptap/core";
 export interface IBlock {
     HTMLAttributes: Record<string, any>;
 }
-export declare type Level = 1 | 2 | 3;
+export declare type Level = "1" | "2" | "3";
 export declare type ListType = "li" | "oli";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {

package/types/src/extensions/BubbleMenu/component/LinkToolbarButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Editor } from "@tiptap/core";
-import { SimpleToolbarButtonProps } from "../../../shared/components/toolbar/SimpleToolbarButton";
-declare type Props = SimpleToolbarButtonProps & {
+import { ToolbarButtonProps } from "../../../shared/components/toolbar/ToolbarButton";
+declare type Props = ToolbarButtonProps & {
     editor: Editor;
 };
 /**

package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenu.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type EditHyperlinkMenuProps = {
+    url: string;
+    text: string;
+    update: (url: string, text: string) => void;
+};
+/**
+ * Menu which opens when editing an existing hyperlink or creating a new one.
+ * Provides input fields for setting the hyperlink URL and title.
+ */
+export declare const EditHyperlinkMenu: (props: EditHyperlinkMenuProps) => JSX.Element;

package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconType } from "react-icons";
+export declare type EditHyperlinkMenuItemProps = {
+    icon: IconType;
+    mainIconTooltip: string;
+    secondaryIconTooltip?: string;
+    autofocus?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+};
+export declare function EditHyperlinkMenuItem(props: EditHyperlinkMenuItemProps): JSX.Element;

package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IconType } from "react-icons";
+export declare type EditHyperlinkMenuItemIconProps = {
+    icon: IconType;
+    mainTooltip: string;
+    secondaryTooltip?: string;
+};
+export declare function EditHyperlinkMenuItemIcon(props: EditHyperlinkMenuItemIconProps): JSX.Element;

package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type EditHyperlinkMenuItemInputProps = {
+    autofocus?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+};
+export declare function EditHyperlinkMenuItemInput(props: EditHyperlinkMenuItemInputProps): JSX.Element;

package/types/src/extensions/Hyperlinks/menus/HoverHyperlinkMenu.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type HoverHyperlinkMenuProps = {
+    url: string;
+    edit: () => void;
+    remove: () => void;
+};
+/**
+ * Menu which opens when hovering an existing hyperlink.
+ * Provides buttons for editing, opening, and removing the hyperlink.
+ */
+export declare const HoverHyperlinkMenu: (props: HoverHyperlinkMenuProps) => JSX.Element;
+export {};

package/types/src/extensions/Hyperlinks/menus/HyperlinkMenu.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type HyperlinkMenuProps = {
+    url: string;
+    text: string;
+    pos: {
+        height: number;
+        width: number;
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    update: (url: string, text: string) => void;
+    remove: () => void;
+};
+/**
+ * Main menu component for the hyperlink extension.
+ * Either renders a menu to create/edit a hyperlink, or a menu to interact with it on mouse hover.
+ */
+export declare const HyperlinkMenu: (props: HyperlinkMenuProps) => JSX.Element;
+export {};

package/types/src/extensions/Hyperlinks/menus/helpers/PanelTextInput.d.ts

@@ -0,0 +1,39 @@
+import { KeyboardEvent, PureComponent } from "react";
+import { FocusEvent } from "react";
+export interface Props {
+    autoFocus?: boolean | FocusOptions;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onCancel?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    onMouseDown?: Function;
+    onKeyDown?: (e: KeyboardEvent<any>) => void;
+    onUndo?: Function;
+    onRedo?: Function;
+    onBlur?: Function;
+    width?: number;
+    maxLength?: number;
+    testId?: string;
+    ariaLabel?: string;
+    id?: string;
+}
+export interface State {
+    value?: string;
+}
+export default class PanelTextInput extends PureComponent<Props, State> {
+    private input?;
+    private focusTimeoutId;
+    constructor(props: Props);
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentWillUnmount(): void;
+    onMouseDown: () => void;
+    onBlur: (e: FocusEvent<any>) => void;
+    render(): JSX.Element;
+    focus(): void;
+    private handleChange;
+    private handleKeydown;
+    private isUndoEvent;
+    private isRedoEvent;
+    private handleRef;
+}

package/types/src/extensions/Hyperlinks/menus/helpers/PanelTextInputStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const N400 = "#505F79";
+export declare const N800 = "#172B4D";
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;

package/types/src/extensions/Hyperlinks/menus/helpers/ToolbarComponent.d.ts

@@ -0,0 +1,13 @@
+export declare const N80 = "#97A0AF";
+export declare const N30 = "#EBECF0";
+export declare const RECENT_SEARCH_WIDTH_IN_PX = 420;
+export declare const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+export declare const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export declare const InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 4px 0;\n  align-items: center;\n";
+export declare const UrlInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    provider: boolean;
+}, never>;
+export declare const TextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/src/extensions/SlashMenu/SlashMenuItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { Editor, Range } from "@tiptap/core";
 import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
+import { IconType } from "react-icons";
 export declare type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
 export declare enum SlashMenuGroups {
     HEADINGS = "Headings",
@@ -20,9 +20,7 @@ export declare class SlashMenuItem implements SuggestionItem {
     readonly group: SlashMenuGroups;
     readonly execute: SlashMenuCallback;
     readonly aliases: string[];
-    readonly icon?: import("react").ComponentType<{
-        className: string;
-    }> | undefined;
+    readonly icon?: IconType | undefined;
     readonly hint?: string | undefined;
     readonly shortcut?: string | undefined;
     groupName: string;
@@ -34,10 +32,9 @@ export declare class SlashMenuItem implements SuggestionItem {
      * @param execute The callback for creating a new node
      * @param aliases Aliases for this command
      * @param icon To be shown next to the name in the menu
+     * @param hint Short description of command
      * @param shortcut Info about keyboard shortcut that would activate this command
      */
-    constructor(name: string, group: SlashMenuGroups, execute: SlashMenuCallback, aliases?: string[], icon?: import("react").ComponentType<{
-        className: string;
-    }> | undefined, hint?: string | undefined, shortcut?: string | undefined);
+    constructor(name: string, group: SlashMenuGroups, execute: SlashMenuCallback, aliases?: string[], icon?: IconType | undefined, hint?: string | undefined, shortcut?: string | undefined);
     match(query: string): boolean;
 }

package/types/src/extensions/TrailingNode/TrailingNodeExtension.d.ts

@@ -7,4 +7,7 @@ import { Extension } from "@tiptap/core";
 export interface TrailingNodeOptions {
     node: string;
 }
+/**
+ * Add a trailing node to the document so the user can always click at the bottom of the document and start typing
+ */
 export declare const TrailingNode: Extension<TrailingNodeOptions, any>;

package/types/src/nodes/ChildgroupNode.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { EditorConfig, ElementNode, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread, TextNode } from "lexical";
+export declare type SerializedChildgroupNode = Spread<{
+    type: "childgroup";
+    version: 1;
+}, SerializedElementNode>;
+export declare class ChildgroupNode extends ElementNode {
+    static getType(): string;
+    static clone(node: ChildgroupNode): ChildgroupNode;
+    constructor(key?: NodeKey);
+    canBeEmpty(): boolean;
+    createDOM(_config: EditorConfig): HTMLElement;
+    updateDOM(_prevNode: TextNode, _dom: HTMLElement, _config: EditorConfig): boolean;
+    select(_anchorOffset?: number | undefined, _focusOffset?: number | undefined): RangeSelection;
+    selectStart(): RangeSelection;
+    insertBeforeDOM(dom: HTMLElement, childDOM: HTMLElement, referenceNode: Node | null): void;
+    static importJSON(_serializedNode: SerializedChildgroupNode): ChildgroupNode;
+    exportJSON(): SerializedChildgroupNode;
+    getClassName(): string;
+}
+export declare function $isChildgroupNode(node: LexicalNode | null | undefined): node is ChildgroupNode;
+export declare function $createChildgroupNode(): ChildgroupNode;

package/types/src/nodes/patchNodes.d.ts

@@ -0,0 +1 @@
+export declare function patchNode(node: any): void;

package/types/src/plugins/TreeViewPlugin/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TreeViewPlugin(): JSX.Element;

package/types/src/plugins/animation.d.ts

@@ -0,0 +1,2 @@
+import { LexicalEditor } from "lexical";
+export declare function registerAnimation(editor: LexicalEditor): () => void;

package/types/src/react/BlockNoteComposer.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { EditorState, EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from "lexical";
+export declare type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
+declare type Props = {
+    children: JSX.Element | JSX.Element[];
+    initialConfig: Readonly<{
+        editor__DEPRECATED?: LexicalEditor | null;
+        namespace: string;
+        nodes?: ReadonlyArray<Klass<LexicalNode>>;
+        onError: (error: Error, editor: LexicalEditor) => void;
+        editable?: boolean;
+        theme?: EditorThemeClasses;
+        editorState?: InitialEditorStateType;
+    }>;
+};
+export declare function BlockNoteComposer({ initialConfig, children }: Props): JSX.Element;
+export {};

package/types/src/react/BlockNotePlugin.d.ts

@@ -0,0 +1 @@
+export declare function BlockNotePlugin(_props: {}): null;

package/types/src/react/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./BlockNoteComposer";
+export * from "./BlockNotePlugin";
+export * from "./useBlockNoteSetup";

package/types/src/react/useBlockNoteSetup.d.ts

@@ -0,0 +1,2 @@
+import type { LexicalEditor } from "lexical";
+export declare function useBlockNoteSetup(editor: LexicalEditor): void;

package/types/src/registerBlockNote.d.ts

@@ -0,0 +1,2 @@
+import type { LexicalEditor } from "lexical";
+export declare function registerBlockNote(editor: LexicalEditor): () => void;

package/types/src/shared/components/toolbar/SimpleToolbarButton.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
+import { IconType } from "react-icons";
 export declare type SimpleToolbarButtonProps = {
     onClick?: (e: React.MouseEvent) => void;
-    icon?: React.ComponentType<{
-        className: string;
-    }>;
+    icon?: IconType;
     mainTooltip: string;
     secondaryTooltip?: string;
     isSelected?: boolean;

package/types/src/shared/components/toolbar/SimpleToolbarDropdown.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SimpleToolbarDropdownItemProps } from "./SimpleToolbarDropdownItem";
+import { IconType } from "react-icons";
+export declare type SimpleToolbarDropdownProps = {
+    text: string;
+    icon?: IconType;
+    items: Array<SimpleToolbarDropdownItemProps>;
+    children?: any;
+    isDisabled?: boolean;
+};
+export declare function SimpleToolbarDropdown(props: SimpleToolbarDropdownProps): JSX.Element;

package/types/src/shared/components/toolbar/SimpleToolbarDropdownItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IconType } from "react-icons";
+export declare type SimpleToolbarDropdownItemProps = {
+    onClick?: (e: React.MouseEvent) => void;
+    text: string;
+    icon?: IconType;
+    isSelected?: boolean;
+    children?: any;
+    isDisabled?: boolean;
+};
+export declare function SimpleToolbarDropdownItem(props: SimpleToolbarDropdownItemProps): JSX.Element;

package/types/src/shared/components/toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 export declare const Toolbar: (props: {
-    children: any;
+    children: ReactNode;
 }) => JSX.Element;

package/types/src/shared/components/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconType } from "react-icons";
+export declare type ToolbarButtonProps = {
+    onClick?: (e: React.MouseEvent) => void;
+    icon?: IconType;
+    mainTooltip: string;
+    secondaryTooltip?: string;
+    isSelected?: boolean;
+    children?: any;
+    isDisabled?: boolean;
+};
+/**
+ * Helper for basic buttons that show in the inline bubble menu.
+ */
+export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<unknown>>;

package/types/src/shared/components/toolbar/ToolbarDropdown.d.ts

@@ -0,0 +1,17 @@
+import { IconType } from "react-icons";
+import { MouseEvent } from "react";
+export declare type ToolbarDropdownProps = {
+    text: string;
+    icon?: IconType;
+    items: Array<{
+        onClick?: (e: MouseEvent) => void;
+        text: string;
+        icon?: IconType;
+        isSelected?: boolean;
+        children?: any;
+        isDisabled?: boolean;
+    }>;
+    children?: any;
+    isDisabled?: boolean;
+};
+export declare function ToolbarDropdown(props: ToolbarDropdownProps): JSX.Element;

package/types/src/shared/components/toolbar/ToolbarDropdownItem.d.ts

@@ -0,0 +1,11 @@
+import { IconType } from "react-icons";
+import { MouseEvent } from "react";
+export declare type ToolbarDropdownItemProps = {
+    onClick?: (e: MouseEvent) => void;
+    text: string;
+    icon?: IconType;
+    isSelected?: boolean;
+    children?: any;
+    isDisabled?: boolean;
+};
+export declare function ToolbarDropdownItem(props: ToolbarDropdownItemProps): JSX.Element;

package/types/src/shared/components/toolbar/ToolbarDropdownTarget.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IconType } from "react-icons";
+export declare type ToolbarDropdownTargetProps = {
+    text: string;
+    icon?: IconType;
+    isDisabled?: boolean;
+};
+export declare const ToolbarDropdownTarget: import("react").ForwardRefExoticComponent<ToolbarDropdownTargetProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/shared/plugins/suggestion/SuggestionItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { IconType } from "react-icons";
 /**
  * A generic interface used in all suggestion menus (slash menu, mentions, etc)
  */
@@ -14,9 +14,7 @@ export default interface SuggestionItem {
     /**
      * The react icon
      */
-    icon?: React.ComponentType<{
-        className: string;
-    }>;
+    icon?: IconType;
     hint?: string;
     shortcut?: string;
     /**

package/types/src/shared/plugins/suggestion/components/SuggestionGroupItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import SuggestionItem from "../SuggestionItem";
+export declare type SuggestionGroupItemProps<T> = {
+    item: T;
+    index: number;
+    selectedIndex?: number;
+    clickItem: (item: T) => void;
+};
+export declare function SuggestionGroupItem<T extends SuggestionItem>(props: SuggestionGroupItemProps<T>): JSX.Element;

package/types/src/shared/plugins/suggestion/components/SuggestionList.d.ts

@@ -1,26 +1,11 @@
 /// <reference types="react" />
 import SuggestionItem from "../SuggestionItem";
 export declare type SuggestionListProps<T> = {
-    /**
-     * Object containing all suggestion items, grouped by their `groupName`.
-     */
     groups: {
         [groupName: string]: T[];
     };
-    /**
-     * The total number of suggestion-items
-     */
     count: number;
-    /**
-     * This callback gets executed whenever an item is clicked on
-     */
     onSelectItem: (item: T) => void;
-    /**
-     * The index of the item that is currently selected (but not yet clicked on)
-     */
     selectedIndex: number;
 };
-/**
- * Stateless component that renders the suggestion list
- */
 export declare function SuggestionList<T extends SuggestionItem>(props: SuggestionListProps<T>): JSX.Element;

package/types/src/themes/BlockNoteEditorTheme.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { EditorThemeClasses } from "lexical";
+import "./BlockNoteEditorTheme.css";
+declare const theme: EditorThemeClasses;
+export { theme as defaultTheme };

package/types/src/useEditor.d.ts

@@ -4,5 +4,8 @@ declare type BlockNoteEditorOptions = EditorOptions & {
     enableBlockNoteExtensions: boolean;
     disableHistoryExtension: boolean;
 };
+/**
+ * Main hook for importing a BlockNote editor into a react project
+ */
 export declare const useEditor: (options?: Partial<BlockNoteEditorOptions>, deps?: DependencyList) => import("@tiptap/react").Editor | null;
 export {};

package/types/src/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isAppleOS: () => boolean;
+export declare function formatKeyboardShortcut(shortcut: string): string;

package/src/extensions/Blocks/nodes/README.md

@@ -1,26 +0,0 @@
-# Node structure
-
-We use the following document structure:
-
-```xml
-<blockgroup>
-    <block>
-        <content>Parent element 1</content>
-        <blockgroup>
-            <block>
-                <content>Nested / child / indented item</content>
-            </block>
-        </blockgroup>
-    </block>
-    <block>
-        <content>Parent element 2</content>
-        <blockgroup>
-            <block>...</block>
-            <block>...</block>
-        </blockgroup>
-    </block>
-    <block>
-        <content>Element 3 without children</content>
-    </block>
-</blockgroup>
-```

package/src/extensions/BubbleMenu/component/DropdownBlockItem.module.css

@@ -1,13 +0,0 @@
-.item_container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  min-width: 100px;
-  gap: 1em;
-}
-.logo_and_item_container {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: 0.5rem;
-}

package/src/extensions/BubbleMenu/component/DropdownBlockItem.tsx

@@ -1,25 +0,0 @@
-import { DropdownItem } from "@atlaskit/dropdown-menu";
-import { IconType } from "react-icons/lib";
-import { TiTick } from "react-icons/ti";
-import styles from "./DropdownBlockItem.module.css";
-
-interface DropdownBlockItemProps {
-  title: string;
-  icon: IconType;
-  isSelected?: boolean;
-  onClick?: () => void;
-}
-export default function DropdownBlockItem(props: DropdownBlockItemProps) {
-  const ItemIcon = props.icon;
-  return (
-    <DropdownItem onClick={props.onClick}>
-      <div className={`${styles.item_container}`}>
-        <div className={`${styles.logo_and_item_container}`}>
-          <ItemIcon />
-          {props.title}
-        </div>
-        {props.isSelected && <TiTick />}
-      </div>
-    </DropdownItem>
-  );
-}

package/src/extensions/DraggableBlocks/components/DragHandle.module.css

@@ -1,33 +0,0 @@
-.dragHandle {
-  /* position: absolute; */
-  transition: opacity 300ms;
-  width: 20px;
-  height: 24px;
-
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 10 24"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  cursor: grab;
-  border-radius: 3px;
-}
-
-/* .dragHandle:active {
-  cursor:  !important;
-} */
-
-.dragHandleAdd:hover,
-.dragHandle:hover {
-  background-color: #eee;
-}
-
-.dragHandleAdd {
-  /* position: absolute; */
-  transition: opacity 300ms;
-
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  cursor: pointer;
-  border-radius: 3px;
-}

package/src/extensions/DraggableBlocks/components/DragHandleMenu.module.css

@@ -1,10 +0,0 @@
-.menuList {
-  color: var(--N800);
-  background-color: white;
-  border: 1px solid var(--N40);
-  box-shadow: 0px 4px 8px rgba(9, 30, 66, 0.25),
-    0px 0px 1px rgba(9, 30, 66, 0.31);
-  border-radius: 4px;
-  max-width: 320;
-  margin: 16px auto;
-}