@blocklet/editor 2.0.81 → 2.0.82

package/lib/ext/BookmarkPlugin/Bookmark.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 import type { BookmarkInfo } from './BookmarkNode';
-declare function Bookmark({ url, title, description, image, favicon, loading }: BookmarkInfo): JSX.Element;
-export default Bookmark;
+export declare function Bookmark({ url, title, description, image, favicon, loading }: BookmarkInfo): JSX.Element;
+export declare function BookmarkLoader({ url, onLoaded }: {
+    url: string;
+    onLoaded: (info: BookmarkInfo) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/ext/BookmarkPlugin/Bookmark.js

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
 import { Icon } from '@iconify/react';
 import { Box, CircularProgress } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEditorConfig } from '../../config';
+import { fetchOpenGraphInfo } from '../utils';
 const isGithubRepo = (url) => {
     const reg = /^https?:\/\/github.com\//;
     return reg.test(url);
@@ -14,7 +17,7 @@ const getHost = (url) => {
         return url;
     }
 };
-function Bookmark({ url, title, description, image, favicon, loading }) {
+export function Bookmark({ url, title, description, image, favicon, loading }) {
     // title 显示:
     // - 有 title 值则直接显示
     // - loading 状态显示 "Fetching preview"
@@ -24,18 +27,20 @@ function Bookmark({ url, title, description, image, favicon, loading }) {
         return (_jsxs(Box, { className: "be-bookmark-title be-bookmark-ellipsis", sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [loading && _jsx(CircularProgress, { size: 14, sx: { color: 'grey.400' } }), _jsx(Box, { component: "span", sx: { color: loading ? 'grey.700' : 'inherit' }, children: previewTitle })] }));
     };
     if (isGithubRepo(url)) {
-        return (_jsxs(Root, { onClick: () => window.open(url, '_blank'), className: "github-bookmark", children: [image && (_jsxs("div", { className: "be-github-image", children: [_jsx(Image, { src: image }), _jsx(Icon, { icon: "mdi:github", style: { fontSize: 18 }, className: "be-github-image-icon" })] })), _jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), description && _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), loading && (_jsx(Box, { className: "be-bookmark-url-content", sx: { pt: 1 }, children: _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url }) }))] })] }));
+        return (_jsxs(Root, { href: url, target: "_blank", className: "github-bookmark", children: [image && (_jsxs("div", { className: "be-github-image", children: [_jsx(Image, { src: image }), _jsx(Icon, { icon: "mdi:github", style: { fontSize: 18 }, className: "be-github-image-icon" })] })), _jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), description && _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), loading && (_jsx(Box, { className: "be-bookmark-url-content", sx: { pt: 1 }, children: _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url }) }))] })] }));
     }
-    return (_jsxs(Root, { onClick: () => window.open(url, '_blank'), children: [_jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), _jsxs("div", { className: "be-bookmark-url-content", children: [favicon && _jsx("img", { src: favicon, alt: "favicon", className: "be-bookmark-favicon" }), _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url })] })] }), image && _jsx("div", { className: "be-bookmark-image", style: { backgroundImage: `url(${image})` } })] }));
+    return (_jsxs(Root, { href: url, target: "_blank", children: [_jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), _jsxs("div", { className: "be-bookmark-url-content", children: [favicon && _jsx("img", { src: favicon, alt: "favicon", className: "be-bookmark-favicon" }), _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url })] })] }), image && _jsx("div", { className: "be-bookmark-image", style: { backgroundImage: `url(${image})` } })] }));
 }
-const Root = styled.div `
+const Root = styled.a `
   box-sizing: border-box;
   display: inline-flex;
   width: 100%;
   margin: 8px 0;
   border: 1px solid rgba(55, 53, 47, 0.16);
   overflow: hidden;
+  color: inherit;
   border-radius: 4px;
+  text-decoration: none;
   cursor: pointer;
 
   :hover {
@@ -153,4 +158,17 @@ const Image = styled.img `
   left: 0;
   object-fit: cover;
 `;
-export default Bookmark;
+export function BookmarkLoader({ url, onLoaded }) {
+    const { openGraphEndpoint } = useEditorConfig();
+    const { data, loading } = useRequest(async () => {
+        if (!openGraphEndpoint) {
+            return null;
+        }
+        const openGraphInfo = await fetchOpenGraphInfo(openGraphEndpoint, url);
+        if (openGraphInfo) {
+            onLoaded(openGraphInfo);
+        }
+        return openGraphInfo;
+    });
+    return _jsx(Bookmark, { url: url, title: "", loading: loading || !data, ...data });
+}

package/lib/ext/BookmarkPlugin/BookmarkNode.d.ts

@@ -8,6 +8,7 @@ export interface BookmarkInfo {
     image?: string;
     favicon?: string;
     loading?: boolean;
+    selfLoad?: boolean;
 }
 export type SerializedBookmarkNode = Spread<{
     bookmark: BookmarkInfo;
@@ -26,8 +27,9 @@ export declare class BookmarkNode extends DecoratorBlockNode {
     updateDOM(): false;
     getId(): string;
     getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
-    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    setBookmark(bookmark: BookmarkInfo): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
     isInline(): false;
 }
-export declare function $createBookmarkNode(bookmark: BookmarkInfo): BookmarkNode;
+export declare function $createBookmarkNode(bookmark: BookmarkInfo | string): BookmarkNode;
 export declare function $isBookmarkNode(node: BookmarkNode | LexicalNode | null | undefined): node is BookmarkNode;

package/lib/ext/BookmarkPlugin/BookmarkNode.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import Bookmark from './Bookmark';
-function BookmarkComponent({ className, format, nodeKey, bookmark }) {
+import { Bookmark, BookmarkLoader } from './Bookmark';
+function BookmarkComponent({ className, format, nodeKey, bookmark, onLoaded }) {
+    if (bookmark.selfLoad) {
+        return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(BookmarkLoader, { url: bookmark.url, onLoaded: onLoaded }) }));
+    }
     return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(Bookmark, { url: bookmark.url, title: bookmark.title, description: bookmark.description, image: bookmark.image, favicon: bookmark.favicon, loading: bookmark.loading }) }));
 }
 function convertBookmarkElement(domNode) {
@@ -76,19 +79,30 @@ export class BookmarkNode extends DecoratorBlockNode {
     getTextContent(_includeInert, _includeDirectionless) {
         return this.__bookmark.url;
     }
-    decorate(_editor, config) {
+    setBookmark(bookmark) {
+        const writable = this.getWritable();
+        writable.__bookmark = bookmark;
+    }
+    decorate(editor, config) {
         const embedBlockTheme = config.theme.embedBlock || {};
         const className = {
             base: embedBlockTheme.base || '',
             focus: embedBlockTheme.focus || '',
         };
-        return (_jsx(BookmarkComponent, { className: className, format: this.__format, nodeKey: this.getKey(), bookmark: this.__bookmark }));
+        return (_jsx(BookmarkComponent, { className: className, format: this.__format, nodeKey: this.getKey(), bookmark: this.__bookmark, onLoaded: (bookmark) => {
+                editor.update(() => {
+                    this.setBookmark({ ...bookmark, url: this.__bookmark.url, selfLoad: false });
+                });
+            } }));
     }
     isInline() {
         return false;
     }
 }
 export function $createBookmarkNode(bookmark) {
+    if (typeof bookmark === 'string') {
+        return new BookmarkNode({ url: bookmark, title: '', loading: true, selfLoad: true });
+    }
     return new BookmarkNode(bookmark);
 }
 export function $isBookmarkNode(node) {

package/lib/main/plugins/MarkdownTransformers/index.d.ts

@@ -11,4 +11,5 @@ export declare const IMAGE: TextMatchTransformer;
 export declare const EQUATION: TextMatchTransformer;
 export declare const TWEET: ElementTransformer;
 export declare const TABLE: ElementTransformer;
+export declare const BOOKMARK: TextMatchTransformer;
 export declare const PLAYGROUND_TRANSFORMERS: Array<Transformer>;

package/lib/main/plugins/MarkdownTransformers/index.js

@@ -12,6 +12,7 @@ import { $createParagraphNode, $createTextNode, $isElementNode, $isParagraphNode
 import { $createEquationNode, $isEquationNode, EquationNode } from '../../nodes/EquationNode';
 import { $createImageNode, $isImageNode, ImageNode } from '../../nodes/ImageNode';
 import { $createTweetNode, $isTweetNode, TweetNode } from '../../nodes/TweetNode';
+import { $createBookmarkNode, $isBookmarkNode, BookmarkNode } from '../../../ext/BookmarkPlugin/BookmarkNode';
 export const HR = {
     dependencies: [HorizontalRuleNode],
     export: (node) => {
@@ -184,7 +185,26 @@ const mapToTableCells = (textContent) => {
     }
     return match[1].split('|').map((text) => createTableCell(text));
 };
+export const BOOKMARK = {
+    dependencies: [BookmarkNode],
+    export: (node, exportChildren, exportFormat) => {
+        if (!$isBookmarkNode(node)) {
+            return null;
+        }
+        return `[[]](${node.getId()})`;
+    },
+    importRegExp: /(?:\[\[([^[]+)\])(?:\((?:([^()\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?)\))/,
+    regExp: /(?:\[\[([^[]+)\])(?:\((?:([^()\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?)\))$/,
+    replace: (textNode, match) => {
+        const [, , linkUrl] = match;
+        const bookmarkNode = $createBookmarkNode(linkUrl);
+        textNode.replace(bookmarkNode);
+    },
+    trigger: ')',
+    type: 'text-match',
+};
 export const PLAYGROUND_TRANSFORMERS = [
+    BOOKMARK,
     TABLE,
     HR,
     IMAGE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.81",
+  "version": "2.0.82",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.10.6",
     "@blocklet/embed": "^0.1.11",
     "@blocklet/pages-kit": "^0.2.377",
-    "@blocklet/pdf": "2.0.81",
+    "@blocklet/pdf": "2.0.82",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "67a40ce5fb0eba89e415501e77c175a380be3322"
+  "gitHead": "3726449a47f54674d489b95b6ae6895412c3ebc2"
 }