@vertexvis/ui 0.1.0-canary.7 → 0.1.0-canary.9

package/dist/collection/components/search-bar/dom.js

@@ -0,0 +1,12 @@
+export const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+export const createDocumentRange = () => {
+  return document.createRange();
+};
+export const createTextNode = (text) => {
+  return new Text(text);
+};

package/dist/collection/components/search-bar/lib.js

@@ -1,21 +1,41 @@
-export const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
+import { createTextNode } from './dom';
+export const createResultUri = (result) => {
+  return `${result.type}:${result.id}`;
 };
-export const createDocumentRange = () => {
-  return document.createRange();
+export const createSearchResultReplacement = (result, before, after) => {
+  const urn = createResultUri(result);
+  return {
+    before: createTextNode(before),
+    beforeSpace: createTextNode(createHairSpace()),
+    result: createTextNode(urn),
+    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    after: after != null ? createTextNode(after) : undefined,
+  };
 };
-export const isTextNode = (node) => {
-  return node instanceof Text;
+export const getNodesForSearchResultReplacement = (replacement) => {
+  const keys = Object.keys(replacement);
+  return keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
 };
-export const isHtmlElement = (target) => {
-  return target instanceof HTMLElement;
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
+export const trimNonstandardSpaces = (text) => {
+  return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
-export const isReplacedElement = (el) => {
-  return (el === null || el === void 0 ? void 0 : el.getAttribute('data-replaced')) === 'true';
+const createHairSpace = () => {
+  return String.fromCharCode(8202);
 };
-export const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+const createNoBreakSpace = () => {
+  return String.fromCharCode(160);
 };

package/dist/collection/components/search-bar/search-bar.css

@@ -11,15 +11,6 @@
   line-height: 1.4;
 }
 
-.test-mention {
-  display: inline-block;
-  color: blue;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
 .content-input {
   width: 100%;
   box-sizing: border-box;
@@ -33,13 +24,6 @@
   white-space: pre-line;
 }
 
-.textarea {
-  overflow: hidden;
-  outline: none;
-  box-shadow: none;
-  resize: none;
-}
-
 .content-input:focus {
   outline: none;
 }