feat(notes): rework note editor with context menu and editable tables (#853)

* feat(notes): add formatting context menu to note editor

Right-click menu with Format, Paragraph and Insert submenus reusing
existing CodeMirror markdown commands. Disabled in preview mode.

* feat(notes): localize table add column/row controls

* refactor(notes): extract markdown table parser into tableParser module

* feat(notes): inline-edit tables with add column/row controls

Render markdown tables as an interactive block widget in live preview:
cells are edited in place (committed on blur/Enter/Tab), and hover gutters
add a column to the right or a row below. Clamp the table range to the
actual rows so trailing text is never hidden or overwritten, and add
click strips to place the cursor before/after the table.

* fix(notes): restore list menu commands

* fix(notes): improve table exit click area

* fix(notes): improve table keyboard navigation

* fix(notes): stabilize table keyboard entry

* fix(notes): preserve table boundary while typing

* feat(notes): add table row and column drag reorder

* fix(notes): refine table drag handles

* fix(notes): polish table drag handle movement

* fix(notes): select table cell text on focus

* fix(notes): size table columns by content

* fix(notes): remove table add button tooltips

* fix(notes): improve table tab navigation

* feat(notes): rework inline formatting on syntax tree

* feat(notes): edit table cells with nested editors

* feat(notes): add table cell menu commands and tabular paste

* fix(notes): paste excel data as table

* chore: update gitignore

* feat(notes): scroll table and keep drag overlay aligned on column drag

* fix(notes): keep editor layout and table separation on table paste

* fix(notes): allow drag selection over table dead zones

* feat(notes): keep markup rendered while mouse selection is dragging

* fix(notes): scroll table edge cells fully into view

* fix(notes): adjust editor context menu spacing

* fix(notes): apply review fixes to table editing and reveal selection

* refactor(notes): reduce table navigation and reveal selection overhead

Author: antonreshetov

.gitignore

@@ -17,3 +17,4 @@ docs/superpowers
 docs/releases
 docs/website/.vitepress/cache
 docs/website/.vitepress/dist
+docs/strategy

src/main/i18n/locales/en_US/ui.json

@@ -357,6 +357,52 @@
     "symbols": "Symbols",
     "selectedMultiple": "{{count}} Notes Selected",
     "noSelected": "No Note Selected",
+    "editor": {
+      "menu": {
+        "format": {
+          "title": "Format",
+          "bold": "Bold",
+          "italic": "Italic",
+          "strikethrough": "Strikethrough",
+          "highlight": "Highlight",
+          "code": "Code",
+          "link": "Link",
+          "clearFormatting": "Clear formatting"
+        },
+        "paragraph": {
+          "title": "Paragraph",
+          "bulletList": "Bullet list",
+          "numberedList": "Numbered list",
+          "taskList": "Task list",
+          "heading": "Heading {{level}}",
+          "body": "Body",
+          "quote": "Quote"
+        },
+        "insert": {
+          "title": "Insert",
+          "table": "Table",
+          "callout": "Callout",
+          "horizontalRule": "Horizontal rule",
+          "codeBlock": "Code block"
+        },
+        "table": {
+          "title": "Table",
+          "insertRowAbove": "Insert row above",
+          "insertRowBelow": "Insert row below",
+          "deleteRow": "Delete row",
+          "insertColumnLeft": "Insert column left",
+          "insertColumnRight": "Insert column right",
+          "deleteColumn": "Delete column",
+          "alignLeft": "Align left",
+          "alignCenter": "Align center",
+          "alignRight": "Align right"
+        }
+      },
+      "table": {
+        "addColumn": "Add column to the right",
+        "addRow": "Add row below"
+      }
+    },
     "tasks": {
       "title": "Tasks",
       "today": "Today",

src/main/i18n/locales/ru_RU/ui.json

@@ -358,6 +358,52 @@
     "symbols": "Символы",
     "selectedMultiple": "Выбрано заметок: {{count}}",
     "noSelected": "Нет выбранных заметок",
+    "editor": {
+      "menu": {
+        "format": {
+          "title": "Форматирование",
+          "bold": "Полужирный",
+          "italic": "Курсив",
+          "strikethrough": "Зачёркнутый",
+          "highlight": "Выделение",
+          "code": "Код",
+          "link": "Ссылка",
+          "clearFormatting": "Очистить форматирование"
+        },
+        "paragraph": {
+          "title": "Абзац",
+          "bulletList": "Маркированный список",
+          "numberedList": "Нумерованный список",
+          "taskList": "Список задач",
+          "heading": "Заголовок {{level}}",
+          "body": "Обычный текст",
+          "quote": "Цитата"
+        },
+        "insert": {
+          "title": "Вставить",
+          "table": "Таблица",
+          "callout": "Выноска",
+          "horizontalRule": "Горизонтальная линия",
+          "codeBlock": "Блок кода"
+        },
+        "table": {
+          "title": "Таблица",
+          "insertRowAbove": "Вставить строку выше",
+          "insertRowBelow": "Вставить строку ниже",
+          "deleteRow": "Удалить строку",
+          "insertColumnLeft": "Вставить столбец слева",
+          "insertColumnRight": "Вставить столбец справа",
+          "deleteColumn": "Удалить столбец",
+          "alignLeft": "По левому краю",
+          "alignCenter": "По центру",
+          "alignRight": "По правому краю"
+        }
+      },
+      "table": {
+        "addColumn": "Добавить столбец справа",
+        "addRow": "Добавить строку снизу"
+      }
+    },
     "tasks": {
       "title": "Задачи",
       "today": "Сегодня",

src/renderer/components/notes/NotesEditor.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { NotesEditorMode } from '@/composables/spaces/notes/useNotesApp'
+import type { EditorMenuCommand } from './NotesEditorContextMenu.vue'
 import { createCodeHighlight } from '@/components/cm-extensions/codeHighlight'
 import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
 import {
   applyPendingNavigationUIStateForNote,
   registerNavigationNoteUIState,
@@ -21,6 +23,26 @@ import {
   placeholder,
 } from '@codemirror/view'
 import { GFM, type MarkdownConfig } from '@lezer/markdown'
+import {
+  clearInlineFormatting,
+  getHeadingLevel,
+  insertCallout,
+  insertCodeBlock,
+  insertHorizontalRule,
+  insertLink,
+  insertTable,
+  setBody,
+  setHeading,
+  toggleBold,
+  toggleBulletList,
+  toggleHighlight,
+  toggleInlineCode,
+  toggleItalic,
+  toggleOrderedList,
+  toggleQuote,
+  toggleStrikethrough,
+  toggleTaskList,
+} from './cm-extensions/editorCommands'
 import { editorFocusExtension } from './cm-extensions/editorFocus'
 import { createExternalLinksNavigation } from './cm-extensions/externalLinks'
 import { createHideMarkup } from './cm-extensions/hideMarkup'
@@ -37,8 +59,17 @@ import { Highlight } from './cm-extensions/markdownHighlight'
 import { markdownShortcuts } from './cm-extensions/markdownShortcuts'
 import { createMermaidBlocks } from './cm-extensions/mermaidBlocks'
 import { moveSelectionToAdjacentMermaidSource } from './cm-extensions/mermaidNavigation'
-import { createTableBlocks } from './cm-extensions/tableBlocks'
-import { moveSelectionToAdjacentTableSource } from './cm-extensions/tableNavigation'
+import { revealSelectionFreeze } from './cm-extensions/revealSelection'
+import {
+  createTableBlocks,
+  getActiveTableCellContext,
+  getActiveTableCellEditor,
+  requestTableCellFocus,
+  runActiveTableCellCommand,
+  type TableCellMenuCommand,
+  type TableCellMenuContext,
+} from './cm-extensions/tableBlocks'
+import { moveSelectionToAdjacentTableCell } from './cm-extensions/tableNavigation'
 import { createNotesEditTheme } from './theme'
 
 interface Props {
@@ -123,14 +154,14 @@ const navigationKeymap: KeyBinding[] = [
     key: 'ArrowDown',
     run: view =>
       moveSelectionToAdjacentMermaidSource(view, 'down')
-      || moveSelectionToAdjacentTableSource(view, 'down')
+      || moveSelectionToAdjacentTableCell(view, 'down')
       || moveSelectionToAdjacentImageSource(view, 'down'),
   },
   {
     key: 'ArrowUp',
     run: view =>
       moveSelectionToAdjacentMermaidSource(view, 'up')
-      || moveSelectionToAdjacentTableSource(view, 'up')
+      || moveSelectionToAdjacentTableCell(view, 'up')
       || moveSelectionToAdjacentImageSource(view, 'up'),
   },
 ]
@@ -148,6 +179,9 @@ const presentationTheme = EditorView.theme({
     lineHeight: '1.58',
     maxWidth: '980px',
     margin: '0 auto',
+    // Широкий блок-виджет не должен распирать контент и давать редактору
+    // горизонтальную прокрутку (см. minWidth в createNotesEditThemeStyles).
+    minWidth: '0',
   },
   '.cm-gutters': {
     display: 'none',
@@ -211,14 +245,16 @@ function createEditorState(doc: string): EditorState {
 
   if (!raw) {
     extensions.push(
+      revealSelectionFreeze,
       createMermaidBlocks({
         enabled: true,
         isDark: isDark.value,
         showSourceWhenSelectionInside: editable,
       }),
       createTableBlocks({
         enabled: true,
-        showSourceWhenSelectionInside: editable,
+        editable,
+        isDark: isDark.value,
       }),
       createImageBlocks({
         enabled: true,
@@ -365,6 +401,130 @@ watch(
   noteId => syncNavigationNoteUIStateRegistration(noteId),
 )
 
+// Контекст контекстного меню форматирования, снимается на правый клик.
+const menuHasSelection = ref(false)
+const menuHeadingLevel = ref(0)
+const menuTable = shallowRef<TableCellMenuContext | null>(null)
+let pendingInsertedTableStart: number | null = null
+
+function onEditorContextMenu() {
+  if (!view)
+    return
+
+  // Правый клик в ячейке таблицы: меню работает с вложенным редактором.
+  const cellEditor = getActiveTableCellEditor()
+  const target = cellEditor ?? view
+
+  menuHasSelection.value = !target.state.selection.main.empty
+  menuHeadingLevel.value = cellEditor ? 0 : getHeadingLevel(view)
+  menuTable.value = getActiveTableCellContext()
+}
+
+function onContextMenuCloseAutoFocus(event: Event) {
+  // Фокус должен вернуться во вложенный редактор ячейки (а не на контейнер):
+  // после команды он уже там, а при закрытии меню без команды возвращаем сами.
+  const cellEditor = getActiveTableCellEditor()
+  if (cellEditor) {
+    event.preventDefault()
+    cellEditor.focus()
+    return
+  }
+
+  if (pendingInsertedTableStart === null || !view)
+    return
+
+  event.preventDefault()
+  requestTableCellFocus(view, {
+    tableFrom: pendingInsertedTableStart,
+    selector: 'thead th:first-child',
+    mode: 'select',
+  })
+  pendingInsertedTableStart = null
+}
+
+function onMenuCommand(command: EditorMenuCommand) {
+  if (!view)
+    return
+
+  if (command.startsWith('table-')) {
+    runActiveTableCellCommand(command as TableCellMenuCommand)
+    return
+  }
+
+  // Внутри ячейки таблицы inline-команды идут во вложенный редактор, а
+  // блочные (заголовки, списки, вставка) не имеют смысла — игнорируем.
+  const cellEditor = getActiveTableCellEditor()
+  const inlineTarget = cellEditor ?? view
+  const isInlineCommand = [
+    'bold',
+    'italic',
+    'strikethrough',
+    'highlight',
+    'code',
+    'link',
+    'clear-formatting',
+  ].includes(command)
+
+  if (cellEditor && !isInlineCommand)
+    return
+
+  if (command.startsWith('heading-')) {
+    setHeading(view, Number(command.slice('heading-'.length)))
+    return
+  }
+
+  switch (command) {
+    case 'bold':
+      toggleBold(inlineTarget)
+      break
+    case 'italic':
+      toggleItalic(inlineTarget)
+      break
+    case 'strikethrough':
+      toggleStrikethrough(inlineTarget)
+      break
+    case 'highlight':
+      toggleHighlight(inlineTarget)
+      break
+    case 'code':
+      toggleInlineCode(inlineTarget)
+      break
+    case 'link':
+      insertLink(inlineTarget)
+      break
+    case 'clear-formatting':
+      clearInlineFormatting(inlineTarget)
+      break
+    case 'bullet-list':
+      toggleBulletList(view)
+      break
+    case 'numbered-list':
+      toggleOrderedList(view)
+      break
+    case 'task-list':
+      toggleTaskList(view)
+      break
+    case 'body':
+      setBody(view)
+      break
+    case 'quote':
+      toggleQuote(view)
+      break
+    case 'table':
+      pendingInsertedTableStart = insertTable(view)
+      break
+    case 'callout':
+      insertCallout(view)
+      break
+    case 'horizontal-rule':
+      insertHorizontalRule(view)
+      break
+    case 'code-block':
+      insertCodeBlock(view)
+      break
+  }
+}
+
 onMounted(() => {
   if (!editorContainer.value)
     return
@@ -391,10 +551,25 @@ onUnmounted(() => {
 
 <template>
   <div class="h-full overflow-hidden">
-    <div
-      ref="editorContainer"
-      class="h-full overflow-hidden"
-    />
+    <ContextMenu.ContextMenu>
+      <ContextMenu.ContextMenuTrigger
+        as-child
+        :disabled="isPreviewMode"
+      >
+        <div
+          ref="editorContainer"
+          class="h-full overflow-hidden"
+          @contextmenu="onEditorContextMenu"
+        />
+      </ContextMenu.ContextMenuTrigger>
+      <NotesEditorContextMenu
+        :has-selection="menuHasSelection"
+        :heading-level="menuHeadingLevel"
+        :table="menuTable"
+        @close-auto-focus="onContextMenuCloseAutoFocus"
+        @command="onMenuCommand"
+      />
+    </ContextMenu.ContextMenu>
     <NotesInternalLinksOverlay />
   </div>
 </template>