draftly 0.1.0-alpha.0 → 1.0.0-alpha.2

package/src/editor/utils.ts

@@ -0,0 +1,143 @@
+import { EditorView } from "@codemirror/view";
+import { StyleSpec } from "style-mod";
+
+/**
+ * Deep merge two objects
+ * @param a - First object
+ * @param b - Second object
+ * @returns Merged object
+ */
+export function deepMerge<T>(a: T, b?: T): T {
+  const result = { ...a };
+
+  if (!b) {
+    return result;
+  }
+
+  for (const key in b as T) {
+    if (b[key] && typeof b[key] === "object" && !Array.isArray(b[key]) && typeof a[key] === "object") {
+      result[key] = deepMerge(a[key], b[key]);
+    } else {
+      result[key] = b[key];
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Theme style
+ */
+export type ThemeStyle = {
+  [selector: string]: StyleSpec;
+};
+
+/**
+ * Theme Enum
+ */
+export enum ThemeEnum {
+  DARK = "dark",
+  LIGHT = "light",
+  AUTO = "auto",
+}
+
+/**
+ * Function to create the themes
+ *
+ * @param defaultTheme - Default theme -- Always applied
+ * @param darkTheme - Dark theme -- Applied when theme is "dark" or "auto" and system is dark
+ * @param lightTheme - Light theme -- Applied when theme is "light" or "auto" and system is light
+ * @returns Theme function
+ */
+export function createTheme({
+  default: defaultTheme,
+  dark: darkTheme,
+  light: lightTheme,
+}: {
+  default: ThemeStyle;
+  dark?: ThemeStyle;
+  light?: ThemeStyle;
+}): (theme: ThemeEnum) => ThemeStyle {
+  return (theme: ThemeEnum) => {
+    let style: ThemeStyle = defaultTheme;
+
+    if (theme === ThemeEnum.DARK) {
+      style = deepMerge(style, darkTheme);
+    }
+
+    if (theme === ThemeEnum.LIGHT) {
+      style = deepMerge(style, lightTheme);
+    }
+
+    return style;
+  };
+}
+
+/**
+ * Check if cursor is within the given range
+ */
+export function cursorInRange(view: EditorView, from: number, to: number): boolean {
+  const selection = view.state.selection.main;
+  return selection.from <= to && selection.to >= from;
+}
+
+/**
+ * Check if any selection overlaps with the given range
+ */
+export function selectionOverlapsRange(view: EditorView, from: number, to: number): boolean {
+  for (const range of view.state.selection.ranges) {
+    if (range.from <= to && range.to >= from) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Toggle markdown style on selection or insert markers at cursor
+ * @param marker - The markdown marker (e.g., "**" for bold, "*" for italic)
+ * @returns Command function for EditorView
+ */
+export function toggleMarkdownStyle(marker: string): (view: EditorView) => boolean {
+  return (view: EditorView) => {
+    const { state } = view;
+    const { from, to, empty } = state.selection.main;
+
+    // Get selected text
+    const selectedText = state.sliceDoc(from, to);
+
+    // Check if already wrapped with markers
+    const markerLen = marker.length;
+    const beforeFrom = Math.max(0, from - markerLen);
+    const afterTo = Math.min(state.doc.length, to + markerLen);
+    const textBefore = state.sliceDoc(beforeFrom, from);
+    const textAfter = state.sliceDoc(to, afterTo);
+
+    const isWrapped = textBefore === marker && textAfter === marker;
+
+    if (isWrapped) {
+      // Remove markers
+      view.dispatch({
+        changes: [
+          { from: beforeFrom, to: from, insert: "" },
+          { from: to, to: afterTo, insert: "" },
+        ],
+        selection: { anchor: beforeFrom, head: beforeFrom + selectedText.length },
+      });
+    } else if (empty) {
+      // No selection - insert markers and place cursor between them
+      view.dispatch({
+        changes: { from, to, insert: marker + marker },
+        selection: { anchor: from + markerLen },
+      });
+    } else {
+      // Wrap selection with markers
+      view.dispatch({
+        changes: { from, to, insert: marker + selectedText + marker },
+        selection: { anchor: from + markerLen, head: to + markerLen },
+      });
+    }
+
+    return true;
+  };
+}

package/src/{view-plugin.ts → editor/view-plugin.ts}

@@ -1,49 +1,11 @@
 import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
 import { Extension, Facet, Range, RangeSetBuilder } from "@codemirror/state";
-import { syntaxHighlighting, syntaxTree } from "@codemirror/language";
-import { cursorInRange, selectionOverlapsRange } from "./utils";
-import { highlightStyle, draftlyBaseTheme } from "./theme";
+import { syntaxTree } from "@codemirror/language";
+import { cursorInRange, selectionOverlapsRange, ThemeEnum } from "./utils";
+import { draftlyBaseTheme } from "./theme";
 import { DecorationContext, DraftlyPlugin } from "./plugin";
 import { DraftlyNode } from "./draftly";
 
-/**
- * Mark decorations for inline styling
- */
-const markDecorations = {
-  // Inline styles
-  "inline-code": Decoration.mark({ class: "cm-draftly-inline-code" }),
-
-  // Links and images
-  link: Decoration.mark({ class: "cm-draftly-link" }),
-  "link-text": Decoration.mark({ class: "cm-draftly-link-text" }),
-  url: Decoration.mark({ class: "cm-draftly-url" }),
-  image: Decoration.mark({ class: "cm-draftly-image" }),
-
-  // Emphasis markers (* _ ~~ `)
-  "emphasis-mark": Decoration.mark({ class: "cm-draftly-emphasis-mark" }),
-
-  // Code blocks
-  "fenced-code": Decoration.mark({ class: "cm-draftly-fenced-code" }),
-  "code-mark": Decoration.mark({ class: "cm-draftly-code-mark" }),
-  "code-info": Decoration.mark({ class: "cm-draftly-code-info" }),
-
-  // Blockquote
-  blockquote: Decoration.mark({ class: "cm-draftly-blockquote" }),
-  "quote-mark": Decoration.mark({ class: "cm-draftly-quote-mark" }),
-
-  // Horizontal rule
-  hr: Decoration.mark({ class: "cm-draftly-hr" }),
-};
-
-/**
- * Line decorations for block-level elements
- */
-const lineDecorations = {
-  blockquote: Decoration.line({ class: "cm-draftly-line-blockquote" }),
-  "code-block": Decoration.line({ class: "cm-draftly-line-code" }),
-  hr: Decoration.line({ class: "cm-draftly-line-hr" }),
-};
-
 /**
  * Facet to register plugins with the view plugin
  */
@@ -61,6 +23,13 @@ export const draftlyOnNodesChangeFacet = Facet.define<
   combine: (values) => values.find((v) => v !== undefined),
 });
 
+/**
+ * Facet to register the theme
+ */
+export const draftlyThemeFacet = Facet.define<ThemeEnum, ThemeEnum>({
+  combine: (values) => values.find((v) => v !== undefined) || ThemeEnum.AUTO,
+});
+
 /**
  * Build decorations for the visible viewport
  * @param view - The EditorView instance
@@ -70,98 +39,6 @@ function buildDecorations(view: EditorView, plugins: DraftlyPlugin[] = []): Deco
   const builder = new RangeSetBuilder<Decoration>();
   const decorations: Range<Decoration>[] = [];
 
-  const tree = syntaxTree(view.state);
-
-  // Iterate through the syntax tree
-  tree.iterate({
-    enter: (node) => {
-      const { from, to, name } = node;
-
-      // Skip if cursor is in this range (show raw markdown)
-      const cursorInNode = selectionOverlapsRange(view, from, to);
-
-      // Handle inline code
-      if (name === "InlineCode") {
-        decorations.push(markDecorations["inline-code"].range(from, to));
-
-        // Style the backticks
-        if (!cursorInNode) {
-          const marks = node.node.getChildren("CodeMark");
-          for (const mark of marks) {
-            decorations.push(markDecorations["code-mark"].range(mark.from, mark.to));
-          }
-        }
-      }
-
-      // Handle links
-      if (name === "Link") {
-        decorations.push(markDecorations.link.range(from, to));
-
-        // Find the URL child
-        const url = node.node.getChild("URL");
-        if (url) {
-          decorations.push(markDecorations.url.range(url.from, url.to));
-        }
-      }
-
-      // Handle images
-      if (name === "Image") {
-        decorations.push(markDecorations.image.range(from, to));
-      }
-
-      // Handle fenced code blocks
-      if (name === "FencedCode") {
-        decorations.push(markDecorations["fenced-code"].range(from, to));
-
-        // Add line decorations for each line in the code block
-        const startLine = view.state.doc.lineAt(from);
-        const endLine = view.state.doc.lineAt(to);
-        for (let i = startLine.number; i <= endLine.number; i++) {
-          const line = view.state.doc.line(i);
-          decorations.push(lineDecorations["code-block"].range(line.from));
-        }
-
-        // Style code info (language identifier)
-        const codeInfo = node.node.getChild("CodeInfo");
-        if (codeInfo) {
-          decorations.push(markDecorations["code-info"].range(codeInfo.from, codeInfo.to));
-        }
-
-        // Style code marks (```)
-        const codeMarks = node.node.getChildren("CodeMark");
-        for (const mark of codeMarks) {
-          decorations.push(markDecorations["code-mark"].range(mark.from, mark.to));
-        }
-      }
-
-      // Handle blockquotes
-      if (name === "Blockquote") {
-        decorations.push(markDecorations.blockquote.range(from, to));
-
-        // Add line decorations
-        const startLine = view.state.doc.lineAt(from);
-        const endLine = view.state.doc.lineAt(to);
-        for (let i = startLine.number; i <= endLine.number; i++) {
-          const line = view.state.doc.line(i);
-          decorations.push(lineDecorations.blockquote.range(line.from));
-        }
-
-        // Style quote marks (>)
-        const quoteMarks = node.node.getChildren("QuoteMark");
-        for (const mark of quoteMarks) {
-          decorations.push(markDecorations["quote-mark"].range(mark.from, mark.to));
-        }
-      }
-
-      // Handle horizontal rules
-      if (name === "HorizontalRule") {
-        const line = view.state.doc.lineAt(from);
-        decorations.push(lineDecorations.hr.range(line.from));
-        decorations.push(markDecorations.hr.range(from, to));
-      }
-    },
-  });
-
   // Allow plugins to contribute decorations
   if (plugins.length > 0) {
     const ctx: DecorationContext = {
@@ -175,7 +52,12 @@ function buildDecorations(view: EditorView, plugins: DraftlyPlugin[] = []): Deco
     const sortedPlugins = [...plugins].sort((a, b) => a.decorationPriority - b.decorationPriority);
 
     for (const plugin of sortedPlugins) {
-      plugin.buildDecorations(ctx);
+      try {
+        plugin.buildDecorations(ctx);
+      } catch {
+        // Silently ignore errors from partial tree states (e.g., Lezer TreeBuffer
+        // "Invalid child in posBefore"). These resolve on the next update cycle.
+      }
     }
   }
 
@@ -197,7 +79,7 @@ function buildDecorations(view: EditorView, plugins: DraftlyPlugin[] = []): Deco
 class draftlyViewPluginClass {
   decorations: DecorationSet;
   private plugins: DraftlyPlugin[];
-  private onNodesChange?: (nodes: DraftlyNode[]) => void;
+  private onNodesChange: ((nodes: DraftlyNode[]) => void) | undefined;
 
   constructor(view: EditorView) {
     this.plugins = view.state.facet(DraftlyPluginsFacet);
@@ -210,7 +92,7 @@ class draftlyViewPluginClass {
     }
 
     // Call onNodesChange callback with initial nodes
-    if (this.onNodesChange) {
+    if (this.onNodesChange && typeof this.onNodesChange === "function") {
       this.onNodesChange(this.buildNodes(view));
     }
   }
@@ -276,13 +158,13 @@ class draftlyViewPluginClass {
  */
 export const draftlyViewPlugin = ViewPlugin.fromClass(draftlyViewPluginClass, {
   decorations: (v) => v.decorations,
-  provide: () => [syntaxHighlighting(highlightStyle)],
+  provide: () => [],
 });
 
 /**
  * Extension to add the cm-draftly-enabled class to the editor
  */
-const draftlyEditorClass = EditorView.editorAttributes.of({ class: "cm-draftly-enabled" });
+const draftlyEditorClass = EditorView.editorAttributes.of({ class: "cm-draftly" });
 
 /**
  * Create draftly view extension bundle with plugin support
@@ -291,14 +173,17 @@ const draftlyEditorClass = EditorView.editorAttributes.of({ class: "cm-draftly-e
  * @returns Extension array including view plugin, theme, and plugin facet
  */
 export function createDraftlyViewExtension(
+  theme: ThemeEnum = ThemeEnum.AUTO,
+  baseStyles: boolean = true,
   plugins: DraftlyPlugin[] = [],
   onNodesChange?: (nodes: DraftlyNode[]) => void
 ): Extension[] {
   return [
+    draftlyEditorClass,
     DraftlyPluginsFacet.of(plugins),
     draftlyOnNodesChangeFacet.of(onNodesChange),
+    draftlyThemeFacet.of(theme),
     draftlyViewPlugin,
-    draftlyBaseTheme,
-    draftlyEditorClass,
+    ...(baseStyles ? [draftlyBaseTheme] : []),
   ];
 }

package/src/index.ts

@@ -1,7 +1,4 @@
-import { draftly } from "./draftly";
-
-export default draftly;
-
-export * from "./draftly";
-export * from "./plugin";
-export * from "./view-plugin";
+// Re-export everything for backward compatibility
+export * from "./editor";
+export * from "./plugins";
+export * from "./preview";