@witchcraft/editor 0.0.5 → 0.0.6

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

@@ -0,0 +1,24 @@
+import { Extension } from "@tiptap/core";
+import type { EmbeddedDocumentNodeOptions } from "./types.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        embeddedCommandRedirect: {
+            embeddedCommandRedirect: (commandName: string, args: any) => ReturnType;
+        };
+    }
+}
+/**
+    * This is for "internal" use by the embedded editor only.
+    *
+    * It should not be registered by the root editor or the documentApi.
+    *
+    * It provides some additional communication between the embedded editor and the root editor.
+    *
+    * See {@link EmbeddedDocumentNodeOptions.embeddedBlockCommandRedirect} for more info.
+    *
+    * See also {@link redirectFromEmbedded} for creating redirectable commands.
+    *
+    * This extension should always be configured with the root editor and the getPos function from the embedded node view.
+    *
+    */
+export declare const Embedded: Extension<EmbeddedDocumentNodeOptions, any>;

package/dist/runtime/pm/features/EmbeddedDocument/Embedded.js

@@ -0,0 +1,73 @@
+import { Extension } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+export const Embedded = Extension.create({
+  name: "embedded",
+  addOptions() {
+    return {
+      embeddedBlockCommandRedirect: void 0,
+      getPos: void 0,
+      rootEditor: void 0,
+      getEmbedId: void 0
+    };
+  },
+  addCommands() {
+    if (!this.options.rootEditor) {
+      throw new Error("Embedded: Extension must be configured with the root editor.");
+    }
+    if (!this.options.getPos) {
+      throw new Error("Embedded: Extension must be configured with the getPos function.");
+    }
+    if (!this.options.getEmbedId) {
+      throw new Error("Embedded: Extension must be configured with the getEmbedId function.");
+    }
+    const { rootEditor, getPos, getEmbedId } = this.options;
+    return {
+      embeddedCommandRedirect: (commandName, args) => ({ editor, dispatch }) => {
+        const embedId = getEmbedId();
+        const nodePos = getPos();
+        if (this.options.embeddedBlockCommandRedirect) {
+          const res = this.options.embeddedBlockCommandRedirect(commandName, args, { editor, rootEditor, nodePos, embedId, dispatch });
+          if (res !== void 0) return res;
+        }
+        switch (commandName) {
+          case "insertFile":
+            return rootEditor.commands.insertFile(args[0], nodePos);
+          case "splitItem":
+            if (!nodePos) return false;
+            return rootEditor.commands.command(({ tr, commands, state, dispatch: dispatch2 }) => {
+              const from = nodePos;
+              const schema = state.schema;
+              if (schema.nodes.item) {
+                if (!dispatch2) return true;
+                const node = schema.nodes.item.createAndFill();
+                if (!node) return false;
+                tr.insert(from + 1, node);
+                tr.setSelection(TextSelection.create(tr.doc, from + 3));
+                commands.focus();
+                return true;
+              }
+              return false;
+            });
+          case "indentItem":
+            if (!nodePos) return false;
+            return rootEditor.commands.command(() => {
+              rootEditor.commands.indentItem(nodePos);
+              rootEditor.commands.setNodeSelection(nodePos + 2);
+              return true;
+            });
+          case "unindentItem":
+            if (!nodePos) return false;
+            return rootEditor.commands.command(() => {
+              rootEditor.commands.unindentItem(nodePos);
+              rootEditor.commands.setNodeSelection(nodePos - 2);
+              return true;
+            });
+          default:
+            console.warn(`No redirect handler found for command ${commandName}`);
+            break;
+        }
+        return false;
+      }
+    };
+  }
+});

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

@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        embeddedDocument: {};
+    }
+}
+/**
+ * Extension that adds support for embedded documents.
+ *
+ * Must be used with the provided `History` extension instead of the normal one.
+ *
+ * The node view provides `isEmbedded` and `isDeepEmbedded` for any child component instances.
+ *
+ * If using a custom editor wrapper, you will need to:
+ *
+ * - Provide the custom editor wrapper component with the {@link embeddedEditorComponentInjectionKey} injection key. The component should expose the tiptap editor instance with `defineExpose` as the `editor` property.
+ * - Provide the document api by creating an instance of the {@link DocumentApi} class and providing it with the {@link documentApiInjectionKey}.
+ * - Provide a ref to it's document's id with the {@link parentEditorIdInjectionKey} if it's using ids to load documents so that the EmbeddedNodeview can detect circular embeds and avoid rendering them.
+ * - Add the class `editor-is-embedded-block` to the editor wrapper (it must be the immediate parent of view.dom) so commands such as enter can check if they should act differently. See {@link isEmbeddedBlock}.
+ */
+export declare const EmbeddedDocument: Node<HTMLAttributesOptions, any>;
+export type NodeEmbeddedDocumentName = "embeddedDoc";

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

@@ -0,0 +1,70 @@
+import { isBlank } from "@alanscodelog/utils/isBlank";
+import { mergeAttributes, Node } from "@tiptap/core";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import EmbeddedNodeView from "./components/EmbeddedNodeView.vue";
+import { isValidId } from "../Blocks/utils/isValidId.js";
+export const EmbeddedDocument = Node.create({
+  name: "embeddedDoc",
+  group: "block",
+  draggable: false,
+  atom: true,
+  // defining: true,
+  addNodeView() {
+    return VueNodeViewRenderer(EmbeddedNodeView, {
+      stopEvent() {
+        return true;
+      },
+      ignoreMutation() {
+        return true;
+      }
+    });
+  },
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        default: {}
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      embedId: {
+        default: { docId: void 0, blockId: void 0 }
+      }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: `div[type=${this.name}]`,
+      getAttrs: (element) => {
+        const docId = element.getAttribute("embeddocid");
+        if (docId === void 0 || docId === null) {
+          return false;
+        }
+        if (isBlank(docId) || !isValidId(docId)) {
+          return { embedId: { docId: void 0, blockId: void 0 } };
+        }
+        const blockId = element.getAttribute("embedblockid");
+        return {
+          embedId: {
+            docId: isBlank(docId) || !isValidId(docId) ? void 0 : docId,
+            blockId
+          }
+        };
+      }
+    }];
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  renderHTML({ HTMLAttributes }) {
+    const mergedHTMLAttributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+      embeddocid: HTMLAttributes.embedId.docId ?? "",
+      embedblockid: HTMLAttributes.embedId.blockId,
+      type: this.name
+    });
+    delete mergedHTMLAttributes.embedId;
+    return [
+      "div",
+      mergedHTMLAttributes
+    ];
+  }
+});

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

@@ -0,0 +1,14 @@
+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. */
+    isShown: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (embedId: MaybeEmbedId) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((embedId: MaybeEmbedId) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,169 @@
+<template>
+<!-- v-if is to prevent styles from existing/getting applied to other documents when the popup is hidden, and also not having v-if on the editor causes problems with prosemirror -->
+<div
+	v-if="isShown"
+	class="
+		embedded-document-picker
+		w-[calc(100dvw-var(--spacing-20))]
+		max-h-[calc(100dvh-var(--spacing-20))]
+		overflow-auto
+		bg-neutral-100
+		dark:bg-neutral-900
+		p-2
+		rounded-sm
+		flex-1
+		flex
+		flex-col
+		gap-2
+	"
+>
+	<component
+		:is="'style'"
+	>
+		.embedded-document-picker li[blockid="{{ newEmbedId.blockId }}"]:not(:has(li:hover)):after {
+		border-color: rgb(var(--color-accent-500));
+		}
+		.embedded-document-picker li[blockid="{{ newEmbedId.blockId }}"]:has(li:hover):after {
+		border-color: rgb(var(--color-accent-500)/50%);
+		}
+	</component>
+	<!-- @vue-expect-error -->
+	<WSimpleInput
+		placeholder="Change document."
+		suggestions-class="max-h-[200px] overflow-y-auto"
+		:suggestions="searchSuggestions"
+		:suggestion-label="(suggestion) => suggestion.title"
+		:restrict-to-suggestions="false"
+		ref="inputComponent"
+		v-model="searchString"
+		@submit="pickDocId"
+	>
+		<!-- @vue-expect-error -->
+		<template
+			v-if="searchLoading"
+			#right
+		>
+			<WIcon><i-line-md-loading-loop/></WIcon>
+		</template>
+		<!-- @vue-expect-error -->
+		<template #suggestion-item="{ item }">
+			{{ item.title }}
+		</template>
+	</WSimpleInput>
+	<WCheckbox v-model="embedFullDocument">
+		Embed Full Document
+	</WCheckbox>
+	<div
+		v-if="!embedFullDocument && newEmbedId.docId"
+		class="border border-neutral-500 rounded-sm"
+	>
+		<div class="bg-neutral-200 dark:bg-neutral-800 rounded-t-sm p-1">
+			Pick a block to embed:
+		</div>
+		<div
+			class="
+			flex-1
+			[&_li]:after:rounded-sm
+			[&_li]:after:border-2
+			[&_li]:after:border-transparent
+			[&_li]:after:content-['']
+			[&_li]:after:absolute
+			[&_li]:after:inset-[-3px]
+			[&_li]:after:transition-all
+			[&_li]:cursor-pointer
+			[&_li]:after:pointer-events-none
+			[&_li:hover:not(:has(li:hover))]:after:content-['']
+			[&_li:hover:not(:has(li:hover))]:after:border-accent-500
+			[&_li:hover:not(:has(li:hover))]:after:bg-accent-500/30
+			[&_li:hover:not(:has(li:hover))]:after:pointer-events-none
+			[&_li:hover:not(:has(li:hover))]:pointer-events-all
+			[&_a]:pointer-events-none
+			overflow-y-auto
+			p-2
+		"
+			@pointerdown.prevent
+			@pointerup.prevent="pickBlockId"
+		>
+			<!-- @vue-expect-error -->
+			<Editor
+				:is-embedded="true"
+				:doc-id="newEmbedId.docId"
+				:editor-options="{ editable: false }"
+			/>
+		</div>
+	</div>
+	<div class="flex flex-row no-wrap gap-2 justify-end">
+		<WButton
+			color="danger"
+			@click="emit('cancel')"
+		>
+			Cancel
+		</WButton>
+		<WButton
+			color="ok"
+			@click="submit"
+		>
+			Submit
+		</WButton>
+	</div>
+</div>
+</template>
+
+<script setup>
+import WIcon from "@witchcraft/ui/components/Icon";
+import WButton from "@witchcraft/ui/components/LibButton";
+import WCheckbox from "@witchcraft/ui/components/LibCheckbox";
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput";
+import { inject, nextTick, provide, ref, toRef, watch } from "vue";
+import ILineMdLoadingLoop from "~icons/line-md/loading-loop";
+import Editor from "../../../../components/Editor.vue";
+import { documentApiInjectionKey } from "../../DocumentApi/types.js";
+import { isDeepEmbeddedInjectionKey } from "../types.js";
+const props = defineProps({
+  embedId: { type: Object, required: true },
+  isShown: { type: Boolean, required: true }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const embedId = toRef(props, "embedId");
+const newEmbedId = ref({ ...props.embedId });
+const documentApi = inject(documentApiInjectionKey);
+provide(isDeepEmbeddedInjectionKey, true);
+function pickBlockId(e) {
+  const el = e.target;
+  const item = el.closest(".item-content");
+  const id = item?.getAttribute("blockid");
+  if (id) {
+    newEmbedId.value.blockId = id;
+  }
+}
+const justPicked = ref(false);
+const inputComponent = ref(null);
+const searchString = ref("");
+const searchLoading = ref(false);
+const searchSuggestions = ref([]);
+watch(searchString, async (newVal) => {
+  if (justPicked.value) return;
+  searchLoading.value = true;
+  inputComponent.value?.suggestionsComponent?.suggestions.close();
+  searchSuggestions.value = await documentApi.getSuggestions(newVal);
+  inputComponent.value?.suggestionsComponent?.suggestions.open();
+  searchLoading.value = false;
+}, { immediate: true });
+function pickDocId(_val, suggestion) {
+  if (suggestion?.docId) {
+    newEmbedId.value.docId = suggestion.docId;
+    justPicked.value = true;
+    nextTick(() => {
+      justPicked.value = false;
+    });
+  }
+}
+const embedFullDocument = ref(embedId.value.blockId === void 0);
+function submit() {
+  if (embedFullDocument.value) {
+    emit("submit", { ...newEmbedId.value, blockId: void 0 });
+  } else {
+    emit("submit", newEmbedId.value);
+  }
+}
+</script>

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

@@ -0,0 +1,14 @@
+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. */
+    isShown: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (embedId: MaybeEmbedId) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((embedId: MaybeEmbedId) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/pm/features/EmbeddedDocument/components/EmbeddedNodeView.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/EmbeddedDocument/components/EmbeddedNodeView.vue

@@ -0,0 +1,170 @@
+<template>
+<!-- @vue-expect-error -->
+<node-view-wrapper
+	:class="`
+		group/embedded-doc
+		relative
+		after:pointer-events-none
+		after:content-['']
+		after:absolute after:inset-0
+		after:border after:border-neutral-500 after:rounded-sm
+		after:drop-shadow-xs
+		focus-within:after:border-accent-500
+		focus:after:border-accent-500
+	`"
+	tabindex="0"
+	v-bind="{
+  ...node.attrs,
+  embedId: void 0,
+  embedDocId: node.attrs.embedId.docId,
+  embedBlockId: node.attrs.embedId.blockId
+}"
+	@pointerdown="setEditorSelection"
+>
+	<div
+		class="text-sm relative"
+		contenteditable="false"
+	>
+		<div
+			class="bg-neutral-100 dark:bg-neutral-900 flex p-1 gap-2 no-wrap justify-between items-center"
+			contenteditable="false"
+		>
+			<div
+				v-if="name"
+				class="pl-1"
+			>
+				File: {{ name }}
+			</div>
+			<div
+				v-else
+				class="pl-1 text-center w-full"
+			>
+				Blank Embed
+			</div>
+			<WButton
+				v-if="editor?.isEditable"
+				title="Change embed link."
+				:border="true"
+				@click="showChangeEmbed = true"
+			>
+				<WIcon><i-fa-solid-link class="w-[0.7rem]"/></WIcon>
+			</WButton>
+			<WPopup
+				:use-backdrop="true"
+				:preferred-horizontal="['center-screen']"
+				:preferred-vertical="['center-screen']"
+				class="backdrop:bg-neutral-900/50 backdrop:dark:bg-neutral-100/50"
+				v-model="showChangeEmbed"
+			>
+				<template #popup="{ extractEl }">
+					<EmbeddedDocumentPicker
+						:is-shown="showChangeEmbed"
+						:embed-id="embedId"
+						v-extract-root-el="extractEl"
+						@submit="pickEmbed"
+						@cancel="showChangeEmbed = false"
+					/>
+				</template>
+				>
+			</WPopup>
+		</div>
+		<Transition>
+			<div
+				v-if="showUndoWarning"
+				class="absolute inset-0 bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 px-2"
+				contenteditable="false"
+			>
+				Warning: Undo applied to document part that is not visible/embedded.
+			</div>
+		</Transition>
+	</div>
+
+	<div v-if="!name"/>
+	<div
+		v-else-if="isEmbeddedTooDeep"
+		class="px-2 text-center"
+		contenteditable="false"
+	>
+		Cannot preview nested content deeper than one level.
+	</div>
+	<div
+		v-else-if="isRecursivelyEmbedded"
+		class="px-2 text-center"
+		contenteditable="false"
+	>
+		Cannot preview recursively embedded content.
+	</div>
+
+	<template
+		v-else-if="content"
+	>
+		<component
+			:is-embedded="true"
+			:content="content"
+			:editor-options="editorOptions"
+			:is="editorComponent"
+			ref="editorWrapper"
+		/>
+	</template>
+	<div
+		v-else
+		class="px-2 text-center"
+	>
+		{{ isLoading ? "Loading..." : "Could not find reference to wanted block." }}
+	</div>
+</node-view-wrapper>
+</template>
+
+<script setup>
+import { nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
+import WIcon from "@witchcraft/ui/components/Icon";
+import WButton from "@witchcraft/ui/components/LibButton";
+import WPopup from "@witchcraft/ui/components/LibPopup";
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl";
+import { computed, inject, ref, watch } from "vue";
+import EmbeddedDocumentPicker from "./EmbeddedDocumentPicker.vue";
+import IFaSolidLink from "~icons/fa-solid/link";
+import Editor from "../../../../components/Editor.vue";
+import { useEmbeddedEditor } from "../composables/useEmbeddedEditor.js";
+import { embeddedEditorComponentInjectionKey } from "../types.js";
+const props = defineProps(nodeViewProps);
+const editorComponent = inject(embeddedEditorComponentInjectionKey, Editor);
+const editorWrapper = ref(null);
+const innerEditor = computed(() => editorWrapper.value?.editor);
+const embedId = computed(() => props.node.attrs.embedId);
+const showChangeEmbed = ref(false);
+function pickEmbed(newEmbedId) {
+  showChangeEmbed.value = false;
+  props.updateAttributes({ ...props.node.attrs, embedId: { ...newEmbedId } });
+}
+function setEditorSelection() {
+  const pos = props.getPos();
+  if (props.editor.state.selection.from !== pos && pos) {
+    props.editor?.commands.setNodeSelection(pos);
+  }
+}
+function autoFocusOnSelection() {
+  if (props.editor.state.selection.from === props.getPos() && document.activeElement !== innerEditor.value?.view.dom) {
+    innerEditor.value?.commands.focus();
+  }
+}
+watch([() => props.editor.state.selection.from, innerEditor], () => {
+  autoFocusOnSelection();
+});
+const {
+  content,
+  // api,
+  isEmbeddedTooDeep,
+  // isEmbeddedBlock,
+  isRecursivelyEmbedded,
+  showUndoWarning,
+  name,
+  isLoading,
+  editorOptions
+} = useEmbeddedEditor(
+  embedId,
+  innerEditor,
+  props.editor,
+  props.getPos
+);
+</script>