@blocknote/core 0.1.0-alpha.3 → 0.1.1

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

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

@@ -1,61 +0,0 @@
-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/helpers/formatKeyboardShortcut.ts

@@ -1,9 +0,0 @@
-import browser from "../../lib/atlaskit/browser";
-
-export default function formatKeyboardShortcut(shortcut: string) {
-  if (browser.ios || browser.mac) {
-    return shortcut.replace("Mod", "⌘");
-  } else {
-    return shortcut.replace("Mod", "Ctrl");
-  }
-}

package/src/lib/atlaskit/browser.ts

@@ -1,47 +0,0 @@
-// 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/shared/components/toolbar/SimpleToolbarButton.module.css

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

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

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

@@ -1,10 +0,0 @@
-.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/ToolbarSeparator.module.css

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

@@ -1,7 +0,0 @@
-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/plugins/suggestion/components/SuggestionGroup.module.css

@@ -1,45 +0,0 @@
-.suggestionWrapper {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  white-space: initial;
-  padding: 0px;
-}
-
-.buttonName {
-  font-size: small;
-  margin-bottom: 4px;
-}
-.buttonHint {
-  font-size: smaller;
-  color: rgb(128, 128, 128);
-}
-.buttonShortcut {
-  font-size: x-small;
-  color: rgb(128, 128, 128);
-  background-color: rgba(128, 128, 128, 0.2);
-  vertical-align: top;
-  padding: 3px;
-  border-radius: 3px;
-}
-.iconWrapper {
-  border: 1px solid rgba(128, 128, 128, 0.5);
-  border-radius: 4px;
-  background-color: white;
-  width: 40px;
-  height: 40px;
-  padding: 10px;
-}
-.icon {
-  width: 20px;
-  height: 20px;
-  fill: var(--N800);
-}
-.icon path[fill="none"] {
-  stroke: none;
-}
-
-.selectedIcon path {
-  stroke: var(--N800);
-  stroke-width: 1px;
-}

package/src/shared/plugins/suggestion/components/SuggestionList.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;
-}