@jvs-milkdown/components 1.1.5 → 1.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present Mirone
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/__internal__/components/image-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-input.d.ts","sourceRoot":"","sources":["../../../src/__internal__/components/image-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AASvD,KAAK,eAAe,GAAG;IACrB,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,UAAU,0SAyJrB,CAAA"}
+{"version":3,"file":"image-input.d.ts","sourceRoot":"","sources":["../../../src/__internal__/components/image-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AASvD,KAAK,eAAe,GAAG;IACrB,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,UAAU,0SA0LrB,CAAA"}

package/lib/image-block/convert-plugin.d.ts

@@ -0,0 +1,2 @@
+export declare const imageBlockConvertPlugin: import("@jvs-milkdown/utils").$Prose;
+//# sourceMappingURL=convert-plugin.d.ts.map

package/lib/image-block/convert-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convert-plugin.d.ts","sourceRoot":"","sources":["../../src/image-block/convert-plugin.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,uBAAuB,sCAmIlC,CAAA"}

package/lib/image-block/index.d.ts

@@ -3,5 +3,7 @@ export * from './schema';
 export * from './remark-plugin';
 export * from './config';
 export * from './view';
+export * from './paste-rule';
+export * from './convert-plugin';
 export declare const imageBlockComponent: MilkdownPlugin[];
 //# sourceMappingURL=index.d.ts.map

package/lib/image-block/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-block/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAOvD,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AAEtB,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAKxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-block/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AASvD,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAEhC,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAOxC,CAAA"}

package/lib/image-block/index.js

@@ -1,30 +1,33 @@
-import { $ctx, $remark, $nodeSchema, $view } from '@jvs-milkdown/utils';
-import { visit } from 'unist-util-visit';
+import { $ctx, $nodeSchema, $prose, $pasteRule, $remark, $view } from '@jvs-milkdown/utils';
+import { imageSchema, paragraphSchema } from '@jvs-milkdown/preset-commonmark';
+import { PluginKey, Plugin } from '@jvs-milkdown/prose/state';
 import { expectDomTypeError } from '@jvs-milkdown/exception';
+import { Slice, Fragment as Fragment$1 } from '@jvs-milkdown/prose/model';
+import { visit } from 'unist-util-visit';
 import DOMPurify from 'dompurify';
-import { h, defineComponent, ref, Fragment as Fragment$1, createApp, watchEffect } from 'vue';
+import { h, defineComponent, ref, Fragment as Fragment$2, createApp, watchEffect } from 'vue';
 import clsx from 'clsx';
 import { customAlphabet } from 'nanoid';
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 function withMeta(plugin, meta) {
   Object.assign(plugin, {
-    meta: __spreadValues$2({
+    meta: __spreadValues$3({
       package: "@jvs-milkdown/components"
     }, meta)
   });
@@ -49,52 +52,19 @@ withMeta(imageBlockConfig, {
   group: "ImageBlock"
 });
 
-function visitImage(ast) {
-  return visit(
-    ast,
-    "paragraph",
-    (node, index, parent) => {
-      var _a, _b;
-      if (((_a = node.children) == null ? void 0 : _a.length) !== 1) return;
-      const firstChild = (_b = node.children) == null ? void 0 : _b[0];
-      if (!firstChild || firstChild.type !== "image") return;
-      const { url, alt, title } = firstChild;
-      const newNode = {
-        type: "image-block",
-        url,
-        alt,
-        title
-      };
-      parent.children.splice(index, 1, newNode);
-    }
-  );
-}
-const remarkImageBlockPlugin = $remark(
-  "remark-image-block",
-  () => () => visitImage
-);
-withMeta(remarkImageBlockPlugin.plugin, {
-  displayName: "Remark<remarkImageBlock>",
-  group: "ImageBlock"
-});
-withMeta(remarkImageBlockPlugin.options, {
-  displayName: "RemarkConfig<remarkImageBlock>",
-  group: "ImageBlock"
-});
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -112,7 +82,8 @@ const imageBlockSchema = $nodeSchema("image-block", () => {
     attrs: {
       src: { default: "", validate: "string" },
       caption: { default: "", validate: "string" },
-      ratio: { default: 1, validate: "number" }
+      ratio: { default: 1, validate: "number" },
+      align: { default: null }
     },
     parseDOM: [
       {
@@ -123,12 +94,25 @@ const imageBlockSchema = $nodeSchema("image-block", () => {
           return {
             src: dom.getAttribute("src") || "",
             caption: dom.getAttribute("caption") || "",
-            ratio: Number((_a = dom.getAttribute("ratio")) != null ? _a : 1)
+            ratio: Number((_a = dom.getAttribute("ratio")) != null ? _a : 1),
+            align: dom.getAttribute("align") || null
+          };
+        }
+      },
+      {
+        tag: "img[src]",
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom);
+          if (dom.getAttribute("data-type") === IMAGE_DATA_TYPE) return false;
+          return {
+            src: dom.getAttribute("src") || "",
+            caption: dom.getAttribute("alt") || dom.getAttribute("title") || "",
+            ratio: 1
           };
         }
       }
     ],
-    toDOM: (node) => ["img", __spreadValues$1({ "data-type": IMAGE_DATA_TYPE }, node.attrs)],
+    toDOM: (node) => ["img", __spreadValues$2({ "data-type": IMAGE_DATA_TYPE }, node.attrs)],
     parseMarkdown: {
       match: ({ type }) => type === "image-block",
       runner: (state, node, type) => {
@@ -162,6 +146,253 @@ withMeta(imageBlockSchema.node, {
   group: "ImageBlock"
 });
 
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const imageBlockConvertPlugin = $prose((ctx) => {
+  const imageType = imageSchema.type(ctx);
+  const imageBlockType = imageBlockSchema.type(ctx);
+  const paragraphType = paragraphSchema.type(ctx);
+  const pluginKey = new PluginKey("MILKDOWN_IMAGE_BLOCK_CONVERT");
+  let uploading = false;
+  return new Plugin({
+    key: pluginKey,
+    appendTransaction(transactions, _oldState, newState) {
+      if (!transactions.some((tr2) => tr2.docChanged)) return null;
+      const replacements = [];
+      newState.doc.descendants((node, pos) => {
+        if (node.type === imageType) ;
+      });
+      newState.doc.descendants((node, pos) => {
+        var _a;
+        if (node.type !== paragraphType) return;
+        const images = [];
+        let hasOtherContent = false;
+        for (let i = 0; i < node.childCount; i++) {
+          const child = node.child(i);
+          if (child.type === imageType) {
+            images.push(child);
+          } else if (child.type.name === "hardbreak") {
+            continue;
+          } else if (child.isText && ((_a = child.text) == null ? void 0 : _a.trim()) === "") {
+            continue;
+          } else {
+            hasOtherContent = true;
+            break;
+          }
+        }
+        if (hasOtherContent || images.length === 0) return;
+        const blocks = images.map(
+          (img) => imageBlockType.create({
+            src: img.attrs.src,
+            caption: img.attrs.alt || img.attrs.title || "",
+            ratio: 1
+          })
+        ).filter(Boolean);
+        if (blocks.length > 0) {
+          replacements.push({ from: pos, to: pos + node.nodeSize, blocks });
+        }
+      });
+      if (replacements.length === 0) return null;
+      const { tr } = newState;
+      for (let i = replacements.length - 1; i >= 0; i--) {
+        const r = replacements[i];
+        tr.replaceWith(r.from, r.to, r.blocks);
+      }
+      return tr;
+    },
+    view() {
+      return {
+        update(view) {
+          if (uploading) return;
+          const config = ctx.get(imageBlockConfig.key);
+          const imagesToUpload = [];
+          view.state.doc.descendants((node, pos) => {
+            if (node.type.name !== "image-block") return;
+            const src = node.attrs.src;
+            if (!src || src.startsWith("data:") || src.startsWith("blob:"))
+              return;
+            if (!/^https?:\/\//i.test(src)) return;
+            imagesToUpload.push({ pos, src });
+          });
+          if (imagesToUpload.length === 0) return;
+          uploading = true;
+          void Promise.allSettled(
+            imagesToUpload.map((_0) => __async(null, [_0], function* ({ pos, src }) {
+              const resp = yield fetch(src);
+              const blob = yield resp.blob();
+              const ext = blob.type.split("/")[1] || "png";
+              const file = new File([blob], `pasted-image.${ext}`, {
+                type: blob.type
+              });
+              const uploadedUrl = yield config.onUpload(file);
+              const $pos = view.state.doc.resolve(pos);
+              const nodeAtPos = $pos.nodeAfter;
+              if (nodeAtPos && nodeAtPos.type.name === "image-block" && nodeAtPos.attrs.src === src) {
+                view.dispatch(
+                  view.state.tr.setNodeMarkup(pos, void 0, __spreadProps(__spreadValues$1({}, nodeAtPos.attrs), {
+                    src: uploadedUrl
+                  })).setMeta(pluginKey, { uploaded: true })
+                );
+              }
+            }))
+          ).finally(() => {
+            uploading = false;
+          });
+        }
+      };
+    }
+  });
+});
+withMeta(imageBlockConvertPlugin, {
+  displayName: "Prose<image-block-convert>",
+  group: "ImageBlock"
+});
+
+function toImageBlock(imageNode, imageBlockType) {
+  return imageBlockType.create({
+    src: imageNode.attrs.src,
+    caption: imageNode.attrs.alt || imageNode.attrs.title || "",
+    ratio: 1
+  });
+}
+const imageBlockPasteRule = $pasteRule((ctx) => ({
+  priority: 90,
+  run: (slice, _view, isPlainText) => {
+    if (isPlainText) return slice;
+    const paragraphType = paragraphSchema.type(ctx);
+    const imageType = imageSchema.type(ctx);
+    const imageBlockType = imageBlockSchema.type(ctx);
+    function convertFragment(fragment2) {
+      const nodes = [];
+      let changed = false;
+      fragment2.forEach((node) => {
+        if (node.type === imageType) {
+          const imageBlock = toImageBlock(node, imageBlockType);
+          if (imageBlock) {
+            nodes.push(imageBlock);
+            changed = true;
+            return;
+          }
+        }
+        if (node.type === paragraphType) {
+          let hasImage = false;
+          node.content.forEach((child) => {
+            if (child.type === imageType) hasImage = true;
+          });
+          if (hasImage) {
+            let currentParaNodes = [];
+            let isFirstInsideParent = nodes.length === 0;
+            node.content.forEach((child) => {
+              if (child.type === imageType) {
+                if (currentParaNodes.length > 0 || isFirstInsideParent) {
+                  nodes.push(node.copy(Fragment$1.from(currentParaNodes)));
+                  currentParaNodes = [];
+                }
+                const imageBlock = toImageBlock(child, imageBlockType);
+                if (imageBlock) {
+                  nodes.push(imageBlock);
+                }
+                isFirstInsideParent = false;
+              } else {
+                currentParaNodes.push(child);
+              }
+            });
+            nodes.push(node.copy(Fragment$1.from(currentParaNodes)));
+            changed = true;
+            return;
+          }
+        }
+        if (node.content.size > 0) {
+          const fixedContent = convertFragment(node.content);
+          if (fixedContent !== node.content) {
+            changed = true;
+            nodes.push(node.copy(fixedContent));
+            return;
+          }
+        }
+        nodes.push(node);
+      });
+      return changed ? Fragment$1.from(nodes) : fragment2;
+    }
+    const fragment = convertFragment(slice.content);
+    return new Slice(fragment, slice.openStart, slice.openEnd);
+  }
+}));
+withMeta(imageBlockPasteRule, {
+  displayName: "PasteRule<image-block>",
+  group: "ImageBlock"
+});
+
+function visitImage(ast) {
+  return visit(
+    ast,
+    "paragraph",
+    (node, index, parent) => {
+      var _a, _b;
+      if (((_a = node.children) == null ? void 0 : _a.length) !== 1) return;
+      const firstChild = (_b = node.children) == null ? void 0 : _b[0];
+      if (!firstChild || firstChild.type !== "image") return;
+      const { url, alt, title } = firstChild;
+      const newNode = {
+        type: "image-block",
+        url,
+        alt,
+        title
+      };
+      parent.children.splice(index, 1, newNode);
+    }
+  );
+}
+const remarkImageBlockPlugin = $remark(
+  "remark-image-block",
+  () => () => visitImage
+);
+withMeta(remarkImageBlockPlugin.plugin, {
+  displayName: "Remark<remarkImageBlock>",
+  group: "ImageBlock"
+});
+withMeta(remarkImageBlockPlugin.options, {
+  displayName: "RemarkConfig<remarkImageBlock>",
+  group: "ImageBlock"
+});
+
 function keepAlive(..._args) {
 }
 
@@ -260,15 +491,28 @@ const ImageInput = defineComponent({
       hidePlaceholder.value = value.length !== 0;
       currentLink.value = value;
     };
+    const isValidUrl = (url) => {
+      if (!url) return false;
+      const trimmedUrl = url.trim();
+      return /^(https?:\/\/|\/|\.\.?\/|data:image\/|blob:|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(trimmedUrl);
+    };
     const onKeydown = (e) => {
-      var _a2, _b2;
+      var _a2, _b2, _c;
       if (e.key === "Enter") {
-        setLink((_b2 = (_a2 = linkInputRef.value) == null ? void 0 : _a2.value) != null ? _b2 : "");
+        const val = (_c = (_b2 = (_a2 = linkInputRef.value) == null ? void 0 : _a2.value) == null ? void 0 : _b2.trim()) != null ? _c : "";
+        e.preventDefault();
+        e.stopPropagation();
+        if (isValidUrl(val)) {
+          setLink(val);
+        }
       }
     };
     const onConfirmLinkInput = () => {
-      var _a2, _b2;
-      setLink((_b2 = (_a2 = linkInputRef.value) == null ? void 0 : _a2.value) != null ? _b2 : "");
+      var _a2, _b2, _c;
+      const val = (_c = (_b2 = (_a2 = linkInputRef.value) == null ? void 0 : _a2.value) == null ? void 0 : _b2.trim()) != null ? _c : "";
+      if (isValidUrl(val)) {
+        setLink(val);
+      }
     };
     const onUploadFile = (e) => {
       var _a2;
@@ -314,7 +558,7 @@ const ImageInput = defineComponent({
       ), /* @__PURE__ */ h("label", { class: "uploader", for: uuid.value }, /* @__PURE__ */ h(Icon, { icon: uploadButton })), /* @__PURE__ */ h("span", { class: "text", onClick: () => {
         var _a2;
         return (_a2 = linkInputRef.value) == null ? void 0 : _a2.focus();
-      } }, uploadPlaceholderText))), currentLink.value && /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h("div", { class: "image-preview" }, /* @__PURE__ */ h(
+      } }, uploadPlaceholderText))), currentLink.value && /* @__PURE__ */ h(Fragment, null, isValidUrl(currentLink.value) && /* @__PURE__ */ h("div", { class: "image-preview" }, /* @__PURE__ */ h(
         "img",
         {
           src: currentLink.value,
@@ -322,12 +566,20 @@ const ImageInput = defineComponent({
           onError: (e) => Promise.resolve(onImageLoadError == null ? void 0 : onImageLoadError(e)).catch(() => {
           })
         }
-      )), /* @__PURE__ */ h("div", { class: "confirm", onClick: () => onConfirmLinkInput() }, /* @__PURE__ */ h(Icon, { icon: confirmButton }))));
+      )), /* @__PURE__ */ h(
+        "div",
+        {
+          class: clsx("confirm", !isValidUrl(currentLink.value) && "disabled"),
+          onClick: () => onConfirmLinkInput(),
+          style: !isValidUrl(currentLink.value) ? { opacity: 0.5, cursor: "not-allowed" } : void 0
+        },
+        /* @__PURE__ */ h(Icon, { icon: confirmButton })
+      )));
     };
   }
 });
 
-keepAlive(h, Fragment$1);
+keepAlive(h, Fragment$2);
 const ImageViewer = defineComponent({
   props: {
     src: {
@@ -342,6 +594,10 @@ const ImageViewer = defineComponent({
       type: Object,
       required: true
     },
+    align: {
+      type: Object,
+      required: true
+    },
     selected: {
       type: Object,
       required: true
@@ -465,7 +721,7 @@ const ImageViewer = defineComponent({
       window.addEventListener("pointerup", onResizeHandlePointerUp);
     };
     return () => {
-      return /* @__PURE__ */ h(Fragment$1, null, /* @__PURE__ */ h("div", { class: "image-wrapper" }, /* @__PURE__ */ h("div", { class: "operation" }, /* @__PURE__ */ h("div", { class: "operation-item", onPointerdown: onToggleCaption }, /* @__PURE__ */ h(Icon, { icon: config.captionIcon }))), /* @__PURE__ */ h(
+      return /* @__PURE__ */ h(Fragment$2, null, /* @__PURE__ */ h("div", { class: "image-wrapper" }, /* @__PURE__ */ h("div", { class: "operation" }, /* @__PURE__ */ h("div", { class: "operation-item", onPointerdown: onToggleCaption }, /* @__PURE__ */ h(Icon, { icon: config.captionIcon }))), /* @__PURE__ */ h(
         "img",
         {
           ref: imageRef,
@@ -538,7 +794,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-keepAlive(h, Fragment$1);
+keepAlive(h, Fragment$2);
 const MilkdownImageBlock = defineComponent({
   props: {
     src: {
@@ -553,6 +809,10 @@ const MilkdownImageBlock = defineComponent({
       type: Object,
       required: true
     },
+    align: {
+      type: Object,
+      required: true
+    },
     selected: {
       type: Object,
       required: true
@@ -603,6 +863,7 @@ const imageBlockView = $view(
       const src = ref(initialNode.attrs.src);
       const caption = ref(initialNode.attrs.caption);
       const ratio = ref(initialNode.attrs.ratio);
+      const align = ref(initialNode.attrs.align);
       const selected = ref(false);
       const readonly = ref(!view.editable);
       const setAttr = (attr, value) => {
@@ -622,6 +883,7 @@ const imageBlockView = $view(
         src,
         caption,
         ratio,
+        align,
         selected,
         readonly,
         setAttr,
@@ -629,6 +891,7 @@ const imageBlockView = $view(
       });
       const dom = document.createElement("div");
       dom.className = "milkdown-image-block";
+      dom.dataset.align = initialNode.attrs.align || "center";
       const disposeSelectedWatcher = watchEffect(() => {
         const isSelected = selected.value;
         if (isSelected) {
@@ -637,6 +900,9 @@ const imageBlockView = $view(
           dom.classList.remove("selected");
         }
       });
+      const disposeAlignWatcher = watchEffect(() => {
+        dom.dataset.align = align.value || "center";
+      });
       const proxyDomURL = config.proxyDomURL;
       const bindAttrs = (node) => {
         if (!proxyDomURL) {
@@ -653,6 +919,7 @@ const imageBlockView = $view(
         }
         ratio.value = node.attrs.ratio;
         caption.value = node.attrs.caption;
+        align.value = node.attrs.align;
         readonly.value = !view.editable;
       };
       bindAttrs(initialNode);
@@ -676,6 +943,7 @@ const imageBlockView = $view(
         },
         destroy: () => {
           disposeSelectedWatcher();
+          disposeAlignWatcher();
           app.unmount();
           dom.remove();
         }
@@ -692,8 +960,10 @@ const imageBlockComponent = [
   remarkImageBlockPlugin,
   imageBlockSchema,
   imageBlockView,
-  imageBlockConfig
+  imageBlockConfig,
+  imageBlockPasteRule,
+  imageBlockConvertPlugin
 ].flat();
 
-export { IMAGE_DATA_TYPE, defaultImageBlockConfig, imageBlockComponent, imageBlockConfig, imageBlockSchema, imageBlockView, remarkImageBlockPlugin };
+export { IMAGE_DATA_TYPE, defaultImageBlockConfig, imageBlockComponent, imageBlockConfig, imageBlockConvertPlugin, imageBlockPasteRule, imageBlockSchema, imageBlockView, remarkImageBlockPlugin };
 //# sourceMappingURL=index.js.map