@witchcraft/editor 0.0.3 → 0.0.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftEditor",
   "configKey": "witchcraftEditor",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { defu } from 'defu';
 import fs from 'node:fs/promises';
 
 const dependencies = {
-	"@witchcraft/ui": "^0.3.0"};
+	"@witchcraft/ui": "^0.3.2"};
 const pkg = {
 	dependencies: dependencies};
 

package/dist/runtime/components/Editor.d.vue.ts

@@ -1,8 +1,8 @@
 import type { Content, EditorOptions } from "@tiptap/core";
 import type { ScrollNearContainerEdgesOptions } from "@witchcraft/ui/types/index";
-import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js.js";
-import type { EditorLinkOptions } from "../pm/features/Link/types.js";
-import { type CssVariables, type MenuRenderInfo } from "../types/index.js.js";
+import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js";
+import type { EditorLinkOptions } from "../pm/features/Link/types";
+import { type CssVariables, type MenuRenderInfo } from "../types/index.js";
 type __VLS_Props = {
     /** The content for the editor. It is better to use docId and the documentApi instead. */
     content?: Content;

package/dist/runtime/components/Editor.vue.d.ts

@@ -1,8 +1,8 @@
 import type { Content, EditorOptions } from "@tiptap/core";
 import type { ScrollNearContainerEdgesOptions } from "@witchcraft/ui/types/index";
-import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js.js";
-import type { EditorLinkOptions } from "../pm/features/Link/types.js";
-import { type CssVariables, type MenuRenderInfo } from "../types/index.js.js";
+import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js";
+import type { EditorLinkOptions } from "../pm/features/Link/types";
+import { type CssVariables, type MenuRenderInfo } from "../types/index.js";
 type __VLS_Props = {
     /** The content for the editor. It is better to use docId and the documentApi instead. */
     content?: Content;

package/dist/runtime/demo/main.d.ts

@@ -1 +1 @@
-import "./tailwind.css.js";
+import "./tailwind.css";

package/dist/runtime/injectionKeys.d.ts

@@ -1,6 +1,6 @@
 import type { useScrollNearContainerEdges } from "@witchcraft/ui/composables/useScrollNearContainerEdges";
 import type { ComputedRef, InjectionKey } from "vue";
-import type { CssVariables } from "./types/index.js.js";
+import type { CssVariables } from "./types/index.js";
 export declare const editorCssVariablesInjectionKey: InjectionKey<ComputedRef<CssVariables>>;
 export declare const editorScrollInjectionKey: InjectionKey<ReturnType<typeof useScrollNearContainerEdges>>;
 export declare const editorTeleportToInjectionKey: InjectionKey<string>;

package/dist/runtime/main.lib.d.ts

@@ -1,2 +1,2 @@
-export * from "./types/index.js.js";
-export { default as Editor } from "./components/Editor.vue.js";
+export * from "./types/index.js";
+export { default as Editor } from "./components/Editor.vue";

package/dist/runtime/pm/features/Base/Base.d.ts

@@ -1,4 +1,4 @@
 import { Extension } from "@tiptap/core";
-import type { BaseExtensionOptions } from "./types.js.js";
+import type { BaseExtensionOptions } from "./types.js";
 /** Adds some basic commands and plugins to the editor. */
 export declare const Base: Extension<BaseExtensionOptions, any>;

package/dist/runtime/pm/features/Base/types.d.ts

@@ -1,3 +1,3 @@
-import type { WithOnTriggerByEmbeddedBlockOptions } from "../EmbeddedDocument/types.js.js";
+import type { WithOnTriggerByEmbeddedBlockOptions } from "../EmbeddedDocument/types.js";
 export interface BaseExtensionOptions extends WithOnTriggerByEmbeddedBlockOptions {
 }

package/dist/runtime/pm/features/Blocks/Blocks.d.ts

@@ -1,2 +1,2 @@
-export { Item } from "./Item.js.js";
-export { List } from "./List.js.js";
+export { Item } from "./Item.js";
+export { List } from "./List.js";

package/dist/runtime/pm/features/Blocks/Item.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@tiptap/core";
-import { type ItemNodeOptions } from "./types.js.js";
+import { type ItemNodeOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         item: {

package/dist/runtime/pm/features/Blocks/List.d.ts

@@ -1,4 +1,4 @@
 import { Node } from "@tiptap/core";
-import type { ListNodeOptions } from "./types.js.js";
+import type { ListNodeOptions } from "./types.js";
 export declare const List: Node<ListNodeOptions, any>;
 export type NodeListName = "list";

package/dist/runtime/pm/features/Blocks/commands/changeItemType.d.ts

@@ -1,6 +1,6 @@
 import type { Command } from "@tiptap/core";
-import type { CommandAttributeOptions } from "../../../../types/index.js.js";
-import type { StatefulNodeStates } from "../types.js.js";
+import type { CommandAttributeOptions } from "../../../../types/index.js";
+import type { StatefulNodeStates } from "../types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         changeItemType: {

package/dist/runtime/pm/features/Blocks/commands/changeTypeAttr.d.ts

@@ -1,5 +1,5 @@
 import type { Command } from "@tiptap/core";
-import type { CommandAttributeOptions } from "../../../../types/index.js.js";
+import type { CommandAttributeOptions } from "../../../../types/index.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         changeTypeAttr: {

package/dist/runtime/pm/features/Blocks/components/defaultItemMenu.d.ts

@@ -1,5 +1,5 @@
-export declare const defaultItemMenu: (import("../types.ts.js").ItemMenuCommand | {
+export declare const defaultItemMenu: (import("../types.ts").ItemMenuCommand | {
     type: "group";
     title: string;
-    variations: import("../types.ts.js").ItemMenuCommand[];
+    variations: import("../types.ts").ItemMenuCommand[];
 })[];

package/dist/runtime/pm/features/Blocks/composables/useNodeStates.d.ts

@@ -3,5 +3,5 @@ export declare function useNodeStates(props: {
     node: Node;
 }): {
     counterStyle: import("@vue/reactivity").ComputedRef<string>;
-    nodeState: import("@vue/reactivity").ComputedRef<import("../types.js.js").StatefulNodeStateEntry<string> | undefined>;
+    nodeState: import("@vue/reactivity").ComputedRef<import("../types.js").StatefulNodeStateEntry<string> | undefined>;
 };

package/dist/runtime/pm/features/Blocks/itemMenuMenuItems.d.ts

@@ -1,4 +1,4 @@
-import type { ItemMenuCommand } from "./types.js.js";
+import type { ItemMenuCommand } from "./types.js";
 export declare const deleteNodesCommand: ItemMenuCommand;
 export declare const regularItemCommand: ItemMenuCommand;
 export declare const bulletItemCommand: ItemMenuCommand;

package/dist/runtime/pm/features/Blocks/plugins/itemBlockIdPlugin.d.ts

@@ -1,6 +1,6 @@
 import type { NodeType } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import type { ItemNodeOptions } from "../types.js.js";
+import type { ItemNodeOptions } from "../types.js";
 export declare const itemBlockIdPluginKey: PluginKey<any>;
 export declare function itemBlockIdPlugin(self: {
     type: NodeType;

package/dist/runtime/pm/features/Blocks/plugins/itemMenuPlugin.d.ts

@@ -1,4 +1,4 @@
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import type { ItemMenuPluginState } from "../types.js.js";
+import type { ItemMenuPluginState } from "../types.js";
 export declare const itemMenuPluginKey: PluginKey<ItemMenuPluginState>;
 export declare function itemMenuPlugin(): Plugin<ItemMenuPluginState>;

package/dist/runtime/pm/features/Blocks/states/stateful.d.ts

@@ -1,2 +1,2 @@
-import type { StatefulNodeStates } from "../types.js.js";
+import type { StatefulNodeStates } from "../types.js";
 export declare const statefulStates: StatefulNodeStates;

package/dist/runtime/pm/features/Blocks/types.d.ts

@@ -1,7 +1,7 @@
 import type { Editor } from "@tiptap/core";
 import type { InjectionKey, Ref } from "vue";
-import type { HTMLAttributesOptions } from "../../../types/index.js.js";
-import type { Command, CommandGroup } from "../CommandsMenus/types.js.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
+import type { Command, CommandGroup } from "../CommandsMenus/types.js";
 export interface ItemNodeOptions extends HTMLAttributesOptions {
     types: string[];
     states: StatefulNodeStates;
@@ -34,7 +34,7 @@ export type ItemMenuPluginState = {
     opened: boolean;
     id?: string;
 };
-export { itemMenuPluginKey } from "./plugins/itemMenuPlugin.js.js";
+export { itemMenuPluginKey } from "./plugins/itemMenuPlugin.js";
 export type ItemMenuCommand = Command<("$blockId" | "$blockPos" | "$contentPos" | any)[], ((editor: Editor, context: {
     blockId?: string;
     blockPos: number;

package/dist/runtime/pm/features/Blocks/utils/createItemMenuCommandExecuter.d.ts

@@ -1,3 +1,3 @@
 import type { Editor } from "@tiptap/core";
-import type { ItemMenuCommand } from "../types.js.js";
+import type { ItemMenuCommand } from "../types.js";
 export declare function createItemMenuCommandExecuter(getBlockId: () => string | undefined): (item: ItemMenuCommand, editor: Editor) => void;

package/dist/runtime/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting.d.ts

@@ -1,7 +1,7 @@
 import type { Editor, Editor as PmEditor } from "@tiptap/core";
 import type { createLowlight } from "lowlight";
 import { type Ref, type ShallowRef } from "vue";
-import { type HighlightJsLanguageInfo } from "../highlightJsInfo.js.js";
+import { type HighlightJsLanguageInfo } from "../highlightJsInfo.js";
 /**
     * Listens for transactions and scans the document, dynamically loading the used highlight.js language themes.
     *

package/dist/runtime/pm/features/CodeBlock/types.d.ts

@@ -1,4 +1,4 @@
 import type { InjectionKey, Ref } from "vue";
-import type { HighlightJsLanguageInfo } from "./highlightJsInfo.js.js";
+import type { HighlightJsLanguageInfo } from "./highlightJsInfo.js";
 export declare const langsInfoInjectionKey: InjectionKey<Ref<HighlightJsLanguageInfo>>;
 export declare const codeBlockThemeIsDarkInjectionKey: InjectionKey<Ref<boolean>>;

package/dist/runtime/pm/features/CommandsMenus/CommandBar.d.ts

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { type CommandBarExtensionOptions } from "./types.js.js";
+import { type CommandBarExtensionOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         commandBar: {

package/dist/runtime/pm/features/CommandsMenus/commandBarMenuItems.d.ts

@@ -1,5 +1,5 @@
 import type { EditorState } from "@tiptap/pm/state";
-import type { CommandBarCommand, CommandBarMenu } from "./types.js.js";
+import type { CommandBarCommand, CommandBarMenu } from "./types.js";
 export declare const toggleBoldCommand: CommandBarCommand;
 export declare const toggleItalicCommand: CommandBarCommand;
 export declare const toggleStrikeCommand: CommandBarCommand;

package/dist/runtime/pm/features/CommandsMenus/components/CommandBar.d.vue.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import type { CommandBarCommand, CommandBarGroup } from "../types.js";
+import type { CommandBarCommand, CommandBarGroup } from "../types";
 type __VLS_Props = {
     editor: Editor;
     commands: (CommandBarCommand | CommandBarGroup)[];

package/dist/runtime/pm/features/CommandsMenus/components/CommandBar.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import type { CommandBarCommand, CommandBarGroup } from "../types.js";
+import type { CommandBarCommand, CommandBarGroup } from "../types";
 type __VLS_Props = {
     editor: Editor;
     commands: (CommandBarCommand | CommandBarGroup)[];

package/dist/runtime/pm/features/CommandsMenus/components/CommandBarItem.d.vue.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import { type CommandBarCommand } from "../types.js.js";
+import { type CommandBarCommand } from "../types.js";
 type __VLS_Props = {
     item: CommandBarCommand;
     editor: Editor;

package/dist/runtime/pm/features/CommandsMenus/components/CommandBarItem.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import { type CommandBarCommand } from "../types.js.js";
+import { type CommandBarCommand } from "../types.js";
 type __VLS_Props = {
     item: CommandBarCommand;
     editor: Editor;

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuGroup.d.vue.ts

@@ -1,4 +1,4 @@
-import type { CommandGroup } from "../types.js.js";
+import type { CommandGroup } from "../types.js";
 type __VLS_Props = {
     item: CommandGroup;
 };

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CommandGroup } from "../types.js.js";
+import type { CommandGroup } from "../types.js";
 type __VLS_Props = {
     item: CommandGroup;
 };

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuItem.d.vue.ts

@@ -1,5 +1,5 @@
-import type { ItemMenuCommand } from "../../Blocks/types.js.js";
-import { type CommandGroup } from "../types.js.js";
+import type { ItemMenuCommand } from "../../Blocks/types.js";
+import { type CommandGroup } from "../types.js";
 type __VLS_Props = {
     item: ItemMenuCommand | CommandGroup;
 };

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuItem.vue.d.ts

@@ -1,5 +1,5 @@
-import type { ItemMenuCommand } from "../../Blocks/types.js.js";
-import { type CommandGroup } from "../types.js.js";
+import type { ItemMenuCommand } from "../../Blocks/types.js";
+import { type CommandGroup } from "../types.js";
 type __VLS_Props = {
     item: ItemMenuCommand | CommandGroup;
 };

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuList.d.vue.ts

@@ -1,5 +1,5 @@
-import type { ItemMenuCommand } from "../../Blocks/types.js";
-import type { CommandGroup } from "../types.js.js";
+import type { ItemMenuCommand } from "../../Blocks/types";
+import type { CommandGroup } from "../types.js";
 type __VLS_Props = {
     entries: (ItemMenuCommand | CommandGroup)[];
 };

package/dist/runtime/pm/features/CommandsMenus/components/CommandMenuList.vue.d.ts

@@ -1,5 +1,5 @@
-import type { ItemMenuCommand } from "../../Blocks/types.js";
-import type { CommandGroup } from "../types.js.js";
+import type { ItemMenuCommand } from "../../Blocks/types";
+import type { CommandGroup } from "../types.js";
 type __VLS_Props = {
     entries: (ItemMenuCommand | CommandGroup)[];
 };

package/dist/runtime/pm/features/CommandsMenus/icons/HighlightIcon.d.vue.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import type { HighlightMarkOptions } from "../../Highlight/types.js.js";
+import type { HighlightMarkOptions } from "../../Highlight/types.js";
 type __VLS_Props = {
     editor: Editor;
     colorSlot?: keyof HighlightMarkOptions["colors"] | string;

package/dist/runtime/pm/features/CommandsMenus/icons/HighlightIcon.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import type { HighlightMarkOptions } from "../../Highlight/types.js.js";
+import type { HighlightMarkOptions } from "../../Highlight/types.js";
 type __VLS_Props = {
     editor: Editor;
     colorSlot?: keyof HighlightMarkOptions["colors"] | string;

package/dist/runtime/pm/features/CommandsMenus/utils/defaultCommandExecutor.d.ts

@@ -1,3 +1,3 @@
 import type { Editor } from "@tiptap/core";
-import type { Command } from "../types.js.js";
+import type { Command } from "../types.js";
 export declare function defaultCommandExecuter(item: Command, editor: Editor): void;

package/dist/runtime/pm/features/CommandsMenus/utils/findCommand.d.ts

@@ -1,4 +1,4 @@
-import type { Command, CommandGroup } from "../types.js.js";
+import type { Command, CommandGroup } from "../types.js";
 /**
  * Deep search through a list of commands/command groups.
  *

package/dist/runtime/pm/features/DocumentApi/DocumentApi.d.ts

@@ -2,7 +2,7 @@ import type { Content, EditorOptions } from "@tiptap/core";
 import type { Schema } from "@tiptap/pm/model";
 import type { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
 import { Editor } from "@tiptap/vue-3";
-import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js.js";
+import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js";
 /**
  * Configures the document api which tells the editor how to load/unload/save/cache documents, including embedded ones.
  *

package/dist/runtime/pm/features/DocumentApi/composables/useEditorContent.d.ts

@@ -1,6 +1,6 @@
 import type { Content, Editor, EditorOptions } from "@tiptap/core";
 import { type Ref, type ShallowRef } from "vue";
-import type { DocumentApiInterface } from "../types.js.js";
+import type { DocumentApiInterface } from "../types.js";
 /**
     * Provides two ways to load content into the editor.
     *

package/dist/runtime/pm/features/DocumentApi/composables/useTestDocumentApi.d.ts

@@ -1,7 +1,7 @@
 import type { EditorOptions } from "@tiptap/core";
 import { EditorState } from "@tiptap/pm/state";
 import { type Ref } from "vue";
-import type { DocumentApiInterface } from "../types.js.js";
+import type { DocumentApiInterface } from "../types.js";
 type Cache = Record<string, {
     state?: EditorState;
     count: number;

package/dist/runtime/pm/features/DocumentApi/utils/convertFullTransactionForPartialState.d.ts

@@ -1,3 +1,3 @@
 import type { EditorState, Transaction } from "@tiptap/pm/state";
-import type { EmbedId } from "../types.js.js";
+import type { EmbedId } from "../types.js";
 export declare function convertFullTransactionForPartialState(state: EditorState, tr: Transaction, embedId: EmbedId): Transaction | undefined;

package/dist/runtime/pm/features/DocumentApi/utils/getStateEmbedRange.d.ts

@@ -1,5 +1,5 @@
 import type { Node } from "@tiptap/pm/model";
-import type { BlockId } from "../types.js.js";
+import type { BlockId } from "../types.js";
 export declare function getStateEmbedRange(doc: Node, blockId: BlockId): {
     start: number;
     end: number;

package/dist/runtime/pm/features/DocumentApi/utils/isEmbedId.d.ts

@@ -1,2 +1,2 @@
-import type { EmbedId, MaybeEmbedId } from "../types.js.js";
+import type { EmbedId, MaybeEmbedId } from "../types.js";
 export declare function isEmbedId(embedId: MaybeEmbedId): embedId is EmbedId;

package/dist/runtime/pm/features/EmbeddedDocument/Embedded.d.ts

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import type { EmbeddedDocumentNodeOptions } from "./types.js.js";
+import type { EmbeddedDocumentNodeOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         embeddedCommandRedirect: {

package/dist/runtime/pm/features/EmbeddedDocument/EmbeddedDocument.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@tiptap/core";
-import type { HTMLAttributesOptions } from "../../../types/index.js.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         embeddedDocument: {};

package/dist/runtime/pm/features/EmbeddedDocument/components/EmbeddedDocumentPicker.d.vue.ts

@@ -1,4 +1,4 @@
-import { type MaybeEmbedId } from "../../DocumentApi/types.js.js";
+import { type MaybeEmbedId } from "../../DocumentApi/types.js";
 type __VLS_Props = {
     embedId: MaybeEmbedId;
     /** We need this, otherwise prosemirror? gets in an infinite loop because the component is not actually displayed? I think... Chrome debugger freezes completely. */

package/dist/runtime/pm/features/EmbeddedDocument/components/EmbeddedDocumentPicker.vue

@@ -93,14 +93,12 @@
 		</div>
 	</div>
 	<div class="flex flex-row no-wrap gap-2 justify-end">
-		<!-- @vue-expect-error -->
 		<WButton
 			color="danger"
 			@click="emit('cancel')"
 		>
 			Cancel
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			color="ok"
 			@click="submit"

package/dist/runtime/pm/features/EmbeddedDocument/components/EmbeddedDocumentPicker.vue.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeEmbedId } from "../../DocumentApi/types.js.js";
+import { type MaybeEmbedId } from "../../DocumentApi/types.js";
 type __VLS_Props = {
     embedId: MaybeEmbedId;
     /** We need this, otherwise prosemirror? gets in an infinite loop because the component is not actually displayed? I think... Chrome debugger freezes completely. */

package/dist/runtime/pm/features/EmbeddedDocument/components/EmbeddedNodeView.vue

@@ -41,7 +41,6 @@
 			>
 				Blank Embed
 			</div>
-			<!-- @vue-expect-error -->
 			<WButton
 				v-if="editor?.isEditable"
 				title="Change embed link."
@@ -50,7 +49,6 @@
 			>
 				<WIcon><i-fa-solid-link class="w-[0.7rem]"/></WIcon>
 			</WButton>
-			<!-- @vue-expect-error -->
 			<WPopup
 				:use-backdrop="true"
 				:preferred-horizontal="['center-screen']"

package/dist/runtime/pm/features/EmbeddedDocument/composables/useEmbeddedEditor.d.ts

@@ -1,6 +1,6 @@
 import type { Content, Editor, EditorOptions } from "@tiptap/core";
 import { type ComputedRef, type Ref, type ShallowRef } from "vue";
-import { type DocumentApiInterface, type MaybeEmbedId } from "../../DocumentApi/types.js.js";
+import { type DocumentApiInterface, type MaybeEmbedId } from "../../DocumentApi/types.js";
 /** Sets up nearly everything for the embedded editor nodeview. */
 export declare function useEmbeddedEditor(embedIdRef: ComputedRef<MaybeEmbedId> | Ref<MaybeEmbedId>, editor: ShallowRef<Editor | undefined>, rootEditor: Editor, 
 /** For forwarding commands the embedded editor can't handle. See {@link Embedded}. */

package/dist/runtime/pm/features/EmbeddedDocument/types.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch, Editor, EditorOptions } from "@tiptap/core";
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { MaybeEmbedId } from "../DocumentApi/types.js.js";
+import type { MaybeEmbedId } from "../DocumentApi/types.js";
 export interface EmbeddedDocumentNodeOptions extends WithOnTriggerByEmbeddedBlockOptions {
     rootEditor: Editor;
     /** Provided by the embedded node view. */

package/dist/runtime/pm/features/FileLoader/FileLoader.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@tiptap/core";
-import type { FileLoaderExtensionOptions } from "./types.js.js";
+import type { FileLoaderExtensionOptions } from "./types.js";
 /**
  * Provides a way to asynchronously load files into the editor and a node to display while they are loading.
  *

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/FileLoaderHandler.d.ts

@@ -1,6 +1,6 @@
 import type { MakeOptional } from "@alanscodelog/utils/types";
 import type { Editor } from "@tiptap/core";
-import type { IFileLoaderHandler } from "../types.js.js";
+import type { IFileLoaderHandler } from "../types.js";
 /**
  * A partial implementation of {@link IFileLoaderHandler}.
  *

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/TestFileLoaderHandler.d.ts

@@ -1,4 +1,4 @@
-import { FileLoaderHandler } from "./FileLoaderHandler.js.js";
+import { FileLoaderHandler } from "./FileLoaderHandler.js";
 export declare const testFileLoaderDelay = 2000;
 /** Instance of {@link FileLoaderHandler} for testing. */
 export declare const TestFileLoaderHandler: FileLoaderHandler<File & {

package/dist/runtime/pm/features/FileLoader/commands/insertFile.d.ts

@@ -1,5 +1,5 @@
 import type { Command } from "@tiptap/core";
-import type { IFileLoaderHandler } from "../types.js.js";
+import type { IFileLoaderHandler } from "../types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         fileLoader: {

package/dist/runtime/pm/features/FileLoader/plugins/fileLoaderPlugin.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import type { FileLoaderExtensionOptions } from "../types.js.js";
+import type { FileLoaderExtensionOptions } from "../types.js";
 export declare const fileLoaderPluginKey: PluginKey<any>;
 export declare function fileLoaderPlugin(editor: Editor, options: Pick<FileLoaderExtensionOptions, "cleanupOnLoad">): Plugin<any>;

package/dist/runtime/pm/features/FileLoader/types.d.ts

@@ -1,6 +1,6 @@
 import type { Editor } from "@tiptap/core";
-import type { HTMLAttributesOptions } from "../../../types/index.js.js";
-import type { WithOnTriggerByEmbeddedBlockOptions } from "../EmbeddedDocument/types.js.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
+import type { WithOnTriggerByEmbeddedBlockOptions } from "../EmbeddedDocument/types.js";
 export interface FileLoaderExtensionOptions extends HTMLAttributesOptions, WithOnTriggerByEmbeddedBlockOptions {
     /**
      * By default, the plugin removes fileLoader nodes using {@link cleanupFileLoaderNodes} when the document is loaded. This can happen if the user interrupts a file load/upload/save and the document is saved with a fileLoader node.

package/dist/runtime/pm/features/FileLoader/utils/cleanupFileLoaderNodes.d.ts

@@ -1,6 +1,6 @@
 import type { NodeType, Schema } from "@tiptap/pm/model";
 import type { Transaction } from "@tiptap/pm/state";
-import { cleanupFileLoaderNode } from "./cleanupFileLoaderNode.js.js";
+import { cleanupFileLoaderNode } from "./cleanupFileLoaderNode.js";
 /**
  * Removes all `fileLoader` nodes from the document.
  *

package/dist/runtime/pm/features/FileLoader/utils/optionsCheck.d.ts

@@ -1,3 +1,3 @@
 import type { Editor } from "@tiptap/core";
-import type { FileLoaderExtensionOptions } from "../types.js.js";
+import type { FileLoaderExtensionOptions } from "../types.js";
 export declare function optionsCheck(editor: Editor, options: FileLoaderExtensionOptions): void;

package/dist/runtime/pm/features/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@tiptap/core";
-import type { HeadingNodeOptions } from "./types.js.js";
+import type { HeadingNodeOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         heading: {

package/dist/runtime/pm/features/Heading/commands/changeLevelAttr.d.ts

@@ -1,5 +1,5 @@
 import { type Command } from "@tiptap/core";
-import type { CommandAttributeOptions, CommandToggleNodesOptions } from "../../../../types/index.js.js";
+import type { CommandAttributeOptions, CommandToggleNodesOptions } from "../../../../types/index.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         changeLevelAttr: {

package/dist/runtime/pm/features/Highlight/Highlight.d.ts

@@ -1,5 +1,5 @@
 import { Mark } from "@tiptap/core";
-import { type HighlightMarkOptions } from "./types.js.js";
+import { type HighlightMarkOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         highlight: {

package/dist/runtime/pm/features/Highlight/types.d.ts

@@ -1,5 +1,5 @@
 import { PluginKey } from "@tiptap/pm/state";
-import type { HTMLAttributesOptions } from "../../../types/index.js.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
 export interface HighlightMarkOptions<T extends string = `slot${[1, 2, 3, 4, 5][number]}`> extends HTMLAttributesOptions {
     /**
      * The colors to use for the highlight in Record<name, {color: string, name: string}> format.

package/dist/runtime/pm/features/Iframe/Iframe.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@tiptap/core";
-import type { IframeNodeOptions } from "./types.js.js";
+import type { IframeNodeOptions } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         iframe: {

package/dist/runtime/pm/features/Iframe/components/IframeNodeView.vue

@@ -28,7 +28,6 @@
 			transition-opacity
 		"
 	>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="deleteNode();
@@ -36,14 +35,12 @@
 		>
 			<WIcon><i-fa-solid-trash/></WIcon>
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="copy(node.attrs.src)"
 		>
 			<WIcon><i-fa-solid-copy/></WIcon>
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="openLink"

package/dist/runtime/pm/features/Iframe/types.d.ts

@@ -1,5 +1,5 @@
-import type { IframeSourceParser } from "./IframeParsers.js.js";
-import type { HTMLAttributesOptions } from "../../../types/index.js.js";
+import type { IframeSourceParser } from "./IframeParsers.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
 export interface IframeNodeOptions extends HTMLAttributesOptions {
     handlers: Record<string, IframeSourceParser>;
 }

package/dist/runtime/pm/features/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { type LinkOptions } from "@tiptap/extension-link";
-import { type AdditionalLinkOptions as AdditionalLinkNodeOptions, type LinkMenuPluginState } from "./types.js.js";
+import { type AdditionalLinkOptions as AdditionalLinkNodeOptions, type LinkMenuPluginState } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         links: {

package/dist/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -56,7 +56,6 @@
 			@remove="emit('remove')"
 		/>
 		<div class="flex flex-nowrap flex-row gap-1 justify-start border border-transparent">
-			<!-- @vue-expect-error -->
 			<WButton
 				v-if="linkHref"
 				:border="false"

package/dist/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -7,7 +7,6 @@
 	ref="el"
 >
 	<div class="flex flex-nowrap flex-row gap-1 items-center">
-		<!-- @vue-expect-error -->
 		<WLabel
 			id="menu-link-input"
 			title="Internal Link"
@@ -42,8 +41,7 @@
 		ref="suggestionsComponent"
 		v-model="linkText"
 		v-model:input-value="inputValue"
-		v-model:is-open="isOpen"
-		v-model:active-suggestion="activeSuggestion"
+		v-model:open="isOpen"
 		@submit="submitHandler"
 	/>
 </div>
@@ -69,7 +67,6 @@ const linkText = defineModel("linkText", { type: String, ...{ required: true } }
 const inputValue = defineModel("tempLinkTextValue", { type: String, ...{ default: "" } });
 const canOpen = ref(false);
 const isOpen = ref(false);
-const activeSuggestion = ref(-1);
 const el = ref(null);
 const suggestionsComponent = ref();
 watch(linkText, () => {

package/dist/runtime/pm/features/Link/components/BubbleMenuLinkActions.vue

@@ -1,6 +1,5 @@
 <template>
 <div class="flex flex-nowrap flex-row gap-1 border border-transparent">
-	<!-- @vue-expect-error -->
 	<WButton
 		:border="false"
 		:disabled="!isChanged"
@@ -16,7 +15,6 @@
 			<i-fa-solid-plus/>
 		</WIcon>
 	</WButton>
-	<!-- @vue-expect-error -->
 	<WButton
 		v-if="linkHref"
 		:border="false"
@@ -27,7 +25,6 @@
 	>
 		<WIcon><i-fa-solid-copy class="w-[1.25em]"/></WIcon>
 	</WButton>
-	<!-- @vue-expect-error -->
 	<WButton
 		v-if="linkMark"
 		:border="false"

package/dist/runtime/pm/features/Menus/Menus.d.ts

@@ -1,6 +1,6 @@
 import { Extension } from "@tiptap/core";
 import { type PluginKey } from "@tiptap/pm/state";
-import { type Menu, type OpenMenuInfo } from "./types.js.js";
+import { type Menu, type OpenMenuInfo } from "./types.js";
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         menus: {

package/dist/runtime/pm/features/Menus/components/MarkMenuManager.vue

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error -->
 <WPopup
 	:model-value="!!activeMarkMenu"
 	:preferred-horizontal="['center-most']"

package/dist/runtime/pm/features/Menus/utils/isMarkMenu.d.ts

@@ -1,2 +1,2 @@
-import type { MarkMenu, Menu } from "../types.js.js";
+import type { MarkMenu, Menu } from "../types.js";
 export declare function isMarkMenu(menu: Menu): menu is MarkMenu;

package/dist/runtime/pm/testSchema.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from "@tiptap/pm/model";
-import { type NodeFileLoaderName } from "./features/FileLoader/FileLoader.js.js";
-import { type schema as baseSchema } from "./schema.js.js";
-export declare const testExtensions: (import("@tiptap/core").AnyExtension | import("@tiptap/core").Node<import("./features/FileLoader/types.ts.js").FileLoaderExtensionOptions, any>)[];
+import { type NodeFileLoaderName } from "./features/FileLoader/FileLoader.js";
+import { type schema as baseSchema } from "./schema.js";
+export declare const testExtensions: (import("@tiptap/core").AnyExtension | import("@tiptap/core").Node<import("./features/FileLoader/types.ts").FileLoaderExtensionOptions, any>)[];
 export declare const testSchema: typeof baseSchema & Schema<NodeFileLoaderName & "itemNoId">;

package/dist/runtime/pm/utils/createDropIndicator.d.ts

@@ -1,5 +1,5 @@
-import { type DropInfo } from "./dropPointInfo.js.js";
-import type { Point } from "../../types/index.js.js";
+import { type DropInfo } from "./dropPointInfo.js";
+import type { Point } from "../../types/index.js";
 export interface DropIndicator extends Point {
     width: number;
     type: "child" | "before" | "after";

package/dist/runtime/pm/utils/dropPointInfo.d.ts

@@ -1,5 +1,5 @@
 import type { EnumLike } from "@alanscodelog/utils";
-import type { Point } from "../../types/index.js.js";
+import type { Point } from "../../types/index.js";
 /**
  * Given a point (a mouse position), a box, and a possible indent, returns information regarding it's position.
  *

package/dist/runtime/pm/utils/index.d.ts

@@ -1,15 +1,15 @@
-export { createStateOnlyPluginApply } from "./createStateOnlyPluginApply.js.js";
-export { createStateOnlyPluginObjApply } from "./createStateOnlyPluginObjApply.js.js";
-export { dropPointInfo } from "./dropPointInfo.js.js";
-export { findUpwards } from "./findUpwards.js.js";
-export { getChildChunks } from "./getChildChunks.js.js";
-export { getDiffReplacementRange } from "./getDiffReplacementRange.js.js";
-export { getElMaxVisualSize } from "./getElMaxVisualSize.js.js";
-export { getElPropertyAsInt } from "./getElPropertyAsInt.js.js";
-export { getGroupNodeNames } from "./getGroupNodeNames.js.js";
-export { getMarkPosition } from "./getMarkPosition.js.js";
-export { getMarksInSelection } from "./getMarksInSelection.js.js";
-export { mapSelection } from "./mapSelection.js.js";
-export { nodesBetween } from "./nodesBetween.js.js";
-export { pointToPmPoint } from "./pointToPmPoint.js.js";
-export { splitIntoChunks } from "./splitIntoChunks.js.js";
+export { createStateOnlyPluginApply } from "./createStateOnlyPluginApply.js";
+export { createStateOnlyPluginObjApply } from "./createStateOnlyPluginObjApply.js";
+export { dropPointInfo } from "./dropPointInfo.js";
+export { findUpwards } from "./findUpwards.js";
+export { getChildChunks } from "./getChildChunks.js";
+export { getDiffReplacementRange } from "./getDiffReplacementRange.js";
+export { getElMaxVisualSize } from "./getElMaxVisualSize.js";
+export { getElPropertyAsInt } from "./getElPropertyAsInt.js";
+export { getGroupNodeNames } from "./getGroupNodeNames.js";
+export { getMarkPosition } from "./getMarkPosition.js";
+export { getMarksInSelection } from "./getMarksInSelection.js";
+export { mapSelection } from "./mapSelection.js";
+export { nodesBetween } from "./nodesBetween.js";
+export { pointToPmPoint } from "./pointToPmPoint.js";
+export { splitIntoChunks } from "./splitIntoChunks.js";

package/dist/runtime/pm/utils/nodesBetween.d.ts

@@ -1,6 +1,6 @@
 import type { Node } from "@tiptap/pm/model";
 import type { Selection } from "@tiptap/pm/state";
-import type { NodesBetweenFilter } from "../../types/index.js.js";
+import type { NodesBetweenFilter } from "../../types/index.js";
 /**
  * A more intuitive nodesBetween wrapper. Goes only through the nodes inside or touching the selection.
  *

package/dist/runtime/pm/utils/pointToPmPoint.d.ts

@@ -1,2 +1,2 @@
-import type { PmPoint, Point } from "../../types/index.js.js";
+import type { PmPoint, Point } from "../../types/index.js";
 export declare function pointToPmPoint(point: Point): PmPoint;

package/dist/runtime/types/index.d.ts

@@ -1,13 +1,13 @@
 import type { Node } from "@tiptap/pm/model";
-export * from "../pm/features/Link/types.js.js";
-export * from "../pm/features/Base/types.js.js";
-export * from "../pm/features/Menus/types.js.js";
-export * from "../pm/features/Blocks/types.js.js";
-export * from "../pm/features/CommandsMenus/types.js.js";
-export * from "../pm/features/CodeBlock/types.js.js";
-export * from "../pm/features/FileLoader/types.js.js";
-export * from "../pm/features/DocumentApi/types.js.js";
-export * from "../pm/features/EmbeddedDocument/types.js.js";
+export * from "../pm/features/Link/types.js";
+export * from "../pm/features/Base/types.js";
+export * from "../pm/features/Menus/types.js";
+export * from "../pm/features/Blocks/types.js";
+export * from "../pm/features/CommandsMenus/types.js";
+export * from "../pm/features/CodeBlock/types.js";
+export * from "../pm/features/FileLoader/types.js";
+export * from "../pm/features/DocumentApi/types.js";
+export * from "../pm/features/EmbeddedDocument/types.js";
 export type NodesBetweenFilter = (node: Node | null, start: number, parent: Node | null, index: number) => boolean;
 export type PmPoint = {
     left: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@witchcraft/editor",
 	"description": "Block base prosemirror editor with partial/full editable document embeds, infinite embeds, and document uploads.",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"main": "./dist/runtime/main.lib.js",
 	"type": "module",
 	"sideEffects": false,
@@ -64,8 +64,7 @@
 		"failOnWarn": false
 	},
 	"scripts": {
-		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
-		"prepare": "husky && pnpm build",
+		"prepare": "husky && pnpm nuxt-module-build prepare && pnpm build:only && cd playground && pnpm i --ignore-scripts --ignore-workspace",
 		"build:only": "nuxt-module-build build",
 		"build": "pnpm gen:highlightJsLangInfo && nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -73,9 +72,9 @@
 		"//dev:vite": "The module needs to be build, not stubbed, for vite's dev to work.",
 		"dev:vite": "concurrently \"pnpm build\" \"vite --mode development --config vite.config.ts\"",
 		"lint:eslint": "eslint \"{src,tests,playground/app}/**/*.{cjs,js,ts,vue}\" \"*.{cjs,js,ts}\" --max-warnings=0 --report-unused-disable-directives",
-		"lint:commits": "commitlint --from $(git rev-list --max-parents=0 HEAD) --to HEAD --verbose",
+		"lint:commits": "commitlint --from-last-tag --to HEAD --verbose",
 		"lint:imports": "echo not working madge --circular --extensions ts ./src",
-		"lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:imports",
+		"lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:commits && pnpm lint:imports",
 		"lint:types": "vue-tsc --noEmit",
 		"test": "vitest",
 		"test:watch": "vitest --watch",
@@ -123,7 +122,7 @@
 		"@tiptap/extension-underline": "^3.4.2",
 		"@tiptap/pm": "^3.4.2",
 		"@tiptap/vue-3": "^3.4.2",
-		"@witchcraft/ui": "^0.3.0",
+		"@witchcraft/ui": "^0.3.2",
 		"tailwindcss": "^4.0.0",
 		"vue": "^3.2.47"
 	},
@@ -148,7 +147,7 @@
 		"@fortawesome/free-solid-svg-icons": "^7.0.1",
 		"@nuxt/eslint-config": "^1.9.0",
 		"@witchcraft/nuxt-utils": "^0.3.2",
-		"@witchcraft/ui": "^0.3.0",
+		"@witchcraft/ui": "^0.3.2",
 		"colord": "^2.9.3",
 		"defu": "^6.1.4",
 		"highlight.js": "^11.11.1",
@@ -182,7 +181,7 @@
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@vitest/browser": "^3.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
-		"@witchcraft/ui": "^0.3.0",
+		"@witchcraft/ui": "^0.3.2",
 		"concurrently": "^9.2.1",
 		"cross-env": "^10.0.0",
 		"eslint": "^9.35.0",

package/src/runtime/pm/features/EmbeddedDocument/components/EmbeddedDocumentPicker.vue

@@ -93,14 +93,12 @@
 		</div>
 	</div>
 	<div class="flex flex-row no-wrap gap-2 justify-end">
-		<!-- @vue-expect-error -->
 		<WButton
 			color="danger"
 			@click="emit('cancel')"
 		>
 			Cancel
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			color="ok"
 			@click="submit"

package/src/runtime/pm/features/EmbeddedDocument/components/EmbeddedNodeView.vue

@@ -41,7 +41,6 @@
 			>
 				Blank Embed
 			</div>
-			<!-- @vue-expect-error -->
 			<WButton
 				v-if="editor?.isEditable"
 				title="Change embed link."
@@ -50,7 +49,6 @@
 			>
 				<WIcon><i-fa-solid-link class="w-[0.7rem]"/></WIcon>
 			</WButton>
-			<!-- @vue-expect-error -->
 			<WPopup
 				:use-backdrop="true"
 				:preferred-horizontal="['center-screen']"

package/src/runtime/pm/features/Iframe/components/IframeNodeView.vue

@@ -28,21 +28,18 @@
 			transition-opacity
 		"
 	>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="deleteNode();editor.commands.focus()"
 		>
 			<WIcon><i-fa-solid-trash/></WIcon>
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="copy(node.attrs.src)"
 		>
 			<WIcon><i-fa-solid-copy/></WIcon>
 		</WButton>
-		<!-- @vue-expect-error -->
 		<WButton
 			:border="false"
 			@click="openLink"

package/src/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -56,7 +56,6 @@
 			@remove="emit('remove')"
 		/>
 		<div class="flex flex-nowrap flex-row gap-1 justify-start border border-transparent">
-			<!-- @vue-expect-error -->
 			<WButton
 				v-if="linkHref"
 				:border="false"

package/src/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -7,7 +7,6 @@
 	ref="el"
 >
 	<div class="flex flex-nowrap flex-row gap-1 items-center">
-		<!-- @vue-expect-error -->
 		<WLabel
 			id="menu-link-input"
 			title="Internal Link"
@@ -42,8 +41,7 @@
 		ref="suggestionsComponent"
 		v-model="linkText"
 		v-model:input-value="inputValue"
-		v-model:is-open="isOpen"
-		v-model:active-suggestion="activeSuggestion"
+		v-model:open="isOpen"
 		@submit="submitHandler"
 	/>
 </div>
@@ -82,7 +80,6 @@ const linkText = defineModel<string>("linkText", { required: true })
 const inputValue = defineModel<string>("tempLinkTextValue", { default: "" })
 const canOpen = ref(false)
 const isOpen = ref(false)
-const activeSuggestion = ref(-1)
 const el = ref<HTMLElement | null>(null)
 const suggestionsComponent = ref<ComponentExposed<typeof WSuggestions>>()
 

package/src/runtime/pm/features/Link/components/BubbleMenuLinkActions.vue

@@ -1,6 +1,5 @@
 <template>
 <div class="flex flex-nowrap flex-row gap-1 border border-transparent">
-	<!-- @vue-expect-error -->
 	<WButton
 		:border="false"
 		:disabled="!isChanged"
@@ -16,7 +15,6 @@
 			<i-fa-solid-plus/>
 		</WIcon>
 	</WButton>
-	<!-- @vue-expect-error -->
 	<WButton
 		v-if="linkHref"
 		:border="false"
@@ -27,7 +25,6 @@
 	>
 		<WIcon><i-fa-solid-copy class="w-[1.25em]"/></WIcon>
 	</WButton>
-	<!-- @vue-expect-error -->
 	<WButton
 		v-if="linkMark"
 		:border="false"

package/src/runtime/pm/features/Menus/components/MarkMenuManager.vue

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error -->
 <WPopup
 	:model-value="!!activeMarkMenu"
 	:preferred-horizontal="['center-most']"