Marcos/testing

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hackernoon/rich-markdown-editor",
   "description": "A rich text editor with Markdown shortcuts",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "license": "BSD-3-Clause",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@hackernoon/uppload": "^3.2.3",
+    "@storybook/addon-postcss": "^2.0.0",
     "copy-to-clipboard": "^3.0.8",
     "fuzzy-search": "^3.2.1",
     "gemoji": "6.x",
@@ -101,8 +102,8 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.6.3",
     "prettier": "^1.19.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "source-map-loader": "^0.2.4",
     "styled-components": "^5.2.1",
     "ts-loader": "^6.2.1",

src/components/LinkToolbar.tsx

@@ -12,6 +12,7 @@ type Props = {
   dictionary: typeof baseDictionary;
   onCreateLink?: (title: string) => Promise<string>;
   onSearchLink?: (term: string) => Promise<SearchResult[]>;
+  handleLinkSelected?: (href: string, title: string) => void
   onClickLink: (href: string, event: MouseEvent) => void;
   onShowToast?: (msg: string, code: string) => void;
   onClose: () => void;
@@ -103,10 +104,11 @@ export default class LinkToolbar extends React.Component<Props> {
     from: number;
     to: number;
   }) => {
-    const { view, onClose } = this.props;
+    const { view, onClose, handleLinkSelected } = this.props;
 
     onClose();
     this.props.view.focus();
+    if(handleLinkSelected) handleLinkSelected(href, title);
 
     const { dispatch, state } = view;
     const { from, to } = state.selection;

src/index.tsx

@@ -126,6 +126,7 @@ export type Props = {
   readOnlyWriteCheckboxes?: boolean;
   dictionary?: Partial<typeof baseDictionary>;
   dark?: boolean;
+  enablePeopleTag?: boolean; //enable people tagging system, based on onSearchLink
   dir?: string;
   theme?: typeof theme;
   template?: boolean;
@@ -146,6 +147,7 @@ export type Props = {
   onImageUploadStop?: () => void;
   onCreateLink?: (title: string) => Promise<string>;
   onSearchLink?: (term: string) => Promise<SearchResult[]>;
+  handleLinkSelected?: (href: string, title: string) => void; //check which link was selected from search list
   onClickLink: (href: string, event: MouseEvent) => void;
   onHoverLink?: (event: MouseEvent) => boolean;
   onClickHashtag?: (tag: string, event: MouseEvent) => void;
@@ -750,6 +752,15 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     }
   );
 
+  handleKeyDown = (e:React.KeyboardEvent<HTMLDivElement>) => {
+    if(this.props.onKeyDown){
+      this?.props?.onKeyDown(e);
+    }
+    if(this.props.enablePeopleTag && this.props.onSearchLink && e.key === "@"){
+      this.handleOpenLinkMenu();
+    }
+  }
+
   render() {
     const {
       dir,
@@ -765,7 +776,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
 
     return (
       <Flex
-        onKeyDown={onKeyDown}
+        onKeyDown={this.handleKeyDown}
         style={style}
         className={className}
         align="flex-start"
@@ -803,6 +814,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
                   isActive={this.state.linkMenuOpen}
                   onCreateLink={this.props.onCreateLink}
                   onSearchLink={this.props.onSearchLink}
+                  handleLinkSelected={this.props.handleLinkSelected}
                   onClickLink={this.props.onClickLink}
                   onShowToast={this.props.onShowToast}
                   onClose={this.handleCloseLinkMenu}

src/lib/ComponentView.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import { ThemeProvider } from "styled-components";
 import { EditorView, Decoration } from "prosemirror-view";
 import Extension from "../lib/Extension";
@@ -57,10 +59,13 @@ export default class ComponentView {
       getPos: this.getPos,
     });
 
-    ReactDOM.render(
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>,
-      this.dom
-    );
+    const root = createRoot(this.dom);
+    root.render(<ThemeProvider theme={theme}>{children}</ThemeProvider>)
+
+    // ReactDOM.render(
+    //   <ThemeProvider theme={theme}>{children}</ThemeProvider>,
+    //   this.dom
+    // );
   }
 
   update(node) {

src/nodes/Notice.tsx

@@ -3,6 +3,8 @@ import toggleWrap from "../commands/toggleWrap";
 import { WarningIcon, InfoIcon, StarredIcon } from "outline-icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import Node from "./Node";
 import noticesRule from "../rules/notices";
 
@@ -72,7 +74,9 @@ export default class Notice extends Node {
 
         const icon = document.createElement("div");
         icon.className = "icon";
-        ReactDOM.render(component, icon);
+        const root = createRoot(component);
+        root.render(icon)
+        // ReactDOM.render(component, icon);
 
         return [
           "div",

src/plugins/BlockMenuTrigger.tsx

@@ -1,5 +1,7 @@
 import { InputRule } from "prosemirror-inputrules";
 import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import * as React from "react";
 import { Plugin } from "prosemirror-state";
 import { isInTable } from "prosemirror-tables";
@@ -46,7 +48,9 @@ export default class BlockMenuTrigger extends Extension {
     const button = document.createElement("button");
     button.className = "block-menu-trigger";
     button.type = "button";
-    ReactDOM.render(<PlusIcon color="currentColor" />, button);
+    const root = createRoot(button)
+    // ReactDOM.render(<PlusIcon color="currentColor" />, button);
+    root.render(<PlusIcon color="currentColor" />);
 
     return [
       new Plugin({

src/stories/index.tsx

@@ -104,8 +104,6 @@ export default function Example(props) {
           });
         }}
         onSearchLink={async term => {
-          console.log("Searched link: ", term);
-
           // Delay to simulate time taken for remote API request to complete
           return new Promise(resolve => {
             setTimeout(() => {