bookish-press 0.9.4 → 0.10.0

package/dist/components/editor/BookishEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type RootNode from '../../models/chapter/RootNode';
+import type RootNode from '../../models/chapter/RootNode.js';
 interface Props {
     text: string;
     parser: (text: string) => RootNode;

package/dist/components/editor/CalloutEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import PositionEditor from "./PositionEditor.svelte";
-import { getCaret } from "../page/Contexts";
+import { getCaret } from "../page/Contexts.js";
 let { callout } = $props();
 let caret = getCaret();
 </script>

package/dist/components/editor/CalloutEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CalloutNode from '../../models/chapter/CalloutNode';
+import type CalloutNode from '../../models/chapter/CalloutNode.js';
 interface Props {
     callout: CalloutNode;
 }

package/dist/components/editor/CaptionedCodeEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import LanguageEditor from "./LanguageEditor.svelte";
 import PositionEditor from "./PositionEditor.svelte";
 import Switch from "./Switch.svelte";
-import { getCaret } from "../page/Contexts";
+import { getCaret } from "../page/Contexts.js";
 let { code } = $props();
 let caret = getCaret();
 </script>

package/dist/components/editor/CaptionedCodeEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CodeNode from '../../models/chapter/CodeNode';
+import type CodeNode from '../../models/chapter/CodeNode.js';
 interface Props {
     code: CodeNode;
 }

package/dist/components/editor/CaretContext.d.ts

@@ -1,19 +1,19 @@
-import type Caret from '../../models/chapter/Caret';
-import type { CaretRange } from '../../models/chapter/Caret';
-import type ParagraphNode from '../../models/chapter/ParagraphNode';
-import type AtomNode from '../../models/chapter/AtomNode';
-import type FormatNode from '../../models/chapter/FormatNode';
-import type BlocksNode from '../../models/chapter/BlocksNode';
-import type ListNode from '../../models/chapter/ListNode';
-import type TableNode from '../../models/chapter/TableNode';
-import type MetadataNode from '../../models/chapter/MetadataNode';
-import type RootNode from '../../models/chapter/RootNode';
-import type Edit from '../../models/chapter/Edit';
-import type CodeNode from '../../models/chapter/CodeNode';
-import type BlockNode from '../../models/chapter/BlockNode';
+import type Caret from '../../models/chapter/Caret.js';
+import type { CaretRange } from '../../models/chapter/Caret.js';
+import type ParagraphNode from '../../models/chapter/ParagraphNode.js';
+import type AtomNode from '../../models/chapter/AtomNode.js';
+import type FormatNode from '../../models/chapter/FormatNode.js';
+import type BlocksNode from '../../models/chapter/BlocksNode.js';
+import type ListNode from '../../models/chapter/ListNode.js';
+import type TableNode from '../../models/chapter/TableNode.js';
+import type MetadataNode from '../../models/chapter/MetadataNode.js';
+import type RootNode from '../../models/chapter/RootNode.js';
+import type Edit from '../../models/chapter/Edit.js';
+import type CodeNode from '../../models/chapter/CodeNode.js';
+import type BlockNode from '../../models/chapter/BlockNode.js';
 import type Clipboard from './Clipboard';
 import type UndoState from './UndoState';
-import type Node from '../../models/chapter/Node';
+import type Node from '../../models/chapter/Node.js';
 export type PasteContent = {
     plain: string | undefined;
 };

package/dist/components/editor/CaretState.d.ts

@@ -1,7 +1,7 @@
-import type { CaretRange } from '../../models/chapter/Caret';
-import type RootNode from '../../models/chapter/RootNode';
+import type { CaretRange } from '../../models/chapter/Caret.js';
+import type RootNode from '../../models/chapter/RootNode.js';
 import type CaretContext from './CaretContext';
-import type Node from '../../models/chapter/Node';
+import type Node from '../../models/chapter/Node.js';
 import type Command from './Command';
 type CaretState = {
     root: RootNode;

package/dist/components/editor/CaretView.svelte

@@ -1,26 +1,15 @@
 <script lang="ts">import { tick } from "svelte";
-let {
-  left,
-  top,
-  height,
-  linked,
-  italic,
-  bold,
-  disabled,
-  ignored,
-  blink,
-  locked,
-  accent
-} = $props();
+let { left, top, height, linked, italic, bold, disabled, ignored, blink, locked, accent } = $props();
 let element = $state();
 let headerHeight = $state(0);
+// When the caret updates position, scroll the element into view after
+// the render is complete, and re-measure the header height so we can
+// snap to the caret position.
 $effect(() => {
-  void left;
-  void top;
-  tick().then(
-    () => element ? element.scrollIntoView({ block: "nearest" }) : void 0
-  );
-  headerHeight = document.querySelector(".bookish-app > .header")?.offsetHeight ?? 0;
+	void left;
+	void top;
+	tick().then(() => element ? element.scrollIntoView({ block: "nearest" }) : undefined);
+	headerHeight = document.querySelector(".bookish-app > .header")?.offsetHeight ?? 0;
 });
 </script>
 

package/dist/components/editor/CitationsEditor.svelte

@@ -1,35 +1,27 @@
 <script lang="ts">import Note from "./Note.svelte";
 import Options from "../app/Options.svelte";
 import Button from "../app/Button.svelte";
-import { getCaret, getEdition } from "../page/Contexts";
+import { getCaret, getEdition } from "../page/Contexts.js";
 let { citations } = $props();
 let caret = getCaret();
 let edition = getEdition();
 let value = $state("");
 function handleSelection(selection) {
-  if (selection.length > 0)
-    update(/* @__PURE__ */ new Set([...citations.getMeta(), selection]));
+	if (selection.length > 0) update(new Set([...citations.getMeta(), selection]));
 }
 function removeSelection(citationID) {
-  let ids = new Set(citations.getMeta());
-  ids.delete(citationID);
-  update(ids);
+	let ids = new Set(citations.getMeta());
+	ids.delete(citationID);
+	update(ids);
 }
 function update(set) {
-  $caret?.edit(citations, citations.withMeta(Array.from(set)));
+	$caret?.edit(citations, citations.withMeta(Array.from(set)));
 }
-let uncited = $derived($edition === void 0 ? [] : Object.keys($edition.getReferences()).filter(
-  (citationID) => !citations.getMeta().includes(citationID)
-).sort());
+let uncited = $derived($edition === undefined ? [] : Object.keys($edition.getReferences()).filter((citationID) => !citations.getMeta().includes(citationID)).sort());
 let options = $derived.by(() => {
-  const list = [
-    [
-      uncited.length > 0 ? "Choose references" : "No uncited references",
-      ""
-    ]
-  ];
-  for (const citationID of uncited) list.push([citationID, citationID]);
-  return list;
+	const list = [[uncited.length > 0 ? "Choose references" : "No uncited references", ""]];
+	for (const citationID of uncited) list.push([citationID, citationID]);
+	return list;
 });
 </script>
 

package/dist/components/editor/CitationsEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CitationsNode from '../../models/chapter/CitationsNode';
+import type CitationsNode from '../../models/chapter/CitationsNode.js';
 interface Props {
     citations: CitationsNode;
 }

package/dist/components/editor/Clipboard.d.ts

@@ -1,3 +1,3 @@
-import type Node from '../../models/chapter/Node';
+import type Node from '../../models/chapter/Node.js';
 type Clipboard = undefined | Node;
 export type { Clipboard as default };

package/dist/components/editor/Command.d.ts

@@ -1,4 +1,4 @@
-import type Edit from '../../models/chapter/Edit';
+import type Edit from '../../models/chapter/Edit.js';
 import type CaretUtilities from './CaretUtilities';
 import type CaretContext from './CaretContext';
 export type CommandCategory = 'navigation' | 'selection' | 'text' | 'history' | 'clipboard' | 'annotation' | 'block' | 'level' | 'list' | 'table';

package/dist/components/editor/Commands.js

@@ -1,22 +1,22 @@
-import CalloutNode from '../../models/chapter/CalloutNode';
-import CitationsNode from '../../models/chapter/CitationsNode';
-import CodeNode from '../../models/chapter/CodeNode';
-import CommentNode from '../../models/chapter/CommentNode';
-import DefinitionNode from '../../models/chapter/DefinitionNode';
-import EmbedNode from '../../models/chapter/EmbedNode';
-import FootnoteNode from '../../models/chapter/FootnoteNode';
-import FormatNode from '../../models/chapter/FormatNode';
-import InlineCodeNode from '../../models/chapter/InlineCodeNode';
-import LabelNode from '../../models/chapter/LabelNode';
-import LinkNode from '../../models/chapter/LinkNode';
-import ListNode from '../../models/chapter/ListNode';
-import ParagraphNode from '../../models/chapter/ParagraphNode';
-import QuoteNode from '../../models/chapter/QuoteNode';
-import RuleNode from '../../models/chapter/RuleNode';
-import TableNode from '../../models/chapter/TableNode';
-import TextNode from '../../models/chapter/TextNode';
-import AtomNode from '../../models/chapter/AtomNode';
-import BlocksNode from '../../models/chapter/BlocksNode';
+import CalloutNode from '../../models/chapter/CalloutNode.js';
+import CitationsNode from '../../models/chapter/CitationsNode.js';
+import CodeNode from '../../models/chapter/CodeNode.js';
+import CommentNode from '../../models/chapter/CommentNode.js';
+import DefinitionNode from '../../models/chapter/DefinitionNode.js';
+import EmbedNode from '../../models/chapter/EmbedNode.js';
+import FootnoteNode from '../../models/chapter/FootnoteNode.js';
+import FormatNode from '../../models/chapter/FormatNode.js';
+import InlineCodeNode from '../../models/chapter/InlineCodeNode.js';
+import LabelNode from '../../models/chapter/LabelNode.js';
+import LinkNode from '../../models/chapter/LinkNode.js';
+import ListNode from '../../models/chapter/ListNode.js';
+import ParagraphNode from '../../models/chapter/ParagraphNode.js';
+import QuoteNode from '../../models/chapter/QuoteNode.js';
+import RuleNode from '../../models/chapter/RuleNode.js';
+import TableNode from '../../models/chapter/TableNode.js';
+import TextNode from '../../models/chapter/TextNode.js';
+import AtomNode from '../../models/chapter/AtomNode.js';
+import BlocksNode from '../../models/chapter/BlocksNode.js';
 import BoldIcon from './icons/bold.svg?raw';
 import BulletsIcon from './icons/bullets.svg?raw';
 import CalloutIcon from './icons/callout.svg?raw';

package/dist/components/editor/ConfirmButton.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">import Button from "../app/Button.svelte";
-let {
-  tooltip,
-  confirm,
-  command,
-  children
-} = $props();
+let { tooltip, confirm, command, children } = $props();
 let confirming = $state(false);
 </script>
 

package/dist/components/editor/DefinitionEditor.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">import Options from "../app/Options.svelte";
 import Note from "./Note.svelte";
-import { getCaret, getEdition } from "../page/Contexts";
+import { getCaret, getEdition } from "../page/Contexts.js";
 let { definition } = $props();
 let caret = getCaret();
 let edition = getEdition();
 let glossary = $derived($edition?.getGlossary());
 function handleChange(glossaryID) {
-  $caret?.edit(definition, definition.withMeta(glossaryID));
+	$caret?.edit(definition, definition.withMeta(glossaryID));
 }
-let entries = $derived(glossary === void 0 ? void 0 : Object.entries(glossary).map(([key, value]) => {
-  return { glossaryID: key, phrase: value.phrase };
-}).sort(
-  (a, b) => a && b ? a.phrase.localeCompare(b.phrase) : 0
-));
+// Sort the glossary entries by phrase
+let entries = $derived(glossary === undefined ? undefined : Object.entries(glossary).map(([key, value]) => {
+	return {
+		glossaryID: key,
+		phrase: value.phrase
+	};
+}).sort((a, b) => a && b ? a.phrase.localeCompare(b.phrase) : 0));
 </script>
 
 {#if entries !== undefined && glossary !== undefined}

package/dist/components/editor/DefinitionEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type DefinitionNode from '../../models/chapter/DefinitionNode';
+import type DefinitionNode from '../../models/chapter/DefinitionNode.js';
 interface Props {
     definition: DefinitionNode;
 }

package/dist/components/editor/EmbedEditor.svelte

@@ -1,52 +1,43 @@
 <script lang="ts">import PositionEditor from "./PositionEditor.svelte";
-import EmbedNode from "../../models/chapter/EmbedNode";
+import EmbedNode from "../../models/chapter/EmbedNode.js";
 import TextEditor from "./TextEditor.svelte";
-import { storage } from "../../models/Firebase";
+import { storage } from "../../models/Firebase.js";
 import ToolbarSpacer from "./ToolbarSpacer.svelte";
 import ImageChooser from "./ImageChooser.svelte";
 import URLEditor from "./URLEditor.svelte";
 import Note from "./Note.svelte";
-import { getBook, getCaret } from "../page/Contexts";
+import { getBook, getCaret } from "../page/Contexts.js";
 let { embed } = $props();
 let caret = getCaret();
-let upload = $state(void 0);
+let upload = $state(undefined);
 let description = $derived(embed.getDescription());
 let book = getBook();
 function isValidURL(url) {
-  try {
-    let test = new URL(url);
-    if (test.protocol === "http:" || test.protocol === "https:") return;
-  } catch (_) {
-  }
-  return "URL doesn't seem valid";
+	// Is it a valid URL?
+	try {
+		let test = new URL(url);
+		if (test.protocol === "http:" || test.protocol === "https:") return;
+	} catch (_) {}
+	return "URL doesn't seem valid";
 }
 function handleImageChange(event) {
-  if ($book === void 0) return;
-  if ($caret === void 0) return;
-  const target = event.target;
-  const file = target.files === null ? void 0 : target.files[0];
-  const media = $book.getMedia();
-  if (file === void 0) return;
-  if (storage === void 0) return;
-  if (media === void 0) return;
-  media.upload(
-    file,
-    (progress) => upload = `${progress}% done`,
-    (error) => upload = error,
-    (url, thumbnail) => {
-      $caret?.edit(embed, embed.withURLs(url, thumbnail));
-      upload = void 0;
-    }
-  );
+	if ($book === undefined) return;
+	if ($caret === undefined) return;
+	const target = event.target;
+	const file = target.files === null ? undefined : target.files[0];
+	const media = $book.getMedia();
+	if (file === undefined) return;
+	if (storage === undefined) return;
+	if (media === undefined) return;
+	media.upload(file, (progress) => upload = `${progress}% done`, (error) => upload = error, (url, thumbnail) => {
+		// Upload completed successfully, update the front end.
+		// Preserve the description, in case it's an image revision, to avoid data loss.
+		$caret?.edit(embed, embed.withURLs(url, thumbnail));
+		upload = undefined;
+	});
 }
 function handleImageSelection(image) {
-  $caret?.edit(
-    embed,
-    embed.getURL() === image.url ? (
-      // Toggle the embed if choosing the same image
-      embed.withURL("").withDescription("")
-    ) : embed.withURLs(image.url, image.thumb)
-  );
+	$caret?.edit(embed, embed.getURL() === image.url ? embed.withURL("").withDescription("") : embed.withURLs(image.url, image.thumb));
 }
 </script>
 

package/dist/components/editor/EmbedEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import EmbedNode from '../../models/chapter/EmbedNode';
+import EmbedNode from '../../models/chapter/EmbedNode.js';
 interface Props {
     embed: EmbedNode;
 }

package/dist/components/editor/ImageChooser.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">import { onMount } from "svelte";
-import { getBook } from "../page/Contexts";
+import { getBook } from "../page/Contexts.js";
 import ImageThumbnail from "./ImageThumbnail.svelte";
 let { select, selection } = $props();
 let book = getBook();
-let images = $state(void 0);
+let images = $state(undefined);
 let expanded = $state(false);
 function updateImages(newImages) {
-  images = newImages;
+	images = newImages;
 }
+// Load the latest images in the book, and keep them updated as they change.
 onMount(() => {
-  if ($book === void 0) return;
-  const media = $book.getMedia();
-  media.notify(updateImages);
-  return () => media.stopNotifying(updateImages);
+	if ($book === undefined) return;
+	const media = $book.getMedia();
+	media.notify(updateImages);
+	return () => media.stopNotifying(updateImages);
 });
 </script>
 

package/dist/components/editor/ImageChooser.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Image } from '../../models/book/BookMedia';
+import type { Image } from '../../models/book/BookMedia.js';
 interface Props {
     select: (image: Image) => void;
     selection: string;

package/dist/components/editor/ImageThumbnail.svelte

@@ -3,27 +3,30 @@ let retries = 3;
 let error = $state(false);
 let loading = $state(true);
 function loadImage(url) {
-  retries--;
-  let img = new Image();
-  img.onerror = () => {
-    if (retries > 0) {
-      setTimeout(() => loadImage(url), 1e3);
-    } else {
-      loading = false;
-      error = true;
-    }
-  };
-  img.onload = () => {
-    loading = false;
-  };
-  img.src = url;
+	retries--;
+	let img = new Image();
+	img.onerror = () => {
+		if (retries > 0) {
+			setTimeout(() => loadImage(url), 1e3);
+		} else {
+			loading = false;
+			error = true;
+		}
+	};
+	img.onload = () => {
+		loading = false;
+	};
+	img.src = url;
 }
+// Load now and whenever the image prop changes (thumbnails can be
+// reused for a different image by an unkeyed list).
 $effect(() => {
-  retries = 3;
-  loading = true;
-  error = false;
-  loadImage(image.thumb);
+	retries = 3;
+	loading = true;
+	error = false;
+	loadImage(image.thumb);
 });
+export {};
 </script>
 
 {#if loading}

package/dist/components/editor/InlineCodeEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import LanguageEditor from "./LanguageEditor.svelte";
-import { getCaret } from "../page/Contexts";
+import { getCaret } from "../page/Contexts.js";
 let { code } = $props();
 let caret = getCaret();
 </script>

package/dist/components/editor/InlineCodeEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type InlineCodeNode from '../../models/chapter/InlineCodeNode';
+import type InlineCodeNode from '../../models/chapter/InlineCodeNode.js';
 interface Props {
     code: InlineCodeNode;
 }

package/dist/components/editor/LabelEditor.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import TextEditor from "./TextEditor.svelte";
 import { getChapter, getEdition } from "../page/Contexts";
-import { getCaret } from "../page/Contexts";
+import { getCaret } from "../page/Contexts.js";
 let { label } = $props();
 let edition = getEdition();
 let chapter = getChapter();
 let caret = getCaret();
-let ast = $derived($edition && $chapter ? $chapter.chapter.getAST($edition) : void 0);
+let ast = $derived($edition && $chapter ? $chapter.chapter.getAST($edition) : undefined);
 </script>
 
 <code>

package/dist/components/editor/LabelEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type LabelNode from '../../models/chapter/LabelNode';
+import type LabelNode from '../../models/chapter/LabelNode.js';
 interface Props {
     label: LabelNode;
 }

package/dist/components/editor/LanguageEditor.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">import Options from "../app/Options.svelte";
 import Note from "./Note.svelte";
 let { language, edit } = $props();
-const languages = ["", "html", "css", "javascript", "python", "java"];
+const languages = [
+	"",
+	"html",
+	"css",
+	"javascript",
+	"python",
+	"java"
+];
 </script>
 
 <Options

package/dist/components/editor/LinkEditor.svelte

@@ -4,7 +4,7 @@ import Icon from "./Icon.svelte";
 import Button from "../app/Button.svelte";
 import UnlinkIcon from "./icons/unlink.svg?raw";
 import Options from "../app/Options.svelte";
-import { getCaret } from "../page/Contexts";
+import { getCaret } from "../page/Contexts.js";
 let { link } = $props();
 let caret = getCaret();
 let edition = getEdition();
@@ -12,54 +12,52 @@ let chapter = getChapter();
 let root = getRoot();
 let url = $derived(link.getMeta());
 function saveEdit(value) {
-  $caret?.edit(link, link.withMeta(value));
+	$caret?.edit(link, link.withMeta(value));
 }
-function isValidURL(url2) {
-  try {
-    let test = new URL(url2);
-    if (test.protocol === "http:" || test.protocol === "https:")
-      return true;
-  } catch (_) {
-  }
-  return false;
+function isValidURL(url) {
+	// Is it a valid URL?
+	try {
+		let test = new URL(url);
+		if (test.protocol === "http:" || test.protocol === "https:") return true;
+	} catch (_) {}
+	return false;
 }
 function validate(urlOrChapter) {
-  if (urlOrChapter.length === 0) return "link URL can't be empty";
-  if ($edition === void 0) return;
-  if (isValidURL(urlOrChapter)) return;
-  if ($edition.hasChapter(urlOrChapter)) return;
-  const [chapterID, labelID] = urlOrChapter.split(":");
-  if (chapterID === void 0 || labelID === void 0) return;
-  const correspondingChapter = chapterID === "" ? $root : $edition?.getChapter(chapterID)?.getAST($edition);
-  if (correspondingChapter === void 0)
-    return "Not a valid URL or chapter.";
-  if (!correspondingChapter.hasLabel(labelID))
-    return "Not a valid chapter label.";
+	if (urlOrChapter.length === 0) return "link URL can't be empty";
+	if ($edition === undefined) return;
+	if (isValidURL(urlOrChapter)) return;
+	// If not, is it a valid chapterID?
+	if ($edition.hasChapter(urlOrChapter)) return;
+	// If not, is it a valid chapterID:label?
+	const [chapterID, labelID] = urlOrChapter.split(":");
+	if (chapterID === undefined || labelID === undefined) return;
+	// The chapter ID is optional; if it's missing, it refers to this chapter.
+	const correspondingChapter = chapterID === "" ? $root : $edition?.getChapter(chapterID)?.getAST($edition);
+	if (correspondingChapter === undefined) return "Not a valid URL or chapter.";
+	if (!correspondingChapter.hasLabel(labelID)) return "Not a valid chapter label.";
 }
 let options = $derived.by(() => {
-  const list = [];
-  list.push(["External link", url.startsWith("http") ? url : ""]);
-  if ($edition) {
-    for (const chap of $edition?.getChapters() ?? []) {
-      list.push([`Chapter: ${chap.getTitle()}`, chap.getID()]);
-      const root2 = chap.getAST($edition);
-      if (root2) {
-        const headers = root2.getHeaders();
-        for (let number = 0; number < headers.length; number++) {
-          list.push([
-            chap.getTitle() + ": " + headers[number].toText(),
-            `${chap.getID()}#header-${number}`
-          ]);
-        }
-        for (const label of root2.getLabels())
-          list.push([
-            chap.getTitle() + ": " + label.getMeta(),
-            `${chap.getID()}:${label.getMeta()}`
-          ]);
-      }
-    }
-  }
-  return list;
+	const list = [];
+	// Add an empty option.
+	list.push(["External link", url.startsWith("http") ? url : ""]);
+	// Add an option for each chapter and it's labels.
+	if ($edition) {
+		for (const chap of $edition?.getChapters() ?? []) {
+			// Include the chapter itself
+			list.push([`Chapter: ${chap.getTitle()}`, chap.getID()]);
+			const root = chap.getAST($edition);
+			if (root) {
+				// Include the chapter's headers
+				const headers = root.getHeaders();
+				for (let number = 0; number < headers.length; number++) {
+					list.push([chap.getTitle() + ": " + headers[number].toText(), `${chap.getID()}#header-${number}`]);
+				}
+				// Include all of the labels in the chapter
+				for (const label of root.getLabels()) list.push([chap.getTitle() + ": " + label.getMeta(), `${chap.getID()}:${label.getMeta()}`]);
+			}
+		}
+	}
+	return list;
 });
 </script>
 

package/dist/components/editor/LinkEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type LinkNode from '../../models/chapter/LinkNode';
+import type LinkNode from '../../models/chapter/LinkNode.js';
 interface Props {
     link: LinkNode;
 }