prosemirror-link-preview 2.0.6

package/README.md

@@ -0,0 +1 @@
+# prosemirror-link-preview

package/dist/addPreviewNode.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from "prosemirror-model";
+export declare const addPreviewNode: (nodes: Schema["spec"]["nodes"]) => import("orderedmap").default<import("prosemirror-model").NodeSpec>;

package/dist/index.d.ts

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

package/dist/index.es.js

@@ -0,0 +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};

package/dist/index.js

@@ -0,0 +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}}});

package/dist/previewNodeView.d.ts

@@ -0,0 +1,9 @@
+import { EditorView } from "prosemirror-view";
+import { Node } from "prosemirror-model";
+export declare const previewNodeView: (node: Node, view: EditorView, getPos: () => number | undefined) => {
+    dom: HTMLDivElement;
+    update: (node: Node) => boolean;
+    selectNode: () => void;
+    deselectNode: () => void;
+    destroy: () => void;
+};

package/dist/previewPlugin.d.ts

@@ -0,0 +1,9 @@
+import { EditorState, Plugin, PluginKey, Transaction } from "prosemirror-state";
+import { Schema } from "prosemirror-model";
+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>;

package/dist/styles/styles.css

@@ -0,0 +1,40 @@
+.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;
+}

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { PreviewPluginState } from "./previewPlugin";
+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) => {
+    id: object;
+    pos: any;
+}[];
+export declare const apply: (tr: Transaction, value: PreviewPluginState) => {
+    id: object;
+    pos: any;
+}[];
+export declare const findPlaceholderYjs: (state: EditorState, id: any) => number | null;
+export declare const findPlaceholder: (state: EditorState, id: any) => number | null;

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "prosemirror-link-preview",
+  "version": "2.0.6",
+  "description": "prosemirror-link-preview adds link preview node to your editor",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs",
+    "format": "eslint src --ext .ts --fix",
+    "prepublishOnly": "npm run build && npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags",
+    "lint": "tsc --noEmit && eslint src --ext .ts",
+    "test": "echo \"no test specified\" && exit 0",
+    "upgrade-interactive": "npm-check --update",
+    "publish:np": "np"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emergence-engineering/prosemirror-link-preview.git"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "author": "Emergence Engineering",
+  "keywords": [
+    "ProseMirror",
+    "preview",
+    "upload"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/emergence-engineering/prosemirror-link-preview/issues"
+  },
+  "homepage": "https://github.com/emergence-engineering/prosemirror-link-preview#readme",
+  "peerDependencies": {
+    "prosemirror-commands": "^1.1.4",
+    "prosemirror-model": "^1.11.0",
+    "prosemirror-state": "^1.3.3",
+    "prosemirror-view": "^1.15.5",
+    "y-prosemirror": "^1.2.1",
+    "yjs": "^13.6.1"
+  },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "prosemirror-model": "^1.11.0",
+    "prosemirror-view": "^1.15.5"
+  },
+  "devDependencies": {
+    "np": "^7.6.2",
+    "npm-check": "^6.0.1",
+    "prettier": "^2.8.1",
+    "rollup": "^3.7.4",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-minification": "^0.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "y-prosemirror": "^1.2.1",
+    "typescript": "^4.9.4"
+  }
+}