feat: prompt input

AirboZH · Sep 5, 2024 · d0718b8 · d0718b8
1 parent 287bf82
commit d0718b8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/console/src/editor/chirpy/ChirpyPromptComponent.vue b/console/src/editor/chirpy/ChirpyPromptComponent.vue
@@ -2,25 +2,24 @@
 import { nodeViewProps, NodeViewWrapper } from "@halo-dev/richtext-editor";
 const props = defineProps(nodeViewProps);
 
-console.log("props", props)
-
+const updateInput = (e: any) => {
+  props.updateAttributes({ content: e.target.value });
+};
 </script>
 
 <template>
   <node-view-wrapper
     class="chirpy-prompt-node-view"
     as="div"
-    contenteditable="true"
+    contenteditable="false"
   >
     <div class="chirpy-prompt-block" :class="{ 
       'prompt-tip': props.node.attrs.type === 'tip',
       'prompt-info': props.node.attrs.type === 'info',
       'prompt-warning': props.node.attrs.type === 'warning',
       'prompt-danger': props.node.attrs.type === 'danger',
      }">
-      <span class="prompt-text">
-        {{ props.node.textContent }}
-      </span>
+      <input class="prompt-text" type="text" :value="props.node.attrs.content" @input="updateInput">
     </div>
   </node-view-wrapper>
 </template>
@@ -42,7 +41,7 @@ console.log("props", props)
   background-color: rgb(248, 215, 218, 0.56);
 }
 
-.chirpy-prompt-node-view{
+.chirpy-prompt-node-view {
   margin: .75em 10px 10px;
 }
 
@@ -55,5 +54,11 @@ console.log("props", props)
 
 .prompt-text {
   margin: 5px 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  width: calc(100% - 30px);
+  box-sizing: border-box;
 }
 </style>
diff --git a/console/src/editor/chirpy/index.ts b/console/src/editor/chirpy/index.ts
@@ -43,7 +43,10 @@ export const ChirpyPrompt = Node.create<ChirpyPromptOptions>({
     return {
       type: {
         default: 'tip',
-      }
+      },
+      content: {
+        default: "",
+      },
     }
   },
 
@@ -58,7 +61,10 @@ export const ChirpyPrompt = Node.create<ChirpyPromptOptions>({
   renderHTML({node, HTMLAttributes}) {
     const hasType = this.options.types.includes(node.attrs.type)
     const type = hasType ? node.attrs.type : this.options.types[0]
-    return ['chirpy-prompt', mergeAttributes(HTMLAttributes, {class: `prompt-${type}`,}), 0]
+    return ['chirpy-prompt',
+      mergeAttributes(HTMLAttributes, {class: `prompt-${type}`,}), 
+      `${HTMLAttributes.content}`,
+    ]
   },
 
   addNodeView() {