@witchcraft/editor 0.0.5 → 0.0.7

package/dist/runtime/pm/features/Blocks/utils/createItemMenuCommandExecuter.js

@@ -0,0 +1,24 @@
+import { castType } from "@alanscodelog/utils/castType";
+import { unreachable } from "@alanscodelog/utils/unreachable";
+export function createItemMenuCommandExecuter(getBlockId) {
+  return function itemMenuCommandExecuter(item, editor) {
+    const blockId = getBlockId();
+    if (blockId === void 0) {
+      console.warn("No blockId found, this is probably a bug.");
+      return;
+    }
+    if (item.type === "command") {
+      const blockEl = editor.view.dom.querySelector(`li[blockid='${blockId}']`);
+      const blockPos = editor.view.posAtDOM(blockEl, 0);
+      if (blockId !== void 0 && blockPos <= -1) unreachable();
+      const args = typeof item.args === "function" ? item.args(editor, { blockId, blockPos, contentPos: blockPos + 1 }) : item.args?.map(
+        (arg) => arg === "$blockId" ? blockId : arg === "$blockPos" ? blockPos : arg === "$contentPos" ? blockPos + 1 : arg
+      ) ?? [];
+      editor.commands.command(({ commands }) => {
+        castType(item);
+        commands[item.command](...args);
+        return true;
+      });
+    }
+  };
+}

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

@@ -0,0 +1,4 @@
+import type { NodeType } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+/** Ensures no block ids are missing, duplicated, or invalid. If no id length is given, any id length is valid. */
+export declare function fixBlockIds(tr: Transaction, type: NodeType, idLength: number, allowOtherIdLengths?: boolean): Transaction;

package/dist/runtime/pm/features/Blocks/utils/fixBlockIds.js

@@ -0,0 +1,23 @@
+import { nanoid } from "nanoid";
+import { isValidId } from "./isValidId.js";
+export function fixBlockIds(tr, type, idLength, allowOtherIdLengths = false) {
+  const seen = /* @__PURE__ */ new Set();
+  tr.doc.descendants((node, pos) => {
+    if (node.type === type) {
+      const isValid = isValidId(
+        node.attrs.blockId,
+        allowOtherIdLengths ? void 0 : idLength
+      );
+      if (!isValid || seen.has(node.attrs.blockId)) {
+        const blockId = nanoid(idLength);
+        tr.setNodeAttribute(pos, "blockId", blockId);
+        seen.add(blockId);
+      } else {
+        seen.add(node.attrs.blockId);
+      }
+    }
+  });
+  tr.setMeta("preventClearDocument", true);
+  tr.setMeta("addToHistory", false);
+  return tr;
+}

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

@@ -0,0 +1,2 @@
+export declare const idRegex: RegExp;
+export declare function isValidId(id: string | undefined | null, length?: number): boolean;

package/dist/runtime/pm/features/Blocks/utils/isValidId.js

@@ -0,0 +1,7 @@
+export const idRegex = /^[\w-]+$/;
+export function isValidId(id, length) {
+  if (id === void 0 || id === null || length !== void 0 && id.length !== length || !idRegex.test(id)) {
+    return false;
+  }
+  return true;
+}

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

@@ -0,0 +1,16 @@
+export declare const lowlightInstance: {
+    highlight: (language: string, value: string, options?: Readonly<import("lowlight").Options> | null | undefined) => import("hast").Root;
+    highlightAuto: (value: string, options?: Readonly<import("lowlight").AutoOptions> | null | undefined) => import("hast").Root;
+    listLanguages: () => Array<string>;
+    register: {
+        (grammars: Readonly<Record<string, import("highlight.js").LanguageFn>>): undefined;
+        (name: string, grammar: import("highlight.js").LanguageFn): undefined;
+    };
+    registerAlias: {
+        (aliases: Readonly<Record<string, ReadonlyArray<string> | string>>): undefined;
+        (language: string, alias: ReadonlyArray<string> | string): undefined;
+    };
+    registered: (aliasOrName: string) => boolean;
+};
+export declare const CodeBlock: import("@tiptap/core").Node<import("@tiptap/extension-code-block-lowlight", { with: { "resolution-mode": "require" } }).CodeBlockLowlightOptions, any>;
+export type NodeCodeBlockName = "codeBlock";

package/dist/runtime/pm/features/CodeBlock/CodeBlock.js

@@ -0,0 +1,91 @@
+import { CodeBlockLowlight as TipTapCodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+import { mergeAttributes, VueNodeViewRenderer } from "@tiptap/vue-3";
+import { createLowlight } from "lowlight";
+import { codeBlockEnterOrSplit } from "./commands/codeBlockEnterOrSplit.js";
+import { codeBlockIndent } from "./commands/codeBlockIndent.js";
+import { codeBlockUnindent } from "./commands/codeBlockUnindent.js";
+import { focusCodeBlockLanguage } from "./commands/focusCodeBlockLanguage.js";
+import CodeBlockView from "./components/CodeBlockView.vue";
+export const lowlightInstance = createLowlight();
+export const CodeBlock = TipTapCodeBlockLowlight.extend({
+  name: "codeBlock",
+  group: "block",
+  marks: "",
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      defaultLanguage: null,
+      lowlight: lowlightInstance
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      language: {
+        default: ""
+      },
+      loading: {
+        default: true
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        // pre > code not working?
+        tag: "pre",
+        preserveWhitespace: "full",
+        getAttrs: (node) => {
+          const child = node.children[0];
+          if (!child) return false;
+          const language = child.getAttribute("language");
+          if (language) {
+            return { language };
+          }
+          const match = Array.from(node.classList).find((_) => _.startsWith("language-"));
+          if (match) {
+            return {
+              language: match.slice("language-".length)
+            };
+          }
+          return false;
+        }
+      }
+    ];
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  renderHTML({ node, HTMLAttributes }) {
+    const classes = node.attrs.language ? this.options.languageClassPrefix + node.attrs.language : "";
+    return [
+      "pre",
+      [
+        "code",
+        mergeAttributes(
+          this.options.HTMLAttributes,
+          { language: node.attrs.language },
+          HTMLAttributes,
+          {
+            class: `${classes} ${HTMLAttributes?.class ?? this.options.HTMLAttributes?.class ?? ""}`
+          }
+        ),
+        0
+      ]
+    ];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(CodeBlockView);
+  },
+  addCommands() {
+    const self = this;
+    return {
+      ...self?.parent?.(),
+      codeBlockEnterOrSplit: codeBlockEnterOrSplit(this.name),
+      focusCodeBlockLanguage: focusCodeBlockLanguage(this.name),
+      codeBlockIndent: codeBlockIndent(this.name),
+      codeBlockUnindent: codeBlockUnindent(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {};
+  }
+});

package/dist/runtime/pm/features/CodeBlock/build/generateHighlightJsInfo.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/pm/features/CodeBlock/build/generateHighlightJsInfo.js

@@ -0,0 +1,63 @@
+import { crop } from "@alanscodelog/utils"
+// this import registers all languages
+import hljs from "highlight.js"
+import fs from "node:fs"
+import path from "node:path"
+
+const list = Object.fromEntries(hljs.listLanguages()
+	.map(lang => [
+		lang,
+		{
+			aliases: hljs.getLanguage(lang).aliases
+		}
+	]))
+
+if (list.length === 0) {
+	throw new Error("No languages found, something is wrong with the import.")
+}
+
+const fileContents = crop`
+/* eslint-disable */
+import { keys } from "@alanscodelog/utils/keys"
+
+/**
+ * This is an auto-generated file.
+ *
+ * Do not edit manually.
+ *
+ * See build/utils/generateHighlightJsInfo.js
+ */
+
+type LanguageState = Record<string, { loaded: boolean, aliases: string[] }>
+
+export type HighlightJsLanguageInfo = {
+	languages: LanguageState
+	aliases: Record<string, string>
+}
+
+const rawLanguages: Record<string, Partial<LanguageState[string]>> = ${JSON.stringify(list, null, "\t")}
+
+for (const lang of (keys(rawLanguages as any))) {
+	(rawLanguages as any)[lang].loaded = false
+}
+
+
+export const highlightJsLanaguages: HighlightJsLanguageInfo = {
+	languages: rawLanguages as any,
+	aliases: Object.fromEntries(
+		(keys(rawLanguages)
+			.map(lang =>
+				[
+					...(rawLanguages[lang].aliases?.map(alias => [alias,lang]) ?? []),
+					[lang, lang]
+				]
+			))
+			.flat()
+	)
+}
+`
+const dirPath = path.resolve(import.meta.dirname)
+fs.writeFileSync(
+	path.resolve(dirPath, "../highlightJsInfo.ts"),
+	fileContents
+)

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockEnterOrSplit.d.ts

@@ -0,0 +1,9 @@
+import type { Command } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        codeBlockEnterOrSplit: {
+            codeBlockEnterOrSplit: (pos?: number) => ReturnType;
+        };
+    }
+}
+export declare const codeBlockEnterOrSplit: (codeBlockType: string) => (pos?: number) => Command;

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockEnterOrSplit.js

@@ -0,0 +1,28 @@
+export const codeBlockEnterOrSplit = (codeBlockType) => (pos) => ({ state, chain, tr }) => {
+  const sel = state.selection.map(tr.doc, tr.mapping);
+  const { $from, $to } = sel;
+  let { empty, from } = sel;
+  if (pos !== void 0) {
+    from = pos;
+    empty = true;
+  }
+  if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+    return false;
+  }
+  const isAtEnd = empty && from === $from.end();
+  const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n");
+  if (isAtEnd && endsWithDoubleNewline) {
+    return chain().command(({ tr: tr2, dispatch }) => {
+      if (dispatch) {
+        tr2.delete(from - 1, $from.pos);
+      }
+      return true;
+    }).splitItem().run();
+  }
+  return chain().command(({ commands }) => {
+    if (!empty) {
+      return commands.deleteSelection();
+    }
+    return true;
+  }).newlineInCode().run();
+};

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockIndent.d.ts

@@ -0,0 +1,9 @@
+import type { Command } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        codeBlockIndent: {
+            codeBlockIndent: () => ReturnType;
+        };
+    }
+}
+export declare const codeBlockIndent: (codeBlockType: string) => () => Command;

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockIndent.js

@@ -0,0 +1,39 @@
+import { TextSelection } from "@tiptap/pm/state";
+export const codeBlockIndent = (codeBlockType) => () => ({ state, tr, dispatch }) => {
+  const { $from, $to, empty, from, to } = state.selection.map(tr.doc, tr.mapping);
+  if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+    return false;
+  }
+  if (!dispatch) return true;
+  if (empty) {
+    tr.insertText("	");
+    return true;
+  }
+  const textContent = $from.parent.textContent;
+  const nodeStart = $from.start();
+  let start = from - nodeStart;
+  let end = to - nodeStart;
+  for (let i = start; i > 0; i--) {
+    if (textContent[i - 1] === "\n") {
+      break;
+    }
+    start--;
+  }
+  for (let j = end; j < textContent.length; j++) {
+    if (textContent[j] === "\n") {
+      break;
+    }
+    end++;
+  }
+  const blockSelection = textContent.slice(start, end);
+  const lines = blockSelection.split("\n");
+  let tabCount = 0;
+  for (let i = 0; i < lines.length; i++) {
+    lines[i] = `	${lines[i]}`;
+    tabCount++;
+  }
+  const content = lines.join("\n");
+  tr.insertText(content, nodeStart + start, nodeStart + end);
+  tr.setSelection(TextSelection.create(tr.doc, from + 1, to + tabCount));
+  return true;
+};

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockUnindent.d.ts

@@ -0,0 +1,9 @@
+import type { Command } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        codeBlockUnindent: {
+            codeBlockUnindent: () => ReturnType;
+        };
+    }
+}
+export declare const codeBlockUnindent: (codeBlockType: string) => () => Command;

package/dist/runtime/pm/features/CodeBlock/commands/codeBlockUnindent.js

@@ -0,0 +1,50 @@
+import { TextSelection } from "@tiptap/pm/state";
+export const codeBlockUnindent = (codeBlockType) => () => ({ state, tr, dispatch }) => {
+  const { $from, $to, from, to } = state.selection.map(tr.doc, tr.mapping);
+  if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+    return false;
+  }
+  if (!dispatch) return true;
+  const textContent = $from.parent.textContent;
+  const nodeStart = $from.start();
+  let start = from - nodeStart;
+  let end = to - nodeStart;
+  const lastCharIsNewline = textContent[end - 1] === "\n";
+  const nextCharIsTab = textContent[end] === "	";
+  for (let i = start; i > 0; i--) {
+    if (textContent[i - 1] === "\n") {
+      break;
+    }
+    start--;
+  }
+  for (let j = end; j < textContent.length; j++) {
+    if (textContent[j] === "\n") {
+      break;
+    }
+    end++;
+  }
+  const blockSelection = textContent.slice(start, end);
+  const lines = blockSelection.split("\n");
+  let tabCount = 0;
+  let firstLineHadTab = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].startsWith("	")) {
+      lines[i] = lines[i].slice(1);
+      tabCount++;
+      if (i === 0) {
+        firstLineHadTab = true;
+      }
+    }
+  }
+  const content = lines.join("\n");
+  tr.insertText(content, nodeStart + start, nodeStart + end);
+  tr.setSelection(TextSelection.create(
+    tr.doc,
+    from - (firstLineHadTab ? 1 : 0),
+    // there's a weird bug? when the cursor ends at a newline (and is technically on that line and block selecting it) and the next char is a tab
+    // where you can't keep unindenting the last line
+    // this grows the selection to workaround it
+    to - tabCount + (lastCharIsNewline && nextCharIsTab ? 1 : 0)
+  ));
+  return true;
+};

package/dist/runtime/pm/features/CodeBlock/commands/focusCodeBlockLanguage.d.ts

@@ -0,0 +1,9 @@
+import type { Command } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        focusCodeBlockLanguage: {
+            focusCodeBlockLanguage: (dir: "up" | "down") => ReturnType;
+        };
+    }
+}
+export declare const focusCodeBlockLanguage: (codeBlockType: string, langPickerClass?: string) => () => Command;

package/dist/runtime/pm/features/CodeBlock/commands/focusCodeBlockLanguage.js

@@ -0,0 +1,27 @@
+import { debugNode } from "../../../utils/internal/debugNode.js";
+function focusInput(domNode, langPickerClass, dispatch) {
+  if (domNode instanceof HTMLElement) {
+    const langPickerEl = domNode.querySelector(`.${langPickerClass}`);
+    if (langPickerEl instanceof HTMLElement) {
+      if (dispatch) {
+        langPickerEl.focus();
+      }
+      return true;
+    }
+  }
+  return false;
+}
+export const focusCodeBlockLanguage = (codeBlockType, langPickerClass = "lang-picker-input") => () => ({ state, tr, view, dispatch }) => {
+  const { from, empty } = state.selection.map(tr.doc, tr.mapping);
+  if (!empty) {
+    return false;
+  }
+  const $node = tr.doc.resolve(from);
+  debugNode($node.node());
+  const isCodeBlock = $node.node()?.type.name === codeBlockType;
+  if (isCodeBlock) {
+    const domNode = view.domAtPos($node.start(-1)).node;
+    return focusInput(domNode, langPickerClass, dispatch);
+  }
+  return false;
+};

package/dist/runtime/pm/features/CodeBlock/components/CodeBlockView.d.vue.ts

@@ -0,0 +1,92 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pm/features/CodeBlock/components/CodeBlockView.vue

@@ -0,0 +1,112 @@
+<template>
+<node-view-wrapper
+	:class="`
+		border
+		border-[var(--pmCodeBlockBgColor)]
+		code-block
+		bg-[var(--pmCodeBlockBgColor)]
+		rounded-sm
+	`"
+	v-extract-root-el="(el) => codeBlockEl = el"
+>
+	<!-- dark class is not added directly to style this because we don't want to style the input, it should match the app theme instead -->
+	<div
+		contenteditable="false"
+		:class="`
+			lang-picker
+			rem-[0.7]
+			${codeBlockThemeIsDark ? `bg-neutral-600` : `bg-neutral-400`}
+		`"
+		ref="codeBlockLangPickerEl"
+	>
+		<!-- and here we only style everything but the suggestions so the input matches the code block background -->
+		<!-- @vue-expect-error -->
+		<WSimpleInput
+			:border="false"
+			wrapper-class="lang-picker-input flex-nowrap z-10"
+			:inner-wrapper-class="`
+				${codeBlockThemeIsDark ? `[&>*:not(.suggestions)]:text-neutral-300` : `[&>*:not(.suggestions)]:text-neutral-700`}
+			`"
+			suggestions-class="max-h-[200px] overflow-y-auto"
+			:suggestions="keys(langsInfo.aliases)"
+			:restrict-to-suggestions="true"
+			:aria-label="`Language:`"
+			:model-value="lang"
+			@blur="lang = lang"
+			@focus="savePosition"
+			@submit="focusCodeBlock"
+		/>
+	</div>
+
+	<!-- @vue-expect-error -->
+	<node-view-content
+		:class="twMerge(
+  `
+			hljs
+			py-1
+			px-2
+			${codeBlockThemeIsDark ? `dark` : ``}
+		`,
+  node.attrs.language ? `language-${node.attrs.language}` : void 0
+)"
+		as="pre"
+		:language="node.attrs.language"
+		:loading="node.attrs.loading"
+	/>
+</node-view-wrapper>
+</template>
+
+<script setup>
+import { keys } from "@alanscodelog/utils/keys";
+import { TextSelection } from "@tiptap/pm/state";
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput";
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl";
+import { twMerge } from "tailwind-merge";
+import { inject, ref, watch } from "vue";
+import { codeBlockThemeIsDarkInjectionKey, langsInfoInjectionKey } from "../types.js";
+const langsInfo = inject(langsInfoInjectionKey, ref({ languages: {}, aliases: {} }));
+const codeBlockThemeIsDark = inject(codeBlockThemeIsDarkInjectionKey, ref(false));
+const props = defineProps(nodeViewProps);
+const lang = ref(props.node.attrs.language ?? "");
+const codeBlockEl = ref(null);
+watch(() => props.node.attrs.language, (val) => {
+  lang.value = val;
+});
+let savedPos;
+function focusCodeBlock(newVal) {
+  if (!codeBlockEl.value) return;
+  props.editor.view.focus();
+  props.editor.commands.command(({ tr, dispatch }) => {
+    const thisNodePos = props.editor.view.posAtDOM(codeBlockEl.value, 0);
+    if (thisNodePos < 0) return false;
+    const $node = tr.doc.resolve(thisNodePos + props.node.nodeSize - 1);
+    if (savedPos) {
+      tr.setSelection(savedPos);
+    } else {
+      const sel = TextSelection.findFrom($node, -1, true);
+      if (!sel) return false;
+      tr.setSelection(sel);
+    }
+    tr.setNodeMarkup($node.start(), void 0, {
+      ...props.node.attrs,
+      language: newVal,
+      loading: true
+    });
+    tr.scrollIntoView();
+    if (dispatch) dispatch(tr);
+    savedPos = void 0;
+    return true;
+  });
+  codeBlockEl.value.querySelector("code")?.focus();
+}
+function savePosition() {
+  if (!codeBlockEl.value) return;
+  const nodePos = props.editor.view.posAtDOM(codeBlockEl.value, 0);
+  const $node = props.editor.state.doc.resolve(nodePos);
+  savedPos = props.editor.state.selection;
+  if (savedPos.from < $node.start() || savedPos.to > $node.end()) {
+    savedPos = void 0;
+  }
+}
+</script>