@guardian/stand 0.0.0 → 0.0.3

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;

package/dist/byline/lib.js

@@ -0,0 +1,181 @@
+import { bylineEditorSchema } from './schema.js';
+
+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 = 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 bylineEditorSchema.nodes.chip.create({
+        label: part.value,
+        type: part.tagId ? "tagged" : "untagged",
+        tagId: part.tagId,
+        path: part.path,
+        meta: part.meta
+      });
+    } else {
+      return bylineEditorSchema.text(part.value);
+    }
+  });
+  return 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;
+};
+
+export { addTaggedContributor, addUntaggedContributor, convertBylineModelToNode, convertNodeToBylineModel, detectNameInText, getCurrentText, hasHitContributorLimit, insertChip };

package/dist/byline/placeholder.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var prosemirrorState = require('prosemirror-state');
+var prosemirrorView = require('prosemirror-view');
+
+const getPlaceholder = (text) => {
+  const span = document.createElement("span");
+  span.innerHTML = text;
+  span.className = "placeholder";
+  return span;
+};
+const createPlaceholderPlugin = (text) => {
+  const shouldDisplayPlaceholder = (state) => text !== "" && state.doc.childCount < 1;
+  return new prosemirrorState.Plugin({
+    props: {
+      decorations: (editorState) => {
+        const { doc } = editorState;
+        if (shouldDisplayPlaceholder(editorState)) {
+          return prosemirrorView.DecorationSet.create(doc, [
+            prosemirrorView.Decoration.widget(0, getPlaceholder(text))
+          ]);
+        }
+        return prosemirrorView.DecorationSet.empty;
+      }
+    }
+  });
+};
+
+exports.createPlaceholderPlugin = createPlaceholderPlugin;

package/dist/byline/placeholder.js

@@ -0,0 +1,27 @@
+import { Plugin } from 'prosemirror-state';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+
+const getPlaceholder = (text) => {
+  const span = document.createElement("span");
+  span.innerHTML = text;
+  span.className = "placeholder";
+  return span;
+};
+const createPlaceholderPlugin = (text) => {
+  const shouldDisplayPlaceholder = (state) => text !== "" && state.doc.childCount < 1;
+  return new Plugin({
+    props: {
+      decorations: (editorState) => {
+        const { doc } = editorState;
+        if (shouldDisplayPlaceholder(editorState)) {
+          return DecorationSet.create(doc, [
+            Decoration.widget(0, getPlaceholder(text))
+          ]);
+        }
+        return DecorationSet.empty;
+      }
+    }
+  });
+};
+
+export { createPlaceholderPlugin };

package/dist/byline/plugins.cjs

@@ -0,0 +1,144 @@
+'use strict';
+
+var prosemirrorHistory = require('prosemirror-history');
+var prosemirrorKeymap = require('prosemirror-keymap');
+var prosemirrorModel = require('prosemirror-model');
+var prosemirrorState = require('prosemirror-state');
+var schema = require('./schema.cjs');
+
+const serializeNode = (node, output) => {
+  if (node.isText) {
+    output.push(node.text ?? "");
+  } else if (node.type.name === "chip") {
+    output.push(node.attrs.label);
+  } else if (node.isInline) {
+    node.content.forEach((child) => serializeNode(child, output));
+  } else {
+    node.content.forEach((child) => serializeNode(child, output));
+    output.push("\n");
+  }
+};
+const transformPastedNode = (slice, allowUntaggedContributors, contributorLimit) => {
+  let contributorCount = 0;
+  const output = [];
+  const convertChipToPlaintext = (node, output2) => {
+    const label = node.attrs.label;
+    if (label) {
+      const textNode = schema.bylineEditorSchema.text(label);
+      output2.push(textNode);
+    }
+  };
+  slice.content.forEach((node) => {
+    if (node.type.name === "chip") {
+      const type = node.attrs.type;
+      if (contributorLimit !== void 0 && contributorCount >= contributorLimit) {
+        convertChipToPlaintext(node, output);
+        return;
+      }
+      if (type === "untagged" && !allowUntaggedContributors) {
+        convertChipToPlaintext(node, output);
+      } else {
+        output.push(node);
+        contributorCount++;
+      }
+    } else if (node.isText) {
+      output.push(node);
+    }
+  });
+  return output;
+};
+const clipboardPlugin = (allowUntaggedContributors, contributorLimit) => {
+  return new prosemirrorState.Plugin({
+    props: {
+      // Custom serializer for copying content from the editor
+      clipboardTextSerializer: (slice) => {
+        const parts = [];
+        slice.content.forEach((node) => {
+          serializeNode(node, parts);
+        });
+        return parts.join("");
+      },
+      // Transform pasted content after ProseMirror's default parsing
+      transformPasted: (slice) => {
+        const transformedNodes = transformPastedNode(
+          slice,
+          allowUntaggedContributors,
+          contributorLimit
+        );
+        if (transformedNodes.length > 0) {
+          const newFragment = schema.bylineEditorSchema.nodes.doc.create(
+            {},
+            transformedNodes
+          ).content;
+          return new prosemirrorModel.Slice(
+            newFragment,
+            slice.openStart,
+            slice.openEnd
+          );
+        }
+        return slice;
+      }
+    }
+  });
+};
+const deleteSelectedChip = (state, dispatch) => {
+  const { selection } = state;
+  if (selection instanceof prosemirrorState.NodeSelection && selection.node.type.name === "chip") {
+    if (dispatch) {
+      const tr = state.tr.deleteSelection();
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const keybindings = () => prosemirrorKeymap.keymap({
+  "Mod-z": prosemirrorHistory.undo,
+  "Mod-y": prosemirrorHistory.redo,
+  "Mod-shift-z": prosemirrorHistory.redo,
+  Backspace: deleteSelectedChip,
+  Delete: deleteSelectedChip
+});
+const bylinePlugin = () => {
+  return new prosemirrorState.Plugin({
+    props: {
+      nodeViews: {
+        chip: (node, view, getPos) => {
+          const dom = document.createElement("chip");
+          dom.setAttribute("data-label", node.attrs.label);
+          dom.setAttribute("data-type", node.attrs.type);
+          dom.setAttribute("data-tag-id", node.attrs.tagId);
+          dom.setAttribute("data-path", node.attrs.path);
+          if (node.attrs.meta) {
+            dom.setAttribute(
+              "data-meta",
+              JSON.stringify(node.attrs.meta)
+            );
+          }
+          dom.textContent = node.attrs.label;
+          const deleteHandle = document.createElement("span");
+          deleteHandle.innerHTML = "\xD7";
+          deleteHandle.title = `Delete ${node.attrs.label}`;
+          deleteHandle.addEventListener("click", (event) => {
+            event.stopPropagation();
+            const pos = getPos();
+            if (pos === void 0) {
+              return;
+            }
+            const tr = view.state.tr.deleteRange(
+              pos,
+              pos + node.nodeSize
+            );
+            view.dispatch(tr);
+          });
+          dom.appendChild(deleteHandle);
+          return { dom };
+        }
+      }
+    }
+  });
+};
+
+exports.bylinePlugin = bylinePlugin;
+exports.clipboardPlugin = clipboardPlugin;
+exports.keybindings = keybindings;