feat: prompt editor support line num

web/app/components/base/prompt-editor/index.tsx

@@ -34,6 +34,7 @@ import {
   UPDATE_DATASETS_EVENT_EMITTER,
   UPDATE_HISTORY_EVENT_EMITTER,
 } from './constants'
+import styles from './line-numbers.module.css'
 import ComponentPickerBlock from './plugins/component-picker-block'
 import {
   ContextBlock,
@@ -46,12 +47,12 @@ import {
   CurrentBlockReplacementBlock,
 } from './plugins/current-block'
 import { CustomTextNode } from './plugins/custom-text/node'
+
 import {
   ErrorMessageBlock,
   ErrorMessageBlockNode,
   ErrorMessageBlockReplacementBlock,
 } from './plugins/error-message-block'
-
 import {
   HistoryBlock,
   HistoryBlockNode,
@@ -88,6 +89,7 @@ export type PromptEditorProps = {
   className?: string
   placeholder?: string | React.ReactNode
   placeholderClassName?: string
+  showLineNumbers?: boolean
   style?: React.CSSProperties
   value?: string
   editable?: boolean
@@ -113,6 +115,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
   className,
   placeholder,
   placeholderClassName,
+  showLineNumbers,
   style,
   value,
   editable = true,
@@ -178,13 +181,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
 
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
-      <div className={cn('relative', wrapperClassName)}>
+      <div className={cn('relative', showLineNumbers && styles.lineNumbersScope, wrapperClassName)}>
         <RichTextPlugin
           contentEditable={(
             <ContentEditable
               className={cn(
                 'text-text-secondary outline-none',
                 compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+                showLineNumbers && styles.lineNumbers,
                 className,
               )}
               style={style || {}}
@@ -193,7 +197,11 @@ const PromptEditor: FC<PromptEditorProps> = ({
           placeholder={(
             <Placeholder
               value={placeholder}
-              className={cn('truncate', placeholderClassName)}
+              className={cn(
+                'truncate',
+                showLineNumbers && styles.lineNumbersPlaceholder,
+                placeholderClassName,
+              )}
               compact={compact}
             />
           )}

web/app/components/base/prompt-editor/line-numbers.module.css

@@ -0,0 +1,52 @@
+.lineNumbersScope {
+  --line-number-gutter: 32px;
+  --line-number-gap: 12px;
+}
+
+.lineNumbers {
+  counter-reset: line;
+  padding-left: calc(var(--line-number-gutter) + var(--line-number-gap));
+}
+
+.lineNumbers :global(p),
+.lineNumbers :global(h1),
+.lineNumbers :global(h2),
+.lineNumbers :global(h3),
+.lineNumbers :global(h4),
+.lineNumbers :global(h5),
+.lineNumbers :global(h6),
+.lineNumbers :global(li),
+.lineNumbers :global(blockquote),
+.lineNumbers :global(pre) {
+  position: relative;
+  display: block;
+  min-height: 1.5em;
+}
+
+.lineNumbers :global(p)::before,
+.lineNumbers :global(h1)::before,
+.lineNumbers :global(h2)::before,
+.lineNumbers :global(h3)::before,
+.lineNumbers :global(h4)::before,
+.lineNumbers :global(h5)::before,
+.lineNumbers :global(h6)::before,
+.lineNumbers :global(li)::before,
+.lineNumbers :global(blockquote)::before,
+.lineNumbers :global(pre)::before {
+  counter-increment: line;
+  content: counter(line);
+  position: absolute;
+  top: 0;
+  left: calc(-1 * (var(--line-number-gutter) + var(--line-number-gap)));
+  width: var(--line-number-gutter);
+  text-align: right;
+  color: var(--color-text-quaternary);
+  line-height: inherit;
+  user-select: none;
+  pointer-events: none;
+}
+
+.lineNumbersPlaceholder {
+  pointer-events: none;
+  left: calc(var(--line-number-gutter) + var(--line-number-gap));
+}

web/app/components/workflow/skill/editor/markdown-file-editor.tsx

@@ -1,23 +1,21 @@
 import type { FC } from 'react'
 import * as React from 'react'
-import PromptEditor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
+import PromptEditor from '@/app/components/base/prompt-editor'
 
 type MarkdownFileEditorProps = {
-  title: string
   value: string
   onChange: (value: string) => void
 }
 
-const MarkdownFileEditor: FC<MarkdownFileEditorProps> = ({ title, value, onChange }) => {
+const MarkdownFileEditor: FC<MarkdownFileEditorProps> = ({ value, onChange }) => {
   return (
-    <div className="h-full w-full">
+    <div className="h-full w-full bg-components-panel-bg">
       <PromptEditor
-        title={title}
         value={value}
         onChange={onChange}
+        showLineNumbers
         className="h-full"
-        editorContainerClassName="h-full"
-        containerBackgroundClassName="bg-components-panel-bg"
+        wrapperClassName="h-full"
       />
     </div>
   )

web/app/components/workflow/skill/skill-doc-editor.tsx

@@ -211,7 +211,6 @@ const SkillDocEditor: FC = () => {
     <div className="h-full w-full overflow-hidden bg-components-panel-bg">
       {isMarkdown && (
         <MarkdownFileEditor
-          title={fileName}
           value={currentContent}
           onChange={handleEditorChange}
         />