🎉 first commit

app/components/editor/editors/LinkEditor.tsx

@@ -0,0 +1,93 @@
+import React, { memo, useState } from 'react';
+import type { EditorProps } from './EditorProps';
+
+/**
+ * 链接编辑器组件，用于编辑链接元素。
+ */
+export const LinkEditor: React.FC<EditorProps> = memo(({ element }) => {
+  const linkElement = element as HTMLAnchorElement;
+  const [href, setHref] = useState(linkElement.getAttribute('href') || '');
+  const [content, setContent] = useState(linkElement.innerHTML);
+  const [target, setTarget] = useState(linkElement.target);
+
+  const handleHrefChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newHref = e.target.value;
+    setHref(newHref);
+    linkElement.href = newHref;
+  };
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newContent = e.target.value;
+    setContent(newContent);
+    linkElement.innerHTML = newContent;
+  };
+
+  const handleTargetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newTarget = e.target.value;
+    setTarget(newTarget);
+    linkElement.target = newTarget;
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>链接地址</label>
+        <input
+          type="text"
+          style={{
+            width: '100%',
+            padding: '8px',
+            border: '1px solid #cbd5e1',
+            outline: 'none',
+            borderRadius: '4px',
+            boxSizing: 'border-box',
+          }}
+          value={href}
+          onChange={handleHrefChange}
+          placeholder="https://upage.ai"
+        />
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>链接文本</label>
+        <input
+          type="text"
+          style={{
+            width: '100%',
+            padding: '8px',
+            border: '1px solid #cbd5e1',
+            outline: 'none',
+            borderRadius: '4px',
+            boxSizing: 'border-box',
+          }}
+          value={content}
+          onChange={handleContentChange}
+          placeholder="链接文本"
+        />
+      </div>
+
+      <div>
+        <label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>打开方式</label>
+        <select
+          style={{
+            width: '100%',
+            padding: '8px',
+            border: '1px solid #cbd5e1',
+            outline: 'none',
+            borderRadius: '4px',
+            backgroundColor: 'white',
+            boxSizing: 'border-box',
+          }}
+          value={target}
+          onChange={handleTargetChange}
+        >
+          <option value="">当前窗口</option>
+          <option value="_blank">新窗口</option>
+          <option value="_self">当前框架</option>
+          <option value="_parent">父框架</option>
+          <option value="_top">整个窗口</option>
+        </select>
+      </div>
+    </div>
+  );
+});