Fix for Drag and Drop Functionality in Outliner Plugin

Hey guys,

I encountered an issue where drag and drop feature of the Outliner plugin wasn’t working. Then saw it seems to be a bug described here: [BUG] In Obsidian v1.4.5, frontmatter and Drag-and-Drag functions cannot be used at the same time · Issue #480 · vslinko/obsidian-outliner · GitHub.

I ended up using ChatGPT to fix the issue. I don’t code at all so I also used ChatGPT to make the rest of this post as a guide to what the solution was because it’s working for me now.


Solution: I made a script adjustment to bypass this issue. Here’s what I did:

  1. Modified the calculateLeftPadding method to detect the end of the YAML front matter by looking for the second occurrence of ---.
  2. Adjusted drag operations to start right after the front matter, using the position found above.

Here’s the adjusted script snippet (replaced the original calculateLeftPadding method with this script, found in line 1363 in the main.js file of Outliner version 4.8.0):

calculateLeftPadding() {
    const content = this.editor.getValue();
    const frontMatterEndIndex = content.indexOf('\n---', 1);
    const posAfterFrontMatter = frontMatterEndIndex !== -1 ? this.editor.posToOffset({line: content.substring(0, frontMatterEndIndex + 1).split('\n').length, ch: 0}) : 0;
    const coords = this.view.coordsAtPos(posAfterFrontMatter, -1);
    this.leftPadding = coords ? coords.left : 0;
}

The updated script modification is designed to address the issue of drag and drop functionality being affected by YAML front matter in Obsidian documents. Here’s a breakdown of what each part of the script does:

  1. Reads Document Content: this.editor.getValue(); grabs the entire text of the current document open in the editor.
  2. Finds End of Front Matter: Searches for the first occurrence of --- after the beginning, which marks the end of the front matter section.
  3. Calculates Position After Front Matter: Determines the document’s position right after the front matter, preparing for the correct calculation of drag and drop starting points.
  4. Gets Coordinates for Dragging: this.view.coordsAtPos(posAfterFrontMatter, -1); calculates the visual position for the start of the drag operation, based on the document structure post-front matter.
  5. Sets Left Padding for Dragging: Adjusts the left padding based on the calculated position, ensuring that the drag operation starts in the correct place, visually bypassing any front matter.

Why It Works: This approach effectively allows the plugin to “ignore” the front matter by adjusting where the drag operation considers the start of the document. It ensures that the plugin’s functionality remains consistent, whether or not the front matter is present, by aligning the drag operation’s starting point with the actual content start. This solution is particularly effective because it uses the predictable structure of YAML front matter to adjust functionality dynamically, ensuring compatibility across documents with varying front matter lengths.


Hope this helps! Please let me know if you have any other suggestions for improvement.