@guardian/stand 0.0.0 → 0.0.2

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;

package/dist/byline/plugins.js

@@ -0,0 +1,123 @@
+import { redo, undo } from 'prosemirror-history';
+import { keymap } from 'prosemirror-keymap';
+import { Slice } from 'prosemirror-model';
+import { Plugin, NodeSelection } from 'prosemirror-state';
+import { bylineEditorSchema } from './schema.js';
+
+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 = 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 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 = bylineEditorSchema.nodes.doc.create({}, transformedNodes).content;
+          return new Slice(newFragment, slice.openStart, slice.openEnd);
+        }
+        return slice;
+      }
+    }
+  });
+};
+const deleteSelectedChip = (state, dispatch) => {
+  const { selection } = state;
+  if (selection instanceof NodeSelection && selection.node.type.name === "chip") {
+    if (dispatch) {
+      const tr = state.tr.deleteSelection();
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const keybindings = () => keymap({
+  "Mod-z": undo,
+  "Mod-y": redo,
+  "Mod-shift-z": redo,
+  Backspace: deleteSelectedChip,
+  Delete: deleteSelectedChip
+});
+const bylinePlugin = () => {
+  return new 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 };
+        }
+      }
+    }
+  });
+};
+
+export { bylinePlugin, clipboardPlugin, keybindings };

package/dist/byline/schema.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+var prosemirrorModel = require('prosemirror-model');
+
+const bylineEditorSchema = new prosemirrorModel.Schema({
+  nodes: {
+    doc: {
+      content: "inline*"
+    },
+    chip: {
+      group: "inline",
+      inline: true,
+      atom: false,
+      selectable: true,
+      // allows selection for deletion/drag and drop
+      attrs: {
+        label: { default: "" },
+        type: { default: "untagged" },
+        tagId: { default: "" },
+        // tagId is optional for untagged contributors
+        path: { default: "" },
+        // path is optional for untagged contributors
+        meta: { default: {} }
+        // meta is optional and can hold any additional data
+      },
+      parseDOM: [
+        {
+          tag: "chip[data-label][data-type][data-tag-id][data-path][data-meta]",
+          getAttrs(dom) {
+            return {
+              label: dom.getAttribute("data-label"),
+              type: dom.getAttribute("data-type"),
+              tagId: dom.getAttribute("data-tag-id") ?? "",
+              path: dom.getAttribute("data-path") ?? "",
+              meta: dom.getAttribute("data-meta") ? JSON.parse(
+                dom.getAttribute("data-meta")
+              ) : {}
+            };
+          }
+        }
+      ],
+      toDOM(node) {
+        return [
+          "chip",
+          {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- label exists as string on chip node
+            "data-label": node.attrs.label,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- type exists as string on chip node
+            "data-type": node.attrs.type,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- tagId exists as string on chip node
+            "data-tag-id": node.attrs.tagId,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- path exists as string on chip node
+            "data-path": node.attrs.path,
+            "data-meta": node.attrs.meta ? JSON.stringify(node.attrs.meta) : {}
+          },
+          node.attrs.label
+        ];
+      }
+    },
+    text: {
+      group: "inline"
+    }
+  }
+});
+
+exports.bylineEditorSchema = bylineEditorSchema;

package/dist/byline/schema.js

@@ -0,0 +1,59 @@
+import { Schema } from 'prosemirror-model';
+
+const bylineEditorSchema = new Schema({
+  nodes: {
+    doc: {
+      content: "inline*"
+    },
+    chip: {
+      group: "inline",
+      inline: true,
+      atom: false,
+      selectable: true,
+      attrs: {
+        label: { default: "" },
+        type: { default: "untagged" },
+        tagId: { default: "" },
+        path: { default: "" },
+        meta: { default: {} }
+        // meta is optional and can hold any additional data
+      },
+      parseDOM: [
+        {
+          tag: "chip[data-label][data-type][data-tag-id][data-path][data-meta]",
+          getAttrs(dom) {
+            return {
+              label: dom.getAttribute("data-label"),
+              type: dom.getAttribute("data-type"),
+              tagId: dom.getAttribute("data-tag-id") ?? "",
+              path: dom.getAttribute("data-path") ?? "",
+              meta: dom.getAttribute("data-meta") ? JSON.parse(dom.getAttribute("data-meta")) : {}
+            };
+          }
+        }
+      ],
+      toDOM(node) {
+        return [
+          "chip",
+          {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- label exists as string on chip node
+            "data-label": node.attrs.label,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- type exists as string on chip node
+            "data-type": node.attrs.type,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- tagId exists as string on chip node
+            "data-tag-id": node.attrs.tagId,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- path exists as string on chip node
+            "data-path": node.attrs.path,
+            "data-meta": node.attrs.meta ? JSON.stringify(node.attrs.meta) : {}
+          },
+          node.attrs.label
+        ];
+      }
+    },
+    text: {
+      group: "inline"
+    }
+  }
+});
+
+export { bylineEditorSchema };