draftly 0.1.0-alpha.1 → 1.0.7

package/src/editor/theme.ts

@@ -12,7 +12,9 @@ export const draftlyBaseTheme = EditorView.theme({
   },
 
   "&.cm-draftly .cm-content": {
+    width: "100%",
     maxWidth: "48rem",
+    padding: "0 0.5rem",
     margin: "0 auto",
     fontFamily: "var(--font-sans, sans-serif)",
     fontSize: "16px",
@@ -20,10 +22,41 @@ export const draftlyBaseTheme = EditorView.theme({
   },
 
   "&.cm-draftly .cm-content .cm-line": {
-    padding: 0,
+    paddingInline: 0,
   },
 
   "&.cm-draftly .cm-content .cm-widgetBuffer": {
     display: "none !important",
   },
 });
+
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * Reset syntax highlighting for markdown elements
+ * Used to disable theme colors for markdown syntax
+ */
+const markdownResetStyle = HighlightStyle.define([
+  {
+    tag: [
+      t.heading,
+      t.strong,
+      t.emphasis,
+      t.strikethrough,
+      t.link,
+      t.url,
+      t.quote,
+      t.list,
+      t.meta,
+      t.contentSeparator,
+      t.labelName,
+    ],
+    color: "inherit",
+    fontWeight: "inherit",
+    fontStyle: "inherit",
+    textDecoration: "none",
+  },
+]);
+
+export const markdownResetExtension = syntaxHighlighting(markdownResetStyle, { fallback: false });

package/src/editor/utils.ts

@@ -92,3 +92,52 @@ export function selectionOverlapsRange(view: EditorView, from: number, to: numbe
   }
   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/editor/view-plugin.ts

@@ -6,44 +6,6 @@ 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
  */
@@ -77,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 = {
@@ -182,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.
+      }
     }
   }