@sovann72-dev/lynqify-ui 1.0.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/package.json

@@ -0,0 +1,240 @@
+{
+  "name": "@sovann72-dev/lynqify-ui",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "start:local": "env-cmd -f .env.local vite",
+    "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build",
+    "build:win": "set NODE_OPTIONS=--max_old_space_size=8192 && vite build",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx && yarn check-types",
+    "lint:fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix",
+    "lint:prettier": "prettier --write .",
+    "check-types": "tsc --project tsconfig.json --pretty --noEmit",
+    "test": "vite test",
+    "vitest": "vitest",
+    "cy:open": "cypress open",
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "build:analyze": "ANALYZE=true vite build",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,scss,css}": [
+      "prettier --write"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@casl/ability": "^6.7.2",
+    "@casl/react": "^4.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@floating-ui/dom": "^1.6.0",
+    "@hocuspocus/provider": "^2.13.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@mui/icons-material": "^5.16.4",
+    "@mui/material": "^5.16.4",
+    "@mui/x-date-pickers": "^7.10.0",
+    "@posthog/react": "^1.5.2",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@react-google-maps/api": "^2.20.8",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-table": "^8.12.0",
+    "@tiptap/core": "^3.22.5",
+    "@tiptap/extension-bold": "^3.22.5",
+    "@tiptap/extension-color": "^3.22.5",
+    "@tiptap/extension-document": "^3.22.5",
+    "@tiptap/extension-file-handler": "^3.22.5",
+    "@tiptap/extension-hard-break": "^3.22.5",
+    "@tiptap/extension-heading": "^3.22.5",
+    "@tiptap/extension-highlight": "^3.22.5",
+    "@tiptap/extension-image": "^3.22.5",
+    "@tiptap/extension-italic": "^3.22.5",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/extension-list": "^3.22.5",
+    "@tiptap/extension-mention": "^3.22.5",
+    "@tiptap/extension-paragraph": "^3.22.5",
+    "@tiptap/extension-table": "^3.22.5",
+    "@tiptap/extension-text": "^3.22.5",
+    "@tiptap/extension-text-align": "^3.22.5",
+    "@tiptap/extension-text-style": "^3.22.5",
+    "@tiptap/extension-underline": "^3.22.5",
+    "@tiptap/extensions": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/suggestion": "^3.22.5",
+    "@types/react-input-mask": "^3.0.6",
+    "@uiw/react-color-sketch": "^2.3.1",
+    "@userback/react": "^0.3.7",
+    "axios": "^1.6.7",
+    "class-variance-authority": "^0.7.0",
+    "clipboard-polyfill": "^4.0.2",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "dayjs": "^1.11.10",
+    "dompurify": "^3.3.3",
+    "env-cmd": "^10.1.0",
+    "exceljs": "^4.4.0",
+    "heic2any": "^0.0.4",
+    "html2canvas": "^1.4.1",
+    "i18next": "^23.11.5",
+    "input-otp": "^1.2.4",
+    "libphonenumber-js": "^1.10.56",
+    "lightbox.js-react": "1.1.7",
+    "lodash": "^4.17.21",
+    "lottie-react": "^2.4.0",
+    "material-react-table": "^2.13.0",
+    "mathjs": "^14.0.1",
+    "mobx": "^6.12.5",
+    "mobx-react": "^9.1.0",
+    "platform": "^1.3.6",
+    "posthog-js": "^1.310.1",
+    "qs": "^6.14.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-datepicker": "^8.2.0",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.3.8",
+    "react-easy-crop": "^5.0.8",
+    "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.50.1",
+    "react-html-string": "^0.1.1",
+    "react-i18next": "^14.1.2",
+    "react-icons": "^5.0.1",
+    "react-infinite-scroll-hook": "^4.1.1",
+    "react-input-mask": "^3.0.0-alpha.2",
+    "react-international-phone": "^4.3.0",
+    "react-router-dom": "^6.24.1",
+    "react-signature-pad-wrapper": "^3.3.4",
+    "react-to-print": "^3.1.0",
+    "react-toastify": "^10.0.4",
+    "react-tooltip": "^5.26.4",
+    "react-virtuoso": "^4.14.1",
+    "recharts": "^2.12.7",
+    "sass": "^1.77.6",
+    "shadcn-ui": "^0.8.0",
+    "styled-components": "^6.1.8",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "tiny-invariant": "^1.3.3",
+    "use-file-picker": "^2.1.1",
+    "uuid": "^9.0.1",
+    "vaul": "^0.9.0",
+    "web-vitals": "^2.1.4",
+    "y-prosemirror": "^1.3.7",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.27",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@commitlint/cli": "^20.5.3",
+    "@commitlint/config-conventional": "^20.5.3",
+    "@eslint/js": "^9.5.0",
+    "@faker-js/faker": "^9.6.0",
+    "@nabla/vite-plugin-eslint": "^2.0.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^16.18.80",
+    "@types/platform": "^1.3.6",
+    "@types/qs": "^6.14.0",
+    "@types/react": "^18.2.55",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.2.19",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "cypress": "^14.2.0",
+    "eslint": "8",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-check-file": "^2.8.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-playwright": "^1.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "rollup-plugin-visualizer": "6.0.5",
+    "source-map-explorer": "^2.5.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.5.4",
+    "typescript-eslint": "^7.13.0",
+    "vite": "^6.1.0",
+    "vite-plugin-checker": "^0.9.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.7"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/src/components/RichTextEditor/Extension/Indent/backspace.indent.handlers.ts

@@ -0,0 +1,77 @@
+import { type ShortcutHandler, isListParent, isTextNode } from './indent.types';
+
+/**
+ * WHY: When the cursor is at the very start of an indented text block,
+ * Backspace should visually un-indent the line rather than delete backwards.
+ * This mirrors how Google Docs treats Backspace at the start of an indented line.
+ */
+export const handleBackspaceOutdentAtLineStart: ShortcutHandler = ({
+  editor,
+  $from,
+  currentNode,
+}) => {
+  const isAtStart = $from.pos === $from.start();
+  const hasIndent = currentNode.attrs.indent > 0;
+  const isIndentedTextNode = isTextNode(currentNode.type.name) && hasIndent;
+
+  if (isIndentedTextNode && isAtStart) {
+    return editor.commands.outdent();
+  }
+
+  return false;
+};
+
+/**
+ * WHY: An empty indented line has no meaningful content to merge with the previous block.
+ * Deleting it entirely (rather than joining it) keeps the document structure clean.
+ */
+export const handleBackspaceDeleteEmptyIndentedLine: ShortcutHandler = ({
+  state,
+  view,
+  $from,
+  currentNode,
+}) => {
+  const isEmpty = currentNode.content.size === 0;
+  const hasIndent = currentNode.attrs.indent > 0;
+  const isEmptyIndentedTextNode = isTextNode(currentNode.type.name) && hasIndent && isEmpty;
+
+  if (!isEmptyIndentedTextNode) return false;
+
+  const nodePos = $from.before($from.depth);
+  const tr = state.tr;
+  tr.delete(nodePos, nodePos + currentNode.nodeSize);
+  view.dispatch(tr);
+  return true;
+};
+
+/**
+ * WHY: Backspace on an empty unindented paragraph right after a list would normally
+ * cause ProseMirror to merge the paragraph into the last list item, which is confusing.
+ * We delete the empty paragraph outright to prevent that unwanted merge.
+ */
+export const handleBackspaceDeleteEmptyParagraphAfterList: ShortcutHandler = ({
+  state,
+  view,
+  $from,
+  currentNode,
+}) => {
+  const isAtStart = $from.pos === $from.start();
+  const isEmpty = currentNode.content.size === 0;
+  const hasIndent = currentNode.attrs.indent > 0;
+
+  const nodePos = $from.before($from.depth);
+  const prevNode = state.doc.resolve(nodePos).nodeBefore;
+  const prevNodeIsList = prevNode != null && isListParent(prevNode.type.name);
+
+  const isEmptyUnindentedTextNode =
+    isTextNode(currentNode.type.name) && !hasIndent && isEmpty && isAtStart;
+
+  if (isEmptyUnindentedTextNode && prevNodeIsList) {
+    const tr = state.tr;
+    tr.delete(nodePos, nodePos + currentNode.nodeSize);
+    view.dispatch(tr);
+    return true;
+  }
+
+  return false;
+};

package/src/components/RichTextEditor/Extension/Indent/indent.extension.ts

@@ -0,0 +1,285 @@
+import { Plugin, Transaction } from '@tiptap/pm/state';
+import { CommandProps, Extension } from '@tiptap/react';
+
+import { handleOutdentMultiNodeSelection } from 'src/components/RichTextEditor/Extension/Indent/outdent.handlers';
+import {
+  handleBackspaceOutdentAtLineStart,
+  handleBackspaceDeleteEmptyIndentedLine,
+  handleBackspaceDeleteEmptyParagraphAfterList,
+} from './backspace.indent.handlers';
+import {
+  handleIndentMultiNodeSelection,
+  handleIndentList,
+  handleIndentTextNode,
+} from './indent.handlers';
+import {
+  ShortcutContext,
+  isListParent,
+  isTextNode,
+  runChain,
+  runIndentChain,
+} from './indent.types';
+import {
+  handleShiftTabMultiNodeSelection,
+  handleShiftTabFromEmptyParagraphAfterList,
+  handleShiftTabInTopLevelListItem,
+} from './shifttab.indent.handlers';
+import {
+  handleTabMultiNodeSelection,
+  handleTabSingleNodeTextSelection,
+  handleTabInsideListItem,
+  handleTabMidTextCursor,
+} from './tab.indent.handlers';
+
+type IndentOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    indent: {
+      indent: () => ReturnType;
+      outdent: () => ReturnType;
+      outdentShiftTab: () => ReturnType;
+      increaseIndent: () => ReturnType;
+      decreaseIndent: () => ReturnType;
+      _handleEnterKeyDown: () => ReturnType;
+      _handleSpaceKeyDown: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * Builds a ShortcutContext from the current editor state.
+ * Resolved once per keypress so every handler in the chain sees the same snapshot.
+ */
+function buildContext(editor: any): ShortcutContext {
+  const { state, view } = editor;
+  const { $from, $to, empty: selectionIsEmpty } = state.selection;
+  return { editor, state, view, $from, $to, selectionIsEmpty, currentNode: $from.node() };
+}
+
+/**
+ * Adds Google-Doc-style indentation to paragraphs, headings, and lists.
+ *
+ * Indentation is stored as a `data-indent` attribute and rendered as
+ * `padding-left` on the node. Structural list nesting (sinkListItem / liftListItem)
+ * is handled separately by the List extension and is not affected by this attribute.
+ */
+export const IndentExtension = Extension.create<IndentOptions>({
+  name: 'indent',
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.commands._handleEnterKeyDown(),
+
+      Tab: () => {
+        const context = buildContext(this.editor);
+        const handled = runChain(
+          [
+            handleTabMultiNodeSelection,
+            handleTabSingleNodeTextSelection,
+            handleTabInsideListItem,
+            handleTabMidTextCursor,
+          ],
+          context,
+        );
+        return handled || this.editor.commands.indent();
+      },
+
+      Backspace: () => {
+        const context = buildContext(this.editor);
+        return runChain(
+          [
+            handleBackspaceOutdentAtLineStart,
+            handleBackspaceDeleteEmptyIndentedLine,
+            handleBackspaceDeleteEmptyParagraphAfterList,
+          ],
+          context,
+        );
+      },
+
+      'Shift-Tab': () => {
+        const context = buildContext(this.editor);
+        const handled = runChain(
+          [
+            handleShiftTabMultiNodeSelection,
+            handleShiftTabFromEmptyParagraphAfterList,
+            handleShiftTabInTopLevelListItem,
+          ],
+          context,
+        );
+        return handled || this.editor.chain().outdentShiftTab().run();
+      },
+
+      Space: () => this.editor.commands._handleSpaceKeyDown(),
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        // WHY: When a paragraph/heading inside a listItem gets an indent attribute (e.g. from a
+        // paste or undo), the indent belongs on the parent list node, not the text node inside it.
+        // This plugin corrects that automatically on every document change.
+        appendTransaction: (transactions, _oldState, newState) => {
+          const hasDocChanged = transactions.some((t) => t.docChanged);
+          if (!hasDocChanged) return null;
+
+          let tr: Transaction | null = null;
+
+          newState.doc.descendants((node, pos) => {
+            const isIndentedTextInsideDocument =
+              isTextNode(node.type.name) && (node?.attrs?.indent ?? 0) > 0;
+            if (!isIndentedTextInsideDocument) return;
+
+            const resolvedPos = newState.doc.resolve(pos);
+            const isDirectChildOfListItem = resolvedPos.parent.type.name === 'listItem';
+            if (!isDirectChildOfListItem) return;
+
+            // Walk up to find the enclosing bulletList or orderedList position.
+            // WHY: resolvedPos.start(d) gives the first content position inside the node,
+            // so we subtract 1 to get the node's own document position.
+            let enclosingListPos: number | null = null;
+            for (let d = resolvedPos.depth - 1; d > 0; d--) {
+              if (isListParent(resolvedPos.node(d).type.name)) {
+                enclosingListPos = resolvedPos.start(d) - 1;
+                break;
+              }
+            }
+
+            if (enclosingListPos === null || enclosingListPos < 0) return;
+
+            if (!tr) tr = newState.tr;
+
+            const indentToPromote = node.attrs.indent;
+            tr.setNodeAttribute(pos, 'indent', 0); // Clear from text node
+            tr.setNodeAttribute(enclosingListPos, 'indent', indentToPromote); // Promote to list
+          });
+
+          return tr;
+        },
+      }),
+    ];
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types ?? ['orderedList', 'bulletList', 'paragraph', 'heading'],
+        attributes: {
+          indent: {
+            default: 1,
+            parseHTML: (element) => parseInt(element.getAttribute('data-indent') || '1', 10),
+            renderHTML: (attributes) => {
+              if (!attributes?.indent) return {};
+              return { style: `padding-left: ${attributes.indent * 20}px` };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      _handleEnterKeyDown: () => (commands: CommandProps) => {
+        const { tr, state, dispatch } = commands;
+        const { $from } = state.selection;
+        const currentNode = $from.node();
+
+        const isIndentedParagraph =
+          currentNode?.type?.name === 'paragraph' && currentNode.attrs.indent;
+        if (!isIndentedParagraph) return false;
+
+        const currentIndent = currentNode.attrs.indent;
+        tr.split($from.pos);
+        tr.setNodeAttribute(tr.selection.$from.before(), 'indent', currentIndent);
+        tr.scrollIntoView();
+        tr.setMeta('addToHistory', false);
+        dispatch?.(tr);
+        return true;
+      },
+
+      _handleSpaceKeyDown: () => () => false,
+
+      indent: () => (commands: CommandProps) => {
+        return runIndentChain(
+          [handleIndentMultiNodeSelection, handleIndentList, handleIndentTextNode],
+          commands,
+        );
+      },
+
+      // WHY: `outdent` is used by Backspace. It only reduces indent when the cursor
+      // is at the very start of the node, preventing accidental outdenting mid-sentence.
+      outdent: () => (commands: CommandProps) => {
+        const { state, view, tr, dispatch } = commands;
+        const { $from, $to, empty: selectionIsEmpty } = state.selection;
+        const context: ShortcutContext = {
+          editor: commands.editor,
+          state,
+          view,
+          $from,
+          $to,
+          selectionIsEmpty,
+          currentNode: $from.node(),
+        };
+
+        if (handleOutdentMultiNodeSelection(context)) return true;
+
+        const currentNode = $from.node();
+        const isIndentedTextNode =
+          isTextNode(currentNode.type.name) && currentNode.attrs.indent > 0;
+        if (!isIndentedTextNode) return false;
+
+        const isCursorAtLineStart = $from.pos === $from.start();
+        if (!isCursorAtLineStart) return false;
+
+        const newIndent = Math.max(0, currentNode.attrs.indent - 1);
+        tr.setNodeAttribute($from.before($from.depth), 'indent', newIndent);
+        tr.setMeta('addToHistory', false);
+        dispatch?.(tr);
+        return true;
+      },
+
+      // WHY: `outdentShiftTab` is used by Shift+Tab. Unlike `outdent`, it reduces indent
+      // regardless of where the cursor is — Shift+Tab is an explicit intent to un-indent.
+      outdentShiftTab: () => (commands: CommandProps) => {
+        const { state, tr, dispatch } = commands;
+        const { $from } = state.selection;
+        const currentNode = $from.node();
+
+        const isIndentedTextNode =
+          isTextNode(currentNode.type.name) && currentNode.attrs.indent > 0;
+        if (!isIndentedTextNode) return false;
+
+        const newIndent = Math.max(0, currentNode.attrs.indent - 1);
+        tr.setNodeAttribute($from.before($from.depth), 'indent', newIndent);
+        tr.setMeta('addToHistory', false);
+        dispatch?.(tr);
+        return true;
+      },
+
+      increaseIndent:
+        () =>
+        ({ commands }: CommandProps) => {
+          return commands.indent();
+        },
+      decreaseIndent: () => (commands: CommandProps) => {
+        const { state, view } = commands;
+        const { $from, $to, empty: selectionIsEmpty } = state.selection;
+        const context: ShortcutContext = {
+          editor: commands.editor,
+          state,
+          view,
+          $from,
+          $to,
+          selectionIsEmpty,
+          currentNode: $from.node(),
+        };
+        if (handleOutdentMultiNodeSelection(context)) return true;
+        return commands.chain().outdentShiftTab().run();
+      },
+    };
+  },
+});