Enable injecting custom content into various reader UI parts

src/common/components/common/custom-sections.js

@@ -0,0 +1,26 @@
+import React, { memo, useEffect, useRef } from 'react';
+
+let CustomSections = memo(({ type, ...props }) => {
+	let sectionRef = useRef();
+	useEffect(() => {
+		sectionRef.current.replaceChildren();
+		let finished = false;
+		let append = (...args) => {
+			if (finished) {
+				throw new Error('Append must be called directly and synchronously in the event');
+			}
+			let section = document.createElement('div');
+			section.className = 'section';
+			section.append(...args);
+			sectionRef.current.append(section);
+		};
+		let event = new CustomEvent(`customEvent`, { detail: { type: `render${type}`, doc: document, append, params: props } });
+		window.dispatchEvent(event);
+		finished = true;
+	});
+	return (
+		<div ref={sectionRef} className="custom-sections"/>
+	);
+});
+
+export default CustomSections;

src/common/components/common/preview.js

@@ -6,6 +6,7 @@ import ExpandableEditor from './expandable-editor';
 import { IconHighlight, IconUnderline, IconNote, IconArea, IconInk, IconText } from './icons';
 import { getPopupCoordinatesFromClickEvent } from '../../lib/utilities';
 import { ReaderContext } from '../../reader';
+import CustomSections from './custom-sections';
 
 // TODO: Don't allow to select UI text in popup header and footer
 
@@ -289,6 +290,7 @@ export function SidebarPreview(props) {
 							{annotation.authorName}
 						</div>
 					)}
+					<CustomSections type="SidebarAnnotationHeader" annotation={annotation}/>
 					<button
 						data-tabstop={props.selected && !props.readOnly ? 1 : undefined}
 						tabIndex={props.selected && !props.readOnly ? -1 : undefined}

src/common/components/toolbar.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useState, useCallback, useEffect, useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { useIntl } from 'react-intl';
 import cx from 'classnames';
+import CustomSections from './common/custom-sections';
 
 function Toolbar(props) {
 	const intl = useIntl();
@@ -221,6 +222,7 @@ function Toolbar(props) {
 				</div>
 			</div>
 			<div className="end">
+				<CustomSections type="Toolbar"/>
 				<button
 					id="viewFind"
 					className={cx('toolbarButton', { active: props.findPopupOpen })}

src/common/components/view/selection-popup.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { ANNOTATION_COLORS } from '../../defines';
 import ViewPopup from './view-popup';
+import CustomSections from '../common/custom-sections';
 
 function SelectionPopup(props) {
 	const intl = useIntl();
@@ -35,6 +36,7 @@ function SelectionPopup(props) {
 				<div className="wide-button" data-tabstop={true} onClick={handleAddToNote}>
 					<FormattedMessage id="pdfReader.addToNote"/>
 				</div>}
+			<CustomSections type="TextSelectionPopup" annotation={props.params.annotation}/>
 		</ViewPopup>
 	);
 }

src/common/context-menu.js

@@ -1,5 +1,20 @@
 import { ANNOTATION_COLORS } from './defines';
 
+function appendCustomItemGroups(name, reader, params) {
+	let itemGroups = [];
+	let finished = false;
+	let append = (...items) => {
+		if (finished) {
+			throw new Error('Append must be called directly and synchronously in the event');
+		}
+		itemGroups.push(items);
+	};
+	let event = new CustomEvent(`customEvent`, { detail: { type: name, reader, append, params } });
+	window.dispatchEvent(event);
+	finished = true;
+	return itemGroups;
+}
+
 function createItemGroup(itemGroups) {
 	return itemGroups.map(items => items.filter(x => x).filter(item => !item.disabled || item.persistent)).filter(items => items.length);
 }
@@ -34,7 +49,8 @@ export function createColorContextMenu(reader, params) {
 					label: reader._getString('general.copy'),
 					onCommand: (size) => reader.setTool({ size })
 				}
-			]
+			],
+			...appendCustomItemGroups('createColorContextMenu', reader, params)
 		])
 	};
 }
@@ -111,7 +127,8 @@ export function createViewContextMenu(reader, params) {
 					persistent: true,
 					onCommand: () => reader.navigateToPreviousPage()
 				}
-			]
+			],
+			...appendCustomItemGroups('createViewContextMenu', reader, params)
 		])
 	};
 }
@@ -204,7 +221,8 @@ export function createAnnotationContextMenu(reader, params) {
 					persistent: true,
 					onCommand: () => reader.deleteAnnotations(params.ids)
 				},
-			]
+			],
+			...appendCustomItemGroups('createAnnotationContextMenu', reader, params)
 		])
 	};
 }
@@ -235,7 +253,8 @@ export function createThumbnailContextMenu(reader, params) {
 					persistent: true,
 					onCommand: () => reader.deletePages(params.pageIndexes)
 				},
-			]
+			],
+			...appendCustomItemGroups('createThumbnailContextMenu', reader, params)
 		])
 	};
 }
@@ -253,6 +272,7 @@ export function createSelectorContextMenu(reader, params) {
 					onCommand: () => reader.setFilter({ colors: [], tags: [], authors: [] })
 				}
 			],
+			...appendCustomItemGroups('createSelectorContextMenu', reader, params)
 		])
 	};
 }

src/common/stylesheets/base/_base.scss

@@ -246,3 +246,7 @@ body.freeze {
 		content: '⧉';
 	}
 }
+
+.custom-sections:empty {
+	display: none;
+}

src/common/stylesheets/components/_page-popup.scss

@@ -9,13 +9,15 @@
 	box-shadow: $page-popup-box-shadow;
 	@include popover-pointer($width: 16px, $height: 8px);
 	z-index: 1;
+	max-width: 175px;
 
 
 	padding: $selection-popup-padding;
 
 	.colors {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 	}
 
 	.toolbarButton {
@@ -55,6 +57,15 @@
 			background: $selection-popup-btn-hover-bg;
 		}
 	}
+
+	.custom-sections {
+		padding-top: 5px;
+
+		.section {
+			padding: 5px 0;
+			border-top: 1px solid #d7dad7;
+		}
+	}
 }
 
 .view-popup {

src/common/stylesheets/components/_preview.scss

@@ -75,6 +75,12 @@
 				color: #c0c0c0;
 			}
 		}
+
+		.custom-sections {
+			display: flex;
+			padding: 0 3px;
+			gap: 3px;
+		}
 	}
 
 	.text {

src/common/stylesheets/components/_toolbar.scss

@@ -41,6 +41,12 @@
 
 	}
 
+	.custom-sections {
+		display: flex;
+		padding: 0 3px;
+		gap: 3px;
+	}
+
 	.toolbarButton {
 		.is-blurred & {
 			background: $toolbar-btn-blurred-bg;