@abraca/nuxt 1.9.1 → 2.0.1

package/dist/runtime/extensions/views/MathBlockView.vue

@@ -0,0 +1,151 @@
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { loadKatex } from "../../utils/loadKatex";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const expression = computed(() => props.node.attrs.expression || "");
+const popoverOpen = ref(false);
+const draft = ref("");
+const katexRef = ref(null);
+watch(popoverOpen, (open) => {
+  if (open) draft.value = expression.value;
+});
+onMounted(async () => {
+  katexRef.value = await loadKatex();
+});
+function render(src) {
+  if (!src) return { html: "", error: "" };
+  if (!katexRef.value) {
+    return { html: "", error: "" };
+  }
+  try {
+    return {
+      html: katexRef.value.renderToString(src, {
+        displayMode: true,
+        throwOnError: false,
+        strict: "ignore"
+      }),
+      error: ""
+    };
+  } catch (err) {
+    return { html: "", error: err instanceof Error ? err.message : String(err) };
+  }
+}
+const rendered = computed(() => render(expression.value));
+const preview = computed(() => render(draft.value));
+function commit() {
+  props.updateAttributes({ expression: draft.value });
+}
+function onKeydown(e) {
+  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    commit();
+    popoverOpen.value = false;
+  }
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+    contenteditable="false"
+  >
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ align: 'center' }"
+    >
+      <button
+        class="w-full rounded-md border border-(--ui-border) bg-(--ui-bg) hover:border-(--ui-border-accented) transition-colors p-4 flex items-center justify-center min-h-[64px]"
+        type="button"
+      >
+        <div
+          v-if="rendered.html"
+          class="overflow-x-auto"
+          v-html="rendered.html"
+        />
+        <div
+          v-else-if="rendered.error"
+          class="text-(--ui-error) font-mono text-sm"
+        >
+          {{ rendered.error }}
+        </div>
+        <pre
+          v-else-if="expression && !katexRef"
+          class="text-(--ui-text-muted) font-mono text-sm m-0 whitespace-pre-wrap"
+        >$$ {{ expression }} $$</pre>
+        <div
+          v-else
+          class="text-(--ui-text-muted) text-sm flex items-center gap-2"
+        >
+          <UIcon
+            name="i-lucide-square-sigma"
+            class="size-5"
+          />
+          Click to add math expression
+        </div>
+      </button>
+      <template #content>
+        <div class="p-2 w-[480px] flex flex-col gap-2">
+          <textarea
+            v-model="draft"
+            autofocus
+            class="p-2 font-mono text-sm bg-(--ui-bg) border border-(--ui-border) rounded-md outline-none focus:border-(--ui-primary) resize-none min-h-[100px]"
+            placeholder="\sum_{i=0}^n i = \frac{n(n+1)}{2}"
+            spellcheck="false"
+            @keydown="onKeydown"
+            @blur="commit"
+          />
+          <div class="rounded-md border border-(--ui-border-muted) bg-(--ui-bg-elevated)/30 p-3 min-h-[80px] flex items-center justify-center overflow-x-auto">
+            <div
+              v-if="preview.html"
+              v-html="preview.html"
+            />
+            <div
+              v-else-if="preview.error"
+              class="text-(--ui-error) font-mono text-xs"
+            >
+              {{ preview.error }}
+            </div>
+            <div
+              v-else-if="!katexRef"
+              class="text-(--ui-text-dimmed) text-xs italic"
+            >
+              KaTeX not installed — install <code class="font-mono">katex</code> to preview.
+            </div>
+            <div
+              v-else
+              class="text-(--ui-text-muted) text-sm"
+            >
+              Preview
+            </div>
+          </div>
+          <div class="text-xs text-(--ui-text-muted) flex items-center justify-between">
+            <span>Tip: ⌘/Ctrl + Enter to save</span>
+            <UButton
+              size="xs"
+              @click="() => {
+  commit();
+  popoverOpen = false;
+}"
+            >
+              Save
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/MathBlockView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/MathInlineView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/MathInlineView.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { loadKatex } from "../../utils/loadKatex";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const expression = computed(() => props.node.attrs.expression || "");
+const popoverOpen = ref(false);
+const draft = ref("");
+const katexRef = ref(null);
+watch(popoverOpen, (open) => {
+  if (open) draft.value = expression.value;
+});
+onMounted(async () => {
+  katexRef.value = await loadKatex();
+});
+function render(src) {
+  if (!src) return { html: "", error: "" };
+  if (!katexRef.value) return { html: "", error: "" };
+  try {
+    return {
+      html: katexRef.value.renderToString(src, {
+        displayMode: false,
+        throwOnError: false,
+        strict: "ignore"
+      }),
+      error: ""
+    };
+  } catch (err) {
+    return { html: "", error: err instanceof Error ? err.message : String(err) };
+  }
+}
+const rendered = computed(() => render(expression.value));
+const preview = computed(() => render(draft.value));
+function commit() {
+  props.updateAttributes({ expression: draft.value });
+}
+function onKeydown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    commit();
+    popoverOpen.value = false;
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    popoverOpen.value = false;
+  }
+}
+function remove() {
+  const pos = props.getPos();
+  if (pos === void 0) return;
+  props.editor.chain().focus().deleteRange({ from: pos, to: pos + 1 }).run();
+  popoverOpen.value = false;
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="span"
+    class="inline"
+  >
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ align: 'start' }"
+    >
+      <button
+        class="inline align-baseline rounded-sm px-1 hover:bg-(--ui-bg-elevated)/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) cursor-pointer"
+        type="button"
+      >
+        <span
+          v-if="rendered.html"
+          v-html="rendered.html"
+        />
+        <span
+          v-else-if="rendered.error"
+          class="text-(--ui-error) font-mono text-sm"
+        >
+          ${{ expression }}$
+        </span>
+        <span
+          v-else-if="expression && !katexRef"
+          class="text-(--ui-text-muted) font-mono text-sm"
+        >
+          ${{ expression }}$
+        </span>
+        <span
+          v-else
+          class="text-(--ui-text-muted) font-mono text-sm italic"
+        >
+          $\text{add}$
+        </span>
+      </button>
+      <template #content>
+        <div class="p-2 w-80 flex flex-col gap-2">
+          <UInput
+            v-model="draft"
+            autofocus
+            size="sm"
+            placeholder="e^{i\pi} + 1 = 0"
+            class="font-mono"
+            @keydown="onKeydown"
+          />
+          <div class="rounded-md border border-(--ui-border-muted) bg-(--ui-bg-elevated)/30 px-3 py-2 min-h-[36px] flex items-center">
+            <span
+              v-if="preview.html"
+              v-html="preview.html"
+            />
+            <span
+              v-else-if="preview.error"
+              class="text-(--ui-error) font-mono text-xs"
+            >
+              {{ preview.error }}
+            </span>
+            <span
+              v-else-if="!katexRef"
+              class="text-(--ui-text-dimmed) text-xs italic"
+            >
+              KaTeX not installed
+            </span>
+            <span
+              v-else
+              class="text-(--ui-text-muted) text-sm"
+            >Preview</span>
+          </div>
+          <UButton
+            size="sm"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-trash"
+            block
+            @click="remove"
+          >
+            Remove
+          </UButton>
+        </div>
+      </template>
+    </UPopover>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/MathInlineView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;