@blocknote/core 0.1.0 → 0.1.1

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/utils.d.ts

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

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;
-}

package/src/extensions/Hyperlinks/menus/HyperlinkBasicMenu.tsx

@@ -1,59 +0,0 @@
-import { useState } from "react";
-import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
-import { SimpleToolbarButton } from "../../../shared/components/toolbar/SimpleToolbarButton";
-import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
-import { ToolbarSeparator } from "../../../shared/components/toolbar/ToolbarSeparator";
-import React from "react";
-
-type HyperlinkMenuProps = {
-  href: string;
-  removeHandler: () => void;
-  editMenu: React.ReactElement;
-};
-
-/**
- * A hyperlink menu shown when an anchor is hovered over.
- * It shows options to edit / remove / open the link
- */
-export const HyperlinkBasicMenu = (props: HyperlinkMenuProps) => {
-  const [isEditing, setIsEditing] = useState(false);
-  if (isEditing) {
-    return props.editMenu;
-  }
-
-  function onEditClick(e: React.MouseEvent) {
-    setIsEditing(true);
-    e.stopPropagation();
-  }
-
-  return (
-    <Toolbar>
-      <SimpleToolbarButton
-        mainTooltip="Edit"
-        isSelected={false}
-        onClick={onEditClick}>
-        Edit Link
-      </SimpleToolbarButton>
-
-      <ToolbarSeparator />
-
-      <SimpleToolbarButton
-        mainTooltip="Open in new tab"
-        isSelected={false}
-        onClick={() => {
-          window.open(props.href, "_blank");
-        }}
-        icon={RiExternalLinkFill}
-      />
-
-      <ToolbarSeparator />
-
-      <SimpleToolbarButton
-        mainTooltip="Remove link"
-        isSelected={false}
-        onClick={props.removeHandler}
-        icon={RiLinkUnlink}
-      />
-    </Toolbar>
-  );
-};

package/src/extensions/Hyperlinks/menus/HyperlinkEditMenu.tsx

@@ -1,72 +0,0 @@
-import Tippy from "@tippyjs/react";
-import { useState } from "react";
-import { RiLink, RiText } from "react-icons/ri";
-import { TooltipContent } from "../../../shared/components/tooltip/TooltipContent";
-import PanelTextInput from "./atlaskit/PanelTextInput";
-import {
-  Container,
-  ContainerWrapper,
-  IconWrapper,
-  TextInputWrapper,
-  UrlInputWrapper,
-} from "./atlaskit/ToolbarComponent";
-
-export type HyperlinkEditorMenuProps = {
-  url: string;
-  text: string;
-  onSubmit: (url: string, text: string) => void;
-};
-
-/**
- * The sub menu for editing an anchor element
- */
-export const HyperlinkEditMenu = (props: HyperlinkEditorMenuProps) => {
-  const [url, setUrl] = useState(props.url);
-  const [text, setText] = useState(props.text);
-
-  return (
-    <ContainerWrapper>
-      <Container provider={false}>
-        <UrlInputWrapper>
-          <IconWrapper>
-            <Tippy
-              content={<TooltipContent mainTooltip="Edit URL" />}
-              placement="left">
-              <span>
-                <RiLink size={20}></RiLink>
-              </span>
-            </Tippy>
-          </IconWrapper>
-          <PanelTextInput
-            defaultValue={url}
-            autoFocus={true}
-            onSubmit={(value) => {
-              props.onSubmit(value, text);
-            }}
-            onChange={(value) => {
-              setUrl(value);
-            }}></PanelTextInput>
-        </UrlInputWrapper>
-        <TextInputWrapper>
-          <IconWrapper>
-            <Tippy
-              content={<TooltipContent mainTooltip="Edit title" />}
-              placement="left">
-              <span>
-                <RiText size={20} />
-              </span>
-            </Tippy>
-          </IconWrapper>
-          <PanelTextInput
-            defaultValue={text!}
-            onSubmit={(value) => {
-              props.onSubmit(url, value);
-            }}
-            onChange={(value) => {
-              setText(value);
-            }}></PanelTextInput>
-        </TextInputWrapper>
-      </Container>
-    </ContainerWrapper>
-  );
-};

package/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInput.tsx

@@ -1,173 +0,0 @@
-import { KeyboardEvent, PureComponent } from "react";
-import { Input } from "./PanelTextInputStyles";
-import { FocusEvent } from "react";
-import browser from "../../../../lib/atlaskit/browser";
-
-// code adapted from https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/ui/PanelTextInput/index.tsx
-
-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;
-  // overrides default browser undo behaviour (cmd/ctrl + z) with that function
-  onUndo?: Function;
-  // overrides default browser redo behaviour (cm + shift + z / ctrl + y) with that function
-  onRedo?: Function;
-  onBlur?: Function;
-  width?: number;
-  maxLength?: number;
-  testId?: string;
-  ariaLabel?: string;
-  id?: string;
-}
-
-export interface State {
-  value?: string;
-}
-
-const KeyZCode = 90;
-const KeyYCode = 89;
-
-// returns an <Input> Component, used as an input field in HyperlinkEditMenu
-export default class PanelTextInput extends PureComponent<Props, State> {
-  private input?: HTMLInputElement;
-  private focusTimeoutId: number | undefined;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      value: props.defaultValue || "",
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.defaultValue !== this.props.defaultValue) {
-      this.setState({
-        value: nextProps.defaultValue,
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    window.clearTimeout(this.focusTimeoutId);
-  }
-
-  onMouseDown = () => {
-    const { onMouseDown } = this.props;
-    if (onMouseDown) {
-      onMouseDown();
-    }
-  };
-
-  onBlur = (e: FocusEvent<any>) => {
-    const { onBlur } = this.props;
-    if (onBlur) {
-      onBlur(e);
-    }
-  };
-
-  render() {
-    const { placeholder, width, maxLength, testId, ariaLabel } = this.props;
-    const { value } = this.state;
-    return (
-      <Input
-        data-testid={testId || ""}
-        type="text"
-        placeholder={placeholder}
-        value={value}
-        onChange={this.handleChange}
-        onKeyDown={this.handleKeydown}
-        onMouseDown={this.onMouseDown}
-        onBlur={this.onBlur}
-        ref={this.handleRef}
-        width={width}
-        maxLength={maxLength}
-        aria-label={ariaLabel}
-        id={this.props.id}
-        style={{ fontSize: `0.8rem` }}
-      />
-    );
-  }
-
-  focus() {
-    const { input } = this;
-    if (input) {
-      const focusOpts =
-        typeof this.props.autoFocus === "object" ? this.props.autoFocus : {};
-      input.focus(focusOpts);
-    }
-  }
-
-  private handleChange = () => {
-    const { onChange } = this.props;
-    if (this.input) {
-      this.setState({
-        value: this.input.value,
-      });
-    }
-
-    if (onChange && this.input) {
-      onChange(this.input.value);
-    }
-  };
-
-  private handleKeydown = (e: KeyboardEvent<any>) => {
-    const { onUndo, onRedo, onSubmit, onCancel } = this.props;
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-      onSubmit(this.input!.value);
-    } else if (e.keyCode === 27 && onCancel) {
-      onCancel(e);
-    } else if (typeof onUndo === "function" && this.isUndoEvent(e)) {
-      e.preventDefault();
-      onUndo();
-    } else if (typeof onRedo === "function" && this.isRedoEvent(e)) {
-      e.preventDefault();
-      onRedo();
-    }
-
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e);
-    }
-  };
-
-  private isUndoEvent(event: KeyboardEvent<any>) {
-    return (
-      event.keyCode === KeyZCode &&
-      // cmd + z for mac
-      ((browser.mac && event.metaKey && !event.shiftKey) ||
-        // ctrl + z for non-mac
-        (!browser.mac && event.ctrlKey))
-    );
-  }
-
-  private isRedoEvent(event: KeyboardEvent<any>) {
-    return (
-      // ctrl + y for non-mac
-      (!browser.mac && event.ctrlKey && event.keyCode === KeyYCode) ||
-      (browser.mac &&
-        event.metaKey &&
-        event.shiftKey &&
-        event.keyCode === KeyZCode) ||
-      (event.ctrlKey && event.shiftKey && event.keyCode === KeyZCode)
-    );
-  }
-
-  private handleRef = (input: HTMLInputElement | null) => {
-    if (input instanceof HTMLInputElement) {
-      this.input = input;
-      if (this.props.autoFocus) {
-        // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
-        this.focusTimeoutId = window.setTimeout(() => this.focus());
-      }
-    } else {
-      this.input = undefined;
-    }
-  };
-}

package/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInputStyles.ts

@@ -1,36 +0,0 @@
-import { N400, N800 } from "@atlaskit/theme/colors";
-import styled from "styled-components";
-
-// code taken from https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/ui/PanelTextInput/styles.ts
-
-// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-export const Input = styled.input`
-  input& {
-    autofocus: true;
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    box-sizing: content-box;
-    color: ${N400};
-    flex-grow: 1;
-    font-size: 13px;
-    line-height: 20px;
-    padding: 0;
-    ${(props) => (props.width ? `width: ${props.width}px` : "")};
-    min-width: 145px;
-
-    /* Hides IE10+ built-in [x] clear input button */
-    &::-ms-clear {
-      display: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: ${N800};
-      opacity: 0.5;
-    }
-  }
-`;

package/src/extensions/Hyperlinks/menus/atlaskit/README.md

@@ -1 +0,0 @@
-Helper code copied from AtlasKit