@blockslides/extension-drag-handle-vue-3 0.1.0

package/dist/index.js

@@ -0,0 +1,71 @@
+// src/DragHandle.ts
+import {
+  defaultComputePositionConfig,
+  DragHandlePlugin,
+  dragHandlePluginDefaultKey
+} from "@blockslides/extension-drag-handle";
+import { defineComponent, h, onBeforeUnmount, onMounted, ref } from "vue";
+var DragHandle = defineComponent({
+  name: "DragHandleVue",
+  props: {
+    pluginKey: {
+      type: [String, Object],
+      default: dragHandlePluginDefaultKey
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    computePositionConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    onNodeChange: {
+      type: Function,
+      default: null
+    },
+    class: {
+      type: String,
+      default: "drag-handle"
+    }
+  },
+  setup(props, { slots }) {
+    const root = ref(null);
+    onMounted(() => {
+      const { editor, pluginKey, onNodeChange, computePositionConfig } = props;
+      editor.registerPlugin(
+        DragHandlePlugin({
+          editor,
+          element: root.value,
+          pluginKey,
+          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+          onNodeChange
+        }).plugin
+      );
+    });
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return h(
+        "div",
+        {
+          ref: root,
+          class: props.class,
+          style: { visibility: "hidden", position: "absolute" }
+        },
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
+      );
+    };
+  }
+});
+
+// src/index.ts
+var index_default = DragHandle;
+export {
+  DragHandle,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DragHandle.ts","../src/index.ts"],"sourcesContent":["import type { DragHandlePluginProps } from '@blockslides/extension-drag-handle'\nimport {\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n} from '@blockslides/extension-drag-handle'\nimport type { Editor } from '@blockslides/core'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  class?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n}\n\nexport const DragHandle = defineComponent({\n  name: 'DragHandleVue',\n\n  props: {\n    pluginKey: {\n      type: [String, Object] as PropType<DragHandleProps['pluginKey']>,\n      default: dragHandlePluginDefaultKey,\n    },\n\n    editor: {\n      type: Object as PropType<DragHandleProps['editor']>,\n      required: true,\n    },\n\n    computePositionConfig: {\n      type: Object as PropType<DragHandleProps['computePositionConfig']>,\n      default: () => ({}),\n    },\n\n    onNodeChange: {\n      type: Function as PropType<DragHandleProps['onNodeChange']>,\n      default: null,\n    },\n\n    class: {\n      type: String as PropType<DragHandleProps['class']>,\n      default: 'drag-handle',\n    },\n  },\n\n  setup(props, { slots }) {\n    const root = ref<HTMLElement | null>(null)\n\n    onMounted(() => {\n      const { editor, pluginKey, onNodeChange, computePositionConfig } = props\n\n      editor.registerPlugin(\n        DragHandlePlugin({\n          editor,\n          element: root.value as HTMLElement,\n          pluginKey,\n          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n          onNodeChange,\n        }).plugin,\n      )\n    })\n\n    onBeforeUnmount(() => {\n      const { pluginKey, editor } = props\n\n      editor.unregisterPlugin(pluginKey as string)\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n        },\n        slots.default?.(),\n      )\n  },\n})\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB,GAAG,iBAAiB,WAAW,WAAW;AAS7D,IAAM,aAAa,gBAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,OAAO,IAAwB,IAAI;AAEzC,cAAU,MAAM;AACd,YAAM,EAAE,QAAQ,WAAW,cAAc,sBAAsB,IAAI;AAEnE,aAAO;AAAA,QACL,iBAAiB;AAAA,UACf;AAAA,UACA,SAAS,KAAK;AAAA,UACd;AAAA,UACA,uBAAuB,EAAE,GAAG,8BAA8B,GAAG,sBAAsB;AAAA,UACnF;AAAA,QACF,CAAC,EAAE;AAAA,MACL;AAAA,IACF,CAAC;AAED,oBAAgB,MAAM;AACpB,YAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,aAAO,iBAAiB,SAAmB;AAAA,IAC7C,CAAC;AAED,WAAO,MAAG;AAtEd;AAuEM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,QACtD;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AC7ED,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@blockslides/extension-drag-handle-vue-3",
+  "description": "drag handle extension for blockslides with vue 3",
+  "version": "0.1.0",
+  "keywords": [
+    "blockslides",
+    "blockslides extension"
+  ],
+  "author": "keivanmojmali",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keivanmojmali/blockslides",
+    "directory": "packages/extension-drag-handle-vue-3"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@blockslides/extension-drag-handle": "^0.1.0",
+    "@blockslides/pm": "^0.1.0"
+  },
+  "devDependencies": {
+    "vue": "^3.0.0",
+    "@blockslides/extension-drag-handle": "^0.1.0",
+    "@blockslides/pm": "^0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
+  }
+}

package/src/DragHandle.ts

@@ -0,0 +1,82 @@
+import type { DragHandlePluginProps } from '@blockslides/extension-drag-handle'
+import {
+  defaultComputePositionConfig,
+  DragHandlePlugin,
+  dragHandlePluginDefaultKey,
+} from '@blockslides/extension-drag-handle'
+import type { Editor } from '@blockslides/core'
+import type { PropType } from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+  class?: string
+  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void
+}
+
+export const DragHandle = defineComponent({
+  name: 'DragHandleVue',
+
+  props: {
+    pluginKey: {
+      type: [String, Object] as PropType<DragHandleProps['pluginKey']>,
+      default: dragHandlePluginDefaultKey,
+    },
+
+    editor: {
+      type: Object as PropType<DragHandleProps['editor']>,
+      required: true,
+    },
+
+    computePositionConfig: {
+      type: Object as PropType<DragHandleProps['computePositionConfig']>,
+      default: () => ({}),
+    },
+
+    onNodeChange: {
+      type: Function as PropType<DragHandleProps['onNodeChange']>,
+      default: null,
+    },
+
+    class: {
+      type: String as PropType<DragHandleProps['class']>,
+      default: 'drag-handle',
+    },
+  },
+
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const { editor, pluginKey, onNodeChange, computePositionConfig } = props
+
+      editor.registerPlugin(
+        DragHandlePlugin({
+          editor,
+          element: root.value as HTMLElement,
+          pluginKey,
+          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+          onNodeChange,
+        }).plugin,
+      )
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey as string)
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          class: props.class,
+          style: { visibility: 'hidden', position: 'absolute' },
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/index.ts

@@ -0,0 +1,5 @@
+import { DragHandle } from './DragHandle.js'
+
+export * from './DragHandle.js'
+
+export default DragHandle