@kerebron/extension-basic-editor 0.5.3 → 0.5.4

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/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;
+    },
+  });
+};

package/src/pairing/pairNodes.ts

@@ -0,0 +1,108 @@
+import { Node } from 'prosemirror-model';
+
+import { EditorState, Transaction } from 'prosemirror-state';
+import { CommandFactory } from '@kerebron/editor/commands';
+import {
+  NESTING_CLOSING,
+  NESTING_OPENING,
+  NESTING_SELF_CLOSING,
+} from '@kerebron/editor';
+
+function generateId(): string {
+  return String(Math.random());
+}
+
+type NodeAndPos = { node: Node; pos: number };
+
+export function buildPairingTransaction(
+  state: EditorState,
+  type: string,
+  tr: Transaction,
+) {
+  const { doc } = state;
+
+  const stackMap: Map<string, Array<NodeAndPos>> = new Map();
+  const nodes: Array<NodeAndPos> = [];
+
+  doc.descendants((node, pos) => {
+    if (node.type.name === type) {
+      nodes.push({ node, pos });
+    }
+  });
+
+  let modified = false;
+
+  for (const { node, pos } of nodes) {
+    const raw = node.attrs.content?.trim();
+    if (!raw) continue;
+
+    const match = raw.match(/^[^0-9a-z\/]*(\/?)[\s]*([\w]+)/i);
+    const isClosing = match[1] === '/';
+    const name = match[2];
+
+    if (!isClosing) {
+      if (!stackMap.has(name)) {
+        stackMap.set(name, []);
+      }
+
+      stackMap.get(name)!.push({ node, pos });
+    } else {
+      const stack = stackMap.get(name);
+
+      if (stack && stack.length > 0) {
+        const opening = stack.pop()!;
+        const id = generateId();
+
+        tr.setNodeMarkup(opening.pos, undefined, {
+          ...opening.node.attrs,
+          id,
+          nesting: NESTING_OPENING,
+          error: undefined,
+        });
+
+        tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          id,
+          nesting: NESTING_CLOSING,
+          error: undefined,
+        });
+      } else {
+        tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          error: 'Closing shortcode without matching opening',
+          nesting: NESTING_CLOSING,
+        });
+      }
+
+      modified = true;
+    }
+  }
+
+  // Any leftover openings are self-closing (no matching close)
+  for (const [, stack] of stackMap.entries()) {
+    for (const { node, pos } of stack) {
+      tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        nesting: NESTING_SELF_CLOSING,
+        id: undefined,
+      });
+      modified = true;
+    }
+  }
+
+  return modified ? tr : null;
+}
+
+export const pairNodes: CommandFactory = (type: string) => {
+  return (state: EditorState, dispatch) => {
+    const tr = buildPairingTransaction(state, type, state.tr);
+    if (!tr) {
+      return false;
+    }
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};