I need help…
I am a beginner to Java/TypeScript (and to coding in general) and have been struggling to complete the first step of this Obsidian plugin (which I figure you know about). For context, I would like to create a drag handle with similar functions to the drag handle in Notion. This “step 1” is to render a widget at the front of every line in the editor. Obsidian has a built-in widget that I would like to copy the style of for collapsing headings and lists. Their widget is rendered when the document but is invisible, then appears when the line it is on is hovered over. I could use some tips for that, but I can’t seem to find the right API or calls to do the following steps:
- Create a custom widget extending WidgetType (this I think I have)
- Establish a state field to handle the decorations (despite trying to follow the examples, I just cant wrap my head around it…)
- Iterate over the lines in the editor and instantiate an invisible widget (I can’t figure out how to iterate over the editor or set a new widget on that line or how to push those changes to the state field or dispatch the changes (if thats something I need to do for that?).
- Get the line that the mouse itself is hovered over (likely using the mouse event onenter) and making the widget visible on that line.
- Access the date of the line that the widget is on so that the text on that line can be modified.
I have looked at all the examples, the API for CodeMirror and Obsidian, had two friends attempt to help, and looked at several plugins that do something similar as a reference. But, no matter what I seem to research, find, or test, I just cannot get this to happen. Any help would be greatly appreciated…
I have attempted to rewrite the plugin several times, but here is what I have so far:
// All the imports I could find just in case, to be removed later
import { Plugin, Editor, MarkdownView, setIcon, addIcon, Menu, App } from 'obsidian';
import { gutter, GutterMarker, ViewPlugin, ViewUpdate, WidgetType, Decoration, DecorationSet, EditorView } from '@codemirror/view';
import { StateField, StateEffect, RangeSet, RangeSetBuilder, EditorState, Facet, Extension, Transaction } from "@codemirror/state";
import { syntaxTree } from '@codemirror/language'; // Does not seem to be a valid
export class HandleWidget extends WidgetType { // Creates the drag handle class to be instanced
constructor(
readonly app: App, // Why is this needed?
readonly view: EditorView,
readonly from: number,
readonly to: number
) {
super(); // Also not sure why this is needed but it is required
}
eq(other: HandleWidget) { // Checks other widgets for being in the same place on the same doc and prevents duplicates
return other.view === this.view && other.from === this.from && other.to === this.to;
}
toDOM() { // Creates the widget's DOM element
const handle = document.createSpan("drag-handle");
setIcon(handle, "⠿"); // May not work?
//handle..addEventListener("click", (evt) => {
//const menu = new Menu();;
//}
//handle.registerDomEvent(document, 'dragstart', (event : DragEvent) => this.handleHandler(event), true);
return handle;
}
ignoreEvent() { // Ensures no events should be ignored by the widget
return false;
}
}
export default class Blocks extends Plugin { // The main plugin class
private dragHandle: HandleWidget;
private changesBuffer = []; // Holds document changes to be dispatched to the state manager, format: [{ from: start, change }, { from: start, to: end, change }]
async onload() { // Things that happen on plugin load
console.log('Blocks Plugin Loaded') //REMOVE
this.initializeHandles();
//this.registerDomEvent(document, 'mouseenter', (event : MouseEvent) => this.getSelection(event), true); // On hover, run the function
}
async onunload() { // Things that will be unloaded when the plugin is disabled
console.log('Blocks Plugin Unoaded') //REMOVE
}
isEditor() { // Check to see if we are in a markdown file editor
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (!view) { // If we are not in the markdown view, fail the check and stop the function
console.log('Not in MarkdownView') //REMOVE
return false;
}
console.log('In MarkdownView') //REMOVE
return true;
}
initializeHandles() {
}
getSelection(event: MouseEvent, view: EditorView) { // FOR NOW: just gets the line that the mouse is on and calls renderHandle
const target = event.target;
if (this.isEditor()) {
const pos = view.coordsAtPos(target);
const lineNumber = pos.line + 1; // CodeMirror lines are zero-indexed
//const line = view?.editor.state.doc.lineAt(event.from).number; // Theoretically gets the line at the mouse position
//this.renderHandle(event, line);
}
}
changeType(event: MouseEvent) { // FOR NOW: just gets the line that the mouse is on and calls renderHandle
}
renderHandle(event: MouseEvent, line: number) { // On line enter, render the handle
if (this.dragHandle) { // Remove the prior drag handle if it exists
this.dragHandle.destroy(this.dragHandle);
}
this.dragHandle = new HandleWidget(this.app, this.view, 1, 1);
}
handleHandler(event: DragEvent) { // FOR NOW: just gets the line that the mouse is on and calls renderHandle
}
decorateLines(view: MarkdownView) { // Decorates the lines selected with a highlight
const highlight = Decoration.line({ // NOT 100% SURE WHAT ANY OF THIS DOES... Don't think I can use line decorations for an intractable element
attributes: {class: "handle-highlight"} // highlight needs to be a CSS class, I want to use the default for Obsidian but can't find it
});
let builder = new RangeSetBuilder<Decoration>();
for (let {from, to} of view.visibleRanges) {
for (let pos = from; pos <= to;) {
builder.add(line.to, line.from, highlight);
}
}
return builder.finish()
}
dispatchChanges(view: MarkdownView, rangeStart, rangeEnd) { // Dispatch the state change for undoing actions
view.dispatch({changes: changesBuffer});
changesBuffer = [];
//POSSIBLE ALT: let state = EditorTransaction.changes?;
let state = EditorState.create(view.document); // NOT SURE IF THIS IS HOW THIS WORKS...
let transaction = state.update({changes: [{from: rangeStart, to: rangeEnd}]});
view.dispatch(transaction);
}
}