@guardian/stand 0.0.0 → 0.0.3

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 };

package/dist/byline/styles.cjs

@@ -0,0 +1,244 @@
+'use strict';
+
+var react = require('@emotion/react');
+
+const bylineContainerStyles = react.css`
+	position: relative;
+	width: 100%;
+`;
+const bylineEditorStyles = (theme) => react.css`
+	border: ${theme?.border ?? "1px black solid"};
+	background-color: ${theme?.background ?? "white"};
+	color: ${theme?.color ?? "inherit"};
+
+	/* ProseMirror styles from prosemirror-view/styles/prosemirror.css */
+	.ProseMirror {
+		padding: 4px 4px;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+		white-space: break-spaces;
+		-webkit-font-variant-ligatures: none;
+		font-variant-ligatures: none;
+		font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
+		line-height: ${theme?.lineHeight ?? "1.8"};
+	}
+
+	.ProseMirror[contenteditable='false'] {
+		background: ${theme?.readOnlyBackground ?? "#dcdcdc"};
+		cursor: 'not-allowed';
+	}
+
+	.ProseMirror pre {
+		white-space: pre-wrap;
+	}
+
+	.ProseMirror li {
+		position: relative;
+	}
+
+	.ProseMirror-hideselection *::selection {
+		background: transparent;
+	}
+	.ProseMirror-hideselection *::-moz-selection {
+		background: transparent;
+	}
+	.ProseMirror-hideselection {
+		caret-color: transparent;
+	}
+
+	/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+	.ProseMirror [draggable][contenteditable='false'] {
+		user-select: text;
+	}
+
+	.ProseMirror-selectednode {
+		outline: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
+	}
+
+	/* Make sure li selections wrap around markers */
+
+	li.ProseMirror-selectednode {
+		outline: none;
+	}
+
+	li.ProseMirror-selectednode:after {
+		content: '';
+		position: absolute;
+		left: -32px;
+		right: -2px;
+		top: -2px;
+		bottom: -2px;
+		border: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
+		pointer-events: none;
+	}
+
+	/* Protect against generic img rules */
+
+	img.ProseMirror-separator {
+		display: inline !important;
+		border: none !important;
+		margin: 0 !important;
+	}
+
+	.ProseMirror:focus {
+		outline: none;
+	}
+
+	/* Invisible styles from @guardian/prosemirror-invisibles/dist/style.css */
+
+	.invisible {
+		/* Chrome in particular dislikes doing the right thing
+		* with carets and inline elements when contenteditable
+		* is 'false'. See e.g. https://github.com/ProseMirror/prosemirror/issues/1061
+   		*/
+		display: inline;
+		position: relative;
+		pointer-events: none;
+	}
+
+	.invisible:before {
+		position: relative;
+		caret-color: inherit;
+		color: ${theme?.invisibles?.color ?? "gray"};
+		display: inline-block;
+		font-weight: 400;
+		font-style: normal;
+		line-height: initial;
+		width: 0;
+		top: 0;
+		left: 0;
+		z-index: 1;
+	}
+
+	.invisible__selected-marker {
+		position: absolute;
+		caret-color: inherit;
+		background-color: #dcdcdc;
+		display: inline-block;
+		font-weight: 400;
+		font-style: normal;
+		line-height: initial;
+		top: 0;
+		left: 0;
+		width: 10px;
+		height: 100%;
+		z-index: 0;
+	}
+
+	.ProseMirror-focused .invisible__selected-marker {
+		background-color: #b4d9ff;
+	}
+
+	.ProseMirror-focused .invisible--is-selected::before {
+		background-color: #b4d8ff;
+	}
+
+	.invisible--is-selected::before {
+		background-color: #dcdcdc;
+	}
+
+	.invisible--space:before {
+		content: '·';
+	}
+
+	.invisible--nb-space {
+		vertical-align: text-bottom;
+	}
+
+	.invisible--nb-space:before {
+		font-size: 15px;
+		content: '^';
+		position: absolute;
+		top: 9px;
+		left: -1px;
+	}
+
+	chip {
+		border: ${theme?.chip?.border ?? "2px solid lightgrey"};
+		border-radius: ${theme?.chip?.borderRadius ?? "8px"};
+		padding: ${theme?.chip?.padding ?? "2px 4px"};
+		color: ${theme?.chip?.color ?? "inherit"};
+
+		cursor: default;
+
+		&[data-type='tagged'] {
+			background-color: ${theme?.chip?.taggedBackground ?? "lightgrey"};
+		}
+
+		&[data-type='untagged'] {
+			color: ${theme?.chip?.untagged?.color ?? "inherit"};
+		}
+
+		::after {
+			content: '';
+			display: inline-block;
+		}
+
+		span {
+			cursor: pointer;
+			margin-left: 5px;
+		}
+	}
+
+	/* Leave space between subsequent chips */
+	chip + chip {
+		margin-left: 3px;
+	}
+
+	.placeholder {
+		display: inline-block;
+		height: 0;
+		width: 0;
+		white-space: nowrap;
+		color: ${theme?.placeholder?.color ?? "#777575"};
+		pointer-events: none;
+		cursor: text;
+	}
+`;
+const dropdownContainerStyles = (showDropdown, theme) => react.css`
+	position: absolute;
+	box-sizing: border-box;
+	width: 100%;
+	z-index: 1000;
+	border: ${theme?.border ?? "1px solid #ccc"};
+	background-color: ${theme?.background ?? "rgba(255, 255, 255, 0.8)"};
+	display: ${showDropdown ? "block" : "none"};
+	max-height: ${theme?.maxHeight ?? "320px"};
+	overflow-y: auto;
+`;
+const dropdownUlStyles = react.css`
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+`;
+const dropdownLiStyles = (theme) => react.css`
+	cursor: pointer;
+	padding: 5px;
+	border-bottom: ${theme?.dropdown?.li?.borderBottom ?? "1px solid #ccc"};
+	color: ${theme?.dropdown?.li?.color ?? "inherit"};
+`;
+const selectedDropdownLiStyles = (theme) => react.css`
+	background-color: ${theme?.dropdown?.li?.selected?.background ?? "cadetblue"};
+	color: ${theme?.dropdown?.li?.selected?.color ?? "white"};
+`;
+const previewStyles = react.css`
+	margin-top: 5px;
+	white-space: pre-wrap;
+`;
+const previewFreeTextStyles = react.css`
+	font-style: italic;
+`;
+const previewContributorStyles = (node) => react.css`
+	${node.attrs.type === "tagged" ? "text-decoration: underline;" : ""}
+	color: inherit;
+`;
+
+exports.bylineContainerStyles = bylineContainerStyles;
+exports.bylineEditorStyles = bylineEditorStyles;
+exports.dropdownContainerStyles = dropdownContainerStyles;
+exports.dropdownLiStyles = dropdownLiStyles;
+exports.dropdownUlStyles = dropdownUlStyles;
+exports.previewContributorStyles = previewContributorStyles;
+exports.previewFreeTextStyles = previewFreeTextStyles;
+exports.previewStyles = previewStyles;
+exports.selectedDropdownLiStyles = selectedDropdownLiStyles;