@udecode/plate-mention-ui - npm Package Compare versions

Comparing version 6.4.1 to 6.5.0

CHANGELOG.md

 # @udecode/plate-mention-ui
 
+## 6.5.0
+
+### Minor Changes
+
+- [#1168](https://github.com/udecode/plate/pull/1168) by [@nemanja-tosic](https://github.com/nemanja-tosic) – Inline mention proposal element instead of using whatever comes after a trigger.
+
 ## 6.4.1
@@ -4,0 +10,0 @@

dist/index.d.ts

 /**
  * @file Automatically generated by barrelsby.
  */
-export * from './MentionCombobox';
+export * from './MentionCombobox/index';
 export * from './MentionElement/index';
+export * from './MentionInputElement/index';
 //# sourceMappingURL=index.d.ts.map

dist/index.es.js

@@ -1,3 +0,4 @@
-import React, { useEffect } from 'react';
-import { comboboxStore, Combobox } from '@udecode/plate-combobox';
+import * as React from 'react';
+import React__default from 'react';
+import { Combobox } from '@udecode/plate-combobox';
 import { ELEMENT_MENTION, COMBOBOX_TRIGGER_MENTION, getMentionOnSelectItem } from '@udecode/plate-mention';
@@ -13,31 +14,20 @@ import { createStyles } from '@udecode/plate-styled-components';
   onRenderItem,
-  id: _id,
   pluginKey = ELEMENT_MENTION,
+  id = pluginKey,
   trigger = COMBOBOX_TRIGGER_MENTION,
-  searchPattern,
   insertSpaceAfterMention,
   createMentionNode
-}) => {
-  const id = _id !== null && _id !== void 0 ? _id : pluginKey;
-  const activeId = comboboxStore.use.activeId();
-  const onSelectMentionItem = getMentionOnSelectItem({
-    pluginKey,
+}) => /*#__PURE__*/React__default.createElement(Combobox, {
+  id: id,
+  trigger: trigger,
+  controlled: true,
+  items: items,
+  component: component,
+  onRenderItem: onRenderItem,
+  onSelectItem: getMentionOnSelectItem({
+    pluginKey: id,
     insertSpaceAfterMention,
     createMentionNode
-  });
-  useEffect(() => {
-    comboboxStore.set.setComboboxById({
-      id,
-      trigger,
-      searchPattern,
-      onSelectItem: onSelectMentionItem
-    });
-  }, [pluginKey, onSelectMentionItem, trigger, id, searchPattern]);
-  if (activeId !== id) return null;
-  return /*#__PURE__*/React.createElement(Combobox, {
-    items: items,
-    component: component,
-    onRenderItem: onRenderItem
-  });
-};
+  })
+});
 
@@ -99,3 +89,3 @@ const getMentionElementStyles = props => createStyles({
   });
-  return /*#__PURE__*/React.createElement(_StyledSpan, _extends({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(_StyledSpan$1, _extends({}, attributes, {
     as: as,
@@ -111,3 +101,3 @@ "data-slate-value": element.value,
 
-var _StyledSpan = _styled("span").withConfig({
+var _StyledSpan$1 = _styled("span").withConfig({
   displayName: "MentionElement___StyledSpan",
@@ -117,3 +107,55 @@ componentId: "sc-iu2gv3-0"
 
-export { MentionCombobox, MentionElement, getMentionElementStyles };
+const getMentionInputElementStyles = props => createStyles({
+  prefixClassNames: 'MentionInputElement',
+  ...props
+}, {
+  root: [{
+    "marginTop": "0px",
+    "marginBottom": "0px",
+    "marginLeft": "1px",
+    "marginRight": "1px",
+    "verticalAlign": "baseline",
+    "display": "inline-block"
+  }, props.selected && props.focused && {
+    "boxShadow": "0 0 0 2px #B4D5FF"
+  }, css(["padding:3px 3px 2px;border-radius:4px;background-color:#eee;font-size:0.9em;"])]
+});
+
+const MentionInputElement = props => {
+  const {
+    attributes,
+    children,
+    nodeProps,
+    styles: _styles,
+    element,
+    classNames,
+    prefixClassNames,
+    prefix,
+    as,
+    onClick,
+    renderLabel,
+    ...rootProps
+  } = props;
+  const selected = useSelected();
+  const focused = useFocused();
+  const styles = getMentionInputElementStyles({ ...props,
+    selected,
+    focused
+  });
+  return /*#__PURE__*/React.createElement(_StyledSpan, _extends({}, attributes, {
+    as: as,
+    "data-slate-value": element.value,
+    className: styles.root.className,
+    onClick: getHandler(onClick, element)
+  }, rootProps, nodeProps, {
+    $_css: styles.root.css
+  }), children);
+};
+
+var _StyledSpan = _styled("span").withConfig({
+  displayName: "MentionInputElement___StyledSpan",
+  componentId: "sc-1xv1w6t-0"
+})(["", ""], p => p.$_css);
+
+export { MentionCombobox, MentionElement, MentionInputElement, getMentionElementStyles, getMentionInputElementStyles };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -15,3 +15,24 @@ 'use strict';
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
@@ -23,31 +44,20 @@
   onRenderItem,
-  id: _id,
   pluginKey = plateMention.ELEMENT_MENTION,
+  id = pluginKey,
   trigger = plateMention.COMBOBOX_TRIGGER_MENTION,
-  searchPattern,
   insertSpaceAfterMention,
   createMentionNode
-}) => {
-  const id = _id !== null && _id !== void 0 ? _id : pluginKey;
-  const activeId = plateCombobox.comboboxStore.use.activeId();
-  const onSelectMentionItem = plateMention.getMentionOnSelectItem({
-    pluginKey,
+}) => /*#__PURE__*/React__default['default'].createElement(plateCombobox.Combobox, {
+  id: id,
+  trigger: trigger,
+  controlled: true,
+  items: items,
+  component: component,
+  onRenderItem: onRenderItem,
+  onSelectItem: plateMention.getMentionOnSelectItem({
+    pluginKey: id,
     insertSpaceAfterMention,
     createMentionNode
-  });
-  React.useEffect(() => {
-    plateCombobox.comboboxStore.set.setComboboxById({
-      id,
-      trigger,
-      searchPattern,
-      onSelectItem: onSelectMentionItem
-    });
-  }, [pluginKey, onSelectMentionItem, trigger, id, searchPattern]);
-  if (activeId !== id) return null;
-  return /*#__PURE__*/React__default['default'].createElement(plateCombobox.Combobox, {
-    items: items,
-    component: component,
-    onRenderItem: onRenderItem
-  });
-};
+  })
+});
 
@@ -109,3 +119,3 @@ const getMentionElementStyles = props => plateStyledComponents.createStyles({
   });
-  return /*#__PURE__*/React__default['default'].createElement(_StyledSpan, _extends({}, attributes, {
+  return /*#__PURE__*/React__default['default'].createElement(_StyledSpan$1, _extends({}, attributes, {
     as: as,
@@ -121,3 +131,3 @@ "data-slate-value": element.value,
 
-var _StyledSpan = _styled__default['default']("span").withConfig({
+var _StyledSpan$1 = _styled__default['default']("span").withConfig({
   displayName: "MentionElement___StyledSpan",
@@ -127,5 +137,59 @@ componentId: "sc-iu2gv3-0"
 
+const getMentionInputElementStyles = props => plateStyledComponents.createStyles({
+  prefixClassNames: 'MentionInputElement',
+  ...props
+}, {
+  root: [{
+    "marginTop": "0px",
+    "marginBottom": "0px",
+    "marginLeft": "1px",
+    "marginRight": "1px",
+    "verticalAlign": "baseline",
+    "display": "inline-block"
+  }, props.selected && props.focused && {
+    "boxShadow": "0 0 0 2px #B4D5FF"
+  }, _styled.css(["padding:3px 3px 2px;border-radius:4px;background-color:#eee;font-size:0.9em;"])]
+});
+
+const MentionInputElement = props => {
+  const {
+    attributes,
+    children,
+    nodeProps,
+    styles: _styles,
+    element,
+    classNames,
+    prefixClassNames,
+    prefix,
+    as,
+    onClick,
+    renderLabel,
+    ...rootProps
+  } = props;
+  const selected = slateReact.useSelected();
+  const focused = slateReact.useFocused();
+  const styles = getMentionInputElementStyles({ ...props,
+    selected,
+    focused
+  });
+  return /*#__PURE__*/React__namespace.createElement(_StyledSpan, _extends({}, attributes, {
+    as: as,
+    "data-slate-value": element.value,
+    className: styles.root.className,
+    onClick: plateCommon.getHandler(onClick, element)
+  }, rootProps, nodeProps, {
+    $_css: styles.root.css
+  }), children);
+};
+
+var _StyledSpan = _styled__default['default']("span").withConfig({
+  displayName: "MentionInputElement___StyledSpan",
+  componentId: "sc-1xv1w6t-0"
+})(["", ""], p => p.$_css);
+
 exports.MentionCombobox = MentionCombobox;
 exports.MentionElement = MentionElement;
+exports.MentionInputElement = MentionInputElement;
 exports.getMentionElementStyles = getMentionElementStyles;
+exports.getMentionInputElementStyles = getMentionInputElementStyles;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@udecode/plate-mention-ui",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "Media embed UI for Plate",
@@ -35,6 +35,6 @@ "keywords": [
   "dependencies": {
-    "@udecode/plate-combobox": "6.4.1",
+    "@udecode/plate-combobox": "6.5.0",
     "@udecode/plate-common": "6.4.1",
     "@udecode/plate-core": "6.4.1",
-    "@udecode/plate-mention": "6.4.1",
+    "@udecode/plate-mention": "6.5.0",
     "@udecode/plate-styled-components": "6.4.1"
@@ -41,0 +41,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

50574

increased by24.48%

Number of package files

29

increased by52.63%

Lines of code

386

increased by47.33%

Dependency changes

• + Added@udecode/plate-combobox@6.5.0(transitive)

• + Added@udecode/plate-mention@6.5.0(transitive)

• - Removed@udecode/plate-combobox@6.4.1(transitive)

• - Removed@udecode/plate-mention@6.4.1(transitive)

• Updated@udecode/plate-combobox@6.5.0

• Updated@udecode/plate-mention@6.5.0