@kerebron/extension-basic-editor 0.4.31 → 0.5.1

package/esm/NodeInlineShortCode.js

@@ -10,8 +10,23 @@ export function fixCharacters(text) {
         .replace(/\u201d/g, '"')
         .replace(/\u201c/g, '"');
 }
+function replaceAllNodesOfType(tr, doc, oldType, factory) {
+    const replacements = [];
+    doc.descendants((node, pos) => {
+        if (node.type === oldType) {
+            replacements.push({ node, pos });
+        }
+    });
+    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);
+        tr = tr.replaceWith(pos, pos + node.nodeSize, newNode);
+    }
+    return tr;
+}
 export class NodeInlineShortCode extends Node {
-    name = 'shortcode-inline';
+    name = 'shortcode_inline';
     requires = ['doc'];
     getNodeSpec() {
         return {
@@ -19,12 +34,21 @@ export class NodeInlineShortCode extends Node {
             group: 'inline',
             selectable: true,
             attrs: {
-                content: {},
+                content: {
+                    default: '',
+                },
             },
             atom: true,
-            parseDOM: [{ tag: 'span.kb-shortcode-inline' }],
+            parseDOM: [{
+                    tag: 'span.kb-shortcode-inline',
+                    getAttrs: (dom) => ({ content: dom.textContent || null }),
+                }],
             toDOM(node) {
-                return ['span', { class: 'kb-shortcode-inline' }, node.attrs.content];
+                return [
+                    'span',
+                    { class: 'kb-shortcode-inline' },
+                    node.attrs.content || '',
+                ];
             },
         };
     }
@@ -36,5 +60,19 @@ export class NodeInlineShortCode extends Node {
             }),
         ];
     }
+    getCommandFactories(editor, type) {
+        return {
+            'renderShortCode': (createReplacementNode) => {
+                return (state, dispatch) => {
+                    let tr = state.tr;
+                    tr = replaceAllNodesOfType(tr, state.doc, type, createReplacementNode);
+                    if (tr.docChanged && dispatch) {
+                        dispatch(tr);
+                    }
+                    return true;
+                };
+            },
+        };
+    }
 }
 //# sourceMappingURL=NodeInlineShortCode.js.map

package/esm/NodeInlineShortCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeInlineShortCode.js","sourceRoot":"","sources":["../src/NodeInlineShortCode.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAEL,iBAAiB,GAGlB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,OAAO,IAAI;SACR,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;SAClB,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;SAClB,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;QACnB,oCAAoC;SACnC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;SACrB,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;SACvB,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,OAAO,mBAAoB,SAAQ,IAAI;IAClC,IAAI,GAAG,kBAAkB,CAAC;IACnC,QAAQ,GAAG,CAAC,KAAK,CAAC,CAAC;IAEV,WAAW;QAClB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,QAAQ;YACf,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE;gBACL,OAAO,EAAE,EAAE;aACZ;YACD,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,0BAA0B,EAAE,CAAC;YAC/C,KAAK,CAAC,IAAI;gBACR,OAAO,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACxE,CAAC;SACF,CAAC;IACJ,CAAC;IAEQ,aAAa,CAAC,IAAc;QACnC,OAAO;YACL,iBAAiB,CACf,eAAe,EACf,IAAI,EACJ,CAAC,KAAuB,EAAE,EAAE;gBAC1B,MAAM,OAAO,GAAG,aAAa,CAC3B,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAC3C,CAAC;gBACF,OAAO,EAAE,OAAO,EAAE,CAAC;YACrB,CAAC,CACF;SACF,CAAC;IACJ,CAAC;CACF"}
+{"version":3,"file":"NodeInlineShortCode.js","sourceRoot":"","sources":["../src/NodeInlineShortCode.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@kerebron/extension-basic-editor",
-  "version": "0.4.31",
+  "version": "0.5.1",
   "license": "MIT",
-  "module": "./esm/ExtensionBasicEditor.js",
+  "module": "./esm/BasicEditorKit.js",
   "exports": {
+    "./BasicEditorKit": {
+      "import": "./esm/BasicEditorKit.js"
+    },
     "./ExtensionBasicEditor": {
       "import": "./esm/ExtensionBasicEditor.js"
     },
@@ -34,6 +37,9 @@
     "./ExtensionHtml": {
       "import": "./esm/ExtensionHtml.js"
     },
+    "./ExtensionTextAlign": {
+      "import": "./esm/ExtensionTextAlign.js"
+    },
     "./NodeDocument": {
       "import": "./esm/NodeDocument.js"
     },
@@ -106,8 +112,8 @@
     "./MarkSubscript": {
       "import": "./esm/MarkSubscript.js"
     },
-    "./ExtensionTextAlign": {
-      "import": "./esm/ExtensionTextAlign.js"
+    "./assets/*.css": {
+      "import": "./assets/*.css"
     }
   },
   "scripts": {},
@@ -116,7 +122,7 @@
     "src"
   ],
   "dependencies": {
-    "@kerebron/editor": "0.4.31",
+    "@kerebron/editor": "0.5.1",
     "prosemirror-history": "1.4.1",
     "prosemirror-model": "1.25.3",
     "prosemirror-state": "1.4.3",

package/src/BasicEditorKit.ts

@@ -0,0 +1,101 @@
+import { AnyExtensionOrReq, EditorKit } from '@kerebron/editor';
+
+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 { ExtensionMediaUpload } from './ExtensionMediaUpload.js';
+import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
+import { ExtensionTextAlign } from './ExtensionTextAlign.js';
+
+import { MarkLink } from './MarkLink.js';
+import { MarkStrong } from './MarkStrong.js';
+import { MarkItalic } from './MarkItalic.js';
+import { MarkUnderline } from './MarkUnderline.js';
+import { MarkStrike } from './MarkStrike.js';
+import { MarkCode } from './MarkCode.js';
+import { MarkChange } from './MarkChange.js';
+import { MarkBookmark } from './MarkBookmark.js';
+import { MarkTextColor } from './MarkTextColor.js';
+import { MarkHighlight } from './MarkHighlight.js';
+import { MarkSuperscript } from './MarkSuperscript.js';
+import { MarkSubscript } from './MarkSubscript.js';
+
+import { NodeDocument } from './NodeDocument.js';
+import { NodeText } from './NodeText.js';
+import { NodeCodeBlock } from './NodeCodeBlock.js';
+import { NodeBookmark } from './NodeBookmark.js';
+import { NodeParagraph } from './NodeParagraph.js';
+import { NodeHardBreak } from './NodeHardBreak.js';
+import { NodeHorizontalRule } from './NodeHorizontalRule.js';
+import { NodeOrderedList } from './NodeOrderedList.js';
+import { NodeBulletList } from './NodeBulletList.js';
+import { NodeListItem } from './NodeListItem.js';
+import { NodeImage } from './NodeImage.js';
+import { NodeVideo } from './NodeVideo.js';
+import { NodeBlockquote } from './NodeBlockquote.js';
+import { NodeAside } from './NodeAside.js';
+import { NodeHeading } from './NodeHeading.js';
+import { NodeMath } from './NodeMath.js';
+import { NodeDefinitionList } from './NodeDefinitionList.js';
+import { NodeDefinitionTerm } from './NodeDefinitionTerm.js';
+import { NodeDefinitionDesc } from './NodeDefinitionDesc.js';
+import { NodeFrontmatter } from './NodeFrontmatter.js';
+import { NodeTaskList } from './NodeTaskList.js';
+import { NodeTaskItem } from './NodeTaskItem.js';
+import { NodeInlineShortCode } from './NodeInlineShortCode.js';
+import { NodeIframe } from './NodeIframe.js';
+
+export class BasicEditorKit implements EditorKit {
+  getExtensions(): AnyExtensionOrReq[] {
+    return [
+      new ExtensionBaseKeymap(),
+      new ExtensionDropcursor(),
+      new ExtensionGapcursor(),
+      new ExtensionHtml(),
+      new ExtensionMediaUpload(),
+      new ExtensionRemoteSelection(),
+      new ExtensionSelection(),
+      new ExtensionTextAlign(),
+      new NodeDocument(),
+      new NodeText(),
+      new NodeParagraph(),
+      new NodeHardBreak(),
+      new NodeCodeBlock(),
+      new NodeBookmark(),
+      new NodeHorizontalRule(),
+      new NodeOrderedList(),
+      new NodeBulletList(),
+      new NodeListItem(),
+      new NodeTaskList(),
+      new NodeTaskItem(),
+      new NodeDefinitionList(),
+      new NodeDefinitionTerm(),
+      new NodeDefinitionDesc(),
+      new NodeTaskList(),
+      new NodeTaskItem(),
+      new NodeFrontmatter(),
+      new NodeImage(),
+      new NodeVideo(),
+      new NodeBlockquote(),
+      new NodeAside(),
+      new NodeHeading(),
+      new NodeMath(),
+      new NodeInlineShortCode(),
+      new NodeIframe(),
+      new MarkLink(),
+      new MarkItalic(),
+      new MarkStrong(),
+      new MarkUnderline(),
+      new MarkStrike(),
+      new MarkCode(),
+      new MarkChange(),
+      new MarkBookmark(),
+      new MarkTextColor(),
+      new MarkHighlight(),
+      new MarkSuperscript(),
+      new MarkSubscript(),
+    ];
+  }
+}

package/src/ExtensionBasicEditor.ts

@@ -1,97 +1,9 @@
 import { Extension } from '@kerebron/editor';
-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 { ExtensionMediaUpload } from './ExtensionMediaUpload.js';
-import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
-import { ExtensionTextAlign } from './ExtensionTextAlign.js';
+import { BasicEditorKit } from './BasicEditorKit.js';
 
-import { MarkLink } from './MarkLink.js';
-import { MarkStrong } from './MarkStrong.js';
-import { MarkItalic } from './MarkItalic.js';
-import { MarkUnderline } from './MarkUnderline.js';
-import { MarkStrike } from './MarkStrike.js';
-import { MarkCode } from './MarkCode.js';
-import { MarkChange } from './MarkChange.js';
-import { MarkBookmark } from './MarkBookmark.js';
-import { MarkTextColor } from './MarkTextColor.js';
-import { MarkHighlight } from './MarkHighlight.js';
-import { MarkSuperscript } from './MarkSuperscript.js';
-import { MarkSubscript } from './MarkSubscript.js';
-
-import { NodeDocument } from './NodeDocument.js';
-import { NodeText } from './NodeText.js';
-import { NodeCodeBlock } from './NodeCodeBlock.js';
-import { NodeBookmark } from './NodeBookmark.js';
-import { NodeParagraph } from './NodeParagraph.js';
-import { NodeHardBreak } from './NodeHardBreak.js';
-import { NodeHorizontalRule } from './NodeHorizontalRule.js';
-import { NodeOrderedList } from './NodeOrderedList.js';
-import { NodeBulletList } from './NodeBulletList.js';
-import { NodeListItem } from './NodeListItem.js';
-import { NodeImage } from './NodeImage.js';
-import { NodeVideo } from './NodeVideo.js';
-import { NodeBlockquote } from './NodeBlockquote.js';
-import { NodeAside } from './NodeAside.js';
-import { NodeHeading } from './NodeHeading.js';
-import { NodeMath } from './NodeMath.js';
-import { NodeDefinitionList } from './NodeDefinitionList.js';
-import { NodeDefinitionTerm } from './NodeDefinitionTerm.js';
-import { NodeDefinitionDesc } from './NodeDefinitionDesc.js';
-import { NodeFrontmatter } from './NodeFrontmatter.js';
-import { NodeTaskList } from './NodeTaskList.js';
-import { NodeTaskItem } from './NodeTaskItem.js';
-import { NodeInlineShortCode } from './NodeInlineShortCode.js';
+const kit = new BasicEditorKit();
 
 export class ExtensionBasicEditor extends Extension {
   name = 'basic-editor';
-  requires = [
-    new ExtensionBaseKeymap(),
-    new ExtensionDropcursor(),
-    new ExtensionGapcursor(),
-    new ExtensionHtml(),
-    new ExtensionMediaUpload(),
-    new ExtensionRemoteSelection(),
-    new ExtensionSelection(),
-    new ExtensionTextAlign(),
-    new NodeDocument(),
-    new NodeText(),
-    new NodeParagraph(),
-    new NodeHardBreak(),
-    new NodeCodeBlock(),
-    new NodeBookmark(),
-    new NodeHorizontalRule(),
-    new NodeOrderedList(),
-    new NodeBulletList(),
-    new NodeListItem(),
-    new NodeTaskList(),
-    new NodeTaskItem(),
-    new NodeDefinitionList(),
-    new NodeDefinitionTerm(),
-    new NodeDefinitionDesc(),
-    new NodeTaskList(),
-    new NodeTaskItem(),
-    new NodeFrontmatter(),
-    new NodeImage(),
-    new NodeVideo(),
-    new NodeBlockquote(),
-    new NodeAside(),
-    new NodeHeading(),
-    new NodeMath(),
-    new NodeInlineShortCode(),
-    new MarkLink(),
-    new MarkItalic(),
-    new MarkStrong(),
-    new MarkUnderline(),
-    new MarkStrike(),
-    new MarkCode(),
-    new MarkChange(),
-    new MarkBookmark(),
-    new MarkTextColor(),
-    new MarkHighlight(),
-    new MarkSuperscript(),
-    new MarkSubscript(),
-  ];
+  requires = kit.getExtensions();
 }

package/src/NodeIframe.ts

@@ -0,0 +1,37 @@
+import { type NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+export class NodeIframe extends Node {
+  override name = 'iframe';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      inline: true,
+      attrs: {
+        src: {},
+        class: { default: null },
+        alt: { default: null },
+        title: { default: null },
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'iframe[src]',
+          getAttrs(dom: HTMLElement) {
+            return {
+              src: dom.getAttribute('src'),
+              title: dom.getAttribute('title'),
+              alt: dom.getAttribute('alt'),
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        const { src, alt, title } = node.attrs;
+        return ['iframe', { src, alt, title, class: node.attrs.class }];
+      },
+    };
+  }
+}

package/src/NodeImage.ts

@@ -1,5 +1,8 @@
 import { type NodeSpec } from 'prosemirror-model';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorView, NodeViewConstructor } from 'prosemirror-view';
 import { Node } from '@kerebron/editor';
+import type { CoreEditor } from '@kerebron/editor';
 
 export class NodeImage extends Node {
   override name = 'image';
@@ -12,6 +15,8 @@ export class NodeImage extends Node {
         src: {},
         alt: { default: null },
         title: { default: null },
+        width: { default: null },
+        height: { default: null },
       },
       group: 'inline',
       draggable: true,
@@ -23,14 +28,216 @@ export class NodeImage extends Node {
               src: dom.getAttribute('src'),
               title: dom.getAttribute('title'),
               alt: dom.getAttribute('alt'),
+              width: dom.getAttribute('width') || dom.style.width || null,
+              height: dom.getAttribute('height') || dom.style.height || null,
             };
           },
         },
       ],
       toDOM(node) {
-        const { src, alt, title } = node.attrs;
-        return ['img', { src, alt, title }];
+        const { src, alt, title, width, height } = node.attrs;
+        const attrs: Record<string, string> = { src };
+        if (alt) attrs.alt = alt;
+        if (title) attrs.title = title;
+        if (width) attrs.width = width;
+        if (height) attrs.height = height;
+        return ['img', attrs];
       },
     };
   }
+
+  override getNodeView(editor: CoreEditor): NodeViewConstructor {
+    return (node: PmNode, view: EditorView, getPos) => {
+      // Create wrapper div for the image with resize handles
+      const wrapper = document.createElement('span');
+      wrapper.className = 'kb-image-wrapper';
+      wrapper.contentEditable = 'false';
+
+      // Create the image element
+      const img = document.createElement('img');
+      img.src = node.attrs.src;
+      if (node.attrs.alt) img.alt = node.attrs.alt;
+      if (node.attrs.title) img.title = node.attrs.title;
+      if (node.attrs.width) {
+        img.style.width = typeof node.attrs.width === 'number'
+          ? `${node.attrs.width}px`
+          : node.attrs.width;
+      }
+      if (node.attrs.height) {
+        img.style.height = typeof node.attrs.height === 'number'
+          ? `${node.attrs.height}px`
+          : node.attrs.height;
+      }
+      img.draggable = false;
+
+      wrapper.appendChild(img);
+
+      // Create resize handles
+      const positions = ['nw', 'ne', 'sw', 'se'] as const;
+      const handles: HTMLElement[] = [];
+
+      for (const pos of positions) {
+        const handle = document.createElement('span');
+        handle.className =
+          `kb-image-resize-handle kb-image-resize-handle-${pos}`;
+        handle.dataset.position = pos;
+        handles.push(handle);
+        wrapper.appendChild(handle);
+      }
+
+      let isResizing = false;
+      let startX = 0;
+      let startY = 0;
+      let startWidth = 0;
+      let startHeight = 0;
+      let aspectRatio = 1;
+      let activeHandle: string | null = null;
+
+      const onMouseDown = (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        if (!target.classList.contains('kb-image-resize-handle')) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        isResizing = true;
+        activeHandle = target.dataset.position || null;
+        startX = e.clientX;
+        startY = e.clientY;
+
+        const rect = img.getBoundingClientRect();
+        startWidth = rect.width;
+        startHeight = rect.height;
+        aspectRatio = startWidth / startHeight;
+
+        wrapper.classList.add('kb-image-resizing');
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      };
+
+      const onMouseMove = (e: MouseEvent) => {
+        if (!isResizing) return;
+
+        const deltaX = e.clientX - startX;
+        const deltaY = e.clientY - startY;
+
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+
+        // Calculate new dimensions based on which handle is being dragged
+        switch (activeHandle) {
+          case 'se':
+            newWidth = startWidth + deltaX;
+            newHeight = e.shiftKey
+              ? startHeight + deltaY
+              : newWidth / aspectRatio;
+            break;
+          case 'sw':
+            newWidth = startWidth - deltaX;
+            newHeight = e.shiftKey
+              ? startHeight + deltaY
+              : newWidth / aspectRatio;
+            break;
+          case 'ne':
+            newWidth = startWidth + deltaX;
+            newHeight = e.shiftKey
+              ? startHeight - deltaY
+              : newWidth / aspectRatio;
+            break;
+          case 'nw':
+            newWidth = startWidth - deltaX;
+            newHeight = e.shiftKey
+              ? startHeight - deltaY
+              : newWidth / aspectRatio;
+            break;
+        }
+
+        // Ensure minimum size
+        newWidth = Math.max(50, newWidth);
+        newHeight = Math.max(50, newHeight);
+
+        img.style.width = `${Math.round(newWidth)}px`;
+        img.style.height = `${Math.round(newHeight)}px`;
+      };
+
+      const onMouseUp = () => {
+        if (!isResizing) return;
+
+        isResizing = false;
+        activeHandle = null;
+        wrapper.classList.remove('kb-image-resizing');
+
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+
+        // Get the new dimensions and update the node
+        const newWidth = Math.round(img.getBoundingClientRect().width);
+        const newHeight = Math.round(img.getBoundingClientRect().height);
+
+        const pos = getPos();
+        if (typeof pos === 'number') {
+          const tr = view.state.tr.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            width: `${newWidth}px`,
+            height: `${newHeight}px`,
+          });
+          view.dispatch(tr);
+        }
+      };
+
+      wrapper.addEventListener('mousedown', onMouseDown);
+
+      // Add click handler to select the image
+      wrapper.addEventListener('click', (e) => {
+        e.preventDefault();
+        const pos = getPos();
+        if (typeof pos === 'number') {
+          const $pos = view.state.doc.resolve(pos);
+          const selection = view.state.selection.constructor.near($pos);
+          view.dispatch(view.state.tr.setSelection(selection));
+        }
+      });
+
+      return {
+        dom: wrapper,
+        update: (updatedNode: PmNode) => {
+          if (updatedNode.type.name !== 'image') return false;
+
+          img.src = updatedNode.attrs.src;
+          if (updatedNode.attrs.alt) img.alt = updatedNode.attrs.alt;
+          if (updatedNode.attrs.title) img.title = updatedNode.attrs.title;
+          if (updatedNode.attrs.width) {
+            img.style.width = typeof updatedNode.attrs.width === 'number'
+              ? `${updatedNode.attrs.width}px`
+              : updatedNode.attrs.width;
+          } else {
+            img.style.width = '';
+          }
+          if (updatedNode.attrs.height) {
+            img.style.height = typeof updatedNode.attrs.height === 'number'
+              ? `${updatedNode.attrs.height}px`
+              : updatedNode.attrs.height;
+          } else {
+            img.style.height = '';
+          }
+
+          return true;
+        },
+        destroy: () => {
+          wrapper.removeEventListener('mousedown', onMouseDown);
+          document.removeEventListener('mousemove', onMouseMove);
+          document.removeEventListener('mouseup', onMouseUp);
+        },
+        stopEvent: (event: Event) => {
+          // Allow selection events to pass through
+          return event.type === 'mousedown' &&
+            (event.target as HTMLElement).classList.contains(
+              'kb-image-resize-handle',
+            );
+        },
+        ignoreMutation: () => true,
+      };
+    };
+  }
 }