@fusion.dev/helix-editor 0.220.0 → 0.222.0

package/dist/sheet/editor-sheet.js

@@ -0,0 +1,123 @@
+export const EDITOR_CSS = `
+:where(.ProseMirror) {
+  font-feature-settings: "liga" 0;
+  font-variant-ligatures: none;
+  overflow-wrap: break-word;
+  position: relative;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+}
+
+:where(.ProseMirror pre) {
+  white-space: pre-wrap;
+}
+
+:where(.ProseMirror li) {
+  position: relative;
+}
+
+:where(.ProseMirror-hideselection *)::selection {
+  background: transparent;
+}
+
+:where(.ProseMirror-hideselection) {
+  caret-color: transparent;
+}
+
+:where(.ProseMirror [draggable][contenteditable="false"]) {
+  user-select: text;
+}
+
+:where(.ProseMirror-selectednode) {
+  outline: var(--helix-size-focus-ring, 2px) solid var(--editor-selected-color, var(--helix-color-focus-ring, Highlight));
+  outline-offset: var(--helix-size-focus-offset, 2px);
+}
+
+:where(li.ProseMirror-selectednode) {
+  outline: none;
+}
+
+:where(li.ProseMirror-selectednode)::after {
+  border: var(--helix-size-focus-ring, 2px) solid var(--editor-selected-color, var(--helix-color-focus-ring, Highlight));
+  content: "";
+  inset-block: calc(var(--helix-size-focus-ring, 2px) * -1);
+  inset-inline: calc(var(--helix-space-lg, 1.5rem) * -1) calc(var(--helix-size-focus-ring, 2px) * -1);
+  pointer-events: none;
+  position: absolute;
+}
+
+img.ProseMirror-separator {
+  border: none !important;
+  display: inline !important;
+  margin: 0 !important;
+}
+
+:where(.ProseMirror-gapcursor) {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+:where(.ProseMirror-gapcursor)::after {
+  animation: helix-editor-blink 1.1s steps(2, start) infinite;
+  border-block-start: var(--helix-border-thin, 1px) solid currentColor;
+  content: "";
+  display: block;
+  inline-size: var(--helix-space-lg, 1.5rem);
+  inset-block-start: -2px;
+  position: absolute;
+}
+
+:where(.ProseMirror-focused .ProseMirror-gapcursor) {
+  display: block;
+}
+
+@keyframes helix-editor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.ProseMirror-gapcursor)::after {
+    animation: none;
+  }
+}
+
+:where(.helix-editor-drop-cursor) {
+  background-color: var(--helix-color-primary, Highlight);
+}
+
+:where(.helix-find-match) {
+  background-color: light-dark(
+    oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.93 0.07 h),
+    color-mix(in oklab, var(--helix-color-warning, oklch(0.82 0.185 75)) 32%, transparent)
+  );
+}
+
+:where(.helix-find-current) {
+  background-color: oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.8 0.16 h);
+  color: oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.25 0.04 h);
+}
+
+:where(.helix-editor-placeholder)::before {
+  block-size: 0;
+  color: var(--editor-placeholder-color, var(--helix-color-foreground-subtle, GrayText));
+  content: attr(data-placeholder);
+  float: inline-start;
+  pointer-events: none;
+}
+`;
+let sheet;
+export const adoptEditorSheet = (root) => {
+    if (typeof CSSStyleSheet === 'undefined' || !('adoptedStyleSheets' in root)) {
+        return;
+    }
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        sheet.replaceSync(EDITOR_CSS);
+    }
+    if (!root.adoptedStyleSheets.includes(sheet)) {
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    }
+};

package/dist/tools/tools.d.ts

@@ -0,0 +1,53 @@
+import type { MarkType, ResolvedPos, Schema } from 'prosemirror-model';
+import type { Command, EditorState } from 'prosemirror-state';
+/**
+ * A tool the Editor frame's toolbar draws, by the name the frame gives it.
+ * The frame's own type is the headless tier's, held to this one by a spec.
+ */
+export type EditorTool = 'bold' | 'bullet-list' | 'code' | 'code-block' | 'heading-1' | 'heading-2' | 'heading-3' | 'italic' | 'link' | 'ordered-list' | 'paragraph' | 'quote' | 'redo' | 'strike' | 'undo';
+/** What the toolbar shows about the selection, as the frame takes it. */
+export interface EditorFormats {
+    applied: readonly EditorTool[];
+    block: EditorTool | '';
+    link: string;
+    unavailable: readonly EditorTool[];
+}
+/** Every tool, in the order the toolbar draws them. */
+export declare const EDITOR_TOOLS: readonly EditorTool[];
+/**
+ * The run of a mark around a position: where the link the caret is in starts
+ * and ends, across the text nodes that carry the same mark.
+ */
+export declare const markRange: ($pos: ResolvedPos, type: MarkType) => {
+    from: number;
+    mark: ReturnType<MarkType['create']>;
+    to: number;
+} | undefined;
+/**
+ * Links the selection to an address, or with an empty address takes its link
+ * off. Refused for an address `safeHref` refuses, where the schema has no
+ * link, and where the text there takes no link, such as in a code block.
+ *
+ * A caret in a link relinks or unlinks the whole link. A caret anywhere else
+ * writes the address as linked text.
+ */
+export declare const setLink: (schema: Schema, href: string) => Command;
+/**
+ * The command each tool runs, for the tools the schema has the nodes and
+ * marks for: a mark toggled, a block type set, a list or a quote put on or
+ * taken off, and undo and redo through `prosemirror-history`. `overrides`
+ * replaces any of them, such as undo and redo where y-prosemirror keeps the
+ * history. A link takes an address, so `setLink` runs it, and it is not here.
+ */
+export declare const toolCommands: (schema: Schema, overrides?: Partial<Record<EditorTool, Command>>) => Partial<Record<EditorTool, Command>>;
+/**
+ * What the toolbar shows for a state: the tools whose format holds at the
+ * selection, its block type, the address of its link, and the tools that
+ * cannot apply there.
+ *
+ * **A tool cannot apply where its command, asked without being run, refuses.**
+ * The block type the selection is already in is the exception: setting a
+ * paragraph to a paragraph changes nothing and is refused, and the menu still
+ * offers it, checked.
+ */
+export declare const formatsOf: (state: EditorState, commands: Partial<Record<EditorTool, Command>>) => EditorFormats;

package/dist/tools/tools.js

@@ -0,0 +1,242 @@
+import { setBlockType, toggleMark, wrapIn } from 'prosemirror-commands';
+import { redo, undo } from 'prosemirror-history';
+import { liftListItem, wrapInList } from 'prosemirror-schema-list';
+import { liftTarget } from 'prosemirror-transform';
+import { safeHref } from '../schema/schema.js';
+export const EDITOR_TOOLS = [
+    'undo',
+    'redo',
+    'paragraph',
+    'heading-1',
+    'heading-2',
+    'heading-3',
+    'code-block',
+    'bold',
+    'italic',
+    'strike',
+    'code',
+    'link',
+    'bullet-list',
+    'ordered-list',
+    'quote',
+];
+const MARKS = { bold: 'strong', code: 'code', italic: 'em', strike: 'strike' };
+const HEADINGS = { 'heading-1': 1, 'heading-2': 2, 'heading-3': 3 };
+const listAround = ($pos, types) => {
+    for (let depth = $pos.depth; depth > 0; depth -= 1) {
+        const node = $pos.node(depth);
+        if (types.includes(node.type)) {
+            return { depth, node };
+        }
+    }
+    return undefined;
+};
+const inside = ($pos, type) => {
+    for (let depth = $pos.depth; depth > 0; depth -= 1) {
+        if ($pos.node(depth).type === type) {
+            return true;
+        }
+    }
+    return false;
+};
+const toggleList = (listType, item, lists) => (state, dispatch) => {
+    const around = listAround(state.selection.$from, lists);
+    if (around?.node.type === listType) {
+        return liftListItem(item)(state, dispatch);
+    }
+    if (around) {
+        if (dispatch) {
+            const pos = state.selection.$from.before(around.depth);
+            dispatch(state.tr.setNodeMarkup(pos, listType, { id: around.node.attrs.id }).scrollIntoView());
+        }
+        return true;
+    }
+    return wrapInList(listType)(state, dispatch);
+};
+const toggleQuote = (quote) => (state, dispatch) => {
+    const { $from, $to } = state.selection;
+    if (inside($from, quote)) {
+        const range = $from.blockRange($to, (node) => node.type === quote);
+        const target = range ? liftTarget(range) : null;
+        if (!range || target === null) {
+            return false;
+        }
+        if (dispatch) {
+            dispatch(state.tr.lift(range, target).scrollIntoView());
+        }
+        return true;
+    }
+    return wrapIn(quote)(state, dispatch);
+};
+export const markRange = ($pos, type) => {
+    const parent = $pos.parent;
+    const start = $pos.start();
+    let index = $pos.index();
+    let child = parent.maybeChild(index);
+    let mark = child ? type.isInSet(child.marks) : undefined;
+    if (!mark && $pos.textOffset === 0 && index > 0) {
+        index -= 1;
+        child = parent.maybeChild(index);
+        mark = child ? type.isInSet(child.marks) : undefined;
+    }
+    if (!(child && mark)) {
+        return undefined;
+    }
+    let first = index;
+    while (first > 0 && mark.isInSet(parent.child(first - 1).marks)) {
+        first -= 1;
+    }
+    let last = index;
+    while (last < parent.childCount - 1 && mark.isInSet(parent.child(last + 1).marks)) {
+        last += 1;
+    }
+    let from = start;
+    for (let at = 0; at < first; at += 1) {
+        from += parent.child(at).nodeSize;
+    }
+    let to = from;
+    for (let at = first; at <= last; at += 1) {
+        to += parent.child(at).nodeSize;
+    }
+    return { from, mark, to };
+};
+export const setLink = (schema, href) => (state, dispatch) => {
+    const type = schema.marks.link;
+    const { $from, empty, from, to } = state.selection;
+    if (!type || !$from.parent.type.allowsMarkType(type)) {
+        return false;
+    }
+    const around = empty ? markRange($from, type) : undefined;
+    const [start, end] = around ? [around.from, around.to] : [from, to];
+    if (href === '') {
+        if (!state.doc.rangeHasMark(start, end, type)) {
+            return false;
+        }
+        if (dispatch) {
+            dispatch(state.tr.removeMark(start, end, type).scrollIntoView());
+        }
+        return true;
+    }
+    const address = safeHref(href);
+    if (address === '') {
+        return false;
+    }
+    if (dispatch) {
+        const mark = type.create({ href: address });
+        const tr = empty && !around
+            ? state.tr.insertText(address, from).addMark(from, from + address.length, mark)
+            : state.tr.removeMark(start, end, type).addMark(start, end, mark);
+        dispatch(tr.scrollIntoView());
+    }
+    return true;
+};
+export const toolCommands = (schema, overrides = {}) => {
+    const { nodes, marks } = schema;
+    const commands = { redo, undo };
+    for (const [tool, name] of Object.entries(MARKS)) {
+        const mark = marks[name];
+        if (mark) {
+            commands[tool] = toggleMark(mark);
+        }
+    }
+    if (nodes.paragraph) {
+        commands.paragraph = setBlockType(nodes.paragraph);
+    }
+    const heading = nodes.heading;
+    if (heading) {
+        for (const [tool, level] of Object.entries(HEADINGS)) {
+            commands[tool] = setBlockType(heading, { level });
+        }
+    }
+    if (nodes.code_block) {
+        commands['code-block'] = setBlockType(nodes.code_block);
+    }
+    const item = nodes.list_item;
+    const lists = [nodes.bullet_list, nodes.ordered_list].filter((type) => type !== undefined);
+    if (item && nodes.bullet_list) {
+        commands['bullet-list'] = toggleList(nodes.bullet_list, item, lists);
+    }
+    if (item && nodes.ordered_list) {
+        commands['ordered-list'] = toggleList(nodes.ordered_list, item, lists);
+    }
+    if (nodes.blockquote) {
+        commands.quote = toggleQuote(nodes.blockquote);
+    }
+    return { ...commands, ...overrides };
+};
+const blockOf = ($pos) => {
+    const node = $pos.parent;
+    switch (node.type.name) {
+        case 'paragraph':
+            return 'paragraph';
+        case 'code_block':
+            return 'code-block';
+        case 'heading': {
+            const level = node.attrs.level;
+            return level === 1 ? 'heading-1' : level === 2 ? 'heading-2' : level === 3 ? 'heading-3' : '';
+        }
+        default:
+            return '';
+    }
+};
+const markHolds = (state, type) => {
+    const { $from, empty, from, to } = state.selection;
+    return empty
+        ? type.isInSet(state.storedMarks ?? $from.marks()) !== undefined
+        : state.doc.rangeHasMark(from, to, type);
+};
+const linkAt = (state, type) => {
+    if (!type) {
+        return '';
+    }
+    const { $from, empty, from, to } = state.selection;
+    if (empty) {
+        return markRange($from, type)?.mark.attrs.href ?? '';
+    }
+    let href = '';
+    state.doc.nodesBetween(from, to, (node) => {
+        const mark = href === '' ? type.isInSet(node.marks) : undefined;
+        if (mark) {
+            href = mark.attrs.href;
+        }
+        return href === '';
+    });
+    return href;
+};
+export const formatsOf = (state, commands) => {
+    const { schema } = state;
+    const { $from } = state.selection;
+    const applied = [];
+    for (const [tool, name] of Object.entries(MARKS)) {
+        const mark = schema.marks[name];
+        if (mark && markHolds(state, mark)) {
+            applied.push(tool);
+        }
+    }
+    const lists = [schema.nodes.bullet_list, schema.nodes.ordered_list].filter((type) => type !== undefined);
+    const list = listAround($from, lists);
+    if (list?.node.type.name === 'bullet_list') {
+        applied.push('bullet-list');
+    }
+    else if (list?.node.type.name === 'ordered_list') {
+        applied.push('ordered-list');
+    }
+    const quote = schema.nodes.blockquote;
+    if (quote && inside($from, quote)) {
+        applied.push('quote');
+    }
+    const block = blockOf($from);
+    const link = linkAt(state, schema.marks.link);
+    const unavailable = EDITOR_TOOLS.filter((tool) => {
+        if (tool === block) {
+            return false;
+        }
+        if (tool === 'link') {
+            const type = schema.marks.link;
+            return !(type && $from.parent.type.allowsMarkType(type));
+        }
+        const command = commands[tool];
+        return !command?.(state);
+    });
+    return { applied, block, link, unavailable };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-editor",
-  "description": "Connects the Helix Editor frame to CodeMirror, themed with your tokens: highlighting, line numbers, folding, search, and diagnostics.",
-  "version": "0.220.0",
+  "description": "Connects the Helix Editor frame to ProseMirror: a schema whose blocks keep their ids, the editing plugins, and a document drawn in your tokens.",
+  "version": "0.222.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -32,34 +32,36 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@codemirror/commands": "^6.11.1",
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.12",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.3.4",
-    "@codemirror/lang-python": "^6.2.1",
-    "@codemirror/lang-rust": "^6.0.2",
-    "@codemirror/language": "^6.13.1",
-    "@codemirror/legacy-modes": "^6.5.5",
-    "@codemirror/lint": "^6.9.7",
-    "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.7.6",
-    "@codemirror/view": "^6.43.14",
-    "@fusion.dev/helix-headless": "0.220.0",
-    "@fusion.dev/helix-sandbox": "0.220.0"
+    "prosemirror-commands": "^1.7.2",
+    "prosemirror-dropcursor": "^1.8.4",
+    "prosemirror-gapcursor": "^1.4.1",
+    "prosemirror-history": "^1.5.1",
+    "prosemirror-inputrules": "^1.5.1",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-schema-list": "^1.5.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-testing": "0.220.0",
-    "@types/bun": "^1.4.2"
+    "@fusion.dev/helix-headless": "0.222.0",
+    "@fusion.dev/helix-testing": "0.222.0",
+    "@types/bun": "^1.4.3",
+    "prosemirror-model": "^1.25.12",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.12.2",
+    "prosemirror-view": "^1.42.6"
   },
   "homepage": "https://fusion.dev",
   "keywords": [
     "editor",
-    "codemirror",
-    "code",
-    "syntax-highlighting"
+    "prosemirror",
+    "rich-text",
+    "contenteditable"
   ],
+  "peerDependencies": {
+    "prosemirror-model": "^1.25.0",
+    "prosemirror-state": "^1.4.0",
+    "prosemirror-transform": "^1.10.0",
+    "prosemirror-view": "^1.40.0"
+  },
   "publishConfig": {
     "access": "restricted"
   }

package/dist/codemirror/codemirror-engine.d.ts

@@ -1,25 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import type { EditorEngine } from '@fusion.dev/helix-headless/code-editor';
-/** The language a name means, or nothing for plain text and a name no grammar answers. */
-export declare const languageName: (name: string) => string | undefined;
-/** Every name `language` takes, its aliases included. */
-export declare const languageNames: () => string[];
-/** What `codeMirrorEngine` takes beyond what the editor sets. */
-export interface CodeMirrorOptions {
-    /** More CodeMirror extensions, such as completions or a language server client, added after Helix's own. */
-    extensions?: Extension[];
-}
-/**
- * CodeMirror 6, drawing a Helix Editor: highlighting in the theme's syntax
- * colors, line numbers, folding, bracket matching, search (Command+F, or
- * Control+F elsewhere), history, and diagnostics underlined in their tone.
- * Tab indents, and Escape then Tab leaves the editor.
- */
-export declare const codeMirrorEngine: (options?: CodeMirrorOptions) => EditorEngine;
-/**
- * Connects CodeMirror to an editor, with `codeMirrorEngine(options)`, and
- * returns what takes it away again, leaving the editor a plain text field.
- */
-export declare const connectEditor: (editor: {
-    engine: EditorEngine | undefined;
-}, options?: CodeMirrorOptions) => (() => void);