UI improvements

rsconcept/frontend/src/components/Common/ConceptSelect.tsx

@@ -9,7 +9,7 @@ extends Omit<PropsWithRef<SelectProps<T>>, 'noDataLabel'> {
 function ConceptSelect<T extends object | string>({ className,  ...props }: ConceptSelectProps<T>) {
   return (
   <Select
-    className={`overflow-ellipsis whitespace-nowrap ${className}`}
+    className={`overflow-x-ellipsis whitespace-nowrap ${className}`}
     {...props}
     noDataLabel='Список пуст'
   />

rsconcept/frontend/src/components/RSInput/index.tsx

@@ -8,6 +8,7 @@ import { Ref, useMemo } from 'react';
 
 import { useConceptTheme } from '../../context/ThemeContext';
 import { RSLanguage } from './rslang';
+//import { cursorTooltip } from './tooltip';
 
 const editorSetup: BasicSetupOptions = {
   highlightSpecialChars: true,
@@ -39,8 +40,9 @@ const editorSetup: BasicSetupOptions = {
 
 const editorExtensions = [
   EditorView.lineWrapping,
+  bracketMatching(),
   RSLanguage,
-  bracketMatching()
+  //cursorTooltip(),
 ];
 
 interface RSInputProps 

rsconcept/frontend/src/components/RSInput/tooltip.ts

@@ -0,0 +1,53 @@
+import { EditorState, Extension, StateField } from "@codemirror/state";
+import { EditorView, showTooltip } from "@codemirror/view";
+
+function getCursorTooltips(state: EditorState) {
+  return state.selection.ranges
+    .filter(range => !range.empty)
+    .map(range => {
+      const line = state.doc.lineAt(range.head);
+      const text = `${line.number}:${range.head - line.from}`;
+      return {
+        pos: (range.to + range.from)/2,
+        above: false,
+        strictSide: true,
+        create: () => {
+          const dom = document.createElement("div");
+          dom.className = "cm-tooltip-cursor";
+          dom.textContent = text;
+          return { dom };
+        }
+      };
+    });
+}
+
+const cursorTooltipField = StateField.define({
+  create: getCursorTooltips,
+  update(tooltips, transaction) {
+    if (!transaction.docChanged && !transaction.selection) {
+      return tooltips;
+    }
+    return getCursorTooltips(transaction.state);
+  },
+  provide: field => showTooltip.computeN([field], state => state.field(field))
+});
+
+const cursorTooltipBaseTheme = EditorView.baseTheme({
+  ".cm-tooltip.cm-tooltip-cursor": {
+    backgroundColor: "#66b",
+    color: "white",
+    border: "none",
+    padding: "2px 7px",
+    borderRadius: "4px",
+    "&.cm-tooltip-arrow:before": {
+      borderTopColor: "#66b"
+    },
+    "&.cm-tooltip-arrow:after": {
+      borderTopColor: "transparent"
+    }
+  }
+});
+
+export function cursorTooltip(): Extension {
+  return [cursorTooltipField, cursorTooltipBaseTheme];
+}

rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx

@@ -35,6 +35,7 @@ function DlgCreateCst({ hideWindow, defaultType, onCreate }: DlgCreateCstProps)
       canSubmit={validated}
       onSubmit={handleSubmit}
     >
+      <div className='fixed h-fit w-[15rem] px-2'>
       <ConceptSelect
         className='my-4'
         options={CstTypeSelector}
@@ -42,6 +43,8 @@ function DlgCreateCst({ hideWindow, defaultType, onCreate }: DlgCreateCstProps)
         values={selectedType ? [{ value: selectedType, label: getCstTypeLabel(selectedType) }] : []}
         onChange={data => { setSelectedType(data.length > 0 ? data[0].value : undefined); }}
       />
+      </div>
+      <div className='h-[4rem]'></div>
     </Modal>
   );
 }