styles: update styles for single line ocmpletion

unit-mesh · Nov 25, 2023 · 2f0edec · 2f0edec
1 parent 5356e07
commit 2f0edec
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/editor/inline/inline-completion.tsx b/src/components/editor/inline/inline-completion.tsx
@@ -3,6 +3,7 @@ import { Editor, mergeAttributes } from "@tiptap/core";
 import AiBlockView from "@/components/editor/intelli/ai-block-view";
 import React, { useEffect, useRef } from "react";
 import { AiBlockEditor } from "@/components/editor/intelli/ai-block-editor";
+import { KeyboardIcon } from "@radix-ui/react-icons";
 
 declare module '@tiptap/core' {
 	interface Commands<ReturnType> {
@@ -21,6 +22,7 @@ export const createInlineCompletion = () => {
 		name: extensionName,
 		group: "block",
 		defining: true,
+		isolating: true,
 		content: "text*",
 		addOptions() {
 			return {
@@ -94,7 +96,7 @@ const InlineCompletionView = (props?: { editor: Editor }) => {
 
 	return (
 		<NodeViewWrapper ref={$container}>
-			<p>show text for completion <span className={'inline-completion-tip'}>`</span></p>
+			<span>show text for completion <span className={'inline-completion-tip'}><KeyboardIcon />`</span></span>
 		</NodeViewWrapper>
 	);
 };

diff --git a/styles/global.css b/styles/global.css
@@ -785,13 +785,24 @@ input {
     cursor: not-allowed;
 }
 
+.node-inline-completion {
+    display: inline-block;
+    background: var(--violet-3);
+    padding: 0 8px;
+    border-radius: 4px;
+}
+
+.node-inline-completion svg {
+    display: inline-block;
+}
+
 .inline-completion {
     background-color: #9ca3af;
 }
 
 .inline-completion-tip {
     margin-left: 1em;
-    background: #ccc;
+    background: #fff;
     font-weight: 500;
     border-radius: 0.2em;
     line-height: 0.6em;