@udecode/[email protected]

Patch Changes

• #3955 by @doctormarty – Resolved the “Cannot assign to read only property ‘0’” error by creating a new array for the fragment instead of mutating it.

@udecode/[email protected]

Patch Changes

• #3920 by @zbeyens –
  • Added Nullable type

@udecode/[email protected]

Patch Changes

• #3948 by @zbeyens –
  • Fix deselect, deselectDOM methods
  • Remove all LegacyEditorMethods from Editor

@udecode/[email protected]

Major Changes

• #3920 by @zbeyens –

  • Remove slate, slate-dom, slate-react, slate-history and slate-hyperscript from your dependencies. It's now part of this package and @udecode/plate. All exports remain the same or have equivalents (see below).
  • Renamed createTEditor to createEditor.
  • createEditor now returns an editor (Editor) with all queries under editor.api and transforms under editor.tf. You can see or override them at a glance. For example, we now use editor.tf.setNodes instead of importing setNodes. This marks the completion of generic typing and the removal of error throws from slate, slate-dom, and slate-history queries/transforms, without forking implementations. We’ve also reduced the number of queries/transforms by merging a bunch of them.

  The following interfaces from slate and slate-dom are now part of Editor:

  • Editor, EditorInterface

  • Transforms

  • HistoryEditor (noop, unchanged), HistoryEditorInterface

  • DOMEditor (noop, unchanged), DOMEditorInterface

  • editor.findPath now returns DOMEditor.findPath (memo) and falls back to findNodePath (traversal, less performant) if not found.

  • Removed the first parameter (editor) from:

    • editor.hasEditableTarget
    • editor.hasSelectableTarget
    • editor.isTargetInsideNonReadonlyVoid
    • editor.hasRange
    • editor.hasTarget

  • editor.api.node(options) (previously findNode) at option is now at ?? editor.selection instead of at ?? editor.selection ?? []. That means if you want to lookup the entire document, you need to pass [] explicitly.

  • Removed setNode in favor of setNodes (you can now pass a TNode to at directly).

  • Removed setElements in favor of setNodes.

  • Removed unused isWordAfterTrigger, setBlockAboveNode, setBlockAboveTexts, setBlockNodes, getPointNextToVoid.

  • Replaced Path from slate with Path (type) and PathApi (static methods).

  • Replaced Operation from slate with Operation (type) and OperationApi (static methods).

  • Replaced Point from slate with Point (type) and PointApi (static methods).

  • Replaced Text from slate with TText (type) and TextApi (static methods). We also export Text type like slate but we don't recommend it as it's conflicting with the DOM type.

  • Replaced Range from slate with TRange (type) and RangeApi (static methods). We also export Range type like slate but we don't recommend it as it's conflicting with the DOM type.

  • Replaced Location from slate with TLocation (type) and LocationApi (static methods). We also export Location type like slate but we don't recommend it as it's conflicting with the DOM type.

  • Replaced Span from slate with Span (type) and SpanApi (static methods).

  • Replaced Node from slate with TNode (type) and NodeApi (static methods). We also export Node type like slate but we don't recommend it as it's conflicting with the DOM type.

  • Replaced Element from slate with TElement (type) and ElementApi (static methods). We also export Element type like slate but we don't recommend it as it's conflicting with the DOM type.

  • Signature change:

    • editor.tf.toggle.block({ type, ...options }) -> editor.tf.toggleBlock(type, options)
    • editor.tf.toggle.mark({ key, clear }) -> editor.tf.toggleMark(key, { remove: clear })

  • Moved editor functions:

    • addMark -> editor.tf.addMark
    • addRangeMarks -> editor.tf.setNodes(props, { at, marks: true })
    • blurEditor -> editor.tf.blur
    • collapseSelection -> editor.tf.collapse
    • createDocumentNode -> editor.api.create.value (core)
    • createNode -> editor.api.create.block
    • createPathRef -> editor.api.pathRef
    • createPointRef -> editor.api.pointRef
    • createRangeRef -> editor.api.rangeRef
    • deleteBackward({ unit }) -> editor.tf.deleteBackward(unit)
    • deleteForward({ unit }) -> editor.tf.deleteForward(unit)
    • deleteFragment -> editor.tf.deleteFragment
    • deleteText -> editor.tf.delete
    • deselect -> editor.tf.deselect
    • deselectEditor -> editor.tf.deselectDOM
    • duplicateBlocks -> editor.tf.duplicateNodes({ nodes })
    • findDescendant -> editor.api.descendant
    • findEditorDocumentOrShadowRoot -> editor.api.findDocumentOrShadowRoot
    • findEventRange -> editor.api.findEventRange
    • findNode(options) -> editor.api.node(options)
    • findNodeKey -> editor.api.findKey
    • findNodePath -> editor.api.findPath
    • findPath -> editor.api.findPath
    • focusEditor -> editor.tf.focus({ at })
    • focusEditorEdge -> editor.tf.focus({ at, edge: 'startEditor' | 'endEditor' })
    • getAboveNode -> editor.api.above
    • getAncestorNode -> editor.api.block({ highest: true })
    • getBlockAbove -> editor.api.block({ at, above: true }) or editor.api.block() if at is not a path
    • getBlocks -> editor.api.blocks
    • getEdgeBlocksAbove -> editor.api.edgeBlocks
    • getEdgePoints -> editor.api.edges
    • getEditorString -> editor.api.string
    • getEditorWindow -> editor.api.getWindow
    • getEndPoint -> editor.api.end
    • getFirstNode -> editor.api.first
    • getFragment -> editor.api.fragment
    • getFragmentProp(fragment, options) -> editor.api.prop({ nodes, ...options})
    • getLastNode -> editor.api.last
    • getLastNodeByLevel(level) -> editor.api.last([], { level })
    • getLeafNode -> editor.api.leaf
    • getLevels -> editor.api.levels
    • getMark -> editor.api.mark
    • getMarks -> editor.api.marks
    • getNextNode -> editor.api.next
    • getNextNodeStartPoint -> editor.api.start(at, { next: true })
    • getNodeEntries -> editor.api.nodes
    • getNodeEntry -> editor.api.node(at, options)
    • getNodesRange -> editor.api.nodesRange
    • getParentNode -> editor.api.parent
    • getPath -> editor.api.path
    • getPathRefs -> editor.api.pathRefs
    • getPoint -> editor.api.point
    • getPointAfter -> editor.api.after
    • getPointBefore -> editor.api.before
    • getPointBeforeLocation -> editor.api.before
    • getPointRefs -> editor.api.pointRefs
    • getPositions -> editor.api.positions
    • getPreviousBlockById -> editor.api.previous({ id, block: true })
    • getPreviousNode -> editor.api.previous
    • getPreviousNodeEndPoint -> editor.api.end({ previous: true })
    • getPreviousSiblingNode -> editor.api.previous({ at, sibling: true })
    • getRange -> editor.api.range
    • getRangeBefore -> editor.api.range('before', to, { before })
    • getRangeFromBlockStart -> editor.api.range('start', to)
    • getRangeRefs -> editor.api.rangeRefs
    • getSelectionFragment -> editor.api.fragment(editor.selection, { structuralTypes })
    • getSelectionText -> editor.api.string()
    • getStartPoint -> editor.api.start
    • getVoidNode -> editor.api.void
    • hasBlocks -> editor.api.hasBlocks
    • hasEditorDOMNode -> editor.api.hasDOMNode
    • hasEditorEditableTarget -> editor.api.hasEditableTarget
    • hasEditorSelectableTarget -> editor.api.hasSelectableTarget
    • hasEditorTarget -> editor.api.hasTarget
    • hasInlines -> editor.api.hasInlines
    • hasTexts -> editor.api.hasTexts
    • insertBreak -> editor.tf.insertBreak
    • insertData -> editor.tf.insertData
    • insertElements -> editor.tf.insertNodes<TElement>
    • insertEmptyElement -> editor.tf.insertNodes(editor.api.create.block({ type }))
    • insertFragment -> editor.tf.insertFragment
    • insertNode -> editor.tf.insertNode
    • insertNodes -> editor.tf.insertNodes
    • insertText -> editor.tf.insertText
    • isAncestorEmpty -> editor.api.isEmpty
    • isBlock -> editor.api.isBlock
    • isBlockAboveEmpty -> editor.api.isEmpty(editor.selection, { block: true })
    • isBlockTextEmptyAfterSelection -> editor.api.isEmpty(editor.selection, { after: true })
    • isCollapsed(editor.selection) -> editor.api.isCollapsed()
    • isComposing -> editor.api.isComposing
    • isDocumentEnd -> editor.api.isEditorEnd
    • isEdgePoint -> editor.api.isEdge
    • isEditor -> editor.api.isEditor
    • isEditorEmpty -> editor.api.isEmpty()
    • isEditorFocused -> editor.api.isFocused
    • isEditorNormalizing -> editor.api.isNormalizing
    • isEditorReadOnly -> editor.api.isReadOnly
    • isElementEmpty -> editor.api.isEmpty
    • isElementReadOnly -> editor.api.elementReadOnly
    • isEndPoint -> editor.api.isEnd
    • isExpanded(editor.selection) -> editor.api.isCollapsed()
    • isInline -> editor.api.isInline
    • isMarkableVoid -> editor.api.markableVoid
    • isMarkActive -> editor.api.hasMark(key)
    • isPointAtWordEnd -> editor.api.isAt({ at, word: true, end: true })
    • `i...

@udecode/[email protected]

Major Changes

• #3920 by @zbeyens – This package is now deprecated. Use @udecode/slate or @udecode/plate instead.

@udecode/[email protected]

Major Changes

• #3920 by @zbeyens – This package is now deprecated. Use @udecode/slate or @udecode/plate instead.

@udecode/[email protected]

Patch Changes

• #3920 by @zbeyens –
  • Added a new hook, useMemoizedSelector, which re-renders only when the selector’s result changes.

@udecode/[email protected]

@udecode/[email protected]

@udecode/[email protected]

Major Changes

• #3920 by @zbeyens – This package is now the new common package, so all plugin packages are being removed. Migration:

  • Add the following dependencies:

  "@udecode/plate-alignment": "42.0.0",
  "@udecode/plate-autoformat": "42.0.0",
  "@udecode/plate-basic-elements": "42.0.0",
  "@udecode/plate-basic-marks": "42.0.0",
  "@udecode/plate-block-quote": "42.0.0",
  "@udecode/plate-break": "42.0.0",
  "@udecode/plate-code-block": "42.0.0",
  "@udecode/plate-combobox": "42.0.0",
  "@udecode/plate-comments": "42.0.0",
  "@udecode/plate-csv": "42.0.0",
  "@udecode/plate-diff": "42.0.0",
  "@udecode/plate-docx": "42.0.0",
  "@udecode/plate-find-replace": "42.0.0",
  "@udecode/plate-floating": "42.0.0",
  "@udecode/plate-font": "42.0.0",
  "@udecode/plate-heading": "42.0.0",
  "@udecode/plate-highlight": "42.0.0",
  "@udecode/plate-horizontal-rule": "42.0.0",
  "@udecode/plate-indent": "42.0.0",
  "@udecode/plate-indent-list": "42.0.0",
  "@udecode/plate-kbd": "42.0.0",
  "@udecode/plate-layout": "42.0.0",
  "@udecode/plate-line-height": "42.0.0",
  "@udecode/plate-link": "42.0.0",
  "@udecode/plate-list": "42.0.0",
  "@udecode/plate-markdown": "42.0.0",
  "@udecode/plate-media": "42.0.0",
  "@udecode/plate-mention": "42.0.0",
  "@udecode/plate-node-id": "42.0.0",
  "@udecode/plate-normalizers": "42.0.0",
  "@udecode/plate-reset-node": "42.0.0",
  "@udecode/plate-resizable": "42.0.0",
  "@udecode/plate-select": "42.0.0",
  "@udecode/plate-selection": "42.0.0",
  "@udecode/plate-slash-command": "42.0.0",
  "@udecode/plate-suggestion": "42.0.0",
  "@udecode/plate-tabbable": "42.0.0",
  "@udecode/plate-table": "42.0.0",
  "@udecode/plate-toggle": "42.0.0",
  "@udecode/plate-trailing-block": "42.0.0"

  • Either replace all @udecode/plate imports with the individual package imports, or export the following in a new file (e.g. src/plate.ts):

  export * from '@udecode/plate-alignment';
  export * from '@udecode/plate-autoformat';
  export * from '@udecode/plate-basic-elements';
  export * from '@udecode/plate-basic-marks';
  export * from '@udecode/plate-block-quote';
  export * from '@udecode/plate-break';
  export * from '@udecode/plate-code-block';
  export * from '@udecode/plate-combobox';
  export * from '@udecode/plate-comments';
  export * from '@udecode/plate-diff';
  export * from '@udecode/plate-find-replace';
  export * from '@udecode/plate-font';
  export * from '@udecode/plate-heading';
  export * from '@udecode/plate-highlight';
  export * from '@udecode/plate-horizontal-rule';
  export * from '@udecode/plate-indent';
  export * from '@udecode/plate-indent-list';
  export * from '@udecode/plate-kbd';
  export * from '@udecode/plate-layout';
  export * from '@udecode/plate-line-height';
  export * from '@udecode/plate-link';
  export * from '@udecode/plate-list';
  export * from '@udecode/plate-media';
  export * from '@udecode/plate-mention';
  export * from '@udecode/plate-node-id';
  export * from '@udecode/plate-normalizers';
  export * from '@udecode/plate-reset-node';
  export * from '@udecode/plate-select';
  export * from '@udecode/plate-csv';
  export * from '@udecode/plate-docx';
  export * from '@udecode/plate-markdown';
  export * from '@udecode/plate-slash-command';
  export * from '@udecode/plate-suggestion';
  export * from '@udecode/plate-tabbable';
  export * from '@udecode/plate-table';
  export * from '@udecode/plate-toggle';
  export * from '@udecode/plate-trailing-block';
  export * from '@udecode/plate-alignment/react';
  export * from '@udecode/plate-autoformat/react';
  export * from '@udecode/plate-basic-elements/react';
  export * from '@udecode/plate-basic-marks/react';
  export * from '@udecode/plate-block-quote/react';
  export * from '@udecode/plate-break/react';
  export * from '@udecode/plate-code-block/react';
  export * from '@udecode/plate-combobox/react';
  export * from '@udecode/plate-comments/react';
  export * from '@udecode/plate-floating';
  export * from '@udecode/plate-font/react';
  export * from '@udecode/plate-heading/react';
  export * from '@udecode/plate-highlight/react';
  export * from '@udecode/plate-layout/react';
  export * from '@udecode/plate-slash-command/react';
  export * from '@udecode/plate-indent/react';
  export * from '@udecode/plate-indent-list/react';
  export * from '@udecode/plate-kbd/react';
  export * from '@udecode/plate-line-height/react';
  export * from '@udecode/plate-link/react';
  export * from '@udecode/plate-list/react';
  export * from '@udecode/plate-media/react';
  export * from '@udecode/plate-reset-node/react';
  export * from '@udecode/plate-selection';
  export * from '@udecode/plate-suggestion/react';
  export * from '@udecode/plate-tabbable/react';
  export * from '@udecode/plate-table/react';
  export * from '@udecode/plate-toggle/react';
  export * from '@udecode/plate-resizable';

  • Replace all '@udecode/plate' and '@udecode/plate/react' with '@/plate' in your codebase.

@udecode/[email protected]

@udecode/[email protected]