@kerebron/extension-basic-editor 0.4.28 → 0.4.29

package/src/ExtensionMediaUpload.ts

@@ -0,0 +1,258 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import { Extension } from '@kerebron/editor';
+
+export interface MediaUploadOptions {
+  /** Maximum file size in bytes (default: 10MB for images) */
+  maxFileSize?: number;
+
+  /** Maximum file size for videos (default: 50MB) */
+  maxVideoFileSize?: number;
+
+  /** Allowed image MIME types */
+  allowedImageTypes?: string[];
+
+  /** Allowed video MIME types */
+  allowedVideoTypes?: string[];
+
+  /** Use object URLs for videos instead of base64 (default: true) */
+  useObjectURLForVideos?: boolean;
+
+  /** Custom upload handler. Returns the URL of uploaded media. */
+  uploadHandler?: (file: File) => Promise<string>;
+}
+
+const mediaUploadKey = new PluginKey('mediaUpload');
+
+/** Convert a File to a base64 data URL */
+function fileToDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/** Convert a File to an object URL (better for videos) */
+function fileToObjectURL(file: File): string {
+  return URL.createObjectURL(file);
+}
+
+/** Check if a file is an image */
+function isImage(file: File, allowedTypes: string[]): boolean {
+  return allowedTypes.some((type) => file.type.match(type));
+}
+
+/** Check if a file is a video */
+function isVideo(file: File, allowedTypes: string[]): boolean {
+  return allowedTypes.some((type) => file.type.match(type));
+}
+
+/** Insert an image into the editor at the given position */
+function insertImage(
+  view: EditorView,
+  pos: number,
+  src: string,
+  alt?: string,
+  title?: string,
+) {
+  const { schema } = view.state;
+  const imageType = schema.nodes.image;
+
+  if (!imageType) {
+    console.warn('Image node type not found in schema');
+    return;
+  }
+
+  const node = imageType.create({ src, alt, title });
+  const transaction = view.state.tr.insert(pos, node);
+  view.dispatch(transaction);
+}
+
+/** Insert a video into the editor at the given position */
+function insertVideo(
+  view: EditorView,
+  pos: number,
+  src: string,
+  title?: string,
+  width?: string,
+  height?: string,
+) {
+  const { schema } = view.state;
+  const videoType = schema.nodes.video;
+
+  if (!videoType) {
+    console.warn('Video node type not found in schema');
+    return;
+  }
+
+  const node = videoType.create({ src, title, width, height, controls: true });
+  const transaction = view.state.tr.insert(pos, node);
+  view.dispatch(transaction);
+}
+
+/** Handle media files (images and videos) from drop or paste events */
+async function handleMediaFiles(
+  view: EditorView,
+  files: File[],
+  pos: number,
+  options: MediaUploadOptions,
+): Promise<void> {
+  const {
+    maxFileSize = 10 * 1024 * 1024, // 10MB for images
+    maxVideoFileSize = 50 * 1024 * 1024, // 50MB for videos
+    allowedImageTypes = ['^image/'],
+    allowedVideoTypes = ['^video/'],
+    uploadHandler,
+  } = options;
+
+  for (const file of files) {
+    const isImageFile = isImage(file, allowedImageTypes);
+    const isVideoFile = isVideo(file, allowedVideoTypes);
+
+    // Skip if not an image or video
+    if (!isImageFile && !isVideoFile) {
+      continue;
+    }
+
+    // Check file size
+    const sizeLimit = isVideoFile ? maxVideoFileSize : maxFileSize;
+    if (file.size > sizeLimit) {
+      console.warn(
+        `${isVideoFile ? 'Video' : 'Image'} file "${file.name}" is too large (${
+          (file.size / 1024 / 1024).toFixed(2)
+        }MB). Maximum size is ${(sizeLimit / 1024 / 1024).toFixed(2)}MB.`,
+      );
+      continue;
+    }
+
+    try {
+      // Upload or convert to data URL
+      console.log(
+        `Processing ${isVideoFile ? 'video' : 'image'}: ${file.name} (${
+          (file.size / 1024 / 1024).toFixed(2)
+        }MB, ${file.type})`,
+      );
+
+      let src: string;
+      if (uploadHandler) {
+        src = await uploadHandler(file);
+      } else if (isVideoFile && options.useObjectURLForVideos !== false) {
+        // Use object URL for videos (better performance, doesn't bloat the document)
+        src = fileToObjectURL(file);
+        console.log('Using object URL for video:', src);
+      } else {
+        // Use base64 data URL
+        src = await fileToDataURL(file);
+        console.log(
+          `${
+            isVideoFile ? 'Video' : 'Image'
+          } converted to data URL, length: ${src.length} characters`,
+        );
+      }
+
+      // Insert the media
+      if (isVideoFile) {
+        insertVideo(view, pos, src, file.name);
+        console.log('Video inserted into editor');
+      } else {
+        insertImage(view, pos, src, file.name);
+        console.log('Image inserted into editor');
+      }
+
+      // Increment position for next media
+      pos += 1;
+    } catch (error) {
+      console.error(
+        `Failed to process ${isVideoFile ? 'video' : 'image'} "${file.name}":`,
+        error,
+      );
+    }
+  }
+}
+
+/** Create the media upload plugin */
+function createMediaUploadPlugin(options: MediaUploadOptions = {}): Plugin {
+  return new Plugin({
+    key: mediaUploadKey,
+
+    props: {
+      /** Handle file drops */
+      handleDrop(view, event, slice, moved) {
+        // If content was moved from within the editor, let the default handler deal with it
+        if (moved) return false;
+
+        const files = Array.from(event.dataTransfer?.files || []);
+        if (files.length === 0) return false;
+
+        // Check if any files are images or videos
+        const {
+          allowedImageTypes = ['^image/'],
+          allowedVideoTypes = ['^video/'],
+        } = options;
+        const hasMedia = files.some((file) =>
+          isImage(file, allowedImageTypes) || isVideo(file, allowedVideoTypes)
+        );
+        if (!hasMedia) return false;
+
+        // Prevent default drop behavior
+        event.preventDefault();
+
+        // Get drop position
+        const coords = { left: event.clientX, top: event.clientY };
+        const pos = view.posAtCoords(coords);
+        if (!pos) return false;
+
+        // Handle the media files
+        handleMediaFiles(view, files, pos.pos, options);
+
+        return true;
+      },
+
+      /** Handle paste events with images (videos typically don't paste) */
+      handlePaste(view, event, slice) {
+        const items = Array.from(event.clipboardData?.items || []);
+        const imageItems = items.filter((item) =>
+          item.type.startsWith('image/')
+        );
+
+        if (imageItems.length === 0) return false;
+
+        // Prevent default paste behavior
+        event.preventDefault();
+
+        // Convert clipboard items to files
+        const files: File[] = [];
+        for (const item of imageItems) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+
+        if (files.length === 0) return false;
+
+        // Get current cursor position
+        const { from } = view.state.selection;
+
+        // Handle the image files
+        handleMediaFiles(view, files, from, options);
+
+        return true;
+      },
+    },
+  });
+}
+
+/** Extension that adds media upload support via drag & drop and paste */
+export class ExtensionMediaUpload extends Extension {
+  name = 'mediaUpload';
+
+  constructor(protected override config: Partial<MediaUploadOptions> = {}) {
+    super(config);
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [createMediaUploadPlugin(this.config)];
+  }
+}

package/src/ExtensionSelection.ts

@@ -0,0 +1,379 @@
+import {
+  Fragment,
+  Node,
+  NodeType,
+  ResolvedPos,
+  Slice,
+} from 'prosemirror-model';
+import {
+  AllSelection,
+  EditorState,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state';
+
+import { type CoreEditor, Extension } from '@kerebron/editor';
+import type {
+  CommandFactories,
+  CommandFactory,
+} from '@kerebron/editor/commands';
+import { createNodeFromObject } from '@kerebron/editor/utilities';
+import { EditorView } from 'prosemirror-view';
+
+function normalizeSiblings(fragment: Fragment, $context: ResolvedPos) {
+  if (fragment.childCount < 2) return fragment;
+  for (let d = $context.depth; d >= 0; d--) {
+    let parent = $context.node(d);
+    let match = parent.contentMatchAt($context.index(d));
+    let lastWrap: readonly NodeType[] | undefined;
+    let result: Node[] | null = [];
+    fragment.forEach((node) => {
+      if (!result) return;
+      let wrap = match.findWrapping(node.type);
+      let inLast;
+      if (!wrap) return result = null;
+      if (
+        inLast = result.length && lastWrap!.length &&
+          addToSibling(wrap, lastWrap!, node, result[result.length - 1], 0)
+      ) {
+        result[result.length - 1] = inLast;
+      } else {
+        if (result.length) {
+          result[result.length - 1] = closeRight(
+            result[result.length - 1],
+            lastWrap!.length,
+          );
+        }
+        let wrapped = withWrappers(node, wrap);
+        result.push(wrapped);
+        match = match.matchType(wrapped.type)!;
+        lastWrap = wrap;
+      }
+    });
+    if (result) return Fragment.from(result);
+  }
+  return fragment;
+}
+
+function withWrappers(node: Node, wrap: readonly NodeType[], from = 0) {
+  for (let i = wrap.length - 1; i >= from; i--) {
+    node = wrap[i].create(null, Fragment.from(node));
+  }
+  return node;
+}
+
+function addToSibling(
+  wrap: readonly NodeType[],
+  lastWrap: readonly NodeType[],
+  node: Node,
+  sibling: Node,
+  depth: number,
+): Node | undefined {
+  if (
+    depth < wrap.length && depth < lastWrap.length &&
+    wrap[depth] == lastWrap[depth]
+  ) {
+    let inner = addToSibling(
+      wrap,
+      lastWrap,
+      node,
+      sibling.lastChild!,
+      depth + 1,
+    );
+    if (inner) {
+      return sibling.copy(
+        sibling.content.replaceChild(sibling.childCount - 1, inner),
+      );
+    }
+    let match = sibling.contentMatchAt(sibling.childCount);
+    if (
+      match.matchType(depth == wrap.length - 1 ? node.type : wrap[depth + 1])
+    ) {
+      return sibling.copy(
+        sibling.content.append(
+          Fragment.from(withWrappers(node, wrap, depth + 1)),
+        ),
+      );
+    }
+  }
+}
+
+function closeRight(node: Node, depth: number) {
+  if (depth == 0) return node;
+  let fragment = node.content.replaceChild(
+    node.childCount - 1,
+    closeRight(node.lastChild!, depth - 1),
+  );
+  let fill = node.contentMatchAt(node.childCount).fillBefore(
+    Fragment.empty,
+    true,
+  )!;
+  return node.copy(fragment.append(fill));
+}
+
+function closeRange(
+  fragment: Fragment,
+  side: number,
+  from: number,
+  to: number,
+  depth: number,
+  openEnd: number,
+) {
+  let node = side < 0 ? fragment.firstChild! : fragment.lastChild!,
+    inner = node.content;
+  if (fragment.childCount > 1) openEnd = 0;
+  if (depth < to - 1) {
+    inner = closeRange(inner, side, from, to, depth + 1, openEnd);
+  }
+  if (depth >= from) {
+    inner = side < 0
+      ? node.contentMatchAt(0)!.fillBefore(inner, openEnd <= depth)!.append(
+        inner,
+      )
+      : inner.append(
+        node.contentMatchAt(node.childCount)!.fillBefore(Fragment.empty, true)!,
+      );
+  }
+  return fragment.replaceChild(
+    side < 0 ? 0 : fragment.childCount - 1,
+    node.copy(inner),
+  );
+}
+
+function closeSlice(slice: Slice, openStart: number, openEnd: number) {
+  if (openStart < slice.openStart) {
+    slice = new Slice(
+      closeRange(
+        slice.content,
+        -1,
+        openStart,
+        slice.openStart,
+        0,
+        slice.openEnd,
+      ),
+      openStart,
+      slice.openEnd,
+    );
+  }
+  if (openEnd < slice.openEnd) {
+    slice = new Slice(
+      closeRange(slice.content, 1, openEnd, slice.openEnd, 0, 0),
+      slice.openStart,
+      openEnd,
+    );
+  }
+  return slice;
+}
+
+function sliceSingleNode(slice: Slice) {
+  return slice.openStart == 0 && slice.openEnd == 0 &&
+      slice.content.childCount == 1
+    ? slice.content.firstChild
+    : null;
+}
+
+function fixSlice(slice: Slice, $context: ResolvedPos): Slice {
+  slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true);
+  if (slice.openStart || slice.openEnd) {
+    let openStart = 0, openEnd = 0;
+    for (
+      let node = slice.content.firstChild;
+      openStart < slice.openStart && !node!.type.spec.isolating;
+      openStart++, node = node!.firstChild
+      // deno-lint-ignore no-empty
+    ) {}
+    for (
+      let node = slice.content.lastChild;
+      openEnd < slice.openEnd && !node!.type.spec.isolating;
+      openEnd++, node = node!.lastChild
+      // deno-lint-ignore no-empty
+    ) {}
+    slice = closeSlice(slice, openStart, openEnd);
+  }
+  return slice;
+}
+
+function sliceHasOnlyText(slice: Slice) {
+  return slice.content.content.every((node) => node.isInline);
+}
+
+const selectAll: CommandFactory = () => {
+  return function (
+    state: EditorState,
+    dispatch?: (tr: Transaction) => void,
+    view?: EditorView,
+  ) {
+    const tr = state.tr.setSelection(new AllSelection(state.doc));
+    if (view) {
+      view.dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+function textPositionsToResolvedPos(
+  textPosVec: number[],
+  doc: Node,
+  paraNum: number,
+): ResolvedPos[] {
+  const retVal = textPosVec.map((x) => -1);
+
+  let currentTextPos = 0;
+  let inParaRange = false;
+
+  function callback(
+    currentPos: number,
+    level: number,
+    idx: number,
+    textLen: number,
+  ) {
+    if (!inParaRange) {
+      return;
+    }
+
+    for (let i = 0; i < textPosVec.length; i++) {
+      const val = textPosVec[i];
+      if (val >= currentTextPos && val < currentTextPos + textLen) {
+        retVal[i] = currentPos + (val - currentTextPos);
+      }
+    }
+
+    currentTextPos += textLen;
+  }
+
+  function treeTraverse(
+    node: Node,
+    level = 0,
+    idx = 0,
+    currentPos = 0,
+  ) {
+    if (level === 1 && idx === paraNum) {
+      inParaRange = true;
+    }
+
+    let textLen = 0;
+    if (node.isText && node.text) {
+      textLen = node.text?.length;
+    } else if (node.isLeaf) {
+      textLen = 1;
+    }
+
+    if (textLen > 0) {
+      callback(currentPos, level, idx, textLen);
+    }
+
+    node.forEach((child, offset, childIndex) => {
+      treeTraverse(child, level + 1, childIndex, currentPos + offset + 1);
+    });
+  }
+
+  treeTraverse(doc);
+
+  if (inParaRange) {
+    for (let i = 0; i < textPosVec.length; i++) {
+      const val = textPosVec[i];
+      if (retVal[i] === -1) {
+        if (val < currentTextPos) {
+          retVal[i] = 1;
+        } else {
+          retVal[i] = doc.nodeSize - 1;
+        }
+      }
+    }
+  }
+
+  return retVal.map((x) => doc.resolve(x - 1));
+}
+
+const selectText: CommandFactory = (
+  textStart: number,
+  length: number,
+  paraNum = 0,
+) => {
+  return function (
+    state: EditorState,
+    dispatch?: (tr: Transaction) => void,
+    view?: EditorView,
+  ) {
+    const [$head, $anchor] = textPositionsToResolvedPos(
+      [textStart + length, textStart],
+      state.doc,
+      paraNum,
+    );
+
+    const tr = state.tr.setSelection(new TextSelection($anchor, $head));
+    if (view) {
+      view.dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+export class ExtensionSelection extends Extension {
+  name = 'selection';
+
+  extractSelection(): Node {
+    const state = this.editor.state;
+    const { from, to } = state.selection;
+    const slice = state.doc.slice(from, to);
+
+    if (sliceHasOnlyText(slice)) {
+      const para = state.schema.nodes.paragraph.create(null, slice.content);
+      return state.schema.topNodeType.createAndFill(null, [para])!;
+    }
+
+    return state.schema.topNodeType.createAndFill(null, slice.content)!;
+  }
+
+  replaceSelection(otherDoc: Node) {
+    const preferPlain = false;
+    const view = this.editor.view;
+    const state = this.editor.state;
+
+    let slice: Slice;
+
+    if (otherDoc.type?.name === 'doc') {
+      otherDoc = createNodeFromObject(otherDoc.toJSON(), this.editor.schema);
+    }
+    slice = new Slice(otherDoc.content, 1, 1);
+
+    const $context = state.selection.$from;
+
+    slice = fixSlice(slice, $context);
+
+    let singleNode = sliceSingleNode(slice);
+    let tr = singleNode
+      ? state.tr.replaceSelectionWith(singleNode, preferPlain)
+      : state.tr.replaceSelection(slice);
+    view.dispatch(tr.scrollIntoView());
+  }
+
+  appendSelection(otherDoc: Node) {
+    const view = this.editor.view;
+    const { state } = view;
+
+    let slice: Slice;
+
+    if (otherDoc.type?.name === 'doc') {
+      otherDoc = createNodeFromObject(otherDoc.toJSON(), this.editor.schema);
+    }
+    slice = new Slice(otherDoc.content, 1, 1);
+
+    const $context = view.state.selection.$from;
+
+    slice = fixSlice(slice, $context);
+
+    const tr = state.tr.insert(view.state.selection.to, slice.content);
+    view.dispatch(tr.scrollIntoView());
+  }
+
+  override getCommandFactories(editor: CoreEditor): Partial<CommandFactories> {
+    this.editor = editor;
+    return {
+      'selectAll': () => selectAll(),
+      'selectText': (...args) => selectText(...args),
+    };
+  }
+}

package/src/ExtensionTextAlign.ts

@@ -0,0 +1,50 @@
+import { type CoreEditor, Extension } from '@kerebron/editor';
+import { type EditorState, type Transaction } from 'prosemirror-state';
+import { type CommandFactories } from '@kerebron/editor/commands';
+
+type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+/**
+ * Extension that adds text alignment commands.
+ * Works by setting a 'textAlign' attribute on block nodes that support it.
+ */
+export class ExtensionTextAlign extends Extension {
+  name = 'textAlign';
+
+  override getCommandFactories(editor: CoreEditor): Partial<CommandFactories> {
+    const setAlignment = (align: TextAlign) => {
+      return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
+        const { selection, tr } = state;
+        const { from, to } = selection;
+
+        let changed = false;
+        state.doc.nodesBetween(from, to, (node, pos) => {
+          // Check if this node type has a textAlign attribute
+          if (
+            node.isBlock &&
+            node.type.spec.attrs &&
+            'textAlign' in node.type.spec.attrs
+          ) {
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              textAlign: align,
+            });
+            changed = true;
+          }
+        });
+
+        if (changed && dispatch) {
+          dispatch(tr);
+        }
+        return changed;
+      };
+    };
+
+    return {
+      setTextAlignLeft: () => setAlignment('left'),
+      setTextAlignCenter: () => setAlignment('center'),
+      setTextAlignRight: () => setAlignment('right'),
+      setTextAlignJustify: () => setAlignment('justify'),
+    };
+  }
+}

package/src/MarkBookmark.ts

@@ -0,0 +1,20 @@
+import { MarkSpec } from 'prosemirror-model';
+
+import { Mark } from '@kerebron/editor';
+
+export class MarkBookmark extends Mark {
+  override name = 'bookmark';
+  requires = ['doc'];
+
+  override getMarkSpec(): MarkSpec {
+    return {
+      attrs: {
+        id: {},
+      },
+      parseDOM: [],
+      toDOM(mark) {
+        return ['a', { id: mark.attrs.id }, 0];
+      },
+    };
+  }
+}