@haklex/rich-plugin-link-edit 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+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.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,30 @@
+# @haklex/rich-plugin-link-edit
+
+链接编辑插件。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-plugin-link-edit @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { FloatingLinkEditorPlugin } from './FloatingLinkEditorPlugin'
+```
+
+## 使用
+
+```tsx
+import { FloatingLinkEditorPlugin } from '@haklex/rich-plugin-link-edit'
+import { RichEditor } from '@haklex/rich-editor'
+
+<RichEditor>
+  <FloatingLinkEditorPlugin />
+</RichEditor>
+```
+
+## License
+
+MIT

package/dist/FloatingLinkEditorPlugin.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+export declare function FloatingLinkEditorPlugin(): ReactElement | null;
+//# sourceMappingURL=FloatingLinkEditorPlugin.d.ts.map

package/dist/FloatingLinkEditorPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLinkEditorPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingLinkEditorPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAoBrB,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAkBxD,wBAAgB,wBAAwB,IAAI,YAAY,GAAG,IAAI,CAqN9D"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { FloatingLinkEditorPlugin } from './FloatingLinkEditorPlugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,222 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverPortal, PopoverPositioner, PopoverPopup } from "@haklex/rich-editor-ui";
+import { $isLinkNode } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getNodeByKey } from "lexical";
+import { Link, ExternalLink, Unlink } from "lucide-react";
+import { useRef, useState, useCallback, useEffect } from "react";
+function $findLinkNode(node) {
+  let current = node;
+  while (current) {
+    if ($isLinkNode(current)) return current;
+    current = current.getParent();
+  }
+  return null;
+}
+function FloatingLinkEditorPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const inputRef = useRef(null);
+  const panelFocusedRef = useRef(false);
+  const [visible, setVisible] = useState(false);
+  const [linkState, setLinkState] = useState({
+    url: "",
+    linkKey: "",
+    linkDom: null
+  });
+  const [inputUrl, setInputUrl] = useState("");
+  const updateLink = useCallback(() => {
+    if (panelFocusedRef.current) return;
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+      setVisible(false);
+      return;
+    }
+    const anchorNode = selection.anchor.getNode();
+    const linkNode = $findLinkNode(anchorNode);
+    if (!linkNode) {
+      setVisible(false);
+      return;
+    }
+    const url = linkNode.getURL();
+    const key = linkNode.getKey();
+    const dom = editor.getElementByKey(key);
+    setLinkState({ url, linkKey: key, linkDom: dom });
+    setInputUrl(url);
+    setVisible(true);
+  }, [editor]);
+  useEffect(() => {
+    const unregisterCommand = editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        updateLink();
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+    const unregisterUpdate = editor.registerUpdateListener(
+      ({ editorState }) => {
+        editorState.read(() => {
+          updateLink();
+        });
+      }
+    );
+    return () => {
+      unregisterCommand();
+      unregisterUpdate();
+    };
+  }, [editor, updateLink]);
+  useEffect(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const CSS_CLASS = "rich-link-edit-cmd-hover";
+    const updateCursor = (mod) => {
+      root.classList.toggle(CSS_CLASS, mod);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Meta" || e.key === "Control") updateCursor(true);
+    };
+    const onKeyUp = (e) => {
+      if (e.key === "Meta" || e.key === "Control") updateCursor(false);
+    };
+    const onBlur = () => updateCursor(false);
+    const onClick = (e) => {
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const anchor = e.target.closest("a");
+      if (!anchor) return;
+      const href = anchor.getAttribute("href");
+      if (href) {
+        e.preventDefault();
+        window.open(href, "_blank", "noopener,noreferrer");
+      }
+    };
+    root.addEventListener("keydown", onKeyDown);
+    root.addEventListener("keyup", onKeyUp);
+    root.addEventListener("blur", onBlur);
+    root.addEventListener("click", onClick);
+    return () => {
+      root.removeEventListener("keydown", onKeyDown);
+      root.removeEventListener("keyup", onKeyUp);
+      root.removeEventListener("blur", onBlur);
+      root.removeEventListener("click", onClick);
+      root.classList.remove(CSS_CLASS);
+    };
+  }, [editor]);
+  const commitUrl = useCallback(() => {
+    const trimmed = inputUrl.trim();
+    if (!trimmed) return;
+    editor.update(() => {
+      const node = $getNodeByKey(linkState.linkKey);
+      if ($isLinkNode(node) && node.getURL() !== trimmed) {
+        node.setURL(trimmed);
+      }
+    });
+  }, [editor, inputUrl, linkState.linkKey]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitUrl();
+        editor.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setInputUrl(linkState.url);
+        editor.focus();
+      }
+    },
+    [commitUrl, editor, linkState.url]
+  );
+  const handleOpen = useCallback(() => {
+    window.open(linkState.url, "_blank", "noopener,noreferrer");
+  }, [linkState.url]);
+  const handleUnlink = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(linkState.linkKey);
+      if ($isLinkNode(node)) {
+        const children = node.getChildren();
+        for (const child of children) {
+          node.insertBefore(child);
+        }
+        node.remove();
+      }
+    });
+    setVisible(false);
+  }, [editor, linkState.linkKey]);
+  const handlePanelFocusIn = useCallback(() => {
+    panelFocusedRef.current = true;
+  }, []);
+  const handlePanelFocusOut = useCallback(
+    (e) => {
+      const panel = e.currentTarget;
+      if (!panel.contains(e.relatedTarget)) {
+        panelFocusedRef.current = false;
+        commitUrl();
+        editor.focus();
+      }
+    },
+    [commitUrl, editor]
+  );
+  if (!editor.isEditable()) return null;
+  return /* @__PURE__ */ jsx(Popover, { open: visible, children: /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(
+    PopoverPositioner,
+    {
+      anchor: linkState.linkDom,
+      side: "bottom",
+      sideOffset: 8,
+      align: "center",
+      children: /* @__PURE__ */ jsxs(
+        PopoverPopup,
+        {
+          className: "rich-link-edit-panel",
+          onFocus: handlePanelFocusIn,
+          onBlur: handlePanelFocusOut,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "rich-link-edit-url-row", children: [
+              /* @__PURE__ */ jsx(Link, { className: "rich-link-edit-link-icon", size: 16 }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  className: "rich-link-edit-input",
+                  type: "url",
+                  value: inputUrl,
+                  onChange: (e) => setInputUrl(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder: "https://..."
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rich-link-edit-actions", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "rich-link-edit-action-btn",
+                  type: "button",
+                  onClick: handleOpen,
+                  children: [
+                    /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                    "Open"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "rich-link-edit-action-btn rich-link-edit-action-btn--end",
+                  type: "button",
+                  onClick: handleUnlink,
+                  children: [
+                    /* @__PURE__ */ jsx(Unlink, { size: 14 }),
+                    "Unlink"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) }) });
+}
+export {
+  FloatingLinkEditorPlugin
+};

package/dist/rich-plugin-link-edit.css

@@ -0,0 +1,67 @@
+.rich-link-edit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 340px;
+  padding: 12px;
+  font-size: 13px;
+}
+.rich-link-edit-url-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: var(--rc-bg-secondary);
+  border-radius: var(--rc-radius-md);
+  min-width: 0;
+}
+.rich-link-edit-link-icon {
+  flex-shrink: 0;
+  color: var(--rc-text-secondary);
+}
+.rich-link-edit-input {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: var(--rc-text);
+  font-family: var(--rc-font-mono);
+  font-size: 13px;
+  padding: 0;
+  outline: none;
+  min-width: 0;
+}
+.rich-link-edit-input::placeholder {
+  color: var(--rc-text-secondary);
+}
+.rich-link-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rich-link-edit-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  appearance: none;
+  border: none;
+  background: none;
+  color: var(--rc-text);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--rc-radius-sm);
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+.rich-link-edit-action-btn:hover {
+  background-color: var(--rc-bg-secondary);
+}
+.rich-link-edit-action-btn--end {
+  margin-left: auto;
+}
+.rich-link-edit-cmd-hover a {
+  cursor: pointer;
+  text-decoration-line: underline;
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@haklex/rich-plugin-link-edit",
+  "version": "0.0.1",
+  "description": "Link editing plugin",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-plugin-link-edit.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "devDependencies": {
+    "@lexical/link": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/link": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}