@witchcraft/editor 0.0.1

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

@@ -0,0 +1,66 @@
+import { Extension } from "@tiptap/core";
+import { ySyncPlugin, yUndoPlugin } from "y-prosemirror";
+import * as Y from "yjs";
+type YSyncOpts = Parameters<typeof ySyncPlugin>[1];
+type YUndoOpts = Parameters<typeof yUndoPlugin>[0];
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        collaboration: {
+            /** Sets the fragment to use for the collaboration extension. */
+            setFragment: (fragment: Y.XmlFragment | undefined, options?: {
+                register?: boolean;
+                unregister?: boolean;
+            }) => ReturnType;
+            /** Enables or disables collaboration. */
+            enableCollaboration: (enable: boolean) => ReturnType;
+            /**
+             * Undo recent changes
+             *
+             * @example editor.commands.undo()
+             */
+            undo: () => ReturnType;
+            /**
+             * Reapply reverted changes
+             *
+             * @example editor.commands.redo()
+             */
+            redo: () => ReturnType;
+        };
+    }
+}
+export interface CollaborationStorage {
+    /**
+     * Whether collaboration is currently disabled.
+     * Disabling collaboration will prevent any changes from being synced with other users.
+     */
+    isDisabled: boolean;
+}
+export interface CollaborationOptions {
+    /**
+     * A raw Y.js fragment, can be used instead of `document` and `field`.
+     *
+     * @example new Y.Doc().getXmlFragment('body')
+     */
+    fragment?: Y.XmlFragment | null;
+    /**
+     * Fired when the content from Yjs is initially rendered to Tiptap.
+     */
+    onFirstRender?: () => void;
+    /**
+     * Options for the Yjs sync plugin.
+     */
+    ySyncOptions?: YSyncOpts;
+    /**
+     * Options for the Yjs undo plugin.
+     */
+    yUndoOptions?: YUndoOpts;
+    /** @internal */
+    _destroySyncPlugin?: () => void;
+}
+/**
+ * This extension allows you to collaborate with others in real-time.
+ *
+ * @see https://tiptap.dev/api/extensions/collaboration
+ */
+export declare const Collaboration: Extension<CollaborationOptions, CollaborationStorage>;
+export {};

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

@@ -0,0 +1,169 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import {
+  redo,
+  undo,
+  ySyncPlugin,
+  yUndoPlugin,
+  yUndoPluginKey,
+  yXmlFragmentToProseMirrorRootNode
+} from "y-prosemirror";
+import * as Y from "yjs";
+const ySyncFilterPluginKey = new PluginKey("ySyncFilter");
+function createUndoPlugin(self) {
+  const yUndoPluginInstance = yUndoPlugin(self.options.yUndoOptions);
+  const originalUndoPluginView = yUndoPluginInstance.spec.view;
+  yUndoPluginInstance.spec.view = (view) => {
+    const { undoManager } = yUndoPluginKey.getState(view.state);
+    if (undoManager.restore) {
+      undoManager.restore();
+      undoManager.restore = () => {
+      };
+    }
+    const viewRet = originalUndoPluginView ? originalUndoPluginView(view) : void 0;
+    return {
+      destroy: () => {
+        const hasUndoManSelf = undoManager.trackedOrigins.has(undoManager);
+        const observers = undoManager._observers;
+        undoManager.restore = () => {
+          if (hasUndoManSelf) {
+            undoManager.trackedOrigins.add(undoManager);
+          }
+          undoManager.doc.on("afterTransaction", undoManager.afterTransactionHandler);
+          undoManager._observers = observers;
+        };
+        if (viewRet?.destroy) {
+          viewRet.destroy();
+        }
+      }
+    };
+  };
+  return yUndoPluginInstance;
+}
+function createSyncPlugin(self) {
+  const fragment = self.options.fragment;
+  if (!fragment) {
+    throw new Error("Collaboration requires a fragment.");
+  }
+  const plugin = ySyncPlugin(fragment, {
+    ...self.options.ySyncOptions,
+    onFirstRender: self.options.onFirstRender
+  });
+  let off;
+  function destroy() {
+    off?.();
+  }
+  if (self.editor.options.enableContentCheck) {
+    const onBeforeTransaction = () => {
+      try {
+        yXmlFragmentToProseMirrorRootNode(fragment, self.editor.schema).check();
+      } catch (error) {
+        self.editor.emit("contentError", {
+          error,
+          editor: self.editor,
+          disableCollaboration: () => {
+            fragment.doc?.destroy();
+            self.storage.isDisabled = true;
+          }
+        });
+        return false;
+      }
+      return void 0;
+    };
+    fragment.doc?.on("beforeTransaction", onBeforeTransaction);
+    off = () => {
+      fragment.doc?.off("beforeTransaction", onBeforeTransaction);
+    };
+  }
+  return { plugin, destroy };
+}
+function createSyncFilterPlugin(self) {
+  if (!self.editor.options.enableContentCheck) return;
+  const fragment = self.options.fragment;
+  if (!fragment) {
+    throw new Error("Collaboration requires a fragment.");
+  }
+  return new Plugin({
+    key: ySyncFilterPluginKey,
+    filterTransaction: () => {
+      if (self.storage.isDisabled) {
+        fragment.doc?.destroy();
+        return true;
+      }
+      return true;
+    }
+  });
+}
+function createPlugins(self) {
+  const { plugin: syncPlugin, destroy: destroySyncPlugin } = createSyncPlugin(self);
+  self.options._destroySyncPlugin = destroySyncPlugin;
+  const filterPlugin = createSyncFilterPlugin(self);
+  const plugins = [
+    syncPlugin,
+    createUndoPlugin(self)
+  ];
+  if (filterPlugin) {
+    plugins.push(filterPlugin);
+  }
+  return plugins;
+}
+export const Collaboration = Extension.create({
+  name: "collaboration",
+  priority: 1e3,
+  addOptions() {
+    return {
+      document: null,
+      field: "default",
+      fragment: new Y.Doc().getXmlFragment("prosemirror")
+    };
+  },
+  addStorage() {
+    return {
+      isDisabled: false
+    };
+  },
+  onCreate() {
+    if (this.editor.extensionManager.extensions.find((extension) => extension.name === "history")) {
+      console.warn(
+        '[tiptap warn]: "@tiptap/extension-collaboration" comes with its own history support and is not compatible with "@tiptap/extension-history".'
+      );
+    }
+  },
+  addCommands() {
+    return {
+      enableCollaboration: (enable) => () => {
+        this.storage.isDisabled = !enable;
+        return true;
+      },
+      undo: () => ({ tr, state, dispatch }) => {
+        tr.setMeta("preventDispatch", true);
+        const undoManager = yUndoPluginKey.getState(state).undoManager;
+        if (undoManager.undoStack.length === 0) {
+          return false;
+        }
+        if (!dispatch) {
+          return true;
+        }
+        return undo(state);
+      },
+      redo: () => ({ tr, state, dispatch }) => {
+        tr.setMeta("preventDispatch", true);
+        const undoManager = yUndoPluginKey.getState(state).undoManager;
+        if (undoManager.redoStack.length === 0) {
+          return false;
+        }
+        if (!dispatch) {
+          return true;
+        }
+        return redo(state);
+      }
+    };
+  },
+  onDestroy() {
+    this.options._destroySyncPlugin?.();
+  },
+  addProseMirrorPlugins() {
+    const self = this;
+    return createPlugins(self);
+  }
+});

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

@@ -0,0 +1,19 @@
+import { Extension } from "@tiptap/core";
+import { type CommandBarExtensionOptions } from "./types.js.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        commandBar: {
+            /**
+             * Enables the commandBar.
+             */
+            enableCommandBar: () => ReturnType;
+            /**
+             * Closes the commandBar.
+             *
+             * The commandBar has no close command, it can only be enabled or disabled.
+             */
+            disableCommandBar: () => ReturnType;
+        };
+    }
+}
+export declare const CommandBar: Extension<CommandBarExtensionOptions, any>;

package/dist/runtime/pm/features/CommandsMenus/CommandBar.js

@@ -0,0 +1,97 @@
+import { Extension } from "@tiptap/core";
+import { NodeSelection, Plugin } from "@tiptap/pm/state";
+import { defaultCommandBarMenuItems } from "./commandBarMenuItems.js";
+import { commandBarMenuPluginKey } from "./types.js";
+import { findCommand } from "./utils/findCommand.js";
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js";
+export const CommandBar = Extension.create({
+  name: "commandBar",
+  addOptions() {
+    return {
+      commandBar: defaultCommandBarMenuItems
+    };
+  },
+  addCommands() {
+    return {
+      enableCommandBar: () => ({ tr, dispatch }) => {
+        if (dispatch) {
+          this.options.commandBar.enabled = true;
+          tr.setMeta(commandBarMenuPluginKey, { canOpen: true });
+          tr.setMeta("addToHistory", false);
+        }
+        return true;
+      },
+      disableCommandBar: () => ({ tr, dispatch }) => {
+        if (dispatch) {
+          this.options.commandBar.enabled = false;
+          tr.setMeta(commandBarMenuPluginKey, { canOpen: false });
+          tr.setMeta("addToHistory", false);
+        }
+        return true;
+      }
+    };
+  },
+  onCreate() {
+    if ("registerMenu" in this.editor.commands) {
+      this.editor.commands.registerMenu({
+        type: "mark",
+        closeCommand: void 0,
+        name: "commandBar",
+        pluginKey: commandBarMenuPluginKey,
+        canShow: (_state, pluginState) => !!pluginState?.state && !!pluginState?.canOpen
+      });
+    }
+  },
+  addProseMirrorPlugins() {
+    const self = this;
+    return [
+      new Plugin({
+        key: commandBarMenuPluginKey,
+        state: {
+          init() {
+            return {
+              state: true,
+              canOpen: self.options.commandBar.enabled && (document.activeElement === self.editor.view.dom || self.editor.view.dom.contains(document.activeElement))
+            };
+          },
+          apply: createStateOnlyPluginObjApply(commandBarMenuPluginKey)
+        },
+        props: {
+          handleDOMEvents: {
+            blur() {
+              self.editor.commands.command(({ tr }) => {
+                tr.setMeta("addToHistory", false);
+                tr.setMeta(commandBarMenuPluginKey, { canOpen: false });
+                return true;
+              });
+            },
+            focus() {
+              self.editor.commands.command(({ tr }) => {
+                tr.setMeta("addToHistory", false);
+                tr.setMeta(commandBarMenuPluginKey, { canOpen: true });
+                return true;
+              });
+            }
+          }
+        },
+        appendTransaction(_trs, oldState, newState) {
+          const wasOpened = commandBarMenuPluginKey.getState(oldState)?.state ?? false;
+          const selection = newState.selection;
+          const isNodeSelection = selection instanceof NodeSelection;
+          if (!wasOpened && isNodeSelection) return void 0;
+          const tr = newState.tr;
+          const commandBarCanShow = self.options.commandBar.options?.onlyOpenOnSelection === true ? !selection.empty : true;
+          const canShow = findCommand(self.options.commandBar.commands, (command) => {
+            const res = command.canShow?.(newState);
+            if (res === true || res === void 0) return true;
+            return false;
+          });
+          tr.setMeta(commandBarMenuPluginKey, {
+            state: !isNodeSelection && commandBarCanShow && canShow
+          });
+          return tr;
+        }
+      })
+    ];
+  }
+});

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

@@ -0,0 +1,20 @@
+import type { EditorState } from "@tiptap/pm/state";
+import type { CommandBarCommand, CommandBarMenu } from "./types.js.js";
+export declare const toggleBoldCommand: CommandBarCommand;
+export declare const toggleItalicCommand: CommandBarCommand;
+export declare const toggleStrikeCommand: CommandBarCommand;
+export declare const toggleUnderlineCommand: CommandBarCommand;
+export declare const toggleCodeCommand: CommandBarCommand;
+export declare const toggleSubscriptCommand: CommandBarCommand;
+export declare const toggleSuperscriptCommand: CommandBarCommand;
+export declare const tableCanShow: (state: EditorState) => boolean;
+export declare const tableAddColBeforeCommand: CommandBarCommand;
+export declare const tableAddColAfterCommand: CommandBarCommand;
+export declare const tableAddRowBeforeCommand: CommandBarCommand;
+export declare const tableAddRowAfterCommand: CommandBarCommand;
+export declare const tableDeleteRowCommand: CommandBarCommand;
+export declare const tableDeleteColCommand: CommandBarCommand;
+export declare function createToggleHighlightCommand(slotCount: number, prefix?: string): CommandBarCommand[];
+export declare const toggleHighlightsCommands: CommandBarCommand[];
+export declare const unsetHighlightCommand: CommandBarCommand;
+export declare const defaultCommandBarMenuItems: CommandBarMenu;

package/dist/runtime/pm/features/CommandsMenus/commandBarMenuItems.js

@@ -0,0 +1,188 @@
+import TextIcon from "./components/TextIcon.vue";
+import HighlightIcon from "./icons/HighlightIcon.vue";
+import SubscriptIcon from "./icons/SubscriptIcon.vue";
+import SuperscriptIcon from "./icons/SuperscriptIcon.vue";
+import DashIconsTableColAfter from "~icons/dashicons/table-col-after";
+import DashIconsTableColBefore from "~icons/dashicons/table-col-before";
+import DashIconsTableColDelete from "~icons/dashicons/table-col-delete";
+import DashIconsTableRowAfter from "~icons/dashicons/table-row-after";
+import DashIconsTableRowBefore from "~icons/dashicons/table-row-before";
+import DashIconsTableRowDelete from "~icons/dashicons/table-row-delete";
+export const toggleBoldCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["bold"],
+  title: "Bold",
+  description: "Make the selected text bold.",
+  icon: { props: { class: "font-bold", text: "B" }, component: TextIcon }
+};
+export const toggleItalicCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["italic"],
+  title: "Italic",
+  description: "Make the selected text italic.",
+  icon: { props: { class: "italic", text: "I" }, component: TextIcon }
+};
+export const toggleStrikeCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["strike"],
+  title: "Strike",
+  description: "Strike through the selected text.",
+  icon: { props: { style: "text-decoration:line-through;", text: "S" }, component: TextIcon }
+};
+export const toggleUnderlineCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["underline"],
+  title: "Underline",
+  description: "Underline the selected text.",
+  icon: { props: { class: "underline", text: "U" }, component: TextIcon }
+};
+export const toggleCodeCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["code"],
+  title: "Code",
+  description: "Make the selected text code.",
+  icon: { props: { class: "font-bold", text: "</>" }, component: TextIcon }
+};
+export const toggleSubscriptCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["subscript"],
+  title: "Subscript",
+  description: "Subscript the selected text.",
+  icon: { component: SubscriptIcon }
+};
+export const toggleSuperscriptCommand = {
+  type: "command",
+  command: "toggleMark",
+  args: ["superscript"],
+  title: "Superscript",
+  description: "Superscript the selected text.",
+  icon: { component: SuperscriptIcon }
+};
+export const tableCanShow = (state) => state.selection.$from.node(-1).type.name === "tableCell" && state.selection.$to.node(-1).type.name === "tableCell";
+export const tableAddColBeforeCommand = {
+  type: "command",
+  command: "addColumnBefore",
+  title: "Add column before.",
+  description: "Add a column before the selected column.",
+  icon: { component: DashIconsTableColBefore },
+  canShow: tableCanShow
+};
+export const tableAddColAfterCommand = {
+  type: "command",
+  command: "addColumnAfter",
+  title: "Add column after.",
+  description: "Add a column after the selected column.",
+  icon: { component: DashIconsTableColAfter },
+  canShow: tableCanShow
+};
+export const tableAddRowBeforeCommand = {
+  type: "command",
+  command: "addRowBefore",
+  title: "Add row before.",
+  description: "Add a row before the selected row.",
+  icon: { component: DashIconsTableRowBefore },
+  canShow: tableCanShow
+};
+export const tableAddRowAfterCommand = {
+  type: "command",
+  command: "addRowAfter",
+  title: "Add row after.",
+  description: "Add a row after the selected row.",
+  icon: { component: DashIconsTableRowAfter },
+  canShow: tableCanShow
+};
+export const tableDeleteRowCommand = {
+  type: "command",
+  command: "deleteRow",
+  title: "Delete row.",
+  description: "Delete the selected row.",
+  icon: { component: DashIconsTableRowDelete },
+  canShow: tableCanShow
+};
+export const tableDeleteColCommand = {
+  type: "command",
+  command: "deleteColumn",
+  title: "Delete column.",
+  description: "Delete the selected column.",
+  icon: { component: DashIconsTableColDelete },
+  canShow: tableCanShow
+};
+export function createToggleHighlightCommand(slotCount, prefix = "slot") {
+  return [...Array(slotCount).keys()].map((i) => {
+    const command = {
+      type: "command",
+      command: "toggleHighlight",
+      title: `Highlight Slot ${i + 1}`,
+      description: `Highlight the selected text with color slot ${i + 1}.`,
+      icon: { component: HighlightIcon, props: { colorSlot: prefix + (i + 1) } },
+      args: [prefix + (i + 1)]
+    };
+    return command;
+  });
+}
+export const toggleHighlightsCommands = createToggleHighlightCommand(5);
+export const unsetHighlightCommand = {
+  type: "command",
+  command: "unsetHighlight",
+  title: "Unset Highlight",
+  description: "Unset the highlight mark.",
+  icon: { component: HighlightIcon, props: { colorSlot: void 0 } },
+  args: []
+};
+export const defaultCommandBarMenuItems = {
+  enabled: true,
+  options: {
+    onlyOpenOnSelection: true
+  },
+  commands: [
+    {
+      type: "group",
+      groupType: "inline",
+      title: "Basic",
+      variations: [
+        toggleBoldCommand,
+        toggleItalicCommand,
+        toggleStrikeCommand,
+        toggleUnderlineCommand,
+        toggleCodeCommand
+      ]
+    },
+    {
+      type: "group",
+      groupType: "inline",
+      title: "Highlight",
+      variations: [
+        ...toggleHighlightsCommands,
+        unsetHighlightCommand
+      ]
+    },
+    {
+      type: "group",
+      groupType: "inline",
+      title: "Sub/Sup",
+      variations: [
+        toggleSubscriptCommand,
+        toggleSuperscriptCommand
+      ]
+    },
+    {
+      type: "group",
+      groupType: "inline",
+      title: "Table",
+      variations: [
+        tableAddColBeforeCommand,
+        tableAddColAfterCommand,
+        tableAddRowBeforeCommand,
+        tableAddRowAfterCommand,
+        tableDeleteRowCommand,
+        tableDeleteColCommand
+      ]
+    }
+  ]
+};

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

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+import type { CommandBarCommand, CommandBarGroup } from "../types.js";
+type __VLS_Props = {
+    editor: Editor;
+    commands: (CommandBarCommand | CommandBarGroup)[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,58 @@
+<template>
+<div
+	class="
+	rounded-sm
+	border-neutral-300
+	dark:border-neutral-700
+	border
+	bg-neutral-50
+	dark:bg-neutral-950
+	p-1
+	flex
+	[&>div]:px-1
+	[&>div:last-of-type]:pr-0
+	[&>div]:border-neutral-300
+	[&>div]:dark:border-neutral-700
+	[&>div]:border-r
+	[&>div:last-of-type]:border-r-0
+"
+>
+	<template
+		v-for="item in commands"
+		:key="item.title"
+	>
+		<div
+			v-if="item.type === 'command'"
+		>
+			<CommandBarItem
+				v-if="item.canShow === void 0 || item.canShow(editor.state)"
+				:editor="editor"
+				:item="item"
+			/>
+			<!-- @close="emit('close')" -->
+		</div>
+		<div
+			v-else-if="item.type === 'group' && item.variations.some((subItem2) => subItem2.canShow === void 0 || subItem2.canShow(editor.state))"
+			class="
+				flex
+				gap-1
+			"
+		>
+			<CommandBarItem
+				:item="subItem"
+				:editor="editor"
+				v-for="subItem in item.variations"
+				:key="subItem.title"
+			/>
+		</div>
+	</template>
+</div>
+</template>
+
+<script setup>
+import CommandBarItem from "./CommandBarItem.vue";
+defineProps({
+  editor: { type: null, required: true },
+  commands: { type: Array, required: true }
+});
+</script>

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

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+import type { CommandBarCommand, CommandBarGroup } from "../types.js";
+type __VLS_Props = {
+    editor: Editor;
+    commands: (CommandBarCommand | CommandBarGroup)[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { Editor } from "@tiptap/core";
+import { type CommandBarCommand } from "../types.js.js";
+type __VLS_Props = {
+    item: CommandBarCommand;
+    editor: Editor;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,42 @@
+<template>
+<!-- pointerdown.prevent to prevent close from blurring the editor (in the plugin) -->
+<div
+	class="
+		group/menu-item
+		px-1
+		rounded-xs
+		hover:text-accent-700
+		dark:hover:text-accent-300
+		cursor-pointer
+	"
+	:title="item.type === 'command' ? item.description : item.title"
+	@pointerdown.prevent
+	@click="handleClick"
+>
+	<WIcon class="min-w-[1rem] text-center flex items-center justify-center h-full">
+		<component
+			v-if="item.icon"
+			:is="'component' in item.icon ? item.icon.component : item.icon"
+			v-bind="'props' in item.icon ? { editor, ...item.icon.props } : { editor }"
+		/>
+	</WIcon>
+</div>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import { commandExecuterInjectionKey } from "../types.js";
+import { defaultCommandExecuter } from "../utils/defaultCommandExecutor";
+const props = defineProps({
+  item: { type: null, required: true },
+  editor: { type: null, required: true }
+});
+const emit = defineEmits(["close"]);
+const executer = inject(commandExecuterInjectionKey, defaultCommandExecuter);
+function handleClick() {
+  if (props.item.type === "command") {
+    executer(props.item, props.editor);
+    emit("close");
+  }
+}
+</script>