@sovann72-dev/lynqify-ui 1.0.0 → 1.0.1

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

@@ -1,285 +0,0 @@
-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();
-      },
-    };
-  },
-});

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

@@ -1,121 +0,0 @@
-import { TextSelection } from '@tiptap/pm/state';
-import type { CommandProps } from '@tiptap/react';
-
-import { isListParent, isTextNode } from './indent.types';
-import type { IndentHandler } from './indent.types';
-
-/**
- * Multi-node selection handler: bulk-bump indent on all selected nodes.
- * Triggers when >1 indentable node (text or list) exists in the selection range.
- */
-export const handleIndentMultiNodeSelection: IndentHandler = (commands: CommandProps) => {
-  const { tr, state, dispatch } = commands;
-  const { selection } = state;
-  const { $from, $to } = selection;
-
-  if (selection.empty) return false;
-
-  // Search for indentable node
-  let indentableNodeCount = 0;
-
-  // Traverse for nodes in between the selection
-  state.doc.nodesBetween($from.pos, $to.pos, (node: any) => {
-    if (isListParent(node.type.name) || isTextNode(node.type.name)) indentableNodeCount++;
-  });
-
-  // Early return if can't find the indentable node
-  if (indentableNodeCount <= 1) return false;
-
-  // Construct set for processing the to-be indented positions
-  const processedPositions = new Set<number>();
-  let hasApplied = false;
-
-  // Traverse through again
-  state.doc.nodesBetween($from.pos, $to.pos, (node: any, pos: number) => {
-    // Target only list/text elements
-    const isTarget = isListParent(node.type.name) || isTextNode(node.type.name);
-    if (!isTarget || processedPositions.has(pos)) return true;
-
-    processedPositions.add(pos);
-    tr.setNodeAttribute(pos, 'indent', (node.attrs?.indent ?? 0) + 1);
-    hasApplied = true;
-    return false;
-  });
-
-  if (hasApplied) {
-    tr.setMeta('addToHistory', true);
-    dispatch?.(tr);
-    return true;
-  }
-
-  return false;
-};
-
-/**
- * List handler: single-item lists get visual indent bump, multi-item lists get structural sink.
- * Walks up the ancestor tree from cursor to find the nearest enclosing list.
- */
-export const handleIndentList: IndentHandler = (commands: CommandProps) => {
-  const { tr, state, dispatch } = commands;
-  const { selection } = state;
-  const { $from } = selection;
-
-  // Walk up the ancestor tree from the cursor to find the nearest enclosing list.
-  let enclosingList: any = null;
-  let enclosingListItem: any = null;
-
-  for (let depth = $from.depth; depth > 0; depth--) {
-    const ancestor = $from.node(depth);
-    if (isListParent(ancestor.type.name)) {
-      enclosingList = { ...ancestor, pos: $from.before(depth) };
-      enclosingListItem = { ...$from.node(depth + 1), pos: $from.before(depth + 1) };
-      break;
-    }
-  }
-
-  if (!enclosingList || !enclosingListItem) return false;
-
-  // WHY: A list with only one item cannot be structurally sunk further (no sibling to nest under).
-  // We increase the visual indent attribute instead, which mirrors Google Docs behavior.
-  const listHasOnlyOneItem = enclosingList.content?.childCount === 1;
-  if (listHasOnlyOneItem && selection instanceof TextSelection) {
-    const existingIndent = enclosingList.attrs.indent ?? 0;
-    tr.setNodeAttribute(enclosingList.pos, 'indent', existingIndent + 1);
-    tr.setMeta('addToHistory', false);
-    dispatch?.(tr);
-    return true;
-  }
-
-  // WHY: For multi-item lists, we structurally sink the list item under its predecessor
-  // (standard list nesting). Lists don't require the cursor to be at line start.
-  commands
-    .chain()
-    .focus()
-    .sinkListItem('listItem')
-    .updateAttributes('bulletList', { indent: 1 })
-    .updateAttributes('orderedList', { indent: 1 })
-    .run();
-  return true;
-};
-
-/**
- * Text node handler: bump indent on plain paragraphs and headings (not inside a list).
- * Only triggers on a blinking cursor (TextSelection).
- */
-export const handleIndentTextNode: IndentHandler = (commands: CommandProps) => {
-  const { tr, state, dispatch } = commands;
-  const { selection } = state;
-  const { $from } = selection;
-
-  const currentNode = $from.node();
-  const isIndentableTextNode =
-    isTextNode(currentNode.type.name) && selection instanceof TextSelection;
-
-  if (!isIndentableTextNode) return false;
-
-  const existingIndent = currentNode.attrs.indent ?? 0;
-  tr.setNodeAttribute($from.before($from.depth), 'indent', existingIndent + 1);
-  tr.setMeta('addToHistory', false);
-  dispatch?.(tr);
-  return true;
-};

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

@@ -1,8 +0,0 @@
-/**
- * Predicates that classify ProseMirror node types used throughout the indent logic.
- * Kept as plain functions (not constants/enums) so TypeScript infers the correct
- * string-narrowing type when used in conditional branches.
- */
-export const isListParent = (name: string) => name === 'bulletList' || name === 'orderedList';
-export const isList = (name: string) => name === 'listItem';
-export const isTextNode = (name: string) => name === 'paragraph' || name === 'heading';

package/src/components/RichTextEditor/Extension/Indent/outdent.handlers.ts

@@ -1,71 +0,0 @@
-import { NodeRange } from '@tiptap/pm/model';
-import { liftTarget } from '@tiptap/pm/transform';
-
-import { ShortcutHandler, isListParent, isList, isTextNode } from './indent.types';
-
-/**
- * WHY: When a user highlights across multiple lines or list items,
- * we want to bulk-decrease their indentation level or lift them structurally out of nesting.
- */
-export const handleOutdentMultiNodeSelection: ShortcutHandler = ({
-  state,
-  view,
-  $from,
-  $to,
-  selectionIsEmpty,
-}) => {
-  if (selectionIsEmpty) return false;
-
-  let selectedIndentableNodesCount = 0;
-  state.doc.nodesBetween($from.pos, $to.pos, (node: any) => {
-    if (isList(node.type.name) || isTextNode(node.type.name)) {
-      selectedIndentableNodesCount++;
-    }
-  });
-
-  const isMultiNodeSelection = selectedIndentableNodesCount > 1;
-  if (!isMultiNodeSelection) return false;
-
-  const { tr, doc } = state;
-  let hasAppliedAnyIndent = false;
-  const processedListPositions = new Set<number>();
-
-  doc.nodesBetween($from.pos, $to.pos, (node: any, pos: number) => {
-    if (isListParent(node.type.name) && (node.attrs.indent ?? 0) > 0) {
-      if (!processedListPositions.has(pos)) {
-        processedListPositions.add(pos);
-
-        const currentIndent = node.attrs.indent ?? 0;
-        tr.setNodeAttribute(pos, 'indent', Math.max(0, currentIndent - 1));
-        hasAppliedAnyIndent = true;
-
-        const $start = state.doc.resolve(pos);
-        const $end = state.doc.resolve(pos + node.nodeSize);
-        const range = new NodeRange($start, $end, $start.depth);
-        const target = liftTarget(range);
-
-        if (target != null) {
-          tr.lift(range, target);
-          hasAppliedAnyIndent = true;
-        }
-      }
-      return false; // Prevent recursing into children of processed nodes
-    }
-
-    if (isTextNode(node.type.name) && (node.attrs.indent ?? 0) > 0) {
-      const currentIndent = node.attrs.indent ?? 0;
-      tr.setNodeAttribute(pos, 'indent', Math.max(0, currentIndent - 1));
-      hasAppliedAnyIndent = true;
-    }
-
-    return true;
-  });
-
-  if (hasAppliedAnyIndent) {
-    tr.setMeta('addToHistory', true);
-    view.dispatch(tr);
-    return true;
-  }
-
-  return false;
-};

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

@@ -1,133 +0,0 @@
-import { NodeRange } from '@tiptap/pm/model';
-import { TextSelection } from '@tiptap/pm/state';
-import { liftTarget } from '@tiptap/pm/transform';
-
-import { ShortcutHandler, isListParent, isList, isTextNode } from './indent.types';
-
-/**
- * WHY: When a user highlights across multiple lines or list items,
- * we want to bulk-decrease their indentation level or lift them structurally out of nesting.
- */
-export const handleShiftTabMultiNodeSelection: ShortcutHandler = ({
-  state,
-  view,
-  $from,
-  $to,
-  selectionIsEmpty,
-}) => {
-  if (selectionIsEmpty) return false;
-
-  let selectedIndentableNodesCount = 0;
-  state.doc.nodesBetween($from.pos, $to.pos, (node: any) => {
-    if (isList(node.type.name) || isTextNode(node.type.name)) {
-      selectedIndentableNodesCount++;
-    }
-  });
-
-  const isMultiNodeSelection = selectedIndentableNodesCount > 1;
-  if (!isMultiNodeSelection) return false;
-
-  const { tr, doc } = state;
-  let hasAppliedAnyIndent = false;
-  const processedListPositions = new Set<number>();
-
-  doc.nodesBetween($from.pos, $to.pos, (node: any, pos: number) => {
-    if (isListParent(node.type.name) && (node.attrs.indent ?? 0) > 0) {
-      if (!processedListPositions.has(pos)) {
-        processedListPositions.add(pos);
-
-        const currentIndent = node.attrs.indent ?? 0;
-        tr.setNodeAttribute(pos, 'indent', Math.max(0, currentIndent - 1));
-        hasAppliedAnyIndent = true;
-
-        const $start = state.doc.resolve(pos);
-        const $end = state.doc.resolve(pos + node.nodeSize);
-        const range = new NodeRange($start, $end, $start.depth);
-        const target = liftTarget(range);
-
-        if (target != null) {
-          tr.lift(range, target);
-          hasAppliedAnyIndent = true;
-        }
-      }
-      return false; // Prevent recursing into children of processed nodes
-    }
-
-    if (isTextNode(node.type.name) && (node.attrs.indent ?? 0) > 0) {
-      const currentIndent = node.attrs.indent ?? 0;
-      tr.setNodeAttribute(pos, 'indent', Math.max(0, currentIndent - 1));
-      hasAppliedAnyIndent = true;
-    }
-
-    return true;
-  });
-
-  if (hasAppliedAnyIndent) {
-    tr.setMeta('addToHistory', true);
-    view.dispatch(tr);
-    return true;
-  }
-
-  return false;
-};
-
-/**
- * WHY: A list item at the outermost structural level (no enclosing parent list) with no visual
- * indent has nothing to reduce. Without this guard, the event falls through to TipTap's List
- * extension which calls liftListItem and ejects the item out of the list entirely.
- */
-export const handleShiftTabInTopLevelListItem: ShortcutHandler = ({ $from, selectionIsEmpty }) => {
-  if (!selectionIsEmpty) return false;
-
-  let foundList = false;
-  let hasParentList = false;
-  let enclosingListIndent = 0;
-
-  for (let d = $from.depth; d > 0; d--) {
-    const node = $from.node(d);
-    if (isListParent(node.type.name)) {
-      if (!foundList) {
-        foundList = true;
-        enclosingListIndent = node.attrs?.indent ?? 0;
-      } else {
-        hasParentList = true;
-        break;
-      }
-    }
-  }
-
-  const isInTopLevelList = foundList && !hasParentList;
-  if (!isInTopLevelList) return false;
-
-  return enclosingListIndent === 0;
-};
-
-/**
- * WHY: An empty trailing paragraph after a list has no indent to reduce, so Shift-Tab
- * falls through all handlers and the browser steals focus. We intercept and move the
- * cursor into the last list item instead, which matches the user's intent of "go back in."
- */
-export const handleShiftTabFromEmptyParagraphAfterList: ShortcutHandler = ({
-  state,
-  view,
-  $from,
-  currentNode,
-  selectionIsEmpty,
-}) => {
-  if (!selectionIsEmpty) return false;
-
-  const isEmptyParagraph = currentNode.type.name === 'paragraph' && currentNode.content.size === 0;
-  if (!isEmptyParagraph) return false;
-
-  const nodePos = $from.before($from.depth);
-  const prevNode = state.doc.resolve(nodePos).nodeBefore;
-  const isPrecededByList = prevNode != null && isListParent(prevNode.type.name);
-  if (!isPrecededByList) return false;
-
-  // WHY: nodePos - 1 is the last position inside the list's closing boundary.
-  // TextSelection.near with bias -1 resolves it to the end of the last list item's text content.
-  const $endOfList = state.doc.resolve(nodePos - 1);
-  const tr = state.tr.setSelection(TextSelection.near($endOfList, -1));
-  view.dispatch(tr);
-  return true;
-};