@guardian/stand 0.0.0 → 0.0.2

package/dist/byline/Byline.js

@@ -0,0 +1,273 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { createInvisiblesPlugin, space, nbSpace } from '@guardian/prosemirror-invisibles';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { history } from 'prosemirror-history';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { useRef, useState, useEffect } from 'react';
+import { convertBylineModelToNode, getCurrentText, convertNodeToBylineModel, addUntaggedContributor, addTaggedContributor, hasHitContributorLimit } from './lib.js';
+import { createPlaceholderPlugin } from './placeholder.js';
+import { clipboardPlugin, keybindings, bylinePlugin } from './plugins.js';
+import { Preview } from './Preview.js';
+import { bylineEditorSchema } from './schema.js';
+import { bylineContainerStyles, bylineEditorStyles, dropdownContainerStyles, dropdownUlStyles, dropdownLiStyles, selectedDropdownLiStyles } from './styles.js';
+
+const Byline = ({ theme, allowUntaggedContributors, contributorLimit, enablePreview, placeholder, initialValue, readOnly, handleSave, searchContributors, onBlur }) => {
+  const editorRef = useRef(null);
+  const viewRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [currentText, setCurrentText] = useState("");
+  const [currentOptionIndex, setCurrentOptionIndex] = useState(0);
+  const [taggedContributors, setTaggedContributors] = useState([]);
+  const [currentDoc, setCurrentDoc] = useState(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const isTypingFromStartRange = useRef(void 0);
+  const trackTypingFromStart = (tr) => {
+    const isCursorSelection = tr.selection.from === tr.selection.to;
+    const currentPosition = tr.selection.from;
+    const hasChanges = tr.steps.length > 0;
+    if (!isCursorSelection) {
+      isTypingFromStartRange.current = void 0;
+      return;
+    }
+    if (!isTypingFromStartRange.current && currentPosition === 1 && hasChanges) {
+      isTypingFromStartRange.current = {
+        start: 1,
+        maxReached: 1,
+        lastPosition: 1
+      };
+      return;
+    }
+    if (isTypingFromStartRange.current) {
+      const { start, maxReached, lastPosition } = isTypingFromStartRange.current;
+      const isWithinRange = currentPosition >= start && currentPosition <= maxReached;
+      const isExtendingRange = hasChanges && currentPosition === maxReached + 1;
+      if (isWithinRange || isExtendingRange) {
+        if (hasChanges) {
+          const positionDelta = currentPosition - lastPosition;
+          if (positionDelta < 0) {
+            isTypingFromStartRange.current.maxReached = maxReached - 1;
+          } else if (positionDelta > 0) {
+            isTypingFromStartRange.current.maxReached = maxReached + 1;
+          }
+          isTypingFromStartRange.current.lastPosition = currentPosition;
+        }
+        return;
+      }
+    }
+    isTypingFromStartRange.current = void 0;
+  };
+  const getShouldShowDropdown = (view, selectedText) => {
+    if (readOnly) {
+      return false;
+    }
+    const showDropdownBasedOnProps = !!searchContributors || !!allowUntaggedContributors;
+    if (hasHitContributorLimit(view.state.doc, contributorLimit)) {
+      return false;
+    }
+    return selectedText.trim() !== "" && showDropdownBasedOnProps;
+  };
+  const [enterHit, setEnterHit] = useState(false);
+  const checkDropdownVisibility = () => {
+    if (dropdownRef.current?.checkVisibility) {
+      return dropdownRef.current.checkVisibility();
+    } else {
+      return dropdownRef.current?.offsetParent !== null;
+    }
+  };
+  useEffect(() => {
+    if (!editorRef.current) {
+      return;
+    }
+    const initialDoc = convertBylineModelToNode(initialValue);
+    const state = EditorState.create({
+      schema: bylineEditorSchema,
+      plugins: [
+        dropCursor(),
+        clipboardPlugin(allowUntaggedContributors, contributorLimit),
+        history(),
+        keybindings(),
+        createInvisiblesPlugin([space, nbSpace], {
+          displayLineEndSelection: true,
+          shouldShowInvisibles: true
+        }),
+        bylinePlugin(),
+        createPlaceholderPlugin(placeholder ?? "Enter a byline...")
+      ],
+      doc: initialDoc
+    });
+    setCurrentDoc(initialDoc);
+    viewRef.current = new EditorView(editorRef.current, {
+      state,
+      editable: () => !readOnly,
+      attributes: {
+        role: "combobox",
+        "aria-label": "byline",
+        "aria-controls": "byline-dropdown",
+        "aria-expanded": "false",
+        "data-testid": "byline-input",
+        ...readOnly && { "aria-readonly": "true" }
+      },
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          if (readOnly) {
+            return false;
+          }
+          if (event.key === "Escape") {
+            setShowDropdown(false);
+            return true;
+          }
+          if (event.key === "ArrowDown") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setCurrentOptionIndex((currentOptionIndex2) => {
+                return currentOptionIndex2 + 1;
+              });
+              return true;
+            }
+            return false;
+          }
+          if (event.key === "ArrowUp") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setCurrentOptionIndex((currentOptionIndex2) => {
+                return currentOptionIndex2 - 1;
+              });
+              return true;
+            }
+            return false;
+          }
+          if (event.key === "Enter") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setEnterHit(true);
+            }
+            return false;
+          }
+          return false;
+        },
+        blur: (_view, event) => {
+          if (readOnly) {
+            return false;
+          }
+          if (!dropdownRef.current?.contains(event.relatedTarget)) {
+            setShowDropdown(false);
+          }
+          return false;
+        }
+      },
+      dispatchTransaction(tr) {
+        if (readOnly) {
+          if (tr.docChanged) {
+            return;
+          }
+          if (viewRef.current) {
+            const newState = viewRef.current.state.apply(tr);
+            viewRef.current.updateState(newState);
+          }
+          return;
+        }
+        if (viewRef.current?.hasFocus()) {
+          trackTypingFromStart(tr);
+          const newState = viewRef.current.state.apply(tr);
+          viewRef.current.updateState(newState);
+          const { selectedText } = getCurrentText(newState.doc, newState.selection.from, newState.selection.to, isTypingFromStartRange.current);
+          setCurrentText(selectedText);
+          const shouldShowDropdown = getShouldShowDropdown(viewRef.current, selectedText);
+          if (shouldShowDropdown && searchContributors) {
+            void searchContributors(selectedText).then((contributors) => {
+              setTaggedContributors(contributors);
+            }).catch((error) => {
+              console.error("Error fetching tagged contributors:", error);
+              setTaggedContributors([]);
+            });
+          } else {
+            setTaggedContributors([]);
+          }
+          setShowDropdown(shouldShowDropdown);
+          if (tr.docChanged) {
+            setCurrentDoc(newState.doc);
+            handleSave(convertNodeToBylineModel(newState.doc));
+          }
+        }
+      }
+    });
+    return () => {
+      viewRef.current?.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    const numberOfOptions = taggedContributors.length + (allowUntaggedContributors ? 1 : 0);
+    if (numberOfOptions) {
+      if (currentOptionIndex < 0) {
+        setCurrentOptionIndex(numberOfOptions - 1);
+      } else {
+        setCurrentOptionIndex(currentOptionIndex % numberOfOptions);
+      }
+    }
+    if (showDropdown) {
+      const editor = document.querySelector("[role=combobox]");
+      editor?.setAttribute("aria-activedescendant", `contributor-option-${currentOptionIndex}`);
+      editor?.setAttribute("aria-expanded", "true");
+    }
+  }, [
+    currentOptionIndex,
+    showDropdown,
+    taggedContributors.length,
+    allowUntaggedContributors
+  ]);
+  useEffect(() => {
+    if (showDropdown && currentOptionIndex >= 0) {
+      const selectedOption = document.getElementById(`contributor-option-${currentOptionIndex}`);
+      if (selectedOption && dropdownRef.current) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }
+  }, [currentOptionIndex, showDropdown]);
+  useEffect(() => {
+    if (enterHit) {
+      if (allowUntaggedContributors && currentOptionIndex === taggedContributors.length) {
+        addUntaggedContributor(viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+      } else {
+        const contributorToAdd = taggedContributors[currentOptionIndex];
+        if (contributorToAdd) {
+          addTaggedContributor(contributorToAdd, viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+        }
+      }
+      setEnterHit(false);
+    }
+  }, [
+    currentOptionIndex,
+    enterHit,
+    taggedContributors,
+    contributorLimit,
+    allowUntaggedContributors
+  ]);
+  return jsxs("div", { css: bylineContainerStyles, children: [jsx("div", { css: bylineEditorStyles(theme?.editor), ref: editorRef, onBlur }), jsx("div", { ref: dropdownRef, tabIndex: 0, css: dropdownContainerStyles(showDropdown && // show the dropdown if there are tagged contributors to select or untagged contributors are allowed
+  (taggedContributors.length > 0 || !!allowUntaggedContributors), theme?.dropdown), children: jsxs("ul", { id: "byline-dropdown", role: "listbox", css: dropdownUlStyles, children: [taggedContributors.map((contributor, i) => jsx("li", { id: `contributor-option-${i}`, role: "option", "aria-selected": i === currentOptionIndex, css: [
+    dropdownLiStyles(theme),
+    i === currentOptionIndex && selectedDropdownLiStyles(theme)
+  ], onMouseMove: () => {
+    if (currentOptionIndex !== i) {
+      setCurrentOptionIndex(i);
+    }
+  }, onMouseDown: (e) => {
+    e.preventDefault();
+    addTaggedContributor(contributor, viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+  }, children: contributor.internalLabel ?? contributor.label }, contributor.tagId)), allowUntaggedContributors && jsxs("li", { role: "option", id: `contributor-option-${taggedContributors.length}`, "aria-selected": currentOptionIndex === taggedContributors.length, css: [
+    dropdownLiStyles(theme),
+    currentOptionIndex === taggedContributors.length && selectedDropdownLiStyles(theme)
+  ], onMouseMove: () => {
+    if (currentOptionIndex !== taggedContributors.length) {
+      setCurrentOptionIndex(taggedContributors.length);
+    }
+  }, onMouseDown: (e) => {
+    e.preventDefault();
+    addUntaggedContributor(viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+  }, children: ['Add "', currentText, '" as untagged contributor'] })] }) }), enablePreview && jsx(Preview, { doc: currentDoc })] });
+};
+
+export { Byline };

package/dist/byline/Preview.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('./styles.cjs');
+
+const Preview = ({ doc }) => {
+  if (doc?.childCount === void 0 || doc.childCount === 0) {
+    return null;
+  }
+  const parts = [];
+  doc.descendants((node) => {
+    parts.push(node);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.previewStyles, "data-testid": "byline-preview", children: parts.map((node, i) => {
+    if (node.isText) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          css: styles.previewFreeTextStyles,
+          children: node.text
+        },
+        `${node.text}${i}`
+      );
+    } else if (node.type.name === "chip") {
+      if (node.attrs.path) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            css: styles.previewContributorStyles(node),
+            href: `https://theguardian.com/${node.attrs.path}`,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: node.attrs.label
+          },
+          `${node.text}${i}`
+        );
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            css: styles.previewContributorStyles(node),
+            children: node.attrs.label
+          },
+          `${node.text}${i}`
+        );
+      }
+    }
+    return null;
+  }) });
+};
+
+exports.Preview = Preview;

package/dist/byline/Preview.js

@@ -0,0 +1,26 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { previewStyles, previewFreeTextStyles, previewContributorStyles } from './styles.js';
+
+const Preview = ({ doc }) => {
+  if (doc?.childCount === void 0 || doc.childCount === 0) {
+    return null;
+  }
+  const parts = [];
+  doc.descendants((node) => {
+    parts.push(node);
+  });
+  return jsx("div", { css: previewStyles, "data-testid": "byline-preview", children: parts.map((node, i) => {
+    if (node.isText) {
+      return jsx("span", { css: previewFreeTextStyles, children: node.text }, `${node.text}${i}`);
+    } else if (node.type.name === "chip") {
+      if (node.attrs.path) {
+        return jsx("a", { css: previewContributorStyles(node), href: `https://theguardian.com/${node.attrs.path}`, target: "_blank", rel: "noopener noreferrer", children: node.attrs.label }, `${node.text}${i}`);
+      } else {
+        return jsx("span", { css: previewContributorStyles(node), children: node.attrs.label }, `${node.text}${i}`);
+      }
+    }
+    return null;
+  }) });
+};
+
+export { Preview };

package/dist/byline/lib.cjs

@@ -0,0 +1,240 @@
+'use strict';
+
+var schema = require('./schema.cjs');
+
+const detectNameInText = (text, cursorOffset, isTypingFromStartRange) => {
+  const namePattern = /[\p{Lu}*][\p{L}*]*(?:[-'.&’]+[\p{Lu}*][\p{L}*]*|(?!\.\s)\s+[\p{Lu}*][\p{L}*]*)*[ ]?/gu;
+  const searchText = isTypingFromStartRange ? text.substring(0, isTypingFromStartRange.maxReached) : text;
+  const matches = Array.from(searchText.matchAll(namePattern)).flat().map((match) => ({
+    name: match.trimEnd(),
+    startIndex: searchText.indexOf(match),
+    endIndex: searchText.indexOf(match) + match.length
+  }));
+  if (matches.length === 0) {
+    return void 0;
+  }
+  const nameContainingCursor = matches.find(
+    (match) => cursorOffset >= 0 && cursorOffset >= match.startIndex && cursorOffset <= match.endIndex
+  );
+  if (nameContainingCursor) {
+    return nameContainingCursor;
+  }
+  return void 0;
+};
+function refocusEditor(viewRef) {
+  setTimeout(() => {
+    viewRef.current?.focus();
+  }, 0);
+}
+function insertChip(text, from, to, type, tagId, path, meta) {
+  const command = (state, dispatch) => {
+    const chipNode = schema.bylineEditorSchema.nodes.chip.create({
+      label: text,
+      type,
+      tagId,
+      path,
+      meta
+    });
+    const tr = state.tr.replaceRangeWith(from, to, chipNode);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+  return command;
+}
+const getCurrentText = (doc, currentOffset, toOffset, isTypingFromStartRange) => {
+  const hasSelection = currentOffset !== toOffset;
+  const selectedText = hasSelection ? doc.textBetween(currentOffset, toOffset, " ") : "";
+  if (hasSelection) {
+    return {
+      currentTextNode: null,
+      startOffset: -1,
+      endOffset: -1,
+      selectedText,
+      hasSelection: true
+    };
+  }
+  let currentTextNode = null;
+  let startOffset = -1;
+  let endOffset = -1;
+  let lastTextContent = "";
+  doc.descendants((node, pos) => {
+    if (pos >= currentOffset) {
+      return false;
+    }
+    if (node.isText && node.textContent.trim()) {
+      const relativeCursorOffset = currentOffset - pos;
+      const detectedName = detectNameInText(
+        node.textContent,
+        relativeCursorOffset,
+        isTypingFromStartRange
+      );
+      if (detectedName) {
+        currentTextNode = node;
+        lastTextContent = detectedName.name;
+        startOffset = pos + detectedName.startIndex;
+        endOffset = pos + detectedName.endIndex;
+      }
+    } else if (node.type.name === "chip") {
+      currentTextNode = null;
+      startOffset = -1;
+      endOffset = -1;
+      lastTextContent = "";
+    }
+    return true;
+  });
+  return {
+    currentTextNode,
+    startOffset,
+    endOffset,
+    selectedText: lastTextContent,
+    hasSelection: false
+  };
+};
+const hasHitContributorLimit = (doc, contributorLimit) => {
+  if (contributorLimit === void 0) {
+    return false;
+  }
+  const numberOfContributors = doc.children.filter(
+    (c) => c.type.name === "chip"
+  ).length;
+  return numberOfContributors >= contributorLimit;
+};
+const addUntaggedContributor = (viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange) => {
+  if (!viewRef.current) {
+    return;
+  }
+  const { state, dispatch } = viewRef.current;
+  const doc = state.doc;
+  if (hasHitContributorLimit(doc, contributorLimit)) {
+    return;
+  }
+  const {
+    currentTextNode,
+    startOffset,
+    endOffset,
+    selectedText,
+    hasSelection
+  } = getCurrentText(
+    doc,
+    state.selection.from,
+    state.selection.to,
+    isTypingFromStartRange
+  );
+  if (hasSelection) {
+    setShowDropdown(false);
+    const result2 = insertChip(
+      selectedText,
+      state.selection.from,
+      state.selection.to,
+      "untagged"
+    )(state, dispatch);
+    refocusEditor(viewRef);
+    return result2;
+  }
+  if (!currentTextNode || startOffset === -1) {
+    console.warn("No text node found in the document");
+    return;
+  }
+  setShowDropdown(false);
+  const result = insertChip(
+    selectedText,
+    startOffset,
+    endOffset,
+    "untagged"
+  )(state, dispatch);
+  refocusEditor(viewRef);
+  return result;
+};
+const addTaggedContributor = (contributor, viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange) => {
+  if (!viewRef.current) {
+    return;
+  }
+  const { state, dispatch } = viewRef.current;
+  const doc = state.doc;
+  if (hasHitContributorLimit(doc, contributorLimit)) {
+    return;
+  }
+  const { currentTextNode, startOffset, endOffset, hasSelection } = getCurrentText(
+    doc,
+    state.selection.from,
+    state.selection.to,
+    isTypingFromStartRange
+  );
+  if (hasSelection) {
+    setShowDropdown(false);
+    const result2 = insertChip(
+      contributor.label,
+      state.selection.from,
+      state.selection.to,
+      "tagged",
+      contributor.tagId,
+      contributor.path,
+      contributor.meta
+    )(state, dispatch);
+    refocusEditor(viewRef);
+    return result2;
+  }
+  if (!currentTextNode || startOffset === -1) {
+    console.warn("No text node found in the document");
+    return;
+  }
+  setShowDropdown(false);
+  const result = insertChip(
+    contributor.label,
+    startOffset,
+    endOffset,
+    "tagged",
+    contributor.tagId,
+    contributor.path,
+    contributor.meta
+  )(state, dispatch);
+  refocusEditor(viewRef);
+  return result;
+};
+const convertBylineModelToNode = (value) => {
+  const nodes = (value ?? []).map((part) => {
+    if (part.type === "contributor") {
+      return schema.bylineEditorSchema.nodes.chip.create({
+        label: part.value,
+        type: part.tagId ? "tagged" : "untagged",
+        tagId: part.tagId,
+        path: part.path,
+        meta: part.meta
+      });
+    } else {
+      return schema.bylineEditorSchema.text(part.value);
+    }
+  });
+  return schema.bylineEditorSchema.node("doc", null, nodes);
+};
+const convertNodeToBylineModel = (doc) => {
+  const model = [];
+  doc.forEach((node) => {
+    if (node.isText) {
+      model.push({
+        type: "text",
+        value: node.text ?? ""
+      });
+    } else if (node.type.name === "chip") {
+      model.push({
+        type: "contributor",
+        value: node.attrs.label,
+        tagId: node.attrs.tagId,
+        path: node.attrs.path,
+        meta: node.attrs.meta
+      });
+    }
+  });
+  return model;
+};
+
+exports.addTaggedContributor = addTaggedContributor;
+exports.addUntaggedContributor = addUntaggedContributor;
+exports.convertBylineModelToNode = convertBylineModelToNode;
+exports.convertNodeToBylineModel = convertNodeToBylineModel;
+exports.detectNameInText = detectNameInText;
+exports.getCurrentText = getCurrentText;
+exports.hasHitContributorLimit = hasHitContributorLimit;
+exports.insertChip = insertChip;