@blocknote/core 0.1.0-alpha.3

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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,36 @@
+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

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

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

@@ -0,0 +1,61 @@
+import styled, { css } from "styled-components";
+import { N80, N30 } from "@atlaskit/theme/colors";
+
+// code taken from https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/ui/LinkSearch/ToolbarComponents.tsx
+// and https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.tsx
+
+export const RECENT_SEARCH_WIDTH_IN_PX = 420;
+export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+
+// These components below are mainly used in HyperlinkEditMenu as wrapper components for input fields
+
+export const InputWrapper = `
+  display: flex;
+  line-height: 0;
+  padding: 4px 0;
+  align-items: center;
+`;
+
+export const UrlInputWrapper = styled.div`
+  ${InputWrapper}
+  border-bottom: none !important;
+`;
+
+export const Container = styled.div`
+  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 0;
+
+  ${({ provider }: { provider: boolean }) =>
+    css`
+      width: ${provider
+        ? RECENT_SEARCH_WIDTH_IN_PX
+        : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
+    `};
+  line-height: initial;
+`;
+
+export const TextInputWrapper = styled.div`
+  ${InputWrapper};
+  border-top: 1px solid ${N30};
+`;
+
+export const IconWrapper = styled.span`
+  color: ${N80};
+  padding: 3px 6px;
+  width: 32px;
+`;
+
+export const ContainerWrapper = styled.div`
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: rgb(9 30 66 / 31%) 0px 0px 1px,
+    rgb(9 30 66 / 25%) 0px 4px 8px -2px;
+  padding: 3px 6px;
+  display: flex;
+  line-height: 1;
+  box-sizing: border-box;
+`;

package/src/extensions/Paragraph/FixedParagraph.ts

@@ -0,0 +1,12 @@
+import Paragraph from "@tiptap/extension-paragraph";
+
+// Override paragraph to disable "Mod-Alt-0" shortcut throw invalid content for doc type error
+export const FixedParagraph = Paragraph.extend({
+  addKeyboardShortcuts: () => {
+    return {
+      "Mod-Alt-0": () => {
+        return false;
+      },
+    };
+  },
+});

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -0,0 +1,127 @@
+import { Editor, Extension } from "@tiptap/core";
+import { Node as ProsemirrorNode } from "prosemirror-model";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
+
+/**
+ * This is a modified version of the tiptap
+ * placeholder plugin, that also sets hasAnchorClass
+ *
+ * It does not set a data-placeholder (text is currently done in css)
+ *
+ */
+export interface PlaceholderOptions {
+  emptyEditorClass: string;
+  emptyNodeClass: string;
+  isFilterClass: string;
+  hasAnchorClass: string;
+  placeholder:
+    | ((PlaceholderProps: {
+        editor: Editor;
+        node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
+      }) => string)
+    | string;
+  showOnlyWhenEditable: boolean;
+  showOnlyCurrent: boolean;
+  includeChildren: boolean;
+}
+
+export const Placeholder = Extension.create<PlaceholderOptions>({
+  name: "placeholder",
+
+  addOptions() {
+    return {
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      isFilterClass: "is-filter",
+      hasAnchorClass: "has-anchor",
+      placeholder: "Write something …",
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          decorations: (state) => {
+            const { doc, selection } = state;
+            // Get state of slash menu
+            const menuState = SlashMenuPluginKey.getState(state);
+            const active =
+              this.editor.isEditable || !this.options.showOnlyWhenEditable;
+            const { anchor } = selection;
+            const decorations: Decoration[] = [];
+
+            if (!active) {
+              return;
+            }
+
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+              const isEmpty = !node.isLeaf && !node.childCount;
+
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                const classes = [this.options.emptyNodeClass];
+
+                if (this.editor.isEmpty) {
+                  classes.push(this.options.emptyEditorClass);
+                }
+
+                if (hasAnchor) {
+                  classes.push(this.options.hasAnchorClass);
+                }
+
+                // If slash menu is of drag type and active, show the filter placeholder
+                if (menuState.type === "drag" && menuState.active) {
+                  classes.push(this.options.isFilterClass);
+                }
+                // using widget, didn't work (caret position bug)
+                // const decoration = Decoration.widget(
+                //   pos + 1,
+                //   () => {
+                //     const el = document.createElement("span");
+                //     el.innerText = "hello";
+                //     return el;
+                //   },
+                //   { side: 0 }
+
+                // Code that sets variables / classes
+                // const ph =
+                //   typeof this.options.placeholder === "function"
+                //     ? this.options.placeholder({
+                //         editor: this.editor,
+                //         node,
+                //         pos,
+                //         hasAnchor,
+                //       })
+                //     : this.options.placeholder;
+                // const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                //   class: classes.join(" "),
+                //   style: `--placeholder:'${ph.replaceAll("'", "\\'")}';`,
+                //   "data-placeholder": ph,
+                // });
+
+                // Latest version, only set isEmpty and hasAnchor, rest is done via CSS
+
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                  class: classes.join(" "),
+                });
+                decorations.push(decoration);
+              }
+
+              return this.options.includeChildren;
+            });
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -0,0 +1,43 @@
+import { Extension } from "@tiptap/core";
+import { createSuggestionPlugin } from "../../shared/plugins/suggestion/SuggestionPlugin";
+import defaultCommands from "./defaultCommands";
+import { SlashMenuItem } from "./SlashMenuItem";
+import { PluginKey } from "prosemirror-state";
+
+export type SlashMenuOptions = {
+  commands: { [key: string]: SlashMenuItem };
+};
+
+export const SlashMenuPluginKey = new PluginKey("suggestions-slash-commands");
+
+export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
+  name: "slash-command",
+
+  addOptions() {
+    return {
+      commands: defaultCommands,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      createSuggestionPlugin<SlashMenuItem>({
+        pluginKey: SlashMenuPluginKey,
+        editor: this.editor,
+        char: "/",
+        items: (query) => {
+          const commands = [];
+
+          for (const key in this.options.commands) {
+            commands.push(this.options.commands[key]);
+          }
+
+          return commands.filter((cmd: SlashMenuItem) => cmd.match(query));
+        },
+        onSelectItem: ({ item, editor, range }) => {
+          item.execute(editor, range);
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -0,0 +1,56 @@
+import { Editor, Range } from "@tiptap/core";
+import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
+
+export type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
+
+export enum SlashMenuGroups {
+  HEADINGS = "Headings",
+  BASIC_BLOCKS = "Basic Blocks",
+  CODE = "Code Blocks",
+
+  // Just some examples, that are not currently in use
+  INLINE = "Inline",
+  EMBED = "Embed",
+  PLUGIN = "Plugin",
+}
+
+/**
+ * A class that defines a slash command (/<command>).
+ *
+ * Not to be confused with ProseMirror commands nor TipTap commands.
+ */
+export class SlashMenuItem implements SuggestionItem {
+  groupName: string;
+  // other parameters initialized in the constructor
+
+  /**
+   * Constructs a new slash-command.
+   *
+   * @param name The name of the command
+   * @param group Used to organize the menu
+   * @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 shortcut Info about keyboard shortcut that would activate this command
+   */
+  constructor(
+    public readonly name: string,
+    public readonly group: SlashMenuGroups,
+    public readonly execute: SlashMenuCallback,
+    public readonly aliases: string[] = [],
+    public readonly icon?: React.ComponentType<{ className: string }>,
+    public readonly hint?: string,
+    public readonly shortcut?: string
+  ) {
+    this.groupName = group;
+  }
+
+  match(query: string): boolean {
+    return (
+      this.name.toLowerCase().startsWith(query.toLowerCase()) ||
+      this.aliases.filter((alias) =>
+        alias.toLowerCase().startsWith(query.toLowerCase())
+      ).length !== 0
+    );
+  }
+}