@blocknote/core 0.1.1 → 0.2.0

package/src/extensions/Hyperlinks/HyperlinkMenuPlugin.tsx

@@ -1,165 +0,0 @@
-import { MantineProvider } from "@mantine/core";
-import Tippy from "@tippyjs/react";
-import { getMarkRange } from "@tiptap/core";
-import { Mark, ResolvedPos } from "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
-import ReactDOM from "react-dom";
-import { BlockNoteTheme } from "../../BlockNoteTheme";
-import { HyperlinkMenu } from "./menus/HyperlinkMenu";
-const PLUGIN_KEY = new PluginKey("HyperlinkMenuPlugin");
-
-export const createHyperlinkMenuPlugin = () => {
-  // as we always use Tippy appendTo(document.body), we can just create an element
-  // that we use for ReactDOM, but it isn't used anywhere (except by React internally)
-  const fakeRenderTarget = document.createElement("div");
-
-  let hoveredLink: HTMLAnchorElement | undefined;
-  let menuState: "cursor-based" | "mouse-based" | "hidden" = "hidden";
-  let nextTippyKey = 0;
-
-  return new Plugin({
-    key: PLUGIN_KEY,
-    view() {
-      return {
-        update: async (view, _prevState) => {
-          const selection = view.state.selection;
-          if (selection.from !== selection.to) {
-            // don't show menu when we have an active selection
-            if (menuState !== "hidden") {
-              menuState = "hidden";
-              ReactDOM.render(<></>, fakeRenderTarget);
-            }
-            return;
-          }
-
-          let pos: number | undefined;
-          let resPos: ResolvedPos | undefined;
-          let linkMark: Mark | undefined;
-          let basedOnCursorPos = false;
-          if (hoveredLink) {
-            pos = view.posAtDOM(hoveredLink.firstChild!, 0);
-            resPos = view.state.doc.resolve(pos);
-            // based on https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/helpers/getMarkRange.ts
-            const start = resPos.parent.childAfter(resPos.parentOffset).node;
-            linkMark = start?.marks.find((m) => m.type.name.startsWith("link"));
-          }
-
-          if (
-            !linkMark &&
-            (view.hasFocus() || menuState === "cursor-based") // prevents re-opening menu after submission. Only open cursor-based menu if editor has focus
-          ) {
-            // no hovered link mark, try get from cursor position
-            pos = selection.from;
-            resPos = view.state.doc.resolve(pos);
-            const start = resPos.parent.childAfter(resPos.parentOffset).node;
-            linkMark = start?.marks.find((m) => m.type.name.startsWith("link"));
-            basedOnCursorPos = true;
-          }
-
-          if (!linkMark || !pos || !resPos) {
-            // The mouse-based popup takes care of hiding itself (tippy)
-            // Because the cursor-based popup is has "showOnCreate", we want to hide it manually
-            // if the cursor moves way
-            if (menuState === "cursor-based") {
-              menuState = "hidden";
-              ReactDOM.render(<></>, fakeRenderTarget);
-            }
-            return;
-          }
-
-          const range = getMarkRange(resPos, linkMark.type, linkMark.attrs);
-          if (!range) {
-            return;
-          }
-          const text = view.state.doc.textBetween(range.from, range.to);
-          const url = linkMark.attrs.href;
-
-          const anchorPos = {
-            // use the 'median' position of the range
-            ...view.coordsAtPos(Math.round((range.from + range.to) / 2)),
-            height: 0, // needed to satisfy types
-            width: 0,
-          };
-
-          const foundLinkMark = linkMark; // typescript workaround for event handlers
-
-          // A URL has to begin with http(s):// to be interpreted as an absolute path
-          const editHandler = (href: string, text: string) => {
-            menuState = "hidden";
-            ReactDOM.render(<></>, fakeRenderTarget);
-
-            // update the mark with new href
-            (foundLinkMark as any).attrs = { ...foundLinkMark.attrs, href }; // TODO: invalid assign to attrs
-            // insertText actually replaces the range with text
-            const tr = view.state.tr.insertText(text, range.from, range.to);
-            // the former range.to is no longer in use
-            tr.addMark(range.from, range.from + text.length, foundLinkMark);
-            view.dispatch(tr);
-          };
-
-          const removeHandler = () => {
-            view.dispatch(
-              view.state.tr
-                .removeMark(range.from, range.to, foundLinkMark.type)
-                .setMeta("preventAutolink", true)
-            );
-          };
-
-          const hyperlinkMenu = (
-            <MantineProvider theme={BlockNoteTheme}>
-              <Tippy
-                key={nextTippyKey + ""} // it could be tippy has "hidden" itself after mouseout. We use a key to get a new instance with a clean state.
-                getReferenceClientRect={() => anchorPos as any}
-                content={
-                  <HyperlinkMenu
-                    update={editHandler}
-                    pos={anchorPos}
-                    remove={removeHandler}
-                    text={text}
-                    url={url}
-                  />
-                }
-                onHide={() => {
-                  nextTippyKey++;
-                  menuState = "hidden";
-                }}
-                aria={{ expanded: false }}
-                interactive={true}
-                interactiveBorder={30}
-                triggerTarget={hoveredLink}
-                showOnCreate={basedOnCursorPos}
-                appendTo={document.body}>
-                <div></div>
-              </Tippy>
-            </MantineProvider>
-          );
-          ReactDOM.render(hyperlinkMenu, fakeRenderTarget);
-          menuState = basedOnCursorPos ? "cursor-based" : "mouse-based";
-        },
-      };
-    },
-
-    props: {
-      handleDOMEvents: {
-        // update view when an <a> is hovered over
-        mouseover(view, event: any) {
-          const newHoveredLink =
-            event.target instanceof HTMLAnchorElement &&
-            event.target.nodeName === "A"
-              ? event.target
-              : undefined;
-
-          if (newHoveredLink !== hoveredLink) {
-            // dispatch a meta transaction to make sure the view gets updated
-            hoveredLink = newHoveredLink;
-
-            view.dispatch(
-              view.state.tr.setMeta(PLUGIN_KEY, { hoveredLinkChanged: true })
-            );
-          }
-          return false;
-        },
-      },
-    },
-  });
-};

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

@@ -1,44 +0,0 @@
-import { createStyles, Stack } from "@mantine/core";
-import { useState } from "react";
-import { RiLink, RiText } from "react-icons/ri";
-import { EditHyperlinkMenuItem } from "./EditHyperlinkMenuItem";
-
-export 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 const EditHyperlinkMenu = (props: EditHyperlinkMenuProps) => {
-  const [url, setUrl] = useState(props.url);
-  const [title, setTitle] = useState(props.text);
-  const { classes } = createStyles({ root: {} })(undefined, {
-    name: "EditHyperlinkMenu",
-  });
-
-  return (
-    <Stack className={classes.root}>
-      <EditHyperlinkMenuItem
-        icon={RiLink}
-        mainIconTooltip={"Edit URL"}
-        autofocus={true}
-        placeholder={"Edit URL"}
-        value={url}
-        onChange={(value) => setUrl(value)}
-        onSubmit={() => props.update(url, title)}
-      />
-      <EditHyperlinkMenuItem
-        icon={RiText}
-        mainIconTooltip={"Edit Title"}
-        placeholder={"Edit Title"}
-        value={title}
-        onChange={(value) => setTitle(value)}
-        onSubmit={() => props.update(url, title)}
-      />
-    </Stack>
-  );
-};

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

@@ -1,34 +0,0 @@
-import { IconType } from "react-icons";
-import { EditHyperlinkMenuItemIcon } from "./EditHyperlinkMenuItemIcon";
-import { EditHyperlinkMenuItemInput } from "./EditHyperlinkMenuItemInput";
-import { Group } from "@mantine/core";
-
-export type EditHyperlinkMenuItemProps = {
-  icon: IconType;
-  mainIconTooltip: string;
-  secondaryIconTooltip?: string;
-  autofocus?: boolean;
-  placeholder?: string;
-  value?: string;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-};
-
-export function EditHyperlinkMenuItem(props: EditHyperlinkMenuItemProps) {
-  return (
-    <Group>
-      <EditHyperlinkMenuItemIcon
-        icon={props.icon}
-        mainTooltip={props.mainIconTooltip}
-        secondaryTooltip={props.secondaryIconTooltip}
-      />
-      <EditHyperlinkMenuItemInput
-        autofocus={props.autofocus}
-        placeholder={props.placeholder}
-        value={props.value}
-        onChange={props.onChange}
-        onSubmit={props.onSubmit}
-      />
-    </Group>
-  );
-}

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

@@ -1,31 +0,0 @@
-import { IconType } from "react-icons";
-import Tippy from "@tippyjs/react";
-import { TooltipContent } from "../../../shared/components/tooltip/TooltipContent";
-import { Container } from "@mantine/core";
-
-export type EditHyperlinkMenuItemIconProps = {
-  icon: IconType;
-  mainTooltip: string;
-  secondaryTooltip?: string;
-};
-
-export function EditHyperlinkMenuItemIcon(
-  props: EditHyperlinkMenuItemIconProps
-) {
-  const Icon = props.icon;
-
-  return (
-    <Tippy
-      content={
-        <TooltipContent
-          mainTooltip={props.mainTooltip}
-          secondaryTooltip={props.secondaryTooltip}
-        />
-      }
-      placement="left">
-      <Container>
-        <Icon size={16}></Icon>
-      </Container>
-    </Tippy>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { KeyboardEvent, useEffect, useRef } from "react";
-import { TextInput } from "@mantine/core";
-
-export type EditHyperlinkMenuItemInputProps = {
-  autofocus?: boolean;
-  placeholder?: string;
-  value?: string;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-};
-
-export function EditHyperlinkMenuItemInput(
-  props: EditHyperlinkMenuItemInputProps
-) {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      props.autofocus && inputRef.current?.focus();
-    });
-  }, [props.autofocus]);
-
-  function handleEnter(event: KeyboardEvent) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      props.onSubmit();
-    }
-  }
-
-  return (
-    <TextInput
-      size={"xs"}
-      value={props.value}
-      onChange={(event) => props.onChange(event.currentTarget.value)}
-      onKeyDown={handleEnter}
-      placeholder={props.placeholder}
-      ref={inputRef}
-    />
-  );
-}

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

@@ -1,37 +0,0 @@
-import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
-import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
-import { ToolbarButton } from "../../../shared/components/toolbar/ToolbarButton";
-
-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 const HoverHyperlinkMenu = (props: HoverHyperlinkMenuProps) => {
-  return (
-    <Toolbar>
-      <ToolbarButton mainTooltip="Edit" isSelected={false} onClick={props.edit}>
-        Edit Link
-      </ToolbarButton>
-      <ToolbarButton
-        mainTooltip="Open in new tab"
-        isSelected={false}
-        onClick={() => {
-          window.open(props.url, "_blank");
-        }}
-        icon={RiExternalLinkFill}
-      />
-      <ToolbarButton
-        mainTooltip="Remove link"
-        isSelected={false}
-        onClick={props.remove}
-        icon={RiLinkUnlink}
-      />
-    </Toolbar>
-  );
-};

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

@@ -1,63 +0,0 @@
-import { useState } from "react";
-import Tippy from "@tippyjs/react";
-import { EditHyperlinkMenu } from "./EditHyperlinkMenu";
-import { HoverHyperlinkMenu } from "./HoverHyperlinkMenu";
-import rootStyles from "../../../root.module.css";
-
-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 const HyperlinkMenu = (props: HyperlinkMenuProps) => {
-  const [isEditing, setIsEditing] = useState(false);
-
-  const editHyperlinkMenu = (
-    <Tippy
-      getReferenceClientRect={() => props.pos as any}
-      content={
-        <EditHyperlinkMenu
-          url={props.url}
-          text={props.text}
-          update={props.update}
-        />
-      }
-      interactive={true}
-      interactiveBorder={30}
-      showOnCreate={true}
-      trigger={"click"} // so that we don't hide on mouse out
-      hideOnClick
-      className={rootStyles.bnRoot}
-      appendTo={document.body}>
-      <div></div>
-    </Tippy>
-  );
-
-  const hoverHyperlinkMenu = (
-    <HoverHyperlinkMenu
-      url={props.url}
-      edit={() => setIsEditing(true)}
-      remove={props.remove}
-    />
-  );
-
-  if (isEditing) {
-    return editHyperlinkMenu;
-  } else {
-    return hoverHyperlinkMenu;
-  }
-};

package/src/fonts-inter.css

@@ -1,94 +0,0 @@
-/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
-
-/* inter-100 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 100;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-200 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 200;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-300 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 300;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-regular - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-regular.woff2")
-      format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-regular.woff")
-      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-500 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-600 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-700 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-800 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 800;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-900 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 900;
-  src: local(""),
-    url("./assets/inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./assets/inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}

package/src/globals.css

@@ -1,28 +0,0 @@
-@import url("fonts-inter.css");
-
-/* TODO: should not be on root as this changes entire consuming application */
-
-:root {
-  /* Define a set of colors to be used throughout the app for consistency
-  see https://atlassian.design/foundations/color for more info */
-  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
-  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
-
-  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
-    "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  color: rgb(60, 65, 73);
-}
-
-button {
-  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
-    "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  color: rgb(60, 65, 73);
-}

package/src/root.module.css

@@ -1,19 +0,0 @@
-/*
-bnRoot should be applied to all top-level elements
-
-This includes the Prosemirror editor, but also <div> element such as 
-Tippy popups that are appended to document.body directly
-*/
-.bnRoot {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.bnRoot *,
-.bnRoot *::before,
-.bnRoot *::after {
-  -webkit-box-sizing: inherit;
-  -moz-box-sizing: inherit;
-  box-sizing: inherit;
-}

package/src/shared/components/toolbar/Toolbar.tsx

@@ -1,10 +0,0 @@
-import { createStyles, Group } from "@mantine/core";
-import { ReactNode } from "react";
-
-export const Toolbar = (props: { children: ReactNode }) => {
-  const { classes } = createStyles({ root: {} })(undefined, {
-    name: "Toolbar",
-  });
-
-  return <Group className={classes.root}>{props.children}</Group>;
-};

package/src/shared/components/toolbar/ToolbarButton.tsx

@@ -1,57 +0,0 @@
-import { ActionIcon, Button } from "@mantine/core";
-import Tippy from "@tippyjs/react";
-import { forwardRef } from "react";
-import { TooltipContent } from "../tooltip/TooltipContent";
-import React from "react";
-import { IconType } from "react-icons";
-
-export 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 const ToolbarButton = forwardRef((props: ToolbarButtonProps, ref) => {
-  const ButtonIcon = props.icon;
-  return (
-    <Tippy
-      content={
-        <TooltipContent
-          mainTooltip={props.mainTooltip}
-          secondaryTooltip={props.secondaryTooltip}
-        />
-      }
-      trigger={"mouseenter"}>
-      {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
-      {props.children ? (
-        <Button
-          onClick={props.onClick}
-          color={"brandFinal"}
-          size={"xs"}
-          variant={props.isSelected ? "filled" : "subtle"}
-          disabled={props.isDisabled || false}
-          ref={ref as any}>
-          {ButtonIcon && <ButtonIcon />}
-          {props.children}
-        </Button>
-      ) : (
-        <ActionIcon
-          onClick={props.onClick}
-          color={"brandFinal"}
-          size={30}
-          variant={props.isSelected ? "filled" : "subtle"}
-          disabled={props.isDisabled || false}
-          ref={ref as any}>
-          {ButtonIcon && <ButtonIcon />}
-        </ActionIcon>
-      )}
-    </Tippy>
-  );
-});

package/src/shared/components/toolbar/ToolbarDropdown.tsx

@@ -1,35 +0,0 @@
-import { Menu } from "@mantine/core";
-import { IconType } from "react-icons";
-import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
-import { MouseEvent } from "react";
-import { ToolbarDropdownItem } from "./ToolbarDropdownItem";
-
-export 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 function ToolbarDropdown(props: ToolbarDropdownProps) {
-  return (
-    <Menu exitTransitionDuration={0}>
-      <Menu.Target>
-        <ToolbarDropdownTarget {...props} />
-      </Menu.Target>
-      <Menu.Dropdown>
-        {props.items.map((item) => (
-          <ToolbarDropdownItem key={item.text} {...item} />
-        ))}
-      </Menu.Dropdown>
-    </Menu>
-  );
-}