fix: placeholder configuration not effective

demos/main.ts

@@ -4,8 +4,8 @@ import {config} from "./xinghuo";
 
 new AiEditor({
     element: "#aiEditor",
-    placeHolder: "点击输入内容...",
-    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。输入 空格 + "/" 可以快速弹出 AI 菜单哦 ',
+    placeholder: "点击输入内容...",
+    content: 'AiEditor 是一个面向 AI 的下一代富文本编辑器。<p> <strong>提示：</strong> <br/>1、输入 空格 + "/" 可以快速弹出 AI 菜单 <br/> 2、输入 空格 + "@" 可以提及某人</p> ',
     ai: {
         model: {
             xinghuo: {

readme.md

@@ -59,7 +59,7 @@ npm install
 ```javascript
 new AiEditor({
     element: "#aiEditor",
-    placeHolder: "点击输入内容...",
+    placeholder: "点击输入内容...",
     content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。输入 空格 + "/" 可以快速弹出 AI 菜单哦 ',
     ai: {
         model: {
@@ -78,7 +78,7 @@ new AiEditor({
 ```javascript
 new AiEditor({
     element: "#aiEditor",
-    placeHolder: "点击输入内容...",
+    placeholder: "点击输入内容...",
     content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。输入 空格 + "/" 可以快速弹出 AI 菜单哦 ',
 })
 ```
@@ -100,7 +100,7 @@ npm run dev
 ```javascript
 new AiEditor({
     element: "#aiEditor",
-    placeHolder: "点击输入内容...",
+    placeholder: "点击输入内容...",
     content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',
     ai: {
         model: {

src/core/AiEditor.ts

@@ -39,7 +39,7 @@ export interface AiEditorEvent {
 export type AiEditorOptions = {
     element: string | Element,
     content?: string,
-    placeHolder?: string,
+    placeholder?: string,
     theme?: "light" | "dark",
     cbName?: string,
     cbUrl?: string
@@ -86,7 +86,7 @@ export type AiEditorOptions = {
 
 const defaultOptions: Partial<AiEditorOptions> = {
     theme: "light",
-    placeHolder: "",
+    placeholder: "",
 }
 
 export class InnerEditor extends Tiptap {

src/core/getExtensions.ts

@@ -99,9 +99,9 @@ export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Exten
         )
     }
 
-    if (options.placeHolder) {
+    if (options.placeholder) {
         ret.push(Placeholder.configure({
-            placeholder: options.placeHolder,
+            placeholder: options.placeholder,
         }))
     }
 

src/styles/aiecontent.less

@@ -177,6 +177,15 @@
       border-radius: 5px;
       padding: 0 3px;
   }
+
+  p.is-editor-empty:first-child::before {
+    color: var(--aie-text-placeholder-color);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
 }
 
 .tableWrapper {

src/styles/aieditor.less

@@ -73,7 +73,6 @@
     outline: none;
   }
 
-
   .suggestion {
     background: var(--aie-menus-bg-color);
     border: 1px solid var(--aie-dropdown-container-border-color);

src/styles/variable.less

@@ -3,6 +3,7 @@
 :root,
 :root .aie-theme-light {
   --aie-text-color: #333;
+  --aie-text-placeholder-color: #adb5bd;
   --aie-bg-color: #fff;
   --aie-container-border:#ccc;
   --aie-pre-bg-color:#fafafa;
@@ -29,6 +30,7 @@
 //the dark theme variables
 :root .aie-theme-dark {
   --aie-text-color: #ccc;
+  --aie-text-placeholder-color: #5d5d5d;
   --aie-bg-color: #1e2022;
   --aie-container-border:#333;
   --aie-pre-bg-color:#282c34;