@guardian/stand 0.0.2 → 0.0.3

package/src/byline/plugins.ts

@@ -1,186 +0,0 @@
-import { redo, undo } from 'prosemirror-history';
-import { keymap } from 'prosemirror-keymap';
-import type { Node as ProsemirrorNode } from 'prosemirror-model';
-import { Slice } from 'prosemirror-model';
-import { Plugin } from 'prosemirror-state';
-import { NodeSelection } from 'prosemirror-state';
-import type { Command } from 'prosemirror-state';
-import { bylineEditorSchema } from './schema';
-
-const serializeNode = (node: ProsemirrorNode, output: string[]): void => {
-	if (node.isText) {
-		output.push(node.text ?? '');
-	} else if (node.type.name === 'chip') {
-		output.push(node.attrs.label as string);
-	} else if (node.isInline) {
-		node.content.forEach((child) => serializeNode(child, output));
-	} else {
-		// fallback for other block/unknown content
-		node.content.forEach((child) => serializeNode(child, output));
-		output.push('\n');
-	}
-};
-
-// This runs after ProseMirror's default paste parsing, allowing us to work with
-// the already-parsed document structure when pasting content.
-const transformPastedNode = (
-	slice: Slice,
-	allowUntaggedContributors?: boolean,
-	contributorLimit?: number,
-) => {
-	let contributorCount = 0;
-	const output: ProsemirrorNode[] = [];
-
-	const convertChipToPlaintext = (
-		node: ProsemirrorNode,
-		output: ProsemirrorNode[],
-	) => {
-		const label = node.attrs.label as string;
-		if (label) {
-			const textNode = bylineEditorSchema.text(label);
-			output.push(textNode);
-		}
-	};
-
-	slice.content.forEach((node) => {
-		if (node.type.name === 'chip') {
-			const type = node.attrs.type as string;
-
-			// If there is a contributor limit and we've hit it, convert chips to plain text
-			if (
-				contributorLimit !== undefined &&
-				contributorCount >= contributorLimit
-			) {
-				convertChipToPlaintext(node, output);
-				return;
-			}
-
-			// If untagged contributors are not allowed, convert untagged chips to plain text
-			if (type === 'untagged' && !allowUntaggedContributors) {
-				convertChipToPlaintext(node, output);
-			} else {
-				// Keep the chip as-is
-				output.push(node);
-				contributorCount++;
-			}
-		} else if (node.isText) {
-			// Keep text nodes as-is
-			output.push(node);
-		}
-	});
-
-	return output;
-};
-
-export const clipboardPlugin = (
-	allowUntaggedContributors?: boolean,
-	contributorLimit?: number,
-): Plugin => {
-	return new Plugin({
-		props: {
-			// Custom serializer for copying content from the editor
-			clipboardTextSerializer: (slice) => {
-				const parts: string[] = [];
-
-				slice.content.forEach((node: ProsemirrorNode) => {
-					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: Command = (state, dispatch) => {
-	const { selection } = state;
-	// Check if we have a node selection and it's a chip
-	if (
-		selection instanceof NodeSelection &&
-		selection.node.type.name === 'chip'
-	) {
-		if (dispatch) {
-			const tr = state.tr.deleteSelection();
-			dispatch(tr);
-		}
-		return true;
-	}
-	return false;
-};
-
-export const keybindings = () =>
-	keymap({
-		'Mod-z': undo,
-		'Mod-y': redo,
-		'Mod-shift-z': redo,
-		Backspace: deleteSelectedChip,
-		Delete: deleteSelectedChip,
-	});
-
-export const bylinePlugin = (): Plugin => {
-	return new Plugin({
-		props: {
-			nodeViews: {
-				chip: (node, view, getPos) => {
-					const dom = document.createElement('chip');
-					dom.setAttribute('data-label', node.attrs.label as string);
-					dom.setAttribute('data-type', node.attrs.type as string);
-					dom.setAttribute('data-tag-id', node.attrs.tagId as string);
-					dom.setAttribute('data-path', node.attrs.path as string);
-					if (node.attrs.meta) {
-						dom.setAttribute(
-							'data-meta',
-							JSON.stringify(node.attrs.meta),
-						);
-					}
-					dom.textContent = node.attrs.label as string;
-
-					const deleteHandle = document.createElement('span');
-					deleteHandle.innerHTML = '×';
-					deleteHandle.title = `Delete ${node.attrs.label}`;
-
-					deleteHandle.addEventListener('click', (event) => {
-						event.stopPropagation();
-						const pos = getPos();
-
-						if (pos === undefined) {
-							return;
-						}
-
-						const tr = view.state.tr.deleteRange(
-							pos,
-							pos + node.nodeSize,
-						);
-						view.dispatch(tr);
-					});
-
-					dom.appendChild(deleteHandle);
-
-					return { dom };
-				},
-			},
-		},
-	});
-};

package/src/byline/schema.ts

@@ -1,62 +0,0 @@
-import { Schema } from 'prosemirror-model';
-
-export const bylineEditorSchema = new 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: HTMLElement) {
-						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') as string,
-									) as unknown)
-								: {},
-						};
-					},
-				},
-			],
-			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',
-		},
-	},
-});

package/src/byline/styles.ts

@@ -1,246 +0,0 @@
-import { css } from '@emotion/react';
-import type { Node } from 'prosemirror-model';
-import type { PartialBylineTheme } from './theme';
-
-export const bylineContainerStyles = css`
-	position: relative;
-	width: 100%;
-`;
-
-export const bylineEditorStyles = (theme: PartialBylineTheme['editor']) => 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;
-	}
-`;
-
-export const dropdownContainerStyles = (
-	showDropdown: boolean,
-	theme?: PartialBylineTheme['dropdown'],
-) => 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;
-`;
-
-export const dropdownUlStyles = css`
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-`;
-
-export const dropdownLiStyles = (theme?: PartialBylineTheme) => css`
-	cursor: pointer;
-	padding: 5px;
-	border-bottom: ${theme?.dropdown?.li?.borderBottom ?? '1px solid #ccc'};
-	color: ${theme?.dropdown?.li?.color ?? 'inherit'};
-`;
-
-export const selectedDropdownLiStyles = (theme?: PartialBylineTheme) => css`
-	background-color: ${theme?.dropdown?.li?.selected?.background ??
-	'cadetblue'};
-	color: ${theme?.dropdown?.li?.selected?.color ?? 'white'};
-`;
-
-export const previewStyles = css`
-	margin-top: 5px;
-	white-space: pre-wrap;
-`;
-
-export const previewFreeTextStyles = css`
-	font-style: italic;
-`;
-
-export const previewContributorStyles = (node: Node) => css`
-	${node.attrs.type === 'tagged' ? 'text-decoration: underline;' : ''}
-	color: inherit;
-`;

package/src/byline/theme.ts

@@ -1,45 +0,0 @@
-import type { DeepPartial } from './util';
-
-type BylineTheme = {
-	editor: {
-		invisibles: {
-			color: string;
-		};
-		color: string;
-		border: string;
-		background: string;
-		chip: {
-			color: string;
-			border: string;
-			padding: string;
-			borderRadius: string;
-			taggedBackground: string;
-			untagged: {
-				color: string;
-			};
-			selected: {
-				border: string;
-			};
-		};
-		lineHeight: string;
-		placeholder: {
-			color: string;
-		};
-		readOnlyBackground: string;
-	};
-	dropdown: {
-		background: string;
-		border: string;
-		maxHeight: string;
-		li: {
-			color: string;
-			borderBottom: string;
-			selected: {
-				background: string;
-				color: string;
-			};
-		};
-	};
-};
-
-export type PartialBylineTheme = DeepPartial<BylineTheme>;

package/src/byline/util.ts

@@ -1,5 +0,0 @@
-export type DeepPartial<T> = T extends object
-	? {
-			[P in keyof T]?: DeepPartial<T[P]>;
-		}
-	: T;

package/src/index.ts

@@ -1,2 +0,0 @@
-export { Byline } from './byline/Byline';
-export type { BylineModel } from './byline/lib';

package/src/mocks/prosemirror-view.ts

@@ -1,19 +0,0 @@
-// copied from flexible-frontend
-// prosemirror's functions for finding what point in a document a user clicked on
-// throw excepetions in the test enviroment, so need to be mocked out.
-// Unclear if the exception is due to userEvent using mocked pointer events
-// without co-ordinates, or JSdom not supporting the DOM methods used under the hood.
-const mockEditorViewMethods = {
-	posAtCoords: () => {
-		return null;
-	},
-	coordsAtPos: () => {
-		return {
-			left: 0,
-			right: 0,
-			top: 0,
-			bottom: 0,
-		};
-	},
-};
-export { mockEditorViewMethods };

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-	"extends": "@guardian/tsconfig/tsconfig.json",
-	"compilerOptions": {
-		"outDir": "dist/types",
-		"declarationDir": "dist/types",
-		"emitDeclarationOnly": true,
-		"declaration": true,
-		"forceConsistentCasingInFileNames": true,
-		"importHelpers": true,
-		"isolatedModules": true,
-		"skipLibCheck": true,
-		"baseUrl": "./",
-		"jsx": "react-jsx",
-		"jsxImportSource": "@emotion/react",
-		"lib": ["dom", "es2022"]
-	},
-	"include": ["src/**/*", ".storybook/**/*", "jest-setup-after-env.ts"],
-	"exclude": ["node_modules", "dist"]
-}