@blocknote/core 0.1.0-alpha.3

package/src/globals.css

@@ -0,0 +1,28 @@
+@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/index.ts

@@ -0,0 +1,5 @@
+import "./globals.css";
+
+export * from "./BlockNoteExtensions";
+export * from "./EditorContent";
+export * from "./useEditor";

package/src/lib/atlaskit/browser.ts

@@ -0,0 +1,47 @@
+// from atlaskit/editor-common
+const result = {
+  mac: false,
+  ie: false,
+  ie_version: 0,
+  gecko: false,
+  chrome: false,
+  chrome_version: 0,
+  android: false,
+  ios: false,
+  webkit: false,
+};
+
+if (typeof navigator !== "undefined") {
+  const ieEdge = /Edge\/(\d+)/.exec(navigator.userAgent);
+  const ieUpTo10 = /MSIE \d/.test(navigator.userAgent);
+  const ie11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(
+    navigator.userAgent
+  );
+
+  result.mac = /Mac/.test(navigator.platform);
+  let ie = (result.ie = !!(ieUpTo10 || ie11up || ieEdge));
+  result.ie_version = ieUpTo10
+    ? (document as any).documentMode || 6
+    : ie11up
+    ? +ie11up[1]
+    : ieEdge
+    ? +ieEdge[1]
+    : null;
+  result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
+  result.chrome_version = parseInt(
+    (navigator.userAgent.match(/Chrome\/(\d{2})/) || [])[1],
+    10
+  );
+  result.android = /Android \d/.test(navigator.userAgent);
+  result.ios =
+    !ie &&
+    /AppleWebKit/.test(navigator.userAgent) &&
+    /Mobile\/\w+/.test(navigator.userAgent);
+  result.webkit =
+    !ie &&
+    !!document.documentElement &&
+    "WebkitAppearance" in document.documentElement.style;
+}
+
+export default result;

package/src/root.module.css

@@ -0,0 +1,19 @@
+/*
+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/SimpleToolbarButton.module.css

@@ -0,0 +1,13 @@
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: var(--N800);
+}
+
+.isSelected {
+  fill: white;
+}
+
+.isDisabled {
+  fill: gray;
+}

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

@@ -0,0 +1,56 @@
+import Button from "@atlaskit/button";
+import Tippy from "@tippyjs/react";
+import { forwardRef } from "react";
+import styles from "./SimpleToolbarButton.module.css";
+import { TooltipContent } from "../tooltip/TooltipContent";
+import React from "react";
+
+export type SimpleToolbarButtonProps = {
+  onClick?: (e: React.MouseEvent) => void;
+  icon?: React.ComponentType<{ className: string }>;
+  mainTooltip: string;
+  secondaryTooltip?: string;
+  isSelected?: boolean;
+  children?: any;
+  isDisabled?: boolean;
+};
+
+/**
+ * Helper for basic buttons that show in the inline bubble menu.
+ */
+export const SimpleToolbarButton = forwardRef(
+  (props: SimpleToolbarButtonProps, ref) => {
+    const ButtonIcon = props.icon;
+    return (
+      <Tippy
+        content={
+          <TooltipContent
+            mainTooltip={props.mainTooltip}
+            secondaryTooltip={props.secondaryTooltip}
+          />
+        }>
+        <Button
+          ref={ref as any}
+          appearance="subtle"
+          onClick={props.onClick}
+          isSelected={props.isSelected || false}
+          isDisabled={props.isDisabled || false}
+          iconBefore={
+            ButtonIcon && (
+              <ButtonIcon
+                className={
+                  styles.icon +
+                  " " +
+                  (props.isSelected ? styles.isSelected : "") +
+                  " " +
+                  (props.isDisabled ? styles.isDisabled : "")
+                }
+              />
+            )
+          }>
+          {props.children}
+        </Button>
+      </Tippy>
+    );
+  }
+);

package/src/shared/components/toolbar/Toolbar.module.css

@@ -0,0 +1,10 @@
+.toolbar {
+  color: var(--N800);
+  background-color: white;
+  border: 1px solid var(--N40);
+  box-shadow: 0px 4px 8px rgba(9, 30, 66, 0.15),
+    0px 0px 1px rgba(9, 30, 66, 0.21);
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.42857142857143;
+}

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

@@ -0,0 +1,5 @@
+import styles from "./Toolbar.module.css";
+
+export const Toolbar = (props: { children: any }) => {
+  return <div className={styles.toolbar}>{props.children}</div>;
+};

package/src/shared/components/toolbar/ToolbarSeparator.module.css

@@ -0,0 +1,13 @@
+.separator {
+  padding-left: 0.1em !important;
+  padding-right: 0.1em !important;
+}
+.separator::before {
+  content: "|";
+  color: lightgray;
+}
+
+.separator:hover {
+  cursor: auto !important;
+  background: white !important;
+}

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

@@ -0,0 +1,7 @@
+import styles from "./ToolbarSeparator.module.css";
+import Button from "@atlaskit/button";
+
+export const ToolbarSeparator = () => {
+  //   return <span className={styles.separator}></span>;
+  return <Button appearance="subtle" className={styles.separator} />;
+};

package/src/shared/components/tooltip/TooltipContent.module.css

@@ -0,0 +1,15 @@
+.tooltip {
+  color: var(--N40);
+  background-color: var(--N800);
+  box-shadow: 0 0 10px rgba(253, 254, 255, 0.8),
+    0 0 3px rgba(253, 254, 255, 0.4);
+  border-radius: 2px;
+  font-size: smaller;
+  text-align: center;
+  padding: 4px;
+}
+
+.secondaryText {
+  font-weight: 400;
+  opacity: 0.6;
+}

package/src/shared/components/tooltip/TooltipContent.tsx

@@ -0,0 +1,23 @@
+import styles from "./TooltipContent.module.css";
+
+/**
+ * Helper for the tooltip for inline bubble menu buttons.
+ *
+ * Often used to display a tooltip showing the command name + keyboard shortcut, e.g.:
+ *
+ *      Bold
+ *      Ctrl+B
+ *
+ * TODO: maybe use default Tippy styles instead?
+ */
+export const TooltipContent = (props: {
+  mainTooltip: string;
+  secondaryTooltip?: string;
+}) => (
+  <div className={styles.tooltip}>
+    <div>{props.mainTooltip}</div>
+    {props.secondaryTooltip && (
+      <div className={styles.secondaryText}>{props.secondaryTooltip}</div>
+    )}
+  </div>
+);

package/src/shared/hooks/useEditorForceUpdate.tsx

@@ -0,0 +1,30 @@
+import { Editor } from "@tiptap/core";
+import { useEffect, useState } from "react";
+
+function useForceUpdate() {
+  const [, setValue] = useState(0);
+
+  return () => setValue((value) => value + 1);
+}
+
+// This is a component that is similar to https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/useEditor.ts
+// Use it to rerender a component whenever a transaction happens in the editor
+export const useEditorForceUpdate = (editor: Editor) => {
+  const forceUpdate = useForceUpdate();
+
+  useEffect(() => {
+    const callback = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          forceUpdate();
+        });
+      });
+    };
+
+    editor.on("transaction", callback);
+    return () => {
+      editor.off("transaction", callback);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+};

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

@@ -0,0 +1,31 @@
+/**
+ * A generic interface used in all suggestion menus (slash menu, mentions, etc)
+ */
+export default interface SuggestionItem {
+  /**
+   * The name of the item
+   */
+  name: string;
+
+  /**
+   * The name of the group to which this item belongs
+   */
+  groupName: string;
+
+  /**
+   * The react icon
+   */
+  icon?: React.ComponentType<{ className: string }>;
+
+  hint?: string;
+
+  shortcut?: string;
+
+  /**
+   * This function matches this item against a query string, the function should return **true** if the item
+   * matches the query or **false** otherwise.
+   *
+   * @param query the query string
+   */
+  match(query: string): boolean;
+}

package/src/shared/plugins/suggestion/SuggestionListReactRenderer.ts

@@ -0,0 +1,227 @@
+import { Editor as ReactEditor, ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/core";
+import tippy, { Instance } from "tippy.js";
+import SuggestionItem from "./SuggestionItem";
+import {
+  SuggestionList,
+  SuggestionListProps,
+} from "./components/SuggestionList";
+
+/**
+ * The interface that each suggestion renderer should conform to.
+ */
+export interface SuggestionRenderer<T extends SuggestionItem> {
+  /**
+   * Disposes of the suggestion menu.
+   */
+  onExit?: (props: SuggestionRendererProps<T>) => void;
+
+  /**
+   * Updates the suggestion menu.
+   *
+   * This function should be called when the renderer's `props` change,
+   * after `onStart` has been called.
+   */
+  onUpdate?: (props: SuggestionRendererProps<T>) => void;
+
+  /**
+   * Creates and displays a new suggestion menu popup.
+   */
+  onStart?: (props: SuggestionRendererProps<T>) => void;
+
+  /**
+   * Function for handling key events
+   */
+  onKeyDown?: (event: KeyboardEvent) => boolean;
+
+  /**
+   * The DOM Element representing the suggestion menu
+   */
+  getComponent: () => Element | undefined;
+}
+
+export type SuggestionRendererProps<T extends SuggestionItem> = {
+  /**
+   * Object containing all suggestion items, grouped by their `groupName`.
+   */
+  groups: {
+    [groupName: string]: T[];
+  };
+
+  /**
+   * The total number of suggestion-items.
+   */
+  count: number;
+
+  /**
+   * This callback is executed whenever the user selects an item.
+   *
+   * @param item the selected item
+   */
+  onSelectItem: (item: T) => void;
+
+  /**
+   * A function returning the client rect to use as reference for positioning the suggestion menu popup.
+   */
+  clientRect: (() => DOMRect) | null;
+
+  /**
+   * This callback is executed when the suggestion menu needs to be closed,
+   * e.g. when the user presses escape.
+   */
+  onClose: () => void;
+};
+
+/**
+ * This function creates a SuggestionRenderer based on TipTap's ReactRenderer utility.
+ *
+ * The resulting renderer can be used to display a suggestion menu containing (grouped) suggestion items.
+ *
+ * This renderer also takes care of the following key events:
+ * - Key up/down, for navigating the suggestion menu (selecting different items)
+ * - Enter for picking the currently selected item and closing the menu
+ * - Escape to close the menu, without taking action
+ *
+ * @param editor the TipTap editor
+ * @returns the newly constructed SuggestionRenderer
+ */
+export default function createRenderer<T extends SuggestionItem>(
+  editor: Editor
+): SuggestionRenderer<T> {
+  let component: ReactRenderer;
+  let popup: Instance[];
+  let componentsDisposedOrDisposing = true;
+  let selectedIndex = 0;
+  let props: SuggestionRendererProps<T> | undefined;
+
+  /**
+   * Helper function to find out what item corresponds to a certain index.
+   *
+   * This function might throw an error if the index is invalid,
+   * or when this function is not called in the proper environment.
+   *
+   * @param index the index
+   * @returns the item that corresponds to the index
+   */
+  const itemByIndex = (index: number): T => {
+    if (!props) {
+      throw new Error("props not set");
+    }
+    let currentIndex = 0;
+    for (const groupName in props.groups) {
+      const items = props.groups[groupName];
+      const groupSize = items.length;
+      // Check if index lies within this group
+      if (index < currentIndex + groupSize) {
+        return items[index - currentIndex];
+      }
+      currentIndex += groupSize;
+    }
+    throw Error("item not found");
+  };
+
+  return {
+    getComponent: () => {
+      if (!popup || !popup[0]) {
+        return undefined;
+      }
+      // return the tippy container element, this is used to ensure
+      // that click events inside the menu are handled properly.
+      return popup[0].reference;
+    },
+    onStart: (newProps) => {
+      props = newProps;
+      componentsDisposedOrDisposing = false;
+      selectedIndex = 0;
+      const componentProps: SuggestionListProps<T> = {
+        groups: newProps.groups,
+        count: newProps.count,
+        onSelectItem: newProps.onSelectItem,
+        selectedIndex,
+      };
+
+      component = new ReactRenderer(SuggestionList as any, {
+        editor: editor as ReactEditor,
+        props: componentProps,
+      });
+
+      popup = tippy("body", {
+        getReferenceClientRect: newProps.clientRect,
+        appendTo: () => document.body,
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+
+    onUpdate: (newProps) => {
+      props = newProps;
+      if (props.groups !== component.props.groups) {
+        // if the set of items is different (e.g.: by typing / searching), reset the selectedIndex to 0
+        selectedIndex = 0;
+      }
+      const componentProps: SuggestionListProps<T> = {
+        groups: props.groups,
+        count: props.count,
+        onSelectItem: props.onSelectItem,
+        selectedIndex,
+      };
+      component.updateProps(componentProps);
+
+      popup[0].setProps({
+        getReferenceClientRect: props.clientRect,
+      });
+    },
+
+    onKeyDown: (event) => {
+      if (!props) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        selectedIndex = (selectedIndex + props.count - 1) % props.count;
+        component.updateProps({
+          selectedIndex,
+        });
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        selectedIndex = (selectedIndex + 1) % props.count;
+        component.updateProps({
+          selectedIndex,
+        });
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        const item = itemByIndex(selectedIndex);
+        props.onSelectItem(item);
+        return true;
+      }
+
+      if (event.key === "Escape") {
+        props.onClose();
+        return true;
+      }
+      return false;
+    },
+
+    onExit: (_props) => {
+      if (componentsDisposedOrDisposing) {
+        return;
+      }
+      // onExit, first hide tippy popup so it shows fade-out
+      // then (after 1 second, actually destroy resources)
+      componentsDisposedOrDisposing = true;
+      const popupToDestroy = popup[0];
+      const componentToDestroy = component;
+      popupToDestroy.hide();
+      setTimeout(() => {
+        popupToDestroy.destroy();
+        componentToDestroy.destroy();
+      }, 1000);
+    },
+  };
+}