@kerebron/extension-basic-editor 0.5.2 → 0.5.4

package/src/BasicEditorKit.ts

@@ -6,8 +6,9 @@ import { ExtensionDropcursor } from './ExtensionDropcursor.js';
 import { ExtensionGapcursor } from './ExtensionGapcursor.js';
 import { ExtensionHtml } from './ExtensionHtml.js';
 import { ExtensionMediaUpload } from './ExtensionMediaUpload.js';
-import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
 import { ExtensionTextAlign } from './ExtensionTextAlign.js';
+import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
+import { ExtensionPairing } from './pairing/ExtensionPairing.js';
 
 import { MarkLink } from './MarkLink.js';
 import { MarkStrong } from './MarkStrong.js';
@@ -28,6 +29,7 @@ import { NodeCodeBlock } from './NodeCodeBlock.js';
 import { NodeBookmark } from './NodeBookmark.js';
 import { NodeParagraph } from './NodeParagraph.js';
 import { NodeHardBreak } from './NodeHardBreak.js';
+import { NodeSoftBreak } from './NodeSoftBreak.js';
 import { NodeHorizontalRule } from './NodeHorizontalRule.js';
 import { NodeOrderedList } from './NodeOrderedList.js';
 import { NodeBulletList } from './NodeBulletList.js';
@@ -46,6 +48,7 @@ import { NodeTaskList } from './NodeTaskList.js';
 import { NodeTaskItem } from './NodeTaskItem.js';
 import { NodeInlineShortCode } from './NodeInlineShortCode.js';
 import { NodeIframe } from './NodeIframe.js';
+import { NodeCommentAnchor } from './NodeCommentAnchor.js';
 
 export class BasicEditorKit implements EditorKit {
   getExtensions(): AnyExtensionOrReq[] {
@@ -58,10 +61,12 @@ export class BasicEditorKit implements EditorKit {
       new ExtensionRemoteSelection(),
       new ExtensionSelection(),
       new ExtensionTextAlign(),
+      new ExtensionPairing(),
       new NodeDocument(),
       new NodeText(),
       new NodeParagraph(),
       new NodeHardBreak(),
+      new NodeSoftBreak(),
       new NodeCodeBlock(),
       new NodeBookmark(),
       new NodeHorizontalRule(),
@@ -84,6 +89,7 @@ export class BasicEditorKit implements EditorKit {
       new NodeMath(),
       new NodeInlineShortCode(),
       new NodeIframe(),
+      new NodeCommentAnchor(),
       new MarkLink(),
       new MarkItalic(),
       new MarkStrong(),

package/src/ExtensionBasicCodeEditor.ts

@@ -6,15 +6,16 @@ import {
   RawTextMapEntry,
   RawTextResult,
 } from '@kerebron/editor';
-import { NodeDocumentCode } from './NodeDocumentCode.js';
 
 import { ExtensionSelection } from './ExtensionSelection.js';
 import { ExtensionBaseKeymap } from './ExtensionBaseKeymap.js';
 import { ExtensionDropcursor } from './ExtensionDropcursor.js';
 import { ExtensionGapcursor } from './ExtensionGapcursor.js';
 import { ExtensionHtml } from './ExtensionHtml.js';
-import { NodeText } from './NodeText.js';
 import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
+import { NodeText } from './NodeText.js';
+import { NodeDocumentCode } from './NodeDocumentCode.js';
+import { NodeCodeBlock } from './NodeCodeBlock.js';
 
 export class ExtensionBasicCodeEditor extends Extension {
   name = 'basic-code-editor';
@@ -31,6 +32,7 @@ export class ExtensionBasicCodeEditor extends Extension {
       new ExtensionRemoteSelection(),
       new ExtensionSelection(),
       new NodeDocumentCode({ lang }),
+      new NodeCodeBlock(),
       new NodeText(),
     ];
   }

package/src/ExtensionMediaUpload.ts

@@ -248,7 +248,7 @@ function createMediaUploadPlugin(options: MediaUploadOptions = {}): Plugin {
 export class ExtensionMediaUpload extends Extension {
   name = 'mediaUpload';
 
-  constructor(protected override config: Partial<MediaUploadOptions> = {}) {
+  constructor(public override config: Partial<MediaUploadOptions> = {}) {
     super(config);
   }
 

package/src/MarkLink.ts

@@ -9,7 +9,9 @@ export class MarkLink extends Mark {
     return {
       attrs: {
         href: {},
-        title: { default: null },
+        title: { default: undefined },
+        origUrl: { default: undefined },
+        mdTemplate: { default: undefined },
       },
       inclusive: false,
       parseDOM: [

package/src/MarkUnderline.ts

@@ -15,13 +15,6 @@ export class MarkUnderline extends Mark {
         {
           tag: 'u',
         },
-        {
-          style: 'text-decoration',
-          consuming: false,
-          getAttrs: (
-            style,
-          ) => ((style as string).includes('underline') ? {} : false),
-        },
       ],
       toDOM() {
         return ['u', 0];

package/src/NodeBookmark.ts

@@ -1,9 +1,9 @@
 import { NodeSpec } from 'prosemirror-model';
 
-import { Node } from '@kerebron/editor';
+import { NESTING_SELF_CLOSING, Node } from '@kerebron/editor';
 
 export class NodeBookmark extends Node {
-  override name = 'bookmark-node';
+  override name = 'node_bookmark';
   requires = ['doc'];
 
   override getNodeSpec(): NodeSpec {
@@ -11,8 +11,12 @@ export class NodeBookmark extends Node {
       inline: true,
       group: 'inline',
       selectable: false,
+      atom: true,
       attrs: {
         id: {},
+        nesting: {
+          default: NESTING_SELF_CLOSING,
+        },
       },
       parseDOM: [],
       toDOM(mark) {

package/src/NodeBulletList.ts

@@ -14,6 +14,15 @@ export class NodeBulletList extends Node {
   override name = 'bullet_list';
   requires = ['doc'];
 
+  override attributes = {
+    toc: {
+      default: undefined,
+    },
+    odtMarginLeft: {
+      default: undefined,
+    },
+  };
+
   override getNodeSpec(): NodeSpec {
     return {
       content: 'list_item+',

package/src/NodeCodeBlock.ts

@@ -17,6 +17,7 @@ export class NodeCodeBlock extends Node {
       group: 'block',
       code: true,
       defining: true,
+      attrs: { lang: { default: undefined } },
       parseDOM: [
         {
           tag: 'pre',
@@ -42,7 +43,6 @@ export class NodeCodeBlock extends Node {
           },
         },
       ],
-      attrs: { lang: { default: null } },
       toDOM(node) {
         const { lang } = node.attrs;
         return ['pre', { lang }, ['code', 0]];

package/src/NodeCommentAnchor.ts

@@ -0,0 +1,170 @@
+import type { NodeSpec, NodeType } from 'prosemirror-model';
+import { Node as PmNode } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+
+import {
+  type CoreEditor,
+  NESTING_CLOSING,
+  NESTING_OPENING,
+  Node,
+} from '@kerebron/editor';
+import { type CommandFactories } from '@kerebron/editor/commands';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { CommandFactory } from '@kerebron/editor/commands';
+
+function collectCommentAnchors(doc: PmNode) {
+  const starts = new Map();
+  const ends = new Map();
+
+  doc.descendants((node, pos) => {
+    if (node.type.name === 'comment') {
+      if (node.attrs.nesting === NESTING_OPENING) {
+        starts.set(node.attrs.id, pos);
+      }
+      if (node.attrs.nesting === NESTING_CLOSING) {
+        ends.set(node.attrs.id, pos);
+      }
+    }
+  });
+
+  return { starts, ends };
+}
+
+function buildCommentRanges(doc: PmNode) {
+  const { starts, ends } = collectCommentAnchors(doc);
+  const ranges = [];
+
+  for (const [id, from] of starts) {
+    const to = ends.get(id);
+    if (!to || to <= from) continue;
+
+    ranges.push({
+      id,
+      from: from + 1, // skip start atom
+      to, // end atom position
+    });
+  }
+
+  return ranges;
+}
+
+function buildDecorations(doc: PmNode) {
+  const ranges = buildCommentRanges(doc);
+
+  return DecorationSet.create(
+    doc,
+    ranges.map(({ id, from, to }) =>
+      Decoration.inline(from, to, {
+        class: 'comment-highlight',
+        'data-comment-id': id,
+      })
+    ),
+  );
+}
+
+function commentsPlugin(): Plugin {
+  return new Plugin({
+    state: {
+      init(_, { doc }) {
+        return buildDecorations(doc);
+      },
+      apply(tr, oldDecos, oldState, newState) {
+        if (!tr.docChanged) return oldDecos;
+        return buildDecorations(newState.doc);
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+}
+
+const addCommentBoundary: CommandFactory = (id) => {
+  return (state, dispatch) => {
+    const { schema, selection } = state;
+    const { from, to } = selection;
+
+    const commentType = schema.nodes.comment;
+    if (!commentType) return false;
+
+    const startNode = commentType.create({ id, nesting: NESTING_OPENING });
+    const endNode = commentType.create({ id, nesting: NESTING_CLOSING });
+
+    const tr = state.tr;
+
+    tr.insert(to, endNode);
+    tr.insert(from, startNode);
+
+    // Optional: restore selection
+    // tr = tr.setSelection(
+    //   TextSelection.create(tr.doc, from, to + startNode.nodeSize)
+    // );
+
+    if (dispatch) dispatch(tr);
+    return true;
+  };
+};
+
+export class NodeCommentAnchor extends Node {
+  override name = 'comment';
+  requires = ['doc'];
+
+  options = {
+    keepMarks: true,
+  };
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      atom: true,
+      attrs: {
+        id: {},
+        active: {
+          default: false,
+        },
+        nesting: {
+          default: NESTING_OPENING,
+        },
+      },
+      parseDOM: [
+        {
+          tag: 'span[data-comment-id]',
+          getAttrs(dom: HTMLElement) {
+            return {
+              id: dom.getAttribute('data-comment-id'),
+              nesting: parseInt(dom.getAttribute('data-nesting') || '1'),
+              active: dom.hasAttribute('data-active'),
+            };
+          },
+        },
+      ],
+      toDOM: (
+        node,
+      ) => ['span', {
+        'data-comment-id': node.attrs.id,
+        'data-active': node.attrs.active ? 'true' : undefined,
+        'data-nesting': node.attrs.nesting,
+      }],
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'addComment': (id, active) => addCommentBoundary(id, active),
+    };
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      commentsPlugin(),
+      // dropCursor(this.options),
+    ];
+  }
+}

package/src/NodeHorizontalRule.ts

@@ -11,7 +11,8 @@ export class NodeHorizontalRule extends Node {
 
   override getNodeSpec(): NodeSpec {
     return {
-      group: 'block',
+      inline: true,
+      group: 'inline',
       parseDOM: [{ tag: 'hr' }],
       toDOM() {
         return ['hr'];

package/src/NodeImage.ts

@@ -1,6 +1,7 @@
-import { type NodeSpec } from 'prosemirror-model';
-import type { Node as PmNode } from 'prosemirror-model';
+import type { Node as PmNode, NodeSpec } from 'prosemirror-model';
+import { Selection } from 'prosemirror-state';
 import type { EditorView, NodeViewConstructor } from 'prosemirror-view';
+
 import { Node } from '@kerebron/editor';
 import type { CoreEditor } from '@kerebron/editor';
 
@@ -17,6 +18,8 @@ export class NodeImage extends Node {
         title: { default: null },
         width: { default: null },
         height: { default: null },
+        origUrl: { default: undefined },
+        mdTemplate: { default: undefined },
       },
       group: 'inline',
       draggable: true,
@@ -194,7 +197,7 @@ export class NodeImage extends Node {
         const pos = getPos();
         if (typeof pos === 'number') {
           const $pos = view.state.doc.resolve(pos);
-          const selection = view.state.selection.constructor.near($pos);
+          const selection = Selection.near($pos);
           view.dispatch(view.state.tr.setSelection(selection));
         }
       });

package/src/NodeInlineShortCode.ts

@@ -1,14 +1,17 @@
 import { Node as PmNode, NodeSpec, NodeType, Schema } from 'prosemirror-model';
 import { EditorState, Transaction } from 'prosemirror-state';
 
-import { Node } from '@kerebron/editor';
+import {
+  CommandFactories,
+  CoreEditor,
+  NESTING_SELF_CLOSING,
+  Node,
+} from '@kerebron/editor';
+import { Command } from '@kerebron/editor/commands';
 import {
   type InputRule,
   replaceInlineNode,
 } from '@kerebron/editor/plugins/input-rules';
-import { CoreEditor } from '@kerebron/editor';
-import { CommandFactories } from '@kerebron/editor';
-import { Command } from '@kerebron/editor/commands';
 
 export function fixCharacters(text: string) {
   return text
@@ -37,8 +40,6 @@ function replaceAllNodesOfType(
     }
   });
 
-  console.log('replaceAllNodesOfType', replacements.length);
-
   for (let i = replacements.length - 1; i >= 0; i--) {
     const { node, pos } = replacements[i];
     const newNode = factory(node, tr.doc.type.schema);
@@ -57,12 +58,21 @@ export class NodeInlineShortCode extends Node {
       inline: true,
       group: 'inline',
       selectable: true,
+      atom: true,
       attrs: {
+        id: {
+          default: undefined,
+        },
         content: {
           default: '',
         },
+        nesting: {
+          default: NESTING_SELF_CLOSING,
+        },
+        error: {
+          default: '',
+        },
       },
-      atom: true,
       parseDOM: [{
         tag: 'span.kb-shortcode-inline',
         getAttrs: (dom) => ({ content: dom.textContent || null }),

package/src/NodeListItem.ts

@@ -1,6 +1,7 @@
 import {
   type Attrs,
   Fragment,
+  Node as PMNode,
   NodeRange,
   NodeSpec,
   type NodeType,
@@ -12,12 +13,6 @@ import type {
   Transaction,
 } from 'prosemirror-state';
 import { Selection } from 'prosemirror-state';
-import { type CoreEditor, Node } from '@kerebron/editor';
-import {
-  type Command,
-  type CommandFactories,
-  type CommandShortcuts,
-} from '@kerebron/editor/commands';
 import {
   canJoin,
   canSplit,
@@ -25,6 +20,17 @@ import {
   ReplaceAroundStep,
 } from 'prosemirror-transform';
 
+import { type CoreEditor, Node } from '@kerebron/editor';
+import type {
+  Command,
+  CommandFactories,
+  CommandShortcuts,
+} from '@kerebron/editor/commands';
+import {
+  getHtmlAttributes,
+  setHtmlAttributes,
+} from '@kerebron/editor/utilities';
+
 /// Build a command that splits a non-empty textblock at the top level
 /// of a list item by also splitting that list item.
 export function splitListItem(itemType: NodeType, itemAttrs?: Attrs): Command {
@@ -288,13 +294,33 @@ export class NodeListItem extends Node {
   override name = 'list_item';
   requires = ['doc'];
 
+  override attributes = {
+    value: {
+      default: undefined,
+    },
+    type: {
+      default: undefined,
+      fromDom(element: HTMLElement) {
+        return element.hasAttribute('type')
+          ? element.getAttribute('type')
+          : undefined;
+      },
+      toDom(node: PMNode) {
+        return node.attrs.type;
+      },
+    },
+  };
+
   override getNodeSpec(): NodeSpec {
     return {
       content: 'paragraph block*',
-      parseDOM: [{ tag: 'li' }],
+      parseDOM: [{
+        tag: 'li',
+        getAttrs: (element) => setHtmlAttributes(this, element),
+      }],
       defining: true,
-      toDOM() {
-        return ['li', 0];
+      toDOM: (node) => {
+        return ['li', getHtmlAttributes(this, node), 0];
       },
     };
   }

package/src/NodeOrderedList.ts

@@ -29,13 +29,22 @@ export class NodeOrderedList extends Node {
       },
     },
     start: {
-      default: 1,
+      default: undefined,
       fromDom(element: HTMLElement) {
         return element.hasAttribute('start')
           ? +element.getAttribute('start')!
-          : 1;
+          : undefined;
       },
     },
+    id: {
+      default: undefined,
+    },
+    continue: {
+      default: undefined,
+    },
+    odtMarginLeft: {
+      default: undefined,
+    },
   };
 
   override getNodeSpec(): NodeSpec {

package/src/NodeParagraph.ts

@@ -5,7 +5,7 @@ import {
   type CommandShortcuts,
 } from '@kerebron/editor/commands';
 
-type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify' | undefined;
 
 export class NodeParagraph extends Node {
   override name = 'paragraph';
@@ -16,7 +16,7 @@ export class NodeParagraph extends Node {
       content: 'inline*',
       group: 'block',
       attrs: {
-        textAlign: { default: null },
+        textAlign: { default: undefined },
       },
       parseDOM: [
         {
@@ -29,13 +29,13 @@ export class NodeParagraph extends Node {
             ) {
               return { textAlign: style };
             }
-            return { textAlign: null };
+            return false;
           },
         },
       ],
       toDOM(node) {
-        const align = node.attrs.textAlign as TextAlign | null;
-        if (align && align !== 'left') {
+        const align = node.attrs.textAlign || 'left';
+        if (['center', 'right', 'justify'].includes(align)) {
           return ['p', { style: `text-align: ${align}` }, 0];
         }
         return ['p', 0];

package/src/NodeSoftBreak.ts

@@ -0,0 +1,19 @@
+import type { NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+export class NodeSoftBreak extends Node {
+  override name = 'softbreak';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseDOM: [{ tag: 'wbr' }],
+      toDOM() {
+        return ['wbr'];
+      },
+    };
+  }
+}

package/src/pairing/ExtensionPairing.ts

@@ -0,0 +1,14 @@
+import { Plugin } from 'prosemirror-state';
+
+import { Extension } from '@kerebron/editor';
+import { createPairingPlugin } from './PairNodesPlugin.js';
+
+export class ExtensionPairing extends Extension {
+  name = 'pairing-nodes';
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      createPairingPlugin(['shortcode_inline']),
+    ];
+  }
+}

package/src/pairing/PairNodesPlugin.ts

@@ -0,0 +1,56 @@
+import { Plugin, Transaction } from 'prosemirror-state';
+import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+import { buildPairingTransaction } from './pairNodes.js';
+
+export const createPairingPlugin = (types: string[]) => {
+  return new Plugin({
+    appendTransaction(
+      transactions: readonly Transaction[],
+      oldState,
+      newState,
+    ) {
+      const typesToRebuild: Set<string> = new Set();
+
+      for (const tr of transactions) {
+        if (!tr.docChanged) continue;
+
+        for (const step of tr.steps) {
+          if (
+            !(step instanceof ReplaceStep || step instanceof ReplaceAroundStep)
+          ) {
+            continue;
+          }
+
+          if (step.slice) {
+            step.slice.content.descendants((node) => {
+              if (types.includes(node.type.name)) {
+                typesToRebuild.add(node.type.name);
+              }
+            });
+          }
+
+          if (step.from != null && step.to != null && step.from !== step.to) {
+            oldState.doc.nodesBetween(step.from, step.to, (node) => {
+              if (types.includes(node.type.name)) {
+                typesToRebuild.add(node.type.name);
+              }
+            });
+          }
+
+          if (typesToRebuild.size === types.length) break;
+        }
+
+        if (typesToRebuild.size === types.length) break;
+      }
+
+      if (typesToRebuild.size === 0) return null;
+
+      const tr = newState.tr;
+      for (const type of typesToRebuild) {
+        buildPairingTransaction(newState, type, tr);
+      }
+
+      return tr;
+    },
+  });
+};