@selfcommunity/react-ui 0.1.2-alpha.0

package/lib/cjs/components/Editor/plugins/MentionsPlugin.js

@@ -0,0 +1,591 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = MentionsPlugin;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lexical = require("lexical");
+
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+
+var _utils = require("@lexical/utils");
+
+var _reactDom = require("react-dom");
+
+var _MentionNode = require("../nodes/MentionNode");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/material/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
+const DocumentMentionsRegex = {
+  NAME,
+  PUNCTUATION
+};
+const CapitalizedNameMentionsRegex = new RegExp('(^|[^#])((?:' + DocumentMentionsRegex.NAME + '{' + 1 + ',})$)');
+const PUNC = DocumentMentionsRegex.PUNCTUATION;
+const TRIGGERS = ['@', '\\uff20'].join(''); // Chars we expect to see in a mention (non-space, non-punctuation).
+
+const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]'; // Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+
+const VALID_JOINS = '(?:' + '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+' |' + // E.g. " " in "Josh Duck"
+'[' + PUNC + ']|' + // E.g. "-' in "Salier-Hellendag"
+')';
+const LENGTH_LIMIT = 75;
+const AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$'); // 50 is the longest alias length limit.
+
+const ALIAS_LENGTH_LIMIT = 50; // Regex used to match alias.
+
+const AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$'); // At most, 5 suggestions are shown in the popup.
+
+const SUGGESTION_LIST_LENGTH_LIMIT = 5;
+const mentionsCache = new Map();
+
+function useMentionLookupService(mentionString) {
+  const [results, setResults] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const cachedResults = mentionsCache.get(mentionString);
+
+    if (cachedResults === null) {
+      return;
+    } else if (cachedResults !== undefined) {
+      setResults(cachedResults);
+      return;
+    }
+
+    mentionsCache.set(mentionString, null);
+
+    _apiServices.http.request({
+      url: _apiServices.Endpoints.UserSearch.url(),
+      method: _apiServices.Endpoints.UserSearch.method,
+      params: {
+        user: mentionString,
+        limit: 7
+      }
+    }).then(res => {
+      mentionsCache.set(mentionString, res.data.results);
+      setResults(res.data.results);
+    });
+  }, [mentionString]);
+  return results;
+}
+
+function MentionsTypeaheadItem({
+  index,
+  isHovered,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  result
+}) {
+  const liRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("li", {
+    key: result.id,
+    tabIndex: -1,
+    className: (0, _classnames.default)('item', {
+      ['selected']: isSelected,
+      ['hovered']: isHovered
+    }),
+    ref: liRef,
+    role: "option",
+    "aria-selected": isSelected,
+    id: 'typeahead-item-' + index,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
+    alt: result.username,
+    src: result.avatar
+  }), " ", result.username);
+}
+
+function MentionsTypeahead({
+  close,
+  editor,
+  resolution,
+  className = ''
+}) {
+  const divRef = (0, _react.useRef)(null);
+  const match = resolution.match;
+  const results = useMentionLookupService(match.matchingString);
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
+  const [hoveredIndex, setHoveredIndex] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const div = divRef.current;
+    const rootElement = editor.getRootElement();
+
+    if (results !== null && div !== null && rootElement !== null) {
+      const range = resolution.range;
+      const {
+        left,
+        top,
+        height
+      } = range.getBoundingClientRect();
+      div.style.top = `${top + height + 2}px`;
+      div.style.left = `${left - 14}px`;
+      div.style.display = 'block';
+      rootElement.setAttribute('aria-controls', 'mentions-typeahead');
+      return () => {
+        div.style.display = 'none';
+        rootElement.removeAttribute('aria-controls');
+      };
+    }
+  }, [editor, resolution, results]);
+  const applyCurrentSelected = (0, _react.useCallback)(index => {
+    index = index || selectedIndex;
+
+    if (results === null || index === null) {
+      return;
+    }
+
+    const selectedEntry = results[index];
+    close();
+    createMentionNodeFromSearchResult(editor, selectedEntry, match);
+  }, [close, match, editor, results, selectedIndex]);
+  const updateSelectedIndex = (0, _react.useCallback)(index => {
+    const rootElem = editor.getRootElement();
+
+    if (rootElem !== null) {
+      rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+      setSelectedIndex(index);
+    }
+  }, [editor]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      const rootElem = editor.getRootElement();
+
+      if (rootElem !== null) {
+        rootElem.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  (0, _react.useLayoutEffect)(() => {
+    if (results === null) {
+      setSelectedIndex(null);
+    } else if (selectedIndex === null) {
+      updateSelectedIndex(0);
+    }
+  }, [results, selectedIndex, updateSelectedIndex]);
+  (0, _react.useEffect)(() => {
+    return (0, _utils.mergeRegister)(editor.registerCommand(_lexical.KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+
+      if (results !== null && selectedIndex !== null) {
+        if (selectedIndex < SUGGESTION_LIST_LENGTH_LIMIT - 1 && selectedIndex !== results.length - 1) {
+          updateSelectedIndex(selectedIndex + 1);
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ARROW_UP_COMMAND, payload => {
+      const event = payload;
+
+      if (results !== null && selectedIndex !== null) {
+        if (selectedIndex !== 0) {
+          updateSelectedIndex(selectedIndex - 1);
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ESCAPE_COMMAND, payload => {
+      const event = payload;
+
+      if (results === null || selectedIndex === null) {
+        return false;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_TAB_COMMAND, payload => {
+      const event = payload;
+
+      if (results === null || selectedIndex === null) {
+        return false;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      applyCurrentSelected();
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ENTER_COMMAND, event => {
+      if (results === null || selectedIndex === null) {
+        return false;
+      }
+
+      if (event !== null) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      applyCurrentSelected();
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW));
+  }, [applyCurrentSelected, close, editor, results, selectedIndex, updateSelectedIndex]);
+
+  if (results === null) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    "aria-label": "Suggested mentions",
+    ref: divRef,
+    role: "listbox"
+  }, /*#__PURE__*/_react.default.createElement("ul", null, results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => /*#__PURE__*/_react.default.createElement(MentionsTypeaheadItem, {
+    index: i,
+    isHovered: i === hoveredIndex,
+    isSelected: i === selectedIndex,
+    onClick: () => {
+      applyCurrentSelected(i);
+    },
+    onMouseEnter: () => {
+      setHoveredIndex(i);
+    },
+    onMouseLeave: () => {
+      setHoveredIndex(null);
+    },
+    key: result.id,
+    result: result
+  }))));
+}
+
+function checkForCapitalizedNameMentions(text, minMatchLength) {
+  const match = CapitalizedNameMentionsRegex.exec(text);
+
+  if (match !== null) {
+    // The strategy ignores leading whitespace but we need to know it's
+    // length to add it to the leadOffset
+    const maybeLeadingWhitespace = match[1];
+    const matchingString = match[2];
+
+    if (matchingString != null && matchingString.length >= minMatchLength) {
+      return {
+        leadOffset: match.index + maybeLeadingWhitespace.length,
+        matchingString,
+        replaceableString: matchingString
+      };
+    }
+  }
+
+  return null;
+}
+
+function checkForAtSignMentions(text, minMatchLength) {
+  let match = AtSignMentionsRegex.exec(text);
+
+  if (match === null) {
+    match = AtSignMentionsRegexAliasRegex.exec(text);
+  }
+
+  if (match !== null) {
+    // The strategy ignores leading whitespace but we need to know it's
+    // length to add it to the leadOffset
+    const maybeLeadingWhitespace = match[1];
+    const matchingString = match[3];
+
+    if (matchingString.length >= minMatchLength) {
+      return {
+        leadOffset: match.index + maybeLeadingWhitespace.length,
+        matchingString,
+        replaceableString: match[2]
+      };
+    }
+  }
+
+  return null;
+}
+
+function getPossibleMentionMatch(text) {
+  const match = checkForAtSignMentions(text, 1);
+  return match === null ? checkForCapitalizedNameMentions(text, 3) : match;
+}
+
+function getTextUpToAnchor(selection) {
+  const anchor = selection.anchor;
+
+  if (anchor.type !== 'text') {
+    return null;
+  }
+
+  const anchorNode = anchor.getNode(); // We should not be attempting to extract mentions out of nodes
+  // that are already being used for other core things. This is
+  // especially true for immutable nodes, which can't be mutated at all.
+
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+
+  const anchorOffset = anchor.offset;
+  return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+
+function tryToPositionRange(match, range) {
+  const domSelection = window.getSelection();
+
+  if (domSelection === null || !domSelection.isCollapsed) {
+    return false;
+  }
+
+  const anchorNode = domSelection.anchorNode;
+  const startOffset = match.leadOffset;
+  const endOffset = domSelection.anchorOffset;
+
+  try {
+    range.setStart(anchorNode, startOffset);
+    range.setEnd(anchorNode, endOffset);
+  } catch (error) {
+    return false;
+  }
+
+  return true;
+}
+
+function getMentionsTextToSearch(editor) {
+  let text = null;
+  editor.getEditorState().read(() => {
+    const selection = (0, _lexical.$getSelection)();
+
+    if (!(0, _lexical.$isRangeSelection)(selection)) {
+      return;
+    }
+
+    text = getTextUpToAnchor(selection);
+  });
+  return text;
+}
+/**
+ * Walk backwards along user input and forward through entity title to try
+ * and replace more of the user's text with entity.
+ *
+ * E.g. User types "Hello Sarah Smit" and we match "Smit" to "Sarah Smith".
+ * Replacing just the match would give us "Hello Sarah Sarah Smith".
+ * Instead we find the string "Sarah Smit" and replace all of it.
+ */
+
+
+function getMentionOffset(documentText, entryText, offset) {
+  let triggerOffset = offset;
+
+  for (let ii = triggerOffset; ii <= entryText.length; ii++) {
+    if (documentText.substr(-ii) === entryText.substr(0, ii)) {
+      triggerOffset = ii;
+    }
+  }
+
+  return triggerOffset;
+}
+/**
+ * From a Typeahead Search Result, replace plain text from search offset and
+ * render a newly created MentionNode.
+ */
+
+
+function createMentionNodeFromSearchResult(editor, user, match) {
+  editor.update(() => {
+    const selection = (0, _lexical.$getSelection)();
+
+    if (!(0, _lexical.$isRangeSelection)(selection) || !selection.isCollapsed()) {
+      return;
+    }
+
+    const anchor = selection.anchor;
+
+    if (anchor.type !== 'text') {
+      return;
+    }
+
+    const anchorNode = anchor.getNode(); // We should not be attempting to extract mentions out of nodes
+    // that are already being used for other core things. This is
+    // especially true for immutable nodes, which can't be mutated at all.
+
+    if (!anchorNode.isSimpleText()) {
+      return;
+    }
+
+    const selectionOffset = anchor.offset;
+    const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+    const characterOffset = match.replaceableString.length; // Given a known offset for the mention match, look backward in the
+    // text to see if there's a longer match to replace.
+
+    const mentionOffset = getMentionOffset(textContent, user.username, characterOffset);
+    const startOffset = selectionOffset - mentionOffset;
+
+    if (startOffset < 0) {
+      return;
+    }
+
+    let nodeToReplace;
+
+    if (startOffset === 0) {
+      [nodeToReplace] = anchorNode.splitText(selectionOffset);
+    } else {
+      [, nodeToReplace] = anchorNode.splitText(startOffset, selectionOffset);
+    }
+
+    const mentionNode = (0, _MentionNode.createMentionNode)(user);
+    nodeToReplace.replace(mentionNode);
+    mentionNode.select();
+  });
+}
+
+function isSelectionOnEntityBoundary(editor, offset) {
+  if (offset !== 0) {
+    return false;
+  }
+
+  return editor.getEditorState().read(() => {
+    const selection = (0, _lexical.$getSelection)();
+
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      const prevSibling = anchorNode.getPreviousSibling(); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+
+      return (0, _lexical.$isTextNode)(prevSibling) && prevSibling.isTextEntity();
+    }
+
+    return false;
+  });
+}
+
+const PREFIX = 'SCEditorMentionPlugin';
+const classes = {
+  root: `${PREFIX}-root`
+};
+const Root = (0, _styles.styled)(MentionsTypeahead, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  position: 'fixed',
+  background: '#fff',
+  boxShadow: '0px 5px 10px rgba(0, 0, 0, 0.3)',
+  borderEadius: 8,
+  zIndex: 3000,
+  '& ul': {
+    padding: 0,
+    listStyle: 'none',
+    margin: 0,
+    borderRadius: 10,
+    '& li': {
+      padding: theme.spacing(1),
+      margin: 0,
+      minWidth: 180,
+      fontSize: theme.typography.body2.fontSize,
+      outline: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'left',
+      alignItems: 'center',
+      '&.selected': {
+        background: theme.palette.action.selected
+      },
+      '&.hovered': {
+        background: theme.palette.action.hover
+      },
+      '& .MuiAvatar-root': {
+        width: 20,
+        height: 20,
+        marginRight: theme.spacing()
+      }
+    }
+  }
+}));
+
+function useMentions(editor) {
+  const [resolution, setResolution] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!editor.hasNodes([_MentionNode.MentionNode])) {
+      throw new Error('MentionsPlugin: MentionNode not registered on editor');
+    }
+  }, [editor]);
+  (0, _react.useEffect)(() => {
+    let activeRange = document.createRange();
+    let previousText = null;
+
+    const updateListener = ({
+      prevEditorState
+    }) => {
+      if (prevEditorState.isEmpty()) {
+        return;
+      }
+
+      const range = activeRange;
+      const text = getMentionsTextToSearch(editor);
+
+      if (text === previousText || range === null) {
+        return;
+      }
+
+      previousText = text;
+
+      if (text === null) {
+        return;
+      }
+
+      const match = getPossibleMentionMatch(text);
+
+      if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {
+        const isRangePositioned = tryToPositionRange(match, range);
+
+        if (isRangePositioned !== null) {
+          setResolution({
+            match,
+            range
+          });
+          return;
+        }
+      }
+
+      setResolution(null);
+    };
+
+    const removeUpdateListener = editor.registerUpdateListener(updateListener);
+    return () => {
+      activeRange = null;
+      removeUpdateListener();
+    };
+  }, [editor]);
+  const closeTypeahead = (0, _react.useCallback)(() => {
+    setResolution(null);
+  }, []);
+  return resolution === null || editor === null ? null : /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Root, {
+    close: closeTypeahead,
+    resolution: resolution,
+    editor: editor,
+    className: classes.root
+  }), document.body);
+}
+
+function MentionsPlugin() {
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  return useMentions(editor);
+}

package/lib/cjs/components/Editor/plugins/OnChangePlugin.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _LexicalOnChangePlugin = _interopRequireDefault(require("@lexical/react/LexicalOnChangePlugin"));
+
+var _lexical = require("lexical");
+
+var _ImageNode = require("../nodes/ImageNode");
+
+var _MentionNode = require("../nodes/MentionNode");
+
+var _richText = require("@lexical/rich-text");
+
+var _link = require("@lexical/link");
+
+var _code = require("@lexical/code");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+
+const convertText = node => {
+  if (node.getFormat() === IS_BOLD) {
+    return `<strong>${node.__text}</strong>`;
+  } else if (node.getFormat() === IS_ITALIC) {
+    return `<em>${node.__text}</em>`;
+  }
+
+  return `<span>${node.__text}</span>`;
+};
+
+const convertNode = (node, children) => {
+  switch (node.getType()) {
+    case _ImageNode.ImageNode.getType():
+      return `<img src="${node.__src}" alt="${node.__altText}" width="${node.__width}" height="${node.__height}" style="max-width: ${node.__maxWidth}px;" />`;
+
+    case _MentionNode.MentionNode.getType():
+      return `<mention id="${node.__user.id}" ext-id="${node.__user.ext_id}">@${node.__user.username}</mention>`;
+
+    case _link.AutoLinkNode.getType():
+    case _link.LinkNode.getType():
+      return `<a href="${node.__url}">${node.__url}</a>`;
+
+    case 'list':
+      return `<${node.__tag}>${children}</${node.__tag}>`;
+
+    case 'listitem':
+      return `<li>${node.__value}</li>`;
+
+    case _richText.QuoteNode.getType():
+      return `<blockquote>${children}</blockquote>`;
+
+    case _code.CodeNode.getType():
+      return `<pre>${children}</pre>`;
+
+    case 'linebreak':
+      return `<br/>`;
+
+    case 'text':
+      return convertText(node);
+
+    case _richText.HeadingNode.getType():
+      return `<${node.__tag}>${children}</${node.__tag}>`;
+
+    case 'paragraph':
+      return `<p>${children ? children : '<br/>'}</p>`;
+
+    case 'root':
+      return children;
+
+    default:
+      return '';
+  }
+};
+
+const $toHtml = node => {
+  let html = ''; // Create html for child nodes
+
+  node.getChildren && node.getChildren().map(child => html += $toHtml(child)); // Return new html
+
+  return convertNode(node, html);
+};
+
+const OnChangePlugin = props => {
+  // PROPS
+  const {
+    onChange
+  } = props;
+
+  const handleChange = (editorState, editor) => {
+    editorState.read(() => {
+      onChange($toHtml((0, _lexical.$getRoot)()));
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.default, {
+    onChange: handleChange
+  });
+};
+
+var _default = OnChangePlugin;
+exports.default = _default;