@tiptap/core 3.0.0-next.0 → 3.0.0-next.2

package/src/types.ts

@@ -1,12 +1,19 @@
 import {
   Mark as ProseMirrorMark,
   Node as ProseMirrorNode,
-  NodeType,
   ParseOptions,
+  Slice,
 } from '@tiptap/pm/model'
 import { EditorState, Transaction } from '@tiptap/pm/state'
+import { Mappable } from '@tiptap/pm/transform'
 import {
-  Decoration, EditorProps, EditorView, NodeView,
+  Decoration,
+  DecorationAttrs,
+  EditorProps,
+  EditorView,
+  NodeView,
+  NodeViewConstructor,
+  ViewMutationRecord,
 } from '@tiptap/pm/view'
 
 import { Editor } from './Editor.js'
@@ -58,6 +65,8 @@ export interface EditorEvents {
   focus: { editor: Editor; event: FocusEvent; transaction: Transaction };
   blur: { editor: Editor; event: FocusEvent; transaction: Transaction };
   destroy: void;
+  paste: { editor: Editor; event: ClipboardEvent; slice: Slice };
+  drop: { editor: Editor; event: DragEvent; slice: Slice; moved: boolean };
 }
 
 export type EnableRules = (AnyExtension | string)[] | boolean;
@@ -79,7 +88,38 @@ export interface EditorOptions {
   };
   enableInputRules: EnableRules;
   enablePasteRules: EnableRules;
-  enableCoreExtensions: boolean;
+  /**
+   * Determines whether core extensions are enabled.
+   *
+   * If set to `false`, all core extensions will be disabled.
+   * To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`.
+   * Extensions not listed in the object will remain enabled.
+   *
+   * @example
+   * // Disable all core extensions
+   * enabledCoreExtensions: false
+   *
+   * @example
+   * // Disable only the keymap core extension
+   * enabledCoreExtensions: { keymap: false }
+   *
+   * @default true
+   */
+  enableCoreExtensions?:
+    | boolean
+    | Partial<
+        Record<
+          | 'editable'
+          | 'clipboardTextSerializer'
+          | 'commands'
+          | 'focusEvents'
+          | 'keymap'
+          | 'tabindex'
+          | 'drop'
+          | 'paste',
+          false
+        >
+      >;
   /**
    * If `true`, the editor will check the content for errors on initialization.
    * Emitting the `contentError` event if the content is invalid.
@@ -100,6 +140,8 @@ export interface EditorOptions {
   onFocus: (props: EditorEvents['focus']) => void;
   onBlur: (props: EditorEvents['blur']) => void;
   onDestroy: (props: EditorEvents['destroy']) => void;
+  onPaste: (e: ClipboardEvent, slice: Slice) => void;
+  onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void;
 }
 
 export type HTMLContent = string;
@@ -184,39 +226,85 @@ export type ValuesOf<T> = T[keyof T];
 
 export type KeysWithTypeOf<T, Type> = { [P in keyof T]: T[P] extends Type ? P : never }[keyof T];
 
+export type DOMNode = InstanceType<typeof window.Node>
+
+/**
+ * prosemirror-view does not export the `type` property of `Decoration`.
+ * So, this defines the `DecorationType` interface to include the `type` property.
+ */
+export interface DecorationType {
+  spec: any
+  map(mapping: Mappable, span: Decoration, offset: number, oldOffset: number): Decoration | null
+  valid(node: Node, span: Decoration): boolean
+  eq(other: DecorationType): boolean
+  destroy(dom: DOMNode): void
+  readonly attrs: DecorationAttrs
+}
+
+/**
+ * prosemirror-view does not export the `type` property of `Decoration`.
+ * This adds the `type` property to the `Decoration` type.
+ */
 export type DecorationWithType = Decoration & {
-  type: NodeType;
+  type: DecorationType;
 };
 
-export type NodeViewProps = {
-  editor: Editor;
-  node: ProseMirrorNode;
-  decorations: DecorationWithType[];
+export interface NodeViewProps extends NodeViewRendererProps {
+  // TODO this type is not technically correct, but it's the best we can do for now since prosemirror doesn't expose the type of decorations
+  decorations: readonly DecorationWithType[];
   selected: boolean;
-  extension: Node;
-  getPos: () => number;
   updateAttributes: (attributes: Record<string, any>) => void;
   deleteNode: () => void;
-};
+}
 
 export interface NodeViewRendererOptions {
   stopEvent: ((props: { event: Event }) => boolean) | null;
   ignoreMutation:
-    | ((props: { mutation: MutationRecord | { type: 'selection'; target: Element } }) => boolean)
+    | ((props: { mutation: ViewMutationRecord }) => boolean)
     | null;
   contentDOMElementTag: string;
 }
 
-export type NodeViewRendererProps = {
+export interface NodeViewRendererProps {
+  // pass-through from prosemirror
+  /**
+   * The node that is being rendered.
+   */
+  node: Parameters<NodeViewConstructor>[0];
+  /**
+   * The editor's view.
+   */
+  view: Parameters<NodeViewConstructor>[1];
+  /**
+   * A function that can be called to get the node's current position in the document.
+   */
+  getPos: Parameters<NodeViewConstructor>[2];
+  /**
+   * is an array of node or inline decorations that are active around the node.
+   * They are automatically drawn in the normal way, and you will usually just want to ignore this, but they can also be used as a way to provide context information to the node view without adding it to the document itself.
+   */
+  decorations: Parameters<NodeViewConstructor>[3];
+  /**
+   * holds the decorations for the node's content. You can safely ignore this if your view has no content or a contentDOM property, since the editor will draw the decorations on the content.
+   * But if you, for example, want to create a nested editor with the content, it may make sense to provide it with the inner decorations.
+   */
+  innerDecorations: Parameters<NodeViewConstructor>[4];
+  // tiptap-specific
+  /**
+   * The editor instance.
+   */
   editor: Editor;
-  node: ProseMirrorNode;
-  getPos: (() => number) | boolean;
-  HTMLAttributes: Record<string, any>;
-  decorations: Decoration[];
+  /**
+   * The extension that is responsible for the node.
+   */
   extension: Node;
-};
+  /**
+   * The HTML attributes that should be added to the node's DOM element.
+   */
+  HTMLAttributes: Record<string, any>;
+}
 
-export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView | {};
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 

package/src/utilities/mergeAttributes.ts

@@ -23,7 +23,24 @@ export function mergeAttributes(...objects: Record<string, any>[]): Record<strin
 
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ')
         } else if (key === 'style') {
-          mergedAttributes[key] = [mergedAttributes[key], value].join('; ')
+          const newStyles: string[] = value ? value.split(';').map((style: string) => style.trim()).filter(Boolean) : []
+          const existingStyles: string[] = mergedAttributes[key] ? mergedAttributes[key].split(';').map((style: string) => style.trim()).filter(Boolean) : []
+
+          const styleMap = new Map<string, string>()
+
+          existingStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          newStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join('; ')
         } else {
           mergedAttributes[key] = value
         }