@vnetwork/richtext-editor/lib/index.js

react richtext editor, only using for internal purpose

import _JSXStyle from "styled-jsx/style";
import React from "react";
import pipe from "lodash/fp/pipe"; // import debounce from "lodash/debounce";

import { createEditor } from "slate";
import { Editable, withReact, Slate } from "slate-react";
import { withHistory } from "slate-history";
import { AppProvider } from "./context/app";
import { QueryClient, QueryClientProvider } from "react-query"; // added custom plugins

import withLinks from "./plugins/withLinks";
import withTables from "./plugins/withTables";
import withMentions from "./plugins/withMentions";
import withChecklists from "./plugins/withChecklists";
import Toolbar from "./Toolbar";
import Elements from "./Elements";
import Leafs from "./Leafs";
import { MentionModal } from "./Elements/Mention"; // import custom shortcut keyboards
// eslint-disable-next-line no-unused-vars

import { HandleShortcutKeyboard } from "./Toolbar/MarkButton";
import { resolveSlateMentionMatch } from "./utils/resolveMatchOnChange";
const createEditorWithPlugins = pipe(withHistory, withTables, withLinks, withMentions, withChecklists, withReact);

const RichtextEditor = ({ ...props
}) => {
  const [value, setValue] = React.useState(props.value || []);
  const [mention, setMentionTarget] = React.useState(undefined);
  const [search, setMentionSearch] = React.useState("");
  const [queryClient] = React.useState(() => new QueryClient());
  const editor = React.useMemo(() => createEditorWithPlugins(createEditor()), []);
  const SlateElements = React.useCallback(props => /*#__PURE__*/React.createElement(Elements, props), []);
  const SlateLeafs = React.useCallback(props => /*#__PURE__*/React.createElement(Leafs, props), []); // eslint-disable-next-line react-hooks/exhaustive-deps
  // const debounced = React.useCallback(
  //   debounce((range) => setMentionTarget(range), 200),
  //   []
  // );

  const handleOnChange = value => {
    setValue(value);
    const [before, range, after] = resolveSlateMentionMatch(editor);

    if (before && after) {
      return [setMentionTarget(range), setMentionSearch(before[1])];
    }

    return [setMentionTarget(undefined)];
  };

  return /*#__PURE__*/React.createElement(QueryClientProvider, {
    client: queryClient
  }, /*#__PURE__*/React.createElement(AppProvider, null, /*#__PURE__*/React.createElement(Slate, {
    editor: editor,
    value: value,
    onChange: handleOnChange
  }, /*#__PURE__*/React.createElement("div", {
    className: "jsx-3687908838" + " " + "richtext"
  }, /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(Editable, {
    renderElement: SlateElements,
    renderLeaf: SlateLeafs,
    autoFocus: true,
    onKeyDown: event => HandleShortcutKeyboard(editor, event)
  })), typeof mention !== "undefined" && /*#__PURE__*/React.createElement(MentionModal, {
    editor: editor,
    target: mention,
    search: search,
    callback: () => setMentionTarget(undefined)
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3687908838"
  }, "input{outline:none;}.hr{height:1.5rem;display:inline-block;margin:0 0.25rem;}.border-bottom{border-bottom:1px solid #dddddd;}i{min-width:1.5rem;height:1.5rem;display:inline-block;background-size:80%;background-position:center;background-repeat:no-repeat;}i.text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMywxOEg5VjE2SDNaTTMsNlY4SDIxVjZabTAsN0gxNVYxMUgzWiIvPjxwYXRoIGQ9Ik0wLDBIMjRWMjRIMFoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);}i.linked{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTMuOSwxMkEzLjEsMy4xLDAsMCwxLDcsOC45aDRWN0g3QTUsNSwwLDAsMCw3LDE3aDRWMTUuMUg3QTMuMSwzLjEsMCwwLDEsMy45LDEyWk04LDEzaDhWMTFIOFptOS02SDEzVjguOWg0YTMuMSwzLjEsMCwxLDEsMCw2LjJIMTNWMTdoNEE1LDUsMCwwLDAsMTcsN1oiLz48L3N2Zz4=);}i.bulleted-list{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCwxMC41QTEuNSwxLjUsMCwxLDAsNS41LDEyLDEuNSwxLjUsMCwwLDAsNCwxMC41Wm0wLTZBMS41LDEuNSwwLDEsMCw1LjUsNiwxLjUsMS41LDAsMCwwLDQsNC41Wm0wLDEyQTEuNSwxLjUsMCwxLDAsNS41LDE4LDEuNSwxLjUsMCwwLDAsNCwxNi41Wk03LDE5SDIxVjE3SDdabTAtNkgyMVYxMUg3Wk03LDVWN0gyMVY1WiIvPjxwYXRoIGQ9Ik0wLDBIMjRWMjRIMFoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);}i.italic{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEwLDRWN2gyLjIxTDguNzksMTVINnYzaDhWMTVIMTEuNzlsMy40Mi04SDE4VjRaIi8+PC9zdmc+);}i.bold{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNiwxMC43OUEzLjY0MSwzLjY0MSwwLDAsMCwxNy4yNSw4YTMuOTQzLDMuOTQzLDAsMCwwLTQtNEg3VjE4aDcuMDRhMy43OTMsMy43OTMsMCwwLDAsMS41Ni03LjIxWk0xMCw2LjVoM2ExLjUsMS41LDAsMCwxLDAsM0gxMFptMy41LDlIMTB2LTNoMy41YTEuNSwxLjUsMCwwLDEsMCwzWiIvPjxwYXRoIGQ9Ik0wLDBIMjRWMjRIMFoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);}i.underline{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyLDE3YTYsNiwwLDAsMCw2LTZWM0gxNS41djhhMy41LDMuNSwwLDAsMS03LDBWM0g2djhBNiw2LDAsMCwwLDEyLDE3Wk01LDE5djJIMTlWMTlaIi8+PC9zdmc+);}i.border-all{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMywzVjIxSDIxVjNabTgsMTZINVYxM2g2Wm0wLThINVY1aDZabTgsOEgxM1YxM2g2Wm0wLThIMTNWNWg2WiIvPjxwYXRoIGQ9Ik0wLDBIMjRWMjRIMFoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);}i.format-color{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTAsMjBIMjR2NEgwWiIgZmlsbD0icmdiYSgwLDAsMCwwLjM2KSIvPjxwYXRoIGQ9Ik0xMSwzLDUuNSwxN0g3Ljc1bDEuMTItM2g2LjI1bDEuMTIsM2gyLjI1TDEzLDNaTTkuNjIsMTIsMTIsNS42NywxNC4zOCwxMloiLz48L3N2Zz4=);}")));
};

export default RichtextEditor;