{"_id":"@emergence-engineering/lexical-link-preview-plugin","_rev":"3-bf12b52df762fbc149d7a2076d77cd0a","name":"@emergence-engineering/lexical-link-preview-plugin","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@emergence-engineering/lexical-link-preview-plugin","version":"0.0.1","keywords":["lexical","link preview","plugin"],"author":{"name":"Emergence Engineering"},"license":"MIT","_id":"@emergence-engineering/lexical-link-preview-plugin@0.0.1","maintainers":[{"name":"cskata","email":"katalin.csillag@emergence-engineering.com"},{"name":"blaisehorvath","email":"balazs.horvath@emergence-engineering.com"},{"name":"matejcsok","email":"istvan.matejcsok@emergence-engineering.com"},{"name":"viktorvacziee","email":"viktor.vaczi@emergence-engineering.com"}],"homepage":"https://github.com/emergence-engineering/lexical-link-preview-plugin","bugs":{"url":"https://github.com/emergence-engineering/lexical-link-preview-plugin/issues"},"dist":{"shasum":"a001a97a25d0a5a7dbac34ead014aa94e6827f68","tarball":"https://registry.npmjs.org/@emergence-engineering/lexical-link-preview-plugin/-/lexical-link-preview-plugin-0.0.1.tgz","fileCount":11,"integrity":"sha512-y2TBdlQJL/b1LzD6AIY6Dj93VTFhTtph55wV9mKFts/6DdhSgDqTuBHVnbZ6Q6AWB0VMIw7CIBlU1//fwB+8kw==","signatures":[{"sig":"MEUCIEBIPN2GYjxsuB9btsD1k1lozjNtqM41R5gvIYXqR+p/AiEAv5UyEsClXdlFGLUR3rZsWhT9irPsPs8nMzaP1hyyRx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29962},"main":"dist/index.js","_from":"file:emergence-engineering-lexical-link-preview-plugin-0.0.1.tgz","types":"dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w --bundleConfigAsCjs","lint":"tsc --noEmit && eslint src --ext .ts","test":"echo no test","build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"cskata","email":"katalin.csillag@emergence-engineering.com"},"_resolved":"/private/var/folders/lk/vvwss55j7s99p49ppyqq7bxm0000gn/T/1a40643faa47dfcd05d4097033ffadc8/emergence-engineering-lexical-link-preview-plugin-0.0.1.tgz","_integrity":"sha512-y2TBdlQJL/b1LzD6AIY6Dj93VTFhTtph55wV9mKFts/6DdhSgDqTuBHVnbZ6Q6AWB0VMIw7CIBlU1//fwB+8kw==","_npmVersion":"9.3.1","description":"A link preview plugin for Lexical editor","directories":{},"_nodeVersion":"18.14.0","dependencies":{"react":"^18.2.0","lexical":"^0.11.3","form-data":"^4.0.0","react-dom":"^18.2.0","css-loader":"^6.7.3","orderedmap":"^2.1.0","typescript":"^5.1.6","@lexical/list":"^0.11.3","@lexical/react":"^0.11.3","@popperjs/core":"^2.11.8","@lexical/selection":"^0.11.3","@textea/json-viewer":"^2.12.0","eslint-config-airbnb":"^19.0.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-sucrase":"^5.0.1","@rollup/plugin-commonjs":"^25.0.4","rollup-plugin-import-css":"^3.2.1","@rollup/plugin-typescript":"^11.1.2","rollup-plugin-peer-deps-external":"^2.2.4"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.1","eslint":"^8.29.0","rollup":"^3.28.0","postcss":"^8.4.20","ts-node":"^10.9.1","prettier":"^2.8.1","npm-check":"^6.0.1","@babel/core":"^7.22.9","@types/node":"^18.11.15","@types/react":"^18.0.26","@types/react-dom":"^18.0.9","@babel/preset-env":"^7.22.9","eslint-config-next":"^13.0.7","rollup-plugin-copy":"^3.4.0","@babel/preset-react":"^7.22.5","eslint-plugin-react":"^7.33.0","rollup-plugin-babel":"^4.4.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","@typescript-eslint/parser":"^6.2.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.1.0","@typescript-eslint/eslint-plugin":"^6.2.0","rollup-plugin-exclude-dependencies-from-bundle":"^1.1.23"},"_npmOperationalInternal":{"tmp":"tmp/lexical-link-preview-plugin_0.0.1_1693387120423_0.584311896819822","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-08-30T09:18:40.281Z","modified":"2026-02-24T10:23:29.254Z","0.0.1":"2023-08-30T09:18:40.624Z"},"bugs":{"url":"https://github.com/emergence-engineering/lexical-link-preview-plugin/issues"},"author":{"name":"Emergence Engineering"},"license":"MIT","homepage":"https://github.com/emergence-engineering/lexical-link-preview-plugin","keywords":["lexical","link preview","plugin"],"description":"A link preview plugin for Lexical editor","maintainers":[{"email":"istvan.matejcsok@emergence-engineering.com","name":"matejcsok"},{"email":"viktor.vaczi@emergence-engineering.com","name":"viktorvacziee"},{"email":"torcsvari.gergo@gmail.com","name":"tg44"},{"email":"katalin.csillag@emergence-engineering.com","name":"cskata"}],"readme":"# lexical-link-preview-plugin\n\n[![made by Emergence Engineering](https://emergence-engineering.com/ee-logo.svg)](https://emergence-engineering.com)\n\n\n[**Made by Emergence-Engineering**](https://emergence-engineering.com/)\n\n## Features\n\nThis easy-to-use plugin for lexical editors enhances the user experience by allowing them to see the page behind the link. \n\nThe plugin takes three properties that allow you to:\n- set whether to display the inserted link as well, next to the preview, \n- choose whether you want to have a close button for the preview, and\n- use **your async callback function** to retrieve metadata from the site \n\nThe plugin applies the data to the preview box and shows you the name, the description and, if available, the image of the website.\nYou can easily customize the preview - use the popular 'card' design, stick to the 'bookmark' style, or create your own - whichever fits better to your UI.\n\n\n## How to use?\n\n1. **Installation**: Install the plugin from your preferred package manager. For example, using npm, run the following command: `npm i -S lexical-link-preview-plugin`\n2. **Import**: Import the node and the plugin into your project. \n```typescript\nimport { LinkPreviewNode, LinkPreviewPlugin } from \"lexical-link-preview-plugin\";\n```\n\n3. Don't forget to include the classname in your theme config:  \n```html\n    theme: {linkPreviewContainer: \"linkPreviewContainer\",}\n```\n\nYou can use your custom css to style the preview, here is an example (which is the actual css used by default)\n\n   - basic card structure\n\n       ```html\n       <BlockWithAlignableContents className={className} nodeKey={nodeKey}>\n            <div className={\"previewBox\"}>\n             <a href={url} target={\"_blank\"}>\n\n                <img className={\"previewImage\"} src={res.images[0]} alt={\"\"} />\n                <div className={\"previewText\"}>\n                    <div className={\"previewTitle\"}>{res.title}</div>\n                    <div className={\"previewDescription\"}>{res.description}</div>\n                </div>\n                {showClosePreview && (\n                    <div\n                      className=\"closePreview\"\n                      onClick={(e) => {\n                        e.preventDefault();\n                        onClose();\n                      }}\n                    >×</div>\n                )}\n            </a>\n           </div>\n        </BlockWithAlignableContents>\n       ```\n\n4. Add the node to the nodes array in your config: LinkPreviewNode\n\n    ```typescript\n    nodes: [LinkPreviewNode,]   \n    ```\n\n5. Initialize the editor with the plugin\n\n   ```typescript\n    import { LinkPreviewNode, LinkPreviewPlugin } from \"lexical-link-preview-react\"\n    \n    const initialconfig = {\n        namespace: \"yourEditor\",\n        theme: {linkPreviewContainer: \"linkPreviewContainer\"},\n        onError,\n        nodes: [LinkPreviewNode]\n    }\n   \n   const fetchingFunction = async (link: string) => {\n          const data = await fetch(\"/api/link-preview\", {\n            method: \"POST\",\n            body: JSON.stringify({\n              link,\n            }),\n          });\n          const {\n            data: { url, title, description, images },\n          } = await data.json();\n          return { url, title, description, images };\n    };\n   \n    const Editor = (): JSX.Element => {\n        return (\n         <LexicalComposer initialConfig={initialConfig}>\n            \n            <LinkPreviewPlugin\n                showLink={false}\n                showClosePreview={false}\n                fetchDataForPreview={fetchingFunction}\n            />\n   \n            <RichTextPlugin\n                contentEditable={<ContentEditable />}\n                placeholder={placeholder}\n                ErrorBoundary={LexicalErrorBoundary}\n            />\n          </LexicalComposer>\n        )\n     }\n   ```\n\n6. `LinkPreviewPlugin` requires 3 parameters:\n\n- `showLink`: takes a boolean value\n    - if true, inserts the link inline and puts the preview to the bottom of the editor\n    - if false, inserts the preview as an inline-block element and nothing else\n\n\n- `showClosePreview`: takes a boolean value - if true, it returns a close button in the upper right corner to close the preview (by default you can close it with the 'delete' or 'backspace' key)\n      \n\n- `fetchDataForPreview`: `(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\n\n    ```typescript\n    import type { NextApiRequest, NextApiResponse } from \"next\";\n    import Cors from \"cors\";\n    import { getLinkPreview } from \"link-preview-js\";\n    // Initializing the cors middleware\n    // You can read more about the available options here: https://github.com/expressjs/cors#configuration-options\n    const cors = Cors({\n      methods: [\"POST\", \"GET\", \"HEAD\"],\n    });\n    // Helper method to wait for a middleware to execute before continuing\n    // And to throw an error when an error happens in a middleware\n    function runMiddleware(\n      req: NextApiRequest,\n      res: NextApiResponse,\n      fn: Function\n    ) {\n      return new Promise((resolve, reject) => {\n        fn(req, res, (result: any) => {\n          if (result instanceof Error) {\n            return reject(result);\n          }\n          return resolve(result);\n        });\n      });\n    }\n    export default async function handler(\n      req: NextApiRequest,\n      res: NextApiResponse\n    ) {\n      // Run the middleware\n      await runMiddleware(req, res, cors);\n    \n      const { link } = JSON.parse(req.body);\n      console.log({ link });\n    \n      const data = await getLinkPreview(link);\n    \n      // Rest of the API logic\n      res.json({ data });\n    }\n    ```\n\n\n   \n\n## Fetching preview data\n\n**this does not happen automatically**, you need to handle it yourself by providing the `fetchDataForPreview` callback function\n\n- this usually requires a backend using a 3rd party library like `link-preview-js`\n- you can use `linkpreview.net` API endpoint to fetch your preview data from the frontend\n- in case you are using nextjs, you can easily use our example above\n- or any other tool you see fit","readmeFilename":"README.md"}