Get citations editor to appear

addon/bootstrap.js

@@ -37,7 +37,8 @@ async function startup({ id, version, resourceURI, rootURI }, reason) {
 	ctx._globalThis = ctx;
 
 	Services.scriptloader.loadSubScript(
-		`${rootURI}/chrome/content/scripts/__addonRef__.js`,
+		// `${rootURI}/chrome/content/scripts/__addonRef__.js`,
+		`${rootURI}/chrome/content/scripts/index.js`,
 		ctx,
 	);
 	Zotero.__addonInstance__.hooks.onStartup();

addon/chrome/content/citationEditor.xhtml

@@ -1,21 +1,26 @@
-<?xml version="1.0"?>
+<!-- <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-wikicite/content/skin/editor.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero-wikicite/content/skin/overlay.css" type="text/css"?>
+<?xml-stylesheet href="chrome://zotero-wikicite/content/skin/overlay.css" type="text/css"?> -->
+<!-- <!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd"> -->
 
-<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
+<window id="citation-editor" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+	<linkset>
+		<html:link rel="stylesheet" href="chrome://global/skin/" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://zotero/skin/zotero.css" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://__addonRef__/content/skin/default/editor.css" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://__addonRef__/content/skin/default/overlay.css" type="text/css" />
+		<html:link rel="localization" href="__addonRef__-addon.ftl" />
+	</linkset>
 
-<window
-	id="citation-editor"
-	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-	xmlns:html="http://www.w3.org/1999/xhtml"
->
-	<zoteroitembox
-		id="citation-editor-item-box"
-		flex="1"
-	/>
+	<script type="text/javascript" src="chrome://zotero/content/include.js"></script>
+	<script src="chrome://zotero/content/customElements.js"></script>
+	<!-- <script src="editor.js"></script> -->
+	<script src="chrome://__addonRef__/content/scripts/dialogs/editor/index.js"></script>
+
+	<!-- <item-box id="citation-editor-item-box" flex="1" /> -->
+	<item-box id="citation-editor-item-box" />
 	<html:div id="root"></html:div>
-    <script type="text/javascript" src="chrome://zotero/content/include.js"></script>
-    <script src="editor.js"></script>
-</window>
+</window>

addon/chrome/content/skin/default/editor.css

@@ -1,6 +1,7 @@
 window#citation-editor {
 	height: 500px;
-	width: 400px;
+	/* width: 400px; */
+	width: 200px;
 	padding: 1em;
 }
 

scripts/build.mjs

@@ -179,15 +179,19 @@ function prepareUpdateJson() {
 }
 
 export const esbuildOptions = {
-	entryPoints: ["src/index.ts"],
+	entryPoints: ["src/index.ts", "src/dialogs/editor/index.tsx"],
 	define: {
 		__env__: `"${env.NODE_ENV}"`,
 	},
 	bundle: true,
 	target: "firefox115",
-	outfile: path.join(
+	// outfile: path.join(
+	// 	buildDir,
+	// 	`addon/chrome/content/scripts/${config.addonRef}.js`,
+	// ),
+	outdir: path.join(
 		buildDir,
-		`addon/chrome/content/scripts/${config.addonRef}.js`,
+		`addon/chrome/content/scripts`,
 	),
 	// Don't turn minify on
 	minify: env.NODE_ENV === "production",

src/cita/itemWrapper.ts

@@ -215,7 +215,7 @@ export default class ItemWrapper {
 		if (save) this.saveHandler();
 	}
 
-	isValidField(fieldName: string) {
+	isValidField(fieldName: string): boolean{
 		return Zotero.ItemFields.isValidForType(
 			Zotero.ItemFields.getID(fieldName),
 			this.item.itemTypeID,

src/cita/sourceItemWrapper.ts

@@ -440,12 +440,12 @@ class SourceItemWrapper extends ItemWrapper {
 		// this.updateCitationLabels();  //deprecated
 	}
 
-	getCitedPIDs(type: PIDType, options: { clean?: boolean }) {
+	getCitedPIDs(type: PIDType, options: { clean?: boolean, skipCitation?: Citation }) {
 		const citedPIDs = this.citations.reduce(
 			(citedPIDs: string[], citation: Citation) => {
-				// if (citation !== options.skipCitation) {
+				if (options.skipCitation == undefined || citation !== options.skipCitation) {
 				// todo: check if I correctly updated this
-				if (citation !== undefined) {
+				// if (citation !== undefined) {
 					const pid = citation.target.getPID(type, options.clean);
 					if (pid && !citedPIDs.includes(pid)) {
 						citedPIDs.push(pid);
@@ -464,6 +464,7 @@ class SourceItemWrapper extends ItemWrapper {
 		options: {
 			alert: boolean;
 			parentWindow?: Window;
+			skipCitation?: Citation;
 		},
 	) {
 		const cleanPID = Wikicite.cleanPID(type, value);
@@ -474,7 +475,7 @@ class SourceItemWrapper extends ItemWrapper {
 				conflict = "citing";
 			} else {
 				const cleanCitedPIDs = this.getCitedPIDs(type, {
-					clean: true,
+					clean: true, skipCitation: options.skipCitation
 				});
 				if (cleanCitedPIDs.includes(cleanPID)) {
 					conflict = "cited";

src/cita/zoteroOverlay.tsx

@@ -1,6 +1,7 @@
 import Wikicite, { debug } from "./wikicite";
 import Citations from "./citations";
 import CitationsBoxContainer from "../containers/citationsBoxContainer";
+import CitationEditor from "../dialogs/editor/CitationEditor";
 import Crossref from "./crossref";
 import Extraction from "./extract";
 // import LCN from './localCitationNetwork';
@@ -1208,6 +1209,60 @@ class ZoteroOverlay {
 		);
 		return menuFunc;
 	}
+
+	/******************************************/
+	// Dialog boxes (popups)
+	/******************************************/
+
+	citationEditor() {
+		const itemBox = new (window.customElements.get("item-box")!)();
+		const dialogData: { [key: string | number]: any } = {
+			inputValue: "test",
+			checkboxValue: true,
+			loadCallback: (window: Window) => {
+				ztoolkit.log(dialogData, "Dialog Opened!");
+				ztoolkit.log("Dialog Window - ", window);
+				window.document
+					.getElementById("citation-editor-div")!
+					.appendChild(itemBox);
+			},
+			unloadCallback: () => {
+				ztoolkit.log(dialogData, "Dialog closed!");
+			},
+		};
+		const citationEditor = new ztoolkit.Dialog(2, 1)
+			.addCell(0, 0, {
+				tag: "h1",
+				namespace: "html",
+				properties: { innerHTML: "Citation Editor" },
+			})
+			.addCell(1, 0, {
+				id: "citation-editor-div",
+				tag: "div",
+				namespace: "html",
+			})
+			.addButton("Save")
+			.addButton("Cancel");
+
+		// document.getElementById("citation-editor")!.appendChild(itemBox);
+
+		// const citationEditorRoot = createRoot(
+		// 	document.getElementById("citation-editor")!,
+		// );
+
+		// citationEditorRoot.render(
+		// 	<CitationEditor
+		// 		checkCitationPID={checkPID}
+		// 		item={newItem}
+		// 		itemBox={document.getElementById("citation-editor-item-box")!}
+		// 		getString={(name) => Wikicite.getString(name)}
+		// 		onCancel={onCancel}
+		// 		onSave={onSave}
+		// 	/>,
+		// );
+
+		citationEditor.setDialogData(dialogData).open("Citation Editor");
+	}
 }
 
 export default ZoteroOverlay;

src/components/itemPane/citationsBox.tsx

@@ -8,14 +8,14 @@ import Citation from "../../cita/citation";
 import SourceItemWrapper from "../../cita/sourceItemWrapper";
 import WikidataButton from "./wikidataButton";
 import ZoteroButton from "./zoteroButton";
+import { config } from "../../../package.json";
 
 function CitationsBox(props: {
 	editable: boolean;
 	sortBy: string;
 	sourceItem: SourceItemWrapper;
 	onItemPopup: (event: React.MouseEvent) => void;
 	onCitationPopup: (event: React.MouseEvent, index: number) => void;
-	// Button: any;
 }) {
 	const [citations, setCitations] = useState([] as Citation[]);
 	const [pidTypes, setPidTypes] = useState([] as PIDType[]);
@@ -82,22 +82,21 @@ function CitationsBox(props: {
 	 * @returns {Zotero.Item} - Edited cited item.
 	 */
 	function openEditor(citation: Citation) {
-		// const args = {
-		// 	citation: citation,
-		// 	Wikicite: Wikicite,
-		// };
-		// const retVals: { [key: string]: any } = {};
-		// fix
-		// window.openDialog(
-		// 	"chrome://cita/content/citationEditor.xul",
-		// 	"",
-		// 	"chrome,dialog=no,modal,centerscreen,resizable=yes",
-		// 	args,
-		// 	retVals,
-		// );
-		window.alert("citation editor not implemented yet");
-		// return retVals.item;
-		return undefined;
+		// Zotero[config.addonInstance].data.zoteroOverlay.citationEditor();
+
+		const args = {
+			citation: citation,
+			Wikicite: Wikicite,
+		};
+		const retVals: { [key: string]: any } = {};
+		window.openDialog(
+			`chrome://${config.addonRef}/content/citationEditor.xhtml`,
+			"",
+			"chrome,dialog=no,modal,centerscreen,resizable=yes",
+			args,
+			retVals,
+		);
+		return retVals.item;
 	}
 
 	function handleCitationAdd() {

src/dialogs/editor/CitationEditor.tsx

@@ -1,13 +1,22 @@
-import React, { useEffect, useState } from "react";
 import PIDRow from "../../components/pidRow";
-import PropTypes from "prop-types";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import * as PropTypes from "prop-types";
+import ItemWrapper from "../../cita/itemWrapper";
 
 const visibleBaseFieldNames = ["title", "publicationTitle", "date"];
 
 // Fixme: as a Citation Editor (not a target item editor)
 // consider providing at least some read only information about the citation
 // such as label of the source item, OCIs, and Zotero link status
-const CitationEditor = (props: any) => {
+const CitationEditor = (props: {
+	checkCitationPID: (type: string, value: string) => boolean;
+	item: ItemWrapper;
+	itemBox: any;
+	getString: (name: string) => string;
+	onCancel: () => void;
+	onSave: () => void;
+}) => {
 	const [pidTypes, setPidTypes] = useState(props.item.getPIDTypes());
 
 	useEffect(() => {
@@ -23,30 +32,38 @@ const CitationEditor = (props: any) => {
 		// if item's saveTx overwritten with itembox.refresh,
 		// sometimes itembox gets stucked in a loop
 		// overwrite _focusNextField as a workaround
-		props.itemBox._focusNextField = () => {};
+		try {
+			props.itemBox._focusNextField = () => {};
 
-		// const disableButton = props.itemBox.disableButton.bind(props.itemBox);
-		// props.itemBox.disableButton = function(button) {
-		//     if (
-		//         button.value === '+' &&
-		//         this._dynamicFields.getElementsByAttribute('value', '+').length === 1
-		//     ) return;
-		//     disableButton(button);
-		// }
-		props.itemBox.mode = "edit";
+			// const disableButton = props.itemBox.disableButton.bind(props.itemBox);
+			// props.itemBox.disableButton = function(button) {
+			//     if (
+			//         button.value === '+' &&
+			//         this._dynamicFields.getElementsByAttribute('value', '+').length === 1
+			//     ) return;
+			//     disableButton(button);
+			// }
+			props.itemBox.mode = "edit";
 
-		// itembox sometimes fails to update if saveOnEdit is set to false
-		// make sure item's saveTx is overwritten to prevent actual item saving
-		props.itemBox.saveOnEdit = true;
-		setHiddenFields(props.item.item.itemTypeID);
-		props.itemBox.item = props.item.item;
+			// itembox sometimes fails to update if saveOnEdit is set to false
+			// make sure item's saveTx is overwritten to prevent actual item saving
+			props.itemBox.saveOnEdit = true;
+			setHiddenFields(props.item.item.itemTypeID);
+			props.itemBox.item = props.item.item;
 
-		// props.itemBox.item.saveTx = function() {
-		//     if (!props.itemBox.item._refreshed) {
-		//         props.itemBox.refresh();
-		//     }
-		// }
-		props.itemBox.addHandler("itemtypechange", onItemTypeChange);
+			// props.itemBox.item.saveTx = function() {
+			//     if (!props.itemBox.item._refreshed) {
+			//         props.itemBox.refresh();
+			//     }
+			// }
+			props.itemBox.addHandler("itemtypechange", onItemTypeChange);
+			props.itemBox.open = true;
+			// props.itemBox.toggleAttribute("open", false);
+			// props.itemBox.toggleAttribute("open", true);
+			// alert("done rendering");
+		} catch (error: any) {
+			alert(error);
+		}
 	}, []);
 
 	function onItemTypeChange() {
@@ -55,7 +72,7 @@ const CitationEditor = (props: any) => {
 		props.itemBox.refresh();
 	}
 
-	function setHiddenFields(itemTypeID: string) {
+	function setHiddenFields(itemTypeID: number) {
 		const visibleFieldIDs = visibleBaseFieldNames.map((fieldName) =>
 			Zotero.ItemFields.getFieldIDFromTypeAndBase(itemTypeID, fieldName),
 		);
@@ -70,9 +87,9 @@ const CitationEditor = (props: any) => {
 	return (
 		// TS gives an error about using orient here
 		// <div orient="vertical">
-		<div>
+		<div box-orient="vertical">
 			<ul className="pid-list">
-				{pidTypes.map((pidType: string) => (
+				{pidTypes.map((pidType: PIDType) => (
 					<PIDRow
 						autosave={false}
 						editable={true}
@@ -85,10 +102,10 @@ const CitationEditor = (props: any) => {
 			</ul>
 			<div id="citation-editor-buttons">
 				<button onClick={props.onCancel}>
-					{props.getString("editor.cancel")}
+					{props.getString("wikicite.editor.cancel")}
 				</button>
 				<button onClick={props.onSave}>
-					{props.getString("editor.save")}
+					{props.getString("wikicite.editor.save")}
 				</button>
 			</div>
 		</div>
@@ -97,8 +114,8 @@ const CitationEditor = (props: any) => {
 
 CitationEditor.propTypes = {
 	checkCitationPID: PropTypes.func,
-	item: PropTypes.object, // ItemWrapper
-	itemBox: PropTypes.object, // zoteroitembox
+	item: PropTypes.instanceOf(ItemWrapper),
+	itemBox: PropTypes.object, // item-box,
 	getString: PropTypes.func,
 	onCancel: PropTypes.func,
 	onSave: PropTypes.func,