Fix citation importer dialog

diegodlh · Aug 5, 2024 · ee301aa · ee301aa
1 parent 47ff0c5
commit ee301aa
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 54 deletions.
diff --git a/src/cita/sourceItemWrapper.ts b/src/cita/sourceItemWrapper.ts
@@ -629,9 +629,9 @@ class SourceItemWrapper extends ItemWrapper {
 		};
 		const retVals: { text?: string; path?: string } = {};
 		window.openDialog(
-			"chrome://cita/content/citationImporter.xul",
+			`chrome://${config.addonRef}/content/citationImporter.xhtml`,
 			"",
-			"chrome,dialog=no,modal,centerscreen,resizable=yes",
+			"chrome,dialog=no,modal,centerscreen,resizable,width=500,height=400",
 			args,
 			retVals,
 		);
@@ -757,10 +757,9 @@ class SourceItemWrapper extends ItemWrapper {
 		};
 		const retVals: { text?: string } = {};
 		window.openDialog(
-			// "chrome://cita/content/identifierImporter.xul",
 			`chrome://${config.addonRef}/content/identifierImporter.xhtml`,
 			"",
-			"chrome,dialog=no,modal,centerscreen,resizable,width=500,height=250",
+			"chrome,dialog=no,modal,centerscreen,resizable,width=500,height=220",
 			args,
 			retVals,
 		);

diff --git a/src/dialogs/citation-importer/CitationImporter.tsx b/src/dialogs/citation-importer/CitationImporter.tsx
@@ -1,7 +1,13 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import * as React from "react";
+import { useState } from "react";
+import * as PropTypes from "prop-types";
 
-const CitationImporter = (props: any) => {
+const CitationImporter = (props: {
+	getString: (name: string) => string;
+	onCancel: () => void;
+	onImportFile: () => void;
+	onImportText: (string) => void;
+}) => {
 	const [text, setText] = useState("");
 
 	return (

diff --git a/src/dialogs/citation-importer/index.tsx b/src/dialogs/citation-importer/index.tsx
@@ -1,31 +1,19 @@
 import CitationImporter from "./CitationImporter";
-import React from "react";
-import ReactDOM from "react-dom";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
 
-declare const Components: any;
-
-// import Services into the new window
-Components.utils.import("resource://gre/modules/Services.jsm");
-
-const { Wikicite } = window.arguments[0];
-const retVals = window.arguments[1];
+const { Wikicite } = (window as any).arguments[0];
+const retVals: { path?: string; text?: string } = (window as any).arguments[1];
 
 function onCancel() {
 	window.close();
 }
 
 async function onImportFile() {
-	let FilePicker;
-	try {
-		FilePicker = await import("zotero@zotero/filePicker").then(
-			(mod) => mod.default,
-		);
-	} catch {
-		// support Zotero af597d9
-		FilePicker = await import("zotero@zotero/modules/filePicker").then(
-			(mod) => mod.default,
-		);
-	}
+	// @ts-ignore see: https://www.zotero.org/support/dev/zotero_7_for_developers#zotero_platform
+	const { FilePicker } = ChromeUtils.importESModule(
+		"chrome://zotero/content/modules/filePicker.mjs",
+	);
 	const filePicker = new FilePicker();
 
 	filePicker.init(
@@ -52,13 +40,13 @@ function onImportText(text) {
 
 window.addEventListener("load", () => {
 	document.title = Wikicite.getString("wikicite.citation-importer.title");
-	ReactDOM.render(
+	const root = createRoot(document.getElementById("root")!);
+	root.render(
 		<CitationImporter
 			getString={(name) => Wikicite.getString(name)}
 			onCancel={onCancel}
 			onImportFile={onImportFile}
 			onImportText={onImportText}
 		/>,
-		document.getElementById("root"),
 	);
 });
diff --git a/static/chrome/content/citationImporter.xhtml b/static/chrome/content/citationImporter.xhtml
@@ -1,18 +1,15 @@
-<?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://cita/skin/citation-importer.css" type="text/css"?>
-<?xml-stylesheet href="chrome://cita/skin/overlay.css" type="text/css"?>
+<window id="citation-importer" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+	<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://zotero-platform/content/zotero.css" type="text/css" />
+	<html:link rel="stylesheet" href="chrome://__addonRef__/content/skin/default/citation-importer.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" />
 
-<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
-
-<window
-	id="citation-importer"
-	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-	xmlns:html="http://www.w3.org/1999/xhtml"
->
+	<script type="text/javascript" src="chrome://zotero/content/include.js"></script>
+	<script src="chrome://__addonRef__/content/scripts/dialogs/citation-importer/index.js"></script>
 
 	<html:div id="root"></html:div>
-    <script type="text/javascript" src="chrome://zotero/content/include.js"></script>
-    <script src="citation-importer.js"></script>
-</window>
+</window>
diff --git a/static/chrome/content/skin/default/citation-importer.css b/static/chrome/content/skin/default/citation-importer.css
@@ -1,5 +1,6 @@
 window#citation-importer {
-	width: 700px;
+	width: 100%;
+	height: 100%;
 	padding: 1em;
 }
 
@@ -10,12 +11,27 @@ div#citation-importer-description {
 div#citation-importer-textbox {
 	margin-top: 10px;
 	margin-bottom: 10px;
+	height: 100%;
+}
+
+div#citation-importer-textbox > textarea{
+	height: 100%;
 }
 
 div#citation-importer-buttons {
 	text-align: right;
 }
 
+div#citation-importer-buttons > button {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
 textarea#citation-input {
 	width: 100%;
 }
+
+#root {
+	height: 100%;
+	width: 100%;
+}
diff --git a/static/chrome/content/skin/default/identifier-importer.css b/static/chrome/content/skin/default/identifier-importer.css
@@ -22,6 +22,11 @@ div#identifier-importer-buttons {
 	text-align: right;
 }
 
+div#identifier-importer-buttons > button {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
 textarea#identifier-input {
 	width: 100%;
 }

diff --git a/zotero-plugin.config.ts b/zotero-plugin.config.ts
@@ -4,7 +4,7 @@ import { copyFileSync, readdirSync, renameSync } from "fs";
 import path from "path";
 
 import fse from "fs-extra";
-import { replaceInFileSync } from "replace-in-file"
+import { replaceInFileSync } from "replace-in-file";
 
 export default defineConfig({
 	source: ["src", "static"],
@@ -38,6 +38,7 @@ export default defineConfig({
 					"src/index.ts",
 					"src/dialogs/editor/index.tsx",
 					"src/dialogs/identifier-importer/index.tsx",
+					"src/dialogs/citation-importer/index.tsx",
 				],
 				define: {
 					__env__: `"${process.env.NODE_ENV}"`,
@@ -54,34 +55,41 @@ export default defineConfig({
 				const localePath = "build/addon/locale/";
 				fse.moveSync("build/addon/chrome/locale/", localePath);
 				// rename wikicite.properties to addon.ftl
-				for (const path of readdirSync(localePath, { encoding: "utf-8", recursive: true })) {
+				for (const path of readdirSync(localePath, {
+					encoding: "utf-8",
+					recursive: true,
+				})) {
 					if (path.endsWith("wikicite.properties")) {
 						renameSync(
 							localePath + path,
-							localePath + path.replace("wikicite.properties", "addon.ftl")
-						)
+							localePath +
+								path.replace(
+									"wikicite.properties",
+									"addon.ftl",
+								),
+						);
 					}
-				};
+				}
 
 				// replace . for _ in message keys
 				replaceInFileSync({
 					files: localePath + "/**/*.ftl",
 					from: /\.(?=.*=)/g,
-					to: "_"
+					to: "_",
 				});
 				// replace %1$s, %2$s, etc for { $s1 }, { $s2 }
 				replaceInFileSync({
 					files: localePath + "/**/*.ftl",
 					from: /(?<!%)%(\d+)\$\w/g,
-					to: "{ $$s$1 }"
+					to: "{ $$s$1 }",
 				});
 				// replace %s for { $s1 }, literally
 				replaceInFileSync({
 					files: localePath + "/**/*.ftl",
 					from: /(?<!%)%\w/g,
-					to: "{ $$s1 }"
+					to: "{ $$s1 }",
 				});
-			}
+			},
 		},
 		// If you want to checkout update.json into the repository, uncomment the following lines:
 		// makeUpdateJson: {