prosemirror-link-preview 2.0.7 → 2.0.11

package/README.md

@@ -1,7 +1,14 @@
 # prosemirror-link-preview
 
+![made by Emergence Engineering](https://emergence-engineering.com/ee-logo.svg)
+
+
+[**Made by Emergence-Engineering**](https://emergence-engineering.com/)
+
 ## Features
 
+![feature-gif](https://emergence-engineering.com/link-preview.gif)
+
 The ProseMirror-Link-Preview plugin offers several key features that enhance the user experience while editing:
 
 1. **Dynamic Link Previews**: Whenever a valid URL is pasted into a ProseMirror document, the plugin automatically calls **your callback** function, which is one of the plugin's parameter, which fetches the necessary metadata, and the plugin renders a preview, providing a quick glimpse into the content behind the link.
@@ -12,8 +19,7 @@ The ProseMirror-Link-Preview plugin offers several key features that enhance the
 
 ## How to use?
 
-1. **Installation**: Install the plugin from your preferred package manager. For example, using npm, run the following command:
-   `npm i -S prosemirror-link-preview`
+1. **Installation**: Install the plugin from your preferred package manager. For example, using npm, run the following command: `npm i -S prosemirror-link-preview`
 2. **Import**: Import the plugin into your project. You also need to import some utility functions from the plugin to help with the configuration process.
    ```typescript
    import {
@@ -25,64 +31,33 @@ The ProseMirror-Link-Preview plugin offers several key features that enhance the
      applyYjs, // for yjs users
      createDecorationsYjs, // for yjs users
      findPlaceholderYjs, // for yjs users
+     IDefaultoptions,
    } from "prosemirror-link-preview";
    ```
 3. Import the CSS file for your setup. You can use your custom css to style the preview, here is an example(which is the actual css used by default)
 
-```typescript
-import "prosemirror-link-preview/dist/styles/styles.css";
-```
-
-```css
-.preview-img {
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-  object-position: center;
-}
-.preview-root {
-  border: 1px solid #ccc;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 20rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  align-items: flex-start;
-  justify-content: center;
-  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-  overflow: hidden;
-}
-
-.preview-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #333;
-  padding: 0.5rem;
-}
-
-.preview-description {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #333;
-  padding: 0.5rem 0.5rem 1rem 0.5rem;
-}
-
-.placeholder {
-  width: 1rem;
-  height: 1rem;
-  background: darkgray;
-}
-```
-
-4. Update the image node in the ProseMirror schema to have all the necessary properties with `addPreviewNode`
-
-```typescript
-const mySchema = new Schema({
-  nodes: addPreviewNode(schema.spec.nodes),
-  marks: schema.spec.marks,
-});
-```
+    ```typescript
+    import "prosemirror-link-preview/dist/styles/styles.css";
+    ```
+
+   - basic card structure
+    
+       ```html
+       <div className="preview-root">
+         <div className="preview-image" />
+         <div className="preview-title" />
+         <div className="preview-description" />
+       </div>
+       ```
+
+4. Update nodes in the ProseMirror schema to have all the necessary properties with `addPreviewNode`
+
+    ```typescript
+    const mySchema = new Schema({
+      nodes: addPreviewNode(schema.spec.nodes),
+      marks: schema.spec.marks,
+    });
+    ```
 
 5. Initialize the editor with the plugin
 
@@ -95,7 +70,6 @@ const mySchema = new Schema({
          ySyncPlugin(yXmlFragment),
          yUndoPlugin(),
          previewPlugin(
-           mySchema,
            async (link: string) => {
              const data = await fetch("/api/link-preview", {
                method: "POST",
@@ -111,6 +85,7 @@ const mySchema = new Schema({
            applyYjs,
            createDecorationsYjs,
            findPlaceholderYjs
+           {openLinkOnClick: true} as IDefaultoptions
          ),
        ],
      }),
@@ -119,52 +94,66 @@ const mySchema = new Schema({
 
 6. `previewPlugin` requires 5 parameters:
 
-- `schema`: the ProseMirror schema updated with `addPreviewNode`
-- `fetchLinkPreview`: a function that takes a link and returns a `Promise` that resolves to the link preview data, you can easily do this using next.js API routes
-  or just using `link-preview-js` library on your custom backend
-
-```typescript
-import type { NextApiRequest, NextApiResponse } from "next";
-import Cors from "cors";
-import { getLinkPreview } from "link-preview-js";
-// Initializing the cors middleware
-// You can read more about the available options here: https://github.com/expressjs/cors#configuration-options
-const cors = Cors({
-  methods: ["POST", "GET", "HEAD"],
-});
-// Helper method to wait for a middleware to execute before continuing
-// And to throw an error when an error happens in a middleware
-function runMiddleware(
-  req: NextApiRequest,
-  res: NextApiResponse,
-  fn: Function
-) {
-  return new Promise((resolve, reject) => {
-    fn(req, res, (result: any) => {
-      if (result instanceof Error) {
-        return reject(result);
-      }
-      return resolve(result);
-    });
-  });
-}
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  // Run the middleware
-  await runMiddleware(req, res, cors);
-
-  const { link } = JSON.parse(req.body);
-  console.log({ link });
-
-  const data = await getLinkPreview(link);
-
-  // Rest of the API logic
-  res.json({ data });
-}
-```
-
-- `apply`: import from `prosemirror-link-preview`
-- `createDecorations`: import from `prosemirror-link-preview`
-- `findPlaceholder`: import from `prosemirror-link-preview`
+   - `fetchLinkPreview`: `(link: string) => Promise<{url: string, title: string, description: string, images: string[]}>` a function that takes a link and returns a `Promise` that resolves to the link preview data, you can easily do this using next.js API routes
+     or just using `link-preview-js` library on your custom backend
+
+       ```typescript
+       import type { NextApiRequest, NextApiResponse } from "next";
+       import Cors from "cors";
+       import { getLinkPreview } from "link-preview-js";
+       // Initializing the cors middleware
+       // You can read more about the available options here: https://github.com/expressjs/cors#configuration-options
+       const cors = Cors({
+         methods: ["POST", "GET", "HEAD"],
+       });
+       // Helper method to wait for a middleware to execute before continuing
+       // And to throw an error when an error happens in a middleware
+       function runMiddleware(
+         req: NextApiRequest,
+         res: NextApiResponse,
+         fn: Function
+       ) {
+         return new Promise((resolve, reject) => {
+           fn(req, res, (result: any) => {
+             if (result instanceof Error) {
+               return reject(result);
+             }
+             return resolve(result);
+           });
+         });
+       }
+       export default async function handler(
+         req: NextApiRequest,
+         res: NextApiResponse
+       ) {
+         // Run the middleware
+         await runMiddleware(req, res, cors);
+    
+         const { link } = JSON.parse(req.body);
+         console.log({ link });
+    
+         const data = await getLinkPreview(link);
+    
+         // Rest of the API logic
+         res.json({ data });
+       }
+       ```
+
+   - `apply`: import from `prosemirror-link-preview`
+   - `createDecorations`: import from `prosemirror-link-preview`
+   - `findPlaceholder`: import from `prosemirror-link-preview`
+   - `defaultOptions`:
+       ```typescript
+       export interface IDefaultOptions {
+         openLinkOnClick: boolean; // if true, onClick opens the original link in a new browser tab
+       }
+       ```
+
+## Fetching preview data
+
+**this does not happen automatically**, you need to handle it yourself by providing the `fetchLinkPreview` callback function
+
+- this usually requires a backend using a 3rd party library like `link-preview-js`
+- you can use `linkpreview.net` API endpoint to fetch your preview data from the frontend
+- in case you are using nextjs, you can easily use our example above
+- or any other tool you see fit

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { previewPlugin } from "./previewPlugin";
 export { previewNodeView } from "./previewNodeView";
 export { addPreviewNode } from "./addPreviewNode";
-export { createDecorations, createDecorationsYjs, applyYjs, apply, findPlaceholder, findPlaceholderYjs, } from "./utils";
+export { createDecorations, createDecorationsYjs, applyYjs, apply, findPlaceholder, findPlaceholderYjs, defaultOptions, } from "./utils";
+export { IDefaultOptions } from "./types";

package/dist/index.es.js

@@ -1 +1 @@
-import{PluginKey as t,Plugin as e}from"prosemirror-state";import{Fragment as r,Slice as i}from"prosemirror-model";import{DecorationSet as n,Decoration as o}from"prosemirror-view";import{ySyncPluginKey as s,relativePositionToAbsolutePosition as d,absolutePositionToRelativePosition as l}from"y-prosemirror";const a=(t,e,r)=>{const i=document.createElement("div");i.className="preview-root";const n=document.createElement("img");n.classList.add("preview-img"),n.src=t.attrs.src,n.alt=t.attrs.alt;const o=document.createElement("div");o.classList.add("preview-title"),o.textContent=t.attrs.title;const s=document.createElement("div");s.classList.add("preview-description"),s.textContent=t.attrs.description,i.appendChild(n),i.appendChild(o),i.appendChild(s);const d=i;return{dom:d,update:t=>{const e=d.querySelector("img"),r=d.querySelector(".preview-title"),i=d.querySelector(".preview-description");return!!(e&&r&&i)&&(e.src=t.attrs.src,e.alt=t.attrs.alt,i.textContent=t.attrs.description,r.textContent=t.attrs.title,!0)},selectNode:()=>{const{state:t,dispatch:i}=e;i(t.tr.setMeta("selectedNode",r()))},deselectNode:()=>{const{state:t,dispatch:r}=e;r(t.tr.setMeta("selectedNode",null))},destroy:()=>{d.remove()}}},c=new t("previewPlugin"),p=(t,n,o,s,d)=>new e({key:c,state:{init:()=>[],apply:o},props:{decorations:t=>s(t),transformPasted:(e,o)=>{var s;const l={},{tr:a}=o.state,p=null===(s=e.content.firstChild)||void 0===s?void 0:s.textContent;let u=null;try{u=new URL(p||"").origin,a.selection.empty||a.deleteSelection(),a.setMeta(c,{id:l,pos:a.selection.from,type:"add"}),o.dispatch(a)}catch(t){return e}if(p&&u){n(p).then((e=>{const{title:r,description:i,images:n}=e;if(!(null==n?void 0:n[0])){const e=t.text(p);return void o.dispatch(o.state.tr.replaceSelectionWith(e))}const s={title:r,description:i,src:n[0],alt:r,url:p},a=t.nodes.preview.create(s),u=d(o.state,l);u&&o.dispatch(o.state.tr.replaceWith(u,u,a).setMeta(c,{type:"remove",id:l}))}),(()=>{o.dispatch(a.setMeta(c,{type:"remove",id:l}))}));const e=r.empty;return new i(e,0,0)}return e},nodeViews:{preview:a}}}),u=t=>t.addToEnd("preview",{inline:!0,group:"inline",atom:!1,attrs:{src:{default:null},alt:{default:null},title:{default:null},description:{default:null}},parseDOM:[{tag:"div.preview-root",getAttrs(t){var e,r,i,n;return t instanceof HTMLElement?{src:null===(e=t.querySelector(".preview-img"))||void 0===e?void 0:e.getAttribute("src"),alt:null===(r=t.querySelector(".preview-img"))||void 0===r?void 0:r.getAttribute("alt"),title:null===(i=t.querySelector(".preview-title"))||void 0===i?void 0:i.textContent,description:null===(n=t.querySelector(".preview-description"))||void 0===n?void 0:n.textContent}:{}}}],toDOM:t=>["div",{class:"preview-root"},["img",{class:"preview-img",src:t.attrs.src,alt:t.attrs.alt}],["div",{class:"preview-title"},t.attrs.title],["div",{class:"preview-description"},t.attrs.description]]}),m=t=>{const e=c.getState(t);if(!e)return n.empty;const r=s.getState(t),i=e.map((t=>{const e=d(r.doc,r.type,t.pos,r.binding.mapping),i=document.createElement("placeholder");return"number"==typeof e?o.widget(e,i,{id:t.id}):void 0}));return n.create(t.doc,i.filter((t=>t)))||n.empty},v=t=>{const e=c.getState(t);if(!e)return n.empty;const r=e.map((t=>{const e=document.createElement("placeholder");return"number"==typeof t.pos?o.widget(t.pos,e,{id:t.id}):void 0}));return n.create(t.doc,r.filter((t=>t)))||n.empty},g=(t,e,r,i)=>{const n=t.getMeta(c);if(n&&"add"===n.type){const t=s.getState(i),r=l(n.pos,t.type,t.binding.mapping);return[...e,{id:n.id,pos:r}]}return n&&"remove"===n.type?e.filter((t=>t.id!==n.id)):e},y=(t,e)=>{const r=t.getMeta(c),i=e.map((e=>{const r=t.mapping.map(e.pos);return Object.assign(Object.assign({},e),{pos:r})}));return r&&"add"===r.type?[...i,{id:r.id,pos:r.pos}]:r&&"remove"===r.type?i.filter((t=>t.id!==r.id)):i},f=(t,e)=>{const r=c.getState(t);if(!r)return null;const i=s.getState(t),n=r.find((t=>t.id===e));if(!(null==n?void 0:n.pos))return null;return d(i.doc,i.type,n.pos,i.binding.mapping)},w=(t,e)=>{const r=c.getState(t);if(!r)return null;const i=r.find((t=>t.id===e));return(null==i?void 0:i.pos)||null};export{u as addPreviewNode,y as apply,g as applyYjs,v as createDecorations,m as createDecorationsYjs,w as findPlaceholder,f as findPlaceholderYjs,a as previewNodeView,p as previewPlugin};
+import{PluginKey as t,Plugin as e}from"prosemirror-state";import{Fragment as r,Slice as i}from"prosemirror-model";import{DecorationSet as n,Decoration as o}from"prosemirror-view";import{ySyncPluginKey as s,relativePositionToAbsolutePosition as l,absolutePositionToRelativePosition as d}from"y-prosemirror";const a=(t,e,r,i)=>{const n=document.createElement("div");n.className="preview-root";const o=document.createElement("img");o.classList.add("preview-img"),o.src=t.attrs.src,o.alt=t.attrs.alt;const s=document.createElement("div");s.classList.add("preview-title"),s.textContent=t.attrs.title;const l=document.createElement("div");l.classList.add("preview-description"),l.textContent=t.attrs.description,n.appendChild(o),n.appendChild(s),n.appendChild(l),n.addEventListener("click",(()=>{i.openLinkOnClick&&window.open(t.attrs.url,"_blank")})),n.style.cursor=i.openLinkOnClick?"pointer":"default",o.style.cursor=i.openLinkOnClick?"pointer":"default";const d=n;return{dom:d,update:t=>{const e=d.querySelector("img"),r=d.querySelector(".preview-title"),i=d.querySelector(".preview-description");return!!(e&&r&&i)&&(e.src=t.attrs.src,e.alt=t.attrs.alt,i.textContent=t.attrs.description,r.textContent=t.attrs.title,!0)},selectNode:()=>{const{state:t,dispatch:i}=e;i(t.tr.setMeta("selectedNode",r()))},deselectNode:()=>{const{state:t,dispatch:r}=e;r(t.tr.setMeta("selectedNode",null))},destroy:()=>{d.remove()}}},c=new t("previewPlugin"),p={openLinkOnClick:!0},u=t=>{const e=c.getState(t);if(!e)return n.empty;const r=s.getState(t),i=e.map((t=>{const e=l(r.doc,r.type,t.pos,r.binding.mapping),i=document.createElement("placeholder");return"number"==typeof e?o.widget(e,i,{id:t.id}):void 0}));return n.create(t.doc,i.filter((t=>t)))||n.empty},m=t=>{const e=c.getState(t);if(!e)return n.empty;const r=e.map((t=>{const e=document.createElement("placeholder");return"number"==typeof t.pos?o.widget(t.pos,e,{id:t.id}):void 0}));return n.create(t.doc,r.filter((t=>t)))||n.empty},v=(t,e,r,i)=>{const n=t.getMeta(c);if(n&&"add"===n.type){const t=s.getState(i),r=d(n.pos,t.type,t.binding.mapping);return[...e,{id:n.id,pos:r}]}return n&&"remove"===n.type?e.filter((t=>t.id!==n.id)):e},g=(t,e)=>{const r=t.getMeta(c),i=e.map((e=>{const r=t.mapping.map(e.pos);return Object.assign(Object.assign({},e),{pos:r})}));return r&&"add"===r.type?[...i,{id:r.id,pos:r.pos}]:r&&"remove"===r.type?i.filter((t=>t.id!==r.id)):i},y=(t,e)=>{const r=c.getState(t);if(!r)return null;const i=s.getState(t),n=r.find((t=>t.id===e));if(!(null==n?void 0:n.pos))return null;return l(i.doc,i.type,n.pos,i.binding.mapping)},f=(t,e)=>{const r=c.getState(t);if(!r)return null;const i=r.find((t=>t.id===e));return(null==i?void 0:i.pos)||null},w=(t,n,o,s,l=p)=>new e({key:c,state:{init:()=>[],apply:n},props:{decorations:t=>o(t),transformPasted:(e,n)=>{var o;const l={},{tr:d}=n.state,a=null===(o=e.content.firstChild)||void 0===o?void 0:o.textContent;let p=null;try{p=new URL(a||"").origin,d.selection.empty||d.deleteSelection(),d.setMeta(c,{id:l,pos:d.selection.from,type:"add"}),n.dispatch(d)}catch(t){return e}if(a&&p){t(a).then((t=>{const{title:e,description:r,images:i}=t;if(!(null==i?void 0:i[0])){const t=n.state.schema.text(a);return void n.dispatch(n.state.tr.replaceSelectionWith(t))}const o={title:e,description:r,src:i[0],alt:e,url:a},d=n.state.schema.nodes.preview.create(o),p=s(n.state,l);p&&n.dispatch(n.state.tr.replaceWith(p,p,d).setMeta(c,{type:"remove",id:l}))}),(()=>{n.dispatch(d.setMeta(c,{type:"remove",id:l}))}));const e=r.empty;return new i(e,0,0)}return e},nodeViews:{preview:(t,e,r)=>a(t,e,r,l)}}}),h=t=>t.addToEnd("preview",{inline:!0,group:"inline",atom:!1,attrs:{src:{default:null},alt:{default:null},title:{default:null},description:{default:null},url:{default:null}},parseDOM:[{tag:"div.preview-root",getAttrs(t){var e,r,i,n;return t instanceof HTMLElement?{src:null===(e=t.querySelector(".preview-img"))||void 0===e?void 0:e.getAttribute("src"),alt:null===(r=t.querySelector(".preview-img"))||void 0===r?void 0:r.getAttribute("alt"),title:null===(i=t.querySelector(".preview-title"))||void 0===i?void 0:i.textContent,description:null===(n=t.querySelector(".preview-description"))||void 0===n?void 0:n.textContent}:{}}}],toDOM:t=>["div",{class:"preview-root"},["img",{class:"preview-img",src:t.attrs.src,alt:t.attrs.alt}],["div",{class:"preview-title"},t.attrs.title],["div",{class:"preview-description"},t.attrs.description]]});export{h as addPreviewNode,g as apply,v as applyYjs,m as createDecorations,u as createDecorationsYjs,p as defaultOptions,f as findPlaceholder,y as findPlaceholderYjs,a as previewNodeView,w as previewPlugin};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("prosemirror-state"),t=require("prosemirror-model"),r=require("prosemirror-view"),i=require("y-prosemirror");const o=(e,t,r)=>{const i=document.createElement("div");i.className="preview-root";const o=document.createElement("img");o.classList.add("preview-img"),o.src=e.attrs.src,o.alt=e.attrs.alt;const n=document.createElement("div");n.classList.add("preview-title"),n.textContent=e.attrs.title;const s=document.createElement("div");s.classList.add("preview-description"),s.textContent=e.attrs.description,i.appendChild(o),i.appendChild(n),i.appendChild(s);const a=i;return{dom:a,update:e=>{const t=a.querySelector("img"),r=a.querySelector(".preview-title"),i=a.querySelector(".preview-description");return!!(t&&r&&i)&&(t.src=e.attrs.src,t.alt=e.attrs.alt,i.textContent=e.attrs.description,r.textContent=e.attrs.title,!0)},selectNode:()=>{const{state:e,dispatch:i}=t;i(e.tr.setMeta("selectedNode",r()))},deselectNode:()=>{const{state:e,dispatch:r}=t;r(e.tr.setMeta("selectedNode",null))},destroy:()=>{a.remove()}}},n=new e.PluginKey("previewPlugin");exports.addPreviewNode=e=>e.addToEnd("preview",{inline:!0,group:"inline",atom:!1,attrs:{src:{default:null},alt:{default:null},title:{default:null},description:{default:null}},parseDOM:[{tag:"div.preview-root",getAttrs(e){var t,r,i,o;return e instanceof HTMLElement?{src:null===(t=e.querySelector(".preview-img"))||void 0===t?void 0:t.getAttribute("src"),alt:null===(r=e.querySelector(".preview-img"))||void 0===r?void 0:r.getAttribute("alt"),title:null===(i=e.querySelector(".preview-title"))||void 0===i?void 0:i.textContent,description:null===(o=e.querySelector(".preview-description"))||void 0===o?void 0:o.textContent}:{}}}],toDOM:e=>["div",{class:"preview-root"},["img",{class:"preview-img",src:e.attrs.src,alt:e.attrs.alt}],["div",{class:"preview-title"},e.attrs.title],["div",{class:"preview-description"},e.attrs.description]]}),exports.apply=(e,t)=>{const r=e.getMeta(n),i=t.map((t=>{const r=e.mapping.map(t.pos);return Object.assign(Object.assign({},t),{pos:r})}));return r&&"add"===r.type?[...i,{id:r.id,pos:r.pos}]:r&&"remove"===r.type?i.filter((e=>e.id!==r.id)):i},exports.applyYjs=(e,t,r,o)=>{const s=e.getMeta(n);if(s&&"add"===s.type){const e=i.ySyncPluginKey.getState(o),r=i.absolutePositionToRelativePosition(s.pos,e.type,e.binding.mapping);return[...t,{id:s.id,pos:r}]}return s&&"remove"===s.type?t.filter((e=>e.id!==s.id)):t},exports.createDecorations=e=>{const t=n.getState(e);if(!t)return r.DecorationSet.empty;const i=t.map((e=>{const t=document.createElement("placeholder");return"number"==typeof e.pos?r.Decoration.widget(e.pos,t,{id:e.id}):void 0}));return r.DecorationSet.create(e.doc,i.filter((e=>e)))||r.DecorationSet.empty},exports.createDecorationsYjs=e=>{const t=n.getState(e);if(!t)return r.DecorationSet.empty;const o=i.ySyncPluginKey.getState(e),s=t.map((e=>{const t=i.relativePositionToAbsolutePosition(o.doc,o.type,e.pos,o.binding.mapping),n=document.createElement("placeholder");return"number"==typeof t?r.Decoration.widget(t,n,{id:e.id}):void 0}));return r.DecorationSet.create(e.doc,s.filter((e=>e)))||r.DecorationSet.empty},exports.findPlaceholder=(e,t)=>{const r=n.getState(e);if(!r)return null;const i=r.find((e=>e.id===t));return(null==i?void 0:i.pos)||null},exports.findPlaceholderYjs=(e,t)=>{const r=n.getState(e);if(!r)return null;const o=i.ySyncPluginKey.getState(e),s=r.find((e=>e.id===t));if(!(null==s?void 0:s.pos))return null;return i.relativePositionToAbsolutePosition(o.doc,o.type,s.pos,o.binding.mapping)},exports.previewNodeView=o,exports.previewPlugin=(r,i,s,a,l)=>new e.Plugin({key:n,state:{init:()=>[],apply:s},props:{decorations:e=>a(e),transformPasted:(e,o)=>{var s;const a={},{tr:c}=o.state,d=null===(s=e.content.firstChild)||void 0===s?void 0:s.textContent;let p=null;try{p=new URL(d||"").origin,c.selection.empty||c.deleteSelection(),c.setMeta(n,{id:a,pos:c.selection.from,type:"add"}),o.dispatch(c)}catch(t){return e}if(d&&p){i(d).then((e=>{const{title:t,description:i,images:s}=e;if(!(null==s?void 0:s[0])){const e=r.text(d);return void o.dispatch(o.state.tr.replaceSelectionWith(e))}const c={title:t,description:i,src:s[0],alt:t,url:d},p=r.nodes.preview.create(c),u=l(o.state,a);u&&o.dispatch(o.state.tr.replaceWith(u,u,p).setMeta(n,{type:"remove",id:a}))}),(()=>{o.dispatch(c.setMeta(n,{type:"remove",id:a}))}));const e=t.Fragment.empty;return new t.Slice(e,0,0)}return e},nodeViews:{preview:o}}});
+"use strict";var e=require("prosemirror-state"),t=require("prosemirror-model"),r=require("prosemirror-view"),i=require("y-prosemirror");const o=(e,t,r,i)=>{const o=document.createElement("div");o.className="preview-root";const n=document.createElement("img");n.classList.add("preview-img"),n.src=e.attrs.src,n.alt=e.attrs.alt;const s=document.createElement("div");s.classList.add("preview-title"),s.textContent=e.attrs.title;const l=document.createElement("div");l.classList.add("preview-description"),l.textContent=e.attrs.description,o.appendChild(n),o.appendChild(s),o.appendChild(l),o.addEventListener("click",(()=>{i.openLinkOnClick&&window.open(e.attrs.url,"_blank")})),o.style.cursor=i.openLinkOnClick?"pointer":"default",n.style.cursor=i.openLinkOnClick?"pointer":"default";const a=o;return{dom:a,update:e=>{const t=a.querySelector("img"),r=a.querySelector(".preview-title"),i=a.querySelector(".preview-description");return!!(t&&r&&i)&&(t.src=e.attrs.src,t.alt=e.attrs.alt,i.textContent=e.attrs.description,r.textContent=e.attrs.title,!0)},selectNode:()=>{const{state:e,dispatch:i}=t;i(e.tr.setMeta("selectedNode",r()))},deselectNode:()=>{const{state:e,dispatch:r}=t;r(e.tr.setMeta("selectedNode",null))},destroy:()=>{a.remove()}}},n=new e.PluginKey("previewPlugin"),s={openLinkOnClick:!0};exports.addPreviewNode=e=>e.addToEnd("preview",{inline:!0,group:"inline",atom:!1,attrs:{src:{default:null},alt:{default:null},title:{default:null},description:{default:null},url:{default:null}},parseDOM:[{tag:"div.preview-root",getAttrs(e){var t,r,i,o;return e instanceof HTMLElement?{src:null===(t=e.querySelector(".preview-img"))||void 0===t?void 0:t.getAttribute("src"),alt:null===(r=e.querySelector(".preview-img"))||void 0===r?void 0:r.getAttribute("alt"),title:null===(i=e.querySelector(".preview-title"))||void 0===i?void 0:i.textContent,description:null===(o=e.querySelector(".preview-description"))||void 0===o?void 0:o.textContent}:{}}}],toDOM:e=>["div",{class:"preview-root"},["img",{class:"preview-img",src:e.attrs.src,alt:e.attrs.alt}],["div",{class:"preview-title"},e.attrs.title],["div",{class:"preview-description"},e.attrs.description]]}),exports.apply=(e,t)=>{const r=e.getMeta(n),i=t.map((t=>{const r=e.mapping.map(t.pos);return Object.assign(Object.assign({},t),{pos:r})}));return r&&"add"===r.type?[...i,{id:r.id,pos:r.pos}]:r&&"remove"===r.type?i.filter((e=>e.id!==r.id)):i},exports.applyYjs=(e,t,r,o)=>{const s=e.getMeta(n);if(s&&"add"===s.type){const e=i.ySyncPluginKey.getState(o),r=i.absolutePositionToRelativePosition(s.pos,e.type,e.binding.mapping);return[...t,{id:s.id,pos:r}]}return s&&"remove"===s.type?t.filter((e=>e.id!==s.id)):t},exports.createDecorations=e=>{const t=n.getState(e);if(!t)return r.DecorationSet.empty;const i=t.map((e=>{const t=document.createElement("placeholder");return"number"==typeof e.pos?r.Decoration.widget(e.pos,t,{id:e.id}):void 0}));return r.DecorationSet.create(e.doc,i.filter((e=>e)))||r.DecorationSet.empty},exports.createDecorationsYjs=e=>{const t=n.getState(e);if(!t)return r.DecorationSet.empty;const o=i.ySyncPluginKey.getState(e),s=t.map((e=>{const t=i.relativePositionToAbsolutePosition(o.doc,o.type,e.pos,o.binding.mapping),n=document.createElement("placeholder");return"number"==typeof t?r.Decoration.widget(t,n,{id:e.id}):void 0}));return r.DecorationSet.create(e.doc,s.filter((e=>e)))||r.DecorationSet.empty},exports.defaultOptions=s,exports.findPlaceholder=(e,t)=>{const r=n.getState(e);if(!r)return null;const i=r.find((e=>e.id===t));return(null==i?void 0:i.pos)||null},exports.findPlaceholderYjs=(e,t)=>{const r=n.getState(e);if(!r)return null;const o=i.ySyncPluginKey.getState(e),s=r.find((e=>e.id===t));if(!(null==s?void 0:s.pos))return null;return i.relativePositionToAbsolutePosition(o.doc,o.type,s.pos,o.binding.mapping)},exports.previewNodeView=o,exports.previewPlugin=(r,i,l,a,c=s)=>new e.Plugin({key:n,state:{init:()=>[],apply:i},props:{decorations:e=>l(e),transformPasted:(e,i)=>{var o;const s={},{tr:l}=i.state,c=null===(o=e.content.firstChild)||void 0===o?void 0:o.textContent;let d=null;try{d=new URL(c||"").origin,l.selection.empty||l.deleteSelection(),l.setMeta(n,{id:s,pos:l.selection.from,type:"add"}),i.dispatch(l)}catch(t){return e}if(c&&d){r(c).then((e=>{const{title:t,description:r,images:o}=e;if(!(null==o?void 0:o[0])){const e=i.state.schema.text(c);return void i.dispatch(i.state.tr.replaceSelectionWith(e))}const l={title:t,description:r,src:o[0],alt:t,url:c},d=i.state.schema.nodes.preview.create(l),p=a(i.state,s);p&&i.dispatch(i.state.tr.replaceWith(p,p,d).setMeta(n,{type:"remove",id:s}))}),(()=>{i.dispatch(l.setMeta(n,{type:"remove",id:s}))}));const e=t.Fragment.empty;return new t.Slice(e,0,0)}return e},nodeViews:{preview:(e,t,r)=>o(e,t,r,c)}}});

package/dist/previewNodeView.d.ts

@@ -1,6 +1,7 @@
 import { EditorView } from "prosemirror-view";
 import { Node } from "prosemirror-model";
-export declare const previewNodeView: (node: Node, view: EditorView, getPos: () => number | undefined) => {
+import { IDefaultOptions } from "./types";
+export declare const previewNodeView: (node: Node, view: EditorView, getPos: () => number | undefined, options: IDefaultOptions) => {
     dom: HTMLDivElement;
     update: (node: Node) => boolean;
     selectNode: () => void;

package/dist/previewPlugin.d.ts

@@ -1,9 +1,4 @@
-import { EditorState, Plugin, PluginKey, Transaction } from "prosemirror-state";
-import { Schema } from "prosemirror-model";
+import { EditorState, Plugin, Transaction } from "prosemirror-state";
 import { DecorationSet } from "prosemirror-view";
-export type PreviewPluginState = {
-    pos: number;
-    id: object;
-}[];
-export declare const previewPluginKey: PluginKey<PreviewPluginState>;
-export declare const previewPlugin: (schema: Schema, callback: (url: string) => Promise<any>, apply: (tr: Transaction, value: PreviewPluginState, oldState: EditorState, newState: EditorState) => PreviewPluginState, createDecorations: (state: EditorState) => DecorationSet, findPlaceholder: (state: EditorState, id: object) => number | null) => Plugin<PreviewPluginState>;
+import { PreviewPluginState } from "./types";
+export declare const previewPlugin: (callback: (url: string) => Promise<any>, apply: (tr: Transaction, value: PreviewPluginState, oldState: EditorState, newState: EditorState) => PreviewPluginState, createDecorations: (state: EditorState) => DecorationSet, findPlaceholder: (state: EditorState, id: object) => number | null, options?: import("./types").IDefaultOptions) => Plugin<PreviewPluginState>;

package/dist/styles/styles.css

@@ -17,6 +17,7 @@
   justify-content: center;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
   overflow: hidden;
+  user-select: none;
 }
 
 .preview-title {

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+import { PluginKey } from "prosemirror-state";
+export interface IDefaultOptions {
+    openLinkOnClick: boolean;
+}
+export type PreviewPluginState = {
+    pos: number;
+    id: object;
+}[];
+export declare const previewPluginKey: PluginKey<PreviewPluginState>;

package/dist/utils.d.ts

@@ -1,6 +1,7 @@
 import { EditorState, Transaction } from "prosemirror-state";
 import { DecorationSet } from "prosemirror-view";
-import { PreviewPluginState } from "./previewPlugin";
+import { PreviewPluginState, IDefaultOptions } from "./types";
+export declare const defaultOptions: IDefaultOptions;
 export declare const createDecorationsYjs: (state: EditorState) => DecorationSet;
 export declare const createDecorations: (state: EditorState) => DecorationSet;
 export declare const applyYjs: (tr: Transaction, value: PreviewPluginState, oldState: EditorState, newState: EditorState) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-link-preview",
-  "version": "2.0.7",
+  "version": "2.0.11",
   "description": "prosemirror-link-preview adds link preview node to your editor",
   "main": "dist/index.js",
   "module": "dist/index.es.js",